Skip to content

Commit b51c735

Browse files
LittleSoundLittleSound
committed
feat(compiler-vapor): static v-slot
1 parent b58d6a9 commit b51c735

File tree

15 files changed

+261
-41
lines changed

15 files changed

+261
-41
lines changed

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

Lines changed: 10 additions & 9 deletions
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

Lines changed: 19 additions & 19 deletions
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

Lines changed: 6 additions & 6 deletions
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

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

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

Lines changed: 3 additions & 1 deletion
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', () => {

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {
2+
transformChildren,
3+
transformElement,
4+
transformSlotOutlet,
5+
transformText,
6+
transformVBind,
7+
transformVFor,
8+
transformVIf,
9+
transformVOn,
10+
transformVSlot,
11+
} from '../../src'
12+
import { makeCompile } from './_utils'
13+
14+
const compileWithSlots = makeCompile({
15+
nodeTransforms: [
16+
transformText,
17+
transformVIf,
18+
transformVFor,
19+
transformSlotOutlet,
20+
transformElement,
21+
transformVSlot,
22+
transformChildren,
23+
],
24+
directiveTransforms: {
25+
bind: transformVBind,
26+
on: transformVOn,
27+
},
28+
})
29+
30+
describe('compiler: transform slot', () => {
31+
test('implicit default slot', () => {
32+
const { code } = compileWithSlots(`<Comp><div/></Comp>`)
33+
expect(code).toMatchSnapshot()
34+
})
35+
36+
test('named slots w/ implicit default slot', () => {
37+
const { code } = compileWithSlots(
38+
`<Comp>
39+
<template #one>foo</template>bar<span/>
40+
</Comp>`,
41+
)
42+
expect(code).toMatchSnapshot()
43+
})
44+
45+
test('nested slots', () => {
46+
const { code } = compileWithSlots(
47+
`<Foo>
48+
<template #one><Bar><div/></Bar></template>
49+
</Foo>`,
50+
)
51+
expect(code).toMatchSnapshot()
52+
})
53+
})

‎packages/compiler-vapor/src/compile.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { transformVFor } from './transforms/vFor'
2929
import { transformComment } from './transforms/transformComment'
3030
import { transformSlotOutlet } from './transforms/transformSlotOutlet'
3131
import type { HackOptions } from './ir'
32+
import { transformVSlot } from './transforms/vSlot'
3233

3334
export { wrapTemplate } from './transforms/utils'
3435

@@ -108,6 +109,7 @@ export function getBaseTransformPreset(
108109
transformTemplateRef,
109110
transformText,
110111
transformElement,
112+
transformVSlot,
111113
transformComment,
112114
transformChildren,
113115
],

0 commit comments

Comments
 (0)