@open-turo/eslint-config-react 14.0.1 → 15.0.0-pr-320.3.1.1

package/.github/workflows/prerelease.yaml

@@ -0,0 +1,24 @@
+name: Prerelease
+
+on:
+  pull_request:
+    types:
+      - opened
+      - labeled
+      - synchronize
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  prerelease:
+    name: Prerelease
+    runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.labels.*.name, 'prerelease')
+    steps:
+      - name: Prerelease
+        id: prerelease
+        uses: open-turo/actions-node/prerelease@v6
+        with:
+          github-token: ${{ secrets.OPEN_TURO_GITHUB_TOKEN }}
+          npm-token: ${{ secrets.OPEN_TURO_NPM_TOKEN }}
+          create-prerelease: true

package/.nvmrc

@@ -1 +1 @@
-22.13.1
+22.14.0

package/.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
-    rev: v9.20.0
+    rev: v9.21.0
     hooks:
       - id: commitlint
         stages: [commit-msg]
@@ -10,6 +10,7 @@ repos:
     hooks:
       - id: prettier
         stages: [commit]
+        additional_dependencies: ["prettier@3.5.2"]
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v5.0.0
     hooks:

package/README.md

@@ -20,28 +20,24 @@ Install the package and all of its peer dependencies:
 npx install-peerdeps --dev @open-turo/eslint-config-react
 ```
 
-Then in your `.eslintrc` file, extend from the default configuration of this package, which is the recommended eslint
-configuration for our existing front-end projects.
+### [`eslint.config.js`](https://eslint.org/docs/latest/use/configure/configuration-files-new) (requires eslint>=v8.23.0)
 
-To use this config, just add to your `.eslintrc` the following:
+```js
+const turoConfig = require("@open-turo/eslint-config-react");
 
+module.exports = turoConfig();
 ```
-"extends": "@open-turo/eslint-config-typescript"
-```
-
-### Legacy preset
 
-There is a `legacy` preset that extends `@open-turo/eslint-config-typescript/legacy`. This only exists for backwards
-compatibility with existing projects. It is strongly recommended to use the standard preset.
+### **[.eslintrc](https://eslint.org/docs/latest/use/configure/configuration-files)** (legacy example)
 
