wip: slotScopeIds

Author: edison1105

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

@@ -200,7 +200,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() {

packages/runtime-vapor/src/block.ts

@@ -24,6 +24,7 @@ export class VaporFragment {
   anchor?: Node
   insert?: (parent: ParentNode, anchor: Node | null) => void
   remove?: (parent?: ParentNode) => void
+  scopeIds?: string[]
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -133,6 +134,12 @@ export function insert(
       insert(block.nodes, parent, anchor)
     }
     if (block.anchor) insert(block.anchor, parent, anchor)
+
+    if (block.scopeIds) {
+      for (const scopeId of block.scopeIds) {
+        setScopeId(block, scopeId)
+      }
+    }
   }
 }
 
@@ -203,16 +210,16 @@ export function setScopeId(block: Block, scopeId: string): void {
   }
 }
 
-export function setComponentScopeId(instance: VaporComponentInstance): void {
+export function setComponentScopeId(
+  instance: VaporComponentInstance,
+  scopeId?: string,
+): void {
   const parent = instance.parent
   if (!parent) return
-
   if (isArray(instance.block) && instance.block.length > 1) return
 
-  const scopeId = parent.type.__scopeId
-  if (scopeId) {
-    setScopeId(instance.block, scopeId)
-  }
+  if (!scopeId) scopeId = parent.type.__scopeId
+  if (scopeId) setScopeId(instance.block, scopeId)
 
   // inherit scopeId from vdom parent
   if (

packages/runtime-vapor/src/componentSlots.ts

@@ -156,6 +156,12 @@ export function createSlot(
     }
   }
 
+  const scopeIds: string[] = (fragment.scopeIds = [])
+  const parentScopeId = instance.parent && instance.parent.type.__scopeId
+  if (parentScopeId) scopeIds.push(parentScopeId)
+  const scopeId = instance.type.__scopeId
+  if (scopeId) scopeIds.push(`${scopeId}-s`)
+
   if (!isHydrating && _insertionParent) {
     insert(fragment, _insertionParent, _insertionAnchor)
   }