@@ -23,7 +23,9 @@ import {
23
23
createApp ,
24
24
FunctionalComponent ,
25
25
renderList ,
26
- onUnmounted
26
+ onUnmounted ,
27
+ createElementBlock ,
28
+ createElementVNode
27
29
} from '@vue/runtime-test'
28
30
import { PatchFlags , SlotFlags } from '@vue/shared'
29
31
import { SuspenseImpl } from '../src/components/Suspense'
@@ -697,6 +699,83 @@ describe('renderer: optimized mode', () => {
697
699
)
698
700
} )
699
701
702
+ test ( 'should not track dynamic children for slot fallback nodes' , async ( ) => {
703
+ const Comp = {
704
+ props : [ 'show' ] ,
705
+ setup ( props : any , { slots } : SetupContext ) {
706
+ return ( ) => {
707
+ return (
708
+ openBlock ( ) ,
709
+ createElementBlock ( 'div' , null , [
710
+ renderSlot ( slots , 'default' , { hide : ! props . show } , ( ) => [
711
+ true
712
+ ? ( openBlock ( ) ,
713
+ ( block = createElementBlock (
714
+ Fragment ,
715
+ { key : 0 } ,
716
+ [ createTextVNode ( 'foo' ) ] ,
717
+ PatchFlags . STABLE_FRAGMENT
718
+ ) ) )
719
+ : createCommentVNode ( 'v-if' , true )
720
+ ] )
721
+ ] )
722
+ )
723
+ }
724
+ }
725
+ }
726
+
727
+ const show = ref ( true )
728
+ const app = createApp ( {
729
+ render ( ) {
730
+ return (
731
+ openBlock ( ) ,
732
+ createBlock (
733
+ Comp ,
734
+ { show : show . value } ,
735
+ {
736
+ default : withCtx ( ( { hide } : { hide : boolean } ) => [
737
+ ! hide
738
+ ? ( openBlock ( ) ,
739
+ createElementBlock (
740
+ Fragment ,
741
+ { key : 0 } ,
742
+ [
743
+ createCommentVNode ( 'comment' ) ,
744
+ createElementVNode (
745
+ 'div' ,
746
+ null ,
747
+ 'bar' ,
748
+ PatchFlags . HOISTED
749
+ )
750
+ ] ,
751
+ PatchFlags . STABLE_FRAGMENT
752
+ ) )
753
+ : createCommentVNode ( 'v-if' , true )
754
+ ] ) ,
755
+ _ : SlotFlags . STABLE
756
+ } ,
757
+ PatchFlags . PROPS ,
758
+ [ 'show' ]
759
+ )
760
+ )
761
+ }
762
+ } )
763
+
764
+ app . mount ( root )
765
+ expect ( inner ( root ) ) . toBe ( '<div><!--comment--><div>bar</div></div>' )
766
+ expect ( block ) . toBe ( null )
767
+
768
+ show . value = false
769
+ await nextTick ( )
770
+ expect ( block ! . dynamicChildren ) . toBe ( null )
771
+ expect ( inner ( root ) ) . toBe ( '<div>foo</div>' )
772
+
773
+ show . value = true
774
+ await nextTick ( )
775
+ expect ( block ! . dynamicChildren ) . toBe ( null )
776
+ expect ( inner ( root ) ) . toBe ( '<div><!--comment--><div>bar</div></div>' )
777
+ } )
778
+
700
779
// 3569
701
780
test ( 'should force bailout when the user manually calls the slot function' , async ( ) => {
702
781
const index = ref ( 0 )
0 commit comments