Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e6bff23

Browse files
edison1105edison1105
authored
fix(compiler-vapor): merge component v-model onUpdate handlers (#14229)
1 parent 3a37b53 commit e6bff23

6 files changed

Lines changed: 281 additions & 60 deletions

File tree

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,10 @@ exports[`compiler: element transform > component > props merging: event handlers
9090
9191
export function render(_ctx) {
9292
const _component_Foo = _resolveComponent("Foo")
93-
const n0 = _createComponentWithFallback(_component_Foo, { onClick: () => [_ctx.a, _ctx.b] }, null, true)
93+
const n0 = _createComponentWithFallback(_component_Foo, { onClick: () => [
94+
_ctx.a,
95+
_ctx.b
96+
] }, null, true)
9497
return n0
9598
}"
9699
`;
@@ -102,7 +105,10 @@ export function render(_ctx) {
102105
const _component_Foo = _resolveComponent("Foo")
103106
const _on_click = e => _ctx.a(e)
104107
const _on_click1 = e => _ctx.b(e)
105-
const n0 = _createComponentWithFallback(_component_Foo, { onClick: () => [_on_click, _on_click1] }, null, true)
108+
const n0 = _createComponentWithFallback(_component_Foo, { onClick: () => [
109+
_on_click,
110+
_on_click1
111+
] }, null, true)
106112
return n0
107113
}"
108114
`;

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`compiler: vModel transform > component > component v-model should merge with explicit @update:modelValue 1`] = `
4+
"
5+
const _component_Comp = _resolveComponent("Comp")
6+
const n0 = _createComponentWithFallback(_component_Comp, {
7+
modelValue: () => (counter.value),
8+
"onUpdate:modelValue": () => [
9+
_value => (counter.value = _value),
10+
onUpdate
11+
]
12+
}, null, true)
13+
return n0
14+
"
15+
`;
16+
317
exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = `
418
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
519
620
export function render(_ctx) {
721
const _component_Comp = _resolveComponent("Comp")
8-
const n0 = _createComponentWithFallback(_component_Comp, { modelValue: () => (_ctx.foo),
9-
"onUpdate:modelValue": () => _value => (_ctx.foo = _value),
10-
modelModifiers: () => ({ trim: true, "bar-baz": true }) }, null, true)
22+
const n0 = _createComponentWithFallback(_component_Comp, {
23+
modelValue: () => (_ctx.foo),
24+
"onUpdate:modelValue": () => _value => (_ctx.foo = _value),
25+
modelModifiers: () => ({ trim: true, "bar-baz": true })
26+
}, null, true)
1127
return n0
1228
}"
1329
`;
@@ -17,8 +33,10 @@ exports[`compiler: vModel transform > component > v-model for component should w
1733
1834
export function render(_ctx) {
1935
const _component_Comp = _resolveComponent("Comp")
20-
const n0 = _createComponentWithFallback(_component_Comp, { modelValue: () => (_ctx.foo),
21-
"onUpdate:modelValue": () => _value => (_ctx.foo = _value) }, null, true)
36+
const n0 = _createComponentWithFallback(_component_Comp, {
37+
modelValue: () => (_ctx.foo),
38+
"onUpdate:modelValue": () => _value => (_ctx.foo = _value)
39+
}, null, true)
2240
return n0
2341
}"
2442
`;
@@ -45,8 +63,10 @@ exports[`compiler: vModel transform > component > v-model with arguments for com
4563
4664
export function render(_ctx) {
4765
const _component_Comp = _resolveComponent("Comp")
48-
const n0 = _createComponentWithFallback(_component_Comp, { bar: () => (_ctx.foo),
49-
"onUpdate:bar": () => _value => (_ctx.foo = _value) }, null, true)
66+
const n0 = _createComponentWithFallback(_component_Comp, {
67+
bar: () => (_ctx.foo),
68+
"onUpdate:bar": () => _value => (_ctx.foo = _value)
69+
}, null, true)
5070
return n0
5171
}"
5272
`;
@@ -57,12 +77,16 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
5777
export function render(_ctx) {
5878
const _component_Comp = _resolveComponent("Comp")
5979
const n0 = _createComponentWithFallback(_component_Comp, { $: [
60-
() => ({ [_ctx.foo]: _ctx.foo,
61-
["onUpdate:" + _ctx.foo]: () => _value => (_ctx.foo = _value),
62-
[_ctx.foo + "Modifiers"]: () => ({ trim: true }) }),
63-
() => ({ [_ctx.bar]: _ctx.bar,
64-
["onUpdate:" + _ctx.bar]: () => _value => (_ctx.bar = _value),
65-
[_ctx.bar + "Modifiers"]: () => ({ number: true }) })
80+
() => ({
81+
[_ctx.foo]: _ctx.foo,
82+
["onUpdate:" + _ctx.foo]: () => _value => (_ctx.foo = _value),
83+
[_ctx.foo + "Modifiers"]: () => ({ trim: true })
84+
}),
85+
() => ({
86+
[_ctx.bar]: _ctx.bar,
87+
["onUpdate:" + _ctx.bar]: () => _value => (_ctx.bar = _value),
88+
[_ctx.bar + "Modifiers"]: () => ({ number: true })
89+
})
6690
] }, null, true)
6791
return n0
6892
}"
@@ -74,8 +98,10 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
7498
export function render(_ctx) {
7599
const _component_Comp = _resolveComponent("Comp")
76100
const n0 = _createComponentWithFallback(_component_Comp, { $: [
77-
() => ({ [_ctx.arg]: _ctx.foo,
78-
["onUpdate:" + _ctx.arg]: () => _value => (_ctx.foo = _value) })
101+
() => ({
102+
[_ctx.arg]: _ctx.foo,
103+
["onUpdate:" + _ctx.arg]: () => _value => (_ctx.foo = _value)
104+
})
79105
] }, null, true)
80106
return n0
81107
}"
@@ -86,9 +112,11 @@ exports[`compiler: vModel transform > component > v-model:model with arguments f
86112
87113
export function render(_ctx) {
88114
const _component_Comp = _resolveComponent("Comp")
89-
const n0 = _createComponentWithFallback(_component_Comp, { model: () => (_ctx.foo),
90-
"onUpdate:model": () => _value => (_ctx.foo = _value),
91-
modelModifiers$: () => ({ trim: true }) }, null, true)
115+
const n0 = _createComponentWithFallback(_component_Comp, {
116+
model: () => (_ctx.foo),
117+
"onUpdate:model": () => _value => (_ctx.foo = _value),
118+
modelModifiers$: () => ({ trim: true })
119+
}, null, true)
92120
return n0
93121
}"
94122
`;

‎packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,10 @@ describe('compiler: element transform', () => {
333333
`<Foo @click.foo="a" @click.bar="b" />`,
334334
)
335335
expect(code).toMatchSnapshot()
336-
expect(code).contains('onClick: () => [_ctx.a, _ctx.b]')
336+
expect(code).contains(`onClick: () => [
337+
_ctx.a,
338+
_ctx.b
339+
]`)
337340
})
338341

339342
test('props merging: inline event handlers', () => {
@@ -343,7 +346,10 @@ describe('compiler: element transform', () => {
343346
expect(code).toMatchSnapshot()
344347
expect(code).contains('const _on_click = e => _ctx.a(e)')
345348
expect(code).contains('const _on_click1 = e => _ctx.b(e)')
346-
expect(code).contains('onClick: () => [_on_click, _on_click1]')
349+
expect(code).contains(`onClick: () => [
350+
_on_click,
351+
_on_click1
352+
]`)
347353
})
348354

349355
test('props merging: style', () => {

‎packages/compiler-vapor/__tests__/transforms/vModel.spec.ts‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import {
66
transformVModel,
77
} from '../../src'
88
import { BindingTypes, DOMErrorCodes } from '@vue/compiler-dom'
9+
import { transformVOn } from '../../src/transforms/vOn'
910

1011
const compileWithVModel = makeCompile({
1112
nodeTransforms: [transformElement, transformChildren],
1213
directiveTransforms: {
1314
model: transformVModel,
15+
on: transformVOn,
1416
},
1517
})
1618

@@ -248,8 +250,10 @@ describe('compiler: vModel transform', () => {
248250
const { code, ir } = compileWithVModel('<Comp v-model:[arg]="foo" />')
249251
expect(code).toMatchSnapshot()
250252
expect(code).contains(
251-
`[_ctx.arg]: _ctx.foo,
252-
["onUpdate:" + _ctx.arg]: () => _value => (_ctx.foo = _value)`,
253+
`() => ({
254+
[_ctx.arg]: _ctx.foo,
255+
["onUpdate:" + _ctx.arg]: () => _value => (_ctx.foo = _value)
256+
})`,
253257
)
254258
expect(ir.block.dynamic.children[0].operation).toMatchObject({
255259
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@@ -345,7 +349,13 @@ describe('compiler: vModel transform', () => {
345349
'<Comp v-model:[foo].trim="foo" v-model:[bar].number="bar" />',
346350
)
347351
expect(code).toMatchSnapshot()
352+
expect(code).contain(
353+
'["onUpdate:" + _ctx.foo]: () => _value => (_ctx.foo = _value)',
354+
)
348355
expect(code).contain(`[_ctx.foo + "Modifiers"]: () => ({ trim: true })`)
356+
expect(code).contain(
357+
'["onUpdate:" + _ctx.bar]: () => _value => (_ctx.bar = _value)',
358+
)
349359
expect(code).contain(`[_ctx.bar + "Modifiers"]: () => ({ number: true })`)
350360
expect(ir.block.dynamic.children[0].operation).toMatchObject({
351361
type: IRNodeTypes.CREATE_COMPONENT_NODE,
@@ -366,5 +376,26 @@ describe('compiler: vModel transform', () => {
366376
],
367377
})
368378
})
379+
380+
test('component v-model should merge with explicit @update:modelValue', () => {
381+
const { code } = compileWithVModel(
382+
'<Comp v-model="counter" @update:modelValue="onUpdate" />',
383+
{
384+
inline: true,
385+
bindingMetadata: {
386+
counter: BindingTypes.SETUP_REF,
387+
onUpdate: BindingTypes.SETUP_CONST,
388+
},
389+
},
390+
)
391+
392+
expect(code).toMatchSnapshot()
393+
expect(code).toContain(
394+
`"onUpdate:modelValue": () => [
395+
_value => (counter.value = _value),
396+
onUpdate
397+
]`,
398+
)
399+
})
369400
})
370401
})

0 commit comments

Comments
 (0)