Skip to content

Commit 14f3d74

Browse files
authored
feat(sfc): introduce defineModel macro and useModel helper (#8018)
1 parent 3b02c27 commit 14f3d74

12 files changed

+1000
-91
lines changed

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

+148-2
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,100 @@ return { }
653653
}"
654654
`;
655655

656+
exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
657+
"import { useModel as _useModel } from 'vue'
658+
659+
export default {
660+
props: {
661+
\\"modelValue\\": { required: true },
662+
\\"count\\": {},
663+
},
664+
emits: [\\"update:modelValue\\", \\"update:count\\"],
665+
setup(__props, { expose: __expose }) {
666+
__expose();
667+
668+
const modelValue = _useModel(__props, \\"modelValue\\")
669+
const c = _useModel(__props, \\"count\\")
670+
671+
return { modelValue, c }
672+
}
673+
674+
}"
675+
`;
676+
677+
exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
678+
"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
679+
680+
export default {
681+
props: _mergeModels(['foo', 'bar'], {
682+
\\"count\\": {},
683+
}),
684+
emits: [\\"update:count\\"],
685+
setup(__props, { expose: __expose }) {
686+
__expose();
687+
688+
689+
const count = _useModel(__props, \\"count\\")
690+
691+
return { count }
692+
}
693+
694+
}"
695+
`;
696+
697+
exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
698+
"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
699+
700+
export default {
701+
props: _mergeModels({ foo: String }, {
702+
\\"modelValue\\": { default: 0 },
703+
}),
704+
emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
705+
setup(__props, { expose: __expose }) {
706+
__expose();
707+
708+
709+
710+
const count = _useModel(__props, \\"modelValue\\")
711+
712+
return { count }
713+
}
714+
715+
}"
716+
`;
717+
718+
exports[`SFC compile <script setup> > defineModel() > w/ local flag 1`] = `
719+
"import { useModel as _useModel } from 'vue'
720+
const local = true
721+
722+
export default {
723+
props: {
724+
\\"modelValue\\": { local: true, default: 1 },
725+
\\"bar\\": { [key]: true },
726+
\\"baz\\": { ...x },
727+
\\"qux\\": x,
728+
\\"foo2\\": { local: true, ...x },
729+
\\"hoist\\": { local },
730+
},
731+
emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
732+
setup(__props, { expose: __expose }) {
733+
__expose();
734+
735+
const foo = _useModel(__props, \\"modelValue\\", { local: true })
736+
const bar = _useModel(__props, \\"bar\\", { [key]: true })
737+
const baz = _useModel(__props, \\"baz\\", { ...x })
738+
const qux = _useModel(__props, \\"qux\\", x)
739+
740+
const foo2 = _useModel(__props, \\"foo2\\", { local: true })
741+
742+
const hoist = _useModel(__props, \\"hoist\\", { local })
743+
744+
return { foo, bar, baz, qux, foo2, local, hoist }
745+
}
746+
747+
}"
748+
`;
749+
656750
exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
657751
"export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
658752
setup(__props, { expose: __expose }) {
@@ -1596,6 +1690,58 @@ return { emit }
15961690
})"
15971691
`;
15981692

1693+
exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
1694+
"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
1695+
1696+
export default /*#__PURE__*/_defineComponent({
1697+
props: {
1698+
\\"modelValue\\": { type: [Boolean, String] },
1699+
\\"count\\": { type: Number },
1700+
\\"disabled\\": { type: Number, ...{ required: false } },
1701+
\\"any\\": { type: Boolean, skipCheck: true },
1702+
},
1703+
emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
1704+
setup(__props, { expose: __expose }) {
1705+
__expose();
1706+
1707+
const modelValue = _useModel(__props, \\"modelValue\\")
1708+
const count = _useModel(__props, \\"count\\")
1709+
const disabled = _useModel(__props, \\"disabled\\")
1710+
const any = _useModel(__props, \\"any\\")
1711+
1712+
return { modelValue, count, disabled, any }
1713+
}
1714+
1715+
})"
1716+
`;
1717+
1718+
exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
1719+
"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
1720+
1721+
export default /*#__PURE__*/_defineComponent({
1722+
props: {
1723+
\\"modelValue\\": { type: Boolean },
1724+
\\"fn\\": {},
1725+
\\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
1726+
\\"str\\": {},
1727+
\\"optional\\": { required: false },
1728+
},
1729+
emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
1730+
setup(__props, { expose: __expose }) {
1731+
__expose();
1732+
1733+
const modelValue = _useModel(__props, \\"modelValue\\")
1734+
const fn = _useModel(__props, \\"fn\\")
1735+
const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
1736+
const str = _useModel(__props, \\"str\\")
1737+
const optional = _useModel(__props, \\"optional\\")
1738+
1739+
return { modelValue, fn, fnWithDefault, str, optional }
1740+
}
1741+
1742+
})"
1743+
`;
1744+
15991745
exports[`SFC compile <script setup> > with TypeScript > defineProps w/ TS assertion 1`] = `
16001746
"import { defineComponent as _defineComponent } from 'vue'
16011747

@@ -1961,7 +2107,7 @@ export default /*#__PURE__*/_defineComponent({
19612107
foo: { type: Function },
19622108
bar: { type: Boolean },
19632109
baz: { type: [Boolean, Function] },
1964-
qux: null
2110+
qux: {}
19652111
}, { ...defaults }),
19662112
setup(__props: any, { expose: __expose }) {
19672113
__expose();
@@ -2063,7 +2209,7 @@ exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/
20632209

20642210
export default /*#__PURE__*/_defineComponent({
20652211
props: {
2066-
foo: null,
2212+
foo: {},
20672213
bar: { type: Boolean },
20682214
baz: { type: [Boolean, Function], default: true },
20692215
qux: { default: 'hi' }

packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default /*#__PURE__*/_defineComponent({
123123
props: {
124124
foo: { default: 1 },
125125
bar: { default: () => ({}) },
126-
baz: null,
126+
baz: {},
127127
boola: { type: Boolean },
128128
boolb: { type: [Boolean, Number] },
129129
func: { type: Function, default: () => {} }

0 commit comments

Comments
 (0)