@gitlab/eslint-plugin 13.0.0 → 13.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [13.1.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v13.0.0...v13.1.0) (2022-07-08)
+
+
+### Features
+
+* Add vue-prefer-dollar-scopedslots rule ([93682d9](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/93682d9450aa4389c7b606abf56ead32e302ad33))
+
 # [13.0.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v12.3.0...v13.0.0) (2022-07-05)
 
 

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

@@ -0,0 +1,62 @@
+# @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.$slots.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.md

@@ -10,6 +10,7 @@ Available rules:
 - [require-valid-i18n-helpers](./rules/require-valid-i18n-helpers.md): Enforces valid usage of translation helpers in JavaScript.
 - [vue-no-data-toggle](./rules/vue-no-data-toggle.md): Restrict the use of `data-toggle` bootstrap behaviors within Vue templates
 - [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-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

package/lib/index.js

@@ -9,6 +9,7 @@ module.exports = {
     'require-valid-i18n-helpers': require('./rules/require-valid-i18n-helpers.js'),
     'vue-no-data-toggle': require('./rules/vue-no-data-toggle.js'),
     'vue-no-new-non-primitive-in-template': require('./rules/vue-no-new-non-primitive-in-template.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'),

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

@@ -0,0 +1,64 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const { DOCS_BASE_URL } = require('../constants');
+const { defineTemplateBodyVisitor } = require('../utils/index');
+const utils = require('eslint-plugin-vue/lib/utils');
+
+// ------------------------------------------------------------------------------
+//   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {

package/scripts/createRule.js

@@ -36,7 +36,7 @@ TODO: or describe here
 
 - TBA
 
-## When Not To Use It 
+## When Not To Use It
 
 TODO
 `;
@@ -128,7 +128,7 @@ rl.question('How do you want to call your rule?\n', (answer) => {
 
   console.log(`Successfully wrote ${rulePath}`);
 
-  const testPath = path.join(testDir, `${name}.js`);
+  const testPath = path.join(testDir, `${name}.spec.js`);
 
   fs.writeFileSync(testPath, testTemplate(name));