@gitlab/eslint-plugin 23.0.0 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gitlab/eslint-plugin
 
+## 24.1.0
+
+### Minor Changes
+
+- 830e78c: ESLint 10 compatibility
+
+  Rewrites the plugin internals to drop deprecated ESLint APIs, effectively making
+  it ESLint 10 compatible.
+
+## 24.0.0
+
+### Major Changes
+
+- 2defaab: Remove two Vue 2 slot rules from the `vue` config and from the plugin.
+
+  - `@gitlab/vue-prefer-dollar-scopedslots` is removed. It told authors to use `$scopedSlots`, which
+    Vue 3 does not have. Under `@vue/compat` every access is a deprecation, and eslint-plugin-vue's
+    `vue/no-deprecated-dollar-scopedslots-api` reports it. A consumer that still wants to forbid
+    `$slots` can do so with `vue/no-restricted-syntax`.
+  - `@gitlab/vue-slot-name-casing` is removed. The `vue` config now enables
+    `vue/slot-name-casing` with `kebab-case`, which checks the same `<slot name>` attribute.
+
+  Consumers that reference either rule by name, for example in an `eslint-disable` comment, must
+  drop the reference.
+
 ## 23.0.0
 
 ### Major Changes

package/docs/rules.md

@@ -18,11 +18,9 @@ Available rules:
 - [vue-no-new-non-primitive-in-template](./rules/vue-no-new-non-primitive-in-template.md): Prevents non-primitive values from being declared in templates
 - [vue-no-popover-target-dollar-el](./rules/vue-no-popover-target-dollar-el.md): Disallow function-form `:target` bindings ending in `.$el` on `<gl-popover>` and `<gl-tooltip>`
 - [vue-no-undef-apollo-properties](./rules/vue-no-undef-apollo-properties.md): Require Apollo query properties to be initialized in component data.
-- [vue-prefer-dollar-scopedslots](./rules/vue-prefer-dollar-scopedslots.md): Prefer $scopedSlots over $slots for Vue 2.x.
 - [vue-require-i18n-attribute-strings](./rules/vue-require-i18n-attribute-strings.md): Detect non externalized strings in vue `<template>` attributes
 - [vue-require-i18n-strings](./rules/vue-require-i18n-strings.md): enforce no bare strings in vue `<template>`
 - [vue-require-required-key](./rules/vue-require-required-key.md): Require the required key to be set
 - [vue-require-valid-i18n-helpers](./rules/vue-require-valid-i18n-helpers.md): Enforces valid usage of translation helpers in Vue templates.
-- [vue-slot-name-casing](./rules/vue-slot-name-casing.md): enforce specific casing for slot naming style in template
 - [vue-tailwind-no-interpolation](./rules/vue-tailwind-no-interpolation.md): Prevents building Tailwind CSS utility classes with string interpolation.
 - [vue-tailwind-no-max-width-media-queries](./rules/vue-tailwind-no-max-width-media-queries.md): Prevents the usage of max-width media query Tailwind CSS utility classes.

package/lib/plugin.js

@@ -20,12 +20,10 @@ module.exports = {
     'vue-no-new-non-primitive-in-template': require('./rules/vue-no-new-non-primitive-in-template.js'),
     'vue-no-popover-target-dollar-el': require('./rules/vue-no-popover-target-dollar-el.js'),
     'vue-no-undef-apollo-properties': require('./rules/vue-no-undef-apollo-properties.js'),
-    'vue-prefer-dollar-scopedslots': require('./rules/vue-prefer-dollar-scopedslots.js'),
     'vue-require-i18n-attribute-strings': require('./rules/vue-require-i18n-attribute-strings.js'),
     'vue-require-i18n-strings': require('./rules/vue-require-i18n-strings.js'),
     'vue-require-required-key': require('./rules/vue-require-required-key.js'),
     'vue-require-valid-i18n-helpers': require('./rules/vue-require-valid-i18n-helpers.js'),
-    'vue-slot-name-casing': require('./rules/vue-slot-name-casing.js'),
     'vue-tailwind-no-interpolation': require('./rules/vue-tailwind-no-interpolation.js'),
     'vue-tailwind-no-max-width-media-queries': require('./rules/vue-tailwind-no-max-width-media-queries.js'),
   },

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

