diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts index d34d9db7da5..b470a618dd1 100644 --- a/packages/runtime-vapor/src/dom/hydration.ts +++ b/packages/runtime-vapor/src/dom/hydration.ts @@ -2,7 +2,6 @@ import { warn } from '@vue/runtime-dom' import { insertionAnchor, insertionParent, - resetInsertionState, setInsertionState, } from '../insertionState' import { child, next } from './node' @@ -27,7 +26,7 @@ export function withHydration(container: ParentNode, fn: () => void): void { isHydrating = true setInsertionState(container, 0) const res = fn() - resetInsertionState() + setInsertionState() currentHydrationNode = null isHydrating = false return res @@ -124,6 +123,6 @@ function locateHydrationNodeImpl() { warn('Hydration mismatch in ', insertionParent) } - resetInsertionState() + setInsertionState() currentHydrationNode = node } diff --git a/packages/runtime-vapor/src/insertionState.ts b/packages/runtime-vapor/src/insertionState.ts index c8c7ffbcd1d..8612fe4e391 100644 --- a/packages/runtime-vapor/src/insertionState.ts +++ b/packages/runtime-vapor/src/insertionState.ts @@ -5,12 +5,16 @@ export let insertionAnchor: Node | 0 | undefined * This function is called before a block type that requires insertion * (component, slot outlet, if, for) is created. The state is used for actual * insertion on client-side render, and used for node adoption during hydration. + * + * @returns A function that restores the previous insertion state when called. */ -export function setInsertionState(parent: ParentNode, anchor?: Node | 0): void { +export function setInsertionState(parent?: ParentNode, anchor?: Node | 0) { + const prevParent = insertionParent + const prevAnchor = insertionAnchor insertionParent = parent insertionAnchor = anchor -} - -export function resetInsertionState(): void { - insertionParent = insertionAnchor = undefined + return (): void => { + insertionParent = prevParent + insertionAnchor = prevAnchor + } }