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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/compiler-core/src/options.ts
View File

@ -166,6 +166,7 @@ export interface TransformOptions extends SharedTransformCodegenOptions {
scopeId?: string | null
/**
* SFC `<style vars>` injection string
* Should already be an object expression, e.g. `{ 'xxxx-color': color }`
* needed to render inline CSS variables on component root
*/
ssrCssVars?: string

2
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -245,7 +245,7 @@ export function resolveComponentType(
const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
if (builtIn) {
// built-ins are simply fallthroughs / have special handling during ssr
// no we don't need to import their runtime equivalents
// so we don't need to import their runtime equivalents
if (!ssr) context.helper(builtIn)
return builtIn
}

10
packages/compiler-sfc/src/compileScript.ts
View File

@ -31,6 +31,7 @@ import {
injectCssVarsCalls
} from './cssVars'
import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
import { warnOnce } from './warn'
const DEFINE_OPTIONS = 'defineOptions'
@ -65,15 +66,6 @@ export interface SFCScriptCompileOptions {
templateOptions?: Partial<SFCTemplateCompileOptions>
}
const hasWarned: Record<string, boolean> = {}
function warnOnce(msg: string) {
if (!hasWarned[msg]) {
hasWarned[msg] = true
console.log(`\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
}
}
/**
* Compile `<script setup>`
* It requires the whole SFC descriptor because we need to handle and merge

9
packages/compiler-sfc/src/compileTemplate.ts
View File

@ -22,6 +22,7 @@ import { isObject } from '@vue/shared'
import * as CompilerDOM from '@vue/compiler-dom'
import * as CompilerSSR from '@vue/compiler-ssr'
import consolidate from 'consolidate'
import { warnOnce } from './warn'
export interface TemplateCompiler {
compile(template: string, options: CompilerOptions): CodegenResult
@ -170,6 +171,14 @@ function doCompileTemplate({
nodeTransforms = [transformAssetUrl, transformSrcset]
}
if (ssr && !compilerOptions.ssrCssVars) {
warnOnce(
`compileTemplate is called with \`ssr: true\` but no ` +
`corresponding \`ssrCssVars\` option. The value can be generated by ` +
`calling \`generateCssVars(sfcDescriptor, scopeId, isProduction)\`.`
)
}
let { code, ast, preamble, map } = compiler.compile(source, {
mode: 'module',
prefixIdentifiers: true,

29
packages/compiler-sfc/src/cssVars.ts
View File

@ -16,7 +16,30 @@ import hash from 'hash-sum'
export const CSS_VARS_HELPER = `useCssVars`
export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
export function genVarName(id: string, raw: string, isProd: boolean): string {
/**
* Given an SFC descriptor, generate the CSS variables object string that can be
* passed to `compileTemplate` as `compilerOptions.ssrCssVars`.
* @public
*/
export function generateCssVars(
sfc: SFCDescriptor,
id: string,
isProd: boolean
): string {
return genCssVarsFromList(parseCssVars(sfc), id, isProd)
}
function genCssVarsFromList(
vars: string[],
id: string,
isProd: boolean
): string {
return `{\n ${vars
.map(v => `"${genVarName(id, v, isProd)}": (${v})`)
.join(',\n ')}\n}`
}
function genVarName(id: string, raw: string, isProd: boolean): string {
if (isProd) {
return hash(id + raw)
} else {
@ -63,9 +86,7 @@ export function genCssVarsCode(
id: string,
isProd: boolean
) {
const varsExp = `{\n ${vars
.map(v => `"${genVarName(id, v, isProd)}": (${v})`)
.join(',\n ')}\n}`
const varsExp = genCssVarsFromList(vars, id, isProd)
const exp = createSimpleExpression(varsExp, false)
const context = createTransformContext(createRoot([]), {
prefixIdentifiers: true,

1
packages/compiler-sfc/src/index.ts
View File

@ -5,6 +5,7 @@ export { compileStyle, compileStyleAsync } from './compileStyle'
export { compileScript } from './compileScript'
export { rewriteDefault } from './rewriteDefault'
export { generateCodeFrame } from '@vue/compiler-core'
export { generateCssVars } from './cssVars'
// Types
export {

13
packages/compiler-sfc/src/stylePluginScoped.ts
View File

@ -1,5 +1,6 @@
import postcss, { Root } from 'postcss'
import selectorParser, { Node, Selector } from 'postcss-selector-parser'
import { warn } from './warn'
const animationNameRE = /^(-\w+-)?animation-name$/
const animationRE = /^(-\w+-)?animation$/
@ -35,9 +36,9 @@ export default postcss.plugin('vue-scoped', (id: any) => (root: Root) => {
) {
n.value = ' '
n.spaces.before = n.spaces.after = ''
console.warn(
`[@vue/compiler-sfc] the >>> and /deep/ combinators have ` +
`been deprecated. Use ::v-deep instead.`
warn(
`the >>> and /deep/ combinators have been deprecated. ` +
`Use :deep() instead.`
)
return false
}
@ -69,9 +70,9 @@ export default postcss.plugin('vue-scoped', (id: any) => (root: Root) => {
} else {
// DEPRECATED usage
// .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
console.warn(
`[@vue/compiler-sfc] ::v-deep usage as a combinator has ` +
`been deprecated. Use ::v-deep(<inner-selector>) instead.`
warn(
`::v-deep usage as a combinator has ` +
`been deprecated. Use :deep(<inner-selector>) instead.`
)
const prev = selector.at(selector.index(n) - 1)
if (prev && isSpaceCombinator(prev)) {

12
packages/compiler-sfc/src/warn.ts Normal file
View File

@ -0,0 +1,12 @@
const hasWarned: Record<string, boolean> = {}
export function warnOnce(msg: string) {
if (!hasWarned[msg]) {
hasWarned[msg] = true
warn(msg)
}
}
export function warn(msg: string) {
console.warn(`\x1b[33m[@vue/compiler-sfc] ${msg}\x1b[0m\n`)
}

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

20
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,6 +43,19 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
node.tagType === ElementTypes.COMPONENT) &&
!findDir(node, 'for')
) {
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',
@ -55,3 +66,4 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
})
}
}
}

27
packages/server-renderer/__tests__/ssrResolveCssVars.spec.ts
View File

@ -1,27 +0,0 @@
import { ssrResolveCssVars } from '../src'
describe('ssr: resolveCssVars', () => {
test('should work', () => {
expect(ssrResolveCssVars({ color: 'red' })).toMatchObject({
style: {
'--color': 'red'
}
})
})
test('should work with scopeId', () => {
expect(ssrResolveCssVars({ color: 'red' }, 'scoped')).toMatchObject({
style: {
'--scoped-color': 'red'
}
})
})
test('should strip data-v prefix', () => {
expect(ssrResolveCssVars({ color: 'red' }, 'data-v-123456')).toMatchObject({
style: {
'--123456-color': 'red'
}
})
})
})

11
packages/server-renderer/src/helpers/ssrResolveCssVars.ts
View File

@ -1,11 +0,0 @@
export function ssrResolveCssVars(
source: Record<string, string>,
scopeId?: string
) {
const style: Record<string, string> = {}
const prefix = scopeId ? `${scopeId.replace(/^data-v-/, '')}-` : ``
for (const key in source) {
style[`--${prefix}${key}`] = source[key]
}
return { style }
}

1
packages/server-renderer/src/index.ts
View File

@ -18,7 +18,6 @@ export {
export { ssrInterpolate } from './helpers/ssrInterpolate'
export { ssrRenderList } from './helpers/ssrRenderList'
export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
export { ssrResolveCssVars } from './helpers/ssrResolveCssVars'
// v-model helpers
export {