@gitlab/eslint-plugin 21.5.0 → 22.0.0

package/lib/vue-fragments.js

@@ -0,0 +1,111 @@
+const vuePlugin = require('eslint-plugin-vue');
+const vueParser = require('vue-eslint-parser');
+const globals = require('globals');
+const unicornPlugin = require('eslint-plugin-unicorn');
+const promisePlugin = require('eslint-plugin-promise');
+const importPlugin = require('eslint-plugin-import');
+
+const gitlabPlugin = require('./plugin.js');
+
+/*
+  The Vue config in two halves, so lib/flat-configs/vue.js and
+  lib/flat-configs/default.js can each place eslint-config-prettier where it
+  belongs for them: after the preset in the former, before it in the latter.
+
+  vue2-recommended, not the identically-named 'flat/recommended', which targets
+  Vue 3. The two names have never pointed at the same preset, and retargeting
+  would move 33 rules onto consumers -- a product decision, not a config-format
+  one.
+*/
+const presetAndSetup = [
+  ...vuePlugin.configs['flat/vue2-recommended'],
+  {
+    name: '@gitlab/vue/setup',
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: require.resolve('espree'),
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    plugins: {
+      unicorn: unicornPlugin,
+      promise: promisePlugin,
+      import: importPlugin,
+      '@gitlab': gitlabPlugin,
+    },
+  },
+];
+
+const gitlabRules = [
+  {
+    name: '@gitlab/vue/rules',
+    rules: {
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: { void: 'any', normal: 'never', component: 'always' },
+          svg: 'always',
+          math: 'always',
+        },
+      ],
+      'vue/block-order': ['error', { order: ['script', 'template', 'style'] }],
+      // Turning this off for now as we violate this rule in many places.
+      'vue/max-attributes-per-line': 'off',
+      'vue/component-options-name-casing': ['error', 'PascalCase'],
+      'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+      '@gitlab/vue-require-required-key': 'error',
+      'vue/v-slot-style': ['error', { atComponent: 'shorthand' }],
+      '@gitlab/vue-no-data-toggle': 'error',
+      '@gitlab/vue-no-popover-target-dollar-el': 'warn',
+      '@gitlab/vue-prefer-dollar-scopedslots': 'error',
+      '@gitlab/vue-slot-name-casing': 'error',
+      '@gitlab/no-runtime-template-compiler': 'error',
+      'import/order': [
+        'error',
+        {
+          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        },
+      ],
+      // See https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/52.
+      'vue/component-api-style': ['error', ['options']],
+      // We might not want to enable vue/singleline-html-element-content-newline and
+      // vue/multiline-html-element-content-newline just yet as they might cause
+      // regression depending on how the consumers compile Vue templates.
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/multiline-html-element-content-newline': 'off',
+      // Disabling these as they might conflict with prettier.
+      'vue/html-indent': 'off',
+      'vue/html-closing-bracket-newline': 'off',
+      // BEGIN rules to aid migration from Vue 2.x to 3.x.
+      // See https://gitlab.com/groups/gitlab-org/-/epics/3174 for more details.
+      'vue/no-deprecated-data-object-declaration': 'error',
+      'vue/no-deprecated-events-api': 'error',
+      'vue/no-deprecated-filter': 'error',
+      'vue/no-deprecated-functional-template': 'error',
+      'vue/no-deprecated-html-element-is': 'error',
+      'vue/no-deprecated-inline-template': 'error',
+      'vue/no-deprecated-props-default-this': 'error',
+      'vue/no-deprecated-scope-attribute': 'error',
+      'vue/no-deprecated-slot-attribute': 'error',
+      'vue/no-deprecated-slot-scope-attribute': 'error',
+      'vue/no-deprecated-v-on-number-modifiers': 'error',
+      'vue/no-deprecated-vue-config-keycodes': 'error',
+      // END rules to aid migration from Vue 2.x to 3.x.
+    },
+  },
+  {
+    name: '@gitlab/vue/sfc-overrides',
+    files: ['**/*.vue'],
+    rules: {
+      'import/no-default-export': 'off',
+    },
+  },
+];
+
+module.exports = { presetAndSetup, gitlabRules };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "21.5.0",
+  "version": "22.0.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {
     "createRule": "./scripts/createRule.js && yarn update",
-    "update": "./scripts/updateFiles.js && prettier --write lib/index.js",
+    "update": "./scripts/updateFiles.js && prettier --write lib/plugin.js lib/index.js",
     "commit": "npx git-cz",
     "test": "mocha"
   },
