Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
⭐️New: Add
vue/valid-v-bind-sync
rule (#647)
* New: Add `vue/valid-v-bind-sync` rule * update doc * update use messageId * Change: null comparison to Boolean call. * add testcase * Update: to use reference.variable * fixed eslint error * update document * revert readme * fix eof * fixed doc * update docs * fixed lint errors * fixed
- Loading branch information
Showing
5 changed files
with
477 additions
and
0 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,70 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/valid-v-bind-sync | ||
description: enforce valid `.sync` modifier on `v-bind` directives | ||
--- | ||
# vue/valid-v-bind-sync | ||
> enforce valid `.sync` modifier on `v-bind` directives | ||
This rule checks whether every `.sync` modifier on `v-bind` directives is valid. | ||
|
||
## :book: Rule Details | ||
|
||
This rule reports `.sync` modifier on `v-bind` directives in the following cases: | ||
|
||
- The `.sync` modifier does not have the attribute value which is valid as LHS. E.g. `<MyComponent v-bind:aaa.sync="foo() + bar()" />` | ||
- The `.sync` modifier is on non Vue-components. E.g. `<input v-bind:aaa.sync="foo"></div>` | ||
- The `.sync` modifier's reference is iteration variables. E.g. `<div v-for="x in list"><MyComponent v-bind:aaa.sync="x" /></div>` | ||
|
||
<eslint-code-block :rules="{'vue/valid-v-bind-sync': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<MyComponent v-bind:aaa.sync="foo"/> | ||
<MyComponent :aaa.sync="foo"/> | ||
<div v-for="todo in todos"> | ||
<MyComponent v-bind:aaa.sync="todo.name"/> | ||
<MyComponent :aaa.sync="todo.name"/> | ||
</div> | ||
<!-- ✗ BAD --> | ||
<MyComponent v-bind:aaa.sync="foo + bar" /> | ||
<MyComponent :aaa.sync="foo + bar" /> | ||
<input v-bind:aaa.sync="foo"> | ||
<input :aaa.sync="foo"> | ||
<div v-for="todo in todos"> | ||
<MyComponent v-bind:aaa.sync="todo" /> | ||
<MyComponent :aaa.sync="todo" /> | ||
</div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
::: warning Note | ||
This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule. | ||
::: | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :couple: Related rules | ||
|
||
- [no-parsing-error] | ||
|
||
[no-parsing-error]: no-parsing-error.md | ||
|
||
## :books: Further reading | ||
|
||
- [Guide - `.sync` Modifier]([https://vuejs.org/v2/guide/list.html#v-for-with-a-Component](https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-bind-sync.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-bind-sync.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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
/** | ||
* @fileoverview enforce valid `.sync` modifier on `v-bind` directives | ||
* @author Yosuke Ota | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Helpers | ||
// ------------------------------------------------------------------------------ | ||
|
||
/** | ||
* Check whether the given node is valid or not. | ||
* @param {ASTNode} node The element node to check. | ||
* @returns {boolean} `true` if the node is valid. | ||
*/ | ||
function isValidElement (node) { | ||
if ( | ||
(!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) || | ||
utils.isHtmlWellKnownElementName(node.rawName) || | ||
utils.isSvgWellKnownElementName(node.rawName) | ||
) { | ||
// non Vue-component | ||
return false | ||
} | ||
return true | ||
} | ||
|
||
/** | ||
* Check whether the given node can be LHS. | ||
* @param {ASTNode} node The node to check. | ||
* @returns {boolean} `true` if the node can be LHS. | ||
*/ | ||
function isLhs (node) { | ||
return Boolean(node) && ( | ||
node.type === 'Identifier' || | ||
node.type === 'MemberExpression' | ||
) | ||
} | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'problem', | ||
docs: { | ||
description: 'enforce valid `.sync` modifier on `v-bind` directives', | ||
category: undefined, | ||
url: 'https://eslint.vuejs.org/rules/valid-v-bind-sync.html' | ||
}, | ||
fixable: null, | ||
schema: [], | ||
messages: { | ||
unexpectedInvalidElement: "'.sync' modifiers aren't supported on <{{name}}> non Vue-components.", | ||
unexpectedNonLhsExpression: "'.sync' modifiers require the attribute value which is valid as LHS.", | ||
unexpectedUpdateIterationVariable: "'.sync' modifiers cannot update the iteration variable '{{varName}}' itself." | ||
} | ||
}, | ||
|
||
create (context) { | ||
return utils.defineTemplateBodyVisitor(context, { | ||
"VAttribute[directive=true][key.name.name='bind']" (node) { | ||
if (!node.key.modifiers.map(mod => mod.name).includes('sync')) { | ||
return | ||
} | ||
const element = node.parent.parent | ||
const name = element.name | ||
|
||
if (!isValidElement(element)) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'unexpectedInvalidElement', | ||
data: { name } | ||
}) | ||
} | ||
|
||
if (node.value) { | ||
if (!isLhs(node.value.expression)) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'unexpectedNonLhsExpression' | ||
}) | ||
} | ||
|
||
for (const reference of node.value.references) { | ||
const id = reference.id | ||
if (id.parent.type !== 'VExpressionContainer') { | ||
continue | ||
} | ||
const variable = reference.variable | ||
if (variable) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'unexpectedUpdateIterationVariable', | ||
data: { varName: id.name } | ||
}) | ||
} | ||
} | ||
} | ||
} | ||
}) | ||
} | ||
} |
Oops, something went wrong.