Skip to content

Commit d0d5c3e

Browse files
edison1105edison1105
committed
chore: Merge branch 'edison/feat/setScopeId' into edison/testVapor
2 parents 023b005 + 8f29088 commit d0d5c3e

File tree

4 files changed

+413
-1
lines changed

4 files changed

+413
-1
lines changed

‎packages/runtime-vapor/__tests__/scopeId.spec.ts

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
import { createApp, h } from '@vue/runtime-dom'
2+
import {
3+
createComponent,
4+
createDynamicComponent,
5+
createSlot,
6+
defineVaporComponent,
7+
setInsertionState,
8+
template,
9+
vaporInteropPlugin,
10+
} from '../src'
11+
import { makeRender } from './_utils'
12+
13+
const define = makeRender()
14+
15+
describe('scopeId', () => {
16+
test('should attach scopeId to child component', () => {
17+
const Child = defineVaporComponent({
18+
__scopeId: 'child',
19+
setup() {
20+
return template('<div child></div>', true)()
21+
},
22+
})
23+
24+
const { html } = define({
25+
__scopeId: 'parent',
26+
setup() {
27+
const t0 = template('<div parent></div>', true)
28+
const n1 = t0() as any
29+
setInsertionState(n1)
30+
createComponent(Child)
31+
return n1
32+
},
33+
}).render()
34+
expect(html()).toBe(`<div parent=""><div child="" parent=""></div></div>`)
35+
})
36+
37+
test('should attach scopeId to nested child component', () => {
38+
const Child = defineVaporComponent({
39+
__scopeId: 'child',
40+
setup() {
41+
return template('<div child></div>', true)()
42+
},
43+
})
44+
45+
const Parent = defineVaporComponent({
46+
__scopeId: 'parent',
47+
setup() {
48+
return createComponent(Child)
49+
},
50+
})
51+
52+
const { html } = define({
53+
__scopeId: 'app',
54+
setup() {
55+
const t0 = template('<div app></div>', true)
56+
const n1 = t0() as any
57+
setInsertionState(n1)
58+
createComponent(Parent)
59+
return n1
60+
},
61+
}).render()
62+
expect(html()).toBe(
63+
`<div app=""><div child="" parent="" app=""></div></div>`,
64+
)
65+
})
66+
67+
test('should attach scopeId to child dynamic component', () => {
68+
const { html } = define({
69+
__scopeId: 'parent',
70+
setup() {
71+
const t0 = template('<div parent></div>', true)
72+
const n1 = t0() as any
73+
setInsertionState(n1)
74+
createDynamicComponent(() => 'button')
75+
return n1
76+
},
77+
}).render()
78+
expect(html()).toBe(
79+
`<div parent=""><button parent=""></button><!--dynamic-component--></div>`,
80+
)
81+
})
82+
83+
test('should attach scopeId to dynamic component', () => {
84+
const { html } = define({
85+
__scopeId: 'parent',
86+
setup() {
87+
const t0 = template('<div parent></div>', true)
88+
const n1 = t0() as any
89+
setInsertionState(n1)
90+
createDynamicComponent(() => 'button')
91+
return n1
92+
},
93+
}).render()
94+
expect(html()).toBe(
95+
`<div parent=""><button parent=""></button><!--dynamic-component--></div>`,
96+
)
97+
})
98+
99+
test('should attach scopeId to nested dynamic component', () => {
100+
const Comp = defineVaporComponent({
101+
__scopeId: 'child',
102+
setup() {
103+
return createDynamicComponent(() => 'button', null, null, true)
104+
},
105+
})
106+
const { html } = define({
107+
__scopeId: 'parent',
108+
setup() {
109+
const t0 = template('<div parent></div>', true)
110+
const n1 = t0() as any
111+
setInsertionState(n1)
112+
createComponent(Comp, null, null, true)
113+
return n1
114+
},
115+
}).render()
116+
expect(html()).toBe(
117+
`<div parent=""><button child="" parent=""></button><!--dynamic-component--></div>`,
118+
)
119+
})
120+
121+
test.todo('should attach scopeId to suspense content', async () => {})
122+
123+
// :slotted basic
124+
test.todo('should work on slots', () => {
125+
const Child = defineVaporComponent({
126+
__scopeId: 'child',
127+
setup() {
128+
const n1 = template('<div child></div>', true)() as any
129+
setInsertionState(n1)
130+
createSlot('default', null)
131+
return n1
132+
},
133+
})
134+
135+
const Child2 = defineVaporComponent({
136+
__scopeId: 'child2',
137+
setup() {
138+
return template('<span child2></span>', true)()
139+
},
140+
})
141+
142+
const { html } = define({
143+
__scopeId: 'parent',
144+
setup() {
145+
const n2 = createComponent(
146+
Child,
147+
null,
148+
{
149+
default: () => {
150+
const n0 = template('<div parent></div>')()
151+
const n1 = createComponent(Child2)
152+
return [n0, n1]
153+
},
154+
},
155+
true,
156+
)
157+
return n2
158+
},
159+
}).render()
160+
161+
expect(html()).toBe(
162+
`<div child="" parent="">` +
163+
`<div parent="" child-s=""></div>` +
164+
// component inside slot should have:
165+
// - scopeId from template context
166+
// - slotted scopeId from slot owner
167+
// - its own scopeId
168+
`<span child2="" child="" parent="" child-s=""></span>` +
169+
`<!--slot-->` +
170+
`</div>`,
171+
)
172+
})
173+
174+
test.todo(':slotted on forwarded slots', async () => {})
175+
})
176+
177+
describe('vdom interop', () => {
178+
test('vdom parent > vapor child', () => {
179+
const VaporChild = defineVaporComponent({
180+
__scopeId: 'vapor-child',
181+
setup() {
182+
return template('<button vapor-child></button>', true)()
183+
},
184+
})
185+
186+
const VdomChild = {
187+
__scopeId: 'vdom-child',
188+
setup() {
189+
return () => h(VaporChild as any)
190+
},
191+
}
192+
193+
const App = {
194+
__scopeId: 'parent',
195+
setup() {
196+
return () => h(VdomChild)
197+
},
198+
}
199+
200+
const root = document.createElement('div')
201+
createApp(App).use(vaporInteropPlugin).mount(root)
202+
203+
expect(root.innerHTML).toBe(
204+
`<button vapor-child="" vdom-child="" parent=""></button>`,
205+
)
206+
})
207+
208+
test('vdom parent > vapor > vdom child', () => {
209+
const InnerVdomChild = {
210+
__scopeId: 'inner-vdom-child',
211+
setup() {
212+
return () => h('button')
213+
},
214+
}
215+
216+
const VaporChild = defineVaporComponent({
217+
__scopeId: 'vapor-child',
218+
setup() {
219+
return createComponent(InnerVdomChild as any, null, null, true)
220+
},
221+
})
222+
223+
const VdomChild = {
224+
__scopeId: 'vdom-child',
225+
setup() {
226+
return () => h(VaporChild as any)
227+
},
228+
}
229+
230+
const App = {
231+
__scopeId: 'parent',
232+
setup() {
233+
return () => h(VdomChild)
234+
},
235+
}
236+
237+
const root = document.createElement('div')
238+
createApp(App).use(vaporInteropPlugin).mount(root)
239+
240+
expect(root.innerHTML).toBe(
241+
`<button inner-vdom-child="" vapor-child="" vdom-child="" parent=""></button>`,
242+
)
243+
})
244+
245+
test('vdom parent > vapor dynamic child', () => {
246+
const VaporChild = defineVaporComponent({
247+
__scopeId: 'vapor-child',
248+
setup() {
249+
return createDynamicComponent(() => 'button', null, null, true)
250+
},
251+
})
252+
253+
const VdomChild = {
254+
__scopeId: 'vdom-child',
255+
setup() {
256+
return () => h(VaporChild as any)
257+
},
258+
}
259+
260+
const App = {
261+
__scopeId: 'parent',
262+
setup() {
263+
return () => h(VdomChild)
264+
},
265+
}
266+
267+
const root = document.createElement('div')
268+
createApp(App).use(vaporInteropPlugin).mount(root)
269+
270+
expect(root.innerHTML).toBe(
271+
`<button vapor-child="" vdom-child="" parent=""></button><!--dynamic-component-->`,
272+
)
273+
})
274+
275+
test('vapor parent > vdom child', () => {
276+
const VdomChild = {
277+
__scopeId: 'vdom-child',
278+
setup() {
279+
return () => h('button')
280+
},
281+
}
282+
283+
const VaporChild = defineVaporComponent({
284+
__scopeId: 'vapor-child',
285+
setup() {
286+
return createComponent(VdomChild as any, null, null, true)
287+
},
288+
})
289+
290+
const App = {
291+
__scopeId: 'parent',
292+
setup() {
293+
return () => h(VaporChild as any)
294+
},
295+
}
296+
297+
const root = document.createElement('div')
298+
createApp(App).use(vaporInteropPlugin).mount(root)
299+
300+
expect(root.innerHTML).toBe(
301+
`<button vdom-child="" vapor-child="" parent=""></button>`,
302+
)
303+
})
304+
305+
test('vapor parent > vdom > vapor child', () => {
306+
const InnerVaporChild = defineVaporComponent({
307+
__scopeId: 'inner-vapor-child',
308+
setup() {
309+
return template('<button inner-vapor-child></button>', true)()
310+
},
311+
})
312+
313+
const VdomChild = {
314+
__scopeId: 'vdom-child',
315+
setup() {
316+
return () => h(InnerVaporChild as any)
317+
},
318+
}
319+
320+
const VaporChild = defineVaporComponent({
321+
__scopeId: 'vapor-child',
322+
setup() {
323+
return createComponent(VdomChild as any, null, null, true)
324+
},
325+
})
326+
327+
const App = {
328+
__scopeId: 'parent',
329+
setup() {
330+
return () => h(VaporChild as any)
331+
},
332+
}
333+
334+
const root = document.createElement('div')
335+
createApp(App).use(vaporInteropPlugin).mount(root)
336+
337+
expect(root.innerHTML).toBe(
338+
`<button inner-vapor-child="" vdom-child="" vapor-child="" parent=""></button>`,
339+
)
340+
})
341+
})

0 commit comments

Comments
 (0)