Fix: no-invalid-template-root has false positive about empty templates (fixes #41) (#44)

* Fix: `no-invalid-template-root` has false positive about empty templates (fixes #41)

* revive warnings of empty

* update docs

* fix for src attributes

* fix error message

* `if` → `in`

Author: mysticatea

docs/rules/no-confusing-v-for-v-if.md

@@ -8,7 +8,7 @@ So when they exist on the same node, `v-if` directive should use the reference w
 
 ## 📖 Rule Details
 
-This rule reports the elements which have both `v-for` and `v-if` directives if the following cases:
+This rule reports the elements which have both `v-for` and `v-if` directives in the following cases:
 
 - The `v-if` directive does not use the reference which is to the variables which are defined by the `v-for` directives.
 

docs/rules/no-invalid-template-root.md

@@ -4,16 +4,21 @@ This rule checks whether every template root is valid.
 
 ## 📖 Rule Details
 
-This rule reports the template root if the following cases:
+This rule reports the template root in the following cases:
 
+- The root is nothing. E.g. `<template></template>`.
 - The root is text. E.g. `<template>hello</template>`.
 - The root is multiple elements. E.g. `<template><div>one</div><div>two</div></template>`.
 - The root element has `v-for` directives. E.g. `<template><div v-for="x in list">{{x}}</div></template>`.
-- The root element has `v-if`/`v-else-if` directives without `v-else` elements. E.g. `<template><div v-if="foo">hello</div></template>`.
 - The root element is `<template>` or `<slot>` elements. E.g. `<template><template>hello</template></template>`.
 
 👎 Examples of **incorrect** code for this rule:
 
+```html
+<template>
+</template>
+```
+
 ```html
 <template>
     <div>hello</div>
@@ -33,17 +38,17 @@ This rule reports the template root if the following cases:
 </template>
 ```
 
+👍 Examples of **correct** code for this rule:
+
 ```html
 <template>
-    <div v-if="foo"></div>
+    <div>abc</div>
 </template>
 ```
 
-👍 Examples of **correct** code for this rule:
-
 ```html
 <template>
-    <div>abc</div>
+    <div v-if="foo"></div>
 </template>
 ```
 

docs/rules/no-invalid-v-bind.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-bind` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-bind` directives if the following cases:
+This rule reports `v-bind` directives in the following cases:
 
 - The directive does not have that attribute value. E.g. `<div v-bind:aaa></div>`
 - The directive has invalid modifiers. E.g. `<div v-bind:aaa.bbb="ccc"></div>`

docs/rules/no-invalid-v-cloak.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-cloak` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-cloak` directives if the following cases:
+This rule reports `v-cloak` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-cloak:aaa></div>`
 - The directive has that modifier. E.g. `<div v-cloak.bbb></div>`

docs/rules/no-invalid-v-else-if.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-else-if` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-else-if` directives if the following cases:
+This rule reports `v-else-if` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-if="foo"></div><div v-else-if:aaa="bar"></div>`
 - The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else-if.bbb="bar"></div>`

docs/rules/no-invalid-v-else.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-else` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-else` directives if the following cases:
+This rule reports `v-else` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-if="foo"></div><div v-else:aaa></div>`
 - The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else.bbb></div>`

docs/rules/no-invalid-v-for.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-for` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-for` directives if the following cases:
+This rule reports `v-for` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-for:aaa></div>`
 - The directive has that modifier. E.g. `<div v-for.bbb></div>`

docs/rules/no-invalid-v-html.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-html` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-html` directives if the following cases:
+This rule reports `v-html` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-html:aaa></div>`
 - The directive has that modifier. E.g. `<div v-html.bbb></div>`

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

@@ -4,7 +4,7 @@ This rule checks whether every `v-if` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-if` directives if the following cases:
+This rule reports `v-if` directives in the following cases:
 
 - The directive has that argument. E.g. `<div v-if:aaa="foo"></div>`
 - The directive has that modifier. E.g. `<div v-if.bbb="foo"></div>`

docs/rules/no-invalid-v-model.md

@@ -4,7 +4,7 @@ This rule checks whether every `v-model` directive is valid.
 
 ## 📖 Rule Details
 
-This rule reports `v-model` directives if the following cases:
+This rule reports `v-model` directives in the following cases:
 
 - The directive has that argument. E.g. `<input v-model:aaa="foo">`
 - The directive has the modifiers which are not supported. E.g. `<input v-model.bbb="foo">`