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

Author: 9romise

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

@@ -14,10 +14,7 @@ const utils = require('../utils')
  */
 function getReportComments(comments, elementRanges) {
   return comments.filter(
-    (comment) =>
-      !elementRanges.some(
-        (range) => range[0] <= comment.range[0] && comment.range[1] <= range[1]
-      )
+    (comment) => !elementRanges.some((range) => utils.inRange(range, comment))
   )
 }
 
@@ -65,7 +62,9 @@ module.exports = {
           return
         }
 
-        const comments = element.comments
+        const comments = element.comments.filter((comment) =>
+          utils.inRange(comment, element)
+        )
         const elementRanges = element.children.map((child) => child.range)
         if (disallowComments && comments.length > 0) {
           for (const comment of getReportComments(comments, elementRanges)) {

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,15 @@ ruleTester.run('no-multiple-template-root', rule, {
       </template>
       `,
       options: [{ disallowComments: true }]
+    },
+    {
+      code: `
+        <!-- comment -->
+        <template>
+          <div>abc</div>
+        </template>
+        `,
+      options: [{ disallowComments: true }]
     }
   ],
   invalid: [
@@ -371,7 +380,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