Reduce typescript errors
This commit is contained in:
parent
43c9ece990
commit
707aedcfd0
10 changed files with 100 additions and 44 deletions
|
@ -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/*"],
|
||||
|
|
45
package-lock.json
generated
45
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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")!);
|
||||
|
|
15
src/js/types/globals.d.ts
vendored
Normal file
15
src/js/types/globals.d.ts
vendored
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue