eslint-config-seek 0.0.0-typescript-config-20221028024455 → 0.0.0-unsafe-to-chain-autofix-20230606043410

package/README.md

@@ -19,12 +19,20 @@ First, install this package, ESLint and the necessary plugins listed in this pro
 
 Then create a file named `.eslintrc` with following contents in the root folder of your project:
 
-```js
+```json
 {
   "extends": "seek"
 }
 ```
 
+The default configuration includes support for React projects. For projects that are not based on React, the "base" configuration should be used instead:
+
+```json
+{
+  "extends": "seek/base"
+}
+```
+
 You can override the settings from `eslint-config-seek` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website.
 
 ## License

package/{.eslintrc.js → base.js}

@@ -4,6 +4,9 @@ const root = require('find-root')(process.cwd());
 const OFF = 0;
 const ERROR = 2;
 
+const rulesDirPlugin = require('eslint-plugin-rulesdir');
+rulesDirPlugin.RULES_DIR = path.join(__dirname, 'rules');
+
 const baseRules = {
   // Possible Errors
   'no-console': ERROR,
@@ -76,40 +79,22 @@ const baseRules = {
   'no-return-await': OFF,
 };
 
-const reactRules = {
-  'react/prefer-es6-class': [ERROR, 'always'],
-  'react/self-closing-comp': ERROR,
-  'react/jsx-pascal-case': ERROR,
-  'react-hooks/rules-of-hooks': ERROR,
-  'react-hooks/exhaustive-deps': ERROR,
-  'react/no-children-prop': ERROR,
-  'react/display-name': OFF,
-  'react/prop-types': OFF,
-};
+const { js: jsExtensions, ts: tsExtensions } = require('./extensions');
+const allExtensions = [...jsExtensions, ...tsExtensions];
 
 /** @type {import('eslint').Linter.Config} */
 const baseConfig = {
   parser: '@babel/eslint-parser',
   parserOptions: {
-    babelOptions: {
-      presets: ['@babel/preset-react'],
-    },
     requireConfigFile: false,
     sourceType: 'module',
   },
   root: true,
   env: {
-    browser: true,
     node: true,
   },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-  plugins: ['react', 'react-hooks', 'import'],
+  plugins: ['import'],
   extends: [
-    'plugin:react/recommended',
     // this config enables eslint-plugin-import to resolve JavaScript and TypeScript files
     // https://github.com/import-js/eslint-plugin-import/blob/v2.26.0/config/typescript.js
     // Some rules provided by eslint-plugin-import e.g. `import/no-duplicates` don't work without it
@@ -118,16 +103,16 @@ const baseConfig = {
   ],
   rules: {
     ...baseRules,
-    ...reactRules,
   },
   overrides: [
     {
       // TypeScript config
-      files: ['**/*.ts', '**/*.tsx'],
+      files: [`**/*.{${tsExtensions}}`],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 2018,
         sourceType: 'module',
+        project: true,
       },
       extends: [
         'plugin:@typescript-eslint/eslint-recommended',
@@ -166,11 +151,31 @@ const baseConfig = {
         // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-shadow.md
         'no-shadow': OFF,
         '@typescript-eslint/no-shadow': ERROR,
+
+        // These two rules deal with autofixing type imports/exports
+        // https://typescript-eslint.io/rules/consistent-type-imports
+        '@typescript-eslint/consistent-type-imports': [
+          ERROR,
+          { fixStyle: 'inline-type-imports' },
+        ],
+        // https://typescript-eslint.io/rules/consistent-type-exports
+        '@typescript-eslint/consistent-type-exports': [
+          ERROR,
+          { fixMixedExportsWithInlineTypeSpecifier: true },
+        ],
+        // https://typescript-eslint.io/rules/no-import-type-side-effects
+        '@typescript-eslint/no-import-type-side-effects': ERROR,
+
+        // This rule deals with merging multiple imports from the same module.
+        // In this case, we want type imports to be inlined when merging with the other imports.
+        // However, there is a pending PR which improves the behaviour of this rule https://github.com/import-js/eslint-plugin-import/pull/2716
+        // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-duplicates.md#inline-type-imports
+        'import/no-duplicates': [ERROR, { 'prefer-inline': true }],
       },
     },
     {
       // JavaScript config
-      files: ['**/*.js', '**/*.jsx'],
+      files: [`**/*.{${jsExtensions}}`],
       env: {
         es6: true,
       },
@@ -183,6 +188,7 @@ const baseConfig = {
         },
       },
       rules: {
+        'no-undef': ERROR,
         'no-use-before-define': [ERROR, { functions: false }],
         'no-unused-expressions': ERROR,
         'import/no-unresolved': [
@@ -194,7 +200,10 @@ const baseConfig = {
     },
     {
       // Jest config
-      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/*.@(spec|test).{js,ts,tsx}'],
+      files: [
+        `**/__tests__/**/*.{${allExtensions}}`,
+        `**/*.@(spec|test).{${allExtensions}}`,
+      ],
       env: {
         jest: true,
       },
@@ -203,12 +212,18 @@ const baseConfig = {
     },
     {
       // Cypress config
-      files: ['cypress/**/*.{js,ts,tsx}'],
+      files: [`**/cypress/**/*.{${allExtensions}}`],
+      // eslint-plugin-cypress doesn't support ESLint v8.
+      // Use fork by `@finsit` until this is solved.
+      // https://github.com/cypress-io/eslint-plugin-cypress/issues/89
+      extends: ['plugin:@finsit/cypress/recommended'],
       env: {
-        'cypress/globals': true,
+        '@finsit/cypress/globals': true,
+      },
+      plugins: ['@finsit/cypress', 'rulesdir'],
+      rules: {
+        'rulesdir/unsafe-to-chain-command': ERROR,
       },
-      extends: ['plugin:cypress/recommended'],
-      plugins: ['cypress'],
     },
   ],
 };

package/extensions.js

@@ -0,0 +1,2 @@
+module.exports.js = ['js', 'cjs', 'mjs', 'jsx'];
+module.exports.ts = ['ts', 'cts', 'mts', 'tsx'];

package/index.js

@@ -0,0 +1,37 @@
+const OFF = 0;
+const ERROR = 2;
+
+const reactRules = {
+  'react/prefer-es6-class': [ERROR, 'always'],
+  'react/self-closing-comp': ERROR,
+  'react/jsx-pascal-case': ERROR,
+  'react-hooks/rules-of-hooks': ERROR,
+  'react-hooks/exhaustive-deps': ERROR,
+  'react/no-children-prop': ERROR,
+  'react/display-name': OFF,
+  'react/prop-types': OFF,
+};
+
+/** @type {import('eslint').Linter.Config} */
+const eslintConfig = {
+  env: {
+    browser: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  plugins: ['react', 'react-hooks'],
+  extends: ['plugin:react/recommended', './base.js'],
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve('@babel/preset-react')],
+    },
+  },
+  rules: {
+    ...reactRules,
+  },
+};
+
+module.exports = eslintConfig;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "eslint-config-seek",
-  "version": "0.0.0-typescript-config-20221028024455",
+  "version": "0.0.0-unsafe-to-chain-autofix-20230606043410",
   "description": "ESLint configuration used by SEEK",
-  "main": ".eslintrc.js",
+  "main": "index.js",
   "files": [
-    ".eslintrc.js"
+    "index.js",
+    "base.js",
+    "extensions.js",
+    "rules/*"
   ],
   "repository": {
     "type": "git",
@@ -17,38 +20,39 @@
   },
   "homepage": "https://github.com/seek-oss/eslint-config-seek#readme",
   "dependencies": {
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "3.5.2",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.3",
-    "eslint-plugin-react": "^7.31.10",
+    "@finsit/eslint-plugin-cypress": "^3.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-import-resolver-typescript": "3.5.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-rulesdir": "^0.2.2",
     "find-root": "^1.1.0"
   },
   "devDependencies": {
-    "@changesets/cli": "2.25.0",
-    "@changesets/get-github-info": "0.5.1",
-    "eslint": "8.26.0",
-    "prettier": "2.7.1",
-    "typescript": "^4.8.4"
+    "@changesets/cli": "^2.26.0",
+    "@changesets/get-github-info": "^0.5.2",
+    "eslint": "^8.34.0",
+    "prettier": "^2.8.4",
+    "typescript": "~4.9.5"
   },
   "peerDependencies": {
     "eslint": ">=6",
-    "typescript": ">=3.3"
+    "typescript": ">=4.5"
   },
