refactor: insertion anchors

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 // <div v-if v-once>
-  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 {

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('<div><Comp/><Comp/><span/></div>', { vapor: true }),
       ).toMatchInlineSnapshot(`
-        "\`<div><!--[p-->\`)
+        "\`<div><!--[[-->\`)
           _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-          _push(\`<!--p]--><!--[p-->\`)
+          _push(\`<!--]]--><!--[[-->\`)
           _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-          _push(\`<!--p]--><span></span></div>\`"
+          _push(\`<!--]]--><span></span></div>\`"
       `)
     })
 
@@ -29,20 +29,20 @@ describe('insertion anchors', () => {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`<div\${_scopeId}><!--[p-->\`)
+                _push(\`<div\${_scopeId}><!--[[-->\`)
                 _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId))
-                _push(\`<!--p]--><!--[p-->\`)
+                _push(\`<!--]]--><!--[[-->\`)
                 _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId))
-                _push(\`<!--p]--><span\${_scopeId}></span></div>\`)
+                _push(\`<!--]]--><span\${_scopeId}></span></div>\`)
               } 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(`
-        "\`<div><!--[p-->\`)
+        "\`<div><!--[[-->\`)
           _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
-          _push(\`<!--slot--><!--p]--><!--[p-->\`)
+          _push(\`<!--slot--><!--]]--><!--[[-->\`)
           _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
-          _push(\`<!--slot--><!--p]--><span></span></div>\`"
+          _push(\`<!--slot--><!--]]--><span></span></div>\`"
       `)
     })
 
