Skip to content

Commit 0c33ace

Browse files
LittleSoundDoctor-wusxzz
authored
feat(compiler-vapor): implement basic usage of v-slot (#203)
Co-authored-by: Doctorwu <doctorwu@moego.pet> Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
1 parent 1c54cae commit 0c33ace

15 files changed

+485
-43
lines changed

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

+10-9
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,16 @@ const t0 = _template("<div></div>")
2929
export function render(_ctx) {
3030
const _component_Bar = _resolveComponent("Bar")
3131
const _component_Comp = _resolveComponent("Comp")
32-
const n0 = _createIf(() => (true), () => {
33-
const n3 = t0()
34-
const n2 = _createComponent(_component_Bar)
35-
_withDirectives(n2, [[_resolveDirective("vHello"), void 0, void 0, { world: true }]])
36-
_insert(n2, n3)
37-
return n3
38-
})
39-
_insert(n0, n4)
40-
const n4 = _createComponent(_component_Comp, null, true)
32+
const n4 = _createComponent(_component_Comp, null, { default: () => {
33+
const n0 = _createIf(() => (true), () => {
34+
const n3 = t0()
35+
const n2 = _createComponent(_component_Bar)
36+
_withDirectives(n2, [[_resolveDirective("vHello"), void 0, void 0, { world: true }]])
37+
_insert(n2, n3)
38+
return n3
39+
})
40+
return n0
41+
} }, null, true)
4142
_withDirectives(n4, [[_resolveDirective("vTest")]])
4243
return n4
4344
}"

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

+19-19
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`compiler: element transform > component > do not resolve component from
55
66
export function render(_ctx) {
77
const _component_Example = _resolveComponent("Example")
8-
const n0 = _createComponent(_component_Example, null, true)
8+
const n0 = _createComponent(_component_Example, null, null, null, true)
99
return n0
1010
}"
1111
`;
@@ -25,7 +25,7 @@ exports[`compiler: element transform > component > generate single root componen
2525
"import { createComponent as _createComponent } from 'vue/vapor';
2626
2727
export function render(_ctx) {
28-
const n0 = _createComponent(_ctx.Comp, null, true)
28+
const n0 = _createComponent(_ctx.Comp, null, null, null, true)
2929
return n0
3030
}"
3131
`;
@@ -35,21 +35,21 @@ exports[`compiler: element transform > component > import + resolve component 1`
3535
3636
export function render(_ctx) {
3737
const _component_Foo = _resolveComponent("Foo")
38-
const n0 = _createComponent(_component_Foo, null, true)
38+
const n0 = _createComponent(_component_Foo, null, null, null, true)
3939
return n0
4040
}"
4141
`;
4242

4343
exports[`compiler: element transform > component > resolve component from setup bindings (inline const) 1`] = `
4444
"(() => {
45-
const n0 = _createComponent(Example, null, true)
45+
const n0 = _createComponent(Example, null, null, null, true)
4646
return n0
4747
})()"
4848
`;
4949

5050
exports[`compiler: element transform > component > resolve component from setup bindings (inline) 1`] = `
5151
"(() => {
52-
const n0 = _createComponent(_unref(Example), null, true)
52+
const n0 = _createComponent(_unref(Example), null, null, null, true)
5353
return n0
5454
})()"
5555
`;
@@ -58,14 +58,14 @@ exports[`compiler: element transform > component > resolve component from setup
5858
"import { createComponent as _createComponent } from 'vue/vapor';
5959
6060
export function render(_ctx) {
61-
const n0 = _createComponent(_ctx.Example, null, true)
61+
const n0 = _createComponent(_ctx.Example, null, null, null, true)
6262
return n0
6363
}"
6464
`;
6565

6666
exports[`compiler: element transform > component > resolve namespaced component from props bindings (inline) 1`] = `
6767
"(() => {
68-
const n0 = _createComponent(Foo.Example, null, true)
68+
const n0 = _createComponent(Foo.Example, null, null, null, true)
6969
return n0
7070
})()"
7171
`;
@@ -74,14 +74,14 @@ exports[`compiler: element transform > component > resolve namespaced component
7474
"import { createComponent as _createComponent } from 'vue/vapor';
7575
7676
export function render(_ctx) {
77-
const n0 = _createComponent(_ctx.Foo.Example, null, true)
77+
const n0 = _createComponent(_ctx.Foo.Example, null, null, null, true)
7878
return n0
7979
}"
8080
`;
8181

8282
exports[`compiler: element transform > component > resolve namespaced component from setup bindings (inline const) 1`] = `
8383
"(() => {
84-
const n0 = _createComponent(Foo.Example, null, true)
84+
const n0 = _createComponent(Foo.Example, null, null, null, true)
8585
return n0
8686
})()"
8787
`;
@@ -90,7 +90,7 @@ exports[`compiler: element transform > component > resolve namespaced component
9090
"import { createComponent as _createComponent } from 'vue/vapor';
9191
9292
export function render(_ctx) {
93-
const n0 = _createComponent(_ctx.Foo.Example, null, true)
93+
const n0 = _createComponent(_ctx.Foo.Example, null, null, null, true)
9494
return n0
9595
}"
9696
`;
@@ -102,7 +102,7 @@ export function render(_ctx) {
102102
const _component_Foo = _resolveComponent("Foo")
103103
const n0 = _createComponent(_component_Foo, [
104104
{ onBar: () => $event => (_ctx.handleBar($event)) }
105-
], true)
105+
], null, null, true)
106106
return n0
107107
}"
108108
`;
@@ -117,7 +117,7 @@ export function render(_ctx) {
117117
id: () => ("foo"),
118118
class: () => ("bar")
119119
}
120-
], true)
120+
], null, null, true)
121121
return n0
122122
}"
123123
`;
@@ -129,7 +129,7 @@ export function render(_ctx) {
129129
const _component_Foo = _resolveComponent("Foo")
130130
const n0 = _createComponent(_component_Foo, [
131131
() => (_ctx.obj)
132-
], true)
132+
], null, null, true)
133133
return n0
134134
}"
135135
`;
@@ -142,7 +142,7 @@ export function render(_ctx) {
142142
const n0 = _createComponent(_component_Foo, [
143143
{ id: () => ("foo") },
144144
() => (_ctx.obj)
145-
], true)
145+
], null, null, true)
146146
return n0
147147
}"
148148
`;
@@ -155,7 +155,7 @@ export function render(_ctx) {
155155
const n0 = _createComponent(_component_Foo, [
156156
() => (_ctx.obj),
157157
{ id: () => ("foo") }
158-
], true)
158+
], null, null, true)
159159
return n0
160160
}"
161161
`;
@@ -169,7 +169,7 @@ export function render(_ctx) {
169169
{ id: () => ("foo") },
170170
() => (_ctx.obj),
171171
{ class: () => ("bar") }
172-
], true)
172+
], null, null, true)
173173
return n0
174174
}"
175175
`;
@@ -181,7 +181,7 @@ export function render(_ctx) {
181181
const _component_Foo = _resolveComponent("Foo")
182182
const n0 = _createComponent(_component_Foo, [
183183
() => (_toHandlers(_ctx.obj))
184-
], true)
184+
], null, null, true)
185185
return n0
186186
}"
187187
`;
@@ -195,7 +195,7 @@ export function render(_ctx) {
195195
const n0 = _createComponent(_component_Foo, [
196196
() => ({ [_toHandlerKey(_ctx.foo-_ctx.bar)]: () => _ctx.bar }),
197197
() => ({ [_toHandlerKey(_ctx.baz)]: () => _ctx.qux })
198-
], true)
198+
], null, null, true)
199199
return n0
200200
}"
201201
`;
@@ -208,7 +208,7 @@ export function render(_ctx) {
208208
const n0 = _createComponent(_component_Foo, [
209209
() => ({ [_ctx.foo-_ctx.bar]: _ctx.bar }),
210210
() => ({ [_ctx.baz]: _ctx.qux })
211-
], true)
211+
], null, null, true)
212212
return n0
213213
}"
214214
`;

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function render(_ctx) {
99
{ modelValue: () => (_ctx.foo),
1010
"onUpdate:modelValue": () => $event => (_ctx.foo = $event),
1111
modelModifiers: () => ({ trim: true, "bar-baz": true }) }
12-
], true)
12+
], null, null, true)
1313
return n0
1414
}"
1515
`;
@@ -22,7 +22,7 @@ export function render(_ctx) {
2222
const n0 = _createComponent(_component_Comp, [
2323
{ modelValue: () => (_ctx.foo),
2424
"onUpdate:modelValue": () => $event => (_ctx.foo = $event) }
25-
], true)
25+
], null, null, true)
2626
return n0
2727
}"
2828
`;
@@ -41,7 +41,7 @@ export function render(_ctx) {
4141
"onUpdate:bar": () => $event => (_ctx.bar = $event),
4242
barModifiers: () => ({ number: true })
4343
}
44-
], true)
44+
], null, null, true)
4545
return n0
4646
}"
4747
`;
@@ -54,7 +54,7 @@ export function render(_ctx) {
5454
const n0 = _createComponent(_component_Comp, [
5555
{ bar: () => (_ctx.foo),
5656
"onUpdate:bar": () => $event => (_ctx.foo = $event) }
57-
], true)
57+
], null, null, true)
5858
return n0
5959
}"
6060
`;
@@ -71,7 +71,7 @@ export function render(_ctx) {
7171
() => ({ [_ctx.bar]: _ctx.bar,
7272
["onUpdate:" + _ctx.bar]: () => $event => (_ctx.bar = $event),
7373
[_ctx.bar + "Modifiers"]: () => ({ number: true }) })
74-
], true)
74+
], null, null, true)
7575
return n0
7676
}"
7777
`;
@@ -84,7 +84,7 @@ export function render(_ctx) {
8484
const n0 = _createComponent(_component_Comp, [
8585
() => ({ [_ctx.arg]: _ctx.foo,
8686
["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event) })
87-
], true)
87+
], null, null, true)
8888
return n0
8989
}"
9090
`;

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

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`compiler: transform slot > dynamic slots name 1`] = `
4+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
5+
const t0 = _template("foo")
6+
7+
export function render(_ctx) {
8+
const _component_Comp = _resolveComponent("Comp")
9+
const n2 = _createComponent(_component_Comp, null, null, () => [{
10+
name: _ctx.name,
11+
fn: () => {
12+
const n0 = t0()
13+
return n0
14+
}
15+
}], true)
16+
return n2
17+
}"
18+
`;
19+
20+
exports[`compiler: transform slot > implicit default slot 1`] = `
21+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
22+
const t0 = _template("<div></div>")
23+
24+
export function render(_ctx) {
25+
const _component_Comp = _resolveComponent("Comp")
26+
const n1 = _createComponent(_component_Comp, null, { default: () => {
27+
const n0 = t0()
28+
return n0
29+
} }, null, true)
30+
return n1
31+
}"
32+
`;
33+
34+
exports[`compiler: transform slot > named slots w/ implicit default slot 1`] = `
35+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
36+
const t0 = _template("foo")
37+
const t1 = _template("bar")
38+
const t2 = _template("<span></span>")
39+
40+
export function render(_ctx) {
41+
const _component_Comp = _resolveComponent("Comp")
42+
const n4 = _createComponent(_component_Comp, null, {
43+
one: () => {
44+
const n0 = t0()
45+
return n0
46+
},
47+
default: () => {
48+
const n2 = t1()
49+
const n3 = t2()
50+
return [n2, n3]
51+
}
52+
}, null, true)
53+
return n4
54+
}"
55+
`;
56+
57+
exports[`compiler: transform slot > nested slots 1`] = `
58+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
59+
const t0 = _template("<div></div>")
60+
61+
export function render(_ctx) {
62+
const _component_Bar = _resolveComponent("Bar")
63+
const _component_Foo = _resolveComponent("Foo")
64+
const n3 = _createComponent(_component_Foo, null, { one: () => {
65+
const n1 = _createComponent(_component_Bar, null, { default: () => {
66+
const n0 = t0()
67+
return n0
68+
} })
69+
return n1
70+
} }, null, true)
71+
return n3
72+
}"
73+
`;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,9 @@ describe('compiler: element transform', () => {
182182
bindingMetadata: { Comp: BindingTypes.SETUP_CONST },
183183
})
184184
expect(code).toMatchSnapshot()
185-
expect(code).contains('_createComponent(_ctx.Comp, null, true)')
185+
expect(code).contains(
186+
'_createComponent(_ctx.Comp, null, null, null, true)',
187+
)
186188
})
187189

188190
test('generate multi root component', () => {

0 commit comments

Comments
 (0)