@@ -27,30 +27,48 @@
   },
   "homepage": "https://gitlab.com/gitlab-org/frontend/eslint-plugin#readme",
   "engines": {
-    "node": ">=14"
+    "node": "^20.12.0 || ^22.0.0 || >=24.0.0"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "confusing-browser-globals": "^1.0.11",
-    "eslint-config-prettier": "^9.1.0",
+    "@eslint/js": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^29.0.0",
     "eslint-plugin-promise": "^7.0.0",
     "eslint-plugin-tailwindcss": "^3.18.3",
     "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-vue": "^9.33.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "globals": "^17.0.0",
     "lodash": "^4.18.1",
-    "vue-eslint-parser": "^9.4.3"
+    "semver": "^7.0.0",
+    "vue-eslint-parser": "^10.3.0"
   },
   "peerDependencies": {
-    "eslint": "^8.57.0 || ^9.0.0"
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "typescript": ">=4.8.4"
+  },
+  "peerDependenciesMeta": {
+    "@typescript-eslint/eslint-plugin": {
+      "optional": true
+    },
+    "@typescript-eslint/parser": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
     "glob": "^7.2.0",
     "mocha": "^11.7.5",
     "prettier": "^2.6.1",
+    "typescript": "^5.0.0",
     "yarn-deduplicate": "^6.0.2"
   }
 }

