theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: new cssVars SSR integration + fix cssVars SSR injection for suspense

Browse Source
This commit is contained in:
Evan You
2020-11-17 18:54:47 -05:00
parent 9297410569
commit cdc9f336fd
15 changed files with 117 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
View File

@@ -8,10 +8,10 @@ describe('ssr: inject <style vars>', () => {
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
const _cssVars = { style: { color: _ctx.color }}
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
}"
`)
@@ -23,10 +23,10 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${
_ssrRenderAttrs(_cssVars)
}></div><div\${
@@ -43,12 +43,12 @@ describe('ssr: inject <style vars>', () => {
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
_push(_ssrRenderComponent(_component_foo, _cssVars, null, _parent))
_push(\`<!--]-->\`)
@@ -63,10 +63,10 @@ describe('ssr: inject <style vars>', () => {
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
const _cssVars = { style: { color: _ctx.color }}
if (_ctx.ok) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
} else {
@@ -80,19 +80,34 @@ describe('ssr: inject <style vars>', () => {
`)
})
test('w/ scopeId', () => {
test('w/ suspense', () => {
expect(
compile(`<div/>`, {
ssrCssVars: `{ color }`,
scopeId: 'data-v-foo'
}).code
compile(
`<Suspense>
<div>ok</div>
<template #fallback>
<div>fallback</div>
</template>
</Suspense>`,
{
ssrCssVars: `{ color }`
}
).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = _ssrResolveCssVars({ color: _ctx.color }, \\"data-v-foo\\")
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))} data-v-foo></div>\`)
const _cssVars = { style: { color: _ctx.color }}
_ssrRenderSuspense(_push, {
fallback: () => {
_push(\`<div\${_ssrRenderAttrs(_cssVars)}>fallback</div>\`)
},
default: () => {
_push(\`<div\${_ssrRenderAttrs(_cssVars)}>ok</div>\`)
},
_: 1
})
}"
`)
})