@@ -75,7 +75,7 @@ module.exports = {
         const propName =
           prop.propName != null
             ? prop.propName
-            : `[${context.getSourceCode().getText(prop.node.key)}]`;
+            : `[${context.sourceCode.getText(prop.node.key)}]`;
 
         context.report({
           node: prop.node,

package/lib/vue-fragments.js

@@ -63,8 +63,7 @@ const gitlabRules = [
       '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',
+      'vue/slot-name-casing': ['error', 'kebab-case'],
       '@gitlab/no-runtime-template-compiler': 'error',
       'import-x/order': [
         'error',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "23.0.0",
+  "version": "24.1.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {
@@ -31,11 +31,11 @@
     "node": "^20.12.0 || ^22.0.0 || >=24.0.0"
   },
   "dependencies": {
-    "@eslint/js": "^9.0.0",
+    "@eslint/js": "^10.0.1",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-jest": "^29.0.0",
-    "eslint-plugin-promise": "^7.0.0",
+    "eslint-plugin-promise": "^7.3.0",
     "eslint-plugin-tailwindcss": "^3.18.3",
     "eslint-plugin-unicorn": "^55.0.0",
     "eslint-plugin-vue": "^10.0.0",
@@ -45,9 +45,9 @@
     "vue-eslint-parser": "^10.3.0"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.1",
+    "@typescript-eslint/parser": "^8.70.1",
+    "eslint": "^9.0.0 || ^10.0.0",
     "typescript": ">=4.8.4"
   },
   "peerDependenciesMeta": {
@@ -63,9 +63,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.1",
+    "@typescript-eslint/parser": "^8.70.1",
+    "eslint": "^10.11.0",
     "glob": "^7.2.0",
     "mocha": "^11.7.5",
     "prettier": "^2.6.1",

package/docs/rules/vue-prefer-dollar-scopedslots.md

@@ -1,62 +0,0 @@
-# @gitlab/vue-prefer-dollar-scopedslots
-
-Prefer $scopedSlots over $slots when using Vue 2.x.
-
-Scoped slots are more flexible and powerful, ease migration to Vue 3.x, and
-also work around https://github.com/vuejs/vue/issues/11084.
-
-This rule should _not_ be used with Vue 3.x, since `$scopedSlots` was
-[removed](https://v3-migration.vuejs.org/breaking-changes/slots-unification.html).
-Instead, use
-[`vue/no-deprecated-dollar-scopedslots-api`](https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html).
-It includes a fixer that will migrate `$scopedSlots` usage _back_ to `$slots`,
-which is trivial since the API for Vue 2.x's `$scopedSlots` is identical to Vue
-3.x's `$slots`.
-
-## Rule Details
-
-### Examples of **incorrect** code for this rule
-
-```html
-<div v-if="$slots.default">
-  <slot></slot>
-</div>
-```
-
-```javascript
-export default {
-  render(h) {
-    return this.$slots.foo ? this.$slots.foo : null;
-  },
-};
-```
-
-### Examples of **correct** code for this rule
-
-```html
-<div v-if="$scopedSlots.default">
-  <slot></slot>
-</div>
-```
-
-```javascript
-export default {
-  render(h) {
-    return this.$scopedSlots.foo
-      ? this.$scopedSlots.foo() // Note the function call!
-      : null;
-  },
-};
-```
-
-## Options
-
-Nothing
-
-## Related rules
-
-- [`vue/no-deprecated-dollar-scopedslots-api`](https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html) (for Vue 3.x)
-
-## When Not To Use It
-
-When using Vue 3.x.

package/docs/rules/vue-slot-name-casing.md

@@ -1,39 +0,0 @@
-# @gitlab/vue-slot-name-casing
-
-Ensures that slot names are kebab-cased
-
-## Rule Details
-
-### Examples of **incorrect** code for this rule
-
-```html
-<slot name="filepathPrepend"></slot>
-<slot name="filepathPrepend"></slot>
-<slot name="filepathPrepend"></slot>
-<div>
-  <template #filepathPrepend
-    >example</template
-  >
-</div>
-```
-
-### Examples of **correct** code for this rule
-
-```html
-<slot name="filepath-prepend"></slot>
-<slot name="filepath-prepend"></slot>
-<slot name="filepath-prepend"></slot>
-<div>
-  <template #filepath-prepend
-    >example</template
-  >
-</div>
-```
-
-## Options
-
-No options
-
-## Related rules
-
-- TBA

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

@@ -1,64 +0,0 @@
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const { DOCS_BASE_URL } = require('../constants');
-const { defineTemplateBodyVisitor } = require('../utils/index');
-const utils = require('eslint-plugin-vue/dist/utils').default;
-
-// ------------------------------------------------------------------------------
-//   Helpers
-// ------------------------------------------------------------------------------
-
-const DOLLAR_SLOTS = '$slots';
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
-  meta: {
-    type: 'error',
-    docs: {
-      description: 'Prefer $scopedSlots over $slots for Vue 2.x.',
-      category: undefined,
-      url: DOCS_BASE_URL + '/vue-prefer-dollar-scopedslots.md',
-    },
-    messages: {
-      preferDollarScopedSlots:
-        'Prefer $scopedSlots over $slots for Vue 2.x. Scoped slots are more flexible and powerful, ease migration to Vue 3.x, and also work around https://github.com/vuejs/vue/issues/11084.',
-    },
-  },
-  create(context) {
-    const templateVisitor = {
-      VExpressionContainer(node) {
-        for (const ref of node.references) {
-          if (ref.id.name === DOLLAR_SLOTS) {
-            context.report({
-              node,
-              loc: ref.id.loc,
-              messageId: 'preferDollarScopedSlots',
-            });
-          }
-        }
-      },
-    };
-
-    const scriptVisitor = utils.defineVueVisitor(context, {
-      MemberExpression(node) {
-        if (node.computed) return;
-
-        const { property } = node;
-        if (property.name === DOLLAR_SLOTS) {
-          context.report({
-            node: property,
-            loc: property.loc,
-            messageId: 'preferDollarScopedSlots',
-          });
-        }
-      },
-    });
-
-    return defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor);
-  },
-};

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

@@ -1,64 +0,0 @@
-'use strict';
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const utils = require('eslint-plugin-vue/dist/utils').default;
-const casing = require('eslint-plugin-vue/dist/utils/casing');
-const { DOCS_BASE_URL } = require('../constants');
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description: 'enforce specific casing for slot naming style in template',
-      category: undefined,
-      url: DOCS_BASE_URL + '/vue-slot-name-casing.md',
-    },
-    schema: [],
-  },
-
-  create(context) {
-    const caseType = 'kebab-case';
-
-    let hasInvalidEOF = false;
-
-    return utils.defineTemplateBodyVisitor(
-      context,
-      {
-        "VElement[name='slot'] > VStartTag > VAttribute[key.name='name']"(node) {
-          if (hasInvalidEOF) {
-            return;
-          }
-
-          const name = node.value.value;
-          const casingName = casing.getConverter(caseType)(name);
-          if (casingName !== name) {
-            context.report({
-              node,
-              loc: node.loc,
-              message: 'Slot name "{{name}}" is not {{caseType}}.',
-              data: {
-                name,
-                caseType,
-              },
-            });
-          }
-        },
-      },
-      Object.assign(
-        {
-          Program(node) {
-            hasInvalidEOF = utils.hasInvalidEOF(node);
-          },
-        },
-        {},
-      ),
-    );
-  },
-};