fix(sfc): also generate getter for import bindings during dev

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

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

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

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

@@ -21,7 +21,9 @@ describe('SFC compile <script setup>', () => {
       </script>
       `)
     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 })
           <div v-my-dir></div>
         </template>
         `)
-      expect(content).toMatch(`return { vMyDir }`)
+      expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
       assertCode(content)
     })
 
@@ -459,7 +464,9 @@ 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)
     })
 
@@ -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 })
         </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)
     })
 
@@ -505,7 +516,9 @@ 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)
     })
 
@@ -524,7 +537,7 @@ defineExpose({ foo: 123 })
           <div v-for="{ z = x as Qux } in list as Fred"/>
         </template>
         `)
-      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'
         </script>`
       )
-      expect(content).toMatch(`return { Baz }`)
+      expect(content).toMatch(`return { get Baz() { return Baz } }`)
       assertCode(content)
     })
   })

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({

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}, `
       }