-To use the `legacy` preset, update your `.eslintrc` file to be:
-
-```json
+```jsonc
 {
-  "extends": "@open-turo/eslint-config-react/legacy"
+  "extends": "@open-turo/eslint-config-react/recommended",
 }
 ```
 
+You will have to set the `ESLINT_USE_FLAT_CONFIG` env var to true.
+
 ## Development
 
 ### Pre-commit

package/docs/breaking-changes/v15.md

@@ -0,0 +1,49 @@
+# Breaking changes in v15
+
+## Minimum Node.js version
+
+The minimum Node.js supported version is now `^20`.
+
+## Removed legacy preset
+
+The legacy preset is removed, as it only existed for some internal turo projects. Maintaining it to support eslint v9
+was not worth the effort.
+
+## Default flat configuration
+
+The default configuration for this package is now a flat eslint configuration. Read the
+eslint [guide](https://eslint.org/docs/latest/use/configure/migration-guide) for how to update legacy configurations
+to flat configs.
+
+The legacy configuration is still supported. To keep using it, you just have to update the `.eslintrc` file to:
+
+```diff
+{
+--  "extends": "@open-turo/eslint-config-react"
+++  "extends": "@open-turo/eslint-config-react/recommended"
+}
+```
+
+If you are using eslint v9, this also means that you will have to set the `ESLINT_USE_FLAT_CONFIG` env var to true.
+
+### Updating to flat configuration
+
+If you wish to update to a flat configuration, you will have to make the following changes (please refer to the above guide
+for all the details).
+
+- Move from `.eslintrc` (or equivalent file) into `eslint.config.js` (or equivalent file).
+- If you have a `.eslintignore` file, replace that into the `ignores` section of the `eslint.config.js` file
+
+A `.eslintignore` file like this:
+
+```
+/lib
+```
+
+Will become a `eslint.config.js` file like this:
+
+```js
+const turoConfig = require("@open-turo/eslint-config-react");
+
+module.exports = turoConfig({ turo: { ignores: ["/lib"] } });
+```

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import openTuroConfig from "@open-turo/eslint-config-typescript";
+
+// eslint-disable-next-line import/no-default-export
+export default openTuroConfig({ typescript: false });

package/index.cjs

@@ -0,0 +1,112 @@
+const turoConfig = require("@open-turo/eslint-config-typescript");
+const jsxA11yPlugin = require("eslint-plugin-jsx-a11y");
+const reactPlugin = require("eslint-plugin-react");
+const reactCompilerPlugin = require("eslint-plugin-react-compiler");
+const reactHooksPlugin = require("eslint-plugin-react-hooks");
+const globals = require("globals");
+// TODO We can't do this because this function is not here directly technically
+const tseslint = require("typescript-eslint");
+
+/**
+ *
+ * @param {object} options ESLint configuration options
+ * @param {object} options.turo ESLing configuration options for open-turo/eslint-config-typescript. See their documentation for available options.
+ * @returns Configuration Array
+ */
+module.exports = (options = {}) =>
+  tseslint.config(
+    {
+      extends: turoConfig({
+        ...options.turo,
+        allowModules: [
+          "@jest/globals",
+          "@testing-library/dom",
+          "@testing-library/react",
+          "@testing-library/user-event",
+          "nock",
+        ].concat(options.turo?.allowModules ?? []),
+      }),
+      rules: {
+        /*
+         * Rules that significantly impact performance time of eslint, and are not
+         * necessarily relevant for react applications.
+         */
+        "sonarjs/aws-apigateway-public-api": "off",
+        "sonarjs/aws-ec2-rds-dms-public": "off",
+        "sonarjs/aws-iam-all-privileges": "off",
+        "sonarjs/aws-iam-privilege-escalation": "off",
+        "sonarjs/aws-iam-public-access": "off",
+        "sonarjs/aws-restricted-ip-admin-access": "off",
+        "sonarjs/jsx-no-useless-fragment": "off",
+        // Already covered with react/no-array-index-key
+        "sonarjs/no-array-index-key": "off",
+        // Already covered with react/no-unknown-property
+        "sonarjs/no-unknown-property": "off",
+        "sonarjs/no-unstable-nested-components": "off",
+        // Allow file names to match a component name
+        "unicorn/filename-case": "off",
+      },
+    },
+    {
+      extends: [
+        reactPlugin.configs.flat.recommended,
+        reactPlugin.configs.flat["jsx-runtime"],
+        jsxA11yPlugin.flatConfigs.recommended,
+        reactCompilerPlugin.configs.recommended,
+      ],
+      files: ["**/*.{jsx,tsx,mjsx,cjsx}"],
+      languageOptions: {
+        globals: {
+          ...globals.browser,
+        },
+      },
+      plugins: {
+        "react-hooks": reactHooksPlugin,
+      },
+      rules: {
+        ...reactHooksPlugin.configs.recommended.rules,
+        "jsx-a11y/anchor-is-valid": [
+          "warn",
+          {
+            specialLink: ["to"],
+          },
+        ],
+        /** ESLint plugin for the React Compiler, to enforce rules that make adopting it easier/more effective */
+        "react-compiler/react-compiler": [
+          "error",
+          {
+            environment: {
+              /**
+               * At the time of writing, `eslint-plugin-react-compiler` errors on ref usages in render paths. This rule is noisy,
+               * since it currently reports false positives. We can remove this in the future when the rule is more accurate.
+               * {@link https://github.com/facebook/react/pull/30843 PR that disables this rule in the default config}
+               */
+              validateRefAccessDuringRender: false,
+            },
+          },
+        ],
+        // don't force .jsx extension
+        "react/jsx-filename-extension": "off",
+        // In TS you must use the Fragment syntax instead of the shorthand
+        "react/jsx-fragments": "off",
+        // This allows props to be spread in JSX
+        "react/jsx-props-no-spreading": "off",
+        // ensure props are alphabetical
+        "react/jsx-sort-props": "error",
+        // Allow emotion css prop
+        "react/no-unknown-property": ["error", { ignore: ["css"] }],
+        // We don't need default props on TS components
+        "react/require-default-props": "off",
+        "react/sort-prop-types": "error",
+        // State initialization can be in the constructor or via class fields
+        "react/state-in-constructor": "off",
+        // This allows static properties to be placed within the class declaration
+        "react/static-property-placement": "off",
+      },
+      settings: {
+        react: {
+          version: "detect",
+        },
+      },
+    },
+  );

package/index.mjs

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-default-export
+export { default } from "./index.cjs";

package/package.json

@@ -1,37 +1,53 @@
 {
   "author": "Turo engineering",
   "description": "Turo eslint configuration for react",
+  "type": "module",
   "dependencies": {
-    "@open-turo/eslint-config-typescript": "15.0.1",
+    "@open-turo/eslint-config-typescript": "16.0.0-pr-373.10.1.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
-    "eslint-plugin-react-hooks": "5.1.0"
+    "eslint-plugin-react-compiler": "19.0.0-beta-30d8a17-20250209",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "globals": "15.15.0",
+    "typescript-eslint": "8.23.0"
   },
   "devDependencies": {
-    "eslint": "8.57.1",
-    "prettier": "3.4.2"
+    "@types/react": "^19.0.10",
+    "eslint": "9.20.1",
+    "jest": "29.7.0",
+    "prettier": "3.5.2",
+    "react": "19.0.0"
   },
   "engines": {
-    "node": ">= 18"
+    "node": ">= 20"
   },
   "homepage": "https://github.com/open-turo/eslint-config-react#readme",
   "license": "MIT",
-  "main": "index.js",
+  "main": "index.cjs",
+  "module": "index.mjs",
   "scripts": {
     "build": "echo noop",
-    "lint": "echo noop",
-    "test": "echo noop"
+    "lint": "eslint './**/*.{cjs,mjs,js}'",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs",
+      "default": "./index.mjs"
+    },
+    "./recommended": {
+      "require": "./recommended.cjs"
+    }
   },
   "name": "@open-turo/eslint-config-react",
   "peerDependencies": {
-    "eslint": ">=8.18.0",
+    "eslint": "^8.18.0 || ^9.0.0",
     "prettier": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "repository": "https://github.com/open-turo/eslint-config-react",
-  "version": "14.0.1",
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "version": "15.0.0-pr-320.3.1.1"
 }

package/{index.js → recommended.cjs}

@@ -1,22 +1,23 @@
 module.exports = {
-  root: true,
-  plugins: ["react", "react-hooks", "jsx-a11y", "eslint-plugin-react-compiler"],
   env: {
     browser: true,
   },
-  ignorePatterns: ["babel.config.js"],
   extends: [
-    "@open-turo/eslint-config-typescript",
+    "@open-turo/eslint-config-typescript/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
     "plugin:jsx-a11y/recommended",
   ],
+  ignorePatterns: ["babel.config.js"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
+    jsxPragma: "React",
   },
+  plugins: ["react", "react-hooks", "jsx-a11y", "eslint-plugin-react-compiler"],
+  root: true,
   rules: {
     "jsx-a11y/anchor-is-valid": [
       "warn",
@@ -36,6 +37,20 @@ module.exports = {
         ],
       },
     ],
+    /** ESLint plugin for the React Compiler, to enforce rules that make adopting it easier/more effective */
+    "react-compiler/react-compiler": [
+      "error",
+      {
+        environment: {
+          /**
+           * At the time of writing, `eslint-plugin-react-compiler` errors on ref usages in render paths. This rule is noisy,
+           * since it currently reports false positives. We can remove this in the future when the rule is more accurate.
+           * {@link https://github.com/facebook/react/pull/30843 PR that disables this rule in the default config}
+           */
+          validateRefAccessDuringRender: false,
+        },
+      },
+    ],
     // don't force .jsx extension
     "react/jsx-filename-extension": "off",
     // In TS you must use the Fragment syntax instead of the shorthand
@@ -53,20 +68,6 @@ module.exports = {
     "react/state-in-constructor": "off",
     // This allows static properties to be placed within the class declaration
     "react/static-property-placement": "off",
-    /** ESLint plugin for the React Compiler, to enforce rules that make adopting it easier/more effective */
-    "react-compiler/react-compiler": [
-      "error",
-      {
-        environment: {
-          /**
-           * At the time of writing, `eslint-plugin-react-compiler` errors on ref usages in render paths. This rule is noisy,
-           * since it currently reports false positives. We can remove this in the future when the rule is more accurate.
-           * {@link https://github.com/facebook/react/pull/30843 PR that disables this rule in the default config}
-           */
-          validateRefAccessDuringRender: false,
-        },
-      },
-    ],
     /*
      * Rules that significantly impact performance time of eslint, and are not
      * necessarily relevant for react applications.
@@ -77,11 +78,11 @@ module.exports = {
     "sonarjs/aws-iam-privilege-escalation": "off",
     "sonarjs/aws-iam-public-access": "off",
     "sonarjs/aws-restricted-ip-admin-access": "off",
+    "sonarjs/jsx-no-useless-fragment": "off",
     // Already covered with react/no-array-index-key
     "sonarjs/no-array-index-key": "off",
     // Already covered with react/no-unknown-property
     "sonarjs/no-unknown-property": "off",
-    "sonarjs/jsx-no-useless-fragment": "off",
     "sonarjs/no-unstable-nested-components": "off",
     // Allow file names to match a component name
     "unicorn/filename-case": "off",

package/test/__fixtures__/component.jsx

@@ -0,0 +1,4 @@
+/** @import { JSX } from "react"; */
+export function Test() {
+  return <h1 className="test">Test</h1>;
+}

package/test/__fixtures__/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "jsx": "react"
+  },
+  "include": ["./component.jsx"]
+}

package/test/test.spec.js

@@ -0,0 +1,61 @@
+import { loadESLint } from "eslint";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+describe("validate config", () => {
+  const testFileName = "component.jsx";
+  const code = fs.readFileSync(
+    path.resolve(__dirname, "__fixtures__", testFileName),
+    "utf8",
+  );
+
+  test("the legacy recommended config is correct", async () => {
+    // Unlike the new flat config, the legacy turo config only works with TS, so we create a simple tsconfig.json file
+    // in the __fixtures__ directory to make it work
+    const ESLint = await loadESLint({
+      useFlatConfig: false,
+    });
+    const linter = new ESLint({
+      overrideConfig: {
+        parserOptions: {
+          tsconfigRootDir: path.resolve(__dirname, "__fixtures__"),
+        },
+      },
+      overrideConfigFile: "./recommended.cjs",
+    });
+    const messages = await linter.lintFiles(
+      path.resolve(__dirname, "__fixtures__", testFileName),
+      {
+        cwd: path.resolve(__dirname, "__fixtures__"),
+      },
+    );
+    expect(messages[0].messages).toEqual([]);
+    expect(messages[0].errorCount).toEqual(0);
+  });
+
+  test.each(["index.mjs", "index.cjs"])(
+    `the flat config is correct for %s`,
+    async (configFile) => {
+      const ESLint = await loadESLint({
+        useFlatConfig: true,
+      });
+      const { default: config } = await import(`../${configFile}`);
+      const linter = new ESLint({
+        baseConfig: config(),
+        overrideConfig: [
+          {
+            files: [testFileName],
+          },
+        ],
+      });
+      const messages = await linter.lintText(code, {
+        filePath: testFileName,
+      });
+      expect(messages[0].messages).toEqual([]);
+      expect(messages[0].errorCount).toEqual(0);
+    },
+  );
+});

package/legacy.js

@@ -1,75 +0,0 @@
-module.exports = {
-  root: true,
-  plugins: ["react", "react-hooks", "jsx-a11y"],
-  env: {
-    browser: true,
-  },
-  ignorePatterns: ["babel.config.js"],
-  extends: [
-    "@open-turo/eslint-config-typescript/legacy",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended",
-  ],
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  rules: {
-    "jsx-a11y/anchor-is-valid": [
-      "warn",
-      {
-        specialLink: ["to"],
-      },
-    ],
-    "n/no-unpublished-import": [
-      "error",
-      {
-        allowModules: [
-          "@jest/globals",
-          "@testing-library/dom",
-          "@testing-library/react",
-          "@testing-library/user-event",
-          "nock",
-        ],
-      },
-    ],
-    // don't force .jsx extension
-    "react/jsx-filename-extension": "off",
-    // In TS you must use the Fragment syntax instead of the shorthand
-    "react/jsx-fragments": "off",
-    // This allows props to be spread in JSX
-    "react/jsx-props-no-spreading": "off",
-    // ensure props are alphabetical
-    "react/jsx-sort-props": "error",
-    // We don't need default props on TS components
-    "react/require-default-props": "off",
-    "react/sort-prop-types": "error",
-    // State initialization can be in the constructor or via class fields
-    "react/state-in-constructor": "off",
-    // This allows static properties to be placed within the class declaration
-    "react/static-property-placement": "off",
-    /**
-     * Rules that significantly impact performance time of eslint, and are not
-     * necessarily relevant for react applications.
-     */
-    "sonarjs/aws-apigateway-public-api": "off",
-    "sonarjs/aws-ec2-rds-dms-public": "off",
-    "sonarjs/aws-iam-all-privileges": "off",
-    "sonarjs/aws-iam-privilege-escalation": "off",
-    "sonarjs/aws-iam-public-access": "off",
-    "sonarjs/aws-restricted-ip-admin-access": "off",
-    // Already covered with react/no-array-index-key
-    "sonarjs/no-array-index-key": "off",
-    // Already covered with react/no-unknown-property
-    "sonarjs/no-unknown-property": "off",
-    "sonarjs/jsx-no-useless-fragment": "off",
-    "sonarjs/no-unstable-nested-components": "off",
-  },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-};