theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: fix useCssVars helper call + tests

Browse Source
This commit is contained in:
Evan You 2020-11-16 11:35:30 -05:00
parent b79a06c605
commit cea8b25fed
4 changed files with 128 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View File

@ -2,9 +2,9 @@
exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = ` exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
"const __default__ = { setup() {} } "const __default__ = { setup() {} }
import { useCssVars as __useCssVars__ } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
__useCssVars__(_ctx => ({ color: _ctx.color })) _useCssVars(_ctx => ({ color: _ctx.color }))
} }
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -18,9 +18,9 @@ exports[`SFC compile <script setup> CSS vars injection <script> w/ default expor
// export default {} // export default {}
const __default__ = {} const __default__ = {}
import { useCssVars as __useCssVars__ } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
__useCssVars__(_ctx => ({ color: _ctx.color })) _useCssVars(_ctx => ({ color: _ctx.color }))
} }
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -32,9 +32,9 @@ export default __default__"
exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = ` exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
"const a = 1 "const a = 1
const __default__ = {} const __default__ = {}
import { useCssVars as __useCssVars__ } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
__useCssVars__(_ctx => ({ color: _ctx.color })) _useCssVars(_ctx => ({ color: _ctx.color }))
} }
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -44,12 +44,13 @@ export default __default__"
`; `;
exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = ` exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
"import { useCssVars } from 'vue' "import { useCssVars as _useCssVars } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const color = 'red' const color = 'red'
__useCssVars__(_ctx => ({ color })) _useCssVars(_ctx => ({ color }))
return { color } return { color }
} }
@ -58,6 +59,7 @@ return { color }
exports[`SFC compile <script setup> defineOptions() 1`] = ` exports[`SFC compile <script setup> defineOptions() 1`] = `
"export default { "export default {
expose: [],
props: { props: {
foo: String foo: String
}, },
@ -78,6 +80,7 @@ exports[`SFC compile <script setup> errors should allow defineOptions() referenc
"import { bar } from './bar' "import { bar } from './bar'
export default { export default {
expose: [],
props: { props: {
foo: { foo: {
default: () => bar default: () => bar
@ -95,6 +98,7 @@ return { bar }
exports[`SFC compile <script setup> errors should allow defineOptions() referencing scope var 1`] = ` exports[`SFC compile <script setup> errors should allow defineOptions() referencing scope var 1`] = `
"export default { "export default {
expose: [],
props: { props: {
foo: { foo: {
default: bar => bar + 1 default: bar => bar + 1
@ -112,12 +116,14 @@ return { bar }
`; `;
exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = ` exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
import { ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const foo = ref(1) const foo = _ref(1)
return { foo, ref } return { foo, ref }
} }
@ -129,6 +135,7 @@ exports[`SFC compile <script setup> imports import dedupe between <script> and <
"import { x } from './x' "import { x } from './x'
export default { export default {
expose: [],
setup() { setup() {
x() x()
@ -144,6 +151,7 @@ exports[`SFC compile <script setup> imports should extract comment for import or
import b from 'b' import b from 'b'
export default { export default {
expose: [],
setup() { setup() {
@ -156,6 +164,7 @@ return { a, b }
exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = ` exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
"import { ref } from 'vue' "import { ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
return { ref } return { ref }
@ -172,6 +181,7 @@ import { ref } from 'vue'
import other from './util' import other from './util'
export default { export default {
expose: [],
setup() { setup() {
const count = ref(0) const count = ref(0)
@ -197,6 +207,7 @@ const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /
import { ref } from 'vue' import { ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const count = ref(0) const count = ref(0)
@ -213,12 +224,13 @@ return (_ctx, _cache, $props, $setup, $data, $options) => {
`; `;
exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const a = ref(1) const a = _ref(1)
console.log(a.value) console.log(a.value)
function get() { function get() {
return a.value + 1 return a.value + 1
@ -231,15 +243,16 @@ return { a, get }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const n = ref(1), [__a, __b = 1, ...__c] = useFoo() const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
const a = ref(__a); const a = _ref(__a);
const b = ref(__b); const b = _ref(__b);
const c = ref(__c); const c = _ref(__c);
console.log(n.value, a.value, b.value, c.value) console.log(n.value, a.value, b.value, c.value)
return { n, a, b, c } return { n, a, b, c }
@ -249,14 +262,15 @@ return { n, a, b, c }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const foo = ref() const foo = _ref()
const a = ref(1) const a = _ref(1)
const b = ref({ const b = _ref({
count: 0 count: 0
}) })
let c = () => {} let c = () => {}
@ -269,12 +283,13 @@ return { foo, a, b, c, d }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const a = ref(1), b = ref(2), c = ref({ const a = _ref(1), b = _ref(2), c = _ref({
count: 0 count: 0
}) })
@ -285,13 +300,14 @@ return { a, b, c }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const a = ref(1) const a = _ref(1)
const b = ref({ count: 0 }) const b = _ref({ count: 0 })
function inc() { function inc() {
a.value++ a.value++
a.value = a.value + 1 a.value = a.value + 1
@ -306,16 +322,17 @@ return { a, b, inc }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const [{ a: { b: __b }}] = useFoo() const [{ a: { b: __b }}] = useFoo()
const b = ref(__b); const b = _ref(__b);
const { c: [__d, __e] } = useBar() const { c: [__d, __e] } = useBar()
const d = ref(__d); const d = _ref(__d);
const e = ref(__e); const e = _ref(__e);
console.log(b.value, d.value, e.value) console.log(b.value, d.value, e.value)
return { b, d, e } return { b, d, e }
@ -325,17 +342,18 @@ return { b, d, e }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const n = ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo() const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
const a = ref(__a); const a = _ref(__a);
const c = ref(__c); const c = _ref(__c);
const d = ref(__d); const d = _ref(__d);
const f = ref(__f); const f = _ref(__f);
const g = ref(__g); const g = _ref(__g);
console.log(n.value, a.value, c.value, d.value, f.value, g.value) console.log(n.value, a.value, c.value, d.value, f.value, g.value)
return { n, a, c, d, f, g } return { n, a, c, d, f, g }
@ -346,6 +364,7 @@ return { n, a, c, d, f, g }
exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
"export default { "export default {
expose: [],
setup() { setup() {
foo: a = 1, b = 2, c = { foo: a = 1, b = 2, c = {
@ -359,12 +378,13 @@ return { }
`; `;
exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar using ref binding in property shorthand 1`] = `
"import { ref } from 'vue' "import { ref as _ref } from 'vue'
export default { export default {
expose: [],
setup() { setup() {
const a = ref(1) const a = _ref(1)
const b = { a: a.value } const b = { a: a.value }
function test() { function test() {
const { a } = b const { a } = b
@ -380,6 +400,7 @@ exports[`SFC compile <script setup> should expose top level declarations 1`] = `
"import { x } from './x' "import { x } from './x'
export default { export default {
expose: [],
setup() { setup() {
let a = 1 let a = 1
@ -394,10 +415,11 @@ return { a, b, c, d, x }
`; `;
exports[`SFC compile <script setup> with TypeScript defineOptions w/ runtime options 1`] = ` exports[`SFC compile <script setup> with TypeScript defineOptions w/ runtime options 1`] = `
"import { defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default defineComponent({ export default _defineComponent({
expose: [],
props: { foo: String }, props: { foo: String },
emits: ['a', 'b'], emits: ['a', 'b'],
setup(__props, { props, emit }) { setup(__props, { props, emit }) {
@ -411,10 +433,11 @@ return { props, emit }
`; `;
exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits (union) 1`] = ` exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits (union) 1`] = `
"import { Slots, defineComponent } from 'vue' "import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
export default defineComponent({ export default _defineComponent({
expose: [],
emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined, emits: [\\"foo\\", \\"bar\\", \\"baz\\"] as unknown as undefined,
setup(__props, { emit }: { setup(__props, { emit }: {
props: {}, props: {},
@ -432,10 +455,11 @@ return { emit }
`; `;
exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits 1`] = ` exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract emits 1`] = `
"import { Slots, defineComponent } from 'vue' "import { Slots as _Slots, defineComponent as _defineComponent } from 'vue'
export default defineComponent({ export default _defineComponent({
expose: [],
emits: [\\"foo\\", \\"bar\\"] as unknown as undefined, emits: [\\"foo\\", \\"bar\\"] as unknown as undefined,
setup(__props, { emit }: { setup(__props, { emit }: {
props: {}, props: {},
@ -453,14 +477,15 @@ return { emit }
`; `;
exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract props 1`] = ` exports[`SFC compile <script setup> with TypeScript defineOptions w/ type / extract props 1`] = `
"import { defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
interface Test {} interface Test {}
type Alias = number[] type Alias = number[]
export default defineComponent({ export default _defineComponent({
expose: [],
props: { props: {
string: { type: String, required: true }, string: { type: String, required: true },
number: { type: Number, required: true }, number: { type: Number, required: true },
@ -495,11 +520,12 @@ return { }
`; `;
exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = ` exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
"import { defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export interface Foo {} export interface Foo {}
type Bar = {} type Bar = {}
export default defineComponent({ export default _defineComponent({
expose: [],
setup() { setup() {

48
packages/compiler-sfc/__tests__/compileScript.spec.ts
View File

@ -66,6 +66,7 @@ const bar = 1
expect(content).toMatch(`setup(__props, { props, emit }) {`) expect(content).toMatch(`setup(__props, { props, emit }) {`)
// should include context options in default export // should include context options in default export
expect(content).toMatch(`export default { expect(content).toMatch(`export default {
expose: [],
props: { props: {
foo: String foo: String
}, },
@ -194,7 +195,8 @@ const { props, emit } = defineOptions({
</script> </script>
`) `)
assertCode(content) assertCode(content)
expect(content).toMatch(`export default defineComponent({ expect(content).toMatch(`export default _defineComponent({
expose: [],
props: { foo: String }, props: { foo: String },
emits: ['a', 'b'], emits: ['a', 'b'],
setup(__props, { props, emit }) {`) setup(__props, { props, emit }) {`)
@ -410,14 +412,14 @@ const { props, emit } = defineOptions({
let c = () => {} let c = () => {}
let d let d
</script>`) </script>`)
expect(content).toMatch(`import { ref } from 'vue'`) expect(content).toMatch(`import { ref as _ref } from 'vue'`)
expect(content).not.toMatch(`ref: foo`) expect(content).not.toMatch(`ref: foo`)
expect(content).not.toMatch(`ref: a`) expect(content).not.toMatch(`ref: a`)
expect(content).not.toMatch(`ref: b`) expect(content).not.toMatch(`ref: b`)
expect(content).toMatch(`const foo = ref()`) expect(content).toMatch(`const foo = _ref()`)
expect(content).toMatch(`const a = ref(1)`) expect(content).toMatch(`const a = _ref(1)`)
expect(content).toMatch(` expect(content).toMatch(`
const b = ref({ const b = _ref({
count: 0 count: 0
}) })
`) `)
@ -441,7 +443,7 @@ const { props, emit } = defineOptions({
} }
</script>`) </script>`)
expect(content).toMatch(` expect(content).toMatch(`
const a = ref(1), b = ref(2), c = ref({ const a = _ref(1), b = _ref(2), c = _ref({
count: 0 count: 0
}) })
`) `)
@ -526,15 +528,15 @@ const { props, emit } = defineOptions({
console.log(n, a, c, d, f, g) console.log(n, a, c, d, f, g)
</script>`) </script>`)
expect(content).toMatch( expect(content).toMatch(
`const n = ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()` `const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()`
) )
expect(content).toMatch(`\nconst a = ref(__a);`) expect(content).toMatch(`\nconst a = _ref(__a);`)
expect(content).not.toMatch(`\nconst b = ref(__b);`) expect(content).not.toMatch(`\nconst b = _ref(__b);`)
expect(content).toMatch(`\nconst c = ref(__c);`) expect(content).toMatch(`\nconst c = _ref(__c);`)
expect(content).toMatch(`\nconst d = ref(__d);`) expect(content).toMatch(`\nconst d = _ref(__d);`)
expect(content).not.toMatch(`\nconst e = ref(__e);`) expect(content).not.toMatch(`\nconst e = _ref(__e);`)
expect(content).toMatch(`\nconst f = ref(__f);`) expect(content).toMatch(`\nconst f = _ref(__f);`)
expect(content).toMatch(`\nconst g = ref(__g);`) expect(content).toMatch(`\nconst g = _ref(__g);`)
expect(content).toMatch( expect(content).toMatch(
`console.log(n.value, a.value, c.value, d.value, f.value, g.value)` `console.log(n.value, a.value, c.value, d.value, f.value, g.value)`
) )
@ -556,11 +558,11 @@ const { props, emit } = defineOptions({
console.log(n, a, b, c) console.log(n, a, b, c)
</script>`) </script>`)
expect(content).toMatch( expect(content).toMatch(
`const n = ref(1), [__a, __b = 1, ...__c] = useFoo()` `const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()`
) )
expect(content).toMatch(`\nconst a = ref(__a);`) expect(content).toMatch(`\nconst a = _ref(__a);`)
expect(content).toMatch(`\nconst b = ref(__b);`) expect(content).toMatch(`\nconst b = _ref(__b);`)
expect(content).toMatch(`\nconst c = ref(__c);`) expect(content).toMatch(`\nconst c = _ref(__c);`)
expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`) expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
expect(content).toMatch(`return { n, a, b, c }`) expect(content).toMatch(`return { n, a, b, c }`)
expect(bindings).toStrictEqual({ expect(bindings).toStrictEqual({
@ -580,11 +582,11 @@ const { props, emit } = defineOptions({
</script>`) </script>`)
expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`) expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`)
expect(content).toMatch(`const { c: [__d, __e] } = useBar()`) expect(content).toMatch(`const { c: [__d, __e] } = useBar()`)
expect(content).not.toMatch(`\nconst a = ref(__a);`) expect(content).not.toMatch(`\nconst a = _ref(__a);`)
expect(content).not.toMatch(`\nconst c = ref(__c);`) expect(content).not.toMatch(`\nconst c = _ref(__c);`)
expect(content).toMatch(`\nconst b = ref(__b);`) expect(content).toMatch(`\nconst b = _ref(__b);`)
expect(content).toMatch(`\nconst d = ref(__d);`) expect(content).toMatch(`\nconst d = _ref(__d);`)
expect(content).toMatch(`\nconst e = ref(__e);`) expect(content).toMatch(`\nconst e = _ref(__e);`)
expect(content).toMatch(`return { b, d, e }`) expect(content).toMatch(`return { b, d, e }`)
expect(bindings).toStrictEqual({ expect(bindings).toStrictEqual({
b: 'setup', b: 'setup',

38
packages/compiler-sfc/src/compileScript.ts
View File

@ -24,7 +24,11 @@ import {
} from '@babel/types' } from '@babel/types'
import { walk } from 'estree-walker' import { walk } from 'estree-walker'
import { RawSourceMap } from 'source-map' import { RawSourceMap } from 'source-map'
import { genCssVarsCode, injectCssVarsCalls } from './genCssVars' import {
CSS_VARS_HELPER,
genCssVarsCode,
injectCssVarsCalls
} from './genCssVars'
import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate' import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
const DEFINE_OPTIONS = 'defineOptions' const DEFINE_OPTIONS = 'defineOptions'
@ -165,6 +169,11 @@ export function compileScript(
const scriptStartOffset = script && script.loc.start.offset const scriptStartOffset = script && script.loc.start.offset
const scriptEndOffset = script && script.loc.end.offset const scriptEndOffset = script && script.loc.end.offset
function helper(key: string): string {
helperImports.add(key)
return `_${key}`
}
function parse( function parse(
input: string, input: string,
options: ParserOptions, options: ParserOptions,
@ -240,11 +249,10 @@ export function compileScript(
function processRefExpression(exp: Expression, statement: LabeledStatement) { function processRefExpression(exp: Expression, statement: LabeledStatement) {
if (exp.type === 'AssignmentExpression') { if (exp.type === 'AssignmentExpression') {
helperImports.add('ref')
const { left, right } = exp const { left, right } = exp
if (left.type === 'Identifier') { if (left.type === 'Identifier') {
registerRefBinding(left) registerRefBinding(left)
s.prependRight(right.start! + startOffset, `ref(`) s.prependRight(right.start! + startOffset, `${helper('ref')}(`)
s.appendLeft(right.end! + startOffset, ')') s.appendLeft(right.end! + startOffset, ')')
} else if (left.type === 'ObjectPattern') { } else if (left.type === 'ObjectPattern') {
// remove wrapping parens // remove wrapping parens
@ -272,7 +280,7 @@ export function compileScript(
exp.expressions.forEach(e => processRefExpression(e, statement)) exp.expressions.forEach(e => processRefExpression(e, statement))
} else if (exp.type === 'Identifier') { } else if (exp.type === 'Identifier') {
registerRefBinding(exp) registerRefBinding(exp)
s.appendLeft(exp.end! + startOffset, ` = ref()`) s.appendLeft(exp.end! + startOffset, ` = ${helper('ref')}()`)
} else { } else {
error(`ref: statements can only contain assignment expressions.`, exp) error(`ref: statements can only contain assignment expressions.`, exp)
} }
@ -326,7 +334,7 @@ export function compileScript(
// append binding declarations after the parent statement // append binding declarations after the parent statement
s.appendLeft( s.appendLeft(
statement.end! + startOffset, statement.end! + startOffset,
`\nconst ${nameId.name} = ref(__${nameId.name});` `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
) )
} }
} }
@ -360,7 +368,7 @@ export function compileScript(
// append binding declarations after the parent statement // append binding declarations after the parent statement
s.appendLeft( s.appendLeft(
statement.end! + startOffset, statement.end! + startOffset,
`\nconst ${nameId.name} = ref(__${nameId.name});` `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
) )
} }
} }
@ -744,7 +752,7 @@ export function compileScript(
// 8. inject `useCssVars` calls // 8. inject `useCssVars` calls
if (hasCssVars) { if (hasCssVars) {
helperImports.add(`useCssVars`) helperImports.add(CSS_VARS_HELPER)
for (const style of styles) { for (const style of styles) {
const vars = style.attrs.vars const vars = style.attrs.vars
if (typeof vars === 'string') { if (typeof vars === 'string') {
@ -829,7 +837,6 @@ export function compileScript(
if (isTS) { if (isTS) {
// for TS, make sure the exported type is still valid type with // for TS, make sure the exported type is still valid type with
// correct props information // correct props information
helperImports.add(`defineComponent`)
// we have to use object spread for types to be merged properly // we have to use object spread for types to be merged properly
// user's TS setting should compile it down to proper targets // user's TS setting should compile it down to proper targets
const def = defaultExport ? `\n ...${defaultTempVar},` : `` const def = defaultExport ? `\n ...${defaultTempVar},` : ``
@ -838,7 +845,9 @@ export function compileScript(
// this allows `import { setup } from '*.vue'` for testing purposes. // this allows `import { setup } from '*.vue'` for testing purposes.
s.prependLeft( s.prependLeft(
startOffset, startOffset,
`\nexport default defineComponent({${def}${runtimeOptions}\n ${ `\nexport default ${helper(
`defineComponent`
)}({${def}${runtimeOptions}\n ${
hasAwait ? `async ` : `` hasAwait ? `async ` : ``
}setup(${args}) {\n` }setup(${args}) {\n`
) )
@ -865,11 +874,12 @@ export function compileScript(
} }
// 12. finalize Vue helper imports // 12. finalize Vue helper imports
// TODO account for cases where user imports a helper with the same name if (helperImports.size > 0) {
// from a non-vue source s.prepend(
const helpers = [...helperImports].filter(i => !userImports[i]) `import { ${[...helperImports]
if (helpers.length) { .map(h => `${h} as _${h}`)
s.prepend(`import { ${helpers.join(', ')} } from 'vue'\n`) .join(', ')} } from 'vue'\n`
)
} }
s.trim() s.trim()

6
packages/compiler-sfc/src/genCssVars.ts
View File

@ -10,6 +10,8 @@ import { SFCDescriptor } from './parse'
import { rewriteDefault } from './rewriteDefault' import { rewriteDefault } from './rewriteDefault'
import { ParserPlugin } from '@babel/parser' import { ParserPlugin } from '@babel/parser'
export const CSS_VARS_HELPER = `useCssVars`
export function genCssVarsCode( export function genCssVarsCode(
varsExp: string, varsExp: string,
scoped: boolean, scoped: boolean,
@ -38,7 +40,7 @@ export function genCssVarsCode(
}) })
.join('') .join('')
return `__useCssVars__(_ctx => (${transformedString})${ return `_${CSS_VARS_HELPER}(_ctx => (${transformedString})${
scoped ? `, true` : `` scoped ? `, true` : ``
})` })`
} }
@ -65,7 +67,7 @@ export function injectCssVarsCalls(
return ( return (
script + script +
`\nimport { useCssVars as __useCssVars__ } from 'vue'\n` + `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
`const __injectCSSVars__ = () => {\n${calls}}\n` + `const __injectCSSVars__ = () => {\n${calls}}\n` +
`const __setup__ = __default__.setup\n` + `const __setup__ = __default__.setup\n` +
`__default__.setup = __setup__\n` + `__default__.setup = __setup__\n` +