Fix (most) TypeScript errors

Rules

@@ -24,7 +24,6 @@ tdata      = Ryo.from_json(path: File.join(dirs.content, "json", "t.json"))
 surahs     = Ryo.from_json(path: File.join(dirs.content, "json", "surahs.json"))
 tidy       = `which tidy || which tidy5`.chomp
 buildenv   = ENV["buildenv"] || "development"
-etcdir     = File.join(__dir__, "etc")
 globals = {buildenv:, locales:, tidy:, tdata:, surahs:, name_by_id:}
 
 ##

etc/rubocop.yml

@@ -4,6 +4,7 @@ AllCops:
   TargetRubyVersion: 3.2
   Exclude:
     - submodules/**/*
+    - source/**/*
   Include:
     - Rakefile.rb
     - rake/tasks/*.rake

etc/tsconfig.json

@@ -1,5 +1,9 @@
 {
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
+  "include": [
+    "../src/js/typings/globals.d.ts",
+    "../src/**/*.ts",
+    "../src/**/*.tsx",
+  ],
   "exclude": ["../node_modules"],
   "compilerOptions": {
     "strict": true,
@@ -8,7 +12,7 @@
     "noImplicitAny": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
 
     "baseUrl": "../src/",

etc/webpack.common.js

@@ -7,6 +7,10 @@ module.exports = {
       "@css": path.resolve(__dirname, "..", "src", "css"),
       "@json": path.resolve(__dirname, "..", "src", "json"),
       "~": path.resolve(__dirname, "..", "src", "js"),
+      "react": "preact/compat",
+      "react-dom/test-utils": "preact/test-utils",
+      "react-dom": "preact/compat",
+      "react/jsx-runtime": "preact/jsx-runtime",
     },
     extensions: [".js", ".ts", ".tsx", ".json", ".css", ".scss"],
   },

package-lock.json

@@ -10,12 +10,14 @@
       ],
       "dependencies": {
         "classnames": "^2.3",
-        "preact": "^10.23.2"
+        "preact": "^10.23.2",
+        "react": "npm:@preact/compat",
+        "react-dom": "npm:@preact/compat",
+        "react-jsxruntime": "npm:@preact/compat"
       },
       "devDependencies": {
         "@types/css-font-loading-module": "^0.0.13",
-        "@types/react": "^18.0",
+        "@types/react": "^18.3.5",
-        "@types/react-dom": "^18.0",
         "css-loader": "^7.1",
         "esbuild-loader": "^4.1",
         "eslint": "^9.8",
@@ -714,9 +716,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.4",
+      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
-      "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
+      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -724,16 +726,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz",
@@ -3336,6 +3328,36 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/react": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-dom": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-jsxruntime": {
+      "name": "@preact/compat",
+      "version": "17.1.2",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-17.1.2.tgz",
+      "integrity": "sha512-7pOZN9lMDDRQ+6aWvjwTp483KR8/zOpfS83wmOo3zfuLKdngS8/5RLbsFWzFZMGdYlotAhX980hJ75bjOHTwWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "classnames": "^2.3",
-    "preact": "^10.23.2"
+    "preact": "^10.23.2",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
+    "react-jsxruntime": "npm:@preact/compat"
   },
   "devDependencies": {
     "@types/css-font-loading-module": "^0.0.13",
-    "@types/react": "^18.0",
+    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.0",
     "css-loader": "^7.1",
     "esbuild-loader": "^4.1",
     "eslint": "^9.8",

src/js/components/Select/Option.tsx

@@ -1,9 +1,17 @@
-type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
+import type { ReactNode } from "preact/compat";
+
 type Props = {
   value: string;
+  href?: string | undefined;
+  className?: string;
+  onClick?: () => void;
   children: ReactNode;
-} & Rest;
+};
 
-export function Option({ children, ...rest }: Props) {
+export function Option({ children, href, className, onClick }: Props) {
-  return <a {...rest}>{children}</a>;
+  return (
+    <a href={href || "#"} className={className} onClick={onClick}>
+      {String(children)}
+    </a>
+  );
 }

src/js/components/SurahStream/Stream.tsx

@@ -37,11 +37,10 @@ export function Stream({
       >
         {stream.map((ayah: Ayah) => {
           return (
-            <li
+            <li key={ayah.id} className="ayah fade mb-5">
-              key={ayah.id}
+              <span
-              className="ayah fade mb-5"
+                className={classNames("flex h-8 items-center", { "mb-2": rtl })}
-            >
+              >
-              <span className={classNames("flex h-8 items-center", {"mb-2": rtl})}>
                 <AudioControl
                   hidden={!(isPaused || endOfStream)}
                   audio={new Audio()}

src/js/loaders/SurahIndexLoader.ts

@@ -18,8 +18,8 @@ import { formatNumber } from "~/lib/t";
   const progressBar: HTMLProgressElement = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
   postman(
-    item.script(`/js/main/vendor.js?v=${rev}`, { id: 0 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
-    item.script(`/js/main/surah-index.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
     item.progress((percent: number) => {
       progressBar.value = percent;
@@ -35,7 +35,7 @@ import { formatNumber } from "~/lib/t";
       pkg.fonts.forEach((f) => document.fonts.add(f));
       pkg.css.forEach((s) => document.head.appendChild(s));
       pkg.scripts
-        .sort((s) => s.id)
+        .sort((s) => Number(s.id))
         .forEach((s) => {
           document.body.removeChild(document.body.appendChild(s));
         });

src/js/loaders/SurahStreamLoader.ts

@@ -19,8 +19,8 @@ import { formatNumber } from "~/lib/t";
   const progressBar = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
   postman(
-    item.script(`/js/main/vendor.js?v=${rev}`, { id: 0 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
-    item.script(`/js/main/surah-stream.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
     /* eslint-disable */
     item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }),
@@ -42,7 +42,7 @@ import { formatNumber } from "~/lib/t";
       pkg.css.forEach((s) => document.head.appendChild(s));
       pkg.json.forEach((o) => document.body.appendChild(o));
       pkg.scripts
-        .sort((s) => s.id)
+        .sort((s) => Number(s.id))
         .forEach((s) => {
           document.body.removeChild(document.body.appendChild(s));
         });

src/js/typings/globals.d.ts

@@ -0,0 +1,11 @@
+import * as preact from "preact";
+import * as hooks from "preact/hooks";
+import fn from "classnames";
+
+declare global {
+  const render: typeof preact.render;
+  const useState: typeof hooks.useState;
+  const useEffect: typeof hooks.useEffect;
+  const useRef: typeof hooks.useRef;
+  const useMemo: typeof hooks.useMemo;
+}