refactor: extract teleport mount and mountToTarget logic into private methods (#14152)

Author: edison1105

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()
         }