Explorar el Código

refactor(vapor): optimize hydration tree-shaking for vdom interop (#14325)

edison hace 3 meses
padre
commit
743d596b40

+ 10 - 0
packages/runtime-core/src/hydration.ts

@@ -53,6 +53,14 @@ import { isAsyncWrapper } from './apiAsyncComponent'
 import { isReactive } from '@vue/reactivity'
 import { updateHOCHostEl } from './componentRenderUtils'
 
+/**
+ * VDOM hydration state.
+ * Also used by vapor interop plugin for tree-shaking:
+ * In non-hydration builds, this is never set to true, so the logic in
+ * vaporInteropImpl's hydrate/hydrateSlot can be tree-shaken.
+ */
+export let isHydrating = false
+
 export type RootHydrateFunction = (
   vnode: VNode<Node, Element>,
   container: (Element | ShadowRoot) & { _vnode?: VNode },
@@ -138,7 +146,9 @@ export function createHydrationFunctions(
       return
     }
 
+    isHydrating = true
     hydrateNode(container.firstChild!, vnode, null, null, null)
+    isHydrating = false
     flushPostFlushCbs()
     container._vnode = vnode
   }

+ 1 - 0
packages/runtime-core/src/index.ts

@@ -650,6 +650,7 @@ export {
   isMapEqual,
   isValidHtmlOrSvgAttribute,
   getAttributeMismatch,
+  isHydrating,
 } from './hydration'
 /**
  * @internal

+ 7 - 0
packages/runtime-vapor/src/vdomInterop.ts

@@ -25,6 +25,7 @@ import {
   isEmitListener,
   isKeepAlive,
   isVNode,
+  isHydrating as isVdomHydrating,
   normalizeRef,
   onScopeDispose,
   queuePostFlushCb,
@@ -218,6 +219,11 @@ const vaporInteropImpl: Omit<
   },
 
   hydrate(vnode, node, container, anchor, parentComponent, parentSuspense) {
+    // Check both vapor's isHydrating (for createVaporSSRApp) and
+    // VDOM's isVdomHydrating (for createSSRApp).
+    // In CSR (createApp/createVaporApp + vaporInteropPlugin), both are false,
+    // so this logic is tree-shaken.
+    if (!isHydrating && !isVdomHydrating) return node
     vaporHydrateNode(node, () =>
       this.mount(vnode, container, anchor, parentComponent, parentSuspense),
     )
@@ -225,6 +231,7 @@ const vaporInteropImpl: Omit<
   },
 
   hydrateSlot(vnode, node) {
+    if (!isHydrating && !isVdomHydrating) return node
     const { slot } = vnode.vs!
     const propsRef = (vnode.vs!.ref = shallowRef(vnode.props))
     vaporHydrateNode(node, () => {