feat: added tsx

crawlab-team · Jul 4, 2024 · 118c9dd · 118c9dd
1 parent 06a9e39
commit 118c9dd
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "@types/node": "^20.14.9",
     "@types/node-os-utils": "^1.3.4",
     "@vitejs/plugin-vue": "5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/compiler-sfc": "^3.4.31",
     "autoprefixer": "^10.4.19",
     "base64-img": "^1.0.4",

diff --git a/scripts/gen-index.js b/scripts/gen-index.js
@@ -38,18 +38,17 @@ function processFile(filePath, moduleName) {
     readFileAndModify(filePath, compName);
     return { importLine, exportLine };
   } else if (
-    filePath.endsWith('.ts') &&
-    // !['components', 'layouts', 'views'].includes(moduleName) &&
+    (filePath.endsWith('.ts') || filePath.endsWith('.tsx')) &&
     fileName !== INDEX_COMP_NAME
   ) {
-    let compName = fileName.replace('.ts', '');
+    let compName = fileName.replace(/.tsx?$/, '');
     compName += compName === 'export' ? '_' : '';
 
     let importLine;
     if (compName.startsWith('use')) {
-      importLine = `import ${compName} from '${relPath.replace('.ts', '')}';`;
+      importLine = `import ${compName} from '${relPath.replace(/.tsx?$/, '')}';`;
     } else {
-      importLine = `import * as ${compName} from '${relPath.replace('.ts', '')}';`;
+      importLine = `import * as ${compName} from '${relPath.replace(/.tsx?$/, '')}';`;
     }
     const exportLine = `${compName} as ${compName},`;
     return { importLine, exportLine };

diff --git a/src/package/create-app.ts b/src/package/create-app.ts
@@ -1,5 +1,4 @@
-import { createApp } from 'vue';
-import type { App } from '@vue/runtime-dom';
+import { createApp, App } from 'vue';
 import ElementPlus from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { installer as CrawlabUI } from '@/package/index';
@@ -104,7 +103,7 @@ const _createApp = async (options?: CreateAppOptions): Promise<App> => {
     app.mount(typeof options.mount === 'string' ? options.mount : '#app');
   }
 
-  return app as any;
+  return app;
 };
 
 export default _createApp;
