fix(runtime-vapor): separate slot owner and consumer contexts

track slot owners and consumers to keep `instance.parent` accurate in slot context

Author: alex-snezhko

packages/compiler-vapor/src/generators/component.ts

@@ -40,12 +40,7 @@ import { genEventHandler } from './event'
 import { genDirectiveModifiers, genDirectivesForElement } from './directive'
 import { genBlock } from './block'
 import { genModelHandler } from './vModel'
-import {
-  isBuiltInComponent,
-  isKeepAliveTag,
-  isTeleportTag,
-  isTransitionGroupTag,
-} from '../utils'
+import { isBuiltInComponent, isTransitionGroupTag } from '../utils'
 
 export function genCreateComponent(
   operation: CreateComponentIRNode,
@@ -467,11 +462,11 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
 
   if (
     node.type === NodeTypes.ELEMENT &&
-    // Not a real component
-    !isTeleportTag(node.tag) &&
-    // Needs to determine whether to activate/deactivate based on instance.parent being KeepAlive
-    !isKeepAliveTag(node.tag) &&
-    // Slot updates need to trigger TransitionGroup's onBeforeUpdate/onUpdated hook
+    // // Not a real component
+    // !isTeleportTag(node.tag) &&
+    // // Needs to determine whether to activate/deactivate based on instance.parent being KeepAlive
+    // !isKeepAliveTag(node.tag) &&
+    // // Slot updates need to trigger TransitionGroup's onBeforeUpdate/onUpdated hook
     !isTransitionGroupTag(node.tag)
   ) {
     // wrap with withVaporCtx to ensure correct currentInstance inside slot

packages/runtime-core/src/componentCurrentInstance.ts

@@ -92,7 +92,7 @@ export const setCurrentInstance = (
   }
 }
 
-const internalOptions = ['ce'] as const
+const internalOptions = ['ce', 'type'] as const
 
 /**
  * @internal

packages/runtime-dom/src/helpers/useCssModule.ts

@@ -1,14 +1,14 @@
-import { getCurrentInstance, warn } from '@vue/runtime-core'
+import { useInstanceOption, warn } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
 
 export function useCssModule(name = '$style'): Record<string, string> {
   if (!__GLOBAL__) {
-    const instance = getCurrentInstance()!
-    if (!instance) {
+    const { hasInstance, value: type } = useInstanceOption('type', true)
+    if (!hasInstance) {
       __DEV__ && warn(`useCssModule must be called inside setup()`)
       return EMPTY_OBJ
     }
-    const modules = instance.type.__cssModules
+    const modules = type!.__cssModules
     if (!modules) {
       __DEV__ && warn(`Current instance does not have CSS modules injected.`)
       return EMPTY_OBJ

packages/runtime-vapor/__tests__/apiInject.spec.ts

@@ -12,8 +12,10 @@ import {
 } from '@vue/runtime-dom'
 import {
   createComponent,
+  createSlot,
   createTextNode,
   createVaporApp,
+  defineVaporComponent,
   renderEffect,
 } from '../src'
 import { makeRender } from './_utils'
@@ -368,6 +370,32 @@ describe('api: provide/inject', () => {
     expect(host.innerHTML).toBe('')
   })
 
+  it('should work with slots', () => {
+    const Parent = defineVaporComponent({
+      setup() {
+        provide('test', 'hello')
+        return createSlot('default', null)
+      },
+    })
+
+    const Child = defineVaporComponent({
+      setup() {
+        const test = inject('test')
+        return createTextNode(toDisplayString(test))
+      },
+    })
+
+    const { host } = define({
+      setup() {
+        return createComponent(Parent, null, {
+          default: () => createComponent(Child),
+        })
+      },
+    }).render()
+
+    expect(host.innerHTML).toBe('hello<!--slot-->')
+  })
+
   describe('hasInjectionContext', () => {
     it('should be false outside of setup', () => {
       expect(hasInjectionContext()).toBe(false)

packages/runtime-vapor/__tests__/helpers/useCssModule.spec.ts

@@ -0,0 +1,55 @@
+import { useCssModule } from '@vue/runtime-dom'
+import { makeRender } from '../_utils'
+import { defineVaporComponent, template } from '@vue/runtime-vapor'
+
+const define = makeRender<any>()
+
+describe('useCssModule', () => {
+  function mountWithModule(modules: any, name?: string) {
+    let res
+    define(
+      defineVaporComponent({
+        __cssModules: modules,
+        setup() {
+          res = useCssModule(name)
+          const n0 = template('<div></div>')()
+          return n0
+        },
+      }),
+    ).render()
+    return res
+  }
+
+  test('basic usage', () => {
+    const modules = {
+      $style: {
+        red: 'red',
+      },
+    }
+    expect(mountWithModule(modules)).toMatchObject(modules.$style)
+  })
+
+  test('basic usage', () => {
+    const modules = {
+      foo: {
+        red: 'red',
+      },
+    }
+    expect(mountWithModule(modules, 'foo')).toMatchObject(modules.foo)
+  })
+
+  test('warn out of setup usage', () => {
+    useCssModule()
+    expect('must be called inside setup').toHaveBeenWarned()
+  })
+
+  test('warn missing injection', () => {
+    mountWithModule(undefined)
+    expect('instance does not have CSS modules').toHaveBeenWarned()
+  })
+
+  test('warn missing injection', () => {
+    mountWithModule({ $style: { red: 'red' } }, 'foo')
+    expect('instance does not have CSS module named "foo"').toHaveBeenWarned()
+  })
+})

packages/runtime-vapor/src/block.ts

@@ -253,19 +253,25 @@ export function setScopeId(block: Block, scopeIds: string[]): void {
 
 export function setComponentScopeId(instance: VaporComponentInstance): void {
   const parent = instance.parent
-  if (!parent) return
+  const slotScopeOwner = instance.slotScopeOwner
+  if (!parent && !slotScopeOwner) 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)
+  const slotScopeId = slotScopeOwner && slotScopeOwner.type.__scopeId
+  const parentScopeId = parent && parent.type.__scopeId
+
+  if (slotScopeId) {
+    scopeIds.push(slotScopeId)
+  } else if (parentScopeId) {
+    scopeIds.push(parentScopeId)
   }
 
   // inherit scopeId from vdom parent
   if (
+    parent &&
     parent.subTree &&
     (parent.subTree.component as any) === instance &&
     parent.vnode!.scopeId

packages/runtime-vapor/src/component.ts

@@ -71,6 +71,8 @@ import {
   type VaporSlot,
   dynamicSlotsProxyHandlers,
   getSlot,
+  getSlotConsumer,
+  getSlotScopeOwner,
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
 import {
@@ -178,8 +180,10 @@ export function createComponent(
   rawSlots?: LooseRawSlots | null,
   isSingleRoot?: boolean,
   once?: boolean,
-  appContext: GenericAppContext = (currentInstance &&
-    currentInstance.appContext) ||
+  appContext: GenericAppContext = (((getSlotScopeOwner() as VaporComponentInstance | null) ||
+    (currentInstance as VaporComponentInstance | null)) &&
+    ((getSlotScopeOwner() as VaporComponentInstance | null) ||
+      (currentInstance as VaporComponentInstance | null))!.appContext) ||
     emptyContext,
 ): VaporComponentInstance {
   const _insertionParent = insertionParent
@@ -191,15 +195,19 @@ export function createComponent(
     resetInsertionState()
   }
 
+  const parentInstance =
+    (getSlotConsumer() as VaporComponentInstance | null) ||
+    (currentInstance as VaporComponentInstance | null)
+
   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 +218,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 +266,7 @@ export function createComponent(
     rawSlots as RawSlots,
     appContext,
     once,
+    parentInstance,
   )
 
   // HMR
@@ -475,6 +480,9 @@ export class VaporComponentInstance implements GenericComponentInstance {
 
   slots: StaticSlots
 
+  // slot template owner for scope inheritance
+  slotScopeOwner: VaporComponentInstance | null
+
   // to hold vnode props / slots in vdom interop mode
   rawPropsRef?: ShallowRef<any>
   rawSlotsRef?: ShallowRef<any>
@@ -541,17 +549,18 @@ 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
+    this.parent = parent
+    this.root = parent ? parent.root : this
 
-    if (currentInstance) {
-      this.appContext = currentInstance.appContext
-      this.provides = currentInstance.provides
-      this.ids = currentInstance.ids
+    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)
@@ -600,6 +609,8 @@ export class VaporComponentInstance implements GenericComponentInstance {
         : rawSlots
       : EMPTY_OBJ
 
+    this.slotScopeOwner = getSlotScopeOwner() as VaporComponentInstance | null
+
     // apply custom element special handling
     if (comp.ce) {
       comp.ce(this)
@@ -672,7 +683,8 @@ export function createPlainElement(
   ;(el as any).$root = isSingleRoot
 
   if (!isHydrating) {
-    const scopeId = currentInstance!.type.__scopeId
+    const scopeOwner = getSlotScopeOwner() || currentInstance
+    const scopeId = scopeOwner && scopeOwner.type.__scopeId
     if (scopeId) setScopeId(el, [scopeId])
   }