From 69da94c7a686ca6dbfebc298a467230025f33804 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 6 Apr 2023 04:47:40 +0800
Subject: [PATCH] feat: add model option

---
 .../__snapshots__/compileScript.spec.ts.snap  |  38 ++---
 ...compileScriptPropsDestructure.spec.ts.snap |  12 +-
 .../__tests__/compileScript.spec.ts           |  40 +++---
 .../compileScriptPropsDestructure.spec.ts     |  14 +-
 packages/compiler-sfc/src/compileScript.ts    |  21 +--
 .../__tests__/apiSetupHelpers.spec.ts         | 132 +++++++++++++-----
 .../__tests__/componentProps.spec.ts          |  16 +++
 packages/runtime-core/src/apiSetupHelpers.ts  |   5 +-
 packages/runtime-core/src/componentProps.ts   |  11 +-
 9 files changed, 188 insertions(+), 101 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 145ab38626d..9ca8d450e2a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -658,8 +658,8 @@ exports[`SFC compile <script setup> > defineModel() > basic usage 1`] = `
 
 export default {
   props: {
-    \\"modelValue\\": Object.assign({ required: true }, { required: true }),
-    \\"count\\": { required: true },
+    \\"modelValue\\": Object.assign({ model: true }, { required: true }),
+    \\"count\\": { model: true },
   },
   emits: [\\"update:modelValue\\", \\"update:count\\"],
   setup(__props, { expose: __expose }) {
@@ -679,7 +679,7 @@ exports[`SFC compile <script setup> > defineModel() > w/ array props 1`] = `
 
 export default {
   props: _mergeModels(['foo', 'bar'], {
-    \\"count\\": { required: true },
+    \\"count\\": { model: true },
   }),
   emits: [\\"update:count\\"],
   setup(__props, { expose: __expose }) {
@@ -699,7 +699,7 @@ exports[`SFC compile <script setup> > defineModel() > w/ defineProps and defineE
 
 export default {
   props: _mergeModels({ foo: String }, {
-    \\"modelValue\\": Object.assign({ required: true }, { default: 0 }),
+    \\"modelValue\\": Object.assign({ model: true }, { default: 0 }),
   }),
   emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
   setup(__props, { expose: __expose }) {
@@ -1647,9 +1647,9 @@ exports[`SFC compile <script setup> > with TypeScript > defineModel() > basic us
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": { type: [Boolean, String], required: true },
-    \\"count\\": { type: Number, required: true },
-    \\"disabled\\": { type: Number, required: true, ...{ required: false } },
+    \\"modelValue\\": { model: true, type: [Boolean, String] },
+    \\"count\\": { model: true, type: Number },
+    \\"disabled\\": { model: true, type: Number, ...{ required: false } },
   },
   emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\"],
   setup(__props, { expose: __expose }) {
@@ -1671,10 +1671,10 @@ exports[`SFC compile <script setup> > with TypeScript > defineModel() > w/ produ
 export default /*#__PURE__*/_defineComponent({
   props: {
     \\"modelValue\\": Boolean,
-    \\"fn\\": {  },
-    \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
-    \\"str\\": {  },
-    \\"optional\\": { required: false },
+    \\"fn\\": { model: true },
+    \\"fnWithDefault\\": { model: true, type: Function, ...{ default: () => null } },
+    \\"str\\": { model: true },
+    \\"optional\\": { model: true, ...{ required: false } },
   },
   emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
   setup(__props, { expose: __expose }) {
@@ -2054,10 +2054,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();
@@ -2159,10 +2159,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();
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
index 525f4b6edb0..b0140a3f23e 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsDestructure.spec.ts.snap
@@ -121,12 +121,12 @@ exports[`sfc props transform > default values w/ type declaration, prod mode 1`]
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: { default: 1 },
-    bar: { default: () => ({}) },
-    baz: null,
-    boola: { type: Boolean },
-    boolb: { type: [Boolean, Number] },
-    func: { type: Function, default: () => {} }
+    foo: { required: false, default: 1 },
+    bar: { required: false, default: () => ({}) },
+    baz: { required: false },
+    boola: { type: Boolean, required: false },
+    boolb: { type: [Boolean, Number], required: false },
+    func: { type: Function, required: false, default: () => {} }
   },
   setup(__props: any) {
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index c156ff24153..1a78e1ff332 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -378,9 +378,9 @@ defineExpose({ foo: 123 })
       )
       assertCode(content)
       expect(content).toMatch(
-        '"modelValue": Object.assign({ required: true }, { required: true }),'
+        '"modelValue": Object.assign({ model: true }, { required: true }),'
       )
-      expect(content).toMatch('"count": { required: true },')
+      expect(content).toMatch('"count": { model: true },')
       expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
       expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
       expect(content).toMatch(`const c = _useModel("count")`)
@@ -408,7 +408,7 @@ defineExpose({ foo: 123 })
       assertCode(content)
       expect(content).toMatch(`props: _mergeModels({ foo: String }`)
       expect(content).toMatch(
-        `"modelValue": Object.assign({ required: true }, { default: 0 })`
+        `"modelValue": Object.assign({ model: true }, { default: 0 })`
       )
       expect(content).toMatch(`const count = _useModel("modelValue")`)
       expect(content).not.toMatch('defineModel')
@@ -431,7 +431,7 @@ defineExpose({ foo: 123 })
       )
       assertCode(content)
       expect(content).toMatch(`_mergeModels(['foo', 'bar'], {`)
-      expect(content).toMatch(`"count": { required: true }`)
+      expect(content).toMatch(`"count": { model: true }`)
       expect(content).toMatch(`const count = _useModel("count")`)
       expect(content).not.toMatch('defineModel')
       expect(bindings).toStrictEqual({
@@ -1510,12 +1510,12 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(`const props = __props`)
 
       // foo has no default value, the Function can be dropped
-      expect(content).toMatch(`foo: null`)
-      expect(content).toMatch(`bar: { type: Boolean }`)
+      expect(content).toMatch(`foo: { required: true }`)
+      expect(content).toMatch(`bar: { type: Boolean, required: true }`)
       expect(content).toMatch(
-        `baz: { type: [Boolean, Function], default: true }`
+        `baz: { type: [Boolean, Function], required: true, default: true }`
       )
-      expect(content).toMatch(`qux: { default: 'hi' }`)
+      expect(content).toMatch(`qux: { required: true, default: 'hi' }`)
     })
 
     test('withDefaults (dynamic)', () => {
@@ -1585,10 +1585,10 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(
         `
   _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 })`.trim()
       )
     })
@@ -1801,11 +1801,11 @@ const emit = defineEmits(['a', 'b'])
         )
         assertCode(content)
         expect(content).toMatch(
-          '"modelValue": { type: [Boolean, String], required: true }'
+          '"modelValue": { model: true, type: [Boolean, String] }'
         )
-        expect(content).toMatch('"count": { type: Number, required: true }')
+        expect(content).toMatch('"count": { model: true, type: Number }')
         expect(content).toMatch(
-          '"disabled": { type: Number, required: true, ...{ required: false } },'
+          '"disabled": { model: true, type: Number, ...{ required: false } },'
         )
         expect(content).toMatch(
           'emits: ["update:modelValue", "update:count", "update:disabled"]'
@@ -1838,12 +1838,14 @@ const emit = defineEmits(['a', 'b'])
         )
         assertCode(content)
         expect(content).toMatch('"modelValue": Boolean')
-        expect(content).toMatch('"fn": {  }')
+        expect(content).toMatch('"fn": { model: true }')
         expect(content).toMatch(
-          '"fnWithDefault": { type: Function, ...{ default: () => null } },'
+          '"fnWithDefault": { model: true, type: Function, ...{ default: () => null } },'
+        )
+        expect(content).toMatch('"str": { model: true }')
+        expect(content).toMatch(
+          '"optional": { model: true, ...{ required: false } }'
         )
-        expect(content).toMatch('"str": {  }')
-        expect(content).toMatch('"optional": { required: false }')
         expect(content).toMatch(
           'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
         )
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
index 193b3e5a1af..9944aed531f 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts
@@ -133,15 +133,15 @@ describe('sfc props transform', () => {
     )
     // literals can be used as-is, non-literals are always returned from a
     // function
+    assertCode(content)
     expect(content).toMatch(`props: {
-    foo: { default: 1 },
-    bar: { default: () => ({}) },
-    baz: null,
-    boola: { type: Boolean },
-    boolb: { type: [Boolean, Number] },
-    func: { type: Function, default: () => {} }
+    foo: { required: false, default: 1 },
+    bar: { required: false, default: () => ({}) },
+    baz: { required: false },
+    boola: { type: Boolean, required: false },
+    boolb: { type: [Boolean, Number], required: false },
+    func: { type: Function, required: false, default: () => {} }
   }`)
-    assertCode(content)
   })
 
   test('aliasing', () => {
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index e7f79f44a25..4b7afc894b6 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -127,7 +127,7 @@ export interface SFCScriptCompileOptions {
    */
   hoistStatic?: boolean
   /**
-   * (Experimental) Enable macro `defineModel`
+   * (**Experimental**) Enable macro `defineModel`
    */
   defineModel?: boolean
 }
@@ -997,12 +997,16 @@ export function compileScript(
           // #4783 for boolean, should keep the type
           // #7111 for function, if default value exists or it's not static, should keep it
           // in production
-          return `${key}: { type: ${toRuntimeTypeString(type)}${
+          return `${key}: { type: ${toRuntimeTypeString(
+            type
+          )}, required: ${required}${
             defaultString ? `, ${defaultString}` : ``
           } }`
         } else {
           // production: checks are useless
-          return `${key}: ${defaultString ? `{ ${defaultString} }` : 'null'}`
+          return `${key}: ${`{ required: ${required}${
+            defaultString ? `, ${defaultString}` : ``
+          } }`}`
         }
       })
       .join(',\n    ')}\n  }`
@@ -1035,21 +1039,18 @@ export function compileScript(
           undefined
 
         let decl: string
-
         if (runtimeType && isProd && !options) {
           decl = runtimeType
         } else {
-          const pairs: string[] = []
-          if (runtimeType) pairs.push(`type: ${runtimeType}`)
-          if (!isProd) pairs.push('required: true')
-          decl = pairs.join(', ')
+          decl = 'model: true'
+          if (runtimeType) decl += `, type: ${runtimeType}`
 
-          if (decl && options) {
+          if (options) {
             decl = isTS
               ? `{ ${decl}, ...${options} }`
               : `Object.assign({ ${decl} }, ${options})`
           } else {
-            decl = options || `{ ${decl} }`
+            decl = `{ ${decl} }`
           }
         }
 
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index de26f3b999f..cba8151ad73 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -180,22 +180,20 @@ describe('SFC <script setup> helpers', () => {
 
   describe('useModel', () => {
     test('basic', async () => {
-      let proxy: any
+      let foo: any
+      const update = () => {
+        foo.value = 'bar'
+      }
+
       const Comp = defineComponent({
         props: {
           modelValue: { required: true }
         },
         emits: ['update:modelValue'],
         setup() {
-          const foo = useModel<string>('modelValue')
-          const update = () => {
-            foo.value = 'bar'
-          }
-          return { foo, update }
+          foo = useModel<string>('modelValue')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const msg = ref('')
@@ -208,16 +206,19 @@ describe('SFC <script setup> helpers', () => {
         })
       ).mount(root)
 
-      expect(proxy.foo).toBe('')
+      // it's a ComputedRef, so not passive
+      expect(foo.effect).not.toBeUndefined()
+
+      expect(foo.value).toBe('')
       expect(msg.value).toBe('')
       expect(setValue).not.toBeCalled()
 
       // update from child
-      proxy.update()
+      update()
 
       await nextTick()
       expect(msg.value).toBe('bar')
-      expect(proxy.foo).toBe('bar')
+      expect(foo.value).toBe('bar')
       expect(setValue).toBeCalledTimes(1)
 
       // update from parent
@@ -225,68 +226,125 @@ describe('SFC <script setup> helpers', () => {
 
       await nextTick()
       expect(msg.value).toBe('qux')
-      expect(proxy.foo).toBe('qux')
+      expect(foo.value).toBe('qux')
       expect(setValue).toBeCalledTimes(1)
     })
 
     test('optional', async () => {
-      let proxy: any
+      let foo: any
+      const update = () => {
+        foo.value = 'bar'
+      }
+
       const Comp = defineComponent({
         props: ['foo'],
         emits: ['update:foo'],
         setup() {
-          const foo = useModel<string>('foo')
-          const update = () => {
-            foo.value = 'bar'
-          }
-          return { foo, update }
+          foo = useModel<string>('foo')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const root = nodeOps.createElement('div')
       const updateFoo = vi.fn()
       render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
 
-      expect(proxy.foo).toBeUndefined()
-      proxy.update()
+      // it's a ComputedRef, so it's passive
+      expect(foo.effect).toBeUndefined()
 
-      expect(proxy.foo).toBe('bar')
+      expect(foo.value).toBeUndefined()
+      update()
+
+      expect(foo.value).toBe('bar')
 
       await nextTick()
       expect(updateFoo).toBeCalledTimes(1)
     })
 
     test('default value', async () => {
-      let proxy: any
+      let count: any
+      const inc = () => {
+        count.value++
+      }
       const Comp = defineComponent({
         props: { count: { default: 0 } },
         emits: ['update:count'],
         setup() {
-          const count = useModel<number>('count')
-          const inc = () => {
-            count.value++
-          }
-          return { count, inc }
+          count = useModel<number>('count')
         },
-        render() {
-          proxy = this
-        }
+        render() {}
       })
 
       const root = nodeOps.createElement('div')
       const updateCount = vi.fn()
       render(h(Comp, { 'onUpdate:count': updateCount }), root)
 
-      expect(proxy.count).toBe(0)
+      // it's a ComputedRef, so it's passive
+      expect(count.effect).toBeUndefined()
+
+      expect(count.value).toBe(0)
 
-      proxy.inc()
-      expect(proxy.count).toBe(1)
+      inc()
+      expect(count.value).toBe(1)
       await nextTick()
       expect(updateCount).toBeCalledTimes(1)
     })
+
+    describe('passive mode', async () => {
+      test('model w/o required', () => {
+        let count: any
+        const Comp = defineComponent({
+          props: { count: { model: true } },
+          emits: ['update:count'],
+          setup() {
+            count = useModel<number>('count')
+          },
+          render() {}
+        })
+
+        const root = nodeOps.createElement('div')
+        render(h(Comp, { count: 0 }), root)
+
+        // it's a ComputedRef, so not passive
+        expect(count.effect).not.toBeUndefined()
+      })
+
+      test('model w/ required is true', () => {
+        let count: any
+        const Comp = defineComponent({
+          props: { count: { model: true, required: true } },
+          emits: ['update:count'],
+          setup() {
+            count = useModel<number>('count')
+          },
+          render() {}
+        })
+
+        const root = nodeOps.createElement('div')
+        render(h(Comp, { count: 0 }), root)
+
+        // it's a ComputedRef, so not passive
+        expect(count.effect).not.toBeUndefined()
+      })
+
+      test('model w/ required is false', () => {
+        let count: any
+        const Comp = defineComponent({
+          props: { count: { model: true, required: false } },
+          emits: ['update:count'],
+          setup() {
+            count = useModel<number>('count')
+          },
+          render() {}
+        })
+
+        const root = nodeOps.createElement('div')
+        render(h(Comp), root)
+
+        // it's a Ref, so it's passive
+        expect(count.effect).toBeUndefined()
+      })
+    })
   })
 
   test('createPropsRestProxy', () => {
diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 071a24f138d..500bae7782f 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -325,6 +325,22 @@ describe('component props', () => {
     expect(`Missing required prop: "num"`).toHaveBeenWarned()
   })
 
+  test('model prop is required by default', () => {
+    const Comp = {
+      props: {
+        modelValue: { model: true },
+        count: { model: true, required: false }
+      },
+      setup() {
+        return () => null
+      }
+    }
+    render(h(Comp), nodeOps.createElement('div'))
+
+    expect(`Missing required prop: "modelValue"`).toHaveBeenWarned()
+    expect(`Missing required prop: "count"`).not.toHaveBeenWarned()
+  })
+
   test('warn on type mismatch', () => {
     class MyClass {}
     const Comp = {
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 281b353fafe..2b6392dae0a 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -325,7 +325,10 @@ export function useModel<T>(name: string): WritableComputedRef<T> {
   }
 
   const options = (i.propsOptions[0] as NormalizedProps)[name]
-  if (options && !options.required) {
+  if (
+    options &&
+    (options.model ? options.required === false : !options.required)
+  ) {
     const proxy = ref<any>(i.props[name])
 
     watch(
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index 186384d5b82..900659300ec 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -66,6 +66,10 @@ export interface PropOptions<T = any, D = T> {
    * @internal
    */
   skipFactory?: boolean
+  /**
+   * @internal
+   */
+  model?: boolean
 }
 
 export type PropType<T> = PropConstructor<T> | PropConstructor<T>[]
@@ -620,14 +624,17 @@ function validateProp(
   prop: PropOptions,
   isAbsent: boolean
 ) {
-  const { type, required, validator, skipCheck } = prop
+  const { type, validator, skipCheck, model } = prop
+  const required = model
+    ? prop.required !== false // true by default for model
+    : prop.required
   // required!
   if (required && isAbsent) {
     warn('Missing required prop: "' + name + '"')
     return
   }
   // missing but optional
-  if (value == null && !prop.required) {
+  if (value == null && !required) {
     return
   }
   // type check