Skip to content

Commit 022846a

Browse files
milewskimilewski
committed
include support for :property="[]"
1 parent fdad618 commit 022846a

File tree

3 files changed

+93
-20
lines changed

3 files changed

+93
-20
lines changed

‎docs/rules/directive-interpolation-spacing.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ This rule aims to enforce unified spacing in directive interpolations.
1414
<div :property="{ key:value }"></div>
1515
<div :property=" { key:value } "></div>
1616
<div :property="{ [expression]:value,[expression]:value }"></div>
17+
<div :property="[1,2,3]"></div>
1718
```
1819

1920
:+1: Examples of **correct** code for this rule:
@@ -22,6 +23,7 @@ This rule aims to enforce unified spacing in directive interpolations.
2223
<div :property="{ key: value }"></div>
2324
<div :property="{ [expression]: value }"></div>
2425
<div :property="{ [expression]: value, [expression]: value }"></div>
26+
<div :property="[ 1, 2, 3 ]"></div>
2527
```
2628

2729
## :wrench: Options
@@ -32,30 +34,34 @@ Default spacing is set to `always`
3234
'vue/directive-interpolation-spacing': [2, 'always'|'never']
3335
```
3436

35-
### `"always"` - Expect one space between expression and curly braces.
37+
### `"always"` - Expect one space between expression and curly braces / brackets.
3638

3739
:-1: Examples of **incorrect** code for this rule:
3840

3941
```html
40-
<div :class="{key:value}"></div>
42+
<div :class="{key:value,key:value}"></div>
43+
<div :class="[1,2]"></div>
4144
```
4245

4346
:+1: Examples of **correct** code for this rule:
4447

4548
```html
46-
<div :class="{ key: value }"></div>
49+
<div :class="{ key: value, key: value }"></div>
50+
<div :class="[ 1, 2 ]"></div>
4751
```
4852

49-
### `"never"` - Expect no spaces between expression and curly braces.
53+
### `"never"` - Expect no spaces between expression and curly braces / brackets.
5054

5155
:-1: Examples of **incorrect** code for this rule:
5256

5357
```html
54-
<div :class="{ key: value }"></div>
58+
<div :class="{ key: value, key: value }"></div>
59+
<div :class="[ 1, 2, 3 ]"></div>
5560
```
5661

5762
:+1: Examples of **correct** code for this rule:
5863

5964
```html
60-
<div :class="{key: value}"></div>
65+
<div :class="{key: value, key: value}"></div>
66+
<div :class="[1, 2, 3]"></div>
6167
```

‎lib/rules/directive-interpolation-spacing.js

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,19 @@ const utils = require('../utils')
1515
// ------------------------------------------------------------------------------
1616

1717
function isOpenBrace (token) {
18-
return token.type === 'Punctuator' && token.value === '{'
18+
return token.type === 'Punctuator' && (token.value === '{' || token.value === '[')
1919
}
2020

21-
function isCloseBrace (token) {
22-
return token.type === 'Punctuator' && token.value === '}'
21+
function isCloseBrace (token, openBrace) {
22+
if (token.type !== 'Punctuator') {
23+
return false
24+
}
25+
26+
if (openBrace) {
27+
return { '[': ']', '{': '}' }[openBrace.value] === token.value
28+
}
29+
30+
return (token.value === '}' || token.value === ']')
2331
}
2432

2533
function isEndOf (punctuator, token) {
@@ -37,9 +45,9 @@ function getOpenAndCloseBraces (node, tokens) {
3745
return
3846
}
3947

40-
if (isOpenBrace(root)) {
48+
if (!openBrace && isOpenBrace(root)) {
4149
openBrace = root
42-
} else if (isCloseBrace(root)) {
50+
} else if (isCloseBrace(root, openBrace)) {
4351
closeBrace = root
4452
}
4553

@@ -98,14 +106,20 @@ module.exports = {
98106
if (openBrace.range[0] === nextToken.range[0] - 1) {
99107
context.report({
100108
node: nextToken,
101-
message: `Expected 1 space after '{', but not found.`,
109+
message: `Expected 1 space after '{{ displayValue }}', but not found.`,
110+
data: {
111+
displayValue: openBrace.value
112+
},
102113
fix: fixer => fixer.insertTextAfter(openBrace, ' ')
103114
})
104115
}
105116
if (closeBrace.range[0] === previousToken.range[1]) {
106117
context.report({
107118
node: closeBrace,
108-
message: `Expected 1 space before '}', but not found.`,
119+
message: `Expected 1 space before '{{ displayValue }}', but not found.`,
120+
data: {
121+
displayValue: closeBrace.value
122+
},
109123
fix: fixer => fixer.insertTextBefore(closeBrace, ' ')
110124
})
111125
}
@@ -117,15 +131,21 @@ module.exports = {
117131
start: openBrace.loc.end,
118132
end: openBrace.loc.start
119133
},
120-
message: `Expected no space after '{', but found.`,
134+
message: `Expected no space after '{{ displayValue }}', but found.`,
135+
data: {
136+
displayValue: openBrace.value
137+
},
121138
fix: fixer => fixer.removeRange([openBrace.range[1], nextToken.range[0]])
122139
})
123140
}
124141

125142
if (closeBrace.range[0] !== previousToken.range[1]) {
126143
context.report({
127144
node: closeBrace,
128-
message: `Expected no space before '}', but found.`,
145+
message: `Expected no space before '{{ displayValue }}', but found.`,
146+
data: {
147+
displayValue: closeBrace.value
148+
},
129149
fix: fixer => fixer.removeRange([previousToken.range[1], closeBrace.range[0]])
130150
})
131151
}
@@ -141,27 +161,39 @@ module.exports = {
141161
start: firstToken.loc.end,
142162
end: firstToken.loc.start
143163
},
144-
message: `Expected no space before '{', but found.`,
164+
message: `Expected no space before '{{ displayValue }}', but found.`,
165+
data: {
166+
displayValue: openBrace.value
167+
},
145168
fix: fixer => fixer.removeRange([firstToken.range[1], openBrace.range[0]])
146169
})
147170
} else if (firstToken.range[1] === openBrace.range[0] && firstToken.value !== '"') {
148171
context.report({
149172
node: openBrace,
150-
message: `Expected 1 space before '{', but not found.`,
173+
message: `Expected 1 space before '{{ displayValue }}', but not found.`,
174+
data: {
175+
displayValue: openBrace.value
176+
},
151177
fix: fixer => fixer.insertTextAfter(firstToken, ' ')
152178
})
153179
}
154180

155181
if (lastToken.range[0] !== closeBrace.range[1] && lastToken.value === '"') {
156182
context.report({
157183
node: lastToken,
158-
message: `Expected no space after '}', but found.`,
184+
message: `Expected no space after '{{ displayValue }}', but found.`,
185+
data: {
186+
displayValue: closeBrace.value
187+
},
159188
fix: fixer => fixer.removeRange([closeBrace.range[1], lastToken.range[0]])
160189
})
161190
} else if (lastToken.range[0] === closeBrace.range[1] && lastToken.value !== '"') {
162191
context.report({
163192
node: lastToken,
164-
message: `Expected 1 space after '}', but not found.`,
193+
message: `Expected 1 space after '{{ displayValue }}', but not found.`,
194+
data: {
195+
displayValue: closeBrace.value
196+
},
165197
fix: fixer => fixer.insertTextBefore(lastToken, ' ')
166198
})
167199
}

‎tests/lib/rules/directive-interpolation-spacing.js

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ ruleTester.run('directive-interpolation-spacing', rule, {
2525
valid: [
2626
`<template><div :class="test"></div></template>`,
2727
`<template><div :class="test && { a: true }"></div></template>`,
28+
'<template><div :class="[ 1, 2, 3 ]"></div></template>',
29+
'<template><div :class="[ 1, 2, { test: 1 } ]"></div></template>',
30+
'<template><div :class="[ 1, 2, { test: [ 1, 2, 3 ] } ]"></div></template>',
2831
'<template><div :class="{ a: 123 }"></div></template>',
2932
'<template><div :class="{ [a]: 123 }"></div></template>',
3033
'<template><div :class="{ 1: 123 }"></div></template>',
@@ -37,6 +40,10 @@ ruleTester.run('directive-interpolation-spacing', rule, {
3740
{
3841
code: `<template><div :class="{a: 'a', b: 'b'}"></div></template>`,
3942
options: ['never']
43+
},
44+
{
45+
code: `<template><div :class="[1, 2, 3]"></div></template>`,
46+
options: ['never']
4047
}
4148
],
4249

@@ -111,7 +118,26 @@ ruleTester.run('directive-interpolation-spacing', rule, {
111118
`Expected 1 space after '}', but not found.`
112119
]
113120
},
114-
121+
{
122+
code: '<template><div :class=" [ 1, 2, 3 ] "></div></template>',
123+
output: '<template><div :class="[ 1, 2, 3 ]"></div></template>',
124+
options: ['always'],
125+
errors: [
126+
`Expected no space before '[', but found.`,
127+
`Expected no space after ']', but found.`
128+
]
129+
},
130+
{
131+
code: '<template><div :class="[1,2,3]"></div></template>',
132+
output: '<template><div :class="[ 1, 2, 3 ]"></div></template>',
133+
options: ['always'],
134+
errors: [
135+
`Expected 1 space after '[', but not found.`,
136+
`Expected 1 space after ',', but not found.`,
137+
`Expected 1 space after ',', but not found.`,
138+
`Expected 1 space before ']', but not found.`
139+
]
140+
},
115141
/**
116142
* Options: never
117143
*/
@@ -144,6 +170,15 @@ ruleTester.run('directive-interpolation-spacing', rule, {
144170
`Expected no space before '}', but found.`,
145171
`Expected 1 space after '}', but not found.`
146172
]
173+
},
174+
{
175+
code: '<template><div :class="[ 1, 2, 3 ]"></div></template>',
176+
output: '<template><div :class="[1, 2, 3]"></div></template>',
177+
options: ['never'],
178+
errors: [
179+
`Expected no space after '[', but found.`,
180+
`Expected no space before ']', but found.`
181+
]
147182
}
148183
]
149184
})

0 commit comments

Comments
 (0)