Migrate to ESLint v9 with strict rules (#39)

* Update keywords

* Seems like we are getting somewhere

* This is hard

* Update configs

* Replace app lint with default next strict

* Getting there

* Web is linting

* Make it work finally

* Clean up

* Use types over interfaces

Author: 0x80

apps/web/.eslintrc.cjs

@@ -0,0 +1,34 @@
+// @ts-check
+/* eslint-disable */
+import { FlatCompat } from "@eslint/eslintrc";
+import baseConfig from "@repo/eslint-config/base";
+import tseslint from "typescript-eslint";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default tseslint.config(
+  ...baseConfig,
+  ...compat.config({
+    extends: ["next"],
+    settings: {
+      next: {
+        rootDir: "apps/web/", // required for monorepos
+      },
+    },
+  }),
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      "@typescript-eslint/use-unknown-in-catch-callback-variable": "off",
+    },
+  }
+);

apps/web/eslint.config.js

@@ -18,26 +18,25 @@
     "@typed-firestore/react": "1.0.0-0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "firebase": "^11.1.0",
-    "lucide-react": "^0.471.0",
-    "next": "15.1.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "firebase": "^11.2.0",
+    "lucide-react": "^0.473.0",
+    "next": "^15.1.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.7.3"
   },
   "devDependencies": {
     "@codecompose/typescript-config": "^1.2.0",
     "@repo/eslint-config": "workspace:*",
-    "@types/node": "^22.10.5",
-    "@types/react": "^19.0.6",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "del-cli": "^6.0.0",
-    "eslint": "8.57.0",
-    "eslint-config-next": "15.1.4",
-    "postcss": "^8.4.49",
+    "eslint-config-next": "^15.1.5",
+    "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17"
   }
 }

apps/web/next.config.mjs

@@ -22,6 +22,8 @@ export function CounterView(props: { counterId: string }) {
       />
     );
   } else {
-    return <div>No counter document available. Please press "reset".</div>;
+    return (
+      <div>No counter document available. Please press &quot;reset&quot;.</div>
+    );
   }
 }

apps/web/package.json

@@ -7,7 +7,7 @@ type FsValue = string | number | boolean | null | FsTimestamp;
 
 export default function KeyValueList(props: {
   data: Record<string, FsValue>;
-  labels: Array<[string, string]>;
+  labels: [string, string][];
 }) {
   const rows = props.labels.map(([key, label]) => (
     <TableRow className="bg-white" key={key}>

apps/web/src/app/components/counter-view.tsx

@@ -1,4 +1,5 @@
-const endpoint = process.env.NEXT_PUBLIC_DEMO_API_ENDPOINT;
+const endpoint =
+  process.env.NEXT_PUBLIC_DEMO_API_ENDPOINT ?? "__missing_demo_api_endpoint";
 
 /**
  * In a real application you would typically not embed an API key like this, as

apps/web/src/app/components/key-value-list.tsx

@@ -1,6 +1,6 @@
 export async function fetchJson<T>(
   endpoint: string,
-  queryParams: { [key: string]: string | number | boolean | undefined } = {},
+  queryParams: Record<string, string | number | boolean | undefined> = {},
   options: RequestInit = {}
 ) {
   const queryString = makeQueryString(queryParams);
@@ -17,27 +17,29 @@ export async function fetchJson<T>(
 
   if (!response.ok) {
     throw new Error(
-      `Fetch to ${url} failed with status ${
+      `Fetch to ${url} failed with status ${String(
         response.status
-      }. Response text: ${await response.text()}`
+      )}. Response text: ${await response.text()}`
     );
   }
 
   try {
-    return response.json() as Promise<T>;
-  } catch (err) {
+    return (await response.json()) as T;
+  } catch {
     throw new Error(`Failed to parse JSON from response of ${url}`);
   }
 }
 
 function makeQueryString(
-  params: { [key: string]: string | number | boolean | undefined } = {}
+  params: Record<string, string | number | boolean | undefined> = {}
 ) {
   const queryString = new URLSearchParams();
 
   Object.entries(params)
     .filter(([, value]) => value !== undefined)
-    .forEach(([name, value]) => queryString.append(name, String(value)));
+    .forEach(([name, value]) => {
+      queryString.append(name, String(value));
+    });
 
   return queryString.toString();
 }

apps/web/src/lib/api.ts

@@ -1,6 +1,19 @@
 {
   "extends": "@codecompose/typescript-config/nextjs.json",
-  "include": ["src", ".next/types/**/*.ts"],
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next" // plugin comes installed with nextjs
+      }
+    ]
+  },
+  "include": [
+    "${configDir}",
+    "${configDir}/**/*.json",
+    "${configDir}/next-env.d.ts",
+    "${configDir}/.next/types/**/*.ts",
+    ".next/types/**/*.ts"
+  ],
   "references": [
     {
       "path": "../../packages/common"