Skip to content

Commit 208dbc6

Browse files
LittleSoundsxzz
LittleSound
and
sxzz
authored
feat(compiler-vapor): v-slot props + v-slot on component (#223)
Co-authored-by: 三咲智子 Kevin Deng <[email protected]>
1 parent cef446a commit 208dbc6

File tree

9 files changed

+395
-66
lines changed

9 files changed

+395
-66
lines changed

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`compiler: v-for > array de-structured value 1`] = `
55
const t0 = _template("<div></div>")
66
77
export function render(_ctx) {
8-
const n0 = _createFor(() => (_ctx.list), _withDestructure((_state, [[id, ...other], index] = _state) => [id, other, index], (_ctx0) => {
8+
const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
99
const n2 = t0()
1010
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
1111
return n2
@@ -53,9 +53,9 @@ const t1 = _template("<div></div>")
5353
export function render(_ctx) {
5454
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
5555
const n5 = t1()
56-
const n2 = _createFor(() => (_ctx0[0]), (_ctx2) => {
56+
const n2 = _createFor(() => (_ctx0[0]), (_ctx1) => {
5757
const n4 = t0()
58-
_renderEffect(() => _setText(n4, _ctx2[0]+_ctx0[0]))
58+
_renderEffect(() => _setText(n4, _ctx1[0]+_ctx0[0]))
5959
return n4
6060
})
6161
_insert(n2, n5)
@@ -70,7 +70,7 @@ exports[`compiler: v-for > object de-structured value 1`] = `
7070
const t0 = _template("<div></div>")
7171
7272
export function render(_ctx) {
73-
const n0 = _createFor(() => (_ctx.list), _withDestructure((_state, [{ id, ...other }, index] = _state) => [id, other, index], (_ctx0) => {
73+
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
7474
const n2 = t0()
7575
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
7676
return n2
@@ -84,7 +84,7 @@ exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
8484
const t0 = _template("<div></div>")
8585
8686
export function render(_ctx) {
87-
const n0 = _createFor(() => (_ctx.list), _withDestructure((_state, [{ foo = bar, baz: [qux = quux] }] = _state) => [foo, qux], (_ctx0) => {
87+
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
8888
const n2 = t0()
8989
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
9090
return n2

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

+62-18
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ export function render(_ctx) {
1818
`;
1919

2020
exports[`compiler: transform slot > dynamic slots name w/ v-for 1`] = `
21-
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createForSlots as _createForSlots, template as _template } from 'vue/vapor';
21+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, withDestructure as _withDestructure, createForSlots as _createForSlots, template as _template } from 'vue/vapor';
2222
const t0 = _template("foo")
2323
2424
export function render(_ctx) {
2525
const _component_Comp = _resolveComponent("Comp")
2626
const n2 = _createComponent(_component_Comp, null, null, () => [_createForSlots(_ctx.list, (item) => ({
2727
name: item,
28-
fn: () => {
28+
fn: _withDestructure(({ bar }) => [bar], (_ctx0) => {
2929
const n0 = t0()
3030
return n0
31-
}
31+
})
3232
}))], true)
3333
return n2
3434
}"
@@ -52,7 +52,7 @@ export function render(_ctx) {
5252
`;
5353

5454
exports[`compiler: transform slot > dynamic slots name w/ v-if / v-else[-if] 1`] = `
55-
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
55+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, withDestructure as _withDestructure, template as _template } from 'vue/vapor';
5656
const t0 = _template("condition slot")
5757
const t1 = _template("another condition")
5858
const t2 = _template("else condition")
@@ -71,10 +71,10 @@ export function render(_ctx) {
7171
: _ctx.anotherCondition
7272
? {
7373
name: "condition",
74-
fn: () => {
74+
fn: _withDestructure(({ foo, bar }) => [foo, bar], (_ctx0) => {
7575
const n2 = t1()
7676
return n2
77-
},
77+
}),
7878
key: "1"
7979
}
8080
: {
@@ -126,20 +126,64 @@ export function render(_ctx) {
126126
}"
127127
`;
128128

129-
exports[`compiler: transform slot > nested slots 1`] = `
130-
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
131-
const t0 = _template("<div></div>")
129+
exports[`compiler: transform slot > nested slots scoping 1`] = `
130+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, withDestructure as _withDestructure, template as _template } from 'vue/vapor';
131+
const t0 = _template(" ")
132132
133133
export function render(_ctx) {
134-
const _component_Bar = _resolveComponent("Bar")
135-
const _component_Foo = _resolveComponent("Foo")
136-
const n3 = _createComponent(_component_Foo, null, { one: () => {
137-
const n1 = _createComponent(_component_Bar, null, { default: () => {
138-
const n0 = t0()
134+
const _component_Inner = _resolveComponent("Inner")
135+
const _component_Comp = _resolveComponent("Comp")
136+
const n5 = _createComponent(_component_Comp, null, { default: _withDestructure(({ foo }) => [foo], (_ctx0) => {
137+
const n2 = t0()
138+
const n1 = _createComponent(_component_Inner, null, { default: _withDestructure(({ bar }) => [bar], (_ctx1) => {
139+
const n0 = _createTextNode(() => [_ctx0[0] + _ctx1[0] + _ctx.baz])
139140
return n0
140-
} })
141-
return n1
142-
} }, null, true)
143-
return n3
141+
}) })
142+
const n3 = _createTextNode(() => [_ctx0[0] + _ctx.bar + _ctx.baz])
143+
return [n1, n2, n3]
144+
}) }, null, true)
145+
return n5
146+
}"
147+
`;
148+
149+
exports[`compiler: transform slot > on component dynamically named slot 1`] = `
150+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, withDestructure as _withDestructure } from 'vue/vapor';
151+
152+
export function render(_ctx) {
153+
const _component_Comp = _resolveComponent("Comp")
154+
const n1 = _createComponent(_component_Comp, null, { }, () => [{
155+
name: _ctx.named,
156+
fn: _withDestructure(({ foo }) => [foo], (_ctx0) => {
157+
const n0 = _createTextNode(() => [_ctx0[0] + _ctx.bar])
158+
return n0
159+
})
160+
}], true)
161+
return n1
162+
}"
163+
`;
164+
165+
exports[`compiler: transform slot > on component named slot 1`] = `
166+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, withDestructure as _withDestructure } from 'vue/vapor';
167+
168+
export function render(_ctx) {
169+
const _component_Comp = _resolveComponent("Comp")
170+
const n1 = _createComponent(_component_Comp, null, { named: _withDestructure(({ foo }) => [foo], (_ctx0) => {
171+
const n0 = _createTextNode(() => [_ctx0[0] + _ctx.bar])
172+
return n0
173+
}) }, null, true)
174+
return n1
175+
}"
176+
`;
177+
178+
exports[`compiler: transform slot > on-component default slot 1`] = `
179+
"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, withDestructure as _withDestructure } from 'vue/vapor';
180+
181+
export function render(_ctx) {
182+
const _component_Comp = _resolveComponent("Comp")
183+
const n1 = _createComponent(_component_Comp, null, { default: _withDestructure(({ foo }) => [foo], (_ctx0) => {
184+
const n0 = _createTextNode(() => [_ctx0[0] + _ctx.bar])
185+
return n0
186+
}) }, null, true)
187+
return n1
144188
}"
145189
`;

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

+5-11
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ describe('compiler: v-for', () => {
9393
)
9494
expect(code).matchSnapshot()
9595
expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
96-
expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx2) => {`)
97-
expect(code).contains(`_ctx2[0]+_ctx0[0]`)
96+
expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx1) => {`)
97+
expect(code).contains(`_ctx1[0]+_ctx0[0]`)
9898
expect(ir.template).toEqual(['<span></span>', '<div></div>'])
9999
expect(ir.block.operation).toMatchObject([
100100
{
@@ -129,9 +129,7 @@ describe('compiler: v-for', () => {
129129
`<div v-for="( { id, ...other }, index) in list" :key="id">{{ id + other + index }}</div>`,
130130
)
131131
expect(code).matchSnapshot()
132-
expect(code).contains(
133-
`(_state, [{ id, ...other }, index] = _state) => [id, other, index]`,
134-
)
132+
expect(code).contains(`([{ id, ...other }, index]) => [id, other, index]`)
135133
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
136134
expect(ir.block.operation[0]).toMatchObject({
137135
type: IRNodeTypes.FOR,
@@ -164,9 +162,7 @@ describe('compiler: v-for', () => {
164162
`<div v-for="([id, ...other], index) in list" :key="id">{{ id + other + index }}</div>`,
165163
)
166164
expect(code).matchSnapshot()
167-
expect(code).contains(
168-
`(_state, [[id, ...other], index] = _state) => [id, other, index]`,
169-
)
165+
expect(code).contains(`([[id, ...other], index]) => [id, other, index]`)
170166
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
171167
expect(ir.block.operation[0]).toMatchObject({
172168
type: IRNodeTypes.FOR,
@@ -201,9 +197,7 @@ describe('compiler: v-for', () => {
201197
</div>`,
202198
)
203199
expect(code).matchSnapshot()
204-
expect(code).contains(
205-
`(_state, [{ foo = bar, baz: [qux = quux] }] = _state) => [foo, qux]`,
206-
)
200+
expect(code).contains(`([{ foo = bar, baz: [qux = quux] }]) => [foo, qux]`)
207201
expect(code).contains(
208202
`_ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux`,
209203
)

0 commit comments

Comments
 (0)