package/scripts/generateRuleMapFixtures.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * ONE-SHOT generator. Resolves each eslintrc config in lib/configs/ into a
+ * flat map of rule -> [severity, ...options] and writes it to
+ * tests/fixtures/rule-maps/. Run once, on ESLint 8, BEFORE the flat-config
+ * migration. Committed for reviewability; not wired into CI.
+ *
+ * Its inputs are gone and it no longer runs. Kept only as the provenance of
+ * the frozen fixtures; deleted at the end of this stack.
+ */
+const fs = require('fs');
+const path = require('path');
+const { ESLint } = require('eslint');
+
+const CONFIG_DIR = path.join(__dirname, '../lib/configs');
+const OUT_DIR = path.join(__dirname, '../tests/fixtures/rule-maps');
+
+// Top level only: lib/configs/base/ holds rule fragments, not configs.
+const CONFIGS = fs
+  .readdirSync(CONFIG_DIR)
+  .filter((file) => file.endsWith('.js'))
+  .map((file) => path.basename(file, '.js'));
+const SAMPLES = ['sample.js', 'sample.vue', 'sample.ts', 'sample.test.ts'];
+
+const SEVERITIES = ['off', 'warn', 'error'];
+
+/** Normalise [2, opts] / 'error' / ['error', opts] into 'error' or ['error', ...opts]. */
+function normalizeEntry(entry) {
+  const value = Array.isArray(entry) ? entry : [entry];
+  const [severity, ...options] = value;
+  const name = typeof severity === 'number' ? SEVERITIES[severity] : severity;
+  return options.length > 0 ? [name, ...options] : name;
+}
+
+function normalizeRules(rules) {
+  return Object.fromEntries(
+    Object.keys(rules)
+      .sort()
+      .map((name) => [name, normalizeEntry(rules[name])]),
+  );
+}
+
+async function mapForConfig(configName) {
+  const configPath = require.resolve(`../lib/configs/${configName}.js`);
+  const eslint = new ESLint({
+    useEslintrc: false,
+    // The plugin cannot resolve itself by name from inside its own repo.
+    plugins: { '@gitlab': require('../lib/index.js') },
+    baseConfig: { extends: [configPath] },
+  });
+
+  const resolved = await Promise.all(
+    SAMPLES.map((sample) => eslint.calculateConfigForFile(path.join(process.cwd(), sample))),
+  );
+  return Object.fromEntries(
+    SAMPLES.map((sample, index) => [sample, normalizeRules(resolved[index].rules || {})]),
+  );
+}
+
+async function main() {
+  fs.mkdirSync(OUT_DIR, { recursive: true });
+  for (const name of CONFIGS) {
+    // eslint-disable-next-line no-await-in-loop
+    const map = await mapForConfig(name);
+    const file = path.join(OUT_DIR, `${name}.json`);
+    fs.writeFileSync(file, `${JSON.stringify(map, null, 2)}\n`);
+    const counts = SAMPLES.map((sample) => `${sample} ${Object.keys(map[sample]).length}`);
+    console.log(`Wrote ${path.relative(process.cwd(), file)} (${counts.join(', ')})`);
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

package/scripts/helpers/getConfigs.js

@@ -1,19 +1,26 @@
 const path = require('path');
 const glob = require('glob');
 
-const rulesDir = path.join(__dirname, '../../lib/configs');
+const configsDir = path.join(__dirname, '../../lib/flat-configs');
 
-function getRule(fullPath) {
-  const relative = path.relative(rulesDir, fullPath);
+/*
+  lib/flat-configs/ is a closed set: this glob decides what `yarn update`
+  publishes as `plugin.configs[<basename>]`, so a shared helper dropped in that
+  directory becomes a bogus public config. That is why lib/prettier-rules.js and
+  lib/vue-fragments.js sit at the lib/ root instead; put new shared code there.
+
+  No `.meta` spread, unlike getRules.js: a flat config exports an array.
+*/
+function getConfig(fullPath) {
+  const relative = path.relative(configsDir, fullPath);
   const name = path.basename(relative, '.js');
   return {
-    ...require(fullPath).meta,
     name,
     relative,
     fullPath,
   };
 }
 
-module.exports = function getRules() {
-  return glob.sync(path.join(rulesDir, '**/*.js')).map(getRule);
+module.exports = function getConfigs() {
+  return glob.sync(path.join(configsDir, '*.js')).map(getConfig);
 };

package/scripts/updateFiles.js

@@ -9,21 +9,40 @@ const libPath = path.join(__dirname, '../lib');
 const rules = getRules();
 const configs = getConfigs();
 
-const createIndexJs = (ruleImports, configImports) => `/**
+const createPluginJs = (ruleImports) => `/**
  * This file is GENERATED, please run \`yarn update\` after adding or renaming a rule
  */
+const { name, version } = require('../package.json');
+
 module.exports = {
+  meta: { name, version },
   rules: {
 ${ruleImports.join('\n')}
   },
+};
+`;
+
+const createIndexJs = (configImports) => `/**
+ * This file is GENERATED, please run \`yarn update\` after adding or renaming a rule
+ */
+const plugin = require('./plugin.js');
+
+/*
+  Getters, so requiring the plugin never loads a config the consumer is not
+  using: \`typescript\` pulls in optional peer dependencies, and eagerly
+  requiring it would throw for anyone without the TypeScript toolchain. Getters
+  in an object literal are enumerable, so \`Object.keys(configs)\` is unaffected.
+*/
+module.exports = {
+  ...plugin,
   configs: {
 ${configImports.join('\n')}
-  }
+  },
 };
 `;
 
 const writeIndexJs = () => {
-  console.log('Updating lib/index.js...');
+  console.log('Updating lib/plugin.js and lib/index.js...');
 
   const ruleImports = rules.map((rule) => {
     const relPath = path.relative(libPath, rule.fullPath);
@@ -32,12 +51,17 @@ const writeIndexJs = () => {
 
   const configImports = configs.map((config) => {
     const relPath = path.relative(libPath, config.fullPath);
-    return `    '${config.name}': require('./${relPath}'),`;
+    // Quoted so a hyphenated filename cannot emit a syntax error; prettier
+    // drops the quotes again where they are redundant.
+    return `    get '${config.name}'() {
+      return require('./${relPath}');
+    },`;
   });
 
-  fs.writeFileSync(path.join(libPath, 'index.js'), createIndexJs(ruleImports, configImports));
+  fs.writeFileSync(path.join(libPath, 'plugin.js'), createPluginJs(ruleImports));
+  fs.writeFileSync(path.join(libPath, 'index.js'), createIndexJs(configImports));
 
-  console.log('Successfully updated lib/index.js');
+  console.log('Successfully updated lib/plugin.js and lib/index.js');
 };
 
 const createDoc = (ruleDocs) => `<!--

package/eslint9/configs/base.js

@@ -1,140 +0,0 @@
-const confusingBrowserGlobals = require('confusing-browser-globals');
-const globals = require('globals');
-const unicornPlugin = require('eslint-plugin-unicorn');
-const promisePlugin = require('eslint-plugin-promise');
-const importPlugin = require('eslint-plugin-import');
-
-// Import all the base configurations
-const bestPracticesConfig = require('../../lib/configs/base/best-practices');
-const errorsConfig = require('../../lib/configs/base/errors');
-const nodeConfig = require('../../lib/configs/base/node');
-const styleConfig = require('../../lib/configs/base/style');
-const variablesConfig = require('../../lib/configs/base/variables');
-const es6Config = require('../../lib/configs/base/es6');
-const importsConfig = require('../../lib/configs/base/imports');
-const strictConfig = require('../../lib/configs/base/strict');
-
-/*
-  This plugin contains rules related to GitLab JavaScript style guide
-  Vue specific rules are in lib/configs/vue.js
-*/
-module.exports = {
-  languageOptions: {
-    globals: {
-      ...globals.browser,
-      ...globals.es2020,
-      ...globals.node,
-      ...globals.es6,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    parserOptions: {
-      parser: 'espree',
-    },
-  },
-  plugins: {
-    unicorn: unicornPlugin,
-    promise: promisePlugin,
-    import: importPlugin,
-  },
-  settings: {
-    // Merge import settings from imports config
-    ...importsConfig.settings,
-  },
-  rules: {
-    ...promisePlugin.configs['flat/recommended'].rules,
-    // Merge all rules from the base configurations
-    ...bestPracticesConfig.rules,
-    ...errorsConfig.rules,
-    ...nodeConfig.rules,
-    ...styleConfig.rules,
-    ...variablesConfig.rules,
-    ...es6Config.rules,
-    ...importsConfig.rules,
-    ...strictConfig.rules,
-    // Override specific rules from base configs
-    // Promise rule customizations
-    'promise/catch-or-return': [
-      'error',
-      {
-        allowFinally: true,
-      },
-    ],
-    camelcase: [
-      'error',
-      {
-        properties: 'never',
-        ignoreDestructuring: true,
-      },
-    ],
-    'default-param-last': 'off',
-    'arrow-body-style': 'off',
-    'unicorn/filename-case': ['error', { case: 'snakeCase' }],
-    'unicorn/no-array-callback-reference': 'error',
-    'import/prefer-default-export': 'off',
-    'import/no-default-export': 'error',
-    'import/no-deprecated': 'error',
-    'import/no-dynamic-require': ['error', { esmodule: true }],
-    'no-implicit-coercion': [
-      'error',
-      {
-        boolean: true,
-        number: true,
-        string: true,
-      },
-    ],
-    'no-param-reassign': [
-      'error',
-      {
-        props: true,
-        ignorePropertyModificationsFor: ['acc', 'accumulator', 'el', 'element', 'state'],
-      },
-    ],
-    'no-restricted-exports': [
-      'error',
-      {
-        restrictedNamedExports: [
-          'then', // avoid confusion when used with dynamic `import()` promise
-        ],
-      },
-    ],
-    'no-restricted-syntax': 'off',
-    'no-sequences': [
-      'error',
-      {
-        allowInParentheses: false,
-      },
-    ],
-    'no-restricted-globals': [
-      'error',
-      {
-        name: 'isFinite',
-        message:
-          'Use Number.isFinite instead https://github.com/airbnb/javascript#standard-library--isfinite',
-      },
-      {
-        name: 'isNaN',
-        message:
-          'Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan',
-      },
-      {
-        name: 'escape',
-        message:
-          "The global `escape` function is unsafe. Did you mean to use `encodeURI`, `encodeURIComponent` or lodash's `escape` instead?",
-      },
-      {
-        name: 'unescape',
-        message:
-          "The global `unescape` function is unsafe. Did you mean to use `decodeURI`, `decodeURIComponent` or lodash's `unescape` instead?",
-      },
-    ].concat(confusingBrowserGlobals),
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-      },
-    ],
-    // https://docs.gitlab.com/ee/development/fe_guide/style/javascript.html#limit-number-of-parameters
-    'max-params': ['error', { max: 3 }],
-  },
-};

package/lib/configs/base.js

@@ -1,115 +0,0 @@
-const confusingBrowserGlobals = require('confusing-browser-globals');
-
-/*
-  This plugin contains rules related to GitLab JavaScript style guide
-  Vue specific rules are in lib/configs/vue.js
-*/
-module.exports = {
-  env: {
-    browser: true,
-    es2020: true,
-  },
-  extends: [
-    ...[
-      './base/best-practices.js',
-      './base/errors',
-      './base/node',
-      './base/style',
-      './base/variables',
-      './base/es6',
-      './base/imports',
-      './base/strict',
-    ].map((f) => require.resolve(f)),
-    'prettier',
-    'plugin:promise/recommended',
-  ],
-  parserOptions: {
-    parser: 'espree',
-    ecmaVersion: 'latest',
-  },
-  plugins: ['unicorn', 'promise', 'import', '@gitlab'],
-  rules: {
-    camelcase: [
-      'error',
-      {
-        properties: 'never',
-        ignoreDestructuring: true,
-      },
-    ],
-    'default-param-last': 'off',
-    'arrow-body-style': 'off',
-    'unicorn/filename-case': ['error', { case: 'snakeCase' }],
-    'unicorn/no-array-callback-reference': 'error',
-    'import/prefer-default-export': 'off',
-    'import/no-default-export': 'error',
-    'import/no-deprecated': 'error',
-    'import/no-dynamic-require': ['error', { esmodule: true }],
-    'no-implicit-coercion': [
-      'error',
-      {
-        boolean: true,
-        number: true,
-        string: true,
-      },
-    ],
-    'no-param-reassign': [
-      'error',
-      {
-        props: true,
-        ignorePropertyModificationsFor: ['acc', 'accumulator', 'el', 'element', 'state'],
-      },
-    ],
-    'no-restricted-exports': [
-      'error',
-      {
-        restrictedNamedExports: [
-          'then', // avoid confusion when used with dynamic `import()` promise
-        ],
-      },
-    ],
-    'no-restricted-syntax': 'off',
-    'no-sequences': [
-      'error',
-      {
-        allowInParentheses: false,
-      },
-    ],
-    'promise/catch-or-return': [
-      'error',
-      {
-        allowFinally: true,
-      },
-    ],
-    'no-restricted-globals': [
-      'error',
-      {
-        name: 'isFinite',
-        message:
-          'Use Number.isFinite instead https://github.com/airbnb/javascript#standard-library--isfinite',
-      },
-      {
-        name: 'isNaN',
-        message:
-          'Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan',
-      },
-      {
-        name: 'escape',
-        message:
-          "The global `escape` function is unsafe. Did you mean to use `encodeURI`, `encodeURIComponent` or lodash's `escape` instead?",
-      },
-      {
-        name: 'unescape',
-        message:
-          "The global `unescape` function is unsafe. Did you mean to use `decodeURI`, `decodeURIComponent` or lodash's `unescape` instead?",
-      },
-    ].concat(confusingBrowserGlobals),
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
-      },
-    ],
-    // https://docs.gitlab.com/ee/development/fe_guide/style/javascript.html#limit-number-of-parameters
-    'max-params': ['error', { max: 3 }],
-  },
-};

