Skip to content

Commit 41bb7fa

Browse files
yyx990803yyx990803
committed
feat(compiler-sfc): new SFC css varaible injection implementation
ref: vuejs/rfcs#231
1 parent 62372e9 commit 41bb7fa

16 files changed

+497
-341
lines changed

‎packages/compiler-core/src/codegen.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -215,9 +215,10 @@ export function generate(
215215
}
216216

217217
// binding optimizations
218-
const optimizeSources = options.bindingMetadata
219-
? `, $props, $setup, $data, $options`
220-
: ``
218+
const optimizeSources =
219+
options.bindingMetadata && !options.inline
220+
? `, $props, $setup, $data, $options`
221+
: ``
221222
// enter render function
222223
if (!ssr) {
223224
if (isSetupInlined) {

‎packages/compiler-core/src/transforms/transformExpression.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,16 @@ export function processExpression(
113113
// it gets correct type
114114
return `__props.${raw}`
115115
}
116-
}
117-
118-
if (type === BindingTypes.CONST) {
119-
// setup const binding in non-inline mode
120-
return `$setup.${raw}`
121-
} else if (type) {
122-
return `$${type}.${raw}`
123116
} else {
124-
// fallback to ctx
125-
return `_ctx.${raw}`
117+
if (type === BindingTypes.CONST) {
118+
// setup const binding in non-inline mode
119+
return `$setup.${raw}`
120+
} else if (type) {
121+
return `$${type}.${raw}`
122+
}
126123
}
124+
// fallback to ctx
125+
return `_ctx.${raw}`
127126
}
128127

129128
// fast path if expression is a simple identifier.

‎packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

