diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap index de223bf91d8..dd11de6ef07 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap @@ -13,7 +13,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x(){return x} } } })" @@ -30,7 +30,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x(){return x} } } })" @@ -51,7 +51,7 @@ export default /*#__PURE__*/_defineComponent({ x() -return { x } +return { get x(){return x} } } })" @@ -71,7 +71,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, def, x } +return { n, def, get x(){return x} } } })" @@ -91,7 +91,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x(){return x} } } })" @@ -111,7 +111,7 @@ export default /*#__PURE__*/Object.assign(__default__, { x() -return { n, x } +return { n, get x(){return x} } } })" @@ -276,7 +276,7 @@ let a = _ref(1 + (( __restore(), __temp ))) -return { a } +return { get a(){return a}, set a(v){a=v} } } }" @@ -416,7 +416,7 @@ const props = __props -return { props, propsModel } +return { props, get propsModel(){return propsModel} } } }" @@ -433,7 +433,7 @@ export default { const props = __props -return { props, x } +return { props, get x(){return x} } } }" @@ -502,7 +502,7 @@ export default /*#__PURE__*/_defineComponent({ const cond = true -return { cond, bar, baz } +return { cond, get bar(){return bar}, get baz(){return baz} } } })" @@ -518,7 +518,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} } } })" @@ -533,7 +533,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { vMyDir } +return { get vMyDir(){return vMyDir} } } })" @@ -548,7 +548,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { VAR, VAR3 } +return { get VAR(){return VAR}, get VAR3(){return VAR3} } } })" @@ -563,7 +563,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { FooBaz, Last } +return { get FooBaz(){return FooBaz}, get Last(){return Last} } } })" @@ -578,7 +578,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} } } })" @@ -602,7 +602,7 @@ export default { -return { bar } +return { get bar(){return bar} } } }" @@ -641,7 +641,7 @@ export default { let foo = _ref(1) -return { foo, ref } +return { get foo(){return foo}, set foo(v){foo=v}, get ref(){return ref} } } }" @@ -656,7 +656,7 @@ export default { x() -return { x } +return { get x(){return x} } } }" @@ -675,7 +675,7 @@ export default { const r = ref(0) -return { r, ref } +return { r, get ref(){return ref} } } }" @@ -690,7 +690,7 @@ export default { expose(); -return { a, b } +return { get a(){return a}, get b(){return b} } } }" @@ -705,7 +705,7 @@ export default { expose(); -return { ref } +return { get ref(){return ref} } } }" @@ -1017,7 +1017,7 @@ export default { function c() {} class d {} -return { aa, bb, cc, dd, 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} } } }" @@ -1361,7 +1361,7 @@ export default /*#__PURE__*/_defineComponent({ expose(); -return { Baz } +return { get Baz(){return Baz} } } })" @@ -1422,7 +1422,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 b7c81a08c86..2bf00899e69 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, c, d, ref, shallowRef } +return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v}, get ref(){return ref}, get shallowRef(){return shallowRef} } } }" @@ -36,7 +36,7 @@ export default { let c = () => {} let d -return { foo, a, b, c, d } +return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v} } } }" @@ -52,7 +52,7 @@ export default /*#__PURE__*/_defineComponent({ let msg = _ref('foo'); let bar = _ref ('bar'); -return { msg, bar } +return { get msg(){return msg}, set msg(v){msg=v}, get bar(){return bar}, set bar(v){bar=v} } } })" @@ -82,7 +82,7 @@ export default { console.log(data.value) -return { data } +return { get data(){return data}, set data(v){data=v} } } }" @@ -106,7 +106,7 @@ export default { c++ } -return { a, c, b, change } +return { get a(){return a}, set a(v){a=v}, get c(){return c}, set c(v){c=v}, get b(){return b}, set b(v){b=v}, change } } }" diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap index 49b0d712a7a..e580ef32925 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 { a, b, 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} } } }" @@ -164,7 +164,7 @@ _useCssVars(_ctx => ({ const size = ref('10px') -return { color, size, ref } +return { color, size, get ref(){return ref} } } }" diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts index 17c97745e32..fe98c27e5af 100644 --- a/packages/compiler-sfc/__tests__/compileScript.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts @@ -20,7 +20,8 @@ describe('SFC compile `) - expect(content).toMatch('return { aa, bb, cc, dd, a, b, c, d, xx, x }') + expect(content).toMatch('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, a: BindingTypes.SETUP_LET, @@ -355,7 +356,7 @@ 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) }) @@ -368,7 +369,7 @@ defineExpose({ foo: 123 })
`) - expect(content).toMatch(`return { vMyDir }`) + expect(content).toMatch(`return { get vMyDir(){return vMyDir} }`) assertCode(content) }) @@ -383,7 +384,7 @@ 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) }) @@ -399,7 +400,7 @@ 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) }) @@ -414,7 +415,7 @@ 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) }) @@ -429,7 +430,7 @@ defineExpose({ foo: 123 }) `) - expect(content).toMatch(`return { FooBaz, Last }`) + expect(content).toMatch(`return { get FooBaz(){return FooBaz}, get Last(){return Last} }`) assertCode(content) }) }) @@ -1111,7 +1112,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 88d62f2b478..775180a9e20 100644 --- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts @@ -32,7 +32,7 @@ describe('sfc ref transform', () => { // normal declarations left untouched expect(content).toMatch(`let c = () => {}`) expect(content).toMatch(`let d`) - expect(content).toMatch(`return { foo, a, b, c, d, ref, shallowRef }`) + expect(content).toMatch(`return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v}, get ref(){return ref}, get shallowRef(){return shallowRef} }`) assertCode(content) expect(bindings).toStrictEqual({ foo: BindingTypes.SETUP_REF, diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index f70faeaf02b..a12340d66be 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -1345,7 +1345,33 @@ export function compileScript( allBindings[key] = true } } - returned = `{ ${Object.keys(allBindings).join(', ')} }` + + /* + build getter/setter for setup result. ensures functionality is comparable + with inlined template function. + */ + let bindingGetters = [] + for (let name in allBindings){ + let binding = allBindings[name] + /* + true - binding of an import specifier + */ + if(['setup-let', true].includes(binding)){ + let setterArgName = name!=='v'?'v':'_v' // resolve possible conflict between var binding and argument name. + let getterSetter = `get ${name}(){return ${name}}` + + // exlude setter for import + if(binding !== true){ + getterSetter += `, set ${name}(${setterArgName}){${name}=${setterArgName}}` + } + + bindingGetters.push(getterSetter) + } else { + bindingGetters.push(name) + } + } + + returned = `{ ${(bindingGetters).join(', ')} }` } if (!options.inlineTemplate && !__TEST__) {