From eccf317a0980d4e5526b57dead55145f15e047d2 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 18 Aug 2025 21:57:44 +0800 Subject: [PATCH] refactor: insertion anchors --- packages/compiler-core/src/ast.ts | 10 +- .../__tests__/ssrVaporAnchors.spec.ts | 170 ++++---- .../compiler-ssr/src/ssrCodegenTransform.ts | 46 ++- .../src/transforms/ssrTransformComponent.ts | 44 ++- .../runtime-vapor/__tests__/hydration.spec.ts | 372 +++++++++--------- packages/runtime-vapor/src/dom/hydration.ts | 51 +-- packages/runtime-vapor/src/dom/node.ts | 6 +- packages/runtime-vapor/src/insertionState.ts | 8 +- packages/shared/src/domAnchors.ts | 13 +- 9 files changed, 345 insertions(+), 375 deletions(-) diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts index 1ecab369a..4b3d16579 100644 --- a/packages/compiler-core/src/ast.ts +++ b/packages/compiler-core/src/ast.ts @@ -163,7 +163,7 @@ export interface ComponentNode extends BaseElementNode { | MemoExpression // when cached by v-memo | undefined ssrCodegenNode?: CallExpression - anchor?: string + needAnchor?: boolean } export interface SlotOutletNode extends BaseElementNode { @@ -173,14 +173,14 @@ export interface SlotOutletNode extends BaseElementNode { | CacheExpression // when cached by v-once | undefined ssrCodegenNode?: CallExpression - anchor?: string + needAnchor?: boolean } export interface TemplateNode extends BaseElementNode { tagType: ElementTypes.TEMPLATE // TemplateNode is a container type that always gets compiled away codegenNode: undefined - anchor?: string + needAnchor?: boolean } export interface TextNode extends Node { @@ -290,7 +290,7 @@ export interface IfNode extends Node { type: NodeTypes.IF branches: IfBranchNode[] codegenNode?: IfConditionalExpression | CacheExpression //
- anchor?: string + needAnchor?: boolean } export interface IfBranchNode extends Node { @@ -310,7 +310,7 @@ export interface ForNode extends Node { parseResult: ForParseResult children: TemplateChildNode[] codegenNode?: ForCodegenNode - anchor?: string + needAnchor?: boolean } export interface ForParseResult { diff --git a/packages/compiler-ssr/__tests__/ssrVaporAnchors.spec.ts b/packages/compiler-ssr/__tests__/ssrVaporAnchors.spec.ts index 64eb79ee7..321dce552 100644 --- a/packages/compiler-ssr/__tests__/ssrVaporAnchors.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrVaporAnchors.spec.ts @@ -1,16 +1,16 @@ import { getCompiledString } from './utils' -describe('insertion anchors', () => { +describe('block anchors', () => { describe('prepend', () => { test('prepend anchor with component', () => { expect( getCompiledString('
', { vapor: true }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`
\`" + _push(\`
\`" `) }) @@ -29,20 +29,20 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId)) - _push(\`
\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), _createVNode(_component_Comp), - _createCommentVNode("p]"), - _createCommentVNode("[p"), + _createCommentVNode("]]"), + _createCommentVNode("[["), _createVNode(_component_Comp), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]) ] @@ -60,11 +60,11 @@ describe('insertion anchors', () => { vapor: true, }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent) - _push(\`\`) + _push(\`\`) _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent) - _push(\`
\`" + _push(\`
\`" `) }) @@ -85,22 +85,22 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent, _scopeId) - _push(\`\`) + _push(\`\`) _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId) - _push(\`\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), _renderSlot(_ctx.$slots, "foo"), _createCommentVNode("slot"), - _createCommentVNode("p]"), - _createCommentVNode("[p"), + _createCommentVNode("]]"), + _createCommentVNode("[["), _renderSlot(_ctx.$slots, "default"), _createCommentVNode("slot"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]) ] @@ -126,7 +126,7 @@ describe('insertion anchors', () => { }, ), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) if (_ctx.foo) { _push(\`\`) _push(\`\`) @@ -137,7 +137,7 @@ describe('insertion anchors', () => { _push(\`\`) _push(\`\`) } - _push(\`
\`" + _push(\`
\`" `) }) @@ -159,7 +159,7 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) if (_ctx.foo) { _push(\`\`) _push(\`\`) @@ -170,11 +170,11 @@ describe('insertion anchors', () => { _push(\`\`) _push(\`\`) } - _push(\`\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.foo) ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [ _createVNode("span"), @@ -189,7 +189,7 @@ describe('insertion anchors', () => { _createVNode("span"), _createCommentVNode("") ], 64 /* STABLE_FRAGMENT */)), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]) ] @@ -224,39 +224,39 @@ describe('insertion anchors', () => { }, ), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) if (_ctx.foo) { - _push(\`\`) + _push(\`\`) if (_ctx.foo1) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } else if (_ctx.bar) { - _push(\`\`) + _push(\`\`) if (_ctx.bar1) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } else { - _push(\`\`) + _push(\`\`) if (_ctx.bar2) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } - _push(\`
\`" + _push(\`
\`" `) }) @@ -287,52 +287,52 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) if (_ctx.foo) { - _push(\`\`) + _push(\`\`) if (_ctx.foo1) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } else if (_ctx.bar) { - _push(\`\`) + _push(\`\`) if (_ctx.bar1) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } else { - _push(\`\`) + _push(\`\`) if (_ctx.bar2) { _push(\`\`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } - _push(\`\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.foo) ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [ _createVNode("span", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.foo1) ? (_openBlock(), _createBlock("span", { key: 0 })) : _createCommentVNode("v-if", true), _createCommentVNode("if"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]), _createCommentVNode("") @@ -340,29 +340,29 @@ describe('insertion anchors', () => { : (_ctx.bar) ? (_openBlock(), _createBlock(_Fragment, { key: 1 }, [ _createVNode("span", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.bar1) ? (_openBlock(), _createBlock("span", { key: 0 })) : _createCommentVNode("v-if", true), _createCommentVNode("if"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]), _createCommentVNode("") ], 64 /* STABLE_FRAGMENT */)) : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [ _createVNode("span", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.bar2) ? (_openBlock(), _createBlock("span", { key: 0 })) : _createCommentVNode("v-if", true), _createCommentVNode("if"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]), _createCommentVNode("") ], 64 /* STABLE_FRAGMENT */)), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]) ] @@ -393,14 +393,14 @@ describe('insertion anchors', () => { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { if (_ctx.foo) { - _push(\`\`) + _push(\`\`) if (_ctx.depth < 5) { _push(\` foo \`) _push(\`\`) } else { _push(\`\`) } - _push(\`\`) + _push(\`\`) _push(\`\`) } else { _push(\`\`) @@ -409,14 +409,14 @@ describe('insertion anchors', () => { return [ (_ctx.foo) ? (_openBlock(), _createBlock("div", { key: 0 }, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_ctx.depth < 5) ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [ _createTextVNode(" foo ") ], 64 /* STABLE_FRAGMENT */)) : _createCommentVNode("v-if", true), _createCommentVNode("if"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("div") ])) : _createCommentVNode("v-if", true), @@ -436,11 +436,11 @@ describe('insertion anchors', () => { vapor: true, }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _ssrRenderList(_ctx.items, (item) => { _push(\`\`) }) - _push(\`
\`" + _push(\`
\`" `) }) @@ -459,20 +459,20 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) _ssrRenderList(_ctx.items, (item) => { _push(\`\`) }) - _push(\`\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.items, (item) => { return (_openBlock(), _createBlock("span")) }), 256 /* UNKEYED_FRAGMENT */)), _createCommentVNode("for"), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span") ]) ] @@ -486,14 +486,14 @@ describe('insertion anchors', () => { }) // TODO add more tests - describe('insertion anchor', () => { + describe('insert', () => { test('insertion anchor with component', () => { expect( getCompiledString('
', { vapor: true }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`
\`" + _push(\`
\`" `) }) }) @@ -504,11 +504,11 @@ describe('insertion anchors', () => { expect( getCompiledString('
', { vapor: true }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`
\`" + _push(\`
\`" `) }) }) @@ -519,13 +519,13 @@ describe('insertion anchors', () => { vapor: true, }), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent)) - _push(\`
\`" + _push(\`
\`" `) }) @@ -548,27 +548,27 @@ describe('insertion anchors', () => { _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, { default: _withCtx((_, _push, _parent, _scopeId) => { if (_push) { - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId)) - _push(\`\`) + _push(\`\`) _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId)) - _push(\`\`) + _push(\`\`) } else { return [ _createVNode("div", null, [ - _createCommentVNode("[p"), + _createCommentVNode("[["), _createVNode(_component_Comp), - _createCommentVNode("p]"), + _createCommentVNode("]]"), _createVNode("span"), - _createCommentVNode("[i"), + _createCommentVNode("[["), _createVNode(_component_Comp), - _createCommentVNode("i]"), + _createCommentVNode("]]"), _createVNode("span"), - _createCommentVNode("[a"), + _createCommentVNode("[["), _createVNode(_component_Comp), - _createCommentVNode("a]") + _createCommentVNode("]]") ]) ] } @@ -580,7 +580,7 @@ describe('insertion anchors', () => { }) }) -describe('block anchors', () => { +describe('fragment anchors', () => { test('if', () => { expect( getCompiledString( @@ -752,11 +752,11 @@ describe('block anchors', () => { { vapor: true }, ), ).toMatchInlineSnapshot(` - "\`
\`) + "\`
\`) _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent) - _push(\`\`) + _push(\`\`) _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent) - _push(\`
\`" + _push(\`
\`" `) }) diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts index 6f94175c4..d9e48c47d 100644 --- a/packages/compiler-ssr/src/ssrCodegenTransform.ts +++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts @@ -25,9 +25,8 @@ import { processExpression, } from '@vue/compiler-dom' import { - BLOCK_APPEND_ANCHOR_LABEL, - BLOCK_INSERTION_ANCHOR_LABEL, - BLOCK_PREPEND_ANCHOR_LABEL, + BLOCK_ANCHOR_END_LABEL, + BLOCK_ANCHOR_START_LABEL, escapeHtml, isString, } from '@vue/shared' @@ -188,14 +187,19 @@ export function processChildren( ssrProcessElement(child, context) break case ElementTypes.COMPONENT: - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) ssrProcessComponent(child, context, parent) - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) + break case ElementTypes.SLOT: - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) ssrProcessSlotOutlet(child, context) - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) break case ElementTypes.TEMPLATE: // TODO @@ -230,14 +234,18 @@ export function processChildren( ) break case NodeTypes.IF: - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) ssrProcessIf(child, context, disableNestedFragments, disableComment) - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) break case NodeTypes.FOR: - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) ssrProcessFor(child, context, disableNestedFragments) - if (child.anchor) context.pushStringPart(``) + if (child.needAnchor) + context.pushStringPart(``) break case NodeTypes.IF_BRANCH: // no-op - handled by ssrProcessIf @@ -276,7 +284,7 @@ export function processChildrenAsStatement( } export function processBlockNodeAnchor(children: TemplateChildNode[]): void { - let prevBlocks: (TemplateChildNode & { anchor?: string })[] = [] + let prevBlocks: (TemplateChildNode & { needAnchor?: boolean })[] = [] let hasStaticNode = false let blockCount = 0 for (const child of children) { @@ -288,15 +296,11 @@ export function processBlockNodeAnchor(children: TemplateChildNode[]): void { if (isStaticNode(child)) { if (prevBlocks.length) { if (hasStaticNode) { - // insertion anchor - prevBlocks.forEach( - child => (child.anchor = BLOCK_INSERTION_ANCHOR_LABEL), - ) + // insert + prevBlocks.forEach(child => (child.needAnchor = true)) } else { // prepend - prevBlocks.forEach( - child => (child.anchor = BLOCK_PREPEND_ANCHOR_LABEL), - ) + prevBlocks.forEach(child => (child.needAnchor = true)) } prevBlocks = [] } @@ -307,8 +311,8 @@ export function processBlockNodeAnchor(children: TemplateChildNode[]): void { // When there is only one block node, no anchor is needed, // firstChild is used as the hydration node if (prevBlocks.length && !(blockCount === 1 && !hasStaticNode)) { - // append anchor - prevBlocks.forEach(child => (child.anchor = BLOCK_APPEND_ANCHOR_LABEL)) + // append + prevBlocks.forEach(child => (child.needAnchor = true)) } } diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts index c940bb88d..47c906a07 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts @@ -62,6 +62,8 @@ import { ssrTransformTransitionGroup, } from './ssrTransformTransitionGroup' import { + BLOCK_ANCHOR_END_LABEL, + BLOCK_ANCHOR_START_LABEL, DYNAMIC_COMPONENT_ANCHOR_LABEL, FOR_ANCHOR_LABEL, IF_ANCHOR_LABEL, @@ -416,14 +418,14 @@ function injectVaporAnchors( } const { tagType, props } = child - let insertionAnchor: string | undefined + let needBlockAnchor: boolean | undefined if ( tagType === ElementTypes.COMPONENT || tagType === ElementTypes.SLOT || tagType === ElementTypes.TEMPLATE ) { - insertionAnchor = child.anchor + needBlockAnchor = child.needAnchor } else if (tagType === ElementTypes.ELEMENT) { let hasIf = false let hasFor = false @@ -438,11 +440,11 @@ function injectVaporAnchors( } if (hasIf) { - insertionAnchor = (child as any as IfNode).anchor + needBlockAnchor = (child as any as IfNode).needAnchor const lastBranchIndex = findLastIfBranchIndex(children, i) if (lastBranchIndex > i) { injectIfAnchors( - insertionAnchor, + needBlockAnchor, newChildren, i, lastBranchIndex, @@ -452,22 +454,22 @@ function injectVaporAnchors( continue } } else if (hasFor) { - insertionAnchor = (child as any as ForNode).anchor + needBlockAnchor = (child as any as ForNode).needAnchor } } - if (insertionAnchor) { - newChildren.push(createAnchor(`[${insertionAnchor}`)) + if (needBlockAnchor) { + newChildren.push(createAnchor(BLOCK_ANCHOR_START_LABEL)) } newChildren.push(child) - // inject block anchor - const blockAnchorLabel = getBlockAnchorLabel(child) - if (blockAnchorLabel) newChildren.push(createAnchor(blockAnchorLabel)) + // inject fragment anchor + const fragmentAnchorLabel = getFragmentAnchorLabel(child) + if (fragmentAnchorLabel) newChildren.push(createAnchor(fragmentAnchorLabel)) - if (insertionAnchor) { - newChildren.push(createAnchor(`${insertionAnchor}]`)) + if (needBlockAnchor) { + newChildren.push(createAnchor(BLOCK_ANCHOR_END_LABEL)) } child.children = injectVaporAnchors(child.children, child) @@ -477,19 +479,19 @@ function injectVaporAnchors( } function injectIfAnchors( - insertionAnchor: string | undefined, + needBlockAnchor: boolean | undefined, newChildren: TemplateChildNode[], i: number, lastBranchIndex: number, children: TemplateChildNode[], ) { - if (insertionAnchor) { - newChildren.push(createAnchor(`[${insertionAnchor}`)) + if (needBlockAnchor) { + newChildren.push(createAnchor(BLOCK_ANCHOR_START_LABEL)) } for (let j = i; j <= lastBranchIndex; j++) { const node = children[j] as PlainElementNode - const blockAnchorLabel = getBlockAnchorLabel(node) + const fragmentAnchorLabel = getFragmentAnchorLabel(node) let isElse = false const conditionalProps: typeof node.props = [] @@ -522,17 +524,17 @@ function injectIfAnchors( } newChildren.push(wrapperNode) - if (blockAnchorLabel) { + if (fragmentAnchorLabel) { const repeatCount = j - i - (isElse ? 1 : 0) + 1 wrapperNode.children.push( - createAnchor(``.repeat(repeatCount)), + createAnchor(``.repeat(repeatCount)), ) } node.children = injectVaporAnchors(node.children, node) } - if (insertionAnchor) { - newChildren.push(createAnchor(`${insertionAnchor}]`)) + if (needBlockAnchor) { + newChildren.push(createAnchor(BLOCK_ANCHOR_END_LABEL)) } } @@ -583,7 +585,7 @@ function findLastIfBranchIndex( return lastIndex } -function getBlockAnchorLabel(child: TemplateChildNode): string | undefined { +function getFragmentAnchorLabel(child: TemplateChildNode): string | undefined { if (child.type !== NodeTypes.ELEMENT) return if (child.tagType === ElementTypes.COMPONENT && child.tag === 'component') { diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts index 80283b3d6..40db6dd7c 100644 --- a/packages/runtime-vapor/__tests__/hydration.spec.ts +++ b/packages/runtime-vapor/__tests__/hydration.spec.ts @@ -352,7 +352,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo
" `, ) @@ -362,7 +362,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bar + bar
" `, ) @@ -378,7 +378,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo- +
foo
-foo-
" `, ) @@ -388,7 +388,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar- +
bar
-bar-
" `, ) @@ -404,7 +404,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo- +
foo
-foo-
" `, ) @@ -414,7 +414,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar- +
bar
-bar-
" `, ) @@ -433,7 +433,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo-
+
foo
-foo-
" `, ) @@ -443,7 +443,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar-
+
bar
-bar-
" `, ) @@ -466,7 +466,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo
" `, ) @@ -476,7 +476,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bar + bar
" `, ) @@ -495,7 +495,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
+
foo
" `, ) @@ -505,7 +505,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
+
bar
" `, ) @@ -524,9 +524,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
foo
-
+
+
foo
+
" `, ) @@ -536,9 +536,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
bar
-
+
+
bar
+
" `, ) @@ -562,8 +562,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo - foo + foo + foo
" `, ) @@ -573,8 +573,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bar - bar + bar + bar
" `, ) @@ -599,8 +599,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo - bar + foo + bar
" `, ) @@ -611,8 +611,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo1 - bar1 + foo1 + bar1
" `, ) @@ -631,8 +631,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-
foo
+
foo
+
foo
" `, ) @@ -642,8 +642,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-
bar
+
bar
+
bar
" `, ) @@ -662,10 +662,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
foo
-
foo
-
+
+
foo
+
foo
+
" `, ) @@ -675,10 +675,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
bar
-
bar
-
+
+
bar
+
bar
+
" `, ) @@ -703,9 +703,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo - foo + foo
" `, ) @@ -715,9 +715,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bar + bar - bar + bar
" `, ) @@ -742,9 +742,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo foo - foo + foo
" `, ) @@ -754,9 +754,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bar + bar bar - bar + bar
" `, ) @@ -779,7 +779,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo +
foo
-foo
" `, ) @@ -789,7 +789,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar +
bar
-bar
" `, ) @@ -808,7 +808,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo- +
foo
-foo-
" `, ) @@ -818,7 +818,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar- +
bar
-bar-
" `, ) @@ -837,9 +837,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
foo
-foo- -
+
+
foo
-foo- +
" `, ) @@ -849,9 +849,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
bar
-bar- -
+
+
bar
-bar- +
" `, ) @@ -875,8 +875,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo -
foo
-foo +
foo
-foo +
foo
-foo
" `, ) @@ -886,8 +886,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar -
bar
-bar +
bar
-bar +
bar
-bar
" `, ) @@ -906,8 +906,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo- -
foo
-foo- +
foo
-foo- +
foo
-foo-
" `, ) @@ -917,8 +917,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar- -
bar
-bar- +
bar
-bar- +
bar
-bar-
" `, ) @@ -937,10 +937,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
foo
-foo- -
foo
-foo- -
+
+
foo
-foo- +
foo
-foo- +
" `, ) @@ -950,10 +950,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
-
bar
-bar- -
bar
-bar- -
+
+
bar
-bar- +
bar
-bar- +
" `, ) @@ -972,7 +972,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo-
foo
-foo- +
foo
-foo-
foo
-foo-
" `, ) @@ -982,7 +982,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar-
bar
-bar- +
bar
-bar-
bar
-bar-
" `, ) @@ -1007,9 +1007,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo +
foo
-foo -
foo
-foo +
foo
-foo
" `, ) @@ -1019,9 +1019,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar +
bar
-bar -
bar
-bar +
bar
-bar
" `, ) @@ -1046,9 +1046,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-foo +
foo
-foo foo -
foo
-foo +
foo
-foo
" `, ) @@ -1058,9 +1058,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-bar +
bar
-bar bar -
bar
-bar +
bar
-bar
" `, ) @@ -1108,7 +1108,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
+
foo
" `, ) @@ -1118,7 +1118,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
+
bar
" `, ) @@ -1143,8 +1143,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
-
foo
+
foo
+
foo
" `, ) @@ -1154,8 +1154,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
-
bar
+
bar
+
bar
" `, ) @@ -1338,7 +1338,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
outer -
inner
+
inner
" `, ) @@ -1348,7 +1348,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
outer - +
" `, ) @@ -1433,10 +1433,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` " - foo - bar + foo + bar baz - qux + qux quux" `, ) @@ -1446,10 +1446,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` " - foo - bar + foo + bar baz - qux1 + qux1 quux" `, ) @@ -1459,10 +1459,10 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` " - foo1 - bar + foo1 + bar baz - qux1 + qux1 quux" `, ) @@ -1522,7 +1522,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo
" `, ) @@ -1532,7 +1532,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- +
" `, ) @@ -1560,8 +1560,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo - bar + foo + bar
" `, ) @@ -1603,8 +1603,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo - foo + foo + foo
" `, ) @@ -1614,8 +1614,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- - + +
" `, ) @@ -1624,8 +1624,8 @@ describe('Vapor Mode hydration', () => { await nextTick() expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(` "
- foo - foo + foo + foo
" `) }) @@ -1678,7 +1678,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
true
-true- +
true
-true-
" `, ) @@ -1688,7 +1688,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- +
" `, ) @@ -1697,7 +1697,7 @@ describe('Vapor Mode hydration', () => { await nextTick() expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(` "
-
true
-true- +
true
-true-
" `) }) @@ -1721,8 +1721,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
true
-true- -
true
-true- +
true
-true- +
true
-true-
" `, ) @@ -1732,8 +1732,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- - + +
" `, ) @@ -1742,8 +1742,8 @@ describe('Vapor Mode hydration', () => { await nextTick() expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(` "
-
true
-true- -
true
-true- +
true
-true- +
true
-true-
" `) }) @@ -1764,7 +1764,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- foo + foo
" `, ) @@ -1774,7 +1774,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- +
" `, ) @@ -1783,7 +1783,7 @@ describe('Vapor Mode hydration', () => { await nextTick() expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(` "
- foo + foo
" `) }) @@ -1826,7 +1826,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- abc + abc
" `, ) @@ -1836,7 +1836,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- abcd + abcd
" `, ) @@ -1846,7 +1846,7 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- bcd + bcd
" `, ) @@ -1868,8 +1868,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- abc - abc + abc + abc
" `, ) @@ -1879,8 +1879,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- abcd - abcd + abcd + abcd
" `, ) @@ -1890,8 +1890,8 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- cd - cd + cd + cd
" `, ) @@ -2231,9 +2231,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - + hi
" `, ) @@ -2243,9 +2243,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - + bar
" `, ) @@ -2308,12 +2308,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - - + + bar - +
hi
" `, ) @@ -2323,12 +2323,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - - + + bar - +
bar
" `, ) @@ -2354,9 +2354,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - +
hi
" `, ) @@ -2366,9 +2366,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - +
bar
" `, ) @@ -2404,11 +2404,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
bar
- +
bar
+ foo - -
bar
+ +
bar
" `, ) @@ -2418,11 +2418,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
hello
- +
hello
+ foo - -
hello
+ +
hello
" `, ) @@ -2458,11 +2458,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
foo
bar - +
foo
bar + foo - -
foo
bar + +
foo
bar
" `, ) @@ -2473,11 +2473,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
hello
vapor - +
hello
vapor + hello - -
hello
vapor + +
hello
vapor
" `, ) @@ -2649,12 +2649,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - - + + bar - +
" `, ) @@ -2665,12 +2665,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + hello - - + + vapor - +
" `, ) @@ -2709,12 +2709,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + foo - - + + bar - +
baz
" `, ) @@ -2725,12 +2725,12 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + hello - - + + vapor - +
baz
" `, ) @@ -2792,11 +2792,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
+
foo -
+
bar
" `, ) @@ -2807,11 +2807,11 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
-
+
foo1 -
+
bar1
" `, ) @@ -2893,9 +2893,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + - +
foo
" `, ) @@ -2905,9 +2905,9 @@ describe('Vapor Mode hydration', () => { expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot( ` "
- + - +
bar
" `, ) diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts index f198a5c45..eeb5c8590 100644 --- a/packages/runtime-vapor/src/dom/hydration.ts +++ b/packages/runtime-vapor/src/dom/hydration.ts @@ -12,11 +12,7 @@ import { disableHydrationNodeLookup, enableHydrationNodeLookup, } from './node' -import { - BLOCK_APPEND_ANCHOR_LABEL, - BLOCK_INSERTION_ANCHOR_LABEL, - BLOCK_PREPEND_ANCHOR_LABEL, -} from '@vue/shared' +import { BLOCK_ANCHOR_END_LABEL, BLOCK_ANCHOR_START_LABEL } from '@vue/shared' const isHydratingStack = [] as boolean[] export let isHydrating = false @@ -34,10 +30,7 @@ function performHydration( locateHydrationNode = locateHydrationNodeImpl // optimize anchor cache lookup ;(Comment.prototype as any).$fe = undefined - ;(Node.prototype as any).$pns = undefined - ;(Node.prototype as any).$lpn = undefined - ;(Node.prototype as any).$lin = undefined - ;(Node.prototype as any).$lan = undefined + ;(Node.prototype as any).$lbn = undefined isOptimized = true } enableHydrationNodeLookup() @@ -141,23 +134,10 @@ function adoptTemplateImpl(node: Node, template: string): Node | null { function locateHydrationNodeImpl(): void { let node: Node | null - if (insertionAnchor === 0) { - // prepend - node = insertionParent!.$lpn = locateHydrationNodeByAnchor( - insertionParent!.$lpn || _child(insertionParent!), - BLOCK_PREPEND_ANCHOR_LABEL, - )! - } else if (insertionAnchor) { - // insert - node = insertionParent!.$lin = locateHydrationNodeByAnchor( - insertionParent!.$lin || _child(insertionParent!), - BLOCK_INSERTION_ANCHOR_LABEL, - )! - } else if (insertionAnchor === null) { - // append - node = insertionParent!.$lan = locateHydrationNodeByAnchor( - insertionParent!.$lan || _child(insertionParent!), - BLOCK_APPEND_ANCHOR_LABEL, + if (insertionAnchor !== undefined) { + // prepend / insert / append + node = insertionParent!.$lbn = locateNextBlockNode( + insertionParent!.$lbn || _child(insertionParent!), )! } else { node = currentHydrationNode @@ -212,15 +192,15 @@ export function locateFragmentAnchor( return null } -function locateHydrationNodeByAnchor(node: Node, label: string): Node | null { +function locateNextBlockNode(node: Node): Node | null { while (node) { - if (isComment(node, `[${label}`)) return node.nextSibling + if (isComment(node, BLOCK_ANCHOR_START_LABEL)) return node.nextSibling node = node.nextSibling! } if (__DEV__) { throw new Error( - `Could not locate hydration node with anchor label: ${label}`, + `Could not locate hydration node with anchor label: ${BLOCK_ANCHOR_START_LABEL}`, ) } return null @@ -228,18 +208,11 @@ function locateHydrationNodeByAnchor(node: Node, label: string): Node | null { export function advanceToNonBlockNode(node: Node): Node { while (node) { - if (isComment(node, `[${BLOCK_PREPEND_ANCHOR_LABEL}`)) { + if (isComment(node, BLOCK_ANCHOR_START_LABEL)) { node = locateEndAnchor( node, - `[${BLOCK_PREPEND_ANCHOR_LABEL}`, - `${BLOCK_PREPEND_ANCHOR_LABEL}]`, - )! - continue - } else if (isComment(node, `[${BLOCK_INSERTION_ANCHOR_LABEL}`)) { - node = locateEndAnchor( - node, - `[${BLOCK_INSERTION_ANCHOR_LABEL}`, - `${BLOCK_INSERTION_ANCHOR_LABEL}]`, + BLOCK_ANCHOR_START_LABEL, + BLOCK_ANCHOR_END_LABEL, )! continue } diff --git a/packages/runtime-vapor/src/dom/node.ts b/packages/runtime-vapor/src/dom/node.ts index dce5cc85b..fe267f27b 100644 --- a/packages/runtime-vapor/src/dom/node.ts +++ b/packages/runtime-vapor/src/dom/node.ts @@ -1,5 +1,5 @@ import { advanceToNonBlockNode } from './hydration' -import { isInsertionAnchor } from '@vue/shared' +import { isBlockStartAnchor } from '@vue/shared' /*! #__NO_SIDE_EFFECTS__ */ export function createElement(tagName: string): HTMLElement { @@ -52,7 +52,7 @@ export function _child(node: ParentNode): Node { /*! #__NO_SIDE_EFFECTS__ */ export function __child(node: ParentNode): Node { let n: Node = node.firstChild! - while (n && isInsertionAnchor(n)) { + while (n && isBlockStartAnchor(n)) { n = advanceToNonBlockNode(n) n = n.nextSibling! } @@ -87,7 +87,7 @@ export function _next(node: Node): Node { */ /*! #__NO_SIDE_EFFECTS__ */ export function __next(node: Node): Node { - if (isInsertionAnchor(node)) { + if (isBlockStartAnchor(node)) { node = advanceToNonBlockNode(node) } return node.nextSibling! diff --git a/packages/runtime-vapor/src/insertionState.ts b/packages/runtime-vapor/src/insertionState.ts index 2c17d385e..f703efffd 100644 --- a/packages/runtime-vapor/src/insertionState.ts +++ b/packages/runtime-vapor/src/insertionState.ts @@ -1,11 +1,7 @@ export let insertionParent: | (ParentNode & { - // the latest prepend node - $lpn?: Node - // the latest insert node - $lin?: Node - // the latest append node - $lan?: Node + // the last hydrated block node + $lbn?: Node }) | undefined export let insertionAnchor: Node | 0 | undefined | null diff --git a/packages/shared/src/domAnchors.ts b/packages/shared/src/domAnchors.ts index 894551f2d..691aebd73 100644 --- a/packages/shared/src/domAnchors.ts +++ b/packages/shared/src/domAnchors.ts @@ -1,17 +1,12 @@ -export const BLOCK_INSERTION_ANCHOR_LABEL = 'i' -export const BLOCK_APPEND_ANCHOR_LABEL = 'a' -export const BLOCK_PREPEND_ANCHOR_LABEL = 'p' +export const BLOCK_ANCHOR_START_LABEL = '[[' +export const BLOCK_ANCHOR_END_LABEL = ']]' export const IF_ANCHOR_LABEL: string = 'if' export const DYNAMIC_COMPONENT_ANCHOR_LABEL: string = 'dynamic-component' export const FOR_ANCHOR_LABEL: string = 'for' export const SLOT_ANCHOR_LABEL: string = 'slot' -export function isInsertionAnchor(node: Node): node is Comment { +export function isBlockStartAnchor(node: Node): node is Comment { if (node.nodeType !== 8) return false const data = (node as Comment).data - return ( - data === `[${BLOCK_INSERTION_ANCHOR_LABEL}` || - data === `[${BLOCK_APPEND_ANCHOR_LABEL}` || - data === `[${BLOCK_PREPEND_ANCHOR_LABEL}` - ) + return data === `${BLOCK_ANCHOR_START_LABEL}` }