refactor: 重构 tsx 组件

Author: l246804

README.md

@@ -31,7 +31,7 @@ your-project/
 pnpm add vue @vueuse/core
 
 # 开发依赖，以 Vite 为例
-pnpm add vue-component-type-helpers type-fest typescript vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx -D
+pnpm add vue-component-type-helpers type-fest typescript vite @vitejs/plugin-vue -D
 
 ```
 

package.json

@@ -69,7 +69,6 @@
     "@types/archiver": "^7.0.0",
     "@types/node": "^22.16.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^14.0.0",
     "archiver": "^7.0.1",
@@ -87,7 +86,6 @@
     "unplugin-raw": "^0.6.3",
     "unplugin-vue": "^7.0.3",
     "unplugin-vue-components": "^30.0.0",
-    "unplugin-vue-jsx": "^0.8.1",
     "unplugin-vue-router": "^0.16.0",
     "vite": "npm:rolldown-vite@^7.1.19",
     "vitest": "^4.0.10",

playground/src/App.vue

@@ -1,7 +1,7 @@
-<script setup lang="tsx">
+<script setup lang="ts">
 import type { FunctionalComponent } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
-import { ElSubMenu } from 'element-plus'
+import { ElMenuItem, ElSubMenu } from 'element-plus'
 import { camelize } from 'vue'
 import { routes } from 'vue-router/auto-routes'
 
@@ -16,25 +16,23 @@ const ReMenuItem: FunctionalComponent<{
 }> = ({ route: propRoute, parentPath }) => {
   const fullPath = `${parentPath}${parentPath ? '/' : ''}${propRoute.path}`
   if (propRoute.children?.length) {
-    return (
-      <ElSubMenu index={fullPath}>
-        {{
-          title: () => getMenuTitle(propRoute.path),
-          default: () =>
-            propRoute.children!.map((route) => (
-              <ReMenuItem
-                key={`${fullPath}/${route.path}`}
-                route={route}
-                parentPath={fullPath}
-              />
-            )),
-        }}
-      </ElSubMenu>
+    return h(
+      ElSubMenu,
+      { index: fullPath },
+      {
+        title: () => getMenuTitle(propRoute.path),
+        default: () =>
+          propRoute.children!.map((route) =>
+            h(ReMenuItem, {
+              key: `${fullPath}/${route.path}`,
+              route,
+              parentPath: fullPath,
+            }),
+          ),
+      },
     )
   }
-  return (
-    <ElMenuItem index={fullPath}>{getMenuTitle(propRoute.path)}</ElMenuItem>
-  )
+  return h(ElMenuItem, { index: fullPath }, () => getMenuTitle(propRoute.path))
 }
 
 ReMenuItem.props = {