fix: update rule logic and doc

Author: perrysong

docs/rules/no-root-v-if.md

@@ -2,13 +2,14 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-root-v-if
-description: enforce valid `v-if` directives on root element
+description: disallow `v-if` directives on root element
 ---
+
 # vue/no-root-v-if
 
-> enforce valid `v-if` directives on root element
+> disallow `v-if` directives on root element
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
 
 This rule checks whether every template root is valid.
 
@@ -19,12 +20,9 @@ This rule reports the template root in the following cases:
 <eslint-code-block :rules="{'vue/no-root-v-if': ['error']}">
 
 ```vue
-<!--  `v-if` should not be used on root element without `v-else` -->
 <template>
   <div v-if="foo"></div>
 </template>
-
-<template><custom-component v-if="shouldShow" /></template>
 ```
 
 </eslint-code-block>

lib/index.js

@@ -124,6 +124,7 @@ module.exports = {
     'no-restricted-static-attribute': require('./rules/no-restricted-static-attribute'),
     'no-restricted-syntax': require('./rules/no-restricted-syntax'),
     'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
+    'no-root-v-if': require('./rules/no-root-v-if'),
     'no-setup-props-destructure': require('./rules/no-setup-props-destructure'),
     'no-shared-component-data': require('./rules/no-shared-component-data'),
     'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
@@ -220,7 +221,6 @@ 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'),
-    '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/no-root-v-if.js

@@ -7,35 +7,11 @@
 
 const utils = require('../utils')
 
-/**
- * Get the number of root element directive
- * @param {VNode[]} rootElements The start tag node to check.
- */
-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',
+    type: 'suggestion',
     docs: {
-      description: 'enforce valid `v-if` directives on root element',
+      description: 'disallow `v-if` directives on root element',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-root-v-if.html'
     },
@@ -53,10 +29,10 @@ module.exports = {
         }
 
         const rootElements = element.children.filter(utils.isVElement)
-        if (rootElements.length === 0) return
-        const { ifLength, elseLength, elseIfLength } =
-          getDirectivesLength(rootElements)
-        if (ifLength === 1 && elseLength === 0 && elseIfLength === 0) {
+        if (
+          rootElements.length === 1 &&
+          utils.hasDirective(rootElements[0], 'if')
+        ) {
           context.report({
             node: element,
             loc: element.loc,

tests/lib/rules/no-root-v-if.js

@@ -94,6 +94,10 @@ tester.run('no-root-v-if', rule, {
     {
       filename: 'test.vue',
       code: '<template> <div v-if="mode === \'a\'"></div><div v-if="mode === \'b\'"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div /><div v-if="foo" /></template>'
     }
   ],
   invalid: [
@@ -106,11 +110,6 @@ tester.run('no-root-v-if', 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`.']
     }
   ]
 })