wip: refactor

packages/runtime-vapor/src/component.ts

@@ -60,11 +60,7 @@ import {
 import { hmrReload, hmrRerender } from './hmr'
 import { isHydrating, locateHydrationNode } from './dom/hydration'
 import { insertionAnchor, insertionParent } from './insertionState'
-import {
+import type { VaporTeleportImpl } from './components/Teleport'
-  type VaporTeleportImpl,
-  instanceToTeleportMap,
-  teleportStack,
-} from './components/Teleport'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -205,11 +201,6 @@ export function createComponent(
   )
 
   if (__DEV__) {
-    let teleport = teleportStack[teleportStack.length - 1]
-    if (teleport) {
-      instanceToTeleportMap.set(instance, teleport)
-    }
-
     pushWarningContext(instance)
     startMeasure(instance, `init`)
 

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

@@ -10,44 +10,19 @@ import {
 } from '@vue/runtime-dom'
 import { type Block, type BlockFn, insert, remove } from '../block'
 import { createComment, createTextNode, querySelector } from '../dom/node'
-import type {
+import {
-  LooseRawProps,
+  type LooseRawProps,
-  LooseRawSlots,
+  type LooseRawSlots,
-  VaporComponentInstance,
+  type VaporComponentInstance,
+  isVaporComponent,
 } from '../component'
 import { rawPropsProxyHandlers } from '../componentProps'
 import { renderEffect } from '../renderEffect'
 import { extend, isArray } from '@vue/shared'
 import { VaporFragment } from '../fragment'
 
-export const teleportStack: TeleportFragment[] = __DEV__
+const instanceToTeleportMap: WeakMap<VaporComponentInstance, TeleportFragment> =
-  ? ([] as TeleportFragment[])
+  __DEV__ ? new WeakMap() : (undefined as any)
-  : (undefined as any)
-export const instanceToTeleportMap: WeakMap<
-  VaporComponentInstance,
-  TeleportFragment
-> = __DEV__ ? new WeakMap() : (undefined as any)
-
-/**
- * dev only
- * when the root child component updates, synchronously update
- * the TeleportFragment's nodes.
- */
-export function handleTeleportRootComponentHmrReload(
-  instance: VaporComponentInstance,
-  newInstance: VaporComponentInstance,
-): void {
-  const teleport = instanceToTeleportMap.get(instance)
-  if (teleport) {
-    instanceToTeleportMap.set(newInstance, teleport)
-    if (teleport.nodes === instance) {
-      teleport.nodes = newInstance
-    } else if (isArray(teleport.nodes)) {
-      const i = teleport.nodes.indexOf(instance)
-      if (i !== -1) teleport.nodes[i] = newInstance
-    }
-  }
-}
 
 export const VaporTeleportImpl = {
   name: 'VaporTeleport',
@@ -59,11 +34,9 @@ export const VaporTeleportImpl = {
       ? new TeleportFragment('teleport')
       : new TeleportFragment()
 
-    const updateChildrenEffect = renderEffect(() => {
+    const updateChildrenEffect = renderEffect(() =>
-      __DEV__ && teleportStack.push(frag)
+      frag.updateChildren(slots.default && (slots.default as BlockFn)()),
-      frag.updateChildren(slots.default && (slots.default as BlockFn)())
+    )
-      __DEV__ && teleportStack.pop()
-    })
 
     const updateEffect = renderEffect(() => {
       frag.update(
@@ -138,6 +111,18 @@ class TeleportFragment extends VaporFragment {
       // mount new nodes
       insert((this.nodes = children), this.currentParent, this.currentAnchor)
     }
+
+    if (__DEV__) {
+      if (isVaporComponent(children)) {
+        instanceToTeleportMap.set(children, this)
+      } else if (isArray(children)) {
+        children.forEach(node => {
+          if (isVaporComponent(node)) {
+            instanceToTeleportMap.set(node, this)
+          }
+        })
+      }
+    }
   }
 
   update(props: TeleportProps): void {
@@ -256,3 +241,24 @@ export const VaporTeleport = VaporTeleportImpl as unknown as {
     }
   }
 }
+
+/**
+ * dev only
+ * when the root child component updates, synchronously update
+ * the TeleportFragment's nodes.
+ */
+export function handleTeleportRootComponentHmrReload(
+  instance: VaporComponentInstance,
+  newInstance: VaporComponentInstance,
+): void {
+  const teleport = instanceToTeleportMap.get(instance)
+  if (teleport) {
+    instanceToTeleportMap.set(newInstance, teleport)
+    if (teleport.nodes === instance) {
+      teleport.nodes = newInstance
+    } else if (isArray(teleport.nodes)) {
+      const i = teleport.nodes.indexOf(instance)
+      if (i !== -1) teleport.nodes[i] = newInstance
+    }
+  }
+}