Reduce typescript errors

etc/tsconfig.json

@@ -1,16 +1,19 @@
 {
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
-  "exclude": ["../node_modules"],
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx",
+  ],
   "compilerOptions": {
     "strict": true,
+    "noImplicitAny": true,
     "module": "commonjs",
     "target": "ES5",
-    "noImplicitAny": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
-
+    "typeRoots": ["../src/js/types/globals.d.ts", "../node_modules/@types"],
+    "skipLibCheck": true,
     "baseUrl": "../src/",
     "paths": {
       "~/*": ["./js/*"],

package-lock.json

@@ -10,10 +10,12 @@
       ],
       "dependencies": {
         "@0x1eef/quran": "file:./packages/typescript/Quran",
-        "@preact/compat": "^17.1.2",
         "classnames": "^2.3",
         "preact": "^10.23.2",
-        "preact-router": "^4.1.2"
+        "preact-router": "^4.1.2",
+        "react": "npm:@preact/compat",
+        "react-dom": "npm:@preact/compat",
+        "react-jsxruntime": "npm:@preact/compat"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.25.4",
@@ -2147,15 +2149,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@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/@types/css-font-loading-module": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.13.tgz",
@@ -5099,6 +5092,36 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/react": {
+      "name": "@preact/compat",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-18.3.1.tgz",
+      "integrity": "sha512-Kog4PSRxtT4COtOXjsuQPV1vMXpUzREQfv+6Dmcy9/rMk0HOPK0HTE9fspFjAmY8R80T/T8gtgmZ68u5bOSngw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-dom": {
+      "name": "@preact/compat",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-18.3.1.tgz",
+      "integrity": "sha512-Kog4PSRxtT4COtOXjsuQPV1vMXpUzREQfv+6Dmcy9/rMk0HOPK0HTE9fspFjAmY8R80T/T8gtgmZ68u5bOSngw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": "*"
+      }
+    },
+    "node_modules/react-jsxruntime": {
+      "name": "@preact/compat",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@preact/compat/-/compat-18.3.1.tgz",
+      "integrity": "sha512-Kog4PSRxtT4COtOXjsuQPV1vMXpUzREQfv+6Dmcy9/rMk0HOPK0HTE9fspFjAmY8R80T/T8gtgmZ68u5bOSngw==",
+      "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,10 +10,12 @@
   },
   "dependencies": {
     "@0x1eef/quran": "file:./packages/typescript/Quran",
-    "@preact/compat": "^17.1.2",
-    "classnames": "^2.3",
     "preact": "^10.23.2",
-    "preact-router": "^4.1.2"
+    "preact-router": "^4.1.2",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
+    "react-jsxruntime": "npm:@preact/compat",
+    "classnames": "^2.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.25.4",

src/js/components/RandomSurah/index.tsx

@@ -5,11 +5,13 @@ type Props = {
 export function RandomSurah({ localeId }: Props) {
   const randomId = Math.floor(Math.random() * Quran.surahs[localeId].length);
   const href = `/${localeId}/${randomId + 1}`;
-  const ref = useRef();
+  const ref = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     const anchor = ref.current;
-    anchor.click();
+    if (anchor) {
+      anchor.click();
+    }
   }, [ref.current]);
 
   return <a href={href} ref={ref}></a>;

src/js/components/Select/LanguageSelect.tsx

@@ -25,10 +25,10 @@ export function LanguageSelect({ locale, setLocale }: Props) {
               l.name === locale.name ? "active font-bold" : undefined,
             )}
             value={l.name}
-            onClick={(e: React.ChangeEvent) => [
-              e.preventDefault(),
-              setLocale(l),
-            ]}
+            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+              e.preventDefault();
+              setLocale(l);
+            }}
           >
             {l.displayName}
           </Select.Option>

