Add allowModifiers option to valid-v-slot

docs/rules/valid-v-slot.md

@@ -100,7 +100,43 @@ This rule does not check syntax errors in directives because it's checked by [vu
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/valid-v-slot": ["error", {
+    "allowModifiers": false
+  }]
+}
+```
+
+- `allowModifiers` (`boolean`) ... allows having modifiers in the argument of `v-slot` directives. Modifiers just after `v-slot` are still disallowed. E.g. `<template v-slot.foo>` default `false`.
+
+### `allowModifiers: true`
+
+<eslint-code-block :rules="{'vue/valid-v-slot': ['error', {allowModifiers: true}]}">
+
+```vue
+<template>
+  <!-- ignore -->
+  <MyComponent>
+    <template v-slot:foo></template>
+    <template v-slot:foo.bar></template>
+    <template v-slot:foo.baz></template>
+    <template v-slot:foo.bar.baz></template>
+  </MyComponent>
+
+  <!--  ✗ BAD */ -->
+  <MyComponent v-slot.foo="{data}">
+    {{ data }}
+  </MyComponent>
+  <MyComponent>
+    <template v-slot.foo>
+      bar
+    </template>
+  </MyComponent>
+</template>
+```
+
+</eslint-code-block>
 
 ## :couple: Related Rules
 

lib/rules/valid-v-slot.js

@@ -75,15 +75,17 @@ function getSlotDirectivesOnChildren(node) {
 }
 
 /**
- * Get the normalized name of a given `v-slot` directive node.
+ * Get the normalized name of a given `v-slot` directive node with modifiers after `v-slot:` directive.
  * @param {VDirective} node The `v-slot` directive node.
  * @param {SourceCode} sourceCode The source code.
  * @returns {string} The normalized name.
  */
 function getNormalizedName(node, sourceCode) {
-  return node.key.argument == null
-    ? 'default'
-    : sourceCode.getText(node.key.argument)
+  if (node.key.argument == null) {
+    return 'default'
+  }
+  const modifierNames = node.key.modifiers.map((modifier) => modifier.name)
+  return [sourceCode.getText(node.key.argument), ...modifierNames].join('.')
 }
 
 /**
@@ -150,6 +152,22 @@ function isUsingScopeVar(vSlot) {
   return false
 }
 
+/**
+ * Check whether a given argument node has invalid modifiers like `v-slot.foo`.
+ * @param {VDirective} vSlot The `v-slot` directive to check.
+ * @param {SourceCode} sourceCode The source code.
+ * @param {boolean} allowModifiers `allowModifiers` option in context.
+ * @return {boolean} `true` if that argument node has invalid modifiers like `v-slot.foo`.
+ */
+function hasInvalidModifiers(vSlot, sourceCode, allowModifiers) {
+  if (!allowModifiers) {
+    return vSlot.key.modifiers.length >= 1
+  }
+  // E.g., `v-slot` extracted from <template v-slot.foo.bar>
+  const directiveKey = sourceCode.getText(vSlot).split('.')[0]
+  return directiveKey === 'v-slot'
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -159,7 +177,16 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowModifiers: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
     messages: {
       ownerMustBeCustomElement:
         "'v-slot' directive must be owned by a custom element, but '{{name}}' is not.",
@@ -181,6 +208,8 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const sourceCode = context.getSourceCode()
+    const options = context.options[0] || {}
+    const allowModifiers = options.allowModifiers === true
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
@@ -264,7 +293,8 @@ module.exports = {
         }
 
         // Verify modifiers.
-        if (node.key.modifiers.length >= 1) {
+        if (hasInvalidModifiers(node, sourceCode, allowModifiers)) {
+          // E.g., <template v-slot.foo>
           context.report({
             node,
             messageId: 'disallowAnyModifier'

tests/lib/rules/valid-v-slot.js

@@ -84,6 +84,29 @@ tester.run('valid-v-slot', rule, {
         <template v-for="(key, value) in xxxx" #[key]>{{value}}</template>
       </MyComponent>
     </template>`,
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: true }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo></template>
+            <template v-slot:foo.bar></template>
+            <template v-slot:foo.baz></template>
+            <template v-slot:foo.bar.baz></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: true }]
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -279,6 +302,7 @@ tester.run('valid-v-slot', rule, {
           <MyComponent v-slot.foo="{data}">{{data}}</MyComponent>
         </template>
       `,
+      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {
@@ -289,8 +313,38 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
+      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: false }],
+      errors: [{ messageId: 'disallowAnyModifier' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo></template>
+            <template v-slot:foo.bar></template>
+            <template v-slot:foo.baz></template>
+            <template v-slot:foo.bar.baz></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: false }],
+      errors: [
+        { messageId: 'disallowAnyModifier' },
+        { messageId: 'disallowAnyModifier' },
+        { messageId: 'disallowAnyModifier' }
+      ]
+    },
 
     // Verify value.
     {