Add react compiler

Author: aeharding

eslint.config.mjs

@@ -1,74 +1,121 @@
-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";
+
+import compilerOptions from "./compilerOptions.js";
+
+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",
+    plugins: { "react-hooks": reactHooksPlugin },
+    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", compilerOptions],
     },
-
+  },
+  {
     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-restricted-syntax": [
+        "warn",
+        {
+          selector: "TSEnumDeclaration",
+          message: "Don't declare enums",
         },
       ],
-
-      "no-constant-condition": "off",
-
       "no-restricted-imports": [
         "warn",
         {
-          paths: ["@emotion/styled/macro", "@emotion/react/macro", "lodash"],
+          paths: [
+            {
+              name: "@ionic/react",
+              importNames: ["IonHeader", "useIonToast"],
+              message:
+                "Has an App alternative. Replace 'Ion' with 'App' when importing.",
+            },
+            {
+              name: "react",
+              importNames: ["forwardRef"],
+              message: "Please use ref prop directly.",
+            },
+          ],
+          patterns: [
+            {
+              regex: "\\.\\.\\/\\w+\\/",
+              message: "Import via absolute path (e.g. #/helpers/myHelper)",
+            },
+          ],
         },
       ],
 
-      "@typescript-eslint/no-unused-vars": ["error", { caughtErrors: "none" }],
+      "@typescript-eslint/consistent-type-definitions": "error",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          destructuredArrayIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+
+      "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",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ export default defineConfig(() => {
       react({
         jsxImportSource: "@emotion/react",
         babel: {
-          plugins: ["@emotion/babel-plugin"],
+          plugins: ["babel-plugin-react-compiler", "@emotion/babel-plugin"],
         },
       }),
       svgr(),