Fe 1045 eslint v9 upgrade

.changeset/tidy-steaks-arrive.md

@@ -0,0 +1,10 @@
+---
+'eslint-config-widen': major
+'eslint-plugin-widen': major
+---
+
+Update to eslint 9, apps will need to be on eslint 9+ alongside this update.
+They will also need to convert their .eslintrc and .eslintignore into the new
+format of eslint.config.mjs. Here is a migration guide that goes over the basics
+https://eslint.org/docs/latest/use/configure/migration-guide. For general usage
+and a sample eslint.config.mjs see the updated readme in this repo.

.github/workflows/build.yml

@@ -4,10 +4,10 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache: yarn
       - run: yarn install --immutable
       - run: yarn lint
@@ -17,11 +17,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x, 20.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -32,12 +32,12 @@ jobs:
     needs: [lint, test]
     if: github.ref == 'refs/heads/main'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache: yarn
       - run: yarn install --immutable
       - name: Create release pull request or publish to npm

.github/workflows/format.yml

@@ -6,10 +6,10 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
       - run: yarn install --immutable
       - run: yarn prettier --write .
       - name: Commit changes

README.md

@@ -25,21 +25,27 @@ yarn add -D eslint-plugin-jest
 
 ## Usage
 
-In your `.eslintrc` file, add the following four entries to your extends list.
-If you don't need a specific configuration, simply remove it from the list.
-
-```json
-{
-  "extends": ["widen", "widen/typescript", "widen/react"],
-  "overrides": [
-    {
-      "files": ["e2e/**"],
-      "extends": "widen/playwright"
-    },
-    {
-      "files": ["frontend/**"],
-      "extends": "widen/jest"
-    }
-  ]
-}
+In your `eslint.config.mjs` file, add the following four entries to your extends
+list. If you don't need a specific configuration, simply remove it from the
+list.
+
+```js
+import { base, typescript, react, playwright, jest } from 'eslint-config-widen'
+
+export default [
+  // Base Widen configurations
+  base,
+  typescript,
+  react,
+
+  // Overrides for specific directories
+  {
+    files: ['e2e/**'],
+    ...playwright,
+  },
+  {
+    files: ['frontend/**'],
+    ...jest,
+  },
+]
 ```

eslint.config.mjs

@@ -0,0 +1,46 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import globals from 'globals'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+//TODO: cleanup compat https://acquia.atlassian.net/browse/FE-1172
+const compat = new FlatCompat({
+  allConfig: js.configs.all,
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+})
+
+export default [
+  {
+    ignores: ['**/lib/'],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:sort/recommended',
+  ),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.node,
+      },
+
+      parser: tsParser,
+    },
+
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    rules: {
+      '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+  },
+]

package.json

@@ -16,17 +16,20 @@
     "ts": "tsc -b"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-typescript": "^7.23.2",
-    "@changesets/cli": "^2.26.2",
-    "@types/jest": "^29.5.7",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.52.0",
-    "eslint-plugin-sort": "^2.11.0",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@changesets/cli": "^2.27.7",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "eslint": "^9.6.0",
+    "eslint-plugin-sort": "^3.0.2",
+    "globals": "^15.8.0",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2"
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.16.0"
   }
 }

packages/eslint-config-widen/README.md

@@ -22,21 +22,27 @@ yarn add -D eslint-plugin-jest
 
 ## Usage
 
-In your `.eslintrc` file, add the following four entries to your extends list.
-If you don't need a specific configuration, simply remove it from the list.
-
-```json
-{
-  "extends": ["widen", "widen/typescript", "widen/react"],
-  "overrides": [
-    {
-      "files": ["e2e/**"],
-      "extends": "widen/playwright"
-    },
-    {
-      "files": ["frontend/**/*.spec.js"],
-      "extends": "widen/jest"
-    }
-  ]
-}
+In your `eslint.config.mjs` file, add the following four entries to your extends
+list. If you don't need a specific configuration, simply remove it from the
+list.
+
+```js
+import { base, typescript, react, playwright, jest } from 'eslint-config-widen'
+
+export default [
+  // Base Widen configurations
+  base,
+  typescript,
+  react,
+
+  // Overrides for specific directories
+  {
+    files: ['e2e/**'],
+    ...playwright,
+  },
+  {
+    files: ['frontend/**'],
+    ...jest,
+  },
+]
 ```

