wip: work with teleport

Author: edison1105

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

@@ -1,4 +1,5 @@
 import {
+  VaporTeleport,
   createComponent,
   createIf,
   createPlainElement,
@@ -160,13 +161,39 @@ describe('useVaporCssVars', () => {
     }
   })
 
-  test.todo('with teleport', async () => {})
+  test('with teleport', async () => {
+    const state = reactive({ color: 'red' })
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+
+    define({
+      setup() {
+        useVaporCssVars(() => state)
+        return createComponent(
+          VaporTeleport,
+          {
+            to: () => target,
+          },
+          {
+            default: () => template('<div></div>', true)(),
+          },
+        )
+      },
+    }).render()
+
+    await nextTick()
+    expect(target.innerHTML).toBe('<div style="--color: red;"></div>')
+
+    state.color = 'green'
+    await nextTick()
+    expect(target.innerHTML).toBe('<div style="--color: green;"></div>')
+  })
 
   test.todo('with teleport in child slot', async () => {})
 
-  test('with teleport(change subTree)', async () => {})
+  test.todo('with teleport(change subTree)', async () => {})
 
-  test('with teleport(disabled)', async () => {})
+  test.todo('with teleport(disabled)', async () => {})
 
   test('with string style', async () => {
     const state = reactive({ color: 'red' })

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

@@ -162,6 +162,7 @@ export class TeleportFragment extends VaporFragment {
         }
 
         mount(target, this.targetAnchor!)
+        updateCssVars(this, false)
       } else if (__DEV__) {
         warn(
           `Invalid Teleport target on ${this.targetAnchor ? 'update' : 'mount'}:`,
@@ -174,6 +175,7 @@ export class TeleportFragment extends VaporFragment {
     // mount into main container
     if (isTeleportDisabled(this.resolvedProps!)) {
       mount(this.parent, this.anchor!)
+      updateCssVars(this, true)
     }
     // mount into target container
     else {
@@ -330,3 +332,23 @@ function locateTeleportEndAnchor(
   }
   return null
 }
+
+function updateCssVars(frag: TeleportFragment, isDisabled: boolean) {
+  const ctx = currentInstance as GenericComponentInstance
+  if (ctx && ctx.ut) {
+    let node, anchor
+    if (isDisabled) {
+      node = frag.placeholder
+      anchor = frag.anchor
+    } else {
+      node = frag.targetStart
+      anchor = frag.targetAnchor
+    }
+    while (node && node !== anchor) {
+      if (node.nodeType === 1)
+        (node as Element).setAttribute('data-v-owner', String(ctx.uid))
+      node = node.nextSibling
+    }
+    ctx.ut()
+  }
+}