lint

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    parserOptions: {
+        project: ['./tsconfig.eslint.json', './server/tsconfig.json']
+    },
+    ignorePatterns: ['vite.config.ts', 'dist'],
+};

package.json

@@ -13,6 +13,7 @@
     "vite-plugin-dts": "^3.3.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "eslint": "^8.57.0",
     "standard": "^17.0.0",
     "ts-standard": "^12.0.1"

tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["server/src/**/*.ts"]
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "CommonJS",
+    "lib": ["esnext"],
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "esModuleInterop": true,
+
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "server/src/**/*.ts",
+    "shared/**/*.ts",
+    "web/src/**/*.tsx"
+  ]
+}

web/package.json

@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-typescript": "^7.23.3",
     "@testing-library/jest-dom": "^6.4.2",

web/src/components/main.tsx

@@ -8,12 +8,11 @@ export const Main = memo(() => {
     const client = useContext(ClientContext);
 
     const quoteLoad = useLoad(async (abort) => {
-        console.log('hehehehe')
         const response = await fetch('https://bible-api.com/john 3:16', { signal: abort }).then((res) => res.json());
         return response.text
     }, []);
 
-    const [_addLoadState, doAdd] = useTriggerLoad(async (abort) => {
+    const [addLoadState, doAdd] = useTriggerLoad(async (abort) => {
         if (!client) {
             return
         }
@@ -32,7 +31,11 @@ export const Main = memo(() => {
     return (
         <div>
             <blockquote>{quoteLoad.value}</blockquote>
-            <button onClick={() => { doAdd() }}>Add</button>
+            {addLoadState.pending ? (
+                <div>Adding...</div>
+            ) : (
+                <button onClick={() => { doAdd() }}>Add</button>
+            )}
         </div>
     );
 });

web/src/util/hook.ts

@@ -1,18 +1,19 @@
 import { useCallback, useRef } from "react";
-
+/* eslint-disable react-hooks/exhaustive-deps */
 
 /**
  * Returns function with stable reference for the passed callback.
  */
 export function useHandler<F extends Function>(fn: F): F {
-    const ref = useRef<F>();
+    const ref = useRef<F>(fn);
+
     ref.current = fn;
+
     return useCallback(
-        // Cannot define args using Parameters<F> when F extends Function
-        // https://github.com/microsoft/TypeScript/issues/31881
         (function (this: ThisType<F>, ...args: unknown[]) {
             return Reflect.apply(ref.current!, this, args);
         } as Function) as F,
-            [],
-            );
-            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+}