package/lib/configs/default.js

@@ -1,17 +0,0 @@
-const baseConfig = require('./base');
-const vueConfig = require('./vue');
-
-module.exports = {
-  ...baseConfig,
-  extends: [
-    ...baseConfig.extends,
-    'prettier',
-    'plugin:promise/recommended',
-    'plugin:vue/recommended',
-  ],
-  rules: {
-    ...baseConfig.rules,
-    ...vueConfig.rules,
-  },
-  overrides: vueConfig.overrides,
-};

package/lib/configs/i18n.js

@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: ['@gitlab'],
-  rules: {
-    '@gitlab/require-i18n-strings': 'error',
-    '@gitlab/vue-require-i18n-attribute-strings': 'error',
-    '@gitlab/vue-require-i18n-strings': 'error',
-    '@gitlab/require-valid-i18n-helpers': 'error',
-    '@gitlab/vue-require-valid-i18n-helpers': 'error',
-  },
-};

package/lib/configs/jest.js

@@ -1,21 +0,0 @@
-module.exports = {
-  extends: ['plugin:jest/recommended'],
-  rules: {
-    'jest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
-    'jest/no-conditional-expect': 'off',
-    'jest/valid-title': [
-      'error',
-      {
-        ignoreTypeOfDescribeName: true,
-      },
-    ],
-    'jest/no-restricted-matchers': [
-      'error',
-      {
-        toBeFalsy: 'Prefer a stronger matcher like `toBe(false)`',
-        toBeTruthy: 'Prefer a stronger matcher like `toBe(true)`',
-      },
-    ],
-    'jest/prefer-to-have-length': 'error',
-  },
-};

package/lib/configs/tailwind.js

@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: ['@gitlab', 'tailwindcss'],
-  rules: {
-    '@gitlab/tailwind-no-interpolation': 'error',
-    '@gitlab/vue-tailwind-no-interpolation': 'error',
-    '@gitlab/tailwind-no-max-width-media-queries': 'error',
-    '@gitlab/vue-tailwind-no-max-width-media-queries': 'error',
-    'tailwindcss/no-arbitrary-value': 'error',
-  },
-};