root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Evan You 2022-11-10 17:32:06 +08:00
parent 5a3d45ae29
commit 0594400980
6 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View File

@ -52,7 +52,7 @@ export default {
expose(); expose();
return { n, x } return { n, get x() { return x } }
} }
}" }"
@ -71,7 +71,7 @@ export default /*#__PURE__*/Object.assign(__default__, {
x() x()
return { n, x } return { n, get x() { return x } }
} }
})" })"
@ -90,7 +90,7 @@ export default /*#__PURE__*/Object.assign(__default__, {
x() x()
return { n, x } return { n, get x() { return x } }
} }
})" })"
@ -112,7 +112,7 @@ export default /*#__PURE__*/_defineComponent({
x() x()
return { x } return { get x() { return x } }
} }
})" })"
@ -134,7 +134,7 @@ export default /*#__PURE__*/Object.assign(__default__, {
x() x()
return { n, def, x } return { n, def, get x() { return x } }
} }
})" })"
@ -154,7 +154,7 @@ export default /*#__PURE__*/Object.assign(__default__, {
x() x()
return { n, x } return { n, get x() { return x } }
} }
})" })"
@ -174,7 +174,7 @@ export default /*#__PURE__*/Object.assign(__default__, {
x() 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; const props = __props;
return { props, x } return { props, get x() { return x } }
} }
}" }"
@ -750,7 +750,7 @@ export default /*#__PURE__*/_defineComponent({
const a = 1 const a = 1
function b() {} function b() {}
return { a, b, Baz } return { a, b, get Baz() { return Baz } }
} }
})" })"
@ -766,7 +766,7 @@ export default /*#__PURE__*/_defineComponent({
const cond = true 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 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(); expose();
return { vMyDir } return { get vMyDir() { return vMyDir } }
} }
})" })"
@ -812,7 +812,7 @@ export default /*#__PURE__*/_defineComponent({
expose(); expose();
return { VAR, VAR3 } return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
} }
})" })"
@ -827,7 +827,7 @@ export default /*#__PURE__*/_defineComponent({
expose(); expose();
return { FooBaz, Last } return { get FooBaz() { return FooBaz }, get Last() { return Last } }
} }
})" })"
@ -842,7 +842,7 @@ export default /*#__PURE__*/_defineComponent({
expose(); 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() x()
return { x } return { get x() { return x } }
} }
}" }"
@ -954,7 +954,7 @@ export default {
expose(); expose();
return { a, b } return { get a() { return a }, get b() { return b } }
} }
}" }"
@ -1280,7 +1280,7 @@ export default {
function c() {} function c() {}
class d {} 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(); 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 } }
} }
})" })"

4
packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
View File

@ -15,7 +15,7 @@ export default {
let c = () => {} let c = () => {}
let d 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 c = () => {}
let d 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 } }
} }
}" }"

2
packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
View File

@ -84,7 +84,7 @@ _useCssVars(_ctx => ({
let b = 200 let b = 200
let foo = 300 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 } }
} }
}" }"

31
packages/compiler-sfc/__tests__/compileScript.spec.ts
View File

@ -21,7 +21,9 @@ describe('SFC compile <script setup>', () => {
</script> </script>
`) `)
expect(content).toMatch( 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({ expect(bindings).toStrictEqual({
x: BindingTypes.SETUP_MAYBE_REF, x: BindingTypes.SETUP_MAYBE_REF,
@ -431,7 +433,10 @@ defineExpose({ foo: 123 })
// FooBaz: used as PascalCase component // FooBaz: used as PascalCase component
// FooQux: used as kebab-case component // FooQux: used as kebab-case component
// foo: lowercase 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) assertCode(content)
}) })
@ -444,7 +449,7 @@ defineExpose({ foo: 123 })
<div v-my-dir></div> <div v-my-dir></div>
</template> </template>
`) `)
expect(content).toMatch(`return { vMyDir }`) expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
assertCode(content) assertCode(content)
}) })
@ -459,7 +464,9 @@ defineExpose({ foo: 123 })
<div :class="[cond ? '' : bar(), 'default']" :style="baz"></div> <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
</template> </template>
`) `)
expect(content).toMatch(`return { cond, bar, baz }`) expect(content).toMatch(
`return { cond, get bar() { return bar }, get baz() { return baz } }`
)
assertCode(content) assertCode(content)
}) })
@ -475,7 +482,9 @@ defineExpose({ foo: 123 })
// x: used in interpolation // x: used in interpolation
// y: should not be matched by {{ yy }} or 'y' in binding exps // y: should not be matched by {{ yy }} or 'y' in binding exps
// x$y: #4274 should escape special chars when creating Regex // 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) assertCode(content)
}) })
@ -490,7 +499,9 @@ defineExpose({ foo: 123 })
</template> </template>
`) `)
// VAR2 should not be matched // 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) assertCode(content)
}) })
@ -505,7 +516,9 @@ defineExpose({ foo: 123 })
<Last/> <Last/>
</template> </template>
`) `)
expect(content).toMatch(`return { FooBaz, Last }`) expect(content).toMatch(
`return { get FooBaz() { return FooBaz }, get Last() { return Last } }`
)
assertCode(content) assertCode(content)
}) })
@ -524,7 +537,7 @@ defineExpose({ foo: 123 })
<div v-for="{ z = x as Qux } in list as Fred"/> <div v-for="{ z = x as Qux } in list as Fred"/>
</template> </template>
`) `)
expect(content).toMatch(`return { a, b, Baz }`) expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
assertCode(content) assertCode(content)
}) })
@ -1301,7 +1314,7 @@ const emit = defineEmits(['a', 'b'])
import { type Bar, Baz } from './main.ts' import { type Bar, Baz } from './main.ts'
</script>` </script>`
) )
expect(content).toMatch(`return { Baz }`) expect(content).toMatch(`return { get Baz() { return Baz } }`)
assertCode(content) assertCode(content)
}) })
}) })

3
packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
View File

@ -33,7 +33,8 @@ describe('sfc ref transform', () => {
expect(content).toMatch(`let c = () => {}`) expect(content).toMatch(`let c = () => {}`)
expect(content).toMatch(`let d`) expect(content).toMatch(`let d`)
expect(content).toMatch( 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) assertCode(content)
expect(bindings).toStrictEqual({ expect(bindings).toStrictEqual({

14
packages/compiler-sfc/src/compileScript.ts
View File

@ -1486,8 +1486,20 @@ export function compileScript(
} }
returned = `{ ` returned = `{ `
for (const key in allBindings) { 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} }, ` 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 { } else {
returned += `${key}, ` returned += `${key}, `
} }