refactor(ssr): adjust ssr fragment anchor content

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(`<!--]-->`)
 }