Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Commit 8dea04b

Browse files
LittleSoundsxzz
LittleSound
and
sxzz
authored
feat(compiler-vapor): component with dynamic arguments (#192)
Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
1 parent 6f7d219 commit 8dea04b

File tree

9 files changed

+360
-166
lines changed

9 files changed

+360
-166
lines changed

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

Lines changed: 55 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ exports[`compiler: element transform > component > should wrap as function if v-
100100
101101
export function render(_ctx) {
102102
const _component_Foo = _resolveComponent("Foo")
103-
const n0 = _createComponent(_component_Foo, [{
104-
onBar: () => $event => (_ctx.handleBar($event))
105-
}], true)
103+
const n0 = _createComponent(_component_Foo, [
104+
{ onBar: () => $event => (_ctx.handleBar($event)) }
105+
], true)
106106
return n0
107107
}"
108108
`;
@@ -112,10 +112,12 @@ exports[`compiler: element transform > component > static props 1`] = `
112112
113113
export function render(_ctx) {
114114
const _component_Foo = _resolveComponent("Foo")
115-
const n0 = _createComponent(_component_Foo, [{
116-
id: () => ("foo"),
117-
class: () => ("bar")
118-
}], true)
115+
const n0 = _createComponent(_component_Foo, [
116+
{
117+
id: () => ("foo"),
118+
class: () => ("bar")
119+
}
120+
], true)
119121
return n0
120122
}"
121123
`;
@@ -125,7 +127,9 @@ exports[`compiler: element transform > component > v-bind="obj" 1`] = `
125127
126128
export function render(_ctx) {
127129
const _component_Foo = _resolveComponent("Foo")
128-
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj)], true)
130+
const n0 = _createComponent(_component_Foo, [
131+
() => (_ctx.obj)
132+
], true)
129133
return n0
130134
}"
131135
`;
@@ -135,9 +139,10 @@ exports[`compiler: element transform > component > v-bind="obj" after static pro
135139
136140
export function render(_ctx) {
137141
const _component_Foo = _resolveComponent("Foo")
138-
const n0 = _createComponent(_component_Foo, [{
139-
id: () => ("foo")
140-
}, () => (_ctx.obj)], true)
142+
const n0 = _createComponent(_component_Foo, [
143+
{ id: () => ("foo") },
144+
() => (_ctx.obj)
145+
], true)
141146
return n0
142147
}"
143148
`;
@@ -147,9 +152,10 @@ exports[`compiler: element transform > component > v-bind="obj" before static pr
147152
148153
export function render(_ctx) {
149154
const _component_Foo = _resolveComponent("Foo")
150-
const n0 = _createComponent(_component_Foo, [() => (_ctx.obj), {
151-
id: () => ("foo")
152-
}], true)
155+
const n0 = _createComponent(_component_Foo, [
156+
() => (_ctx.obj),
157+
{ id: () => ("foo") }
158+
], true)
153159
return n0
154160
}"
155161
`;
@@ -159,11 +165,11 @@ exports[`compiler: element transform > component > v-bind="obj" between static p
159165
160166
export function render(_ctx) {
161167
const _component_Foo = _resolveComponent("Foo")
162-
const n0 = _createComponent(_component_Foo, [{
163-
id: () => ("foo")
164-
}, () => (_ctx.obj), {
165-
class: () => ("bar")
166-
}], true)
168+
const n0 = _createComponent(_component_Foo, [
169+
{ id: () => ("foo") },
170+
() => (_ctx.obj),
171+
{ class: () => ("bar") }
172+
], true)
167173
return n0
168174
}"
169175
`;
@@ -174,7 +180,36 @@ import { resolveComponent as _resolveComponent, createComponent as _createCompon
174180
175181
export function render(_ctx) {
176182
const _component_Foo = _resolveComponent("Foo")
177-
const n0 = _createComponent(_component_Foo, [() => (_toHandlers(_ctx.obj))], true)
183+
const n0 = _createComponent(_component_Foo, [
184+
() => (_toHandlers(_ctx.obj))
185+
], true)
186+
return n0
187+
}"
188+
`;
189+
190+
exports[`compiler: element transform > component with dynamic event arguments 1`] = `
191+
"import { toHandlerKey as _toHandlerKey } from 'vue';
192+
import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
193+
194+
export function render(_ctx) {
195+
const _component_Foo = _resolveComponent("Foo")
196+
const n0 = _createComponent(_component_Foo, [
197+
() => ({ [_toHandlerKey(_ctx.foo-_ctx.bar)]: () => _ctx.bar }),
198+
() => ({ [_toHandlerKey(_ctx.baz)]: () => _ctx.qux })
199+
], true)
200+
return n0
201+
}"
202+
`;
203+
204+
exports[`compiler: element transform > component with dynamic prop arguments 1`] = `
205+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
206+
207+
export function render(_ctx) {
208+
const _component_Foo = _resolveComponent("Foo")
209+
const n0 = _createComponent(_component_Foo, [
210+
() => ({ [_ctx.foo-_ctx.bar]: _ctx.bar }),
211+
() => ({ [_ctx.baz]: _ctx.qux })
212+
], true)
178213
return n0
179214
}"
180215
`;

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

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ exports[`compiler: vModel transform > component > v-model for component should g
55
66
export function render(_ctx) {
77
const _component_Comp = _resolveComponent("Comp")
8-
const n0 = _createComponent(_component_Comp, [{
9-
modelValue: () => (_ctx.foo),
8+
const n0 = _createComponent(_component_Comp, [
9+
{ modelValue: () => (_ctx.foo),
1010
"onUpdate:modelValue": () => $event => (_ctx.foo = $event),
11-
modelModifiers: () => ({ trim: true, "bar-baz": true })
12-
}], true)
11+
modelModifiers: () => ({ trim: true, "bar-baz": true }) }
12+
], true)
1313
return n0
1414
}"
1515
`;
@@ -19,10 +19,10 @@ exports[`compiler: vModel transform > component > v-model for component should w
1919
2020
export function render(_ctx) {
2121
const _component_Comp = _resolveComponent("Comp")
22-
const n0 = _createComponent(_component_Comp, [{
23-
modelValue: () => (_ctx.foo),
24-
"onUpdate:modelValue": () => $event => (_ctx.foo = $event)
25-
}], true)
22+
const n0 = _createComponent(_component_Comp, [
23+
{ modelValue: () => (_ctx.foo),
24+
"onUpdate:modelValue": () => $event => (_ctx.foo = $event) }
25+
], true)
2626
return n0
2727
}"
2828
`;
@@ -32,14 +32,16 @@ exports[`compiler: vModel transform > component > v-model with arguments for com
3232
3333
export function render(_ctx) {
3434
const _component_Comp = _resolveComponent("Comp")
35-
const n0 = _createComponent(_component_Comp, [{
36-
foo: () => (_ctx.foo),
37-
"onUpdate:foo": () => $event => (_ctx.foo = $event),
38-
fooModifiers: () => ({ trim: true }),
39-
bar: () => (_ctx.bar),
40-
"onUpdate:bar": () => $event => (_ctx.bar = $event),
41-
barModifiers: () => ({ number: true })
42-
}], true)
35+
const n0 = _createComponent(_component_Comp, [
36+
{
37+
foo: () => (_ctx.foo),
38+
"onUpdate:foo": () => $event => (_ctx.foo = $event),
39+
fooModifiers: () => ({ trim: true }),
40+
bar: () => (_ctx.bar),
41+
"onUpdate:bar": () => $event => (_ctx.bar = $event),
42+
barModifiers: () => ({ number: true })
43+
}
44+
], true)
4345
return n0
4446
}"
4547
`;
@@ -49,10 +51,10 @@ exports[`compiler: vModel transform > component > v-model with arguments for com
4951
5052
export function render(_ctx) {
5153
const _component_Comp = _resolveComponent("Comp")
52-
const n0 = _createComponent(_component_Comp, [{
53-
bar: () => (_ctx.foo),
54-
"onUpdate:bar": () => $event => (_ctx.foo = $event)
55-
}], true)
54+
const n0 = _createComponent(_component_Comp, [
55+
{ bar: () => (_ctx.foo),
56+
"onUpdate:bar": () => $event => (_ctx.foo = $event) }
57+
], true)
5658
return n0
5759
}"
5860
`;
@@ -62,14 +64,14 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
6264
6365
export function render(_ctx) {
6466
const _component_Comp = _resolveComponent("Comp")
65-
const n0 = _createComponent(_component_Comp, [{
66-
[_ctx.foo]: () => (_ctx.foo),
67+
const n0 = _createComponent(_component_Comp, [
68+
() => ({ [_ctx.foo]: _ctx.foo,
6769
["onUpdate:" + _ctx.foo]: () => $event => (_ctx.foo = $event),
68-
[_ctx.foo + "Modifiers"]: () => ({ trim: true }),
69-
[_ctx.bar]: () => (_ctx.bar),
70+
[_ctx.foo + "Modifiers"]: () => ({ trim: true }) }),
71+
() => ({ [_ctx.bar]: _ctx.bar,
7072
["onUpdate:" + _ctx.bar]: () => $event => (_ctx.bar = $event),
71-
[_ctx.bar + "Modifiers"]: () => ({ number: true })
72-
}], true)
73+
[_ctx.bar + "Modifiers"]: () => ({ number: true }) })
74+
], true)
7375
return n0
7476
}"
7577
`;
@@ -79,10 +81,10 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments
7981
8082
export function render(_ctx) {
8183
const _component_Comp = _resolveComponent("Comp")
82-
const n0 = _createComponent(_component_Comp, [{
83-
[_ctx.arg]: () => (_ctx.foo),
84-
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)
85-
}], true)
84+
const n0 = _createComponent(_component_Comp, [
85+
() => ({ [_ctx.arg]: _ctx.foo,
86+
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event) })
87+
], true)
8688
return n0
8789
}"
8890
`;

0 commit comments

Comments
 (0)