fix(runtime-vapor): track actual parent instance for slot children

Author: edison1105

packages/runtime-vapor/src/apiCreateDynamicComponent.ts

@@ -1,4 +1,5 @@
-import { currentInstance, resolveDynamicComponent } from '@vue/runtime-dom'
+import { resolveDynamicComponent } from '@vue/runtime-dom'
+import { getParentInstance } from './componentSlots'
 import { insert } from './block'
 import { createComponentWithFallback, emptyContext } from './component'
 import { renderEffect } from './renderEffect'
@@ -32,8 +33,8 @@ export function createDynamicComponent(
 
   const renderFn = () => {
     const value = getter()
-    const appContext =
-      (currentInstance && currentInstance.appContext) || emptyContext
+    const parent = getParentInstance()
+    const appContext = (parent && parent.appContext) || emptyContext
     frag.update(
       () =>
         createComponentWithFallback(

packages/runtime-vapor/src/block.ts

@@ -253,19 +253,23 @@ export function setScopeId(block: Block, scopeIds: string[]): void {
 
 export function setComponentScopeId(instance: VaporComponentInstance): void {
   const parent = instance.parent
-  if (!parent) return
+  const scopeOwner = instance.scopeOwner || parent
+  if (!scopeOwner && !parent) return
   // prevent setting scopeId on multi-root fragments
   if (isArray(instance.block) && instance.block.length > 1) return
 
   const scopeIds: string[] = []
 
-  const scopeId = parent.type.__scopeId
-  if (scopeId) {
-    scopeIds.push(scopeId)
+  if (scopeOwner) {
+    const scopeId = scopeOwner.type.__scopeId
+    if (scopeId) {
+      scopeIds.push(scopeId)
+    }
   }
 
   // inherit scopeId from vdom parent
   if (
+    parent &&
     parent.subTree &&
     (parent.subTree.component as any) === instance &&
     parent.vnode!.scopeId

packages/runtime-vapor/src/component.ts

@@ -70,6 +70,7 @@ import {
   type StaticSlots,
   type VaporSlot,
   dynamicSlotsProxyHandlers,
+  getParentInstance,
   getSlot,
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
@@ -178,9 +179,7 @@ export function createComponent(
   rawSlots?: LooseRawSlots | null,
   isSingleRoot?: boolean,
   once?: boolean,
-  appContext: GenericAppContext = (currentInstance &&
-    currentInstance.appContext) ||
-    emptyContext,
+  appContext: GenericAppContext = emptyContext,
 ): VaporComponentInstance {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
@@ -191,15 +190,23 @@ export function createComponent(
     resetInsertionState()
   }
 
+  const parentInstance = getParentInstance()
+  appContext =
+    appContext !== emptyContext
+      ? appContext
+      : parentInstance
+        ? parentInstance.appContext
+        : emptyContext
+
   if (
     isSingleRoot &&
     component.inheritAttrs !== false &&
-    isVaporComponent(currentInstance) &&
-    currentInstance.hasFallthrough
+    isVaporComponent(parentInstance) &&
+    parentInstance.hasFallthrough
   ) {
     // check if we are the single root of the parent
     // if yes, inject parent attrs as dynamic props source
-    const attrs = currentInstance.attrs
+    const attrs = parentInstance.attrs
     if (rawProps) {
       ;((rawProps as RawProps).$ || ((rawProps as RawProps).$ = [])).push(
         () => attrs,
@@ -210,12 +217,8 @@ export function createComponent(
   }
 
   // keep-alive
-  if (
-    currentInstance &&
-    currentInstance.vapor &&
-    isKeepAlive(currentInstance)
-  ) {
-    const cached = (currentInstance as KeepAliveInstance).getCachedComponent(
+  if (parentInstance && parentInstance.vapor && isKeepAlive(parentInstance)) {
+    const cached = (parentInstance as KeepAliveInstance).getCachedComponent(
       component,
     )
     // @ts-expect-error
@@ -262,6 +265,7 @@ export function createComponent(
     rawSlots as RawSlots,
     appContext,
     once,
+    parentInstance,
   )
 
   // HMR
@@ -525,6 +529,9 @@ export class VaporComponentInstance implements GenericComponentInstance {
   ec?: LifecycleHook // LifecycleHooks.ERROR_CAPTURED
   sp?: LifecycleHook<() => Promise<unknown>> // LifecycleHooks.SERVER_PREFETCH
 
+  // Render-context owner used for scopeId inheritance.
+  scopeOwner?: GenericComponentInstance | null
+
   // dev only
   setupState?: Record<string, any>
   devtoolsRawSetupState?: any
@@ -541,17 +548,19 @@ export class VaporComponentInstance implements GenericComponentInstance {
     rawSlots?: RawSlots | null,
     appContext?: GenericAppContext,
     once?: boolean,
+    parent: GenericComponentInstance | null = currentInstance,
   ) {
     this.vapor = true
     this.uid = nextUid()
     this.type = comp
-    this.parent = currentInstance
-    this.root = currentInstance ? currentInstance.root : this
-
-    if (currentInstance) {
-      this.appContext = currentInstance.appContext
-      this.provides = currentInstance.provides
-      this.ids = currentInstance.ids
+    this.parent = parent
+    this.scopeOwner = currentInstance
+    this.root = parent ? parent.root : this
+
+    if (parent) {
+      this.appContext = parent.appContext
+      this.provides = parent.provides
+      this.ids = parent.ids
     } else {
       this.appContext = appContext || emptyContext
       this.provides = Object.create(this.appContext.provides)

packages/runtime-vapor/src/componentSlots.ts

@@ -122,6 +122,17 @@ export function getSlot(
   }
 }
 
+// Tracks the instance that owned the render context when a slot was created.
+const slotParentStack: (GenericComponentInstance | null)[] = []
+
+export function getParentInstance(): GenericComponentInstance | null {
+  const parent =
+    slotParentStack.length > 0
+      ? slotParentStack[slotParentStack.length - 1]
+      : null
+  return parent || currentInstance
+}
+
 /**
  * Wraps a slot function to execute in the parent component's context.
  *
@@ -140,9 +151,11 @@ export function withVaporCtx(fn: Function): BlockFn {
   const instance = currentInstance as VaporComponentInstance
   return (...args: any[]) => {
     const prev = setCurrentInstance(instance)
+    slotParentStack.push(prev[0])
     try {
       return fn(...args)
     } finally {
+      slotParentStack.pop()
       setCurrentInstance(...prev)
     }
   }

packages/runtime-vapor/src/components/Teleport.ts

@@ -3,14 +3,14 @@ import {
   MismatchTypes,
   type TeleportProps,
   type TeleportTargetElement,
-  currentInstance,
   isMismatchAllowed,
   isTeleportDeferred,
   isTeleportDisabled,
   queuePostFlushCb,
   resolveTeleportTarget,
   warn,
 } from '@vue/runtime-dom'
+import { getParentInstance } from '../componentSlots'
 import { type Block, type BlockFn, insert, remove } from '../block'
 import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
@@ -56,13 +56,13 @@ export class TeleportFragment extends VaporFragment {
   placeholder?: Node
   mountContainer?: ParentNode | null
   mountAnchor?: Node | null
-  parentComponent: GenericComponentInstance
+  parentComponent: GenericComponentInstance | null
 
   constructor(props: LooseRawProps, slots: LooseRawSlots) {
     super([])
     this.rawProps = props
     this.rawSlots = slots
-    this.parentComponent = currentInstance as GenericComponentInstance
+    this.parentComponent = getParentInstance()
     this.anchor = isHydrating
       ? undefined
       : __DEV__

packages/runtime-vapor/src/dom/prop.ts

@@ -15,7 +15,6 @@ import {
 import { on } from './event'
 import {
   MismatchTypes,
-  currentInstance,
   getAttributeMismatch,
   isMapEqual,
   isMismatchAllowed,
@@ -37,6 +36,7 @@ import {
   isApplyingFallthroughProps,
   isVaporComponent,
 } from '../component'
+import { getParentInstance } from '../componentSlots'
 import { isHydrating, logMismatchError } from './hydration'
 import type { Block } from '../block'
 import type { VaporElement } from '../apiDefineVaporCustomElement'
@@ -50,9 +50,14 @@ type TargetElement = Element & {
   _value?: any
 }
 
-const hasFallthroughKey = (key: string) =>
-  (currentInstance as VaporComponentInstance).hasFallthrough &&
-  key in currentInstance!.attrs
+const hasFallthroughKey = (key: string) => {
+  const instance = getParentInstance()
+  return !!(
+    instance &&
+    (instance as VaporComponentInstance).hasFallthrough &&
+    key in instance.attrs
+  )
+}
 
 export function setProp(el: any, key: string, value: any): void {
   if (key in el) {

packages/runtime-vapor/src/vdomInterop.ts

@@ -59,7 +59,7 @@ import {
 } from '@vue/shared'
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots, VaporSlot } from './componentSlots'
-import { currentSlotScopeIds } from './componentSlots'
+import { currentSlotScopeIds, getParentInstance } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { _next, createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
@@ -276,7 +276,8 @@ function createVDOMComponent(
   rawProps?: LooseRawProps | null,
   rawSlots?: LooseRawSlots | null,
 ): VaporFragment {
-  const parentInstance = currentInstance as VaporComponentInstance
+  const parentInstance = getParentInstance() as VaporComponentInstance | null
+  const scopeOwner = currentInstance as VaporComponentInstance | null
   const frag = new VaporFragment([])
   const vnode = (frag.vnode = createVNode(
     component,
@@ -286,6 +287,9 @@ function createVDOMComponent(
     { props: component.props },
     rawProps as RawProps,
     rawSlots as RawSlots,
+    parentInstance ? parentInstance.appContext : undefined,
+    undefined,
+    parentInstance,
   )
 
   // overwrite how the vdom instance handles props
@@ -312,7 +316,10 @@ function createVDOMComponent(
     // unset ref
     if (rawRef) vdomSetRef(rawRef, null, null, vnode, true)
     if (transition) setVNodeTransitionHooks(vnode, transition)
-    if (vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
+    if (
+      parentInstance &&
+      vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+    ) {
       vdomDeactivate(
         vnode,
         findParentKeepAlive(parentInstance)!.getStorageContainer(),
@@ -332,7 +339,7 @@ function createVDOMComponent(
     frag.nodes = vnode.el as any
   }
 
-  vnode.scopeId = parentInstance && parentInstance.type.__scopeId!
+  vnode.scopeId = scopeOwner && scopeOwner.type.__scopeId!
   vnode.slotScopeIds = currentSlotScopeIds
 
   frag.insert = (parentNode, anchor, transition) => {