Skip to content

Commit

Permalink
feat(compiler-sfc): new SFC css varaible injection implementation
Browse files Browse the repository at this point in the history 
ref: vuejs/rfcs#231
  • Loading branch information
@yyx990803
yyx990803 committed Nov 16, 2020
1 parent 62372e9 commit 41bb7fa
Show file tree
Hide file tree
Showing 16 changed files with 497 additions and 341 deletions.
7 changes: 4 additions & 3 deletions packages/compiler-core/src/codegen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,10 @@ export function generate(
}

// binding optimizations
const optimizeSources = options.bindingMetadata
? `, $props, $setup, $data, $options`
: ``
const optimizeSources =
options.bindingMetadata && !options.inline
? `, $props, $setup, $data, $options`
: ``
// enter render function
if (!ssr) {
if (isSetupInlined) {
Expand Down
17 changes: 8 additions & 9 deletions packages/compiler-core/src/transforms/transformExpression.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,16 @@ export function processExpression(
// it gets correct type
return `__props.${raw}`
}
}

if (type === BindingTypes.CONST) {
// setup const binding in non-inline mode
return `$setup.${raw}`
} else if (type) {
return `$${type}.${raw}`
} else {
// fallback to ctx
return `_ctx.${raw}`
if (type === BindingTypes.CONST) {
// setup const binding in non-inline mode
return `$setup.${raw}`
} else if (type) {
return `$${type}.${raw}`
}
}
// fallback to ctx
return `_ctx.${raw}`
}

// fast path if expression is a simple identifier.
Expand Down
101 changes: 22 additions & 79 deletions packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
"const __default__ = { setup() {} }
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ color: _ctx.color }))
}
const __setup__ = __default__.setup
__default__.setup = __setup__
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
: __injectCSSVars__
export default __default__"
`;
exports[`SFC compile <script setup> CSS vars injection <script> w/ default export in strings/comments 1`] = `
"
// export default {}
const __default__ = {}
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ color: _ctx.color }))
}
const __setup__ = __default__.setup
__default__.setup = __setup__
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
: __injectCSSVars__
export default __default__"
`;
exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
"const a = 1
const __default__ = {}
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ color: _ctx.color }))
}
const __setup__ = __default__.setup
__default__.setup = __setup__
? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
: __injectCSSVars__
export default __default__"
`;
exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
"import { useCssVars as _useCssVars } from 'vue'
export default {
expose: [],
setup() {
const color = 'red'
_useCssVars(_ctx => ({ color }))
return { color }
}
}"
`;
exports[`SFC compile <script setup> defineOptions() 1`] = `
"export default {
expose: [],
Expand Down Expand Up @@ -86,7 +29,7 @@ export default {
default: () => bar
}
},
setup() {
setup(__props) {
Expand All @@ -104,7 +47,7 @@ exports[`SFC compile <script setup> errors should allow defineOptions() referenc
default: bar => bar + 1
}
},
setup() {
setup(__props) {
const bar = 1
Expand All @@ -121,7 +64,7 @@ import { ref } from 'vue'
export default {
expose: [],
setup() {
setup(__props) {
const foo = _ref(1)
Expand All @@ -136,7 +79,7 @@ exports[`SFC compile <script setup> imports import dedupe between <script> and <
export default {
expose: [],
setup() {
setup(__props) {
x()
Expand All @@ -152,7 +95,7 @@ exports[`SFC compile <script setup> imports should extract comment for import or
export default {
expose: [],
setup() {
setup(__props) {
return { a, b }
Expand All @@ -165,7 +108,7 @@ exports[`SFC compile <script setup> imports should hoist and expose imports 1`]
"import { ref } from 'vue'
export default {
expose: [],
setup() {
setup(__props) {
return { ref }
}
Expand All @@ -182,13 +125,13 @@ import { ref } from 'vue'
export default {
expose: [],
setup() {
setup(__props) {
const count = ref(0)
const constant = {}
function fn() {}
return (_ctx, _cache, $props, $setup, $data, $options) => {
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(Foo),
_createVNode(\\"div\\", { onClick: fn }, _toDisplayString(_unref(count)) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
Expand All @@ -208,11 +151,11 @@ import { ref } from 'vue'
export default {
expose: [],
setup() {
setup(__props) {
const count = ref(0)
return (_ctx, _cache, $props, $setup, $data, $options) => {
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\", null, _toDisplayString(_unref(count)), 1 /* TEXT */),
_hoisted_1
Expand All @@ -228,7 +171,7 @@ exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`]
export default {
expose: [],
setup() {
setup(__props) {
const a = _ref(1)
console.log(a.value)
Expand All @@ -247,7 +190,7 @@ exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
export default {
expose: [],
setup() {
setup(__props) {
const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
const a = _ref(__a);
Expand All @@ -266,7 +209,7 @@ exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1
export default {
expose: [],
setup() {
setup(__props) {
const foo = _ref()
const a = _ref(1)
Expand All @@ -287,7 +230,7 @@ exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`]
export default {
expose: [],
setup() {
setup(__props) {
const a = _ref(1), b = _ref(2), c = _ref({
count: 0
Expand All @@ -304,7 +247,7 @@ exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] =
export default {
expose: [],
setup() {
setup(__props) {
const a = _ref(1)
const b = _ref({ count: 0 })
Expand All @@ -326,7 +269,7 @@ exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
export default {
expose: [],
setup() {
setup(__props) {
const [{ a: { b: __b }}] = useFoo()
const b = _ref(__b);
Expand All @@ -346,7 +289,7 @@ exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
export default {
expose: [],
setup() {
setup(__props) {
const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
const a = _ref(__a);
Expand All @@ -365,7 +308,7 @@ return { n, a, c, d, f, g }
exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
"export default {
expose: [],
setup() {
setup(__props) {
foo: a = 1, b = 2, c = {
count: 0
Expand All @@ -382,7 +325,7 @@ exports[`SFC compile <script setup> ref: syntax sugar using ref binding in prope
export default {
expose: [],
setup() {
setup(__props) {
const a = _ref(1)
const b = { a: a.value }
Expand All @@ -401,7 +344,7 @@ exports[`SFC compile <script setup> should expose top level declarations 1`] = `
export default {
expose: [],
setup() {
setup(__props) {
let a = 1
const b = 2
Expand Down Expand Up @@ -509,7 +452,7 @@ export default _defineComponent({
literalUnionMixed: { type: [String, Number, Boolean], required: true },
intersection: { type: Object, required: true }
} as unknown as undefined,
setup() {
setup(__props) {
Expand All @@ -526,7 +469,7 @@ export interface Foo {}
export default _defineComponent({
expose: [],
setup() {
setup(__props) {
return { }
Expand Down
Loading

0 comments on commit 41bb7fa

Please sign in to comment.