From 0594400980d3bdc394e92db63fc939a6609f7a94 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 10 Nov 2022 17:32:06 +0800 Subject: [PATCH] fix(sfc): also generate getter for import bindings during dev --- .../__snapshots__/compileScript.spec.ts.snap | 44 +++++++++---------- .../compileScriptRefTransform.spec.ts.snap | 4 +- .../__snapshots__/cssVars.spec.ts.snap | 2 +- .../__tests__/compileScript.spec.ts | 31 +++++++++---- .../compileScriptRefTransform.spec.ts | 3 +- packages/compiler-sfc/src/compileScript.ts | 14 +++++- 6 files changed, 62 insertions(+), 36 deletions(-) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap index e9b5c3fa883..80fb1f087cc 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap @@ -52,7 +52,7 @@ export default { expose(); -return { n, x } +return { n, get x() { return x } } } }" @@ -71,7 +71,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x() { return x } } } })" @@ -90,7 +90,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x() { return x } } } })" @@ -112,7 +112,7 @@ export default /*#__PURE__*/_defineComponent({ x() -return { x } +return { get x() { return x } } } })" @@ -134,7 +134,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, def, x } +return { n, def, get x() { return x } } } })" @@ -154,7 +154,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x() { return x } } } })" @@ -174,7 +174,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x() { return x } } } })" @@ -646,7 +646,7 @@ const props = __props; -return { props, propsModel } +return { props, get propsModel() { return propsModel } } } }" @@ -663,7 +663,7 @@ export default { const props = __props; -return { props, x } +return { props, get x() { return x } } } }" @@ -750,7 +750,7 @@ export default /*#__PURE__*/_defineComponent({ const a = 1 function b() {} -return { a, b, Baz } +return { a, b, get Baz() { return Baz } } } })" @@ -766,7 +766,7 @@ export default /*#__PURE__*/_defineComponent({ const cond = true -return { cond, bar, baz } +return { cond, get bar() { return bar }, get baz() { return baz } } } })" @@ -782,7 +782,7 @@ export default /*#__PURE__*/_defineComponent({ const fooBar: FooBar = 1 -return { fooBar, FooBaz, FooQux, foo } +return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } } } })" @@ -797,7 +797,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { vMyDir } +return { get vMyDir() { return vMyDir } } } })" @@ -812,7 +812,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { VAR, VAR3 } +return { get VAR() { return VAR }, get VAR3() { return VAR3 } } } })" @@ -827,7 +827,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { FooBaz, Last } +return { get FooBaz() { return FooBaz }, get Last() { return Last } } } })" @@ -842,7 +842,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { x, z, x$y } +return { get x() { return x }, get z() { return z }, get x$y() { return x$y } } } })" @@ -866,7 +866,7 @@ export default { -return { bar } +return { get bar() { return bar } } } }" @@ -920,7 +920,7 @@ export default { x() -return { x } +return { get x() { return x } } } }" @@ -954,7 +954,7 @@ export default { expose(); -return { a, b } +return { get a() { return a }, get b() { return b } } } }" @@ -1280,7 +1280,7 @@ export default { function c() {} class d {} -return { get aa() { return aa }, bb, cc, dd, get a() { return a }, b, c, d, xx, x } +return { get aa() { return aa }, set aa(v) { aa = v }, bb, cc, dd, get a() { return a }, set a(v) { a = v }, b, c, d, get xx() { return xx }, get x() { return x } } } }" @@ -1668,7 +1668,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { Baz } +return { get Baz() { return Baz } } } })" @@ -1729,7 +1729,7 @@ const props = __props as { -return { props, defaults } +return { props, get defaults() { return defaults } } } })" diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap index 8df7f2897a6..2e149fea60f 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap @@ -15,7 +15,7 @@ export default { let c = () => {} let d -return { foo, a, b, get c() { return c }, get d() { return d }, ref, shallowRef } +return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v }, ref, shallowRef } } }" @@ -36,7 +36,7 @@ export default { let c = () => {} let d -return { foo, a, b, get c() { return c }, get d() { return d } } +return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v } } } }" diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap index e070087f43b..78692a15226 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap @@ -84,7 +84,7 @@ _useCssVars(_ctx => ({ let b = 200 let foo = 300 -return { get a() { return a }, get b() { return b }, get foo() { return foo } } +return { get a() { return a }, set a(v) { a = v }, get b() { return b }, set b(v) { b = v }, get foo() { return foo }, set foo(v) { foo = v } } } }" diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts index ea4daa0d71a..4b73b9e93a6 100644 --- a/packages/compiler-sfc/__tests__/compileScript.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts @@ -21,7 +21,9 @@ describe('SFC compile `) expect(content).toMatch( - 'return { get aa() { return aa }, bb, cc, dd, get a() { return a }, b, c, d, xx, x }' + `return { get aa() { return aa }, set aa(v) { aa = v }, ` + + `bb, cc, dd, get a() { return a }, set a(v) { a = v }, b, c, d, ` + + `get xx() { return xx }, get x() { return x } }` ) expect(bindings).toStrictEqual({ x: BindingTypes.SETUP_MAYBE_REF, @@ -431,7 +433,10 @@ defineExpose({ foo: 123 }) // FooBaz: used as PascalCase component // FooQux: used as kebab-case component // foo: lowercase component - expect(content).toMatch(`return { fooBar, FooBaz, FooQux, foo }`) + expect(content).toMatch( + `return { fooBar, get FooBaz() { return FooBaz }, ` + + `get FooQux() { return FooQux }, get foo() { return foo } }` + ) assertCode(content) }) @@ -444,7 +449,7 @@ defineExpose({ foo: 123 })
`) - expect(content).toMatch(`return { vMyDir }`) + expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`) assertCode(content) }) @@ -459,7 +464,9 @@ defineExpose({ foo: 123 })
`) - expect(content).toMatch(`return { cond, bar, baz }`) + expect(content).toMatch( + `return { cond, get bar() { return bar }, get baz() { return baz } }` + ) assertCode(content) }) @@ -475,7 +482,9 @@ defineExpose({ foo: 123 }) // x: used in interpolation // y: should not be matched by {{ yy }} or 'y' in binding exps // x$y: #4274 should escape special chars when creating Regex - expect(content).toMatch(`return { x, z, x$y }`) + expect(content).toMatch( + `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }` + ) assertCode(content) }) @@ -490,7 +499,9 @@ defineExpose({ foo: 123 }) `) // VAR2 should not be matched - expect(content).toMatch(`return { VAR, VAR3 }`) + expect(content).toMatch( + `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }` + ) assertCode(content) }) @@ -505,7 +516,9 @@ defineExpose({ foo: 123 }) `) - expect(content).toMatch(`return { FooBaz, Last }`) + expect(content).toMatch( + `return { get FooBaz() { return FooBaz }, get Last() { return Last } }` + ) assertCode(content) }) @@ -524,7 +537,7 @@ defineExpose({ foo: 123 })
`) - expect(content).toMatch(`return { a, b, Baz }`) + expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`) assertCode(content) }) @@ -1301,7 +1314,7 @@ const emit = defineEmits(['a', 'b']) import { type Bar, Baz } from './main.ts' ` ) - expect(content).toMatch(`return { Baz }`) + expect(content).toMatch(`return { get Baz() { return Baz } }`) assertCode(content) }) }) diff --git a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts index 6d601379749..8ae5275661e 100644 --- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts @@ -33,7 +33,8 @@ describe('sfc ref transform', () => { expect(content).toMatch(`let c = () => {}`) expect(content).toMatch(`let d`) expect(content).toMatch( - `return { foo, a, b, get c() { return c }, get d() { return d }, ref, shallowRef }` + `return { foo, a, b, get c() { return c }, set c(v) { c = v }, ` + + `get d() { return d }, set d(v) { d = v }, ref, shallowRef }` ) assertCode(content) expect(bindings).toStrictEqual({ diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 74e3dbd7349..7f6b087a268 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -1486,8 +1486,20 @@ export function compileScript( } returned = `{ ` for (const key in allBindings) { - if (bindingMetadata[key] === BindingTypes.SETUP_LET) { + if ( + allBindings[key] === true && + userImports[key].source !== 'vue' && + !userImports[key].source.endsWith('.vue') + ) { + // generate getter for import bindings + // skip vue imports since we know they will never change returned += `get ${key}() { return ${key} }, ` + } else if (bindingMetadata[key] === BindingTypes.SETUP_LET) { + // local let binding, also add setter + const setArg = key === 'v' ? `_v` : `v` + returned += + `get ${key}() { return ${key} }, ` + + `set ${key}(${setArg}) { ${key} = ${setArg} }, ` } else { returned += `${key}, ` }