Fix (most) TypeScript errors

This commit is contained in:
0x1eef 2024-08-31 00:25:04 -03:00
parent 105b7b18cb
commit 21263d4574
11 changed files with 87 additions and 37 deletions

1
Rules
View file

@ -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:}
##

View file

@ -4,6 +4,7 @@ AllCops:
TargetRubyVersion: 3.2
Exclude:
- submodules/**/*
- source/**/*
Include:
- Rakefile.rb
- rake/tasks/*.rake

View file

@ -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/",

View file

@ -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"],
},

54
package-lock.json generated
View file

@ -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",
@ -714,9 +716,9 @@
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.3.4",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
"integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
"version": "18.3.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
"integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -724,16 +726,6 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.3.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz",
@ -3336,6 +3328,36 @@
"safe-buffer": "^5.1.0"
}
},
"node_modules/react": {
"name": "@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/react-dom": {
"name": "@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/react-jsxruntime": {
"name": "@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/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

View file

@ -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",

View file

@ -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>
);
}

View file

@ -37,11 +37,10 @@ export function Stream({
>
{stream.map((ayah: Ayah) => {
return (
<li
key={ayah.id}
className="ayah fade mb-5"
<li key={ayah.id} className="ayah fade mb-5">
<span
className={classNames("flex h-8 items-center", { "mb-2": rtl })}
>
<span className={classNames("flex h-8 items-center", {"mb-2": rtl})}>
<AudioControl
hidden={!(isPaused || endOfStream)}
audio={new Audio()}

View file

@ -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));
});

View file

@ -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));
});

11
src/js/typings/globals.d.ts vendored Normal file
View file

@ -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;
}