refactor: block anchors

Author: edison1105

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.spes.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/ssrCodegenTransform.ts

@@ -7,7 +7,6 @@ import {
   DOMDirectiveTransforms,
   DOMNodeTransforms,
   type DirectiveNode,
-  type ElementNode,
   ElementTypes,
   type ExpressionNode,
   type ForNode,
@@ -63,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,
@@ -417,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
@@ -439,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,
@@ -453,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 = resolveBlockAnchorLabel(child)
-    if (blockAnchorLabel) newChildren.push(createAnchor(blockAnchorLabel))
+    // inject fragment anchor
+    const fragmentAnchorLabel = resolveFragmentAnchorLabel(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)
@@ -478,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 = resolveBlockAnchorLabel(node)
+    const fragmentAnchorLabel = resolveFragmentAnchorLabel(node)
     let isElse = false
 
     const conditionalProps: typeof node.props = []
@@ -523,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))
   }
 }
 
@@ -584,7 +585,11 @@ function findLastIfBranchIndex(
   return lastIndex
 }
 
-function resolveBlockAnchorLabel(child: ElementNode): string | undefined {
+function resolveFragmentAnchorLabel(
+  child: TemplateChildNode,
+): string | undefined {
+  if (child.type !== NodeTypes.ELEMENT) return
+
   if (child.tagType === ElementTypes.COMPONENT && child.tag === 'component') {
     return DYNAMIC_COMPONENT_ANCHOR_LABEL
   } else if (child.tagType === ElementTypes.SLOT) {