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

vuejs · Feb 15, 2025 · 0cd3dff · 0cd3dff
1 parent ea93477
commit 0cd3dff
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 42 deletions.
diff --git a/lib/rules/no-multiple-template-root.js b/lib/rules/no-multiple-template-root.js
@@ -6,6 +6,58 @@
 
 const utils = require('../utils')
 
+/**
+ * Get all comments that need to be reported
+ * @param {(HTMLComment | HTMLBogusComment | Comment)[]} comments
+ * @param {VRootElement} element
+ * @returns {(HTMLComment | HTMLBogusComment | Comment)[]}
+ */
+function getReportComments(comments, element) {
+  const commentRanges = comments.map((comment) => comment.range)
+  const elementRanges = element.children
+    .filter((child) => child.type === 'VElement')
+    .map((child) => child.range)
+
+  // should return comment directly when no any elements
+  if (elementRanges.length === 0) {
+    return comments
+  }
+
+  let commentIndex = 0
+  let elementIndex = 0
+
+  const needReportComments = []
+  while (commentIndex < commentRanges.length) {
+    const [commentStart, commentEnd] = commentRanges[commentIndex]
+    const [elementStart, elementEnd] = elementRanges[elementIndex]
+    // if the comment is in the range of element, should skip
+    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
+    }
+
+    if (elementIndex < elementRanges.length - 1 && commentStart > elementEnd) {
+      elementIndex += 1
+    }
+  }
+
+  return needReportComments
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -52,48 +104,7 @@ module.exports = {
 
         const comments = element.comments
         if (disallowComments && comments.length > 0) {
-          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
-            }
-
-            if (
-              elementIndex < elementRanges.length - 1 &&
-              commentStart > elementEnd
-            ) {
-              elementIndex += 1
-            }
-          }
-
+          const needReportComments = getReportComments(comments, element)
           if (needReportComments.length > 0) {
             for (const comment of needReportComments) {
               context.report({

diff --git a/tests/lib/rules/no-multiple-template-root.js b/tests/lib/rules/no-multiple-template-root.js
@@ -203,6 +203,60 @@ ruleTester.run('no-multiple-template-root', rule, {
         }
       ]
     },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div v-if="for">
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+        <!-- comments -->
+        <div v-else>
+          <!-- comments -->
+          12333
+        </div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 12
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 17
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 7
+        }
+      ]
+    },
     {
       code: `
       <template>