Skip to content

Commit 979aba8

Browse files
nickmessingnickmessing
authored
Merge pull request #8 from nickmessing/chore/change-modifier-syntax
chore: change modifier syntax
2 parents cf880cb + 8accdae commit 979aba8

File tree

3 files changed

+54
-50
lines changed

3 files changed

+54
-50
lines changed

‎packages/babel-sugar-v-model/src/index.js

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const cachedCamelCase = (() => {
1414
}
1515
})()
1616
const equalCamel = (string, match) => string === match || string === cachedCamelCase(match)
17+
const startsWithCamel = (string, match) => string.startsWith(match) || string.startsWith(cachedCamelCase(match))
1718

1819
export default function(babel) {
1920
const { types: t } = babel
@@ -29,13 +30,11 @@ export default function(babel) {
2930
return
3031
}
3132

32-
const { isVModel, modifiers, valuePath } = parsed
33+
const { modifiers, valuePath } = parsed
3334

34-
if (isVModel) {
35-
const parent = path.parentPath
36-
transformModel(t, parent, valuePath, modifiers)
37-
path.remove()
38-
}
35+
const parent = path.parentPath
36+
transformModel(t, parent, valuePath, modifiers)
37+
path.remove()
3938
},
4039
})
4140
},
@@ -48,26 +47,23 @@ export default function(babel) {
4847
*
4948
* @param t
5049
* @param path JSXAttribute
51-
* @returns Object<{ isVModel: boolean, modifiers: Set<string>, valuePath: Path<Expression>}>
50+
* @returns null | Object<{ modifiers: Set<string>, valuePath: Path<Expression>}>
5251
*/
5352
const parseVModel = (t, path) => {
54-
if (
55-
(t.isJSXNamespacedName(path.get('name')) && !equalCamel(path.get('name.namespace.name').node, 'v-model')) ||
56-
!equalCamel(path.get('name.name').node, 'v-model')
57-
) {
53+
if (t.isJSXNamespacedName(path.get('name')) || !startsWithCamel(path.get('name.name').node, 'v-model')) {
5854
return null
5955
}
60-
let modifiers = null
56+
6157
if (!t.isJSXExpressionContainer(path.get('value'))) {
6258
throw new Error('You have to use JSX Expression inside your v-model')
63-
} else if (t.isJSXIdentifier(path.get('name'))) {
64-
modifiers = new Set()
65-
} else {
66-
modifiers = new Set(path.get('name.name.name').node.split('-'))
6759
}
60+
61+
const modifiers = path.get('name.name').node.split('_')
62+
modifiers.shift()
63+
6864
return {
69-
modifiers: modifiers,
70-
valuePath: isVModel ? path.get('value.expression') : null,
65+
modifiers: new Set(modifiers),
66+
valuePath: path.get('value.expression'),
7167
}
7268
}
7369

‎packages/babel-sugar-v-model/test/functional.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -203,9 +203,9 @@ test('input[type="checkbox"] .number modifier', async t => {
203203
render(h) {
204204
return (
205205
<div>
206-
<input type="checkbox" vModel:number={this.test} value="1" />
206+
<input type="checkbox" vModel_number={this.test} value="1" />
207207
<input type="checkbox" vModel={this.test} value="2" />
208-
<input type="checkbox" vModel:number={this.check} />
208+
<input type="checkbox" vModel_number={this.check} />
209209
</div>
210210
)
211211
},
@@ -450,7 +450,7 @@ test('component modifier: .number', async t => {
450450
render(h) {
451451
return (
452452
<div>
453-
<MyInput ref="input" vModel:number={this.text} />
453+
<MyInput ref="input" vModel_number={this.text} />
454454
</div>
455455
)
456456
},
@@ -473,7 +473,7 @@ test('component modifier: .trim', async t => {
473473
render(h) {
474474
return (
475475
<div>
476-
<MyInput ref="input" vModel:trim={this.text} />
476+
<MyInput ref="input" vModel_trim={this.text} />
477477
</div>
478478
)
479479
},
@@ -620,7 +620,7 @@ test('input[type="radio"] .number modifier', async t => {
620620
return (
621621
<div>
622622
<input type="radio" value="1" vModel={this.test} name="test" />
623-
<input type="radio" value="2" vModel:number={this.test} name="test" />
623+
<input type="radio" value="2" vModel_number={this.test} name="test" />
624624
</div>
625625
)
626626
},
@@ -1083,7 +1083,7 @@ test('select .number modifier', async t => {
10831083
}),
10841084
render(h) {
10851085
return (
1086-
<select vModel:number={this.test}>
1086+
<select vModel_number={this.test}>
10871087
<option value="1">a</option>
10881088
<option value={2}>b</option>
10891089
<option value={3}>c</option>
@@ -1103,7 +1103,7 @@ test('select should respect different primitive type value', async t => {
11031103
}),
11041104
render(h) {
11051105
return (
1106-
<select vModel:number={this.test}>
1106+
<select vModel_number={this.test}>
11071107
<option value="">a</option>
11081108
<option value="0">b</option>
11091109
<option value="1">c</option>
@@ -1274,7 +1274,7 @@ test('input[type="text"] .lazy modifier', async t => {
12741274
test: 'b',
12751275
}),
12761276
render(h) {
1277-
return <input vModel:lazy={this.test} />
1277+
return <input vModel_lazy={this.test} />
12781278
},
12791279
})
12801280
t.is(wrapper.element.value, 'b')
@@ -1293,7 +1293,7 @@ test('input[type="text"] .number modifier', async t => {
12931293
test: 1,
12941294
}),
12951295
render(h) {
1296-
return <input vModel:number={this.test} />
1296+
return <input vModel_number={this.test} />
12971297
},
12981298
})
12991299
t.is(wrapper.vm.test, 1)
@@ -1312,7 +1312,7 @@ test('input[type="text"] .trim modifier', async t => {
13121312
test: 'hi',
13131313
}),
13141314
render(h) {
1315-
return <input vModel:trim={this.test} />
1315+
return <input vModel_trim={this.test} />
13161316
},
13171317
})
13181318
t.is(wrapper.vm.test, 'hi')
@@ -1330,7 +1330,7 @@ test('input[type="text"] .number focus and typing', async t => {
13301330
render(h) {
13311331
return (
13321332
<div>
1333-
<input ref="input" vModel:number={this.test} />
1333+
<input ref="input" vModel_number={this.test} />
13341334
{this.update}
13351335
<input ref="blur" />
13361336
</div>
@@ -1356,7 +1356,7 @@ test('input[type="text"] .trim focus and typing', async t => {
13561356
render(h) {
13571357
return (
13581358
<div>
1359-
<input ref="input" vModel:trim={this.test} type="text" />
1359+
<input ref="input" vModel_trim={this.test} type="text" />
13601360
{this.update}
13611361
<input ref="blur" />
13621362
</div>
@@ -1405,7 +1405,7 @@ test('input[type="text"] multiple inputs', async t => {
14051405
<div>
14061406
{inputGroup.data.map((item, index) => (
14071407
<span>
1408-
<input name={item} type="text" vModel:number={this.selections[idx][index]} id={idx + '-' + index} />
1408+
<input name={item} type="text" vModel_number={this.selections[idx][index]} id={idx + '-' + index} />
14091409
<label>{item}</label>
14101410
</span>
14111411
))}

‎packages/babel-sugar-v-model/test/snapshot.js

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,6 @@ const tests = [
2424
from: `const A = <A x="y" a:b={c} />`,
2525
to: `const A = <A x="y" a:b={c} />;`,
2626
},
27-
{
28-
name: 'Ignores static vModel arguments',
29-
from: `const A = <A vModel="y" />`,
30-
to: `const A = <A vModel="y" />;`,
31-
},
3227
{
3328
name: 'Generic component vModel',
3429
from: `const A = <MyComponent vModel={a.b} />`,
@@ -50,8 +45,8 @@ const tests = [
5045
}} />;`,
5146
},
5247
{
53-
name: 'Component vModel:number',
54-
from: `const A = <MyComponent vModel:number={a.b} />`,
48+
name: 'Component vModel_number',
49+
from: `const A = <MyComponent vModel_number={a.b} />`,
5550
to: `const A = <MyComponent model={{
5651
value: a.b,
5752
callback: $$v => {
@@ -60,8 +55,8 @@ const tests = [
6055
}} />;`,
6156
},
6257
{
63-
name: 'Component vModel:trim',
64-
from: `const A = <MyComponent vModel:trim={a.b} />`,
58+
name: 'Component vModel_trim',
59+
from: `const A = <MyComponent vModel_trim={a.b} />`,
6560
to: `const A = <MyComponent model={{
6661
value: a.b,
6762
callback: $$v => {
@@ -70,8 +65,8 @@ const tests = [
7065
}} />;`,
7166
},
7267
{
73-
name: 'Component vModel:number-trim',
74-
from: `const A = <MyComponent vModel:number-trim={a.b} />`,
68+
name: 'Component vModel_number_trim',
69+
from: `const A = <MyComponent vModel_number_trim={a.b} />`,
7570
to: `const A = <MyComponent model={{
7671
value: a.b,
7772
callback: $$v => {
@@ -104,8 +99,8 @@ const tests = [
10499
}} />;`,
105100
},
106101
{
107-
name: 'select vModel:number',
108-
from: `const A = <select vModel:number={a.b} />`,
102+
name: 'select vModel_number',
103+
from: `const A = <select vModel_number={a.b} />`,
109104
to: `const A = <select on-change={$event => {
110105
const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => this._n("_value" in o ? o._value : o.value));
111106
a.b = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
@@ -148,8 +143,8 @@ const tests = [
148143
}} />;`,
149144
},
150145
{
151-
name: 'input[type="checkbox"] vModel:number',
152-
from: `const A = <input type="checkbox" vModel:number={a.b} />`,
146+
name: 'input[type="checkbox"] vModel_number',
147+
from: `const A = <input type="checkbox" vModel_number={a.b} />`,
153148
to: `const A = <input type="checkbox" domProps-checked={Array.isArray(a.b) ? this._i(a.b, null) > -1 : a.b} on-change={$event => {
154149
const $$a = a.b,
155150
$$el = $event.target,
@@ -219,8 +214,8 @@ const tests = [
219214
}} />;`,
220215
},
221216
{
222-
name: 'input[type="radio"] vModel:number',
223-
from: `const A = <input type="radio" vModel:number={a.b} value="10" />`,
217+
name: 'input[type="radio"] vModel_number',
218+
from: `const A = <input type="radio" vModel_number={a.b} value="10" />`,
224219
to: `const A = <input type="radio" domProps-checked={this._q(a.b, this._n("10"))} on-change={$event => {
225220
a.b = this._n("10");
226221
}} {...{
@@ -262,8 +257,8 @@ const tests = [
262257
}} />;`,
263258
},
264259
{
265-
name: 'input[type="text"] vModel:lazy-trim-number',
266-
from: `const A = <input type="text" vModel:lazy-trim-number={a.b} />`,
260+
name: 'input[type="text"] vModel_lazy_trim_number',
261+
from: `const A = <input type="text" vModel_lazy_trim_number={a.b} />`,
267262
to: `const A = <input type="text" domProps-value={a.b} on-change={$event => {
268263
a.b = this._n($event.target.value.trim());
269264
}} on-blur={$event => {
@@ -320,3 +315,16 @@ test('div[vModel] throws an error', t =>
320315
resolve()
321316
})
322317
}))
318+
319+
test('static vModel throws an error', t =>
320+
new Promise(resolve => {
321+
transpile(`render(h => <div vModel="test" />)`)
322+
.then(() => {
323+
t.fail()
324+
resolve()
325+
})
326+
.catch(e => {
327+
t.is(e.message, 'You have to use JSX Expression inside your v-model')
328+
resolve()
329+
})
330+
}))

0 commit comments

Comments
 (0)