feat(sfc): introduce defineModel macro and useModel helper (#8018)

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

@@ -653,6 +653,100 @@ return {  }
 }"
 `;
 
+exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel } from 'vue'
+
+export default {
+  props: {
+    \\"modelValue\\": { required: true },
+    \\"count\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const modelValue = _useModel(__props, \\"modelValue\\")
+        const c = _useModel(__props, \\"count\\")
+
+return { modelValue, c }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels(['foo', 'bar'], {
+    \\"count\\": {},
+  }),
+  emits: [\\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+
+        const count = _useModel(__props, \\"count\\")
+
+return { count }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineEmits 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
+export default {
+  props: _mergeModels({ foo: String }, {
+    \\"modelValue\\": { default: 0 },
+  }),
+  emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+
+
+        const count = _useModel(__props, \\"modelValue\\")
+
+return { count }
+}
+
+}"
+`;
+
+exports[`SFC compile <script setup> > defineModel() > w/ local flag 1`] = `
+"import { useModel as _useModel } from 'vue'
+const local = true
+
+export default {
+  props: {
+    \\"modelValue\\": { local: true, default: 1 },
+    \\"bar\\": { [key]: true },
+    \\"baz\\": { ...x },
+    \\"qux\\": x,
+    \\"foo2\\": { local: true, ...x },
+    \\"hoist\\": { local },
+  },
+  emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        const foo = _useModel(__props, \\"modelValue\\", { local: true })
+        const bar = _useModel(__props, \\"bar\\", { [key]: true })
+        const baz = _useModel(__props, \\"baz\\", { ...x })
+        const qux = _useModel(__props, \\"qux\\", x)
+
+        const foo2 = _useModel(__props, \\"foo2\\", { local: true })
+
+        const hoist = _useModel(__props, \\"hoist\\", { local })
+
+return { foo, bar, baz, qux, foo2, local, hoist }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1596,6 +1690,58 @@ return { emit }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic usage 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"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(__props, \\"modelValue\\")
+          const count = _useModel(__props, \\"count\\")
+          const disabled = _useModel(__props, \\"disabled\\")
+          const any = _useModel(__props, \\"any\\")
+
+return { modelValue, count, disabled, any }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ production mode 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"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(__props, \\"modelValue\\")
+          const fn = _useModel(__props, \\"fn\\")
+          const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
+          const str = _useModel(__props, \\"str\\")
+          const optional = _useModel(__props, \\"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'
 
@@ -1961,7 +2107,7 @@ export default /*#__PURE__*/_defineComponent({
     foo: { type: Function },
     bar: { type: Boolean },
     baz: { type: [Boolean, Function] },
-    qux: null
+    qux: {}
   }, { ...defaults }),
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -2063,7 +2209,7 @@ exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: null,
+    foo: {},
     bar: { type: Boolean },
     baz: { type: [Boolean, Function], default: true },
     qux: { default: 'hi' }

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: () => {} }