feat: ssr support for <style vars>

2020-07-12 18:04:09 -04:00
parent b6cdd5621e
commit b9595e64cf
17 changed files with 256 additions and 15 deletions
--- a/packages/compiler-ssr/tests/ssrInjectCssVars.spec.ts
+++ 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>\`)
+      }"
+    `)
+  })
+})