refactor(ssr): adjust ssr fragment anchor content

packages/compiler-core/__tests__/hydration.spec.ts

@@ -98,7 +98,7 @@ describe('SSR hydration', () => {
     const msg = ref('foo')
     const fn = jest.fn()
     const { vnode, container } = mountWithHydration(
-      '<div><!----><span>foo</span><!----><span class="foo"></span><!----><!----></div>',
+      '<div><!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]--></div>',
       () =>
         h('div', [
           [h('span', msg.value), [h('span', { class: msg.value, onClick: fn })]]
@@ -106,6 +106,9 @@ describe('SSR hydration', () => {
     )
     expect(vnode.el).toBe(container.firstChild)
 
+    // should remove anchors in dev mode
+    expect(vnode.el.innerHTML).toBe(`<span>foo</span><span class="foo"></span>`)
+
     // start fragment 1
     const fragment1 = (vnode.children as VNode[])[0]
     expect(fragment1.el).toBe(vnode.el.childNodes[0])
@@ -136,9 +139,7 @@ describe('SSR hydration', () => {
 
     msg.value = 'bar'
     await nextTick()
-    expect(vnode.el.innerHTML).toBe(
-      `<!----><span>bar</span><!----><span class="bar"></span><!----><!---->`
-    )
+    expect(vnode.el.innerHTML).toBe(`<span>bar</span><span class="bar"></span>`)
   })
 
   test('portal', async () => {

packages/compiler-ssr/__tests__/ssrComponent.spec.ts

@@ -219,11 +219,11 @@ describe('ssr: components', () => {
             foo: ({ list }, _push, _parent, _scopeId) => {
               if (_push) {
                 if (_ctx.ok) {
-                  _push(\`<div\${_scopeId}><!--1-->\`)
+                  _push(\`<div\${_scopeId}><!--[-->\`)
                   _ssrRenderList(list, (i) => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
-                  _push(\`<!--0--></div>\`)
+                  _push(\`<!--]--></div>\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -242,11 +242,11 @@ describe('ssr: components', () => {
             bar: ({ ok }, _push, _parent, _scopeId) => {
               if (_push) {
                 if (ok) {
-                  _push(\`<div\${_scopeId}><!--1-->\`)
+                  _push(\`<div\${_scopeId}><!--[-->\`)
                   _ssrRenderList(_ctx.list, (i) => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
-                  _push(\`<!--0--></div>\`)
+                  _push(\`<!--]--></div>\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -281,7 +281,7 @@ describe('ssr: components', () => {
         .toMatchInlineSnapshot(`
         "
         return function ssrRender(_ctx, _push, _parent) {
-          _push(\`<!--1--><div></div><!--0-->\`)
+          _push(\`<!--[--><div></div><!--]-->\`)
         }"
       `)
 

packages/compiler-ssr/__tests__/ssrVFor.spec.ts

@@ -6,11 +6,11 @@ describe('ssr: v-for', () => {
       "const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
           _push(\`<div></div>\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -21,11 +21,11 @@ describe('ssr: v-for', () => {
       "const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
           _push(\`<div>foo<span>bar</span></div>\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -41,9 +41,9 @@ describe('ssr: v-for', () => {
       "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (row, i) => {
-          _push(\`<div><!--1-->\`)
+          _push(\`<div><!--[-->\`)
           _ssrRenderList(row, (j) => {
             _push(\`<div>\${
               _ssrInterpolate(i)
@@ -51,9 +51,9 @@ describe('ssr: v-for', () => {
               _ssrInterpolate(j)
             }</div>\`)
           })
-          _push(\`<!--0--></div>\`)
+          _push(\`<!--]--></div>\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -64,11 +64,11 @@ describe('ssr: v-for', () => {
       "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<!--1-->\${_ssrInterpolate(i)}<!--0-->\`)
+          _push(\`<!--[-->\${_ssrInterpolate(i)}<!--]-->\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -81,11 +81,11 @@ describe('ssr: v-for', () => {
       "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
           _push(\`<span>\${_ssrInterpolate(i)}</span>\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -99,15 +99,15 @@ describe('ssr: v-for', () => {
       "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<!--1--><span>\${
+          _push(\`<!--[--><span>\${
             _ssrInterpolate(i)
           }</span><span>\${
             _ssrInterpolate(i + 1)
-          }</span><!--0-->\`)
+          }</span><!--]-->\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })
@@ -123,11 +123,11 @@ describe('ssr: v-for', () => {
       "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!--1-->\`)
+        _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, ({ foo }, index) => {
           _push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
         })
-        _push(\`<!--0-->\`)
+        _push(\`<!--]-->\`)
       }"
     `)
   })

packages/compiler-ssr/__tests__/ssrVIf.spec.ts

@@ -80,7 +80,7 @@ describe('ssr: v-if', () => {
       "
       return function ssrRender(_ctx, _push, _parent) {
         if (_ctx.foo) {
-          _push(\`<!--1-->hello<!--0-->\`)
+          _push(\`<!--[-->hello<!--]-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -110,7 +110,7 @@ describe('ssr: v-if', () => {
       "
       return function ssrRender(_ctx, _push, _parent) {
         if (_ctx.foo) {
-          _push(\`<!--1--><div>hi</div><div>ho</div><!--0-->\`)
+          _push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -126,11 +126,11 @@ describe('ssr: v-if', () => {
 
       return function ssrRender(_ctx, _push, _parent) {
         if (_ctx.foo) {
-          _push(\`<!--1-->\`)
+          _push(\`<!--[-->\`)
           _ssrRenderList(_ctx.list, (i) => {
             _push(\`<div></div>\`)
           })
-          _push(\`<!--0-->\`)
+          _push(\`<!--]-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -147,7 +147,7 @@ describe('ssr: v-if', () => {
       "
       return function ssrRender(_ctx, _push, _parent) {
         if (_ctx.foo) {
-          _push(\`<!--1--><div>hi</div><div>ho</div><!--0-->\`)
+          _push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
         } else {
           _push(\`<div></div>\`)
         }

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -111,7 +111,7 @@ export function processChildren(
   asFragment = false
 ) {
   if (asFragment) {
-    context.pushStringPart(`<!--1-->`)
+    context.pushStringPart(`<!--[-->`)
   }
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
@@ -136,7 +136,7 @@ export function processChildren(
     }
   }
   if (asFragment) {
-    context.pushStringPart(`<!--0-->`)
+    context.pushStringPart(`<!--]-->`)
   }
 }
 

packages/compiler-ssr/src/transforms/ssrVFor.ts

@@ -33,12 +33,12 @@ export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
     needFragmentWrapper
   )
   // v-for always renders a fragment
-  context.pushStringPart(`<!--1-->`)
+  context.pushStringPart(`<!--[-->`)
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_LIST), [
       node.source,
       renderLoop
     ])
   )
-  context.pushStringPart(`<!--0-->`)
+  context.pushStringPart(`<!--]-->`)
 }

packages/runtime-core/src/hydration.ts

@@ -76,7 +76,7 @@ export function createHydrationFunctions(
     parentSuspense: SuspenseBoundary | null,
     optimized = false
   ): Node | null => {
-    const isFragmentStart = isComment(node) && node.data === '1'
+    const isFragmentStart = isComment(node) && node.data === '['
     if (__DEV__ && isFragmentStart) {
       // in dev mode, replace comment anchors with invisible text nodes
       // for easier debugging
@@ -403,8 +403,8 @@ export function createHydrationFunctions(
     while (node) {
       node = nextSibling(node)
       if (node && isComment(node)) {
-        if (node.data === '1') match++
-        if (node.data === '0') {
+        if (node.data === '[') match++
+        if (node.data === ']') {
           if (match === 0) {
             return nextSibling(node)
           } else {

packages/server-renderer/__tests__/renderToString.spec.ts

@@ -257,7 +257,7 @@ describe('ssr: renderToString', () => {
         )
       ).toBe(
         `<div>parent<div class="child">` +
-          `<!--1--><span>from slot</span><!--0-->` +
+          `<!--[--><span>from slot</span><!--]-->` +
           `</div></div>`
       )
 
@@ -273,7 +273,7 @@ describe('ssr: renderToString', () => {
           })
         )
       ).toBe(
-        `<div>parent<div class="child"><!--1-->fallback<!--0--></div></div>`
+        `<div>parent<div class="child"><!--[-->fallback<!--]--></div></div>`
       )
     })
 
@@ -318,7 +318,7 @@ describe('ssr: renderToString', () => {
         )
       ).toBe(
         `<div>parent<div class="child">` +
-          `<!--1--><span>from slot</span><!--0-->` +
+          `<!--[--><span>from slot</span><!--]-->` +
           `</div></div>`
       )
     })
@@ -336,7 +336,7 @@ describe('ssr: renderToString', () => {
 
       expect(await renderToString(app)).toBe(
         `<div>parent<div class="child">` +
-          `<!--1--><span>from slot</span><!--0-->` +
+          `<!--[--><span>from slot</span><!--]-->` +
           `</div></div>`
       )
     })
@@ -460,7 +460,7 @@ describe('ssr: renderToString', () => {
           ])
         )
       ).toBe(
-        `<div>foo<span>bar</span><!--1--><span>baz</span><!--0--><!--qux--></div>`
+        `<div>foo<span>bar</span><!--[--><span>baz</span><!--]--><!--qux--></div>`
       )
     })
 

packages/server-renderer/__tests__/ssrSuspense.spec.ts

@@ -33,7 +33,7 @@ describe('SSR Suspense', () => {
         }
       })
 
-      expect(await renderToString(app)).toBe(`<!--1--><div>async</div><!--0-->`)
+      expect(await renderToString(app)).toBe(`<!--[--><div>async</div><!--]-->`)
     })
 
     test('with async component', async () => {
@@ -49,7 +49,7 @@ describe('SSR Suspense', () => {
         }
       })
 
-      expect(await renderToString(app)).toBe(`<!--1--><div>async</div><!--0-->`)
+      expect(await renderToString(app)).toBe(`<!--[--><div>async</div><!--]-->`)
     })
 
     test('fallback', async () => {
@@ -69,7 +69,7 @@ describe('SSR Suspense', () => {
       })
 
       expect(await renderToString(app)).toBe(
-        `<!--1--><div>fallback</div><!--0-->`
+        `<!--[--><div>fallback</div><!--]-->`
       )
       expect('Uncaught error in async setup').toHaveBeenWarned()
     })

packages/server-renderer/src/helpers/ssrRenderSlot.ts

@@ -19,7 +19,7 @@ export function ssrRenderSlot(
   parentComponent: ComponentInternalInstance
 ) {
   // template-compiled slots are always rendered as fragments
-  push(`<!--1-->`)
+  push(`<!--[-->`)
   const slotFn = slots[slotName]
   if (slotFn) {
     if (slotFn.length > 1) {
@@ -33,5 +33,5 @@ export function ssrRenderSlot(
   } else if (fallbackRenderFn) {
     fallbackRenderFn()
   }
-  push(`<!--0-->`)
+  push(`<!--]-->`)
 }

packages/server-renderer/src/helpers/ssrRenderSuspense.ts

@@ -9,9 +9,9 @@ export async function ssrRenderSuspense({
   try {
     if (renderContent) {
       const { push, getBuffer } = createBuffer()
-      push(`<!--1-->`)
+      push(`<!--[-->`)
       renderContent(push)
-      push(`<!--0-->`)
+      push(`<!--]-->`)
       return await getBuffer()
     } else {
       return []
@@ -19,9 +19,9 @@ export async function ssrRenderSuspense({
   } catch {
     if (renderFallback) {
       const { push, getBuffer } = createBuffer()
-      push(`<!--1-->`)
+      push(`<!--[-->`)
       renderFallback(push)
-      push(`<!--0-->`)
+      push(`<!--]-->`)
       return getBuffer()
     } else {
       return []

packages/server-renderer/src/renderToString.ts

@@ -256,9 +256,9 @@ function renderVNode(
       push(children ? `<!--${children}-->` : `<!---->`)
       break
     case Fragment:
-      push(`<!--1-->`) // open
+      push(`<!--[-->`) // open
       renderVNodeChildren(push, children as VNodeArrayChildren, parentComponent)
-      push(`<!--0-->`) // close
+      push(`<!--]-->`) // close
       break
     default:
       if (shapeFlag & ShapeFlags.ELEMENT) {