feat(no-multiple-template-root): support disallowComments property

Author: chouchouji

Diff for: lib/rules/no-multiple-template-root.js

@@ -15,8 +15,19 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-multiple-template-root.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          disallowComments: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
+      commentRoot: 'The template root disallows comments.',
       multipleRoot: 'The template root requires exactly one element.',
       textRoot: 'The template root requires an element rather than texts.',
       disallowedElement: "The template root disallows '<{{name}}>' elements.",
@@ -28,6 +39,8 @@ module.exports = {
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
+    const options = context.options[0] || {}
+    const disallowComments = options.disallowComments
     const sourceCode = context.getSourceCode()
 
     return {
@@ -37,6 +50,36 @@ module.exports = {
           return
         }
 
+        const commentRangesMap = new Map()
+        const comments = element.comments
+        if (disallowComments && comments.length > 0) {
+          for (const comment of comments) {
+            const [start, end] = comment.range
+            commentRangesMap.set(`${start}-${end}`, comment)
+          }
+
+          for (const child of element.children) {
+            if (child.type === 'VElement') {
+              for (const range of commentRangesMap.keys()) {
+                const ranges = range.split('-')
+                if (ranges[0] > child.range[0] && ranges[1] < child.range[1]) {
+                  commentRangesMap.delete(range)
+                }
+              }
+            }
+          }
+
+          if (commentRangesMap.size > 0) {
+            for (const node of commentRangesMap.values()) {
+              context.report({
+                node,
+                loc: node.loc,
+                messageId: 'commentRoot'
+              })
+            }
+          }
+        }
+
         const rootElements = []
         let extraText = null
         let extraElement = null

Diff for: tests/lib/rules/no-multiple-template-root.js

@@ -62,6 +62,30 @@ ruleTester.run('no-multiple-template-root', rule, {
         </Link>
       </template>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- comments -->
+        <div>12333</div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- comments -->
+        <div>
+          <!-- comments -->
+          12333
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: false }]
     }
   ],
   invalid: [
@@ -104,6 +128,58 @@ ruleTester.run('no-multiple-template-root', rule, {
       filename: 'test.vue',
       code: '<template><template></template></template>',
       errors: ["The template root disallows '<template>' elements."]
+    },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div>12333</div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 5
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- When you have a comment in the root of your template in vue 3, 
+        using $el will point to the first text comment instead of the actual DOM element.   -->
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: ['The template root disallows comments.']
     }
   ]
 })