packages/eslint-config-widen/package.json

@@ -1,15 +1,11 @@
 {
   "author": "Widen",
   "dependencies": {
-    "eslint-config-prettier": "^9.0.0"
+    "eslint-config-prettier": "^9.1.0"
   },
   "description": "Widen's shared ESLint config.",
   "exports": {
-    ".": "./lib/index.js",
-    "./jest": "./lib/jest.js",
-    "./playwright": "./lib/playwright.js",
-    "./react": "./lib/react.js",
-    "./typescript": "./lib/typescript.js"
+    ".": "./lib/index.js"
   },
   "files": [
     "lib"
@@ -21,14 +17,14 @@
     "@babel/eslint-parser": "^7.22.15",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
-    "eslint": ">= 8",
-    "eslint-plugin-jest": ">= 27",
+    "eslint": ">= 9",
+    "eslint-plugin-jest": ">= 28",
     "eslint-plugin-jsx-a11y": ">= 6",
-    "eslint-plugin-playwright": ">=0.16.0",
+    "eslint-plugin-playwright": ">= 1",
     "eslint-plugin-react": ">= 7",
     "eslint-plugin-react-hooks": ">= 4",
-    "eslint-plugin-sort": ">= 2",
-    "eslint-plugin-widen": ">=2.0.0"
+    "eslint-plugin-sort": ">= 3",
+    "eslint-plugin-widen": ">= 3"
   },
   "peerDependenciesMeta": {
     "@typescript-eslint/eslint-plugin": {

packages/eslint-config-widen/src/base.ts

@@ -0,0 +1,97 @@
+import js from '@eslint/js'
+import sort from 'eslint-plugin-sort'
+import widen from 'eslint-plugin-widen'
+import globals from 'globals'
+import babelParser from '@babel/eslint-parser'
+
+export default [
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es6,
+        ...globals.jest,
+        ...globals.node,
+      },
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+      },
+    },
+    plugins: {
+      sort,
+      widen,
+    },
+    rules: {
+      'default-param-last': 'error',
+      'dot-notation': 'error',
+      eqeqeq: [
+        'error',
+        'always',
+        {
+          null: 'ignore',
+        },
+      ],
+      'no-console': ['error', { allow: ['error'] }],
+      'no-dupe-args': 'error',
+      'no-duplicate-imports': 'error',
+      'no-else-return': 'error',
+      'no-empty': ['error', { allowEmptyCatch: true }],
+      'no-extra-bind': 'error',
+      'no-param-reassign': 'error',
+      'no-return-await': 'error',
+      'no-template-curly-in-string': 'error',
+      'no-unneeded-ternary': 'error',
+      'no-unused-expressions': 'off',
+      'no-unused-vars': [
+        'error',
+        {
+          ignoreRestSiblings: true,
+          varsIgnorePattern: '^_',
+        },
+      ],
+      'no-useless-computed-key': 'error',
+      'no-var': 'error',
+      'object-shorthand': 'error',
+      'prefer-const': [
+        'error',
+        {
+          destructuring: 'all',
+        },
+      ],
+      'require-await': 'error',
+      'sort/exports': [
+        'warn',
+        {
+          groups: [
+            { order: 6, type: 'default' },
+            { order: 5, type: 'sourceless' },
+            { order: 2, regex: '^@widen\\/' },
+            { order: 4, regex: '^\\.+' },
+            { order: 1, type: 'dependency' },
+            { order: 3, type: 'other' },
+          ],
+        },
+      ],
+      'sort/imports': [
+        'warn',
+        {
+          groups: [
+            { order: 1, type: 'side-effect' },
+            { order: 3, regex: '^@widen\\/' },
+            { order: 5, regex: '^\\.+' },
+            { order: 2, type: 'dependency' },
+            { order: 4, type: 'other' },
+          ],
+        },
+      ],
+    },
+  },
+  js.configs.recommended,
+  {
+    files: ['**/*.js', '**/*.mjs'],
+    rules: {
+      'prettier/prettier': 'error', // Assuming you have `eslint-plugin-prettier` setup
+    },
+  },
+]