fix(runtime-core): avoid tracking slot fallback node as block

test: add test case chore: improve code chore: update test chore: update test
vuejs · Sep 29, 2023 · ba26e1b · ba26e1b
1 parent b775b71
commit ba26e1b
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 7 deletions.
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -23,7 +23,9 @@ import {
   createApp,
   FunctionalComponent,
   renderList,
-  onUnmounted
+  onUnmounted,
+  createElementBlock,
+  createElementVNode
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'
@@ -697,6 +699,81 @@ describe('renderer: optimized mode', () => {
     )
   })
 
+  test('force full diff slot and fallback nodes', async () => {
+    const Comp = {
+      props: ['show'],
+      setup(props: any, { slots }: SetupContext) {
+        return () => {
+          return (
+            openBlock(),
+            createElementBlock('div', null, [
+              renderSlot(slots, 'default', { hide: !props.show }, () => [
+                true
+                  ? (openBlock(),
+                    (block = createElementBlock(
+                      Fragment,
+                      { key: 0 },
+                      [createTextVNode('foo')],
+                      PatchFlags.STABLE_FRAGMENT
+                    )))
+                  : createCommentVNode('v-if', true)
+              ])
+            ])
+          )
+        }
+      }
+    }
+
+    const show = ref(true)
+    const app = createApp({
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Comp,
+            { show: show.value },
+            {
+              default: withCtx(({ hide }: { hide: boolean }) => [
+                !hide
+                  ? (openBlock(),
+                    createElementBlock(
+                      Fragment,
+                      { key: 0 },
+                      [
+                        createCommentVNode('comment'),
+                        createElementVNode(
+                          'div',
+                          null,
+                          'bar',
+                          PatchFlags.HOISTED
+                        )
+                      ],
+                      PatchFlags.STABLE_FRAGMENT
+                    ))
+                  : createCommentVNode('v-if', true)
+              ]),
+              _: SlotFlags.STABLE
+            },
+            PatchFlags.PROPS,
+            ['show']
+          )
+        )
+      }
+    })
+
+    app.mount(root)
+    expect(inner(root)).toBe('<div><!--comment--><div>bar</div></div>')
+    expect(block).toBe(null)
+
+    show.value = false
+    await nextTick()
+    expect(inner(root)).toBe('<div>foo</div>')
+
+    show.value = true
+    await nextTick()
+    expect(inner(root)).toBe('<div><!--comment--><div>bar</div></div>')
+  })
+
   // 3569
   test('should force bailout when the user manually calls the slot function', async () => {
     const index = ref(0)

diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts
@@ -38,7 +38,14 @@ export function renderSlot(
       currentRenderingInstance!.parent.isCE)
   ) {
     if (name !== 'default') props.name = name
-    return createVNode('slot', props, fallback && fallback())
+    let renderFallback = false
+    const node = createVNode(
+      'slot',
+      props,
+      fallback && ((renderFallback = true), fallback())
+    )
+    if (renderFallback) node.patchFlag = PatchFlags.BAIL
+    return node
   }
 
   let slot = slots[name]
@@ -59,6 +66,7 @@ export function renderSlot(
   if (slot && (slot as ContextualRenderFn)._c) {
     ;(slot as ContextualRenderFn)._d = false
   }
+  let renderFallback = false
   openBlock()
   const validSlotContent = slot && ensureValidVNode(slot(props))
   const rendered = createBlock(
@@ -71,7 +79,7 @@ export function renderSlot(
         (validSlotContent && (validSlotContent as any).key) ||
         `_${name}`
     },
-    validSlotContent || (fallback ? fallback() : []),
+    validSlotContent || (fallback ? ((renderFallback = true), fallback()) : []),
     validSlotContent && (slots as RawSlots)._ === SlotFlags.STABLE
       ? PatchFlags.STABLE_FRAGMENT
       : PatchFlags.BAIL
@@ -82,6 +90,7 @@ export function renderSlot(
   if (slot && (slot as ContextualRenderFn)._c) {
     ;(slot as ContextualRenderFn)._d = true
   }
+  if (renderFallback) rendered.patchFlag = PatchFlags.BAIL
   return rendered
 }
 

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
@@ -825,7 +825,7 @@ function baseCreateRenderer(
     }
 
     const areChildrenSVG = isSVG && n2.type !== 'foreignObject'
-    if (dynamicChildren) {
+    if (optimized && dynamicChildren) {
       patchBlockChildren(
         n1.dynamicChildren!,
         dynamicChildren,
@@ -1058,9 +1058,10 @@ function baseCreateRenderer(
     let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2
 
     if (
-      __DEV__ &&
-      // #5523 dev root fragment may inherit directives
-      (isHmrUpdating || patchFlag & PatchFlags.DEV_ROOT_FRAGMENT)
+      (__DEV__ &&
+        // #5523 dev root fragment may inherit directives
+        (isHmrUpdating || patchFlag & PatchFlags.DEV_ROOT_FRAGMENT)) ||
+      (n1 || n2).patchFlag === PatchFlags.BAIL
     ) {
       // HMR updated / Dev root fragment (w/ comments), force full diff
       patchFlag = 0
@@ -1093,6 +1094,7 @@ function baseCreateRenderer(
       )
     } else {
       if (
+        optimized &&
         patchFlag > 0 &&
         patchFlag & PatchFlags.STABLE_FRAGMENT &&
         dynamicChildren &&