chore: upgrade dependencies

Author: Josh-Cena

.eslintignore

@@ -0,0 +1,25 @@
+// @ts-check
+
+import jcRules from "eslint-config-jc";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  ...jcRules({
+    node: true,
+    react: true,
+    typescriptTypeCheck: true,
+  }),
+  {
+    ignores: ["node_modules", ".yarn", "dist", "build"],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+      },
+    },
+    rules: {
+      "import/no-extraneous-dependencies": "off",
+    },
+  },
+);

.eslintrc

@@ -10,67 +10,68 @@
     "build": "vite build --outDir dist/static && vite build --ssr src/server-entry.tsx --outDir dist/server && node --loader=ts-node/esm --no-warnings=ExperimentalWarning server/pre-render.ts",
     "preview": "vite preview",
     "format": "prettier -w .",
-    "lint": "eslint \"**/*.{js,ts,jsx,tsx}\"",
+    "lint": "eslint .",
     "spellcheck": "cspell \"**\" --no-progress",
     "prepare": "husky install"
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.1.1",
   "devDependencies": {
     "@types/color": "^3.0.6",
     "@types/express": "^4.17.21",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.12.7",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.2.41",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/react-helmet-async": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "cspell": "^8.1.0",
-    "eslint": "^8.55.0",
-    "eslint-config-jc": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
+    "cspell": "^8.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-jc": "^5.1.0",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-n": "^16.3.1",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-n": "^17.2.1",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-regexp": "^2.1.1",
-    "express": "^4.18.2",
-    "glob": "^10.3.10",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "prettier": "^3.1.0",
+    "eslint-plugin-regexp": "^2.5.0",
+    "express": "^4.19.2",
+    "glob": "^10.3.12",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "prettier-config-jc": "^2.3.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "tsconfig-jc": "^2.3.1",
-    "typescript": "~5.2.2",
-    "typescript-plugin-css-modules": "^5.0.2"
+    "typescript": "~5.4.5",
+    "typescript-eslint": "^7.7.1",
+    "typescript-plugin-css-modules": "^5.1.0"
   },
   "dependencies": {
-    "@mdx-js/react": "^3.0.0",
-    "@mdx-js/rollup": "^3.0.0",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "bash-parser": "patch:bash-parser@npm%3A0.5.0#~/.yarn/patches/bash-parser-npm-0.5.0-911330943d.patch",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "color": "^4.2.3",
     "copy-text-to-clipboard": "^3.2.0",
-    "core-js": "^3.33.3",
+    "core-js": "^3.37.0",
     "github-slugger": "^2.0.0",
-    "hast-util-to-text": "^4.0.0",
-    "prism-react-renderer": "^2.3.0",
+    "hast-util-to-text": "^4.0.2",
+    "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet-async": "^1.3.0",
-    "react-router-dom": "^6.20.1",
-    "react-tooltip": "^5.24.0",
+    "react-helmet-async": "^2.0.4",
+    "react-router-dom": "^6.23.0",
+    "react-tooltip": "^5.26.3",
     "rehype-katex": "^7.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
-    "use-local-storage-state": "^19.1.0",
-    "vite": "^5.0.4",
+    "use-local-storage-state": "^19.2.0",
+    "vite": "^5.2.10",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

eslint.config.mjs

@@ -1,4 +1,4 @@
-import FS from "node:fs";
+import FS from "node:fs/promises";
 import Path from "node:path";
 import { fileURLToPath } from "node:url";
 import express from "express";
@@ -34,11 +34,12 @@ export async function createServer(
   });
   app.use(viteServer.middlewares);
 
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   app.use("*", async (req, res) => {
     try {
       const url = req.originalUrl;
 
-      let template = FS.readFileSync(toAbsolute("../index.html"), "utf-8");
+      let template = await FS.readFile(toAbsolute("../index.html"), "utf-8");
       template = await viteServer.transformIndexHtml(url, template);
       const { render } = (await viteServer.ssrLoadModule(
         "/src/server-entry.tsx",
@@ -73,7 +74,7 @@ export async function createServer(
   return { app };
 }
 
-createServer().then(({ app }) =>
+void createServer().then(({ app }) =>
   app.listen(5173, () => {
     console.log("Dev server started on http://localhost:5173");
   }),

package.json

@@ -56,4 +56,4 @@ const promises = routesToPrerender.map(async (url) => {
     console.log(e);
   }
 });
-Promise.all(promises);
+void Promise.all(promises);

server/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
 import type { Dispatch, SetStateAction } from "react";
 import parseBash from "bash-parser";
 import { paths } from "@/routes";
@@ -85,8 +86,8 @@ export function handleCommand(
     });
     if (ast.commands.length !== 1 || ast.commands[0].type !== "Command")
       return [1, "The shell only supports single commands at the moment"];
-    const args = ((ast.commands[0].suffix as any[]) ?? []).filter(
-      (s: any) => s.type === "Word",
+    const args = ((ast.commands[0].suffix as any[] | undefined) ?? []).filter(
+      (s) => s.type === "Word",
     );
     switch (ast.commands[0].name.text) {
       case "cd": {
@@ -102,7 +103,7 @@ export function handleCommand(
         return [0, ""];
       }
       case "echo":
-        return [0, args.map((a: any) => a.text).join(" ")];
+        return [0, args.map((a) => a.text).join(" ")];
       case "export":
         setEnv({
           __proto__: null as never,
@@ -125,19 +126,19 @@ export function handleCommand(
           const originalConsoleWarn = console.warn;
           const originalConsoleError = console.error;
           const originalConsoleInfo = console.info;
-          window.console.log = (...values: any[]) => {
+          window.console.log = (...values) => {
             output += `${values.join(" ")}\n`;
           };
-          window.console.warn = (...values: any[]) => {
+          window.console.warn = (...values) => {
             output += `${values.join(" ")}\n`;
           };
-          window.console.error = (...values: any[]) => {
+          window.console.error = (...values) => {
             output += `${values.join(" ")}\n`;
           };
-          window.console.info = (...values: any[]) => {
+          window.console.info = (...values) => {
             output += `${values.join(" ")}\n`;
           };
-          // eslint-disable-next-line no-eval
+          // eslint-disable-next-line no-eval, @typescript-eslint/no-unnecessary-condition
           const res = eval?.(args[0]?.text ?? "");
           window.console.log = originalConsoleLog;
           window.console.warn = originalConsoleWarn;
@@ -175,7 +176,7 @@ export function handleCommand(
         return ls(args[0]?.text ?? ".", env.PWD!);
       case "open":
         if (args.length > 1) return [1, "open: too many arguments"];
-        navigate(new URL(args[0]?.text ?? ".", env.PWD!).pathname);
+        navigate(new URL(args[0]?.text ?? ".", env.PWD).pathname);
         return [0, ""];
       case "pwd":
         return [0, env.PWD!];

server/pre-render.ts

@@ -1,6 +1,6 @@
 import React, { Children, type ReactNode } from "react";
 import clsx from "clsx";
-import { Highlight, themes, type Language } from "prism-react-renderer";
+import { Highlight, themes } from "prism-react-renderer";
 import { useColorMode } from "@/context/ColorMode";
 import CopyButton from "@/components/CopyButton";
 import styles from "./index.module.css";
@@ -47,10 +47,7 @@ export default function CodeBlock({
       )}>
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
-        <Highlight
-          theme={theme}
-          code={code}
-          language={(language ?? "text") as Language}>
+        <Highlight theme={theme} code={code} language={language ?? "text"}>
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
             <pre
               // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

src/Layout/Command/commandHandler.tsx

@@ -12,7 +12,7 @@ export function SluggerProvider({
   const slugger = useMemo(() => new GithubSlugger(), []);
   useEffect(
     () => () => {
-      slugger?.reset();
+      slugger.reset();
     },
     [slugger],
   );
@@ -30,7 +30,8 @@ function getText(children: ReactNode): string {
   if (typeof children === "string") return children;
   if (Array.isArray(children))
     return children.map(getText).filter(Boolean).join(" ");
-  if (React.isValidElement(children)) return getText(children.props.children);
+  if (React.isValidElement(children))
+    return getText((children.props as { children?: ReactNode }).children);
   return "";
 }
 

src/components/CodeBlock/index.tsx

@@ -19,8 +19,8 @@ const posts = Object.entries(modules).map(
         const preview = (
           <section>
             <Link
-              href={path
-                .match(/\.\/(?<name>.*)\.mdx$/u)!
+              href={/\.\/(?<name>.*)\.mdx$/u
+                .exec(path)!
                 .groups!.name!.toLowerCase()
                 .replace(/index$/u, "")}>
               <h2>{frontMatter.title}</h2>

src/components/Heading/index.tsx

@@ -123,7 +123,7 @@ export default function RandomColor(): JSX.Element {
         const p = nextPixel.value;
         const [r, g, b] = Object.values(nextRGB.value).map((x) =>
           Math.floor(x * 255),
-        );
+        ) as [number, number, number];
         ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
         ctx.fillRect(p.x * scale, p.y * scale, scale, scale);
       }

src/pages/blog/index.tsx

@@ -1,10 +1,14 @@
-import { useState, type ReactNode } from "react";
+import { useState, type ReactNode, type ReactElement } from "react";
 import Color from "color";
 import Link from "@/components/Link";
 import CopyButton from "@/components/CopyButton";
 import styles from "./index.module.css";
 
-function Tabs({ children }: { readonly children: JSX.Element[] }) {
+function Tabs({
+  children,
+}: {
+  readonly children: ReactElement<{ label: string }>[];
+}) {
   const [selected, setSelected] = useState(0);
   return (
     <div className={styles.colorInputs}>
@@ -80,7 +84,9 @@ function ColorInput({
           ...Object.fromEntries(
             Array.from({ length: 11 }, (_, i) => [
               `--color-${i}`,
-              (color[method]((max / 10) * i) as Color).rgb().toString(),
+              color[method]((max / 10) * i)
+                .rgb()
+                .toString(),
             ]),
           ),
           // @ts-expect-error: custom CSS variables
@@ -90,7 +96,7 @@ function ColorInput({
         min={min}
         max={max}
         onInput={(e) => {
-          setColor(color[method](Number(e.currentTarget.value)) as Color);
+          setColor(color[method](Number(e.currentTarget.value)));
         }}
       />
     </label>

src/pages/notes/random-color.tsx

@@ -97,7 +97,7 @@ function Keys({
             styles.keyUnknown,
           key === "Dead" && styles.keyDead,
         )}>
-        {["Dead", "Unidentified"].includes(key as string) ? null : key}
+        {["Dead", "Unidentified"].includes(key!) ? null : key}
       </span>
     );
   });

src/pages/tools/color-converter/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { Helmet } from "react-helmet-async";
+import x from "react-helmet-async";
+
+const { Helmet } = x;
 
 // Auto generates routes from files under ./pages
 // https://vitejs.dev/guide/features.html#glob-import
@@ -11,7 +13,7 @@ const pages = import.meta.glob<
 
 export const routes = Object.entries(pages)
   .map(([path, module]) => {
-    const name = path.match(/\.\/pages\/(?<name>.*)\.(?:tsx|mdx)$/u)!.groups!
+    const name = /\.\/pages\/(?<name>.*)\.(?:tsx|mdx)$/u.exec(path)!.groups!
       .name!;
     return {
       path:

src/pages/tools/keyboard-visualizer/index.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { renderToPipeableStream } from "react-dom/server";
 import { StaticRouter } from "react-router-dom/server";
 import { Writable } from "node:stream";
-import { HelmetProvider, type FilledContext } from "react-helmet-async";
+import x, { type HelmetServerState } from "react-helmet-async";
 import App from "./App";
 import { SSRContextProvider, type SSRContextValue } from "./context/SSRContext";
 
+const { HelmetProvider } = x;
+
 // Inspired by https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/server-utils/writable-as-promise.js
 class WritableAsPromise extends Writable {
   #output: string;
@@ -34,7 +36,7 @@ class WritableAsPromise extends Writable {
     next();
   }
 
-  override _destroy(error: Error | null, next: (error?: Error | null) => void) {
+  override _destroy(error: Error | null, next: (err?: Error | null) => void) {
     if (error instanceof Error) this.#deferred.reject(error);
     else next();
   }
@@ -85,7 +87,9 @@ export async function render(
   });
 
   const body = await writableStream.getPromise();
-  const { helmet } = helmetContext as FilledContext;
+  const { helmet } = helmetContext as {
+    helmet: HelmetServerState;
+  };
 
   const htmlAttributes = helmet.htmlAttributes.toString();
   const bodyAttributes = helmet.bodyAttributes.toString();