feat: check multi root

Author: waynzh

lib/rules/no-duplicate-attr-inheritance.js

@@ -6,6 +6,43 @@
 
 const utils = require('../utils')
 
+/** @param {VElement[]} elements */
+function isConditionalGroup(elements) {
+  let hasIf = false
+  let hasElse = false
+
+  for (const element of elements) {
+    if (utils.hasDirective(element, 'if')) {
+      if (hasIf || hasElse) {
+        return false
+      }
+      hasIf = true
+    } else if (utils.hasDirective(element, 'else-if')) {
+      if (!hasIf || hasElse) {
+        return false
+      }
+    } else if (utils.hasDirective(element, 'else')) {
+      if (!hasIf || hasElse) {
+        return false
+      }
+      hasElse = true
+    } else {
+      return false
+    }
+  }
+
+  return hasIf && (elements.length === 1 || hasElse)
+}
+
+/** @param {VElement[]} elements */
+function isMultiRoot(elements) {
+  if (elements.length > 1 && !isConditionalGroup(elements)) {
+    return true
+  }
+
+  return false
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -77,7 +114,10 @@ module.exports = {
           }
 
           const rootElements = element.children.filter(utils.isVElement)
-          if (rootElements.length === 1 && attrsRefs.length > 0) {
+          // ignore multi root
+          if (isMultiRoot(rootElements)) return
+
+          if (attrsRefs.length > 0) {
             for (const attrsRef of attrsRefs) {
               context.report({
                 node: attrsRef.id,

tests/lib/rules/no-duplicate-attr-inheritance.js

@@ -52,6 +52,47 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
       <template><div v-bind="$attrs"/><div/></template>
       `
     },
+    // ignore multi root
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1"></div>
+          <div v-if="condition2" v-bind="$attrs"></div>
+          <div v-else></div>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1"></div>
+          <div v-else-if="condition2"></div>
+          <div v-bind="$attrs"></div>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-bind="$attrs"></div>
+          <div v-if="condition1"></div>
+          <div v-else></div>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1"></div>
+          <div v-else-if="condition2"></div>
+          <div v-if="condition3" v-bind="$attrs"></div>
+        </template>
+      `
+    },
     {
       filename: 'test.vue',
       code: `
@@ -160,6 +201,49 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
           line: 5
         }
       ]
+    },
+    // single root with a condition group
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1" v-bind="$attrs"></div>
+          <div v-else-if="condition2"></div>
+          <div v-else></div>
+        </template>
+      `,
+      errors: [{ message: 'Set "inheritAttrs" to false.' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1" v-bind="$attrs"></div>
+          <div v-else-if="condition2"></div>
+          <div v-else-if="condition3"></div>
+          <div v-else></div>
+        </template>
+      `,
+      errors: [{ message: 'Set "inheritAttrs" to false.' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1" v-bind="$attrs"></div>
+          <div v-else></div>
+        </template>
+      `,
+      errors: [{ message: 'Set "inheritAttrs" to false.' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="condition1" v-bind="$attrs"></div>
+        </template>
+      `,
+      errors: [{ message: 'Set "inheritAttrs" to false.' }]
     }
   ]
 })