wip

Author: sxzz

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

@@ -653,6 +653,48 @@ 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(\\"modelValue\\", { required: true })
+        const c = _useModel(\\"count\\")
+        
+return { modelValue, c }
+}
+
+}"
+`;
+
+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: merge(['change'], [\\"update:modelValue\\"]),
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+        
+        const count = _useModel(\\"modelValue\\", { default: 0 })
+        
+return { count }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > defineOptions() > basic usage 1`] = `
 "export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
@@ -1567,6 +1609,50 @@ 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\\": [Boolean, String],
+    \\"count\\": Number,
+  },
+  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const count = _useModel(\\"count\\")
+          
+return { modelValue, count }
+}
+
+})"
+`;
+
+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\\": Boolean,
+    \\"fn\\": Function,
+    \\"str\\": {},
+  },
+  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:str\\"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+          const modelValue = _useModel(\\"modelValue\\")
+          const fn = _useModel(\\"fn\\")
+          const str = _useModel(\\"str\\")
+          
+return { modelValue, fn, str }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > defineProps w/ TS assertion 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 

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

@@ -321,6 +321,61 @@ defineExpose({ foo: 123 })
     expect(content).toMatch(/\b__expose\(\{ foo: 123 \}\)/)
   })
 
+  describe('defineModel()', () => {
+    test('basic usage', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        const modelValue = defineModel({ required: true })
+        const c = defineModel('count')
+        </script>
+        `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch('props: {\n    "modelValue": { required: true }')
+      expect(content).toMatch('"count": {},')
+      expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+      expect(content).toMatch(
+        `const modelValue = _useModel("modelValue", { required: true })`
+      )
+      expect(content).toMatch(`const c = _useModel("count")`)
+      expect(content).toMatch(`return { modelValue, c }`)
+      expect(content).not.toMatch('defineModel')
+
+      expect(bindings).toStrictEqual({
+        modelValue: BindingTypes.SETUP_REF,
+        count: BindingTypes.PROPS,
+        c: BindingTypes.SETUP_REF
+      })
+    })
+
+    test('w/ defineProps and defineEmits', () => {
+      const { content, bindings } = compile(
+        `
+        <script setup>
+        defineProps({ foo: String })
+        defineEmits(['change'])
+        const count = defineModel({ default: 0 })
+        </script>
+      `,
+        { defineModel: true }
+      )
+      assertCode(content)
+      expect(content).toMatch(`props: _mergeModels({ foo: String }`)
+      expect(content).toMatch(`"modelValue": { default: 0 }`)
+      expect(content).toMatch(
+        `const count = _useModel("modelValue", { default: 0 })`
+      )
+      expect(content).not.toMatch('defineModel')
+      expect(bindings).toStrictEqual({
+        count: BindingTypes.SETUP_REF,
+        foo: BindingTypes.PROPS,
+        modelValue: BindingTypes.PROPS
+      })
+    })
+  })
+
   test('<script> after <script setup> the script content not end with `\\n`', () => {
     const { content } = compile(`
     <script setup>
@@ -1666,6 +1721,58 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
+    describe('defineModel', () => {
+      test('basic usage', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean | string>()
+          const count = defineModel<number>('count')
+          </script>
+          `,
+          { defineModel: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": [Boolean, String]')
+        expect(content).toMatch('"count": Number')
+        expect(content).toMatch('emits: ["update:modelValue", "update:count"]')
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const count = _useModel("count")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          count: BindingTypes.SETUP_REF
+        })
+      })
+
+      test('w/ production mode', () => {
+        const { content, bindings } = compile(
+          `
+          <script setup lang="ts">
+          const modelValue = defineModel<boolean>()
+          const fn = defineModel<() => void>('fn')
+          const str = defineModel<string>('str')
+          </script>
+          `,
+          { defineModel: true, isProd: true }
+        )
+        assertCode(content)
+        expect(content).toMatch('"modelValue": Boolean')
+        expect(content).toMatch('"fn": Function')
+        expect(content).toMatch('"str": {}')
+        expect(content).toMatch(
+          'emits: ["update:modelValue", "update:fn", "update:str"]'
+        )
+        expect(content).toMatch(`const modelValue = _useModel("modelValue")`)
+        expect(content).toMatch(`const fn = _useModel("fn")`)
+        expect(content).toMatch(`const str = _useModel("str")`)
+        expect(bindings).toStrictEqual({
+          modelValue: BindingTypes.SETUP_REF,
+          fn: BindingTypes.SETUP_REF,
+          str: BindingTypes.SETUP_REF
+        })
+      })
+    })
+
     test('runtime Enum', () => {
       const { content, bindings } = compile(
         `<script setup lang="ts">