refactor(no-multiple-template-root): optimize code

Author: chouchouji

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

@@ -50,30 +50,55 @@ 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)
-          }
+          const commentRanges = comments.map((comment) => comment.range)
+          const elementRanges = element.children
+            .filter((child) => child.type === 'VElement')
+            .map((child) => child.range)
+
+          let commentIndex = 0
+          let elementIndex = 0
+
+          const needReportComments = elementRanges.length === 0 ? comments : []
+          while (
+            commentIndex < commentRanges.length &&
+            elementRanges.length > 0
+          ) {
+            const [commentStart, commentEnd] = commentRanges[commentIndex]
+            const [elementStart, elementEnd] = elementRanges[elementIndex]
+            if (commentStart > elementStart && commentEnd < elementEnd) {
+              commentIndex += 1
+              continue
+            }
+
+            if (commentEnd < elementStart) {
+              needReportComments.push(comments[commentIndex])
+              commentIndex += 1
+            }
+
+            // the element array has no any element, but comment still has some elements
+            if (
+              elementIndex === elementRanges.length - 1 &&
+              commentStart > elementEnd
+            ) {
+              needReportComments.push(comments[commentIndex])
+              commentIndex += 1
+            }
 
-          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 (
+              elementIndex < elementRanges.length - 1 &&
+              commentStart > elementEnd
+            ) {
+              elementIndex += 1
             }
           }
 
-          if (commentRangesMap.size > 0) {
-            for (const node of commentRangesMap.values()) {
+          if (needReportComments.length > 0) {
+            for (const comment of needReportComments) {
               context.report({
-                node,
-                loc: node.loc,
+                node: comment,
+                loc: comment.loc,
                 messageId: 'commentRoot'
               })
             }

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

@@ -86,6 +86,42 @@ ruleTester.run('no-multiple-template-root', rule, {
       </template>
       `,
       options: [{ disallowComments: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="for">
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+        <div v-else>
+          <!-- comments -->
+          12333
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }]
     }
   ],
   invalid: [