chore: Merge branch 'edison/fix/vaporSlotFallback' into edison/feat/fowardedSlots

packages/runtime-vapor/src/apiCreateFor.ts

@@ -152,7 +152,6 @@ export const createFor = (
         // render fallback nodes
         if (frag.fallback) {
           insert((frag.nodes[0] = frag.fallback()), parent!, parentAnchor)
-          oldBlocks = []
           isFallback = true
         }
       } else if (!getKey) {
@@ -341,9 +340,9 @@ export const createFor = (
 
     if (!isFallback) {
       frag.nodes = [(oldBlocks = newBlocks)]
-      if (parentAnchor) {
-        frag.nodes.push(parentAnchor)
-      }
+      if (parentAnchor) frag.nodes.push(parentAnchor)
+    } else {
+      oldBlocks = []
     }
     setActiveSub(prevSub)
   }

packages/runtime-vapor/src/block.ts

@@ -73,18 +73,19 @@ export class DynamicFragment extends VaporFragment {
 
     if (this.fallback) {
       // set fallback for nested fragments
-      const isFrag = isFragment(this.nodes)
-      if (isFrag) {
+      const hasNestedFragment = isFragment(this.nodes)
+      if (hasNestedFragment) {
         setFragmentFallback(this.nodes as VaporFragment, this.fallback)
       }
 
-      if (!isValidBlock(this.nodes)) {
+      const invalidFragment = findInvalidFragment(this)
+      if (invalidFragment) {
         parent && remove(this.nodes, parent)
         const scope = this.scope || (this.scope = new EffectScope())
         scope.run(() => {
-          if (isFrag) {
-            // render fragment's fallback
-            renderFragmentFallback(this.nodes as VaporFragment)
+          // for nested fragments, render invalid fragment's fallback
+          if (hasNestedFragment) {
+            renderFragmentFallback(invalidFragment)
           } else {
             this.nodes = this.fallback!() || []
           }
@@ -101,9 +102,10 @@ function setFragmentFallback(
   fragment: VaporFragment,
   fallback: BlockFn | undefined,
 ): void {
-  if (!fragment.fallback) {
-    fragment.fallback = fallback
-  }
+  // stop recursion if fragment has its own fallback
+  if (fragment.fallback) return
+
+  fragment.fallback = fallback
   if (isFragment(fragment.nodes)) {
     setFragmentFallback(fragment.nodes, fallback)
   }
@@ -113,17 +115,20 @@ function renderFragmentFallback(fragment: VaporFragment): void {
   if (fragment instanceof ForFragment) {
     fragment.nodes[0] = [fragment.fallback!() || []] as Block[]
   } else if (fragment instanceof DynamicFragment) {
-    const nodes = fragment.nodes
-    if (isFragment(nodes)) {
-      renderFragmentFallback(nodes)
-    } else {
-      fragment.update(fragment.fallback)
-    }
+    fragment.update(fragment.fallback)
   } else {
     // vdom slots
   }
 }
 
+function findInvalidFragment(fragment: VaporFragment): VaporFragment | null {
+  if (isValidBlock(fragment.nodes)) return null
+
+  return isFragment(fragment.nodes)
+    ? findInvalidFragment(fragment.nodes) || fragment
+    : fragment
+}
+
 export function isFragment(val: NonNullable<unknown>): val is VaporFragment {
   return val instanceof VaporFragment
 }