Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added valid-v-if-template-root rule.
- Loading branch information
1 parent
9184384
commit cdd3ac9
Showing
8 changed files
with
228 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/valid-v-if-template-root | ||
description: enforce valid `v-if` directives on root element | ||
--- | ||
# vue/valid-v-if-template-root | ||
|
||
> enforce valid `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> | ||
- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`. | ||
|
||
This rule checks whether every template root is valid. | ||
|
||
## :book: Rule Details | ||
|
||
This rule reports the template root in the following cases: | ||
|
||
<eslint-code-block :rules="{'vue/valid-v-if-template-root': ['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> | ||
|
||
## :wrench: Options | ||
|
||
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
/** | ||
* @author Perry Song | ||
* @copyright 2023 Perry Song. All rights reserved. | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
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 | ||
} | ||
|
||
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' | ||
}, | ||
fixable: null, | ||
schema: [] | ||
}, | ||
/** @param {RuleContext} context */ | ||
create(context) { | ||
const sourceCode = context.getSourceCode() | ||
|
||
return { | ||
/** @param {Program} program */ | ||
Program(program) { | ||
const element = program.templateBody | ||
if (element == null) { | ||
return | ||
} | ||
|
||
const rootElements = [] | ||
for (const child of element.children) { | ||
if (sourceCode.getText(child).trim() !== '') { | ||
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 | ||
) { | ||
context.report({ | ||
node: element, | ||
loc: element.loc, | ||
message: | ||
'`v-if` should not be used on root element without `v-else`.' | ||
}) | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
/** | ||
* @author Perry Song | ||
* @copyright 2023 Perry Song. All rights reserved. | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
const RuleTester = require('eslint').RuleTester | ||
const rule = require('../../../lib/rules/valid-v-if-template-root') | ||
|
||
const tester = new RuleTester({ | ||
parser: require.resolve('vue-eslint-parser'), | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
|
||
tester.run('valid-v-if-template-root', rule, { | ||
valid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div>abc</div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>\n <div>abc</div>\n</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>\n <!-- comment -->\n <div>abc</div>\n</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>\n <!-- comment -->\n <div v-if="foo">abc</div>\n <div v-else>abc</div>\n</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>\n <!-- comment -->\n <div v-if="foo">abc</div>\n <div v-else-if="bar">abc</div>\n <div v-else>abc</div>\n</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: `<template>\n <c1 v-if="1" />\n <c2 v-else-if="1" />\n <c3 v-else />\n</template>` | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div v-if="foo"></div><div v-else-if="bar"></div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template src="foo.html"></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div><textarea/>test</div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><table><custom-thead></custom-thead></table></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div></div><div></div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>\n <div></div>\n <div></div>\n</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>{{a b c}}</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div></div>aaaaaa</template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template>aaaaaa<div></div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div v-for="x in list"></div></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><slot></slot></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><template></template></template>' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template> <div v-if="mode === \'a\'"></div><div v-if="mode === \'b\'"></div></template>' | ||
} | ||
], | ||
invalid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><custom-component v-if="foo"></custom-component></template>', | ||
errors: ['`v-if` should not be used on root element without `v-else`.'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div v-if="foo"></div></template>', | ||
errors: ['`v-if` should not be used on root element without `v-else`.'] | ||
} | ||
] | ||
}) |