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.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-dom": "^18.0",
+    "@types/react": "^18.3.5",
     "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) {
-  return <a {...rest}>{children}</a>;
+export function Option({ children, href, className, onClick }: Props) {
+  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
-              key={ayah.id}
-              className="ayah fade mb-5"
-            >
-              <span className={classNames("flex h-8 items-center", {"mb-2": rtl})}>
+            <li key={ayah.id} className="ayah fade mb-5">
+              <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/surah-index.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
+    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/surah-stream.js?v=${rev}`, { id: 1 }),
+    item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
+    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;
+}