/
ssrInjectCssVars.spec.ts
114 lines (103 loc) 路 3.49 KB
/
ssrInjectCssVars.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { compile } from '../src'
describe('ssr: inject <style vars>', () => {
test('basic', () => {
expect(
compile(`<div/>`, {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
}"
`)
})
test('fragment', () => {
expect(
compile(`<div/><div/>`, {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { 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 { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _cssVars = { style: { 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 { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { 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/ suspense', () => {
expect(
compile(
`<Suspense>
<div>ok</div>
<template #fallback>
<div>fallback</div>
</template>
</Suspense>`,
{
ssrCssVars: `{ color }`
}
).code
).toMatchInlineSnapshot(`
"const { withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
_ssrRenderSuspense(_push, {
fallback: () => {
_push(\`<div\${_ssrRenderAttrs(_cssVars)}>fallback</div>\`)
},
default: () => {
_push(\`<div\${_ssrRenderAttrs(_cssVars)}>ok</div>\`)
},
_: 1 /* STABLE */
})
}"
`)
})
})