chore: dont process text/comment node as dynamic

Author: edison1105

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -169,7 +169,11 @@ export function processChildren(
   const { children } = parent
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
-    if (shouldProcessAsDynamic(parent, child)) {
+    if (
+      child.type !== NodeTypes.TEXT &&
+      child.type !== NodeTypes.COMMENT &&
+      shouldProcessAsDynamic(parent, child)
+    ) {
       processChildren(
         { children: [child] },
         context,
@@ -269,7 +273,7 @@ export function processChildrenAsStatement(
   return createBlockStatement(childContext.body)
 }
 
-const isStaticElement = (c: TemplateChildNode): boolean =>
+const isStaticChildNode = (c: TemplateChildNode): boolean =>
   c.type === NodeTypes.ELEMENT && c.tagType !== ElementTypes.COMPONENT
 
 /**
@@ -289,7 +293,7 @@ function shouldProcessAsDynamic(
   node: TemplateChildNode,
 ): boolean {
   // 1. Must be a dynamic node type
-  if (isStaticElement(node)) return false
+  if (isStaticChildNode(node)) return false
   // 2. Must be inside a parent element
   if (!parent.tag) return false
 
@@ -301,7 +305,7 @@ function shouldProcessAsDynamic(
   let hasStaticPreviousSibling = false
   if (index > 0) {
     for (let i = index - 1; i >= 0; i--) {
-      if (isStaticElement(children[i])) {
+      if (isStaticChildNode(children[i])) {
         hasStaticPreviousSibling = true
         break
       }
@@ -313,7 +317,7 @@ function shouldProcessAsDynamic(
   let hasStaticNextSibling = false
   if (index > -1 && index < len - 1) {
     for (let i = index + 1; i < len; i++) {
-      if (isStaticElement(children[i])) {
+      if (isStaticChildNode(children[i])) {
         hasStaticNextSibling = true
         break
       }
@@ -323,13 +327,13 @@ function shouldProcessAsDynamic(
 
   // 5. Check for a consecutive dynamic sibling (immediately before or after)
   let hasConsecutiveDynamicNodes = false
-  if (index > 0 && !isStaticElement(children[index - 1])) {
+  if (index > 0 && !isStaticChildNode(children[index - 1])) {
     hasConsecutiveDynamicNodes = true
   }
   if (
     !hasConsecutiveDynamicNodes &&
     index < len - 1 &&
-    !isStaticElement(children[index + 1])
+    !isStaticChildNode(children[index + 1])
   ) {
     hasConsecutiveDynamicNodes = true
   }

packages/runtime-core/src/hydration.ts

@@ -125,7 +125,7 @@ export function createHydrationFunctions(
 
   function nextSibling(node: Node) {
     let n = next(node)
-    // skip dynamic child anchor
+    // skip dynamic anchors
     if (n && isDynamicAnchor(n)) {
       n = next(n)
     }

packages/runtime-vapor/__tests__/hydration.spec.ts

@@ -334,13 +334,13 @@ describe('Vapor Mode hydration', () => {
       },
     )
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[[-->foo<!--]]--><!--[[--> <!--]]--><!--[[--> foo <!--]]--><!--[[--> <!--]]--><!--[[-->foo<!--]]--><span></span></div>"`,
+      `"<div><span></span><!--[[-->foo<!--]]--> <!--[[--> foo <!--]]--> <!--[[-->foo<!--]]--><span></span></div>"`,
     )
 
     data.value = 'bar'
     await nextTick()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[[-->bar<!--]]--><!--[[--> <!--]]--><!--[[--> bar <!--]]--><!--[[--> <!--]]--><!--[[-->bar<!--]]--><span></span></div>"`,
+      `"<div><span></span><!--[[-->bar<!--]]--> <!--[[--> bar <!--]]--> <!--[[-->bar<!--]]--><span></span></div>"`,
     )
   })
 
@@ -439,13 +439,13 @@ describe('Vapor Mode hydration', () => {
       },
     )
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[[--><!--[--><div>foo</div>-foo<!--]--><!--]]--><!--[[--> <!--]]--><!--[[--> foo <!--]]--><!--[[--> <!--]]--><!--[[--><!--[--><div>foo</div>-foo<!--]--><!--]]--><span></span></div>"`,
+      `"<div><span></span><!--[[--><!--[--><div>foo</div>-foo<!--]--><!--]]--> <!--[[--> foo <!--]]--> <!--[[--><!--[--><div>foo</div>-foo<!--]--><!--]]--><span></span></div>"`,
     )
 
     data.value = 'bar'
     await nextTick()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[[--><!--[--><div>bar</div>-bar<!--]--><!--]]--><!--[[--> <!--]]--><!--[[--> bar <!--]]--><!--[[--> <!--]]--><!--[[--><!--[--><div>bar</div>-bar<!--]--><!--]]--><span></span></div>"`,
+      `"<div><span></span><!--[[--><!--[--><div>bar</div>-bar<!--]--><!--]]--> <!--[[--> bar <!--]]--> <!--[[--><!--[--><div>bar</div>-bar<!--]--><!--]]--><span></span></div>"`,
     )
   })