-  "packageManager": "pnpm@7.14.0",
+  "packageManager": "pnpm@8.5.1",
   "volta": {
-    "node": "16.18.0"
+    "node": "16.19.1"
   },
   "scripts": {
     "release": "changeset publish",
-    "test": "eslint .",
+    "test": "eslint --config index.js . && eslint --config base.js .",
     "changeset-version": "changeset version && prettier --write ."
   }
 }

package/rules/unsafe-to-chain-command.js

@@ -0,0 +1,107 @@
+/** This rule was copied from the original `eslint-plugin-cypress` so we can use the fork (which
+ * supports eslint 8) while having the same recommended rules as the upstream
+ * https://github.com/foretagsplatsen/eslint-plugin-cypress
+ * https://github.com/cypress-io/eslint-plugin-cypress/blob/c626ad543f65babf1def5caabd1bc9bb9900d2c7/lib/rules/unsafe-to-chain-command.js
+ */
+// eslint-disable-next-line strict
+'use strict';
+
+/** @type {import("eslint").Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Actions should be at the end of chains, not in the middle',
+      category: 'Possible Errors',
+      recommended: true,
+      url: 'https://docs.cypress.io/guides/core-concepts/retry-ability#Actions-should-be-at-the-end-of-chains-not-the-middle',
+    },
+    schema: [],
+    fixable: 'code',
+    messages: {
+      unexpected:
+        'It is unsafe to chain further commands that rely on the subject after this command. It is best to split the chain, chaining again from `cy.` in the next command.',
+    },
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (
+          isRootCypress(node) &&
+          isActionUnsafeToChain(node) &&
+          node.parent.type === 'MemberExpression'
+        ) {
+          context.report({
+            node,
+            messageId: 'unexpected',
+            fix: (fixer) => {
+              const { range: originalRange } = node.parent.property;
+
+              // Include the `.` before the identifier in the range
+              const adjustedRange = [originalRange[0] - 1, originalRange[1]];
+
+              return [
+                fixer.insertTextAfter(node, ';'),
+                fixer.insertTextBeforeRange(adjustedRange, 'cy'),
+              ];
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+/** @param {import("eslint").Rule.Node} node */
+function isRootCypress(node) {
+  while (node.type === 'CallExpression') {
+    if (node.callee.type !== 'MemberExpression') {
+      return false;
+    }
+
+    if (
+      node.callee.object.type === 'Identifier' &&
+      node.callee.object.name === 'cy'
+    ) {
+      return true;
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    node = node.callee.object;
+  }
+
+  return false;
+}
+
+/** @param {import("eslint").Rule.Node} node */
+function isActionUnsafeToChain(node) {
+  // commands listed in the documentation with text: 'It is unsafe to chain further commands that rely on the subject after xxx'
+  const unsafeToChainActions = [
+    'blur',
+    'clear',
+    'click',
+    'check',
+    'dblclick',
+    'each',
+    'focus',
+    'rightclick',
+    'screenshot',
+    'scrollIntoView',
+    'scrollTo',
+    'select',
+    'selectFile',
+    'spread',
+    'submit',
+    'type',
+    'trigger',
+    'uncheck',
+    'within',
+  ];
+
+  return (
+    node.callee &&
+    node.callee.property &&
+    node.callee.property.type === 'Identifier' &&
+    unsafeToChainActions.includes(node.callee.property.name)
+  );
+}