Add typescript checker plugin for vite, fixed typing errors

.eslintrc.cjs

@@ -20,27 +20,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
   plugins: ["react", "@typescript-eslint"],
-  // typescript-eslint disables a bunch of rules that tsc would catch, but vite refuses to
+  rules: {},
-  // add compiler errors to output, so here we are
-  rules: {
-    "constructor-super": "error",
-    "getter-return": "error",
-    "no-const-assign": "error",
-    "no-dupe-args": "error",
-    "no-dupe-class-members": "error",
-    "no-dupe-keys": "error",
-    "no-func-assign": "error",
-    "no-import-assign": "error",
-    "no-new-symbol": "error",
-    "no-obj-calls": "error",
-    "no-redeclare": "error",
-    "no-setter-return": "error",
-    "no-this-before-super": "error",
-    "no-undef": "error",
-    "no-unreachable": "error",
-    "no-unsafe-negation": "error",
-    "valid-typeof": "error",
-  },
   settings: {
     react: {
       version: "detect",

package.json

@@ -34,6 +34,6 @@
     "prettier": "^2.8.3",
     "typescript": "^4.9.5",
     "vite": "^4.0.0",
-    "vite-plugin-eslint": "^1.8.1"
+    "vite-plugin-checker": "^0.5.5"
   }
 }

src/Display.tsx

@@ -29,7 +29,7 @@ const Display = () => {
 
       <Stack
         direction="horizontal"
-        gap={10}
+        gap={5}
         className="position-absolute bottom-0 w-100 d-flex justify-content-center"
       >
         {Object.entries(contestants).map(([sid, contestant]) => (

src/DrawPad.tsx

@@ -15,11 +15,11 @@ const cursorPos = (e: PointerEvent<HTMLCanvasElement>) => {
 };
 
 const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
-  const parent = useRef<HTMLElement>();
+  const parent = useRef<HTMLDivElement>(null);
-  const canvas = useRef<HTMLCanvasElement>();
+  const canvas = useRef<HTMLCanvasElement>(null);
   const [width, setWidth] = useState(0);
   const [down, setDown] = useState(false);
-  const [path, setPath] = useState([]);
+  const [path, setPath] = useState<number[]>([]);
   const pen = canvas.current?.getContext("2d");
 
   const render = () => {
@@ -43,18 +43,18 @@ const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
   };
 
   useEffect(() => {
-    setWidth(parent.current?.getBoundingClientRect().width);
+    setWidth(parent.current?.getBoundingClientRect().width || 0);
     render();
   }, [parent, pen, lines]);
 
   const beginLine = () => {
-    if (readonly) return;
+    if (readonly || !pen) return;
     pen.beginPath();
     setDown(true);
   };
 
   const drawLine = (e: PointerEvent<HTMLCanvasElement>) => {
-    if (!down) return;
+    if (!down || !pen) return;
     const [x, y] = cursorPos(e);
     setPath([...path, x, y]);
     pen.lineTo(x, y);

src/host/ActiveClue.tsx

@@ -15,7 +15,7 @@ const ActiveClue = ({ activeClue }: Props) => {
   return (
     <Container>
       <p>{activeClue.question}</p>
-      <Stack gap="3" className="text-center">
+      <Stack gap={3} className="text-center">
         <Button onClick={() => dispatch(setActiveClue(null))}>
           Start Timer
         </Button>

src/socket.ts

@@ -23,7 +23,7 @@ export const setup = () => {
     }
   );
 
-  socket.on("categories", (data: Record<string, Clue>) => {
+  socket.on("categories", (data: Record<string, Clue[]>) => {
     store.dispatch(setCategories(data));
   });
 

src/utils.ts

@@ -1,4 +1,6 @@
 import { debounce as lodashDebounce } from "lodash";
 
-export const debounce = (fn: (...args: unknown[]) => unknown) =>
+type DebounceableFunction = Parameters<typeof lodashDebounce>[0];
+
+export const debounce = (fn: DebounceableFunction) =>
   lodashDebounce(fn, 1000, { leading: true, trailing: false });

vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+import { checker } from "vite-plugin-checker";
 import react from "@vitejs/plugin-react";
 import eslint from "vite-plugin-eslint";
 
@@ -8,12 +9,14 @@ export default defineConfig({
     host: true,
   },
   plugins: [
-    { ...react(), ...eslint(), apply: "build" },
     {
       ...react(),
-      ...eslint({ failOnWarning: false, failOnError: true }),
+      ...checker({
-      apply: "serve",
+        typescript: true,
-      enforce: "post",
+        eslint: {
+          lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
+        },
+      }),
     },
   ],
 });