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

yyx990803 · yyx990803 · commit 0594400980d3 · 2022-11-10T17:32:06.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -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)
     })
   })
diff --git 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
@@ -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}, `
       }

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export default {`
`52`	`52`	`expose();`
`53`	`53`
`54`	`54`
`55`		`-return { n, x }`
	`55`	`+return { n, get x() { return x } }`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`}"`
`@@ -71,7 +71,7 @@ export default /#__PURE__/Object.assign(__default__, {`
`71`	`71`
`72`	`72`	`x()`
`73`	`73`
`74`		`-return { n, x }`
	`74`	`+return { n, get x() { return x } }`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`})"`
`@@ -90,7 +90,7 @@ export default /#__PURE__/Object.assign(__default__, {`
`90`	`90`
`91`	`91`	`x()`
`92`	`92`
`93`		`-return { n, x }`
	`93`	`+return { n, get x() { return x } }`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`})"`
`@@ -112,7 +112,7 @@ export default /#__PURE__/_defineComponent({`
`112`	`112`
`113`	`113`	`x()`
`114`	`114`
`115`		`-return { x }`
	`115`	`+return { get x() { return x } }`
`116`	`116`	`}`
`117`	`117`
`118`	`118`	`})"`
`@@ -134,7 +134,7 @@ export default /#__PURE__/Object.assign(__default__, {`
`134`	`134`
`135`	`135`	`x()`
`136`	`136`
`137`		`-return { n, def, x }`
	`137`	`+return { n, def, get x() { return x } }`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`})"`
`@@ -154,7 +154,7 @@ export default /#__PURE__/Object.assign(__default__, {`
`154`	`154`
`155`	`155`	`x()`
`156`	`156`
`157`		`-return { n, x }`
	`157`	`+return { n, get x() { return x } }`
`158`	`158`	`}`
`159`	`159`
`160`	`160`	`})"`
`@@ -174,7 +174,7 @@ export default /#__PURE__/Object.assign(__default__, {`
`174`	`174`
`175`	`175`	`x()`
`176`	`176`
`177`		`-return { n, x }`
	`177`	`+return { n, get x() { return x } }`
`178`	`178`	`}`
`179`	`179`
`180`	`180`	`})"`
`@@ -646,7 +646,7 @@ const props = __props;`
`646`	`646`
`647`	`647`
`648`	`648`
`649`		`-return { props, propsModel }`
	`649`	`+return { props, get propsModel() { return propsModel } }`
`650`	`650`	`}`
`651`	`651`
`652`	`652`	`}"`
`@@ -663,7 +663,7 @@ export default {`
`663`	`663`	`const props = __props;`
`664`	`664`
`665`	`665`
`666`		`-return { props, x }`
	`666`	`+return { props, get x() { return x } }`
`667`	`667`	`}`
`668`	`668`
`669`	`669`	`}"`
`@@ -750,7 +750,7 @@ export default /#__PURE__/_defineComponent({`
`750`	`750`	`const a = 1`
`751`	`751`	`function b() {}`
`752`	`752`
`753`		`-return { a, b, Baz }`
	`753`	`+return { a, b, get Baz() { return Baz } }`
`754`	`754`	`}`
`755`	`755`
`756`	`756`	`})"`
`@@ -766,7 +766,7 @@ export default /#__PURE__/_defineComponent({`
`766`	`766`
`767`	`767`	`const cond = true`
`768`	`768`
`769`		`-return { cond, bar, baz }`
	`769`	`+return { cond, get bar() { return bar }, get baz() { return baz } }`
`770`	`770`	`}`
`771`	`771`
`772`	`772`	`})"`
`@@ -782,7 +782,7 @@ export default /#__PURE__/_defineComponent({`
`782`	`782`
`783`	`783`	`const fooBar: FooBar = 1`
`784`	`784`
`785`		`-return { fooBar, FooBaz, FooQux, foo }`
	`785`	`+return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }`
`786`	`786`	`}`
`787`	`787`
`788`	`788`	`})"`
`@@ -797,7 +797,7 @@ export default /#__PURE__/_defineComponent({`
`797`	`797`	`expose();`
`798`	`798`
`799`	`799`
`800`		`-return { vMyDir }`
	`800`	`+return { get vMyDir() { return vMyDir } }`
