Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/support for fragments (#1038)
* feat: update valid-template-root to support Vue 3 requirements * feat: implement no-multiple-template-root method basing on valid-template-root implementation for Vue 2
- Loading branch information
Showing
9 changed files
with
294 additions
and
115 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| pageClass: rule-details | ||
| sidebarDepth: 0 | ||
| title: vue/no-multiple-template-root | ||
| description: disallow adding multiple root nodes to the template | ||
| --- | ||
| # vue/no-multiple-template-root | ||
| > disallow adding multiple root nodes to the template | ||
| - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. | ||
|
|
||
| This rule checks whether template contains single root element valid for Vue 2. | ||
|
|
||
|
|
||
| <eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}"> | ||
|
|
||
| ```vue | ||
| <!-- The root is text --> | ||
| <template>Lorem ipsum</template> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}"> | ||
|
|
||
| ```vue | ||
| <!-- There are multiple root elements --> | ||
| <template> | ||
| <div>hello</div> | ||
| <div>hello</div> | ||
| </template> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}"> | ||
|
|
||
| ```vue | ||
| <!-- The root element has `v-for` directives --> | ||
| <template> | ||
| <div v-for="item in items"/> | ||
| </template> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| <eslint-code-block :rules="{'vue/no-multiple-template-root': ['error']}"> | ||
|
|
||
| ```vue | ||
| <!-- The root element is `<template>` or `<slot>` --> | ||
| <template> | ||
| <slot /> | ||
| </template> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ## :wrench: Options | ||
|
|
||
| Nothing. | ||
|
|
||
| ## :mag: Implementation | ||
|
|
||
| - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-template-root.js) | ||
| - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-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,98 @@ | ||
| /** | ||
| * @fileoverview disallow adding multiple root nodes to the template | ||
| * @author Przemyslaw Falowski (@przemkow) | ||
| */ | ||
| 'use strict' | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Requirements | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| const utils = require('../utils') | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| type: 'problem', | ||
| docs: { | ||
| description: 'disallow adding multiple root nodes to the template', | ||
| category: 'essential', | ||
| url: 'https://eslint.vuejs.org/rules/no-multiple-template-root.html' | ||
| }, | ||
| fixable: null, | ||
| schema: [] | ||
| }, | ||
|
|
||
| create: function (context) { | ||
| const sourceCode = context.getSourceCode() | ||
|
|
||
| return { | ||
| Program (program) { | ||
| const element = program.templateBody | ||
| if (element == null) { | ||
| return | ||
| } | ||
|
|
||
| const rootElements = [] | ||
| let extraText = null | ||
| let extraElement = null | ||
| let vIf = false | ||
| for (const child of element.children) { | ||
| if (child.type === 'VElement') { | ||
| if (rootElements.length === 0) { | ||
| rootElements.push(child) | ||
| vIf = utils.hasDirective(child, 'if') | ||
| } else if (vIf && utils.hasDirective(child, 'else-if')) { | ||
| rootElements.push(child) | ||
| } else if (vIf && utils.hasDirective(child, 'else')) { | ||
| rootElements.push(child) | ||
| vIf = false | ||
| } else { | ||
| extraElement = child | ||
| } | ||
| } else if (sourceCode.getText(child).trim() !== '') { | ||
| extraText = child | ||
| } | ||
| } | ||
|
|
||
| if (extraText != null) { | ||
| context.report({ | ||
| node: extraText, | ||
| loc: extraText.loc, | ||
| message: 'The template root requires an element rather than texts.' | ||
| }) | ||
| } else if (extraElement != null) { | ||
| context.report({ | ||
| node: extraElement, | ||
| loc: extraElement.loc, | ||
| message: 'The template root requires exactly one element.' | ||
| }) | ||
| } else { | ||
| for (const element of rootElements) { | ||
| const tag = element.startTag | ||
| const name = element.name | ||
|
|
||
| if (name === 'template' || name === 'slot') { | ||
| context.report({ | ||
| node: tag, | ||
| loc: tag.loc, | ||
| message: "The template root disallows '<{{name}}>' elements.", | ||
| data: { name } | ||
| }) | ||
| } | ||
| if (utils.hasDirective(element, 'for')) { | ||
| context.report({ | ||
| node: tag, | ||
| loc: tag.loc, | ||
| message: "The template root disallows 'v-for' directives." | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
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
Oops, something went wrong.