feat(define-model): support optional props

closes #144
vue-macros · Nov 11, 2022 · 8c2bf9a · 8c2bf9a
1 parent bb50fa6
commit 8c2bf9a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/.changeset/eleven-deers-pretend.md b/.changeset/eleven-deers-pretend.md
@@ -0,0 +1,5 @@
+---
+'@vue-macros/define-model': minor
+---
+
+support optional model
diff --git a/packages/define-model/src/core/index.ts b/packages/define-model/src/core/index.ts
@@ -271,7 +271,7 @@ export const transformDefineModel = (
     }
   }
 
-  function extractRuntimeProps(
+  function extractPropsDefinitions(
     node: TSTypeLiteral | TSInterfaceBody
   ): Record<string, string> {
     const members = node.type === 'TSTypeLiteral' ? node.members : node.body
@@ -281,10 +281,13 @@ export const transformDefineModel = (
         (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
         m.key.type === 'Identifier'
       ) {
-        const value = scriptCompiled.loc.source.slice(
-          m.typeAnnotation!.start!,
-          m.typeAnnotation!.end!
-        )
+        const type = m.typeAnnotation?.typeAnnotation
+        const value = type
+          ? `${m.optional ? '?' : ''}: ${scriptCompiled.loc.source.slice(
+              type.start!,
+              type.end!
+            )}`
+          : ''
         map[m.key.name] = value
       }
     }
@@ -531,7 +534,7 @@ export const transformDefineModel = (
     )
   }
 
-  const map = extractRuntimeProps(modelTypeDecl)
+  const map = extractPropsDefinitions(modelTypeDecl)
 
   rewriteMacros()
 

diff --git a/packages/define-model/tests/__snapshots__/fixtures.test.ts.snap b/packages/define-model/tests/__snapshots__/fixtures.test.ts.snap
@@ -465,6 +465,36 @@ _DM_useVModel(['modelValue', 'modelValue', 'update:modelValue'], ['visible', 'vi
 "
 `;
 
+exports[`fixtures > ./fixtures/runtime/vue3/no-type.vue 1`] = `
+"<script setup lang=\\"ts\\">
+import _DM_useVModel from '/plugin-define-model/use-vmodel';
+defineProps<{
+    foo
+bar
+  }>();
+defineEmits<{
+    (evt: 'update:foo', value): void
+(evt: 'update:bar', value): void
+  }>();
+_DM_useVModel(['foo', 'foo', 'update:foo'], ['bar', 'bar', 'update:bar'])
+</script>
+"
+`;
+
+exports[`fixtures > ./fixtures/runtime/vue3/optional.vue 1`] = `
+"<script setup lang=\\"ts\\">
+import _DM_useVModel from '/plugin-define-model/use-vmodel';
+defineProps<{
+    foo?: string
+  }>();
+defineEmits<{
+    (evt: 'update:foo', value?: string): void
+  }>();
+_DM_useVModel(['foo', 'foo', 'update:foo'])
+</script>
+"
+`;
+
 exports[`fixtures > ./fixtures/runtime/vue3/rest.vue 1`] = `
 "<script setup lang=\\"ts\\">
 import _DM_useVModel from '/plugin-define-model/use-vmodel';

diff --git a/packages/define-model/tests/fixtures/runtime/vue3/no-type.vue b/packages/define-model/tests/fixtures/runtime/vue3/no-type.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+defineModel<{
+  // @ts-expect-error
+  foo
+  // @ts-expect-error
+  bar?
+}>()
+</script>
diff --git a/packages/define-model/tests/fixtures/runtime/vue3/optional.vue b/packages/define-model/tests/fixtures/runtime/vue3/optional.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+defineModel<{
+  foo ?  :  string
+}>()
+</script>