chore: Merge branch 'edison/feat/setScopeId' into edison/testVapor

Author: edison1105

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

@@ -0,0 +1,118 @@
+import {
+  createComponent,
+  createSlot,
+  defineVaporComponent,
+  setInsertionState,
+  template,
+} from '../src'
+import { makeRender } from './_utils'
+
+const define = makeRender()
+
+describe('scopeId', () => {
+  test('should attach scopeId to child component', () => {
+    const Child = defineVaporComponent({
+      __scopeId: 'child',
+      setup() {
+        return template('<div child></div>', true)()
+      },
+    })
+
+    const { html } = define({
+      __scopeId: 'parent',
+      setup() {
+        const t0 = template('<div parent></div>', true)
+        const n1 = t0() as any
+        setInsertionState(n1)
+        createComponent(Child)
+        return n1
+      },
+    }).render()
+    expect(html()).toBe(`<div parent=""><div child="" parent=""></div></div>`)
+  })
+
+  test('should attach scopeId to nested child component', () => {
+    const Child = defineVaporComponent({
+      __scopeId: 'child',
+      setup() {
+        return template('<div child></div>', true)()
+      },
+    })
+
+    const Parent = defineVaporComponent({
+      __scopeId: 'parent',
+      setup() {
+        return createComponent(Child)
+      },
+    })
+
+    const { html } = define({
+      __scopeId: 'app',
+      setup() {
+        const t0 = template('<div app></div>', true)
+        const n1 = t0() as any
+        setInsertionState(n1)
+        createComponent(Parent)
+        return n1
+      },
+    }).render()
+    expect(html()).toBe(
+      `<div app=""><div child="" parent="" app=""></div></div>`,
+    )
+  })
+
+  test.todo('should attach scopeId to suspense content', async () => {})
+
+  // :slotted basic
+  test('should work on slots', () => {
+    const Child = defineVaporComponent({
+      __scopeId: 'child',
+      setup() {
+        const n1 = template('<div child></div>', true)() as any
+        setInsertionState(n1)
+        createSlot('default', null)
+        return n1
+      },
+    })
+
+    const Child2 = defineVaporComponent({
+      __scopeId: 'child2',
+      setup() {
+        return template('<span child2></span>', true)()
+      },
+    })
+
+    const { html } = define({
+      __scopeId: 'parent',
+      setup() {
+        const n2 = createComponent(
+          Child,
+          null,
+          {
+            default: () => {
+              const n0 = template('<div parent></div>')()
+              const n1 = createComponent(Child2)
+              return [n0, n1]
+            },
+          },
+          true,
+        )
+        return n2
+      },
+    }).render()
+
+    expect(html()).toBe(
+      `<div child="" parent="">` +
+        `<div parent="" child-s=""></div>` +
+        // component inside slot should have:
+        // - scopeId from template context
+        // - slotted scopeId from slot owner
+        // - its own scopeId
+        `<span child2="" child="" parent="" child-s=""></span>` +
+        `<!--slot-->` +
+        `</div>`,
+    )
+  })
+
+  test.todo(':slotted on forwarded slots', async () => {})
+})

packages/runtime-vapor/src/block.ts

