diff --git a/packages/runtime-vapor/src/components/Teleport.ts b/packages/runtime-vapor/src/components/Teleport.ts index ce1e65efe46..f83da4f8bda 100644 --- a/packages/runtime-vapor/src/components/Teleport.ts +++ b/packages/runtime-vapor/src/components/Teleport.ts @@ -139,59 +139,59 @@ export class TeleportFragment extends VaporFragment { insert((this.nodes = children), this.mountContainer!, this.mountAnchor!) } - private handlePropsUpdate(): void { - // not mounted yet - if (!this.parent || isHydrating) return - - const mount = (parent: ParentNode, anchor: Node | null) => { - if (this.$transition) { - applyTransitionHooks(this.nodes, this.$transition) - } - insert( - this.nodes, - (this.mountContainer = parent), - (this.mountAnchor = anchor), - ) + private mount(parent: ParentNode, anchor: Node | null) { + if (this.$transition) { + applyTransitionHooks(this.nodes, this.$transition) } + insert( + this.nodes, + (this.mountContainer = parent), + (this.mountAnchor = anchor), + ) + } - const mountToTarget = () => { - const target = (this.target = resolveTeleportTarget( - this.resolvedProps!, - querySelector, - )) - if (target) { - if ( - // initial mount into target - !this.targetAnchor || - // target changed - this.targetAnchor.parentNode !== target - ) { - insert((this.targetStart = createTextNode('')), target) - insert((this.targetAnchor = createTextNode('')), target) - } - - // track CE teleport targets - if (this.parentComponent && this.parentComponent.isCE) { - ;( - this.parentComponent.ce!._teleportTargets || - (this.parentComponent.ce!._teleportTargets = new Set()) - ).add(target) - } + private mountToTarget(): void { + const target = (this.target = resolveTeleportTarget( + this.resolvedProps!, + querySelector, + )) + if (target) { + if ( + // initial mount into target + !this.targetAnchor || + // target changed + this.targetAnchor.parentNode !== target + ) { + insert((this.targetStart = createTextNode('')), target) + insert((this.targetAnchor = createTextNode('')), target) + } - mount(target, this.targetAnchor!) - updateCssVars(this) - } else if (__DEV__) { - warn( - `Invalid Teleport target on ${this.targetAnchor ? 'update' : 'mount'}:`, - target, - `(${typeof target})`, - ) + // track CE teleport targets + if (this.parentComponent && this.parentComponent.isCE) { + ;( + this.parentComponent.ce!._teleportTargets || + (this.parentComponent.ce!._teleportTargets = new Set()) + ).add(target) } + + this.mount(target, this.targetAnchor!) + updateCssVars(this) + } else if (__DEV__) { + warn( + `Invalid Teleport target on ${this.targetAnchor ? 'update' : 'mount'}:`, + target, + `(${typeof target})`, + ) } + } + + private handlePropsUpdate(): void { + // not mounted yet + if (!this.parent || isHydrating) return // mount into main container if (this.isDisabled) { - mount(this.parent, this.anchor!) + this.mount(this.parent, this.anchor!) updateCssVars(this) } // mount into target container @@ -202,9 +202,9 @@ export class TeleportFragment extends VaporFragment { // typically due to an early insertion caused by setInsertionState. !this.parent!.isConnected ) { - queuePostFlushCb(mountToTarget) + queuePostFlushCb(this.mountToTarget.bind(this)) } else { - mountToTarget() + this.mountToTarget() } } } @@ -260,7 +260,7 @@ export class TeleportFragment extends VaporFragment { this.initChildren() } - private mount(target: Node): void { + private mountChildren(target: Node): void { target.appendChild((this.targetStart = createTextNode(''))) target.appendChild( (this.mountAnchor = this.targetAnchor = createTextNode('')), @@ -319,7 +319,7 @@ export class TeleportFragment extends VaporFragment { // always be null, we need to manually add targetAnchor to ensure // Teleport it can properly unmount or move if (!this.targetAnchor) { - this.mount(target) + this.mountChildren(target) } else { this.initChildren() }