@gitlab/eslint-plugin 21.4.1 → 22.0.0

package/lib/rules/vue-no-popover-target-dollar-el.js

@@ -0,0 +1,156 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const { DOCS_BASE_URL } = require('../constants');
+const { defineTemplateBodyVisitor } = require('../utils/index');
+
+// ------------------------------------------------------------------------------
+//   Constants
+// ------------------------------------------------------------------------------
+
+/**
+ * Component names (both kebab-case and PascalCase) that use a `:target` prop
+ * and where passing a function returning `.$el` is unnecessary.
+ */
+const TARGET_COMPONENT_NAMES = new Set(['gl-popover', 'gl-tooltip', 'GlPopover', 'GlTooltip']);
+
+const MESSAGE_ID = 'noPopoverTargetDollarEl';
+
+// ------------------------------------------------------------------------------
+//   Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Returns true if the given VAttribute node is a `:target` or `v-bind:target`
+ * directive binding.
+ *
+ * @param {import('vue-eslint-parser').AST.VAttribute | import('vue-eslint-parser').AST.VDirective} node
+ * @returns {boolean}
+ */
+function isTargetBinding(node) {
+  if (!node.directive) return false;
+  // Must be a v-bind directive
+  if (node.key.name.name !== 'bind') return false;
+  // Argument must be the identifier "target"
+  const arg = node.key.argument;
+  return arg != null && arg.type === 'VIdentifier' && arg.name === 'target';
+}
+
+/**
+ * Returns true if the given VElement node is a gl-popover, gl-tooltip,
+ * GlPopover, or GlTooltip component.
+ *
+ * @param {import('vue-eslint-parser').AST.VElement} element
+ * @returns {boolean}
+ */
+function isTargetComponent(element) {
+  return TARGET_COMPONENT_NAMES.has(element.rawName);
+}
+
+/**
+ * Given an expression node (the value of the `:target` binding), returns the
+ * MemberExpression node for the trailing `.$el` access if one exists, or null.
+ *
+ * Handles:
+ *   - `() => $refs.foo.$el`
+ *   - `() => this.$refs.foo.$el`
+ *   - `() => { return $refs.foo.$el; }`
+ *   - `function() { return $refs.foo.$el; }`
+ *   - `function() { doSomething(); return this.$refs.foo.$el; }`
+ *
+ * @param {import('eslint').Rule.Node} expr
+ * @returns {import('eslint').Rule.Node | null}
+ */
+function getDollarElMemberExpression(expr) {
+  if (expr.type !== 'ArrowFunctionExpression' && expr.type !== 'FunctionExpression') {
+    return null;
+  }
+
+  let body = expr.body;
+
+  // This doesn't need to catch every case, just the most common ways of
+  // writing the target function, which is why this is simple/naive.
+  if (body.type === 'BlockStatement') {
+    const lastStatement = body.body.at(-1);
+    if (!lastStatement || lastStatement.type !== 'ReturnStatement') {
+      return null;
+    }
+    body = lastStatement.argument;
+  }
+
+  if (!body) return null;
+
+  // The body (or return value) must be a MemberExpression ending in `.$el`
+  if (
+    body.type === 'MemberExpression' &&
+    !body.computed &&
+    body.property.type === 'Identifier' &&
+    body.property.name === '$el'
+  ) {
+    return body;
+  }
+
+  return null;
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow function-form `:target` bindings ending in `.$el` on `<gl-popover>` and `<gl-tooltip>`',
+      category: undefined,
+      url: DOCS_BASE_URL + '/vue-no-popover-target-dollar-el.md',
+    },
+    fixable: 'code',
+    messages: {
+      [MESSAGE_ID]:
+        'Return the component ref from the `:target` callback on {{component}} instead of its .$el.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      VElement(element) {
+        // Must be a gl-popover or gl-tooltip component
+        if (!isTargetComponent(element)) return;
+
+        // Find the `:target` / `v-bind:target` binding among its attributes
+        const node = element.startTag.attributes.find(isTargetBinding);
+        if (!node) return;
+
+        // The binding value must be an expression container
+        const exprContainer = node.value;
+        if (!exprContainer || exprContainer.type !== 'VExpressionContainer') return;
+
+        const expr = exprContainer.expression;
+        if (!expr) return;
+
+        // Check whether the expression is a function/arrow whose body ends in `.$el`
+        const dollarElMember = getDollarElMemberExpression(expr);
+        if (!dollarElMember) return;
+
+        // `dollarElMember` is the full `$refs.foo.$el` MemberExpression.
+        // The object part (`$refs.foo`) is what we want to keep.
+        const objectNode = dollarElMember.object;
+
+        context.report({
+          node,
+          loc: node.loc,
+          messageId: MESSAGE_ID,
+          data: { component: element.rawName },
+          fix(fixer) {
+            // Remove the `.$el` suffix: from end of objectNode to end of dollarElMember
+            return fixer.removeRange([objectNode.range[1], dollarElMember.range[1]]);
+          },
+        });
+      },
+    });
+  },
+};

package/lib/rules/vue-no-undef-apollo-properties.js

@@ -2,7 +2,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 const { DOCS_BASE_URL } = require('../constants');
-const utils = require('eslint-plugin-vue/lib/utils');
+const utils = require('eslint-plugin-vue/dist/utils').default;
 
 // ------------------------------------------------------------------------------
 //   Helpers

package/lib/rules/vue-prefer-dollar-scopedslots.js

@@ -4,7 +4,7 @@
 
 const { DOCS_BASE_URL } = require('../constants');
 const { defineTemplateBodyVisitor } = require('../utils/index');
-const utils = require('eslint-plugin-vue/lib/utils');
+const utils = require('eslint-plugin-vue/dist/utils').default;
 
 // ------------------------------------------------------------------------------
 //   Helpers

package/lib/rules/vue-require-required-key.js

@@ -13,7 +13,7 @@ const NATIVE_TYPES = new Set([
   'Symbol',
 ]);
 
-const utils = require('eslint-plugin-vue/lib/utils');
+const utils = require('eslint-plugin-vue/dist/utils').default;
 
 module.exports = {
   meta: {

package/lib/rules/vue-slot-name-casing.js

@@ -4,8 +4,8 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-const utils = require('eslint-plugin-vue/lib/utils');
-const casing = require('eslint-plugin-vue/lib/utils/casing');
+const utils = require('eslint-plugin-vue/dist/utils').default;
+const casing = require('eslint-plugin-vue/dist/utils/casing');
 const { DOCS_BASE_URL } = require('../constants');
 
 // ------------------------------------------------------------------------------

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.4.1",
+  "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/integration_test/bootstrap.sh

@@ -35,7 +35,7 @@ else
 fi
 
 echo "Installing $CI_REPOSITORY_URL#$SHA"
-yarn add --dev "${CI_REPOSITORY_URL}#${SHA}"
+yarn add --dev --ignore-workspace-root-check "${CI_REPOSITORY_URL}#${SHA}"
 
 echo "Deduplicate dependencies"
 # Yarn doesn't seem to be smart enough when using URL installs and might

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) => `<!--