fix(runtime-vapor): preserve fallback carrier order with fragment anchors

edison1105 · edison1105 · commit 4a6e016c3772 · 2026-04-21T14:49:56.000+08:00
diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts
@@ -36,7 +36,7 @@ import {
 import { makeRender } from './_utils'
 import type { DynamicSlot } from '../src/componentSlots'
 import { setElementText, setText } from '../src/dom/prop'
-import { isValidBlock } from '../src/block'
+import { type Block, isValidBlock } from '../src/block'
 import { hydrateNode, setCurrentHydrationNode } from '../src/dom/hydration'
 import {
   DynamicFragment,
@@ -533,6 +533,40 @@ describe('component: slots', () => {
       expect(container.innerHTML).toBe('abxy!<!--slot-->')
     })
 
+    test('slot fallback controller re-syncs carrier order when fallback ends with a fragment anchor', async () => {
+      const container = document.createElement('div')
+      const carrierA = document.createTextNode('x')
+      const carrierB = document.createTextNode('y')
+      const marker = document.createTextNode('!')
+      const slotAnchor = document.createComment('slot')
+      const trailingFragment = new DynamicFragment('if', false, false)
+      trailingFragment.update(() => document.createTextNode('b'))
+      const fallback = new VaporFragment<Block>([
+        document.createTextNode('a'),
+        trailingFragment,
+      ])
+      const controller = new SlotFallbackController({
+        getParentBoundary: () => null,
+        getLocalFallback: () => () => fallback,
+        getContent: () => [carrierA, carrierB],
+        getParentNode: () => container,
+        getAnchor: () => slotAnchor,
+        runWithRenderCtx: fn => fn(),
+        isContentValid: () => false,
+        onValidityChange: vi.fn(),
+      })
+
+      container.append(carrierA, marker, carrierB, slotAnchor)
+      controller.recheck()
+
+      expect(container.innerHTML).toBe('ab<!--if-->x!y<!--slot-->')
+
+      controller.syncActiveFallback()
+      await nextTick()
+
+      expect(container.innerHTML).toBe('ab<!--if-->xy!<!--slot-->')
+    })
+
     test('slot fallback controller defaults to idle when isBusy is omitted', () => {
       const fallback = document.createTextNode('fallback')
       const controller = new SlotFallbackController({
diff --git a/packages/runtime-vapor/src/fragment.ts b/packages/runtime-vapor/src/fragment.ts
@@ -982,12 +982,9 @@ export class SlotFallbackController {
     }
 
     const carrierNodes = collectBlockNodes(this.host.getContent(), [], true)
-    const lastNode = block.nodes[block.nodes.length - 1]
-    if (
-      !carrierNodes.length ||
-      !(lastNode instanceof Node) ||
-      lastNode instanceof Comment
-    ) {
+    const fallbackNodes = collectBlockNodes(block, [], true)
+    const lastNode = fallbackNodes[fallbackNodes.length - 1]
+    if (!carrierNodes.length || !lastNode) {
       return
     }
 

Original file line number	Diff line number	Diff line change
`@@ -982,12 +982,9 @@ export class SlotFallbackController {`
`982`	`982`	`}`
`983`	`983`
`984`	`984`	`const carrierNodes = collectBlockNodes(this.host.getContent(), [], true)`
`985`		`- const lastNode = block.nodes[block.nodes.length - 1]`
`986`		`- if (`
`987`		`- !carrierNodes.length \|\|`
`988`		`- !(lastNode instanceof Node) \|\|`
`989`		`- lastNode instanceof Comment`
`990`		`- ) {`
	`985`	`+ const fallbackNodes = collectBlockNodes(block, [], true)`
	`986`	`+ const lastNode = fallbackNodes[fallbackNodes.length - 1]`
	`987`	`+ if (!carrierNodes.length \|\| !lastNode) {`
`991`	`988`	`return`
`992`	`989`	`}`
`993`	`990`