@gitlab/eslint-plugin 13.0.0 → 15.0.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [15.0.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v14.0.0...v15.0.0) (2022-07-29)
+
+
+### Features
+
+* Prefer $scopedSlots by default ([c6a5be9](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/c6a5be943f63871784aef5df0ae98c776466bec0))
+
+
+### BREAKING CHANGES
+
+* The `@gitlab/vue-prefer-dollar-scopedslots` rule is now
+enabled by default.
+
+# [14.0.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v13.1.0...v14.0.0) (2022-07-12)
+
+
+### Features
+
+* update eslint to 8 ([09a0b36](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/09a0b363082124809825cb3b11c6c803710b86a5))
+
+
+### BREAKING CHANGES
+
+* Check the ESLint 8 release notes
+for more information.
+https://eslint.org/docs/8.0.0/user-guide/migrating-to-8.0.0
+
+# [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.$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.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/configs/default.js

@@ -108,6 +108,7 @@ module.exports = {
       },
     ],
     '@gitlab/vue-no-data-toggle': 'error',
+    '@gitlab/vue-prefer-dollar-scopedslots': 'error',
     '@gitlab/vue-slot-name-casing': 'error',
     '@gitlab/no-runtime-template-compiler': 'error',
     'import/order': [

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": "15.0.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {
@@ -44,10 +44,10 @@
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "eslint": "^7.27.0 || ^8.0.0"
+    "eslint": "^8.19.0"
   },
   "devDependencies": {
-    "eslint": "^7.27.0",
+    "eslint": "^8.19.0",
     "glob": "^7.2.0",
     "jest": "^27.5.1",
     "prettier": "^2.6.1",

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));