feat!: move to ESM and eslint v9 (#641)

erik-slovak · web-flow · commit 26b06e849e3f · 2024-11-29T19:33:12.000+01:00
* feat: upgrade to eslint v9 and fix breaking changes

* chore: remove testing file

* feat!: move to ESM

* test: remove unused import and update gitignore

* test: update pattern for finding test files

* chore: sync changes from other packages

* chore: update dependencies and run deduplicate

* fix!: use ESM tsconfig

* fix: update order of rules and remove react-native specific settings
diff --git a/.github/workflows/resolve-yarn-lock.yml b/.github/workflows/resolve-yarn-lock.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   resolve-yarn-lock-on-comment:
-    name: '/'
+    name: 'Resolve yarn.lock'
     if: contains(github.event.comment.body, '/resolve yarn.lock')
     uses: technology-studio/github-workflows/.github/workflows/_resolve-yarn-lock.yml@main
     secrets: inherit
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ npm-debug.log
 yarn-error.log
 lib
 coverage
+*.tgz
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,2 +1 @@
-yarn git-hook
-
+yarn -s lint-staged
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
@@ -1,2 +1 @@
 yarn commitlint --edit || exec < /dev/tty && yarn txo-cz --hook > /dev/null 2>&1 || true
-
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,3 +1,3 @@
 {
-  "*.{js,jsx,ts,tsx}": "eslint --cache --ext .ts,.tsx"
+  "*.{js,jsx,ts,tsx}": "eslint --cache --max-warnings 0 --no-warn-ignored"
 }
diff --git a/.releaserc.js b/.releaserc.js
@@ -4,7 +4,7 @@
  * @Copyright: Technology Studio
 **/
 
-module.exports = {
+export default {
   extends: [
     '@txo/semantic-release',
   ],
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,33 +5,22 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug Jest Tests with yarn",
+      "name": "Debug Jest Tests",
       "type": "node",
       "request": "launch",
-      "runtimeExecutable": "yarn",
-      "args": [
-        "test",
-        "--",
-        "--runInBand",
-        "--coverage=false"
-      ],
-      "runtimeArgs": [
-        "--inspect-brk"
-      ],
+      "runtimeArgs": [ "--inspect-brk", "${workspaceRoot}/node_modules/.bin/jest", "--runInBand", "--coverage", "false", "${file}" ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen"
     },
     {
-      "name": "eslint",
+      "name": "Debug Jest Tests with yarn",
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "yarn",
-      "cwd": "${workspaceFolder}",
-      "runtimeArgs": [
-        "eslint",
-        "${relativeFile}"
-      ],
-      "sourceMaps": true,
-    }
+      "args": [ "test", "--runInBand", "--coverage=false", "${file}" ],
+      "runtimeArgs": [ "--inspect-brk" ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
   ]
 }
diff --git a/__tests__/Tests/Lint.test.ts b/__tests__/Tests/Lint.test.ts
@@ -1,18 +1,16 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /**
  * @Author: Rostislav Simonik <rostislav.simonik@technologystudio.sk>
  * @Date:   2018-01-09T00:56:40+01:00
  * @Copyright: Technology Studio
 **/
 
-const { FlatESLint } = require('eslint/use-at-your-own-risk')
+import { ESLint } from 'eslint'
 
 test('shoud not have lint issues', async () => {
-  const eslint = new FlatESLint()
-  const results = await eslint.lintFiles(['test/**/*.ts'])
+  const eslint = new ESLint()
+  const results = await eslint.lintFiles(['test/**/*.tsx'])
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers -- result should have no errors
   const isWithoutError = results.every((result: { errorCount: number }) => result.errorCount === 0)
   expect(isWithoutError).toBe(true)
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers -- we want to make the timeout longer
 }, 20000)
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -4,10 +4,8 @@
  * @Copyright: Technology Studio
 **/
 
-const commitlintConfig = {
+export default {
   extends: [
     '@txo/commitlint',
   ],
 }
-
-module.exports = commitlintConfig
diff --git a/eslint-config-txo-typescript-react-v3.0.21.tgz b/eslint-config-txo-typescript-react-v3.0.21.tgz
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,16 +1,27 @@
-const txoConfig = require('./lib/index.js')
+import {
+  typescriptConfigList,
+  stylisticConfig,
+} from 'eslint-config-txo-typescript'
+import typescriptEslint from 'typescript-eslint'
+import {
+  reactConfig,
+} from './lib/index.js'
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-const config = [
-  ...txoConfig.default,
+/** @type {import('eslint').Linter.Config[]} */
+export default typescriptEslint.config(
   {
-    files: ['test/**/*.ts', 'test/**/*.tsx'],
-    languageOptions: {
-      parserOptions: {
-        project: './tsconfig.test.json'
-      }
-    }
+    files: ['**/*.ts', '**/*.tsx'],
+    extends: [
+      ...typescriptConfigList,
+      stylisticConfig,
+      reactConfig,
+    ]
+  },
+  {
+    ignores: [
+      'coverage',
+      'lib',
+      'node_modules',
+    ]
   }
-]
-
-module.exports = config
+)
diff --git a/jest.config.js b/jest.config.js
@@ -4,19 +4,16 @@
  * @Copyright: Technology Studio
 **/
 
-const { compilerOptions } = require('./tsconfig.json');
+import { defaults } from 'jest-config'
 
-const { defaults } = require('jest-config');
-
-module.exports = {
+export default {
   preset: 'ts-jest',
+  cache: true,
+  cacheDirectory: '<rootDir>/node_modules/.cache/jest',
   testEnvironment: 'node',
   testMatch: [
     '<rootDir>/__tests__/Tests/**/?(*.)(spec|test).ts'
   ],
-  transformIgnorePatterns: [
-    '/node_modules/(?!@txo).+\\.js$'
-  ],
   testPathIgnorePatterns: [
     '/node_modules/'
   ],
@@ -28,7 +25,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.tsx?$': ['ts-jest', {
-      tsconfig: './__tests__/tsconfig.json'
+      tsconfig: '<rootDir>/__tests__/tsconfig.json'
     }]
   },
 }
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "2.0.82",
   "description": "Technology Studio - Eslint typescript react config",
   "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/technology-studio/eslint-config-txo-typescript-react.git"
@@ -15,38 +17,43 @@
   "license": "MIT",
   "private": false,
   "scripts": {
+    "build:clean": "yarn rimraf lib",
+    "build:lib": "yarn tsc",
+    "build:watch": "yarn tsc --watch",
+    "build": "yarn build:clean && yarn build:lib",
+    "coverage": "jest --coverage && open coverage/lcov-report/index.html || xdg-open coverage/lcov-report/index.html",
+    "lint:ci": "yarn lint",
+    "lint:fix": "eslint . --fix",
     "lint": "eslint --max-warnings 0 .",
-    "fixcode": "eslint . --fix",
-    "git-hook": "yarn -s lint",
-    "compile": "tsc",
-    "prepare": "husky && yarn compile",
-    "sanity": "yarn lint:ci && yarn test --coverage && tsc --noEmit && yarn outdated && echo 'success'",
+    "prepare": "husky && yarn build",
+    "sanity": "yarn build && yarn lint:ci && tsc --noEmit && yarn test --coverage && echo 'success'",
     "semantic-release": "semantic-release",
+    "test:watch": "concurrently \"yarn build:watch\" \"yarn test --watch\"",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "lint:ci": "yarn lint",
     "type-check": "tsc --noEmit"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "eslint-config-txo-typescript": "^4.0.70",
+    "eslint-config-txo-typescript": "^7.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0"
   },
   "devDependencies": {
     "@txo/commitlint": "^1.0.20",
     "@txo/semantic-release": "^2.0.10",
-    "@txo/tsconfig-cjs": "^2.0.0",
-    "@types/eslint": "^8.56.12",
+    "@txo/tsconfig": "^2.0.0",
+    "@types/eslint": "^9.6.1",
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.12",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.10",
     "react": "^18.3.1",
+    "rimraf": "^6.0.1",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   }
 }
