wip

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 }) {
@@ -1580,6 +1622,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

@@ -365,6 +365,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>
@@ -1710,6 +1765,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">