chore(better-define): add vue 2 example

playground/vue2/src/App.vue

@@ -2,6 +2,7 @@
 import DefineOptionsVue from './examples/define-options/index.vue'
 import DefineModelVue from './examples/define-model/parent.vue'
 import DefineSlotsVue from './examples/define-slots/parent.vue'
+import BetterDefineVue from './examples/better-define/index.vue'
 import DefineRenderVue from './examples/define-render/index.vue'
 import HoistStaticVue from './examples/hoist-static/index.vue'
 
@@ -31,6 +32,11 @@ import SetupSFC from './examples/setup-sfc/index.setup'
       <DefineSlotsVue />
     </fieldset>
 
+    <fieldset>
+      <legend>betterDefine</legend>
+      <BetterDefineVue />
+    </fieldset>
+
     <fieldset>
       <legend>defineRender</legend>
       <DefineRenderVue />
@@ -65,3 +71,11 @@ import SetupSFC from './examples/setup-sfc/index.setup'
     </fieldset> -->
   </div>
 </template>
+
+<style>
+legend {
+  font-family: monospace;
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

playground/vue2/src/examples/better-define/child.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { BaseEmits, BaseProps } from './types'
+
+export interface Props extends BaseProps {
+  msg: string
+}
+export interface Emits extends BaseEmits {
+  (evt: 'click'): void
+}
+withDefaults(
+  defineProps<
+    Props & {
+      union?: string | number
+    }
+  >(),
+  { union: 'defaultValue' }
+)
+
+defineEmits<Emits>()
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

playground/vue2/src/examples/better-define/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import child from './child.vue'
+</script>
+
+<template>
+  <child name="" msg="" :age="10" union="" />
+</template>

playground/vue2/src/examples/better-define/types.ts

@@ -0,0 +1,11 @@
+export type Str = string
+export interface BaseProps {
+  name: Str
+  age: number
+}
+
+type UpdateName = 'update:name'
+export interface BaseEmits {
+  (evt: UpdateName, name: Str): void
+  (evt: 'update:foo', foo: string): void
+}