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
})
}"
`)
})

4
packages/compiler-ssr/src/runtimeHelpers.ts
View File

@@ -16,7 +16,6 @@ export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
export const SSR_RESOLVE_CSS_VARS = Symbol(`ssrResolveCssVars`)
export const ssrHelpers = {
[SSR_INTERPOLATE]: `ssrInterpolate`,
@@ -34,8 +33,7 @@ export const ssrHelpers = {
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
[SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
[SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
[SSR_RESOLVE_CSS_VARS]: `ssrResolveCssVars`
[SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
}
// Note: these are helpers imported from @vue/server-renderer

15
packages/compiler-ssr/src/ssrCodegenTransform.ts
View File

@@ -19,11 +19,7 @@ import {
createRoot
} from '@vue/compiler-dom'
import { isString, escapeHtml } from '@vue/shared'
import {
SSR_INTERPOLATE,
ssrHelpers,
SSR_RESOLVE_CSS_VARS
} from './runtimeHelpers'
import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
import { ssrProcessIf } from './transforms/ssrVIf'
import { ssrProcessFor } from './transforms/ssrVFor'
import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
@@ -40,7 +36,7 @@ import { createSSRCompilerError, SSRErrorCodes } from './errors'
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
const context = createSSRTransformContext(ast, options)
// inject <style vars> resolution
// inject SFC <style> CSS variables
// we do this instead of inlining the expression to ensure the vars are
// only resolved once per render
if (options.ssrCssVars) {
@@ -49,12 +45,7 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
createTransformContext(createRoot([]), options)
)
context.body.push(
createCompoundExpression([
`const _cssVars = _${ssrHelpers[SSR_RESOLVE_CSS_VARS]}(`,
varsExp,
options.scopeId ? `, ${JSON.stringify(options.scopeId)}` : ``,
`)`
])
createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
)
}

36
packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
View File

@@ -6,9 +6,9 @@ import {
createSimpleExpression,
RootNode,
TemplateChildNode,
findDir
findDir,
isBuiltInType
} from '@vue/compiler-dom'
import { SSR_RESOLVE_CSS_VARS } from '../runtimeHelpers'
export const ssrInjectCssVars: NodeTransform = (node, context) => {
if (!context.ssrCssVars) {
@@ -27,8 +27,6 @@ export const ssrInjectCssVars: NodeTransform = (node, context) => {
return
}
context.helper(SSR_RESOLVE_CSS_VARS)
if (node.type === NodeTypes.IF_BRANCH) {
for (const child of node.children) {
injectCssVars(child)
@@ -45,13 +43,27 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
node.tagType === ElementTypes.COMPONENT) &&
!findDir(node, 'for')
) {
node.props.push({
type: NodeTypes.DIRECTIVE,
name: 'bind',
arg: undefined,
exp: createSimpleExpression(`_cssVars`, false),
modifiers: [],
loc: locStub
})
if (isBuiltInType(node.tag, 'Suspense')) {
for (const child of node.children) {
if (
child.type === NodeTypes.ELEMENT &&
child.tagType === ElementTypes.TEMPLATE
) {
// suspense slot
child.children.forEach(injectCssVars)
} else {
injectCssVars(child)
}
}
} else {
node.props.push({
type: NodeTypes.DIRECTIVE,
name: 'bind',
arg: undefined,
exp: createSimpleExpression(`_cssVars`, false),
modifiers: [],
loc: locStub
})
}
}
}