|
1 | | -import { createApp, h } from '@vue/runtime-dom' |
| 1 | +import { createApp, h, nextTick, ref } from '@vue/runtime-dom' |
2 | 2 | import { |
3 | 3 | createComponent, |
4 | 4 | createDynamicComponent, |
| 5 | + createFor, |
5 | 6 | createSlot, |
6 | 7 | defineVaporComponent, |
7 | 8 | setInsertionState, |
@@ -374,6 +375,74 @@ describe('scopeId', () => { |
374 | 375 | `</div>`, |
375 | 376 | ) |
376 | 377 | }) |
| 378 | + |
| 379 | + test('nested components in vFor with slots', async () => { |
| 380 | + const Parent = defineVaporComponent({ |
| 381 | + setup() { |
| 382 | + const n1 = template('<div>', true)() as any |
| 383 | + setInsertionState(n1, null, 0, true) |
| 384 | + createSlot('default', null) |
| 385 | + return n1 |
| 386 | + }, |
| 387 | + }) |
| 388 | + |
| 389 | + const Child = defineVaporComponent({ |
| 390 | + setup() { |
| 391 | + const n1 = template('<div>', true)() as any |
| 392 | + setInsertionState(n1, null, 0, true) |
| 393 | + createSlot('default', null) |
| 394 | + return n1 |
| 395 | + }, |
| 396 | + }) |
| 397 | + |
| 398 | + const count = ref(0) |
| 399 | + const { html } = define({ |
| 400 | + __scopeId: 'app', |
| 401 | + setup() { |
| 402 | + const n4 = createComponent( |
| 403 | + Parent, |
| 404 | + null, |
| 405 | + { |
| 406 | + default: withVaporCtx(() => { |
| 407 | + const n0 = createFor( |
| 408 | + () => count.value, |
| 409 | + _for_item0 => { |
| 410 | + const n3 = createComponent( |
| 411 | + Child, |
| 412 | + { class: () => 'test' }, |
| 413 | + { |
| 414 | + default: () => { |
| 415 | + const n2 = template('<div> red ')() |
| 416 | + return n2 |
| 417 | + }, |
| 418 | + }, |
| 419 | + ) |
| 420 | + return n3 |
| 421 | + }, |
| 422 | + item => item, |
| 423 | + 2, |
| 424 | + ) |
| 425 | + return n0 |
| 426 | + }), |
| 427 | + }, |
| 428 | + true, |
| 429 | + ) |
| 430 | + return n4 |
| 431 | + }, |
| 432 | + }).render() |
| 433 | + |
| 434 | + expect(html()).toBe(`<div app=""><!--for--><!--slot--></div>`) |
| 435 | + |
| 436 | + count.value++ |
| 437 | + await nextTick() |
| 438 | + expect(html()).toBe( |
| 439 | + `<div app="">` + |
| 440 | + `<div class="test" app="">` + // should have app scopeId |
| 441 | + `<div> red </div><!--slot-->` + |
| 442 | + `</div><!--for-->` + |
| 443 | + `<!--slot--></div>`, |
| 444 | + ) |
| 445 | + }) |
377 | 446 | }) |
378 | 447 |
|
379 | 448 | describe('vdom interop', () => { |
|
0 commit comments