refactor(ssr): adjust ssr fragment anchor content

diff --git a/packages/compiler-core/__tests__/hydration.spec.ts b/packages/compiler-core/__tests__/hydration.spec.ts
index fc020a45706807b38a473bb55d2663504e7012f4..af332cd1ebf80f466f0ac17f8a16af6fa312d5a7 100644 (file)
--- a/packages/compiler-core/__tests__/hydration.spec.ts
+++ b/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 () => {

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 9872b22d79b060dcde44f9fddc057e4fd5351c22..d4df85384694b8df378ec50b76ab358f68c4d75e 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/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><!--]-->\`)
         }"
       `)
 

diff --git a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
index 62697ffa2349638a7b165dcaf46d69b498694e01..d599bc1ae49daf002fda7693238f817872cdebc6 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
+++ b/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(\`<!--]-->\`)
       }"
     `)
   })

diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index 0e887c121071109b29f3bc8b2ef715a8108a2b0d..51a3d78fe6ba564e0473e31d7e7dac0278607bf9 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/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>\`)
         }

diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index c82c828080e8457d92f028c64306b5d29446d971..2d68800f1d8e88190ae58cdcf9b09d50e4bfe407 100644 (file)
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/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(`<!--]-->`)
   }
 }
 

diff --git a/packages/compiler-ssr/src/transforms/ssrVFor.ts b/packages/compiler-ssr/src/transforms/ssrVFor.ts
index a4a78a8db177311bb87db560242758e3706ca616..9a87ca86b78b5288889907220e744142068755b3 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrVFor.ts
+++ b/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(`<!--]-->`)
 }

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index cee0ca6eb4e0070d6c63ca157eb5107304c18bc6..5caa282b4012f94d6123e4d022ee0e55f8183706 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/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 {

diff --git a/packages/server-renderer/__tests__/renderToString.spec.ts b/packages/server-renderer/__tests__/renderToString.spec.ts
index 710dbc9f4a3281316279380e88ab44eb7b9d2925..7a0de6fe97a66ff43283f94dd3c40356f0147242 100644 (file)
--- a/packages/server-renderer/__tests__/renderToString.spec.ts
+++ b/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>`
       )
     })
 

diff --git a/packages/server-renderer/__tests__/ssrSuspense.spec.ts b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
index 02a50fa1652026d81a5154068b46614e3a506c40..e7bd3b5baaccbafd208e5e870cf7e643032b5ef2 100644 (file)
--- a/packages/server-renderer/__tests__/ssrSuspense.spec.ts
+++ b/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()
     })

diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index bfdf137f0049728ff9932f90327e2787947a436b..64d321827cf349e7a6ac548205a31d4c8bb95cff 100644 (file)
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/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(`<!--]-->`)
 }

diff --git a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
index 3f1f66d3e2686a7719487348e3f79730e70fd064..00546a687dd33fa872a8e221564fb24c8f52cf68 100644 (file)
--- a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
+++ b/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 []

diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
index 524c19c5ebb286cb572f726b84dc9f26849f5521..09a5ad3b0f4bed42e129e4c035becb317f1aa685 100644 (file)
--- a/packages/server-renderer/src/renderToString.ts
+++ b/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) {