+22-79
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
4-
"const __default__ = { setup() {} }
5-
import { useCssVars as _useCssVars } from 'vue'
6-
const __injectCSSVars__ = () => {
7-
_useCssVars(_ctx => ({ color: _ctx.color }))
8-
}
9-
const __setup__ = __default__.setup
10-
__default__.setup = __setup__
11-
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
12-
: __injectCSSVars__
13-
export default __default__"
14-
`;
15-
16-
exports[`SFC compile <script setup> CSS vars injection <script> w/ default export in strings/comments 1`] = `
17-
"
18-
// export default {}
19-
const __default__ = {}
20-
21-
import { useCssVars as _useCssVars } from 'vue'
22-
const __injectCSSVars__ = () => {
23-
_useCssVars(_ctx => ({ color: _ctx.color }))
24-
}
25-
const __setup__ = __default__.setup
26-
__default__.setup = __setup__
27-
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
28-
: __injectCSSVars__
29-
export default __default__"
30-
`;
31-
32-
exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
33-
"const a = 1
34-
const __default__ = {}
35-
import { useCssVars as _useCssVars } from 'vue'
36-
const __injectCSSVars__ = () => {
37-
_useCssVars(_ctx => ({ color: _ctx.color }))
38-
}
39-
const __setup__ = __default__.setup
40-
__default__.setup = __setup__
41-
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
42-
: __injectCSSVars__
43-
export default __default__"
44-
`;
45-
46-
exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
47-
"import { useCssVars as _useCssVars } from 'vue'
48-
49-
export default {
50-
expose: [],
51-
setup() {
52-
const color = 'red'
53-
_useCssVars(_ctx => ({ color }))
54-
return { color }
55-
}
56-
57-
}"
58-
`;
59-
603
exports[`SFC compile <script setup> defineOptions() 1`] = `
614
"export default {
625
expose: [],
@@ -86,7 +29,7 @@ export default {
8629
default: () => bar
8730
}
8831
},
89-
setup() {
32+
setup(__props) {
9033
9134
9235
@@ -104,7 +47,7 @@ exports[`SFC compile <script setup> errors should allow defineOptions() referenc
10447
default: bar => bar + 1
10548
}
10649
},
107-
setup() {
50+
setup(__props) {
10851
10952
const bar = 1
11053
@@ -121,7 +64,7 @@ import { ref } from 'vue'
12164
12265
export default {
12366
expose: [],
124-
setup() {
67+
setup(__props) {
12568
12669
const foo = _ref(1)
12770
@@ -136,7 +79,7 @@ exports[`SFC compile <script setup> imports import dedupe between <script> and <
13679
13780
export default {
13881
expose: [],
139-
setup() {
82+
setup(__props) {
14083
14184
x()
14285
@@ -152,7 +95,7 @@ exports[`SFC compile <script setup> imports should extract comment for import or
15295
15396
export default {
15497
expose: [],
155-
setup() {
98+
setup(__props) {
15699
157100
158101
return { a, b }
@@ -165,7 +108,7 @@ exports[`SFC compile <script setup> imports should hoist and expose imports 1`]
165108
"import { ref } from 'vue'
166109
export default {
167110
expose: [],
168-
setup() {
111+
setup(__props) {
169112
170113
return { ref }
171114
}
@@ -182,13 +125,13 @@ import { ref } from 'vue'
182125
183126
export default {
184127
expose: [],
185-
setup() {
128+
setup(__props) {
186129
187130
const count = ref(0)
188131
const constant = {}
189132
function fn() {}
190133
191-
return (_ctx, _cache, $props, $setup, $data, $options) => {
134+
return (_ctx, _cache) => {
192135
return (_openBlock(), _createBlock(_Fragment, null, [
193136
_createVNode(Foo),
194137
_createVNode(\\"div\\", { onClick: fn }, _toDisplayString(_unref(count)) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
@@ -208,11 +151,11 @@ import { ref } from 'vue'
208151
209152
export default {
210153
expose: [],
211-
setup() {
154+
setup(__props) {
212155
213156
const count = ref(0)
214157
215-
return (_ctx, _cache, $props, $setup, $data, $options) => {
158+
return (_ctx, _cache) => {
216159
return (_openBlock(), _createBlock(_Fragment, null, [
217160
_createVNode(\\"div\\", null, _toDisplayString(_unref(count)), 1 /* TEXT */),
218161
_hoisted_1
@@ -228,7 +171,7 @@ exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`]
228171
229172
export default {
230173
expose: [],
231-
setup() {
174+
setup(__props) {
232175
233176
const a = _ref(1)
234177
console.log(a.value)
@@ -247,7 +190,7 @@ exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
247190
248191
export default {
249192
expose: [],
250-
setup() {
193+
setup(__props) {
251194
252195
const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
253196
const a = _ref(__a);
@@ -266,7 +209,7 @@ exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1
266209
267210
export default {
268211
expose: [],
269-
setup() {
212+
setup(__props) {
270213
271214
const foo = _ref()
272215
const a = _ref(1)
@@ -287,7 +230,7 @@ exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`]
287230
288231
export default {
289232
expose: [],
290-
setup() {
233+
setup(__props) {
291234
292235
const a = _ref(1), b = _ref(2), c = _ref({
293236
count: 0
@@ -304,7 +247,7 @@ exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] =
304247
305248
export default {
306249
expose: [],
307-
setup() {
250+
setup(__props) {
308251
309252
const a = _ref(1)
310253
const b = _ref({ count: 0 })
@@ -326,7 +269,7 @@ exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
326269
327270
export default {
328271
expose: [],
329-
setup() {
272+
setup(__props) {
330273
331274
const [{ a: { b: __b }}] = useFoo()
332275
const b = _ref(__b);
@@ -346,7 +289,7 @@ exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
346289
347290
export default {
348291
expose: [],
349-
setup() {
292+
setup(__props) {
350293
351294
const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
352295
const a = _ref(__a);
@@ -365,7 +308,7 @@ return { n, a, c, d, f, g }
365308
exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
366309
"export default {
367310
expose: [],
368-
setup() {
311+
setup(__props) {
369312
370313
foo: a = 1, b = 2, c = {
371314
count: 0
@@ -382,7 +325,7 @@ exports[`SFC compile <script setup> ref: syntax sugar using ref binding in prope
382325
383326
export default {
384327
expose: [],
385-
setup() {
328+
setup(__props) {
386329
387330
const a = _ref(1)
388331
const b = { a: a.value }
@@ -401,7 +344,7 @@ exports[`SFC compile <script setup> should expose top level declarations 1`] = `
401344
402345
export default {
403346
expose: [],
404-
setup() {
347+
setup(__props) {
405348
406349
let a = 1
407350
const b = 2
@@ -509,7 +452,7 @@ export default _defineComponent({
509452
literalUnionMixed: { type: [String, Number, Boolean], required: true },
510453
intersection: { type: Object, required: true }
511454
} as unknown as undefined,
512-
setup() {
455+
setup(__props) {
513456
514457
515458
@@ -526,7 +469,7 @@ export interface Foo {}
526469
527470
export default _defineComponent({
528471
expose: [],
529-
setup() {
472+
setup(__props) {
530473
531474
532475
return { }

0 commit comments

Comments
 (0)