feat: change the rule name to no-root-v-if

Author: perrysong

docs/rules/index.md

@@ -118,7 +118,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  | :three::two::warning: |
 | [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  | :three::two::warning: |
 | [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  | :three::two::warning: |
-| [vue/valid-v-if-template-root](./valid-v-if-template-root.md) | enforce valid `v-if` directives on root element |  | :three::two::warning: |
+| [vue/no-root-v-if](./no-root-v-if.md) | enforce valid `v-if` directives on root element |  | :three::two::warning: |
 | [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  | :three::two::warning: |
 | [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  | :three::warning: |
 | [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  | :three::warning: |

docs/rules/valid-v-if-template-root.md renamed to docs/rules/no-root-v-if.md

@@ -1,10 +1,10 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
-title: vue/valid-v-if-template-root
+title: vue/no-root-v-if
 description: enforce valid `v-if` directives on root element
 ---
-# vue/valid-v-if-template-root
+# vue/no-root-v-if
 
 > enforce valid `v-if` directives on root element
 
@@ -17,7 +17,7 @@ This rule checks whether every template root is valid.
 
 This rule reports the template root in the following cases:
 
-<eslint-code-block :rules="{'vue/valid-v-if-template-root': ['error']}">
+<eslint-code-block :rules="{'vue/no-root-v-if': ['error']}">
 
 ```vue
 <!--  `v-if` should not be used on root element without `v-else` -->
@@ -36,5 +36,5 @@ Nothing.
 
 ## :mag: Implementation
 
-- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-if-template-root.js)
-- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-if-template-root.js)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-root-v-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-root-v-if.js)

lib/configs/essential.js

@@ -62,7 +62,6 @@ module.exports = {
     'vue/valid-v-else': 'error',
     'vue/valid-v-for': 'error',
     'vue/valid-v-html': 'error',
-    'vue/valid-v-if-template-root': 'error',
     'vue/valid-v-if': 'error',
     'vue/valid-v-model': 'error',
     'vue/valid-v-on': 'error',

lib/configs/vue3-essential.js

@@ -77,7 +77,6 @@ module.exports = {
     'vue/valid-v-else': 'error',
     'vue/valid-v-for': 'error',
     'vue/valid-v-html': 'error',
-    'vue/valid-v-if-template-root': 'error',
     'vue/valid-v-if': 'error',
     'vue/valid-v-is': 'error',
     'vue/valid-v-memo': 'error',

lib/index.js

@@ -219,7 +219,7 @@ module.exports = {
     'valid-v-else': require('./rules/valid-v-else'),
     'valid-v-for': require('./rules/valid-v-for'),
     'valid-v-html': require('./rules/valid-v-html'),
-    'valid-v-if-template-root': require('./rules/valid-v-if-template-root'),
+    'no-root-v-if': require('./rules/no-root-v-if'),
     'valid-v-if': require('./rules/valid-v-if'),
     'valid-v-is': require('./rules/valid-v-is'),
     'valid-v-memo': require('./rules/valid-v-memo'),

lib/rules/valid-v-if-template-root.js renamed to lib/rules/no-root-v-if.js

@@ -10,23 +10,34 @@ const utils = require('../utils')
 /**
  * Get the number of root element directive
  * @param {VNode[]} rootElements The start tag node to check.
- * @param {string} directiveName The directive name to check.
  */
-function getDirectiveLength(rootElements, directiveName) {
-  if (!directiveName) return 0
-  return rootElements.filter(
-    (element) =>
-      element.type === 'VElement' && utils.hasDirective(element, directiveName)
-  ).length
+function getDirectivesLength(rootElements) {
+  let ifLength = 0
+  let elseLength = 0
+  let elseIfLength = 0
+
+  for (const element of rootElements) {
+    if (element.type === 'VElement') {
+      if (utils.hasDirective(element, 'if')) ifLength += 1
+      if (utils.hasDirective(element, 'else')) elseLength += 1
+      if (utils.hasDirective(element, 'else-if')) elseIfLength += 1
+    }
+  }
+
+  return {
+    ifLength,
+    elseLength,
+    elseIfLength
+  }
 }
 
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-if` directives on root element',
-      categories: ['vue3-essential', 'essential'],
-      url: 'https://eslint.vuejs.org/rules/valid-v-if-template-root.html'
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-root-v-if.html'
     },
     fixable: null,
     schema: []
@@ -49,16 +60,10 @@ module.exports = {
             rootElements.push(child)
           }
         }
-
         if (rootElements.length === 0) return
-        const hasRootVIfLength = getDirectiveLength(rootElements, 'if')
-        const hasRootVElseLength = getDirectiveLength(rootElements, 'else')
-        const hasRootVElseIfLength = getDirectiveLength(rootElements, 'else-if')
-        if (
-          hasRootVIfLength === 1 &&
-          hasRootVElseLength === 0 &&
-          hasRootVElseIfLength === 0
-        ) {
+        const { ifLength, elseLength, elseIfLength } =
+          getDirectivesLength(rootElements)
+        if (ifLength === 1 && elseLength === 0 && elseIfLength === 0) {
           context.report({
             node: element,
             loc: element.loc,

tests/lib/rules/valid-v-if-template-root.js renamed to tests/lib/rules/no-root-v-if.js

@@ -6,14 +6,14 @@
 'use strict'
 
 const RuleTester = require('eslint').RuleTester
-const rule = require('../../../lib/rules/valid-v-if-template-root')
+const rule = require('../../../lib/rules/no-root-v-if')
 
 const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2015 }
 })
 
-tester.run('valid-v-if-template-root', rule, {
+tester.run('no-root-v-if', rule, {
   valid: [
     {
       filename: 'test.vue',
@@ -106,6 +106,11 @@ tester.run('valid-v-if-template-root', rule, {
       filename: 'test.vue',
       code: '<template><div v-if="foo"></div></template>',
       errors: ['`v-if` should not be used on root element without `v-else`.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div /><div v-if="foo" /></template>',
+      errors: ['`v-if` should not be used on root element without `v-else`.']
     }
   ]
 })