feat(ssr/suspense): suspense hydration

In order to support hydration of async components, server-rendered
fragments must be explicitly marked with comment nodes.
This commit is contained in:
Evan You
2020-03-12 22:19:41 -04:00
parent b3d7d64931
commit a3cc970030
19 changed files with 385 additions and 139 deletions

View File

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