chore: minor tweaks

Author: edison1105

packages/runtime-vapor/__tests__/components/Teleport.spec.ts

@@ -16,7 +16,6 @@ import {
   setInsertionState,
   setText,
   template,
-  useVaporCssVars,
   vaporInteropPlugin,
   withVaporDirectives,
 } from '@vue/runtime-vapor'
@@ -27,7 +26,6 @@ import {
   onBeforeUnmount,
   onMounted,
   onUnmounted,
-  reactive,
   ref,
   shallowRef,
 } from 'vue'
@@ -1331,67 +1329,4 @@ function runSharedTests(deferMode: boolean): void {
     expect(target.innerHTML).toBe('content')
     app.unmount()
   })
-
-  test('with css vars', async () => {
-    const state = reactive({ color: 'red' })
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-
-    const value = ref(true)
-    const Child = defineVaporComponent({
-      setup(_, { slots }) {
-        return slots.default!()
-      },
-    })
-
-    const Comp = defineVaporComponent({
-      setup() {
-        const t = createComponent(Child, null, {
-          default: () => {
-            return createComponent(Child, null, {
-              default: () => {
-                return createIf(
-                  () => value.value,
-                  () => {
-                    return template('<div></div>')()
-                  },
-                  () => {
-                    return template('<span></span>')()
-                  },
-                )
-              },
-            })
-          },
-        })
-
-        return t
-      },
-    })
-
-    define({
-      setup() {
-        useVaporCssVars(() => state)
-        const n1 = createComponent(
-          VaporTeleport,
-          { to: () => target },
-          {
-            default: () => createComponent(Comp),
-          },
-        )
-        return [n1]
-      },
-    }).render()
-
-    await nextTick()
-    for (const c of [].slice.call(target.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-      expect((c as HTMLElement).outerHTML.includes('data-v-owner')).toBe(true)
-    }
-    value.value = false
-    await nextTick()
-    for (const c of [].slice.call(target.children as any)) {
-      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
-      expect((c as HTMLElement).outerHTML.includes('data-v-owner')).toBe(true)
-    }
-  })
 }

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

@@ -297,6 +297,68 @@ describe('useVaporCssVars', () => {
     expect(host.children[0].outerHTML.includes('data-v-owner')).toBe(true)
   })
 
+  test('with teleport and nested component', async () => {
+    const state = reactive({ color: 'red' })
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+
+    const value = ref(true)
+    const Child = defineVaporComponent({
+      setup(_, { slots }) {
+        return slots.default!()
+      },
+    })
+
+    const Comp = defineVaporComponent({
+      setup() {
+        return createComponent(Child, null, {
+          default: () => {
+            return createComponent(Child, null, {
+              default: () => {
+                return createIf(
+                  () => value.value,
+                  () => {
+                    return template('<div></div>')()
+                  },
+                  () => {
+                    return template('<span></span>')()
+                  },
+                )
+              },
+            })
+          },
+        })
+      },
+    })
+
+    define({
+      setup() {
+        useVaporCssVars(() => state)
+        const n1 = createComponent(
+          VaporTeleport,
+          { to: () => target },
+          {
+            default: () => createComponent(Comp),
+          },
+        )
+        return n1
+      },
+    }).render()
+
+    await nextTick()
+    let el = target.children[0] as HTMLElement
+    expect(el.tagName).toBe('DIV')
+    expect(el.outerHTML.includes('data-v-owner')).toBe(true)
+    expect(el.style.getPropertyValue(`--color`)).toBe('red')
+
+    value.value = false
+    await nextTick()
+    el = target.children[0] as HTMLElement
+    expect(el.tagName).toBe('SPAN')
+    expect(el.outerHTML.includes('data-v-owner')).toBe(true)
+    expect(el.style.getPropertyValue(`--color`)).toBe('red')
+  })
+
   test('with string style', async () => {
     const state = reactive({ color: 'red' })
     const root = document.createElement('div')

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

@@ -108,7 +108,8 @@ export class TeleportFragment extends VaporFragment {
       )
     })
     const nodes = this.nodes
-    // register updateCssVars to root fragments's update hooks so that
+
+    // register updateCssVars to nested fragments's update hooks so that
     // it will be called when root fragment changed
     if (this.parentComponent && this.parentComponent.ut) {
       this.registerUpdateCssVars(nodes)
@@ -125,17 +126,16 @@ export class TeleportFragment extends VaporFragment {
     }
   }
 
-  private registerUpdateCssVars(nodes: Block) {
-    if (isFragment(nodes)) {
-      ;(nodes.onUpdated || (nodes.onUpdated = [])).push(() =>
+  private registerUpdateCssVars(block: Block) {
+    if (isFragment(block)) {
+      ;(block.onUpdated || (block.onUpdated = [])).push(() =>
         updateCssVars(this),
       )
-      this.registerUpdateCssVars(nodes.nodes)
-    } else if (isVaporComponent(nodes)) {
-      ;(nodes.u || (nodes.u = [])).push(() => updateCssVars(this))
-      this.registerUpdateCssVars(nodes.block)
-    } else if (isArray(nodes)) {
-      nodes.forEach(node => this.registerUpdateCssVars(node))
+      this.registerUpdateCssVars(block.nodes)
+    } else if (isVaporComponent(block)) {
+      this.registerUpdateCssVars(block.block)
+    } else if (isArray(block)) {
+      block.forEach(node => this.registerUpdateCssVars(node))
     }
   }