feat: update dependencies & add new rules (#137)

BREAKING CHANGE: Requires node v18+ and updates all rules to latest version

Author: Dattaya

.github/workflows/validate.yml

@@ -16,7 +16,8 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
-        node: [12.22.0, 12, 14.17.0, 14, 16.0.0, 16, 18]
+        node: [18, 20]
+        typescript-version: [^4.0.0, ^5.0.0]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
@@ -35,6 +36,9 @@ jobs:
         with:
           useLockFile: false
 
+      - name: 🆃 Setup TypeScript
+        run: npm i typescript@${{ matrix.typescript-version }}
+
       - name: ▶️ Run validate script
         run: npm run validate
 
@@ -58,7 +62,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1

index.js

@@ -54,7 +54,6 @@ module.exports = {
     ],
     'init-declarations': 'off',
     'line-comment-position': 'off',
-    'lines-between-class-members': 'off',
     'logical-assignment-operators': 'warn',
     'max-classes-per-file': 'off',
     'max-depth': ['error', 4],
@@ -66,7 +65,6 @@ module.exports = {
     'max-nested-callbacks': ['error', 7],
     'max-params': ['error', 7],
     'max-statements': 'off', // this becomes an obvious problem when it's actually a problem...
-    'max-statements-per-line': ['error', {max: 1}],
     'multiline-comment-style': 'off', // this would be cool to get the fixer, but too strict.
     'new-cap': 'error',
     'no-alert': 'error',
@@ -94,7 +92,7 @@ module.exports = {
     'no-dupe-else-if': 'error',
     'no-dupe-keys': 'error',
     'no-duplicate-case': 'error',
-    'no-duplicate-imports': 'error',
+    'no-duplicate-imports': 'off', // turned off in favor of `import/no-duplicates`
     'no-else-return': 'off',
     'no-empty': 'error',
     'no-empty-character-class': 'error',
@@ -136,10 +134,10 @@ module.exports = {
     'no-new': 'error',
     'no-new-func': 'error',
     'no-new-native-nonconstructor': 'error',
-    'no-new-object': 'error',
     'no-new-symbol': 'error',
     'no-new-wrappers': 'error',
     'no-nonoctal-decimal-escape': 'error',
+    'no-object-constructor': 'error',
     'no-obj-calls': 'error',
     'no-octal': 'error',
     'no-octal-escape': 'error',
@@ -156,7 +154,6 @@ module.exports = {
     'no-restricted-properties': 'off', // no ideas of what to disallow right now...
     'no-restricted-syntax': ['error', 'WithStatement'],
     'no-return-assign': 'error',
-    'no-return-await': 'error',
     'no-script-url': 'error',
     'no-self-assign': 'error',
     'no-self-compare': 'error',
@@ -209,7 +206,6 @@ module.exports = {
     'object-shorthand': ['error', 'properties'], // methods are optional so you can specify a name if you want
     'one-var': ['error', {initialized: 'never', uninitialized: 'always'}],
     'operator-assignment': 'off', // readability on a case-by-case basis
-    'padding-line-between-statements': 'off', // meh...
     'prefer-arrow-callback': [
       'error',
       {allowNamedFunctions: true, allowUnboundThis: true},
@@ -234,10 +230,10 @@ module.exports = {
     'sort-imports': 'off',
     'sort-keys': 'off',
     'sort-vars': 'off',
-    'spaced-comment': 'off',
     strict: 'error',
     'symbol-description': 'error',
     'use-isnan': 'error',
+    'unicode-bom': ['error', 'never'],
     'valid-typeof': 'error',
     'vars-on-top': 'error',
     yoda: 'error',
@@ -284,18 +280,12 @@ module.exports = {
         'init-declarations': 'off',
         '@typescript-eslint/init-declarations': 'off',
 
-        'lines-between-class-members': 'off',
-        '@typescript-eslint/lines-between-class-members': 'off',
-
         'no-array-constructor': 'off',
         '@typescript-eslint/no-array-constructor': 'error',
 
         'no-dupe-class-members': 'off',
         '@typescript-eslint/no-dupe-class-members': 'off', // ts(2393) & ts(2300)
 
-        'no-duplicate-imports': 'off',
-        '@typescript-eslint/no-duplicate-imports': 'error',
-
         'no-empty-function': 'off',
         '@typescript-eslint/no-empty-function': 'off',
 
@@ -373,7 +363,6 @@ module.exports = {
         '@typescript-eslint/no-extraneous-class': 'error', // stay away from classes when you can
         '@typescript-eslint/no-floating-promises': 'warn', // not a bad rule, but can be annoying
         '@typescript-eslint/no-for-in-array': 'error',
-        '@typescript-eslint/no-implicit-any-catch': 'warn',
         '@typescript-eslint/no-inferrable-types': 'off', // I personally prefer relying on inference where possible, but I don't want to lint for it.
         '@typescript-eslint/no-invalid-void-type': 'warn',
         '@typescript-eslint/no-misused-new': 'error',
@@ -384,7 +373,6 @@ module.exports = {
         '@typescript-eslint/no-namespace': 'error',
         '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
         '@typescript-eslint/no-non-null-assertion': 'error',
-        '@typescript-eslint/no-parameter-properties': 'error', // yeah, I don't like this feature
         '@typescript-eslint/no-require-imports': 'off', // sometimes you can't do it any other way
         '@typescript-eslint/no-this-alias': 'error',
         '@typescript-eslint/no-type-alias': 'off',
@@ -401,6 +389,7 @@ module.exports = {
         '@typescript-eslint/no-unsafe-return': 'off', // seems like an ok idea, but it failed on a regular React Component
         '@typescript-eslint/no-var-requires': 'error',
         '@typescript-eslint/non-nullable-type-assertion-style': 'off',
+        '@typescript-eslint/parameter-properties': 'error',
         '@typescript-eslint/prefer-as-const': 'error',
         '@typescript-eslint/prefer-enum-initializers': 'error', // makes total sense
         '@typescript-eslint/prefer-for-of': 'off', // I prefer for of, but I don't want to lint for it

jest.js

@@ -55,6 +55,7 @@ module.exports = {
         'jest/no-commented-out-tests': 'warn',
         'jest/no-conditional-expect': 'error',
         'jest/no-conditional-in-test': 'error',
+        'jest/no-confusing-set-timeout': 'error',
         'jest/no-deprecated-functions': 'error',
         'jest/no-disabled-tests': 'warn',
         'jest/no-done-callback': 'error',
@@ -63,16 +64,16 @@ module.exports = {
         'jest/no-focused-tests': 'error',
         'jest/no-hooks': 'off',
         'jest/no-identical-title': 'error',
-        'jest/no-if': 'error',
         'jest/no-interpolation-in-snapshots': 'error',
         'jest/no-jasmine-globals': 'off',
-        'jest/no-jest-import': 'error',
         'jest/no-large-snapshots': ['warn', {maxSize: 300}],
         'jest/no-mocks-import': 'error',
+        'jest/no-restricted-jest-methods': 'off',
         'jest/no-restricted-matchers': 'off',
         'jest/no-standalone-expect': 'off',
         'jest/no-test-prefixes': 'error',
         'jest/no-test-return-statement': 'off',
+        'jest/no-untyped-mock-factory': 'off',
         'jest/prefer-called-with': 'error',
         'jest/prefer-comparison-matcher': 'error',
         'jest/prefer-each': 'error',
@@ -117,32 +118,33 @@ module.exports = {
 
         ...(hasTestingLibrary
           ? {
-              'testing-library/await-async-query': 'error',
+              'testing-library/await-async-events': 'error',
+              'testing-library/await-async-queries': 'error',
               'testing-library/await-async-utils': 'error',
               'testing-library/await-fire-event': 'off',
               'testing-library/consistent-data-testid': 'off',
               'testing-library/no-await-sync-events': 'error',
-              'testing-library/no-await-sync-query': 'error',
+              'testing-library/no-await-sync-queries': 'error',
               'testing-library/no-container': 'error',
               'testing-library/no-debugging-utils': 'error',
               'testing-library/no-dom-import': ['error', 'react'],
               'testing-library/no-global-regexp-flag-in-query': 'error',
               'testing-library/no-manual-cleanup': 'error',
               'testing-library/no-node-access': 'error',
               'testing-library/no-promise-in-fire-event': 'error',
-              'testing-library/no-render-in-setup': 'error',
+              'testing-library/no-render-in-lifecycle': 'error',
               'testing-library/no-unnecessary-act': 'error',
-              'testing-library/no-wait-for-empty-callback': 'error',
               'testing-library/no-wait-for-multiple-assertions': 'error',
               'testing-library/no-wait-for-side-effects': 'error',
               'testing-library/no-wait-for-snapshot': 'error',
               'testing-library/prefer-explicit-assert': 'warn',
               'testing-library/prefer-find-by': 'error',
+              'testing-library/prefer-implicit-assert': 'error',
               'testing-library/prefer-presence-queries': 'error',
               'testing-library/prefer-query-by-disappearance': 'error',
+              'testing-library/prefer-query-matchers': 'off',
               'testing-library/prefer-screen-queries': 'error',
               'testing-library/prefer-user-event': 'error',
-              'testing-library/prefer-wait-for': 'error',
               'testing-library/render-result-naming-convention': 'error',
             }
           : null),
@@ -151,6 +153,7 @@ module.exports = {
     {
       files: ['**/__tests__/**/*.ts?(x)', '**/*.{spec,test}.ts?(x)'],
       rules: {
+        'jest/no-untyped-mock-factory': 'error',
         '@typescript-eslint/unbound-method': 'off',
         'jest/unbound-method': 'error',
       },

jsx-a11y.js

@@ -15,7 +15,6 @@ module.exports = {
   },
   plugins: ['jsx-a11y'],
   rules: {
-    'jsx-a11y/accessible-emoji': 'error',
     'jsx-a11y/alt-text': 'warn',
     'jsx-a11y/anchor-ambiguous-text': 'warn',
     'jsx-a11y/anchor-has-content': 'error',
@@ -45,7 +44,6 @@ module.exports = {
     'jsx-a11y/no-noninteractive-element-interactions': 'warn',
     'jsx-a11y/no-noninteractive-element-to-interactive-role': 'warn',
     'jsx-a11y/no-noninteractive-tabindex': 'off',
-    'jsx-a11y/no-onchange': 'off',
     'jsx-a11y/no-redundant-roles': 'error',
     'jsx-a11y/no-static-element-interactions': 'off',
     'jsx-a11y/prefer-tag-over-role': 'error',

package.json

@@ -42,44 +42,44 @@
   ],
   "dependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint-config-prettier": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^26.9.0",
-    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.10.0",
+    "eslint-plugin-testing-library": "^6.2.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.8"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
     "eslint": "^8.32.0",
     "eslint-find-rules": "^4.1.0",
     "husky": "^8.0.3",
-    "jest": "^28.1.3",
+    "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.8.3",
     "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "eslint": "^8.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "4 - 5"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
   },
   "engines": {
-    "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
-    "npm": ">=6",
+    "node": ">=18.0.0",
+    "npm": ">=10",
     "yarn": ">=1"
   }
 }

react.js

@@ -82,9 +82,8 @@ module.exports = {
     'react/jsx-no-useless-fragment': 'warn',
     'react/jsx-pascal-case': 'error',
     'react/jsx-props-no-spreading': 'off',
-    'react/jsx-sort-default-props': 'off',
     'react/jsx-sort-props': 'off',
-    'react/jsx-uses-react': 'error',
+    'react/jsx-uses-react': 'off',
     'react/jsx-uses-vars': 'error',
     'react/no-access-state-in-setstate': 'error',
     'react/no-adjacent-inline-elements': 'off',
@@ -122,7 +121,7 @@ module.exports = {
     'react/prefer-read-only-props': 'off',
     'react/prefer-stateless-function': 'off',
     'react/prop-types': hasPropTypes ? 'error' : 'off',
-    'react/react-in-jsx-scope': 'error',
+    'react/react-in-jsx-scope': 'off',
     'react/require-default-props': 'off', // sometimes the default value is undefined so that's fine...
     'react/require-optimization': 'off',
     'react/require-render-return': 'error',

samples/users.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 export default Users