From d8e728addfd2fab019c5b17ef582555544a16fea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Fa=C5=82owski?= <przemkow92@gmail.com>
Date: Sat, 14 Mar 2020 08:36:03 +0100
Subject: [PATCH] Feature/support for fragments (#1038)

* feat: update valid-template-root to support Vue 3 requirements

* feat: implement no-multiple-template-root method basing on valid-template-root implementation for Vue 2
---
 docs/rules/README.md                         |   1 +
 docs/rules/no-multiple-template-root.md      |  65 ++++++++++++
 docs/rules/valid-template-root.md            |  38 +------
 lib/configs/essential.js                     |   1 +
 lib/index.js                                 |   1 +
 lib/rules/no-multiple-template-root.js       |  98 ++++++++++++++++++
 lib/rules/valid-template-root.js             |  69 +++----------
 tests/lib/rules/no-multiple-template-root.js | 100 +++++++++++++++++++
 tests/lib/rules/valid-template-root.js       |  36 +++----
 9 files changed, 294 insertions(+), 115 deletions(-)
 create mode 100644 docs/rules/no-multiple-template-root.md
 create mode 100644 lib/rules/no-multiple-template-root.js
 create mode 100644 tests/lib/rules/no-multiple-template-root.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index b6457d6ba..6699f77ca 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -41,6 +41,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
+| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
diff --git a/docs/rules/no-multiple-template-root.md b/docs/rules/no-multiple-template-root.md
new file mode 100644
index 000000000..e22cb0f42
--- /dev/null
+++ b/docs/rules/no-multiple-template-root.md
@@ -0,0 +1,65 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-multiple-template-root
+description: disallow adding multiple root nodes to the template
+---
+# vue/no-multiple-template-root
+> disallow adding multiple root nodes to the template
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+This rule checks whether template contains single root element valid for Vue 2.
+
+
+<eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}">
+
+```vue
+<!-- The root is text -->
+<template>Lorem ipsum</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}">
+
+```vue
+<!-- There are multiple root elements -->
+<template>
+  <div>hello</div>
+  <div>hello</div>
+</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}">
+
+```vue
+<!-- The root element has `v-for` directives -->
+<template>
+  <div v-for="item in items"/>
+</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}">
+
+```vue
+<!-- The root element is `<template>` or `<slot>` -->
+<template>
+  <slot />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-template-root.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-template-root.js)
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 777a674d7..7d6e07782 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -27,42 +27,8 @@ This rule reports the template root in the following cases:
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
 
 ```vue
-<!-- The root is text -->
-<template>Lorem ipsum</template>
-```
-
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
-
-```vue
-<!-- There are multiple root elements -->
-<template>
-  <div>hello</div>
-  <div>hello</div>
-</template>
-```
-
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
-
-```vue
-<!-- The root element has `v-for` directives -->
-<template>
-  <div v-for="item in items"/>
-</template>
-```
-
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
-
-```vue
-<!-- The root element is `<template>` or `<slot>` -->
-<template>
-  <slot />
-</template>
+<!-- The root with src attribute is not empty -->
+<template src="foo.html"><div></div></template>
 ```
 
 </eslint-code-block>
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index a0a84ecbd..aa4a281dd 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -9,6 +9,7 @@ module.exports = {
     'vue/no-async-in-computed-properties': 'error',
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
+    'vue/no-multiple-template-root': 'error',
     'vue/no-parsing-error': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
diff --git a/lib/index.js b/lib/index.js
index 02e65ba96..990755824 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -47,6 +47,7 @@ module.exports = {
     'no-empty-pattern': require('./rules/no-empty-pattern'),
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
+    'no-multiple-template-root': require('./rules/no-multiple-template-root'),
     'no-parsing-error': require('./rules/no-parsing-error'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
     'no-reserved-keys': require('./rules/no-reserved-keys'),
diff --git a/lib/rules/no-multiple-template-root.js b/lib/rules/no-multiple-template-root.js
new file mode 100644
index 000000000..d4de9461e
--- /dev/null
+++ b/lib/rules/no-multiple-template-root.js
@@ -0,0 +1,98 @@
+/**
+ * @fileoverview disallow adding multiple root nodes to the template
+ * @author Przemyslaw Falowski (@przemkow)
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow adding multiple root nodes to the template',
+      category: 'essential',
+      url: 'https://eslint.vuejs.org/rules/no-multiple-template-root.html'
+    },
+    fixable: null,
+    schema: []
+  },
+
+  create: function (context) {
+    const sourceCode = context.getSourceCode()
+
+    return {
+      Program (program) {
+        const element = program.templateBody
+        if (element == null) {
+          return
+        }
+
+        const rootElements = []
+        let extraText = null
+        let extraElement = null
+        let vIf = false
+        for (const child of element.children) {
+          if (child.type === 'VElement') {
+            if (rootElements.length === 0) {
+              rootElements.push(child)
+              vIf = utils.hasDirective(child, 'if')
+            } else if (vIf && utils.hasDirective(child, 'else-if')) {
+              rootElements.push(child)
+            } else if (vIf && utils.hasDirective(child, 'else')) {
+              rootElements.push(child)
+              vIf = false
+            } else {
+              extraElement = child
+            }
+          } else if (sourceCode.getText(child).trim() !== '') {
+            extraText = child
+          }
+        }
+
+        if (extraText != null) {
+          context.report({
+            node: extraText,
+            loc: extraText.loc,
+            message: 'The template root requires an element rather than texts.'
+          })
+        } else if (extraElement != null) {
+          context.report({
+            node: extraElement,
+            loc: extraElement.loc,
+            message: 'The template root requires exactly one element.'
+          })
+        } else {
+          for (const element of rootElements) {
+            const tag = element.startTag
+            const name = element.name
+
+            if (name === 'template' || name === 'slot') {
+              context.report({
+                node: tag,
+                loc: tag.loc,
+                message: "The template root disallows '<{{name}}>' elements.",
+                data: { name }
+              })
+            }
+            if (utils.hasDirective(element, 'for')) {
+              context.report({
+                node: tag,
+                loc: tag.loc,
+                message: "The template root disallows 'v-for' directives."
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/valid-template-root.js b/lib/rules/valid-template-root.js
index 2932435df..860b550d4 100644
--- a/lib/rules/valid-template-root.js
+++ b/lib/rules/valid-template-root.js
@@ -39,72 +39,27 @@ module.exports = {
 
         const hasSrc = utils.hasAttribute(element, 'src')
         const rootElements = []
-        let extraText = null
-        let extraElement = null
-        let vIf = false
+
         for (const child of element.children) {
-          if (child.type === 'VElement') {
-            if (rootElements.length === 0 && !hasSrc) {
-              rootElements.push(child)
-              vIf = utils.hasDirective(child, 'if')
-            } else if (vIf && utils.hasDirective(child, 'else-if')) {
-              rootElements.push(child)
-            } else if (vIf && utils.hasDirective(child, 'else')) {
-              rootElements.push(child)
-              vIf = false
-            } else {
-              extraElement = child
-            }
-          } else if (sourceCode.getText(child).trim() !== '') {
-            extraText = child
+          if (sourceCode.getText(child).trim() !== '') {
+            rootElements.push(child)
           }
         }
 
-        if (hasSrc && (extraText != null || extraElement != null)) {
-          context.report({
-            node: extraText || extraElement,
-            loc: (extraText || extraElement).loc,
-            message: "The template root with 'src' attribute is required to be empty."
-          })
-        } else if (extraText != null) {
-          context.report({
-            node: extraText,
-            loc: extraText.loc,
-            message: 'The template root requires an element rather than texts.'
-          })
-        } else if (extraElement != null) {
-          context.report({
-            node: extraElement,
-            loc: extraElement.loc,
-            message: 'The template root requires exactly one element.'
-          })
+        if (hasSrc && rootElements.length) {
+          for (const element of rootElements) {
+            context.report({
+              node: element,
+              loc: element.loc,
+              message: "The template root with 'src' attribute is required to be empty."
+            })
+          }
         } else if (rootElements.length === 0 && !hasSrc) {
           context.report({
             node: element,
             loc: element.loc,
-            message: 'The template root requires exactly one element.'
+            message: 'The template requires child element.'
           })
-        } else {
-          for (const element of rootElements) {
-            const tag = element.startTag
-            const name = element.name
-
-            if (name === 'template' || name === 'slot') {
-              context.report({
-                node: tag,
-                loc: tag.loc,
-                message: "The template root disallows '<{{name}}>' elements.",
-                data: { name }
-              })
-            }
-            if (utils.hasDirective(element, 'for')) {
-              context.report({
-                node: tag,
-                loc: tag.loc,
-                message: "The template root disallows 'v-for' directives."
-              })
-            }
-          }
         }
       }
     }
diff --git a/tests/lib/rules/no-multiple-template-root.js b/tests/lib/rules/no-multiple-template-root.js
new file mode 100644
index 000000000..3c8a99bc5
--- /dev/null
+++ b/tests/lib/rules/no-multiple-template-root.js
@@ -0,0 +1,100 @@
+/**
+ * @fileoverview disallow adding multiple root nodes to the template
+ * @author Przemyslaw Falowski (@przemkow)
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-multiple-template-root')
+
+var RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+ruleTester.run('no-multiple-template-root', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div>abc</div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <div>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div v-if="foo">abc</div>\n    <div v-else>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div v-if="foo">abc</div>\n    <div v-else-if="bar">abc</div>\n    <div v-else>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>\n    <c1 v-if="1" />\n    <c2 v-else-if="1" />\n    <c3 v-else />\n</template>`
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-if="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-if="foo"></div><div v-else-if="bar"></div></template>'
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div></div><div></div></template>',
+      errors: ['The template root requires exactly one element.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <div></div>\n    <div></div>\n</template>',
+      errors: ['The template root requires exactly one element.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>{{a b c}}</template>',
+      errors: ['The template root requires an element rather than texts.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div></div>aaaaaa</template>',
+      errors: ['The template root requires an element rather than texts.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>aaaaaa<div></div></template>',
+      errors: ['The template root requires an element rather than texts.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="x in list"></div></template>',
+      errors: ["The template root disallows 'v-for' directives."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><slot></slot></template>',
+      errors: ["The template root disallows '<slot>' elements."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><template></template></template>',
+      errors: ["The template root disallows '<template>' elements."]
+    }
+  ]
+})
diff --git a/tests/lib/rules/valid-template-root.js b/tests/lib/rules/valid-template-root.js
index 2fd9dbc05..033188cca 100644
--- a/tests/lib/rules/valid-template-root.js
+++ b/tests/lib/rules/valid-template-root.js
@@ -74,53 +74,45 @@ tester.run('valid-template-root', rule, {
     {
       filename: 'test.vue',
       code: '<template lang="pug">test</template>'
-    }
-  ],
-  invalid: [
+    },
     {
       filename: 'test.vue',
-      code: '<template>\n</template>',
-      errors: ['The template root requires exactly one element.']
+      code: '<template><div></div><div></div></template>'
     },
     {
       filename: 'test.vue',
-      code: '<template><div></div><div></div></template>',
-      errors: ['The template root requires exactly one element.']
+      code: '<template>\n    <div></div>\n    <div></div>\n</template>'
     },
     {
       filename: 'test.vue',
-      code: '<template>\n    <div></div>\n    <div></div>\n</template>',
-      errors: ['The template root requires exactly one element.']
+      code: '<template>{{a b c}}</template>'
     },
     {
       filename: 'test.vue',
-      code: '<template>{{a b c}}</template>',
-      errors: ['The template root requires an element rather than texts.']
+      code: '<template><div></div>aaaaaa</template>'
     },
     {
       filename: 'test.vue',
-      code: '<template><div></div>aaaaaa</template>',
-      errors: ['The template root requires an element rather than texts.']
+      code: '<template>aaaaaa<div></div></template>'
     },
     {
       filename: 'test.vue',
-      code: '<template>aaaaaa<div></div></template>',
-      errors: ['The template root requires an element rather than texts.']
+      code: '<template><div v-for="x in list"></div></template>'
     },
     {
       filename: 'test.vue',
-      code: '<template><div v-for="x in list"></div></template>',
-      errors: ["The template root disallows 'v-for' directives."]
+      code: '<template><slot></slot></template>'
     },
     {
       filename: 'test.vue',
-      code: '<template><slot></slot></template>',
-      errors: ["The template root disallows '<slot>' elements."]
-    },
+      code: '<template><template></template></template>'
+    }
+  ],
+  invalid: [
     {
       filename: 'test.vue',
-      code: '<template><template></template></template>',
-      errors: ["The template root disallows '<template>' elements."]
+      code: '<template>\n</template>',
+      errors: ['The template requires child element.']
     },
     {
       filename: 'test.vue',