chore: update gen script (element-plus#10641)

Co-authored-by: zz <2418184580@qq.com>

Author: chenxch

scripts/gc.sh

@@ -30,50 +30,59 @@ mkdir -p "$DIRNAME"
 mkdir -p "$DIRNAME/src"
 mkdir -p "$DIRNAME/__tests__"
 
-cat > $DIRNAME/src/index.vue <<EOF
+cat > $DIRNAME/src/$INPUT_NAME.vue <<EOF
 <template>
   <div>
-    <slot></slot>
+    <slot />
   </div>
 </template>
-<script lang='ts'>
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'El${NAME}',
-  props: { },
-  setup(props) {
-    // init here
-  },
+
+<script lang="ts" setup>
+import { ${INPUT_NAME}Props } from './$INPUT_NAME'
+
+defineOptions({
+  name: 'El$NAME',
 })
+
+const props = defineProps(${INPUT_NAME}Props)
+
+// init here
 </script>
-<style>
-</style>
+EOF
+
+cat > $DIRNAME/src/$INPUT_NAME.ts <<EOF
+import { buildProps } from '@element-plus/utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type $NAME from './$INPUT_NAME.vue'
+
+export const ${INPUT_NAME}Props = buildProps({})
+
+export type ${NAME}Props = ExtractPropTypes<typeof ${INPUT_NAME}Props>
+export type ${NAME}Instance = InstanceType<typeof $NAME>
 EOF
 
 cat <<EOF >"$DIRNAME/index.ts"
-import { App } from 'vue'
-import ${NAME} from './src/index.vue'
+import { withInstall } from '@element-plus/utils'
+import $NAME from './src/$INPUT_NAME.vue'
 
-${NAME}.install = (app: App): void => {
-  app.component(${NAME}.name, ${NAME})
-}
+export const El$NAME = withInstall($NAME)
+export default El$NAME
 
-export default ${NAME}
+export * from './src/$INPUT_NAME'
 EOF
 
-cat > $DIRNAME/__tests__/$INPUT_NAME.spec.ts <<EOF
+cat > $DIRNAME/__tests__/$INPUT_NAME.test.tsx <<EOF
 import { mount } from '@vue/test-utils'
-import $NAME from '../src/index.vue'
+import { describe, expect, test } from 'vitest'
+import $NAME from '../src/$INPUT_NAME.vue'
 
 const AXIOM = 'Rem is the best girl'
 
 describe('$NAME.vue', () => {
   test('render test', () => {
-    const wrapper = mount($NAME, {
-      slots: {
-        default: AXIOM,
-      },
-    })
+    const wrapper = mount(() => <$NAME>{AXIOM}</$NAME>)
+
     expect(wrapper.text()).toEqual(AXIOM)
   })
 })