/
valid-v-bind-sync.js
136 lines (119 loc) · 3.75 KB
/
valid-v-bind-sync.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/**
* @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'
)
}
/**
* Get the variable by names.
* @param {string} name The variable name to find.
* @param {ASTNode} leafNode The node to look up.
* @returns {Variable|null} The found variable or null.
*/
function getVariable (name, leafNode) {
let node = leafNode
while (node) {
const variables = node.variables
const variable = variables && variables.find(v => v.id.name === name)
if (variable) {
return variable
}
node = node.parent
}
return null
}
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
module.exports = {
meta: {
docs: {
description: 'enforce valid `.sync` modifier on `v-bind` directives',
category: undefined,
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.4/docs/rules/valid-v-bind-sync.md'
},
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='bind']" (node) {
if (node.key.modifiers.indexOf('sync') < 0) {
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 = getVariable(id.name, element)
if (variable) {
context.report({
node,
loc: node.loc,
messageId: 'unexpectedUpdateIterationVariable',
data: { varName: id.name }
})
}
}
}
}
})
}
}