Add react compiler, refactor eslint config (#166)

eslint.config.mjs

@@ -1,74 +1,90 @@
-import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
-import react from "eslint-plugin-react";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
+// @ts-check
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
 
-export default [
-  ...fixupConfigRules(
-    compat.extends(
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended",
-      "plugin:prettier/recommended",
-    ),
-  ),
+import reactPlugin from "eslint-plugin-react";
+import pluginReactCompiler from "eslint-plugin-react-compiler";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import vitestPlugin from "eslint-plugin-vitest";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  eslintConfigPrettier,
+  // @ts-expect-error Malformed types
+  reactPlugin.configs.flat.recommended,
+  // @ts-expect-error Malformed types
+  reactPlugin.configs.flat["jsx-runtime"],
+  {
+    // TODO replace with https://github.com/facebook/react/pull/30774
+    name: "react-hooks/recommended",
+    // @ts-expect-error Malformed types
+    plugins: { "react-hooks": reactHooksPlugin },
+    // @ts-expect-error Malformed types
+    rules: reactHooksPlugin.configs.recommended.rules,
+  },
   {
     plugins: {
-      react: fixupPluginRules(react),
-      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      "react-compiler": pluginReactCompiler,
     },
-
-    languageOptions: {
-      parser: tsParser,
-      ecmaVersion: 2022,
-      sourceType: "module",
-
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
+    rules: {
+      "react-compiler/react-compiler": "error",
     },
-
+  },
+  {
     settings: {
       react: {
         version: "detect",
       },
     },
-
     rules: {
-      "react/react-in-jsx-scope": "off",
-
-      "react/no-unknown-property": [
-        "error",
+      "no-empty-function": "warn",
+      "no-nested-ternary": "warn",
+      "no-unreachable": "warn",
+      "object-shorthand": "warn",
+      "linebreak-style": ["warn", "unix"],
+      eqeqeq: ["warn", "smart"],
+      "no-console": [
+        "warn",
         {
-          ignore: ["css"],
+          allow: ["warn", "error", "info"],
         },
       ],
 
-      "no-constant-condition": "off",
-
-      "no-restricted-imports": [
+      "@typescript-eslint/consistent-type-definitions": "error",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-vars": [
         "warn",
         {
-          paths: ["@emotion/styled/macro", "@emotion/react/macro", "lodash"],
+          destructuredArrayIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
         },
       ],
 
-      "@typescript-eslint/no-unused-vars": ["error", { caughtErrors: "none" }],
+      "react/prop-types": "off",
+      "react/jsx-fragments": ["warn", "syntax"],
+      "react/jsx-curly-brace-presence": ["warn", "never"],
+      "react/no-unknown-property": [
+        "error",
+        {
+          ignore: ["css"],
+        },
+      ],
+      "react/function-component-definition": [
+        "error",
+        { namedComponents: "function-declaration", unnamedComponents: [] },
+      ],
+    },
+  },
+  {
+    files: ["**/*.test.ts", "**/*.test.tsx"],
+    plugins: {
+      vitest: vitestPlugin,
+    },
+    rules: {
+      ...vitestPlugin.configs.recommended.rules,
     },
   },
-];
+);

package.json

@@ -23,11 +23,13 @@
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",
+    "babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
     "chroma-js": "^3.1.2",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "detect-browser": "^5.3.0",
     "emotion": "^11.0.0",
+    "eslint-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
     "fast-xml-parser": "^4.5.1",
     "geolib": "^3.3.4",
     "gsl-parser": "^3.0.1",
@@ -92,8 +94,6 @@
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.13.5",
-    "@eslint/compat": "^1.2.4",
-    "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -108,19 +108,17 @@
     "@types/react-transition-group": "^4.4.12",
     "@types/smoothscroll-polyfill": "^0.3.4",
     "@types/suncalc": "^1.9.2",
-    "@typescript-eslint/eslint-plugin": "^8.19.0",
-    "@typescript-eslint/parser": "^8.19.0",
     "eslint": "^9.17.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-testing-library": "^7.1.1",
+    "eslint-plugin-vitest": "^0.5.4",
     "happy-dom": "^16.3.0",
     "prettier": "^3.4.2",
     "pwa-asset-generator": "^6.4.0",
     "source-map-explorer": "^2.5.3",
+    "typescript-eslint": "^8.19.0",
     "vite": "^6.0.7",
-    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^2.1.8"