From: Evan You <yyx990803@gmail.com>
Date: Sun, 12 Jul 2020 22:04:09 +0000 (-0400)
Subject: feat: ssr support for `<style vars>`
X-Git-Tag: v3.0.0-beta.21~20
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b9595e64cfdfc2607d3d3e6232b4a7ea199dd553;p=thirdparty%2Fvuejs%2Fcore.git

feat: ssr support for `<style vars>`
---

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 53551be9bc..fab88a2ff4 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -204,10 +204,11 @@ export function generate(
     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(`)
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index d819b226b5..c5e9deaf02 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -126,6 +126,11 @@ export interface TransformOptions {
    * `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.
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index c73e43c545..f93b617cbc 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -120,6 +120,7 @@ export function createTransformContext(
     expressionPlugins = [],
     scopeId = null,
     ssr = false,
+    ssrCssVars = ``,
     bindingMetadata = {},
     onError = defaultOnError
   }: TransformOptions
@@ -136,6 +137,7 @@ export function createTransformContext(
     expressionPlugins,
     scopeId,
     ssr,
+    ssrCssVars,
     bindingMetadata,
     onError,
 
@@ -148,7 +150,7 @@ export function createTransformContext(
     imports: new Set(),
     temps: 0,
     cached: 0,
-    identifiers: {},
+    identifiers: Object.create(null),
     scopes: {
       vFor: 0,
       vSlot: 0,
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 4080762848..6137f27155 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -591,6 +591,11 @@ export function compileScript(
   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 {
diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
new file mode 100644
index 0000000000..2ea2b7fe5d
--- /dev/null
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -0,0 +1,99 @@
+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>\`)
+      }"
+    `)
+  })
+})
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 02153773b6..c04529f993 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -24,6 +24,7 @@ import { ssrTransformFor } from './transforms/ssrVFor'
 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,
@@ -57,6 +58,7 @@ export function compile(
       transformExpression,
       ssrTransformSlotOutlet,
       ssrInjectFallthroughAttrs,
+      ssrInjectCssVars,
       ssrTransformElement,
       ssrTransformComponent,
       trackSlotScopes,
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index 2aa93c0bf1..ee0b7a2eaf 100644
--- a/packages/compiler-ssr/src/runtimeHelpers.ts
+++ b/packages/compiler-ssr/src/runtimeHelpers.ts
@@ -16,6 +16,7 @@ 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`,
@@ -33,7 +34,8 @@ export const ssrHelpers = {
   [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
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index cca7318e79..45cc1a6d50 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -11,10 +11,19 @@ import {
   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'
@@ -30,6 +39,25 @@ import { createSSRCompilerError, SSRErrorCodes } from './errors'
 
 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)
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
new file mode 100644
index 0000000000..0e6540c3b6
--- /dev/null
+++ b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
@@ -0,0 +1,57 @@
+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
+    })
+  }
+}
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index a7d8e8e860..5260d2a82b 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -1,6 +1,6 @@
 import {
   render,
-  useCSSVars,
+  useCssVars,
   h,
   reactive,
   nextTick,
@@ -37,7 +37,7 @@ describe('useCssVars', () => {
     await assertCssVars(state => ({
       setup() {
         // test receiving render context
-        useCSSVars((ctx: any) => ({
+        useCssVars((ctx: any) => ({
           color: ctx.color
         }))
         return state
@@ -51,7 +51,7 @@ describe('useCssVars', () => {
   test('on fragment root', async () => {
     await assertCssVars(state => ({
       setup() {
-        useCSSVars(() => state)
+        useCssVars(() => state)
         return () => [h('div'), h('div')]
       }
     }))
@@ -62,7 +62,7 @@ describe('useCssVars', () => {
 
     await assertCssVars(state => ({
       setup() {
-        useCSSVars(() => state)
+        useCssVars(() => state)
         return () => h(Child)
       }
     }))
@@ -75,7 +75,7 @@ describe('useCssVars', () => {
       state => ({
         __scopeId: id,
         setup() {
-          useCSSVars(() => state, true)
+          useCssVars(() => state, true)
           return () => h('div')
         }
       }),
diff --git a/packages/runtime-dom/src/helpers/useCssModule.ts b/packages/runtime-dom/src/helpers/useCssModule.ts
index b54dcaf76a..18b7048f63 100644
--- a/packages/runtime-dom/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -1,7 +1,7 @@
 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) {
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index 6c45894fe3..5bf4f46971 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -9,7 +9,7 @@ import {
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared/src'
 
-export function useCSSVars(
+export function useCssVars(
   getter: (ctx: ComponentPublicInstance) => Record<string, string>,
   scoped = false
 ) {
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index faa26ea278..fc73bf926b 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -114,8 +114,8 @@ function normalizeContainer(container: Element | string): Element | null {
 }
 
 // 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'
diff --git a/packages/server-renderer/__tests__/ssrResolveCssVars.spec.ts b/packages/server-renderer/__tests__/ssrResolveCssVars.spec.ts
new file mode 100644
index 0000000000..c4bccfd4f5
--- /dev/null
+++ b/packages/server-renderer/__tests__/ssrResolveCssVars.spec.ts
@@ -0,0 +1,27 @@
+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'
+      }
+    })
+  })
+})
diff --git a/packages/server-renderer/src/helpers/ssrResolveCssVars.ts b/packages/server-renderer/src/helpers/ssrResolveCssVars.ts
new file mode 100644
index 0000000000..7165dccedb
--- /dev/null
+++ b/packages/server-renderer/src/helpers/ssrResolveCssVars.ts
@@ -0,0 +1,11 @@
+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 }
+}
diff --git a/packages/server-renderer/src/index.ts b/packages/server-renderer/src/index.ts
index 9c5066e851..7b59d05224 100644
--- a/packages/server-renderer/src/index.ts
+++ b/packages/server-renderer/src/index.ts
@@ -18,6 +18,7 @@ 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 {
diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index 02ac3c9b71..167b23d0b8 100644
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -9,7 +9,8 @@ export const compilerOptions: CompilerOptions = reactive({
   optimizeImports: false,
   hoistStatic: false,
   cacheHandlers: false,
-  scopeId: null
+  scopeId: null,
+  ssrCssVars: `{ color }`
 })
 
 const App = {