wip: slotScopeIds

Author: edison1105

packages/runtime-core/src/index.ts

@@ -561,3 +561,10 @@ export { startMeasure, endMeasure } from './profiling'
  * @internal
  */
 export { initFeatureFlags } from './featureFlags'
+/**
+ * @internal
+ */
+export {
+  setCurrentRenderingInstance,
+  currentRenderingInstance,
+} from './componentRenderContext'

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

@@ -7,6 +7,7 @@ import {
   setInsertionState,
   template,
   vaporInteropPlugin,
+  withVaporCtx,
 } from '../src'
 import { makeRender } from './_utils'
 
@@ -200,7 +201,7 @@ describe('scopeId', () => {
   test.todo('should attach scopeId to suspense content', async () => {})
 
   // :slotted basic
-  test.todo('should work on slots', () => {
+  test('should work on slots', () => {
     const Child = defineVaporComponent({
       __scopeId: 'child',
       setup() {
@@ -225,11 +226,11 @@ describe('scopeId', () => {
           Child,
           null,
           {
-            default: () => {
+            default: withVaporCtx(() => {
               const n0 = template('<div parent></div>')()
               const n1 = createComponent(Child2)
               return [n0, n1]
-            },
+            }),
           },
           true,
         )
@@ -244,7 +245,7 @@ describe('scopeId', () => {
         // - scopeId from template context
         // - slotted scopeId from slot owner
         // - its own scopeId
-        `<span child2="" child="" parent="" child-s=""></span>` +
+        `<span child2="" parent="" child="" child-s=""></span>` +
         `<!--slot-->` +
         `</div>`,
     )

packages/runtime-vapor/src/block.ts

@@ -206,7 +206,6 @@ export function setScopeId(block: Block, scopeId: string): void {
 export function setComponentScopeId(instance: VaporComponentInstance): void {
   const parent = instance.parent
   if (!parent) return
-
   if (isArray(instance.block) && instance.block.length > 1) return
 
   const scopeId = parent.type.__scopeId

packages/runtime-vapor/src/component.ts

@@ -13,6 +13,7 @@ import {
   type SuspenseBoundary,
   callWithErrorHandling,
   currentInstance,
+  currentRenderingInstance,
   endMeasure,
   expose,
   nextUid,
@@ -282,6 +283,12 @@ export function createComponent(
 
   onScopeDispose(() => unmountComponent(instance), true)
 
+  // component creation during slot rendering, should inherit scopeId
+  // from current rendering instance
+  const scopeId =
+    currentRenderingInstance && currentRenderingInstance.type.__scopeId
+  if (scopeId) setScopeId(instance.block, scopeId)
+
   if (!isHydrating && _insertionParent) {
     mountComponent(instance, _insertionParent, _insertionAnchor)
   }

packages/runtime-vapor/src/componentSlots.ts

@@ -1,7 +1,18 @@
 import { EMPTY_OBJ, NO, hasOwn, isArray, isFunction } from '@vue/shared'
-import { type Block, type BlockFn, DynamicFragment, insert } from './block'
+import {
+  type Block,
+  type BlockFn,
+  DynamicFragment,
+  insert,
+  setScopeId,
+} from './block'
 import { rawPropsProxyHandlers } from './componentProps'
-import { currentInstance, isRef } from '@vue/runtime-dom'
+import {
+  type GenericComponentInstance,
+  currentInstance,
+  isRef,
+  setCurrentRenderingInstance,
+} from '@vue/runtime-dom'
 import type { LooseRawProps, VaporComponentInstance } from './component'
 import { renderEffect } from './renderEffect'
 import { insertionAnchor, insertionParent } from './insertionState'
@@ -97,6 +108,22 @@ export function forwardedSlotCreator(): (
     createSlot(name, rawProps, fallback, instance)
 }
 
+export function withVaporCtx(
+  fn: Function,
+  ctx: GenericComponentInstance | null = currentInstance,
+): () => Block {
+  return (...args: any[]): Block => {
+    const prevInstance = setCurrentRenderingInstance(ctx as any)
+    let res
+    try {
+      res = fn(...args)
+    } finally {
+      setCurrentRenderingInstance(prevInstance)
+    }
+    return res
+  }
+}
+
 export function createSlot(
   name: string | (() => string),
   rawProps?: LooseRawProps | null,
@@ -156,6 +183,9 @@ export function createSlot(
     }
   }
 
+  const scopeId = instance.type.__scopeId
+  if (scopeId) setScopeId(fragment, `${scopeId}-s`)
+
   if (!isHydrating && _insertionParent) {
     insert(fragment, _insertionParent, _insertionAnchor)
   }

packages/runtime-vapor/src/index.ts

@@ -9,7 +9,11 @@ export { insert, prepend, remove, isFragment, VaporFragment } from './block'
 export { setInsertionState } from './insertionState'
 export { createComponent, createComponentWithFallback } from './component'
 export { renderEffect } from './renderEffect'
-export { createSlot, forwardedSlotCreator } from './componentSlots'
+export {
+  createSlot,
+  forwardedSlotCreator,
+  withVaporCtx,
+} from './componentSlots'
 export { template } from './dom/template'
 export { createTextNode, child, nthChild, next } from './dom/node'
 export {