genFunctionPreamble(ast, context)
}
- // enter render function
+ // binding optimizations
const optimizeSources = options.bindingMetadata
? `, $props, $setup, $data, $options`
: ``
+ // enter render function
if (!ssr) {
if (genScopeId) {
push(`const render = ${PURE_ANNOTATION}_withId(`)
* `ssrRender` option instead of `render`.
*/
ssr?: boolean
+ /**
+ * SFC <style vars> injection string
+ * needed to render inline CSS variables on component root
+ */
+ ssrCssVars?: string
/**
* Optional binding metadata analyzed from script - used to optimize
* binding access when `prefixIdentifiers` is enabled.
expressionPlugins = [],
scopeId = null,
ssr = false,
+ ssrCssVars = ``,
bindingMetadata = {},
onError = defaultOnError
}: TransformOptions
expressionPlugins,
scopeId,
ssr,
+ ssrCssVars,
bindingMetadata,
onError,
imports: new Set(),
temps: 0,
cached: 0,
- identifiers: {},
+ identifiers: Object.create(null),
scopes: {
vFor: 0,
vSlot: 0,
Object.keys(setupExports).forEach(key => {
bindings[key] = 'setup'
})
+ Object.keys(typeDeclaredProps).forEach(key => {
+ bindings[key] = 'props'
+ })
+ // TODO analyze props if user declared props via `export default {}` inside
+ // <script setup>
s.trim()
return {
--- /dev/null
+import { compile } from '../src'
+
+describe('ssr: inject <style vars>', () => {
+ test('basic', () => {
+ expect(
+ compile(`<div/>`, {
+ ssrCssVars: `{ color }`
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { mergeProps: _mergeProps } = require(\\"vue\\")
+ const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+ _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
+ }"
+ `)
+ })
+
+ test('fragment', () => {
+ expect(
+ compile(`<div/><div/>`, {
+ ssrCssVars: `{ color }`
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+ _push(\`<!--[--><div\${
+ _ssrRenderAttrs(_cssVars)
+ }></div><div\${
+ _ssrRenderAttrs(_cssVars)
+ }></div><!--]-->\`)
+ }"
+ `)
+ })
+
+ test('passing on to components', () => {
+ expect(
+ compile(`<div/><foo/>`, {
+ ssrCssVars: `{ color }`
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
+ const { ssrResolveCssVars: _ssrResolveCssVars, 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 })
+ _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
+ _push(_ssrRenderComponent(_component_foo, _cssVars, null, _parent))
+ _push(\`<!--]-->\`)
+ }"
+ `)
+ })
+
+ test('v-if branches', () => {
+ expect(
+ compile(`<div v-if="ok"/><template v-else><div/><div/></template>`, {
+ ssrCssVars: `{ color }`
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { mergeProps: _mergeProps } = require(\\"vue\\")
+ const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ const _cssVars = ssrResolveCssVars({ color: _ctx.color })
+ if (_ctx.ok) {
+ _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
+ } else {
+ _push(\`<!--[--><div\${
+ _ssrRenderAttrs(_cssVars)
+ }></div><div\${
+ _ssrRenderAttrs(_cssVars)
+ }></div><!--]-->\`)
+ }
+ }"
+ `)
+ })
+
+ test('w/ scopeId', () => {
+ expect(
+ compile(`<div/>`, {
+ ssrCssVars: `{ color }`,
+ scopeId: 'data-v-foo'
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { mergeProps: _mergeProps } = require(\\"vue\\")
+ const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = 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>\`)
+ }"
+ `)
+ })
+})
import { ssrTransformModel } from './transforms/ssrVModel'
import { ssrTransformShow } from './transforms/ssrVShow'
import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttrs'
+import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
export function compile(
template: string,
transformExpression,
ssrTransformSlotOutlet,
ssrInjectFallthroughAttrs,
+ ssrInjectCssVars,
ssrTransformElement,
ssrTransformComponent,
trackSlotScopes,
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`,
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
[SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
- [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
+ [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
+ [SSR_RESOLVE_CSS_VARS]: `ssrResolveCssVars`
}
// Note: these are helpers imported from @vue/server-renderer
CompilerOptions,
IfStatement,
CallExpression,
- isText
+ isText,
+ processExpression,
+ createSimpleExpression,
+ createCompoundExpression,
+ createTransformContext,
+ createRoot
} from '@vue/compiler-dom'
import { isString, escapeHtml } from '@vue/shared'
-import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
+import {
+ SSR_INTERPOLATE,
+ ssrHelpers,
+ SSR_RESOLVE_CSS_VARS
+} from './runtimeHelpers'
import { ssrProcessIf } from './transforms/ssrVIf'
import { ssrProcessFor } from './transforms/ssrVFor'
import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
const context = createSSRTransformContext(ast, options)
+
+ // inject <style vars> resolution
+ // we do this instead of inlining the expression to ensure the vars are
+ // only resolved once per render
+ if (options.ssrCssVars) {
+ const varsExp = processExpression(
+ createSimpleExpression(options.ssrCssVars, false),
+ createTransformContext(createRoot([]), options)
+ )
+ context.body.push(
+ createCompoundExpression([
+ `const _cssVars = ${ssrHelpers[SSR_RESOLVE_CSS_VARS]}(`,
+ varsExp,
+ options.scopeId ? `, ${JSON.stringify(options.scopeId)}` : ``,
+ `)`
+ ])
+ )
+ }
+
const isFragment =
ast.children.length > 1 && ast.children.some(c => !isText(c))
processChildren(ast.children, context, isFragment)
--- /dev/null
+import {
+ NodeTransform,
+ NodeTypes,
+ ElementTypes,
+ locStub,
+ createSimpleExpression,
+ RootNode,
+ TemplateChildNode,
+ findDir
+} from '@vue/compiler-dom'
+import { SSR_RESOLVE_CSS_VARS } from '../runtimeHelpers'
+
+export const ssrInjectCssVars: NodeTransform = (node, context) => {
+ if (!context.ssrCssVars) {
+ return
+ }
+
+ // _cssVars is initailized once per render function
+ // the code is injected in ssrCodegenTrasnform when creating the
+ // ssr transform context
+ if (node.type === NodeTypes.ROOT) {
+ context.identifiers._cssVars = 1
+ }
+
+ const parent = context.parent
+ if (!parent || parent.type !== NodeTypes.ROOT) {
+ return
+ }
+
+ context.helper(SSR_RESOLVE_CSS_VARS)
+
+ if (node.type === NodeTypes.IF_BRANCH) {
+ for (const child of node.children) {
+ injectCssVars(child)
+ }
+ } else {
+ injectCssVars(node)
+ }
+}
+
+function injectCssVars(node: RootNode | TemplateChildNode) {
+ if (
+ node.type === NodeTypes.ELEMENT &&
+ (node.tagType === ElementTypes.ELEMENT ||
+ node.tagType === ElementTypes.COMPONENT) &&
+ !findDir(node, 'for')
+ ) {
+ node.props.push({
+ type: NodeTypes.DIRECTIVE,
+ name: 'bind',
+ arg: undefined,
+ exp: createSimpleExpression(`_cssVars`, false),
+ modifiers: [],
+ loc: locStub
+ })
+ }
+}
import {
render,
- useCSSVars,
+ useCssVars,
h,
reactive,
nextTick,
await assertCssVars(state => ({
setup() {
// test receiving render context
- useCSSVars((ctx: any) => ({
+ useCssVars((ctx: any) => ({
color: ctx.color
}))
return state
test('on fragment root', async () => {
await assertCssVars(state => ({
setup() {
- useCSSVars(() => state)
+ useCssVars(() => state)
return () => [h('div'), h('div')]
}
}))
await assertCssVars(state => ({
setup() {
- useCSSVars(() => state)
+ useCssVars(() => state)
return () => h(Child)
}
}))
state => ({
__scopeId: id,
setup() {
- useCSSVars(() => state, true)
+ useCssVars(() => state, true)
return () => h('div')
}
}),
import { warn, getCurrentInstance } from '@vue/runtime-core'
import { EMPTY_OBJ } from '@vue/shared'
-export function useCSSModule(name = '$style'): Record<string, string> {
+export function useCssModule(name = '$style'): Record<string, string> {
if (!__GLOBAL__) {
const instance = getCurrentInstance()!
if (!instance) {
} from '@vue/runtime-core'
import { ShapeFlags } from '@vue/shared/src'
-export function useCSSVars(
+export function useCssVars(
getter: (ctx: ComponentPublicInstance) => Record<string, string>,
scoped = false
) {
}
// SFC CSS utilities
-export { useCSSModule } from './helpers/useCssModule'
-export { useCSSVars } from './helpers/useCssVars'
+export { useCssModule } from './helpers/useCssModule'
+export { useCssVars } from './helpers/useCssVars'
// DOM-only components
export { Transition, TransitionProps } from './components/Transition'
--- /dev/null
+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'
+ }
+ })
+ })
+})
--- /dev/null
+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 }
+}
export { ssrInterpolate } from './helpers/ssrInterpolate'
export { ssrRenderList } from './helpers/ssrRenderList'
export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
+export { ssrResolveCssVars } from './helpers/ssrResolveCssVars'
// v-model helpers
export {
optimizeImports: false,
hoistStatic: false,
cacheHandlers: false,
- scopeId: null
+ scopeId: null,
+ ssrCssVars: `{ color }`
})
const App = {
projects / thirdparty / vuejs / core.git / commitdiff
