From 4599cbb97868ea6f3785e13558cafb1aa5fc5e1c Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Mon, 11 Feb 2019 20:24:10 +0900
Subject: [PATCH 1/3] New: valid-v-slot rule (fixes #802)

---
 docs/rules/valid-v-slot.md      | 112 ++++++++++++
 lib/rules/valid-v-slot.js       | 252 +++++++++++++++++++++++++++
 tests/lib/rules/valid-v-slot.js | 297 ++++++++++++++++++++++++++++++++
 3 files changed, 661 insertions(+)
 create mode 100644 docs/rules/valid-v-slot.md
 create mode 100644 lib/rules/valid-v-slot.js
 create mode 100644 tests/lib/rules/valid-v-slot.js

diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
new file mode 100644
index 000000000..565471550
--- /dev/null
+++ b/docs/rules/valid-v-slot.md
@@ -0,0 +1,112 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-slot
+description: enforce valid `v-slot` directives
+---
+# vue/valid-v-slot
+> enforce valid `v-slot` directives
+
+This rule checks whether every `v-slot` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-slot` directives in the following cases:
+
+- The directive is not owned by a custom element. E.g. `<div v-slot=""></div>`
+- The directive is a named slot and is on a custom element directly. E.g. `<my-component v-slot:foo></my-component>`
+- The directive is the default slot, is on a custom element directly, and there are other named slots. E.g. `<my-component v-slot=""><template v-slot:foo></template></my-component>`
+- The element which has the directive has another `v-slot` directive. E.g. `<my-component v-slot:one v-slot:two></my-component>`
+- The element which has the directive has another `v-slot` directive that is distributed to the same slot. E.g. `<my-component><template v-slot:foo></template><template v-slot:foo></template></my-component>`
+- The directive has a dynamic argument which uses the scope properties that the directive defined. E.g. `<my-component><template v-slot:[data]="data"></template></my-component>`
+- The directive has any modifier. E.g. `<my-component v-slot.foo></my-component>`
+- The directive is the default slot, is on a custom element directly, and has no value. E.g. `<my-component v-slot></my-component>`
+
+<eslint-code-block :rules="{'vue/valid-v-slot': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <my-component v-slot="data">
+    {{data}}
+  </my-component>
+  <my-component>
+    <template v-slot:default>
+      default
+    <template>
+    <template v-slot:one>
+      one
+    <template>
+    <template v-slot:two>
+      two
+    <template>
+  </my-component>
+
+  <!-- ✗ BAD -->
+  <div v-slot="data">
+    {{data}}
+  </div>
+  <div>
+    <template v-slot:one>
+      one
+    </template>
+  </div>
+
+  <my-component v-slot:one="data">
+    {{data}}
+  </my-component>
+  <my-component v-slot="data">
+    {{data}}
+    <template v-slot:one>
+      one
+    </template>
+  </my-component>
+
+  <my-component v-slot:one v-slot:two>
+    one and two
+  </my-component>
+  <my-component>
+    <template v-slot:one>
+      one 1
+    </template>
+    <template v-slot:one>
+      one 2
+    </template>
+  </my-component>
+
+  <my-component>
+    <template v-slot:[data]="data">
+      dynamic?
+    </template>
+  </my-component>
+
+  <my-component v-slot.mod="data">
+    {{data}}
+  </my-component>
+
+  <my-component v-slot>
+    content
+  </my-component>
+</template>
+```
+
+</eslint-code-block>
+
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [no-parsing-error]
+
+[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-slot.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-slot.js)
diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
new file mode 100644
index 000000000..567e3b251
--- /dev/null
+++ b/lib/rules/valid-v-slot.js
@@ -0,0 +1,252 @@
+/**
+ * @author Toru Nagashima
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * Get all `v-slot` directives on a given element.
+ * @param {VElement} node The VElement node to check.
+ * @returns {VAttribute[]} The array of `v-slot` directives.
+ */
+function getSlotDirectivesOnElement (node) {
+  return node.startTag.attributes.filter(attribute =>
+    attribute.directive &&
+    attribute.key.name.name === 'slot'
+  )
+}
+
+/**
+ * Get all `v-slot` directives on the children of a given element.
+ * @param {VElement} node The VElement node to check.
+ * @returns {VAttribute[][]}
+ * The array of the group of `v-slot` directives.
+ * The group bundles `v-slot` directives of element sequence which is connected
+ * by `v-if`/`v-else-if`/`v-else`.
+ */
+function getSlotDirectivesOnChildren (node) {
+  return node.children
+    .reduce(({ groups, vIf }, childNode) => {
+      if (childNode.type === 'VElement') {
+        let connected
+        if (utils.hasDirective(childNode, 'if')) {
+          connected = false
+          vIf = true
+        } else if (utils.hasDirective(childNode, 'else-if')) {
+          connected = vIf
+          vIf = true
+        } else if (utils.hasDirective(childNode, 'else')) {
+          connected = vIf
+          vIf = false
+        } else {
+          connected = false
+          vIf = false
+        }
+
+        if (connected) {
+          groups[groups.length - 1].push(childNode)
+        } else {
+          groups.push([childNode])
+        }
+      } else if (childNode.type !== 'VText' || childNode.value.trim() !== '') {
+        vIf = false
+      }
+      return { groups, vIf }
+    }, { groups: [], vIf: false })
+    .groups
+    .map(group =>
+      group
+        .map(childElement =>
+          childElement.name === 'template'
+            ? utils.getDirective(childElement, 'slot')
+            : null
+        )
+        .filter(Boolean)
+    )
+    .filter(group => group.length >= 1)
+}
+
+/**
+ * Get the normalized name of a given `v-slot` directive node.
+ * @param {VAttribute} node The `v-slot` directive node.
+ * @returns {string} The normalized name.
+ */
+function getNormalizedName (node, sourceCode) {
+  return node.key.argument == null ? 'default' : sourceCode.getText(node.key.argument)
+}
+
+/**
+ * Get all `v-slot` directives which are distributed to the same slot as a given `v-slot` directive node.
+ * @param {VAttribute[][]} vSlotGroups The result of `getAllNamedSlotElements()`.
+ * @param {VElement} currentVSlot The current `v-slot` directive node.
+ * @returns {VAttribute[][]} The array of the group of `v-slot` directives.
+ */
+function filterSameSlot (vSlotGroups, currentVSlot, sourceCode) {
+  const currentName = getNormalizedName(currentVSlot, sourceCode)
+  return vSlotGroups
+    .map(vSlots =>
+      vSlots.filter(vSlot => getNormalizedName(vSlot, sourceCode) === currentName)
+    )
+    .filter(slots => slots.length >= 1)
+}
+
+/**
+ * Check whether a given argument node is using an iteration variable that the element defined.
+ * @param {VExpressionContainer|VIdentifier|null} argument The argument node to check.
+ * @param {VElement} element The element node which has the argument.
+ * @returns {boolean} `true` if the argument node is using the iteration variable.
+ */
+function isUsingIterationVar (argument, element) {
+  if (argument && argument.type === 'VExpressionContainer') {
+    for (const { variable } of argument.references) {
+      if (
+        variable != null &&
+        variable.kind === 'v-for' &&
+        variable.id.range[0] > element.startTag.range[0] &&
+        variable.id.range[1] < element.startTag.range[1]
+      ) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+/**
+ * Check whether a given argument node is using an scope variable that the directive defined.
+ * @param {VAttribute} vSlot The `v-slot` directive to check.
+ * @returns {boolean} `true` if that argument node is using a scope variable the directive defined.
+ */
+function isUsingScopeVar (vSlot) {
+  const argument = vSlot.key.argument
+  const value = vSlot.value
+
+  if (argument && value && argument.type === 'VExpressionContainer') {
+    for (const { variable } of argument.references) {
+      if (
+        variable != null &&
+        variable.kind === 'scope' &&
+        variable.id.range[0] > value.range[0] &&
+        variable.id.range[1] < value.range[1]
+      ) {
+        return true
+      }
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce valid `v-slot` directives',
+      category: undefined, // essential
+      url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      ownerMustBeCustomElement: "'v-slot' directive must be owned by a custom element, but '{{name}}' is not.",
+      namedSlotMustBeOnTemplate: "Named slots must use '<template>' on a custom element.",
+      defaultSlotMustBeOnTemplate: "Default slot must use '<template>' on a custom element when there are other named slots.",
+      disallowDuplicateSlotsOnElement: "An element cannot have multiple 'v-slot' directives.",
+      disallowDuplicateSlotsOnChildren: "An element cannot have multiple '<template>' elements which are distributed to the same slot.",
+      disallowArgumentUseSlotParams: "Dynamic argument of 'v-slot' directive cannot use that slot parameter.",
+      disallowAnyModifier: "'v-slot' directive doesn't support any modifier.",
+      requireAttributeValue: "'v-slot' directive on a custom element requires that attribute value."
+    }
+  },
+
+  create (context) {
+    const sourceCode = context.getSourceCode()
+
+    return utils.defineTemplateBodyVisitor(context, {
+      "VAttribute[directive=true][key.name.name='slot']" (node) {
+        const isDefaultSlot = node.key.argument == null || node.key.argument.name === 'default'
+        const element = node.parent.parent
+        const parentElement = element.parent
+        const ownerElement = element.name === 'template' ? parentElement : element
+        const vSlotsOnElement = getSlotDirectivesOnElement(element)
+        const vSlotGroupsOnChildren = getSlotDirectivesOnChildren(ownerElement)
+
+        // Verify location.
+        if (!utils.isCustomComponent(ownerElement)) {
+          context.report({
+            node,
+            messageId: 'ownerMustBeCustomElement',
+            data: { name: ownerElement.rawName }
+          })
+        }
+        if (!isDefaultSlot && element.name !== 'template') {
+          context.report({
+            node,
+            messageId: 'namedSlotMustBeOnTemplate'
+          })
+        }
+        if (ownerElement === element && vSlotGroupsOnChildren.length >= 1) {
+          context.report({
+            node,
+            messageId: 'defaultSlotMustBeOnTemplate'
+          })
+        }
+
+        // Verify duplication.
+        if (vSlotsOnElement.length >= 2 && vSlotsOnElement[0] !== node) {
+          // E.g., <my-component #one #two>
+          context.report({
+            node,
+            messageId: 'disallowDuplicateSlotsOnElement'
+          })
+        }
+        if (ownerElement === parentElement) {
+          const vSlotGroupsOfSameSlot = filterSameSlot(vSlotGroupsOnChildren, node, sourceCode)
+          const vFor = utils.getDirective(element, 'for')
+          if (
+            vSlotGroupsOfSameSlot.length >= 2 &&
+            !vSlotGroupsOfSameSlot[0].includes(node)
+          ) {
+            // E.g., <template #one></template>
+            //       <template #one></template>
+            context.report({
+              node,
+              messageId: 'disallowDuplicateSlotsOnChildren'
+            })
+          }
+          if (vFor && !isUsingIterationVar(node.key.argument, element)) {
+            // E.g., <template v-for="x of xs" #one></template>
+            context.report({
+              node,
+              messageId: 'disallowDuplicateSlotsOnChildren'
+            })
+          }
+        }
+
+        // Verify argument.
+        if (isUsingScopeVar(node)) {
+          context.report({
+            node,
+            messageId: 'disallowArgumentUseSlotParams'
+          })
+        }
+
+        // Verify modifiers.
+        if (node.key.modifiers.length >= 1) {
+          context.report({
+            node,
+            messageId: 'disallowAnyModifier'
+          })
+        }
+
+        // Verify value.
+        if (ownerElement === element && isDefaultSlot && !utils.hasAttributeValue(node)) {
+          context.report({
+            node,
+            messageId: 'requireAttributeValue'
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
new file mode 100644
index 000000000..36f709581
--- /dev/null
+++ b/tests/lib/rules/valid-v-slot.js
@@ -0,0 +1,297 @@
+/**
+ * @author Toru Nagashima
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/valid-v-slot')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('valid-v-slot', rule, {
+  valid: [
+    `<template>
+      <MyComponent v-slot="{data}">{{data}}</MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent v-slot:default="{data}">{{data}}</MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent #default="{data}">{{data}}</MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template v-slot>default</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template #default>default</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template #named>named</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template #default>default</template>
+        <template #named>named</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template #one>one</template>
+        <template #two>two</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template #one>one</template>
+        <template #two>two</template>
+        <template #[one]>one</template>
+        <template #[two]>two</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template v-if="condition" #one>foo</template>
+        <template v-else #one>bar</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template v-if="c1" #one>foo</template>
+        <template v-else-if="c2" #one>bar</template>
+        <template v-else #one>baz</template>
+      </MyComponent>
+    </template>`,
+    `<template>
+      <MyComponent>
+        <template v-for="(key, value) in xxxx" #[key]>{{value}}</template>
+      </MyComponent>
+    </template>`
+  ],
+  invalid: [
+    // Verify location.
+    {
+      code: `
+        <template>
+          <div v-slot="{data}">{{data}}</div>
+        </template>
+      `,
+      errors: [{ messageId: 'ownerMustBeCustomElement', data: { name: 'div' }}]
+    },
+    {
+      code: `
+        <template>
+          <template v-slot:named></template>
+        </template>
+      `,
+      errors: [{ messageId: 'ownerMustBeCustomElement', data: { name: 'template' }}]
+    },
+    {
+      code: `
+        <template>
+          <div v-slot:named="{data}">{{data}}</div>
+        </template>
+      `,
+      errors: [
+        { messageId: 'ownerMustBeCustomElement', data: { name: 'div' }},
+        { messageId: 'namedSlotMustBeOnTemplate' }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div><template v-slot></template></div>
+        </template>
+      `,
+      errors: [{ messageId: 'ownerMustBeCustomElement', data: { name: 'div' }}]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent v-slot:named="{data}">{{data}}</MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'namedSlotMustBeOnTemplate' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent v-slot="{data}">
+            {{data}}
+            <template #named></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'defaultSlotMustBeOnTemplate' }]
+    },
+
+    // Verify duplication.
+    {
+      code: `
+        <template>
+          <MyComponent v-slot="{data}" v-slot:one>{{data}}</MyComponent>
+        </template>
+      `,
+      errors: [
+        { messageId: 'namedSlotMustBeOnTemplate' },
+        { messageId: 'disallowDuplicateSlotsOnElement' }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:one v-slot:two></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnElement' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:one>1st</template>
+            <template v-slot:one>2nd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:[one]>1st</template>
+            <template v-slot:[one]>2nd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot>1st</template>
+            <template v-slot>2nd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot>1st</template>
+            <template v-slot:default>2nd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-if="c1" v-slot:one>1st</template>
+            <template v-slot:one>2nd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-if="c1" v-slot:one>1st</template>
+            <template v-else v-slot:one>2st</template>
+            <template v-slot:one>3rd</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-for="(key, value) in definition" v-slot:one>{{value}}</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-for="(key, value) in definition" v-slot:[one]>{{value}}</template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
+
+    // Verify arguments.
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:[data]="{data}"></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowArgumentUseSlotParams' }]
+    },
+
+    // Verify modifiers.
+    {
+      code: `
+        <template>
+          <MyComponent v-slot.foo="{data}">{{data}}</MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowAnyModifier' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot.foo></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowAnyModifier' }]
+    },
+
+    // Verify value.
+    {
+      code: `
+        <template>
+          <MyComponent v-slot>content</MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'requireAttributeValue' }]
+    }
+  ]
+})

From f62fd7255772cd83d0a0787b6127f79fc6e8e5a2 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Thu, 28 Feb 2019 12:22:05 +0900
Subject: [PATCH 2/3] Update docs/rules/valid-v-slot.md

Co-Authored-By: mysticatea <star.ctor@gmail.com>
---
 docs/rules/valid-v-slot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
index 565471550..b9f27b735 100644
--- a/docs/rules/valid-v-slot.md
+++ b/docs/rules/valid-v-slot.md
@@ -39,7 +39,7 @@ This rule reports `v-slot` directives in the following cases:
     <template>
     <template v-slot:two>
       two
-    <template>
+    </template>
   </my-component>
 
   <!-- ✗ BAD -->

From 474826772d76cbd7c1fc962f8c189c17631a6a21 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Thu, 28 Feb 2019 17:07:41 +0900
Subject: [PATCH 3/3] Update valid-v-slot.md

---
 docs/rules/valid-v-slot.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
index b9f27b735..edb17c8df 100644
--- a/docs/rules/valid-v-slot.md
+++ b/docs/rules/valid-v-slot.md
@@ -33,10 +33,10 @@ This rule reports `v-slot` directives in the following cases:
   <my-component>
     <template v-slot:default>
       default
-    <template>
+    </template>
     <template v-slot:one>
       one
-    <template>
+    </template>
     <template v-slot:two>
       two
     </template>