Procházet zdrojové kódy

chore(runtime-vapor): improve TeleportFragment tree-shaking with duck typing

daiwei před 3 měsíci
rodič
revize
d4d6a986a1

+ 2 - 2
packages/runtime-vapor/src/block.ts

@@ -21,7 +21,7 @@ import {
   type VaporFragment,
   isFragment,
 } from './fragment'
-import { TeleportFragment } from './components/Teleport'
+import { isTeleportFragment } from './components/Teleport'
 
 export interface VaporTransitionHooks extends TransitionHooks {
   state: TransitionState
@@ -270,7 +270,7 @@ export function normalizeBlock(block: Block): Node[] {
   } else if (isVaporComponent(block)) {
     nodes.push(...normalizeBlock(block.block!))
   } else {
-    if (block instanceof TeleportFragment) {
+    if (isTeleportFragment(block)) {
       nodes.push(block.placeholder!, block.anchor!)
     } else {
       nodes.push(...normalizeBlock(block.nodes))

+ 7 - 3
packages/runtime-vapor/src/component.ts

@@ -100,7 +100,11 @@ import {
   setCurrentHydrationNode,
 } from './dom/hydration'
 import { _next, createElement } from './dom/node'
-import { TeleportFragment, isVaporTeleport } from './components/Teleport'
+import {
+  type TeleportFragment,
+  isTeleportFragment,
+  isVaporTeleport,
+} from './components/Teleport'
 import {
   type KeepAliveInstance,
   findParentKeepAlive,
@@ -966,7 +970,7 @@ export function getRootElement(
     return getRootElement(block.block, onDynamicFragment, recurse)
   }
 
-  if (isFragment(block) && !(block instanceof TeleportFragment)) {
+  if (isFragment(block) && !isTeleportFragment(block)) {
     if (block instanceof DynamicFragment && onDynamicFragment) {
       onDynamicFragment(block)
     }
@@ -1073,7 +1077,7 @@ function handleSetupResult(
         instance.block.length) ||
         // preventing attrs fallthrough on Teleport
         // consistent with VDOM Teleport behavior
-        instance.block instanceof TeleportFragment)
+        isTeleportFragment(instance.block))
     ) {
       warnExtraneousAttributes(instance.attrs)
     }

+ 13 - 0
packages/runtime-vapor/src/components/Teleport.ts

@@ -44,6 +44,11 @@ export const VaporTeleportImpl = {
 }
 
 export class TeleportFragment extends VaporFragment {
+  /**
+   * @internal marker for duck typing to avoid direct instanceof check
+   * which prevents tree-shaking of TeleportFragment
+   */
+  readonly __isTeleportFragment = true
   anchor?: Node
   private rawProps?: LooseRawProps
   private resolvedProps?: TeleportProps
@@ -344,6 +349,14 @@ export function isVaporTeleport(
   return !!(value && (value as any).__isTeleport && (value as any).__vapor)
 }
 
+/**
+ * Use duck typing to check for TeleportFragment instead of instanceof,
+ * allowing tree-shaking when Teleport is not used.
+ */
+export function isTeleportFragment(value: unknown): value is TeleportFragment {
+  return !!(value && (value as any).__isTeleportFragment)
+}
+
 function locateTeleportEndAnchor(
   node: Node = currentHydrationNode!,
 ): Node | null {