src/js/components/Select/Option.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode, AnchorHTMLAttributes } from "react";
-import { Link } from "preact-router/match";
 type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
 type Props = {
   value: string;
@@ -7,5 +6,5 @@ type Props = {
 } & Rest;
 
 export function Option({ children, ...rest }: Props) {
-  return <Link {...rest}>{children}</Link>;
+  return <a {...rest}>{children}</a>;
 }

src/js/components/SurahIndex/index.tsx

@@ -6,7 +6,7 @@ import { Head } from "~/components/Head";
 import "@css/main/SurahIndex.scss";
 
 type Props = {
-  localeId: TLocale;
+  localeId: string;
   t: TFunction;
 };
 
@@ -36,7 +36,9 @@ export function SurahIndex({ localeId, t }: Props) {
 
   function getNextScrollTop(e: KeyboardEvent) {
     const ul = ulRef.current;
-    if (e.key === "ArrowDown") {
+    if (!ul) {
+      return 0;
+    } else if (e.key === "ArrowDown") {
       return ul.scrollTop - 35;
     } else if (e.key === "ArrowUp") {
       return ul.scrollTop + 35;
@@ -47,11 +49,15 @@ export function SurahIndex({ localeId, t }: Props) {
 
   function onKeyPress(e: KeyboardEvent) {
     const ul = ulRef.current;
-    const anchor = getNextRef(e).current;
-    if (anchor) {
-      anchor.focus();
-      ul.scroll({ behavior: "auto" });
-      ul.scrollTop = getNextScrollTop(e);
+    if (!ul) {
+      return;
+    } else {
+      const anchor = getNextRef(e)?.current;
+      if (anchor) {
+        anchor.focus();
+        ul.scroll({ behavior: "auto" });
+        ul.scrollTop = getNextScrollTop(e);
+      }
     }
   }
 

src/js/components/SurahStream/index.tsx

@@ -16,8 +16,8 @@ import "@css/main/SurahStream.scss";
 type Maybe<T> = T | null | undefined;
 
 type Props = {
-  surah: Surah;
-  locale: TLocale;
+  surahId: string;
+  localeId: string;
   t: TFunction;
 };
 
@@ -25,7 +25,7 @@ export function SurahStream({ surahId, localeId, t }: Props) {
   const [theme, setTheme] = useTheme();
   const [locale, setLocale] = useState<TLocale>(Quran.locales[localeId]);
   const surahs = useMemo(() => Quran.surahs[locale.name], [locale.name]);
-  const [surah, setSurah] = useState<Surah>(surahs[parseInt(surahId) - 1]);
+  const [surah, setSurah] = useState<Surah>(surahs[Number(surahId) - 1]);
 
   const [stream, setStream] = useState<TAyat>([]);
   const [isPaused, setIsPaused] = useState<boolean>(false);
@@ -39,7 +39,7 @@ export function SurahStream({ surahId, localeId, t }: Props) {
   const ayah: Maybe<Ayah> = stream[stream.length - 1];
 
   useEffect(() => {
-    setSurah(surahs[surahId - 1]);
+    setSurah(surahs[Number(surahId) - 1]);
   }, [locale.name]);
 
   useEffect(() => {

src/js/index.tsx

@@ -4,7 +4,7 @@
 import { render, createRef } from "preact";
 import * as React from "preact/compat";
 import { useState, useEffect, useMemo, useRef } from "preact/hooks";
-import { Router } from "preact-router";
+import Router, { Route } from "preact-router";
 
 /**
  * import: components
@@ -45,13 +45,19 @@ const App = (function () {
   const t = T(require("@json/t.json"));
   return () => {
     return (
+      /* @ts-ignore */
       <Router>
-        <SurahRedirect path="/index.html" />
-        <SurahIndex path="/:localeId/index.html" t={t} />
-        <SurahStream path="/:localeId/:surahId" t={t} />
-        <RandomSurah path="/:localeId/random" />
+	{/* @ts-ignore */}
+        <Route path="/index.html" component={SurahRedirect} />
+	{/* @ts-ignore */}
+        <Route path="/:localeId/index.html" component={SurahIndex} t={t} />
+	{/* @ts-ignore */}
+        <Route path="/:localeId/:surahId" component={SurahStream} t={t} />
+	{/* @ts-ignore */}
+        <Route path="/:localeId/random" component={RandomSurah} />
       </Router>
     );
   };
 })();
-render(<App />, document.querySelector(".mount"));
+
+render(<App />, document.querySelector(".mount")!);

src/js/types/globals.d.ts

@@ -0,0 +1,15 @@
+import { Quran as Q } from "@0x1eef/quran";
+import * as preact from "preact";
+import * as hooks from "preact/hooks";
+import classn from "classnames";
+
+declare global {
+  const Quran: typeof Q;
+  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;
+  const createRef: typeof preact.createRef;
+  const classNames: typeof classn;
+}