feat(compiler-sfc): introduce defineModel macro and useModel helper

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

@@ -653,6 +653,68 @@ return {  }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels } from 'vue'
+
+export default {
+  props: _addRequiredToModels({
+    \\"modelValue\\": { required: true },
+    \\"count\\": {},
+  }),
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const modelValue = _useModel(\\"modelValue\\")
+        const c = _useModel(\\"count\\")
+
+return { modelValue, c }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels(['foo', 'bar'], _addRequiredToModels({
+    \\"count\\": {},
+  })),
+  emits: [\\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+
+        const count = _useModel(\\"count\\")
+
+return { count }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels({ foo: String }, _addRequiredToModels({
+    \\"modelValue\\": { default: 0 },
+  })),
+  emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+
+
+        const count = _useModel(\\"modelValue\\")
+
+return { count }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1580,6 +1642,58 @@ return { emit }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: _addRequiredToModels({
+    \\"modelValue\\": { type: [Boolean, String] },
+    \\"count\\": { type: Number },
+    \\"disabled\\": { type: Number, ...{ required: false } },
+    \\"any\\": { type: Boolean, skipCheck: true },
+  }),
+  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const count = _useModel(\\"count\\")
+          const disabled = _useModel(\\"disabled\\")
+          const any = _useModel(\\"any\\")
+
+return { modelValue, count, disabled, any }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
+"import { useModel as _useModel, addRequiredToModels as _addRequiredToModels, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: _addRequiredToModels({
+    \\"modelValue\\": { type: Boolean },
+    \\"fn\\": {},
+    \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
+    \\"str\\": {},
+    \\"optional\\": { required: false },
+  }),
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const fn = _useModel(\\"fn\\")
+          const fnWithDefault = _useModel(\\"fnWithDefault\\")
+          const str = _useModel(\\"str\\")
+          const optional = _useModel(\\"optional\\")
+
+return { modelValue, fn, fnWithDefault, str, optional }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > defineProps w/ TS assertion 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
@@ -1942,10 +2056,10 @@ import { defaults } from './foo'
 
 export default /*#__PURE__*/_defineComponent({
   props: _mergeDefaults({
-    foo: { type: Function },
-    bar: { type: Boolean },
-    baz: { type: [Boolean, Function] },
-    qux: null
+    foo: { type: Function, required: true },
+    bar: { type: Boolean, required: true },
+    baz: { type: [Boolean, Function], required: true },
+    qux: { required: true }
   }, { ...defaults }),
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -2047,10 +2161,10 @@ exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: null,
-    bar: { type: Boolean },
-    baz: { type: [Boolean, Function], default: true },
-    qux: { default: 'hi' }
+    foo: { required: true },
+    bar: { type: Boolean, required: true },
+    baz: { type: [Boolean, Function], required: true, default: true },
+    qux: { required: true, default: 'hi' }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();

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

@@ -123,7 +123,7 @@ export default /*#__PURE__*/_defineComponent({
   props: {
     foo: { default: 1 },
     bar: { default: () => ({}) },
-    baz: null,
+    baz: {  },
     boola: { type: Boolean },
     boolb: { type: [Boolean, Number] },
     func: { type: Function, default: () => {} }