From: daiwei Date: Tue, 25 Mar 2025 03:10:50 +0000 (+0800) Subject: wip: hmr updating X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=90c2e20e169251d05d78a51e8e0e5d63eee89768;p=thirdparty%2Fvuejs%2Fcore.git wip: hmr updating --- diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index 2855fa9ce9..4d5c6d0b78 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/packages/runtime-vapor/src/component.ts @@ -172,11 +172,12 @@ export function createComponent( frag.hydrate() } + // remove the teleport content from the parent tree for HMR updates if (__DEV__) { const instance = currentInstance as VaporComponentInstance - ;(instance!.hmrEffects || (instance!.hmrEffects = [])).push(() => - frag.remove(frag.anchor.parentNode!), - ) + ;(instance!.hmrEffects || (instance!.hmrEffects = [])).push(() => { + frag.remove(frag.anchor.parentNode!) + }) } return frag as any diff --git a/packages/runtime-vapor/src/components/Teleport.ts b/packages/runtime-vapor/src/components/Teleport.ts index ba47442500..8a03657820 100644 --- a/packages/runtime-vapor/src/components/Teleport.ts +++ b/packages/runtime-vapor/src/components/Teleport.ts @@ -19,6 +19,7 @@ import type { LooseRawProps, LooseRawSlots } from '../component' import { rawPropsProxyHandlers } from '../componentProps' import { renderEffect } from '../renderEffect' import { extend } from '@vue/shared' +import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity' export const VaporTeleportImpl = { name: 'VaporTeleport', @@ -30,23 +31,28 @@ export const VaporTeleportImpl = { ? new TeleportFragment('teleport') : new TeleportFragment() - let children: Block - renderEffect(() => { - frag.updateChildren( - (children = slots.default && (slots.default as BlockFn)()), - ) - }) - - renderEffect(() => { - frag.update( - // access the props to trigger tracking - extend( - {}, - new Proxy(props, rawPropsProxyHandlers) as any as TeleportProps, - ), - children!, - ) + pauseTracking() + const scope = (frag.scope = new EffectScope()) + scope!.run(() => { + let children: Block + renderEffect(() => { + frag.updateChildren( + (children = slots.default && (slots.default as BlockFn)()), + ) + }) + + renderEffect(() => { + frag.update( + // access the props to trigger tracking + extend( + {}, + new Proxy(props, rawPropsProxyHandlers) as any as TeleportProps, + ), + children!, + ) + }) }) + resetTracking() return frag }, @@ -54,6 +60,7 @@ export const VaporTeleportImpl = { class TeleportFragment extends VaporFragment { anchor: Node + scope: EffectScope | undefined private targetStart?: Node private mainAnchor?: Node @@ -155,17 +162,31 @@ class TeleportFragment extends VaporFragment { } remove = (parent: ParentNode | undefined): void => { + // stop effect scope + if (this.scope) { + this.scope.stop() + this.scope = undefined + } + // remove nodes - remove(this.nodes, this.currentParent) + if (this.nodes) { + remove(this.nodes, this.currentParent) + this.nodes = [] + } // remove anchors if (this.targetStart) { remove(this.targetStart!, this.target!) + this.targetStart = undefined remove(this.targetAnchor!, this.target!) + this.targetAnchor = undefined } + if (this.placeholder) { remove(this.placeholder!, parent) + this.placeholder = undefined remove(this.mainAnchor!, parent) + this.mainAnchor = undefined } }