Typescript errors: zero

etc/tsconfig.json

@@ -10,6 +10,7 @@
     "target": "ES5",
     "moduleResolution": "node",
     "esModuleInterop": true,
+    "jsxImportSource": "preact",
     "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
     "typeRoots": ["../src/js/types/globals.d.ts", "../node_modules/@types"],

src/js/components/Select/LanguageSelect.tsx

@@ -42,7 +42,7 @@ export function LanguageSelect() {
         const ctx = el?.getAttribute("data-context");
         if (ctx === "language-select") {
           const anchor = getNextRef(e, refs)?.current;
-          anchor.focus();
+          anchor?.focus();
         }
       }
     }

src/js/components/Select/Option.tsx

@@ -2,7 +2,7 @@ import type { ReactNode, AnchorHTMLAttributes, ForwardedRef } from "preact/compa
 type Rest = AnchorHTMLAttributes<HTMLAnchorElement>;
 type Props = {
   value: string;
-  children: ReactNode;
+  children?: ReactNode;
 } & Rest;
 
 function Component(props: Props, ref: ForwardedRef<HTMLAnchorElement>) {

src/js/components/Select/ThemeSelect.tsx

@@ -36,7 +36,7 @@ export function ThemeSelect() {
         const ctx = el?.getAttribute("data-context");
         if (ctx === "theme-select") {
           const anchor = getNextRef(e, refs)?.current;
-          anchor.focus();
+          anchor?.focus();
         }
       }
     }

src/js/components/SurahStream/index.tsx

@@ -45,9 +45,8 @@ export function SurahStream({ surahId, localeId, t }: Props) {
         history.back();
       }
     }
-    const el = document.activeElement;
-    el.addEventListener("keydown", onKeyPress);
-    return () => el.removeEventListener("keydown", onKeyPress);
+    document.addEventListener("keydown", onKeyPress);
+    return () => document.removeEventListener("keydown", onKeyPress);
   }, []);
 
   useEffect(() => {

src/js/index.tsx

@@ -62,15 +62,10 @@ const App = (function () {
     const [locale, setLocale] = useLocale();
     return (
       <SettingsContext.Provider value={{ locale, setLocale, theme, setTheme }}>
-        {/* @ts-expect-error fixme */}
         <Router>
-          {/* @ts-expect-error fixme */}
           <Route path="/index.html" component={SurahRedirect} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/index.html" component={SurahIndex} t={t} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/:surahId" component={SurahStream} t={t} />
-          {/* @ts-expect-error fixme */}
           <Route path="/:localeId/random" component={RandomSurah} />
         </Router>
       </SettingsContext.Provider>