Switch from Webpack to Vite for client bundling.

junhaoliao · Dec 29, 2024 · 8b03576 · 8b03576
1 parent 3444981
commit 8b03576
Show file tree

Hide file tree

Showing 11 changed files with 1,794 additions and 7,281 deletions.
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -224,10 +224,12 @@ tasks:
     sources:
       - "{{.G_BUILD_DIR}}/log-viewer-webui-node-modules.md5"
       - "{{.TASKFILE}}"
+      - "client/index.html"
+      - "client/tsconfig.*.json"
       - "client/package.json"
       - "client/src/**/*.css"
-      - "client/src/**/*.jsx"
-      - "client/src/webpack.config.js"
+      - "client/src/**/*.ts"
+      - "client/src/**/*.tsx"
       - "yscope-log-viewer/package.json"
       - "yscope-log-viewer/public/**/*"
       - "yscope-log-viewer/src/**/*"
@@ -245,13 +247,14 @@ tasks:
           DATA_DIR: "{{.OUTPUT_DIR}}"
     cmds:
       - "rm -rf '{{.OUTPUT_DIR}}'"
-      - for:
-          - "client"
-          - "yscope-log-viewer"
-        cmd: |-
-          cd "{{.ITEM}}"
-          PATH="{{.G_NODEJS_22_BIN_DIR}}":$PATH npm run build -- \
-          --output-path "{{.OUTPUT_DIR}}/{{.ITEM}}"
+      - |-
+        cd "client"
+        PATH="{{.G_NODEJS_22_BIN_DIR}}":$PATH npm run build -- \
+        --outDir "{{.OUTPUT_DIR}}/client"
+      - |-
+        cd "yscope-log-viewer"
+        PATH="{{.G_NODEJS_22_BIN_DIR}}":$PATH npm run build -- \
+        --output-path "{{.OUTPUT_DIR}}/yscope-log-viewer"
       - task: "utils:compute-checksum"
         vars:
           DATA_DIR: "{{.OUTPUT_DIR}}"

diff --git a/...log-viewer-webui/client/public/index.html → ...onents/log-viewer-webui/client/index.html b/...log-viewer-webui/client/public/index.html → ...onents/log-viewer-webui/client/index.html
@@ -1,17 +1,18 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Log Viewer</title>
-    <meta charset="utf-8"/>
-    <meta name="description" content="YScope Log Viewer">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-    <link rel="preconnect" href="https://fonts.googleapis.com"/>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-    <link rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
-      />
-</head>
-<body>
-<div id="root"></div>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Log Viewer Web UI</title>
+    <meta charset="utf-8"/>
+    <meta name="description" content="YScope Log Viewer Web UI">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+    />
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>