diff --git a/renovate.json b/renovate.json
@@ -2,18 +2,5 @@
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
     "github>technology-studio/renovate-config"
-  ],
-  "packageRules": [
-    {
-      "groupName": "Eslint txo packages",
-      "groupSlug": "eslint-txo-packages",
-      "matchPackagePrefixes": [
-        "@typescript-eslint/",
-        "eslint"
-      ],
-      "automerge": true,
-      "separateMajorMinor": false,
-      "semanticCommitType": "fix"
-    }
   ]
 }
diff --git a/src/configs/react.ts b/src/configs/react.ts
@@ -9,7 +9,7 @@ import type { Linter } from 'eslint'
 export const reactRules: Linter.RulesRecord = {
   'react-hooks/rules-of-hooks': 'error',
   'react-hooks/exhaustive-deps': 'error',
-  'react/jsx-first-prop-new-line': ['error', 'multiline'],
+  '@stylistic/jsx-first-prop-new-line': ['error', 'multiline'], // TODO: remove after migrating to prettier
   'react/jsx-uses-vars': 'error',
   'react/display-name': 'off',
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,43 +1,31 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-var-requires */
 /**
  * @Author: Rostislav Simonik <rostislav.simonik@technologystudio.sk>
  * @Author: Erik Slovak <erik.slovak@technologystudio.sk>
  * @Date: 2020-06-10T16:06:00+02:00
  * @Copyright: Technology Studio
 **/
 
-import type { Linter } from 'eslint'
+import type {
+  ESLint,
+  Linter,
+} from 'eslint'
+import eslintPluginReact from 'eslint-plugin-react'
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
+import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y'
 
-import { jsxA11yRules } from './configs/jsx-a11y'
-import { reactRules } from './configs/react'
+import { jsxA11yRules } from './configs/jsx-a11y.js'
+import { reactRules } from './configs/react.js'
 
-const txoConfig = require('eslint-config-txo-typescript')
-const react = require('eslint-plugin-react')
-const reactHooksPlugin = require('eslint-plugin-react-hooks')
-const jsxA11yPlugin = require('eslint-plugin-jsx-a11y')
-
-const config: Linter.FlatConfig[] = [
-  ...txoConfig.default,
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...jsxA11yRules,
-      ...reactRules,
-    },
-    plugins: {
-      'jsx-a11y': jsxA11yPlugin,
-      'react-hooks': reactHooksPlugin,
-      react,
-    },
-    settings: {
-      'import/ignore': [
-        'react-native',
-        'react-native-keychain',
-      ],
-    },
+export const reactConfig: Linter.Config = {
+  rules: {
+    ...eslintPluginReactHooks.configs.recommended.rules,
+    ...jsxA11yRules,
+    ...reactRules,
   },
-]
-
-export default config
+  plugins: {
+    'jsx-a11y': eslintPluginJsxA11y,
+    'react-hooks': eslintPluginReactHooks,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- TODO: remove type assertion after types are fixed in eslint-plugin-react - https://github.com/jsx-eslint/eslint-plugin-react/pull/3840
+    'react': eslintPluginReact as ESLint.Plugin,
+  },
+}
diff --git a/src/types/eslint-plugin-jsx-a11y/index.d.ts b/src/types/eslint-plugin-jsx-a11y/index.d.ts
@@ -0,0 +1,14 @@
+declare module 'eslint-plugin-jsx-a11y' {
+  import type {
+    ESLint, Linter,
+  } from 'eslint'
+  export const configs: {
+    recommended: Linter.Config
+    strict: Linter.Config
+  }
+  export const flatConfigs: {
+    recommended: Linter.Config
+    strict: Linter.Config
+  }
+  export const rules: NonNullable<ESLint.Plugin['rules']>
+}
diff --git a/src/types/eslint-plugin-react-hooks/index.d.ts b/src/types/eslint-plugin-react-hooks/index.d.ts
@@ -0,0 +1,9 @@
+declare module 'eslint-plugin-react-hooks' {
+  import type {
+    ESLint, Linter,
+  } from 'eslint'
+  export const configs: {
+    recommended: Linter.Config
+  }
+  export const rules: NonNullable<ESLint.Plugin['rules']>
+}
diff --git a/test/JsxA11y.ts b/test/JsxA11y.ts
diff --git a/test/JsxA11y.tsx b/test/JsxA11y.tsx
diff --git a/test/React.tsx b/test/React.tsx
diff --git a/test/tsconfig.json b/test/tsconfig.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.test.json b/tsconfig.test.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-yarn git-hook`
`2`		`-`
	`1`	`+yarn -s lint-staged`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`	`1`	`yarn commitlint --edit \|\| exec < /dev/tty && yarn txo-cz --hook > /dev/null 2>&1 \|\| true`
`2`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "*.{js,jsx,ts,tsx}": "eslint --cache --ext .ts,.tsx"`
	`2`	`+ "*.{js,jsx,ts,tsx}": "eslint --cache --max-warnings 0 --no-warn-ignored"`
`3`	`3`	`}`