@@ -85,22 +85,22 @@ describe('insertion anchors', () => {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`<div\${_scopeId}><!--[p-->\`)
+                _push(\`<div\${_scopeId}><!--[[-->\`)
                 _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent, _scopeId)
-                _push(\`<!--slot--><!--p]--><!--[p-->\`)
+                _push(\`<!--slot--><!--]]--><!--[[-->\`)
                 _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, _scopeId)
-                _push(\`<!--slot--><!--p]--><span\${_scopeId}></span></div>\`)
+                _push(\`<!--slot--><!--]]--><span\${_scopeId}></span></div>\`)
               } 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(`
-        "\`<div><!--[p-->\`)
+        "\`<div><!--[[-->\`)
           if (_ctx.foo) {
             _push(\`<span></span>\`)
             _push(\`<!--if-->\`)
@@ -137,7 +137,7 @@ describe('insertion anchors', () => {
             _push(\`<span></span>\`)
             _push(\`<!--if--><!--if-->\`)
           }
-          _push(\`<!--p]--><span></span></div>\`"
+          _push(\`<!--]]--><span></span></div>\`"
       `)
     })
 
@@ -159,7 +159,7 @@ describe('insertion anchors', () => {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`<div\${_scopeId}><!--[p-->\`)
+                _push(\`<div\${_scopeId}><!--[[-->\`)
                 if (_ctx.foo) {
                   _push(\`<span\${_scopeId}></span>\`)
                   _push(\`<!--if-->\`)
@@ -170,11 +170,11 @@ describe('insertion anchors', () => {
                   _push(\`<span\${_scopeId}></span>\`)
                   _push(\`<!--if--><!--if-->\`)
                 }
-                _push(\`<!--p]--><span\${_scopeId}></span></div>\`)
+                _push(\`<!--]]--><span\${_scopeId}></span></div>\`)
               } 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("<!--if--><!--if-->")
                           ], 64 /* STABLE_FRAGMENT */)),
-                    _createCommentVNode("p]"),
+                    _createCommentVNode("]]"),
                     _createVNode("span")
                   ])
                 ]
@@ -224,39 +224,39 @@ describe('insertion anchors', () => {
           },
         ),
       ).toMatchInlineSnapshot(`
-        "\`<div><!--[p-->\`)
+        "\`<div><!--[[-->\`)
           if (_ctx.foo) {
-            _push(\`<span><!--[p-->\`)
+            _push(\`<span><!--[[-->\`)
             if (_ctx.foo1) {
               _push(\`<span></span>\`)
               _push(\`<!--if-->\`)
             } else {
               _push(\`<!--if-->\`)
             }
-            _push(\`<!--p]--><span></span></span>\`)
+            _push(\`<!--]]--><span></span></span>\`)
             _push(\`<!--if-->\`)
           } else if (_ctx.bar) {
-            _push(\`<span><!--[p-->\`)
+            _push(\`<span><!--[[-->\`)
             if (_ctx.bar1) {
               _push(\`<span></span>\`)
               _push(\`<!--if-->\`)
             } else {
               _push(\`<!--if-->\`)
             }
-            _push(\`<!--p]--><span></span></span>\`)
+            _push(\`<!--]]--><span></span></span>\`)
             _push(\`<!--if--><!--if-->\`)
           } else {
-            _push(\`<span><!--[p-->\`)
+            _push(\`<span><!--[[-->\`)
             if (_ctx.bar2) {
               _push(\`<span></span>\`)
               _push(\`<!--if-->\`)
             } else {
               _push(\`<!--if-->\`)
             }
-            _push(\`<!--p]--><span></span></span>\`)
+            _push(\`<!--]]--><span></span></span>\`)
             _push(\`<!--if--><!--if-->\`)
           }
-          _push(\`<!--p]--><span></span></div>\`"
+          _push(\`<!--]]--><span></span></div>\`"
       `)
     })
 
@@ -287,52 +287,52 @@ describe('insertion anchors', () => {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`<div\${_scopeId}><!--[p-->\`)
+                _push(\`<div\${_scopeId}><!--[[-->\`)
                 if (_ctx.foo) {
-                  _push(\`<span\${_scopeId}><!--[p-->\`)
+                  _push(\`<span\${_scopeId}><!--[[-->\`)
                   if (_ctx.foo1) {
                     _push(\`<span\${_scopeId}></span>\`)
                     _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!--if-->\`)
                   }
-                  _push(\`<!--p]--><span\${_scopeId}></span></span>\`)
+                  _push(\`<!--]]--><span\${_scopeId}></span></span>\`)
                   _push(\`<!--if-->\`)
                 } else if (_ctx.bar) {
-                  _push(\`<span\${_scopeId}><!--[p-->\`)
+                  _push(\`<span\${_scopeId}><!--[[-->\`)
                   if (_ctx.bar1) {
                     _push(\`<span\${_scopeId}></span>\`)
                     _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!--if-->\`)
                   }
-                  _push(\`<!--p]--><span\${_scopeId}></span></span>\`)
+                  _push(\`<!--]]--><span\${_scopeId}></span></span>\`)
                   _push(\`<!--if--><!--if-->\`)
                 } else {
-                  _push(\`<span\${_scopeId}><!--[p-->\`)
+                  _push(\`<span\${_scopeId}><!--[[-->\`)
                   if (_ctx.bar2) {
                     _push(\`<span\${_scopeId}></span>\`)
                     _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!--if-->\`)
                   }
-                  _push(\`<!--p]--><span\${_scopeId}></span></span>\`)
+                  _push(\`<!--]]--><span\${_scopeId}></span></span>\`)
                   _push(\`<!--if--><!--if-->\`)
                 }
-                _push(\`<!--p]--><span\${_scopeId}></span></div>\`)
+                _push(\`<!--]]--><span\${_scopeId}></span></div>\`)
               } 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("<!--if-->")
@@ -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("<!--if--><!--if-->")
                           ], 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("<!--if--><!--if-->")
                           ], 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(\`<div\${_scopeId}><!--[p-->\`)
+                  _push(\`<div\${_scopeId}><!--[[-->\`)
                   if (_ctx.depth < 5) {
                     _push(\` foo \`)
                     _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!--if-->\`)
                   }
-                  _push(\`<!--p]--><div\${_scopeId}></div></div>\`)
+                  _push(\`<!--]]--><div\${_scopeId}></div></div>\`)
                   _push(\`<!--if-->\`)
                 } else {
                   _push(\`<!--if-->\`)
@@ -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(`
-        "\`<div><!--[p-->\`)
+        "\`<div><!--[[-->\`)
           _ssrRenderList(_ctx.items, (item) => {
             _push(\`<span></span>\`)
           })
-          _push(\`<!--for--><!--p]--><span></span></div>\`"
+          _push(\`<!--for--><!--]]--><span></span></div>\`"
       `)
     })
 
@@ -459,20 +459,20 @@ describe('insertion anchors', () => {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
               if (_push) {
-                _push(\`<div\${_scopeId}><!--[p-->\`)
+                _push(\`<div\${_scopeId}><!--[[-->\`)
                 _ssrRenderList(_ctx.items, (item) => {
                   _push(\`<span\${_scopeId}></span>\`)
                 })
-                _push(\`<!--for--><!--p]--><span\${_scopeId}></span></div>\`)
+                _push(\`<!--for--><!--]]--><span\${_scopeId}></span></div>\`)
               } 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('<div><span/><Comp/><span/></div>', { vapor: true }),
       ).toMatchInlineSnapshot(`
-        "\`<div><span></span><!--[i-->\`)
+        "\`<div><span></span><!--[[-->\`)
           _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-          _push(\`<!--i]--><span></span></div>\`"
+          _push(\`<!--]]--><span></span></div>\`"
       `)
     })
   })
@@ -504,11 +504,11 @@ describe('insertion anchors', () => {
       expect(
         getCompiledString('<div><span/><Comp/><Comp/></div>', { vapor: true }),
       ).toMatchInlineSnapshot(`
-        "\`<div><span></span><!--[a-->\`)
+        "\`<div><span></span><!--[[-->\`)
           _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-          _push(\`<!--a]--><!--[a-->\`)
+          _push(\`<!--]]--><!--[[-->\`)
           _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-          _push(\`<!--a]--></div>\`"
+          _push(\`<!--]]--></div>\`"
       `)
     })
   })
@@ -519,13 +519,13 @@ describe('insertion anchors', () => {
         vapor: true,
       }),
     ).toMatchInlineSnapshot(`
-      "\`<div><!--[p-->\`)
+      "\`<div><!--[[-->\`)
         _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-        _push(\`<!--p]--><span></span><!--[i-->\`)
+        _push(\`<!--]]--><span></span><!--[[-->\`)
         _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-        _push(\`<!--i]--><span></span><!--[a-->\`)
+        _push(\`<!--]]--><span></span><!--[[-->\`)
         _push(_ssrRenderComponent(_component_Comp, null, null, _parent))
-        _push(\`<!--a]--></div>\`"
+        _push(\`<!--]]--></div>\`"
     `)
   })
 
