chore: tweak slot parent instance

Author: edison1105

packages/runtime-core/src/apiCreateApp.ts

@@ -212,7 +212,12 @@ export interface VaporInteropInterface {
     transition: TransitionHooks,
   ): void
 
-  vdomMount: (component: ConcreteComponent, props?: any, slots?: any) => any
+  vdomMount: (
+    component: ConcreteComponent,
+    parentComponent: any,
+    props?: any,
+    slots?: any,
+  ) => any
   vdomUnmount: UnmountComponentFn
   vdomSlot: (
     slots: any,

packages/runtime-vapor/src/component.ts

@@ -225,12 +225,14 @@ export function createComponent(
 
   // vdom interop enabled and component is not an explicit vapor component
   if (appContext.vapor && !component.__vapor) {
+    const prevUseSlotConsumer = setUseSlotConsumer(false)
     const frag = appContext.vapor.vdomMount(
       component as any,
+      parentInstance as any,
       rawProps,
       rawSlots,
     )
-
+    setUseSlotConsumer(prevUseSlotConsumer)
     if (!isHydrating) {
       if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
     } else {
@@ -266,6 +268,9 @@ export function createComponent(
     parentInstance,
   )
 
+  // set useSlotConsumer to false to avoid affecting the child components
+  const prevUseSlotConsumer = setUseSlotConsumer(false)
+
   // HMR
   if (__DEV__ && component.__hmrId) {
     registerHMR(instance)
@@ -324,6 +329,8 @@ export function createComponent(
     setupComponent(instance, component)
   }
 
+  // reset useSlotConsumer to previous value after setupFn call is finished
+  setUseSlotConsumer(prevUseSlotConsumer)
   onScopeDispose(() => unmountComponent(instance), true)
 
   if (_insertionParent || isHydrating) {
@@ -333,6 +340,7 @@ export function createComponent(
   if (isHydrating && _insertionAnchor !== undefined) {
     advanceHydrationNode(_insertionParent!)
   }
+
   return instance
 }
 
@@ -611,8 +619,6 @@ export class VaporComponentInstance implements GenericComponentInstance {
     if (comp.ce) {
       comp.ce(this)
     }
-
-    setUseSlotConsumer(false)
   }
 
   /**

packages/runtime-vapor/src/componentSlots.ts

@@ -142,13 +142,19 @@ function setCurrentSlotConsumer(consumer: GenericComponentInstance | null) {
 }
 
 export let useSlotConsumer = false
-export function setUseSlotConsumer(value: boolean): void {
-  useSlotConsumer = value
+export function setUseSlotConsumer(value: boolean): boolean {
+  try {
+    return useSlotConsumer
+  } finally {
+    useSlotConsumer = value
+  }
 }
 
+// when rendering components in slot, currentInstance is changed in withVaporCtx
+// should use currentSlotConsumer as parent until new instance is created
+// it requires to be set to false after new instance is created to avoid affecting
+// the child components and reset to previous value after setupFn call is finished
 export function getParentInstance(): GenericComponentInstance | null {
-  // when rendering components in slot, currentInstance is changed in withVaporCtx
-  // should use currentSlotConsumer as parent until new instance is created
   return useSlotConsumer ? currentSlotConsumer : currentInstance
 }
 
@@ -160,17 +166,17 @@ export function getParentInstance(): GenericComponentInstance | null {
 export function withVaporCtx(fn: Function): BlockFn {
   const owner = currentInstance
   return (...args: any[]) => {
-    useSlotConsumer = true
     const prev = setCurrentInstance(owner)
     const prevOwner = setCurrentSlotOwner(owner)
     const prevConsumer = setCurrentSlotConsumer(prev[0])
+    const prevUseSlotConsumer = setUseSlotConsumer(true)
     try {
       return fn(...args)
     } finally {
-      setCurrentSlotConsumer(prevConsumer)
-      setCurrentSlotOwner(prevOwner)
       setCurrentInstance(...prev)
-      useSlotConsumer = false
+      setCurrentSlotOwner(prevOwner)
+      setCurrentSlotConsumer(prevConsumer)
+      setUseSlotConsumer(prevUseSlotConsumer)
     }
   }
 }

packages/runtime-vapor/src/vdomInterop.ts

@@ -59,11 +59,7 @@ import {
 } from '@vue/shared'
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots, VaporSlot } from './componentSlots'
-import {
-  currentSlotOwner,
-  currentSlotScopeIds,
-  getParentInstance,
-} from './componentSlots'
+import { currentSlotOwner, currentSlotScopeIds } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { _next, createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
@@ -277,10 +273,10 @@ let vdomHydrateNode: HydrationRenderer['hydrateNode'] | undefined
 function createVDOMComponent(
   internals: RendererInternals,
   component: ConcreteComponent,
+  parentComponent: VaporComponentInstance | null,
   rawProps?: LooseRawProps | null,
   rawSlots?: LooseRawSlots | null,
 ): VaporFragment {
-  const parentInstance = getParentInstance() as VaporComponentInstance | null
   const frag = new VaporFragment([])
   const vnode = (frag.vnode = createVNode(
     component,
@@ -290,9 +286,9 @@ function createVDOMComponent(
     { props: component.props },
     rawProps as RawProps,
     rawSlots as RawSlots,
-    parentInstance ? parentInstance.appContext : undefined,
+    parentComponent ? parentComponent.appContext : undefined,
     undefined,
-    parentInstance,
+    parentComponent,
   )
 
   // overwrite how the vdom instance handles props
@@ -322,9 +318,9 @@ function createVDOMComponent(
     if (vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
       vdomDeactivate(
         vnode,
-        findParentKeepAlive(parentInstance!)!.getStorageContainer(),
+        findParentKeepAlive(parentComponent!)!.getStorageContainer(),
         internals,
-        parentInstance as any,
+        parentComponent as any,
         null,
       )
       return
@@ -333,13 +329,13 @@ function createVDOMComponent(
   }
 
   frag.hydrate = () => {
-    hydrateVNode(vnode, parentInstance as any)
+    hydrateVNode(vnode, parentComponent as any)
     onScopeDispose(unmount, true)
     isMounted = true
     frag.nodes = vnode.el as any
   }
 
-  const scopeOwner = currentSlotOwner || parentInstance
+  const scopeOwner = currentSlotOwner || parentComponent
   vnode.scopeId = (scopeOwner && scopeOwner.type.__scopeId) || null
   vnode.slotScopeIds = currentSlotScopeIds
 
@@ -351,21 +347,21 @@ function createVDOMComponent(
         parentNode,
         anchor,
         internals,
-        parentInstance as any,
+        parentComponent as any,
         null,
         undefined,
         false,
       )
     } else {
       const prev = currentInstance
-      simpleSetCurrentInstance(parentInstance)
+      simpleSetCurrentInstance(parentComponent)
       if (!isMounted) {
         if (transition) setVNodeTransitionHooks(vnode, transition)
         internals.mt(
           vnode,
           parentNode,
           anchor,
-          parentInstance as any,
+          parentComponent as any,
           null,
           undefined,
           false,
@@ -381,7 +377,7 @@ function createVDOMComponent(
           parentNode,
           anchor,
           MoveType.REORDER,
-          parentInstance as any,
+          parentComponent as any,
         )
       }
       simpleSetCurrentInstance(prev)