fix(compiler-sfc) fix setup result binding of primitive (non inlined mode) closes #5655

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} }
 }
 
 })"

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<string | number>('foo');
         let bar = _ref <string | number>('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 }
 }
 
 }"

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} }
 }
 
 }"

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -20,7 +20,8 @@ describe('SFC compile <script setup>', () => {
       class dd {}
       </script>
       `)
-    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 })
           <div v-my-dir></div>
         </template>
         `)
-      expect(content).toMatch(`return { vMyDir }`)
+      expect(content).toMatch(`return { get vMyDir(){return vMyDir} }`)
       assertCode(content)
     })
 
@@ -383,7 +384,7 @@ defineExpose({ foo: 123 })
           <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
         </template>
         `)
-      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 })
         </template>
         `)
       // 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 })
           <Last/>
         </template>
         `)
-      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'
         </script>`
       )
-      expect(content).toMatch(`return { Baz }`)
+      expect(content).toMatch(`return { get Baz(){return Baz} }`)
       assertCode(content)
     })
   })

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,

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__) {