wip: refactor

Author: edison1105

packages/reactivity/src/effectScope.ts

@@ -87,6 +87,13 @@ export class EffectScope implements ReactiveNode {
     if (sub !== undefined) {
       unlink(sub)
     }
+    this.cleanup()
+  }
+
+  /**
+   * @internal
+   */
+  cleanup(): void {
     cleanup(this)
   }
 }

packages/runtime-vapor/src/block.ts

@@ -64,13 +64,16 @@ export function insert(
       insert(b, parent, anchor)
     }
   } else {
-    if (block.anchor) insert(block.anchor, parent, anchor)
+    if (block.anchor) {
+      insert(block.anchor, parent, anchor)
+      anchor = block.anchor
+    }
     // fragment
     if (block.insert) {
       // TODO handle hydration for vdom interop
-      block.insert(parent, block.anchor || anchor)
+      block.insert(parent, anchor)
     } else {
-      insert(block.nodes, parent, block.anchor || anchor)
+      insert(block.nodes, parent, anchor)
     }
   }
 }

packages/runtime-vapor/src/component.ts

@@ -58,7 +58,7 @@ import {
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
 import { isHydrating, locateHydrationNode } from './dom/hydration'
-import { isVaporTeleport } from './components/Teleport'
+import { type TeleportFragment, isVaporTeleport } from './components/Teleport'
 import {
   insertionAnchor,
   insertionParent,
@@ -405,8 +405,8 @@ export class VaporComponentInstance implements GenericComponentInstance {
   setupState?: Record<string, any>
   devtoolsRawSetupState?: any
   hmrRerender?: () => void
-  hmrRerenderEffects?: (() => void)[]
   hmrReload?: (newComp: VaporComponent) => void
+  parentTeleport?: TeleportFragment | null
   propsOptions?: NormalizedPropsOptions
   emitsOptions?: ObjectEmitsOptions | null
   isSingleRoot?: boolean

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

@@ -1,8 +1,8 @@
 import {
   type TeleportProps,
-  currentInstance,
   isTeleportDeferred,
   isTeleportDisabled,
+  onScopeDispose,
   queuePostFlushCb,
   resolveTeleportTarget,
   warn,
@@ -12,29 +12,25 @@ import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
   type LooseRawSlots,
-  type VaporComponentInstance,
   isVaporComponent,
 } from '../component'
 import { rawPropsProxyHandlers } from '../componentProps'
 import { renderEffect } from '../renderEffect'
 import { extend, isArray } from '@vue/shared'
 import { VaporFragment } from '../fragment'
 
-const instanceToTeleportMap: WeakMap<VaporComponentInstance, TeleportFragment> =
-  __DEV__ ? new WeakMap() : (undefined as any)
-
 export const VaporTeleportImpl = {
   name: 'VaporTeleport',
   __isTeleport: true,
   __vapor: true,
 
   process(props: LooseRawProps, slots: LooseRawSlots): TeleportFragment {
     const frag = new TeleportFragment()
-    const updateChildrenEffect = renderEffect(() =>
+    renderEffect(() =>
       frag.updateChildren(slots.default && (slots.default as BlockFn)()),
     )
 
-    const updateEffect = renderEffect(() => {
+    renderEffect(() => {
       // access the props to trigger tracking
       frag.props = extend(
         {},
@@ -43,6 +39,8 @@ export const VaporTeleportImpl = {
       frag.update()
     })
 
+    onScopeDispose(frag.remove)
+
     if (__DEV__) {
       // used in `normalizeBlock` to get nodes of TeleportFragment during
       // HMR updates. returns empty array if content is mounted in target
@@ -51,27 +49,12 @@ export const VaporTeleportImpl = {
         return frag.parent !== frag.currentParent ? [] : frag.nodes
       }
 
-      // for HMR rerender
-      const instance = currentInstance as VaporComponentInstance
-      ;(
-        instance!.hmrRerenderEffects || (instance!.hmrRerenderEffects = [])
-      ).push(() => {
-        // remove the teleport content
-        frag.remove()
-
-        // stop effects
-        updateChildrenEffect.stop()
-        updateEffect.stop()
-      })
-
-      // for HMR reload
       const nodes = frag.nodes
       if (isVaporComponent(nodes)) {
-        instanceToTeleportMap.set(nodes, frag)
+        nodes.parentTeleport = frag
       } else if (isArray(nodes)) {
         nodes.forEach(
-          node =>
-            isVaporComponent(node) && instanceToTeleportMap.set(node, frag),
+          node => isVaporComponent(node) && (node.parentTeleport = frag),
         )
       }
     }
@@ -221,25 +204,3 @@ export function isVaporTeleport(
 ): value is typeof VaporTeleportImpl {
   return value === VaporTeleportImpl
 }
-
-/**
- * dev only
- * during root component HMR reload, since the old component will be unmounted
- * and a new one will be mounted, we need to update the teleport's nodes
- * to ensure they are up to date.
- */
-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
-    }
-  }
-}

packages/runtime-vapor/src/hmr.ts

@@ -12,17 +12,14 @@ import {
   mountComponent,
   unmountComponent,
 } from './component'
-import { handleTeleportRootComponentHmrReload } from './components/Teleport'
+import { isArray } from '@vue/shared'
 
 export function hmrRerender(instance: VaporComponentInstance): void {
   const normalized = normalizeBlock(instance.block)
   const parent = normalized[0].parentNode!
   const anchor = normalized[normalized.length - 1].nextSibling
   remove(instance.block, parent)
-  if (instance.hmrRerenderEffects) {
-    instance.hmrRerenderEffects.forEach(e => e())
-    instance.hmrRerenderEffects.length = 0
-  }
+  instance.scope.cleanup()
   const prev = setCurrentInstance(instance)
   pushWarningContext(instance)
   devRender(instance)
@@ -39,7 +36,8 @@ export function hmrReload(
   const parent = normalized[0].parentNode!
   const anchor = normalized[normalized.length - 1].nextSibling
   unmountComponent(instance, parent)
-  const prev = setCurrentInstance(instance.parent)
+  const parentInstance = instance.parent as VaporComponentInstance | null
+  const prev = setCurrentInstance(parentInstance)
   const newInstance = createComponent(
     newComp,
     instance.rawProps,
@@ -48,5 +46,59 @@ export function hmrReload(
   )
   setCurrentInstance(...prev)
   mountComponent(newInstance, parent, anchor)
-  handleTeleportRootComponentHmrReload(instance, newInstance)
+
+  updateParentBlockOnHmrReload(parentInstance, instance, newInstance)
+  updateParentTeleportOnHmrReload(instance, newInstance)
+}
+
+/**
+ * dev only
+ * update parentInstance.block to ensure that the correct parent and
+ * anchor are found during parentInstance HMR rerender/reload, as
+ * `normalizeBlock` relies on the current instance.block
+ */
+function updateParentBlockOnHmrReload(
+  parentInstance: VaporComponentInstance | null,
+  instance: VaporComponentInstance,
+  newInstance: VaporComponentInstance,
+): void {
+  if (parentInstance) {
+    if (parentInstance.block === instance) {
+      parentInstance.block = newInstance
+    } else if (isArray(parentInstance.block)) {
+      for (let i = 0; i < parentInstance.block.length; i++) {
+        if (parentInstance.block[i] === instance) {
+          parentInstance.block[i] = newInstance
+          break
+        }
+      }
+    }
+  }
+}
+
+/**
+ * dev only
+ * during root component HMR reload, since the old component will be unmounted
+ * and a new one will be mounted, we need to update the teleport's nodes
+ * to ensure that the correct parent and anchor are found during parentInstance
+ * HMR rerender/reload, as `normalizeBlock` relies on the current instance.block
+ */
+export function updateParentTeleportOnHmrReload(
+  instance: VaporComponentInstance,
+  newInstance: VaporComponentInstance,
+): void {
+  const teleport = instance.parentTeleport
+  if (teleport) {
+    newInstance.parentTeleport = teleport
+    if (teleport.nodes === instance) {
+      teleport.nodes = newInstance
+    } else if (isArray(teleport.nodes)) {
+      for (let i = 0; i < teleport.nodes.length; i++) {
+        if (teleport.nodes[i] === instance) {
+          teleport.nodes[i] = newInstance
+          break
+        }
+      }
+    }
+  }
 }

packages/runtime-vapor/src/renderEffect.ts

@@ -82,15 +82,10 @@ class RenderEffect extends ReactiveEffect {
   }
 }
 
-export function renderEffect(
-  fn: () => void,
-  noLifecycle = false,
-): RenderEffect {
+export function renderEffect(fn: () => void, noLifecycle = false): void {
   const effect = new RenderEffect(fn)
   if (noLifecycle) {
     effect.fn = fn
   }
   effect.run()
-
-  return effect
 }