`801`	`801`	`}`
`802`	`802`
`803`	`803`	`})"`
`@@ -812,7 +812,7 @@ export default /#__PURE__/_defineComponent({`
`812`	`812`	`expose();`
`813`	`813`
`814`	`814`
`815`		`-return { VAR, VAR3 }`
	`815`	`+return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`
`816`	`816`	`}`
`817`	`817`
`818`	`818`	`})"`
`@@ -827,7 +827,7 @@ export default /#__PURE__/_defineComponent({`
`827`	`827`	`expose();`
`828`	`828`
`829`	`829`
`830`		`-return { FooBaz, Last }`
	`830`	`+return { get FooBaz() { return FooBaz }, get Last() { return Last } }`
`831`	`831`	`}`
`832`	`832`
`833`	`833`	`})"`
`@@ -842,7 +842,7 @@ export default /#__PURE__/_defineComponent({`
`842`	`842`	`expose();`
`843`	`843`
`844`	`844`
`845`		`-return { x, z, x$y }`
	`845`	`+return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`
`846`	`846`	`}`
`847`	`847`
`848`	`848`	`})"`
`@@ -866,7 +866,7 @@ export default {`
`866`	`866`
`867`	`867`
`868`	`868`
`869`		`-return { bar }`
	`869`	`+return { get bar() { return bar } }`
`870`	`870`	`}`
`871`	`871`
`872`	`872`	`}"`
`@@ -920,7 +920,7 @@ export default {`
`920`	`920`
`921`	`921`	`x()`
`922`	`922`
`923`		`-return { x }`
	`923`	`+return { get x() { return x } }`
`924`	`924`	`}`
`925`	`925`
`926`	`926`	`}"`
`@@ -954,7 +954,7 @@ export default {`
`954`	`954`	`expose();`
`955`	`955`
`956`	`956`
`957`		`-return { a, b }`
	`957`	`+return { get a() { return a }, get b() { return b } }`
`958`	`958`	`}`
`959`	`959`
`960`	`960`	`}"`
`@@ -1280,7 +1280,7 @@ export default {`
`1280`	`1280`	`function c() {}`
`1281`	`1281`	`class d {}`
`1282`	`1282`
`1283`		`-return { get aa() { return aa }, bb, cc, dd, get a() { return a }, b, c, d, xx, x }`
	`1283`	`+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 } }`
`1284`	`1284`	`}`
`1285`	`1285`
`1286`	`1286`	`}"`
`@@ -1668,7 +1668,7 @@ export default /#__PURE__/_defineComponent({`
`1668`	`1668`	`expose();`
`1669`	`1669`
`1670`	`1670`
`1671`		`-return { Baz }`
	`1671`	`+return { get Baz() { return Baz } }`
`1672`	`1672`	`}`
`1673`	`1673`
`1674`	`1674`	`})"`
`@@ -1729,7 +1729,7 @@ const props = __props as {`
`1729`	`1729`
`1730`	`1730`
`1731`	`1731`
`1732`		`-return { props, defaults }`
	`1732`	`+return { props, get defaults() { return defaults } }`
`1733`	`1733`	`}`
`1734`	`1734`
`1735`	`1735`	`})"`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export default {`
`15`	`15`	`let c = () => {}`
`16`	`16`	`let d`
`17`	`17`
`18`		`-return { foo, a, b, get c() { return c }, get d() { return d }, ref, shallowRef }`
	`18`	`+return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v }, ref, shallowRef }`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`}"`
`@@ -36,7 +36,7 @@ export default {`
`36`	`36`	`let c = () => {}`
`37`	`37`	`let d`
`38`	`38`
`39`		`-return { foo, a, b, get c() { return c }, get d() { return d } }`
	`39`	`+return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v } }`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`}"`
Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ _useCssVars(_ctx => ({`
`84`	`84`	`let b = 200`
`85`	`85`	`let foo = 300`
`86`	`86`
`87`		`-return { get a() { return a }, get b() { return b }, get foo() { return foo } }`
	`87`	`+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 } }`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`}"`