@@ -548,27 +548,27 @@ describe('insertion anchors', () => {
         _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent('div'), null, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _push(\`<div\${_scopeId}><!--[p-->\`)
+              _push(\`<div\${_scopeId}><!--[[-->\`)
               _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId))
-              _push(\`<!--p]--><span\${_scopeId}></span><!--[i-->\`)
+              _push(\`<!--]]--><span\${_scopeId}></span><!--[[-->\`)
               _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId))
-              _push(\`<!--i]--><span\${_scopeId}></span><!--[a-->\`)
+              _push(\`<!--]]--><span\${_scopeId}></span><!--[[-->\`)
               _push(_ssrRenderComponent(_component_Comp, null, null, _parent, _scopeId))
-              _push(\`<!--a]--></div>\`)
+              _push(\`<!--]]--></div>\`)
             } 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(`
-      "\`<div><!--[a-->\`)
+      "\`<div><!--[[-->\`)
         _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
-        _push(\`<!--slot--><!--a]--><!--[a-->\`)
+        _push(\`<!--slot--><!--]]--><!--[[-->\`)
         _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
-        _push(\`<!--slot--><!--a]--></div>\`"
+        _push(\`<!--slot--><!--]]--></div>\`"
     `)
   })
 

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(`<!--[${child.anchor}-->`)
+            if (child.needAnchor)
+              context.pushStringPart(`<!--${BLOCK_ANCHOR_START_LABEL}-->`)
             ssrProcessComponent(child, context, parent)
-            if (child.anchor) context.pushStringPart(`<!--${child.anchor}]-->`)
+            if (child.needAnchor)
+              context.pushStringPart(`<!--${BLOCK_ANCHOR_END_LABEL}-->`)
+
             break
           case ElementTypes.SLOT:
-            if (child.anchor) context.pushStringPart(`<!--[${child.anchor}-->`)
+            if (child.needAnchor)
+              context.pushStringPart(`<!--${BLOCK_ANCHOR_START_LABEL}-->`)
             ssrProcessSlotOutlet(child, context)
-            if (child.anchor) context.pushStringPart(`<!--${child.anchor}]-->`)
+            if (child.needAnchor)
+              context.pushStringPart(`<!--${BLOCK_ANCHOR_END_LABEL}-->`)
             break
           case ElementTypes.TEMPLATE:
             // TODO
@@ -230,14 +234,18 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        if (child.anchor) context.pushStringPart(`<!--[${child.anchor}-->`)
+        if (child.needAnchor)
+          context.pushStringPart(`<!--${BLOCK_ANCHOR_START_LABEL}-->`)
         ssrProcessIf(child, context, disableNestedFragments, disableComment)
-        if (child.anchor) context.pushStringPart(`<!--${child.anchor}]-->`)
+        if (child.needAnchor)
+          context.pushStringPart(`<!--${BLOCK_ANCHOR_END_LABEL}-->`)
         break
       case NodeTypes.FOR:
-        if (child.anchor) context.pushStringPart(`<!--[${child.anchor}-->`)
+        if (child.needAnchor)
+          context.pushStringPart(`<!--${BLOCK_ANCHOR_START_LABEL}-->`)
         ssrProcessFor(child, context, disableNestedFragments)
-        if (child.anchor) context.pushStringPart(`<!--${child.anchor}]-->`)
+        if (child.needAnchor)
+          context.pushStringPart(`<!--${BLOCK_ANCHOR_END_LABEL}-->`)
         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))
   }
 }
 

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(`<!--${blockAnchorLabel}-->`.repeat(repeatCount)),
+        createAnchor(`<!--${fragmentAnchorLabel}-->`.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') {

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<T>(
     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}`)) {
-      node = locateEndAnchor(
-        node,
-        `[${BLOCK_PREPEND_ANCHOR_LABEL}`,
-        `${BLOCK_PREPEND_ANCHOR_LABEL}]`,
-      )!
-      continue
-    } else if (isComment(node, `[${BLOCK_INSERTION_ANCHOR_LABEL}`)) {
+    if (isComment(node, BLOCK_ANCHOR_START_LABEL)) {
       node = locateEndAnchor(
         node,
-        `[${BLOCK_INSERTION_ANCHOR_LABEL}`,
-        `${BLOCK_INSERTION_ANCHOR_LABEL}]`,
+        BLOCK_ANCHOR_START_LABEL,
+        BLOCK_ANCHOR_END_LABEL,
       )!
       continue
     }

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!

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

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}`
 }