From 707aedcfd0252f12cc73bdd869a55cc63ba20457 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Sat, 26 Oct 2024 05:09:51 -0300 Subject: [PATCH] Reduce typescript errors --- etc/tsconfig.json | 13 +++--- package-lock.json | 45 ++++++++++++++++----- package.json | 8 ++-- src/js/components/RandomSurah/index.tsx | 6 ++- src/js/components/Select/LanguageSelect.tsx | 8 ++-- src/js/components/Select/Option.tsx | 3 +- src/js/components/SurahIndex/index.tsx | 20 +++++---- src/js/components/SurahStream/index.tsx | 8 ++-- src/js/index.tsx | 18 ++++++--- src/js/types/globals.d.ts | 15 +++++++ 10 files changed, 100 insertions(+), 44 deletions(-) create mode 100644 src/js/types/globals.d.ts diff --git a/etc/tsconfig.json b/etc/tsconfig.json index 16b8c4f..ebd57af 100644 --- a/etc/tsconfig.json +++ b/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/*"], diff --git a/package-lock.json b/package-lock.json index d73a1d8..88973dc 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 32d49da..9726135 100644 --- a/package.json +++ b/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", diff --git a/src/js/components/RandomSurah/index.tsx b/src/js/components/RandomSurah/index.tsx index 752bcf6..ccfb323 100644 --- a/src/js/components/RandomSurah/index.tsx +++ b/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(null); useEffect(() => { const anchor = ref.current; - anchor.click(); + if (anchor) { + anchor.click(); + } }, [ref.current]); return ; diff --git a/src/js/components/Select/LanguageSelect.tsx b/src/js/components/Select/LanguageSelect.tsx index 9c01593..4fcad84 100644 --- a/src/js/components/Select/LanguageSelect.tsx +++ b/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) => { + e.preventDefault(); + setLocale(l); + }} > {l.displayName} diff --git a/src/js/components/Select/Option.tsx b/src/js/components/Select/Option.tsx index bf4c8d7..9e8d266 100644 --- a/src/js/components/Select/Option.tsx +++ b/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; type Props = { value: string; @@ -7,5 +6,5 @@ type Props = { } & Rest; export function Option({ children, ...rest }: Props) { - return {children}; + return {children}; } diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx index 06ebb2b..5424a4a 100644 --- a/src/js/components/SurahIndex/index.tsx +++ b/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); + } } } diff --git a/src/js/components/SurahStream/index.tsx b/src/js/components/SurahStream/index.tsx index 62ed21f..03fe119 100644 --- a/src/js/components/SurahStream/index.tsx +++ b/src/js/components/SurahStream/index.tsx @@ -16,8 +16,8 @@ import "@css/main/SurahStream.scss"; type Maybe = 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(Quran.locales[localeId]); const surahs = useMemo(() => Quran.surahs[locale.name], [locale.name]); - const [surah, setSurah] = useState(surahs[parseInt(surahId) - 1]); + const [surah, setSurah] = useState(surahs[Number(surahId) - 1]); const [stream, setStream] = useState([]); const [isPaused, setIsPaused] = useState(false); @@ -39,7 +39,7 @@ export function SurahStream({ surahId, localeId, t }: Props) { const ayah: Maybe = stream[stream.length - 1]; useEffect(() => { - setSurah(surahs[surahId - 1]); + setSurah(surahs[Number(surahId) - 1]); }, [locale.name]); useEffect(() => { diff --git a/src/js/index.tsx b/src/js/index.tsx index 0a53b77..7660785 100644 --- a/src/js/index.tsx +++ b/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 */ - - - - + {/* @ts-ignore */} + + {/* @ts-ignore */} + + {/* @ts-ignore */} + + {/* @ts-ignore */} + ); }; })(); -render(, document.querySelector(".mount")); + +render(, document.querySelector(".mount")!); diff --git a/src/js/types/globals.d.ts b/src/js/types/globals.d.ts new file mode 100644 index 0000000..c338c86 --- /dev/null +++ b/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; +}