diff --git a/src/package/make-installer.ts b/src/package/make-installer.ts
@@ -20,7 +20,7 @@ const makeInstaller = (
   const apps: App[] = [];
 
   // install function
-  const install = (app: App) => {
+  const install = (app: App<Element>) => {
     // skip if already exists in apps
     if (apps.includes(app)) return;
 

diff --git a/src/views/node/detail/tabs/NodeDetailTabMonitoring.vue b/src/views/node/detail/tabs/NodeDetailTabMonitoring.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
-import dayjs from 'dayjs';
+import dayjs, { UnitTypeShort } from 'dayjs';
 import { ChartData, ChartOptions } from 'chart.js';
 import useRequest from '@/services/request';
 import { translate } from '@/utils';
@@ -28,10 +28,8 @@ const timeRangeOptions = computed<any[]>(() => {
     const groups = timeRange.value.match(/(\d+)([a-z])/);
     if (!groups) return {};
     const num = parseInt(groups[1]) as number;
-    const unit = groups[2] as string;
-    const start = dayjs()
-      .add(-num, unit as string)
-      .toISOString();
+    const unit = groups[2] as UnitTypeShort;
+    const start = dayjs().add(-num, unit).toISOString();
     const end = dayjs().toISOString();
     return {
       value,

diff --git a/src/views/node/list/useNodeList.ts → src/views/node/list/useNodeList.tsx b/src/views/node/list/useNodeList.ts → src/views/node/list/useNodeList.tsx
@@ -1,4 +1,4 @@
-import { computed, h } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import {
   getDefaultUseListOptions,
@@ -13,7 +13,7 @@ import {
   TABLE_ACTION_CUSTOMIZE_COLUMNS,
   TABLE_ACTION_EXPORT,
 } from '@/constants/table';
-import { ElMessageBox } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import useNodeService from '@/services/node/nodeService';
 import NavLink from '@/components/nav/NavLink.vue';
 import { useRouter } from 'vue-router';
@@ -71,32 +71,30 @@ const useNodeList = () => {
           icon: ['fa', 'plus'],
           type: 'success',
           onClick: async () => {
-            const message = h('div', [
-              h(
-                'div',
-                {
-                  style: {
+            const message = (
+              <div>
+                <div
+                  style={{
                     fontSize: '16px',
                     marginBottom: '10px',
                     lineHeight: '1.5',
-                  },
-                },
-                [t('views.nodes.notice.create.content')]
-              ),
-              h(
-                'a',
-                {
-                  href: t('views.nodes.notice.create.link.url'),
-                  style: {
+                  }}
+                >
+                  {t('views.nodes.notice.create.content')}
+                </div>
+                <a
+                  href={t('views.nodes.notice.create.link.url')}
+                  target="_blank"
+                  style={{
                     color: '#409eff',
                     fontSize: '16px',
                     fontWeight: '600',
-                  },
-                  target: '_blank',
-                },
-                [t('views.nodes.notice.create.link.label')]
-              ),
-            ]);
+                  }}
+                >
+                  {t('views.nodes.notice.create.link.label')}
+                </a>
+              </div>
+            );
             const title = t('views.nodes.notice.create.title');
             await ElMessageBox({
               title,
@@ -198,11 +196,9 @@ const useNodeList = () => {
           label: t('views.nodes.table.columns.name'),
           icon: ['fa', 'font'],
           width: '150',
-          value: (row: Node) =>
-            h(NavLink, {
-              path: `/nodes/${row._id}`,
-              label: row.name,
-            }),
+          value: (row: Node) => (
+            <NavLink path={`/nodes/${row._id}`} label={row.name} />
+          ),
           hasSort: true,
           hasFilter: true,
           allowFilterSearch: true,
@@ -214,7 +210,7 @@ const useNodeList = () => {
           icon: ['fa', 'list'],
           width: '150',
           value: (row: Node) => {
-            return h(NodeType, { isMaster: row.is_master } as NodeTypeProps);
+            return <NodeType isMaster={row.is_master} />;
           },
           hasFilter: true,
           allowFilterItems: true,
@@ -230,7 +226,7 @@ const useNodeList = () => {
           icon: ['fa', 'heartbeat'],
           width: '150',
           value: (row: Node) => {
-            return h(NodeStatus, { status: row.status });
+            return <NodeStatus status={row.status} />;
           },
           hasFilter: true,
           allowFilterItems: true,
@@ -290,33 +286,44 @@ const useNodeList = () => {
               ![NODE_STATUS_ONLINE, NODE_STATUS_OFFLINE].includes(row.status)
             )
               return;
-            return h(NodeRunners, {
-              available: row.available_runners,
-              max: row.max_runners,
-            } as NodeRunnersProps);
+            return (
+              <NodeRunners
+                available={row.available_runners}
+                max={row.max_runners}
+              />
+            );
           },
         },
         {
-          key: 'enabled', // enabled
+          key: 'enabled',
           className: 'enabled',
           label: t('views.nodes.table.columns.enabled'),
           icon: ['fa', 'toggle-on'],
           width: '120',
           value: (row: Node) => {
-            return h(Switch, {
-              modelValue: row.enabled,
-              disabled: !isAllowedAction(
-                router.currentRoute.value.path,
-                ACTION_ENABLE
-              ),
-              'onUpdate:modelValue': async (value: boolean) => {
-                row.enabled = value;
-                await store.dispatch(`${ns}/updateById`, {
-                  id: row._id,
-                  form: row,
-                });
-              },
-            } as SwitchProps);
+            return (
+              <Switch
+                modelValue={row.enabled}
+                disabled={
+                  !isAllowedAction(
+                    router.currentRoute.value.path,
+                    ACTION_ENABLE
+                  )
+                }
+                onUpdate:modelValue={async (value: boolean) => {
+                  row.enabled = value;
+                  await store.dispatch(`${ns}/updateById`, {
+                    id: row._id,
+                    form: row,
+                  });
+                  if (row.enabled) {
+                    ElMessage.success(t('common.message.success.enabled'));
+                  } else {
+                    ElMessage.success(t('common.message.success.disabled'));
+                  }
+                }}
+              />
+            );
           },
           hasFilter: true,
           allowFilterItems: true,
@@ -325,16 +332,6 @@ const useNodeList = () => {
             { label: t('common.control.disabled'), value: false },
           ],
         },
-        // {
-        //   key: 'tags',
-        //   className: 'tags',
-        //   label: t('views.nodes.table.columns.tags'),
-        //   icon: ['fa', 'hashtag'],
-        //   value: ({tags}: Node) => {
-        //     return h(TagList, {tags});
-        //   },
-        //   width: '150',
-        // },
         {
           key: 'description',
           className: 'description',

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,6 +5,9 @@
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "types": ["vite/client"],
     "importHelpers": true,
     "moduleResolution": "node",
     "skipLibCheck": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,6 +2,7 @@ import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import dynamicImport from 'vite-plugin-dynamic-import';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig(({ mode }) => {
@@ -89,7 +90,7 @@ export default defineConfig(({ mode }) => {
       },
       extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
-    plugins: [vue(), dynamicImport()],
+    plugins: [vue(), dynamicImport(), vueJsx()],
     server: {
       cors: true,
     },