fix(no-multiple-template-root): skip comments outside template (#2964)

Author: 9romise

lib/rules/no-multiple-template-root.js

@@ -6,21 +6,6 @@
 
 const utils = require('../utils')
 
-/**
- * Get all comments that need to be reported
- * @param {(HTMLComment | HTMLBogusComment | Comment)[]} comments
- * @param {Range[]} elementRanges
- * @returns {(HTMLComment | HTMLBogusComment | Comment)[]}
- */
-function getReportComments(comments, elementRanges) {
-  return comments.filter(
-    (comment) =>
-      !elementRanges.some(
-        (range) => range[0] <= comment.range[0] && comment.range[1] <= range[1]
-      )
-  )
-}
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -65,10 +50,13 @@ module.exports = {
           return
         }
 
-        const comments = element.comments
-        const elementRanges = element.children.map((child) => child.range)
-        if (disallowComments && comments.length > 0) {
-          for (const comment of getReportComments(comments, elementRanges)) {
+        const reportComments = element.comments.filter(
+          (comment) =>
+            utils.inRange(element, comment) &&
+            !element.children.some((child) => utils.inRange(child, comment))
+        )
+        if (disallowComments) {
+          for (const comment of reportComments) {
             context.report({
               node: comment,
               loc: comment.loc,

lib/utils/index.js

@@ -1969,10 +1969,11 @@ module.exports = {
   },
   /**
    * Checks whether the target node is within the given range.
-   * @param { [number, number] } range
+   * @param { [number, number] | ASTNode | Token } rangeOrNode
    * @param {ASTNode | Token} target
    */
-  inRange(range, target) {
+  inRange(rangeOrNode, target) {
+    const range = Array.isArray(rangeOrNode) ? rangeOrNode : rangeOrNode.range
     return range[0] <= target.range[0] && target.range[1] <= range[1]
   },
   /**

tests/lib/rules/no-multiple-template-root.js

@@ -122,6 +122,17 @@ ruleTester.run('no-multiple-template-root', rule, {
       </template>
       `,
       options: [{ disallowComments: true }]
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/2948
+    {
+      code: `
+        <!-- comment -->
+        <template>
+          <div>abc</div>
+        </template>
+      `,
+      options: [{ disallowComments: true }]
     }
   ],
   invalid: [
@@ -371,7 +382,7 @@ ruleTester.run('no-multiple-template-root', rule, {
     {
       code: `
       <template>
-        <!-- When you have a comment in the root of your template in vue 3, 
+        <!-- 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