@@ -27,8 +27,9 @@ export type BlockFn = (...args: any[]) => Block
 export class VaporFragment {
   nodes: Block
   anchor?: Node
-  insert?: (parent: ParentNode, anchor: Node | null) => void
+  insert?: (parent: ParentNode, anchor: Node | null, scopeId?: string) => void
   remove?: (parent?: ParentNode) => void
+  slotScopeIds?: string[]
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -70,7 +71,7 @@ export class DynamicFragment extends VaporFragment {
     if (render) {
       this.scope = new EffectScope()
       this.nodes = this.scope.run(render) || []
-      if (parent) insert(this.nodes, parent, this.anchor)
+      if (parent) insert(this.nodes, parent, this.anchor, this.slotScopeIds)
     } else {
       this.scope = undefined
       this.nodes = []
@@ -134,28 +135,39 @@ export function insert(
   block: Block,
   parent: ParentNode,
   anchor: Node | null | 0 = null, // 0 means prepend
+  scopeIds?: string[],
 ): void {
   anchor = anchor === 0 ? parent.firstChild : anchor
   if (block instanceof Node) {
+    if (scopeIds && block instanceof Element) {
+      for (const id of scopeIds) {
+        block.setAttribute(id, '')
+      }
+    }
     if (!isHydrating) {
       parent.insertBefore(block, anchor)
     }
   } else if (isVaporComponent(block)) {
     if (block.isMounted) {
-      insert(block.block!, parent, anchor)
+      insert(block.block!, parent, anchor, scopeIds)
     } else {
-      mountComponent(block, parent, anchor)
+      mountComponent(block, parent, anchor, scopeIds)
     }
   } else if (isArray(block)) {
     for (const b of block) {
-      insert(b, parent, anchor)
+      insert(b, parent, anchor, scopeIds)
     }
   } else {
     // fragment
     if (block.insert) {
       block.insert(parent, anchor)
     } else {
-      insert(block.nodes, parent, anchor)
+      if (block.slotScopeIds) {
+        scopeIds = scopeIds
+          ? scopeIds.concat(block.slotScopeIds)
+          : block.slotScopeIds
+      }
+      insert(block.nodes, parent, anchor, scopeIds)
     }
     if (block.anchor) insert(block.anchor, parent, anchor)
   }

packages/runtime-vapor/src/component.ts

@@ -482,6 +482,10 @@ export function createComponentWithFallback(
   // mark single root
   ;(el as any).$root = isSingleRoot
 
+  // set scopeId
+  const scopeId = currentInstance && currentInstance.type.__scopeId
+  if (scopeId) el.setAttribute(scopeId, '')
+
   if (rawProps) {
     renderEffect(() => {
       setDynamicProps(el, [resolveDynamicProps(rawProps as RawProps)])
@@ -503,12 +507,17 @@ export function mountComponent(
   instance: VaporComponentInstance,
   parent: ParentNode,
   anchor?: Node | null | 0,
+  scopeIds?: string[],
 ): void {
   if (__DEV__) {
     startMeasure(instance, `mount`)
   }
   if (instance.bm) invokeArrayFns(instance.bm)
-  insert(instance.block, parent, anchor)
+  const parentScopeId = instance.parent && instance.parent.type.__scopeId
+  if (parentScopeId) {
+    scopeIds = scopeIds ? [parentScopeId].concat(scopeIds) : [parentScopeId]
+  }
+  insert(instance.block, parent, anchor, scopeIds)
   if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
   instance.isMounted = true
   if (__DEV__) {

packages/runtime-vapor/src/componentSlots.ts

@@ -144,6 +144,9 @@ export function createSlot(
       isHydrating || __DEV__
         ? new DynamicFragment(SLOT_ANCHOR_LABEL)
         : new DynamicFragment()
+    fragment.slotScopeIds = instance.type.__scopeId
+      ? [`${instance.type.__scopeId}-s`]
+      : undefined
     const isDynamicName = isFunction(name)
     const renderSlot = () => {
       const slot = getSlot(rawSlots, isFunction(name) ? name() : name)
@@ -185,7 +188,14 @@ export function createSlot(
       // for vdom interop fragment, `fragment.insert` handles both hydration and mounting
       fragment.insert)
   ) {
-    insert(fragment, _insertionParent, _insertionAnchor)
+    insert(
+      fragment,
+      _insertionParent,
+      _insertionAnchor,
+      instance.parent && instance.parent.type.__scopeId
+        ? [instance.parent.type.__scopeId]
+        : undefined,
+    )
   }
 
   return fragment

packages/runtime-vapor/src/vdomInterop.ts

@@ -272,6 +272,7 @@ function renderVDOMSlot(
           isFunction(name) ? name() : name,
           props,
         )
+        vnode.scopeId = parentComponent.type.__scopeId!
         if (isHydrating) {
           locateHydrationNode(true)
           ;(