build: Migrate from Webpack to Vite (closes #146, resolves #238). (#175)

Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com>

Author: junhaoliao

docs/src/dev-guide/building-getting-started.md

@@ -21,7 +21,7 @@ variable `NODE_ENV=production` is set.
 You can build and serve the viewer in debug mode using:
 
 ```shell
-npm start
+npm run dev
 ```
 
 The viewer should then be available at [http://localhost:3010](http://localhost:3010).
@@ -36,6 +36,17 @@ npm run build
 
 The build should then be available in the `dist` directory.
 
+## Previewing the Build
+
+To preview the production build locally, run:
+
+```shell
+npm run preview
+```
+
+This will serve the contents of the `dist` directory using Vite’s preview server, which simulates
+how the app will behave in production.
+
 [nodejs-prebuilt-installer]: https://nodejs.org/en/download/prebuilt-installer
 [nvm]: https://github.com/nvm-sh/nvm
 [nvm-windows]: https://github.com/coreybutler/nvm-windows

docs/src/dev-guide/coding-guidelines.md

@@ -3,8 +3,31 @@
 This project adheres to YScope's [contribution guidelines][yscope-guidelines] as well as the
 project-specific guidelines below.
 
+# Web workers
+
+## Importing web workers
+
+When importing web worker files, use Vite's `?worker` query suffix syntax:
+
+```ts
+import MainWorker from "../services/MainWorker.worker?worker";
+
+const worker = new MainWorker();
+```
+
+This special syntax tells Vite to transform the import as a web worker constructor. See
+[Vite's web worker documentation][vite-worker-query-suffix] for more details.
+
 # Naming
 
+## Web worker files
+
+Name web worker files with the extension, `.worker.ts`. This is to:
+
+* follow standard practices.
+* allow [eslint.config.mjs][eslint-config-mjs] to ignore `.worker.ts` files, suppressing
+  `eslint-plugin-import:import/default` errors caused by Vite's `?worker` import syntax.
+
 ## Index variables
 
 To differentiate variables that use different starting indexes (0 vs. 1), use the following naming
@@ -30,4 +53,6 @@ To avoid including a state variable in a React Hook's dependency array, you can
 the state variable with an additional `Ref` suffix. E.g., `logEventNumRef` is the reference variable
 that corresponds to the `logEventNum` state variable.
 
+[eslint-config-mjs]: https://github.com/y-scope/yscope-log-viewer/blob/main/eslint.config.mjs
+[vite-worker-query-suffix]: https://vite.dev/guide/features.html#import-with-query-suffixes
 [yscope-guidelines]: https://docs.yscope.com/dev-guide/contrib-guides-overview.html

docs/src/dev-guide/index.md

@@ -35,6 +35,7 @@ Docs about the viewer's design.
 :hidden:
 
 building-getting-started
+optimization-guide
 :::
 
 :::{toctree}

docs/src/dev-guide/optimization-guide.md

@@ -0,0 +1,26 @@
+# Optimization guide
+
+This doc outlines strategies and tools used to optimize the build's size and load time.
+
+## Bundle analysis
+
+To generate a bundle analysis report, run:
+
+```shell
+# You may be prompted to install `vite-bundle-visualizer`. Accept the prompt to install it.
+npm run analyze:size
+```
+
+This will use [`vite-bundle-visualizer`][vite-bundle-visualizer] to generate an interactive visual
+breakdown of bundle contents, helping identify large dependencies and optimization opportunities.
+
+## Future strategies
+
+The following optimization strategies are planned for the future:
+
+* **Code splitting**: We can split the code into smaller chunks to improve load time, especially
+  when using lazy loading.
+* **Lazy loading**: We can load components or modules only when they are needed. This can be
+  achieved by using dynamic imports or React's `lazy()` and `Suspense` features.
+
+[vite-bundle-visualizer]: https://www.npmjs.com/package/vite-bundle-visualizer

eslint.config.mjs

@@ -2,8 +2,7 @@ import CommonConfig from "eslint-config-yscope/CommonConfig.mjs";
 import JestConfig from "eslint-config-yscope/JestConfig.mjs";
 import ReactConfigArray from "eslint-config-yscope/ReactConfigArray.mjs";
 import StylisticConfigArray from "eslint-config-yscope/StylisticConfigArray.mjs";
-import TsConfigArray from "eslint-config-yscope/TsConfigArray.mjs";
-import Globals from "globals";
+import TsConfigArray, {createTsConfigOverride} from "eslint-config-yscope/TsConfigArray.mjs";
 
 
 const EslintConfig = [
@@ -14,7 +13,24 @@ const EslintConfig = [
         ],
     },
     CommonConfig,
+
     ...TsConfigArray,
+    createTsConfigOverride(
+        [
+            "src/**/*.ts",
+            "src/**/*.tsx",
+            "test/**/*.ts",
+        ],
+        "tsconfig.app.json"
+    ),
+    createTsConfigOverride(
+        [
+            "jest.config.ts",
+            "vite.config.ts",
+        ],
+        "tsconfig.node.json"
+    ),
+
     ...StylisticConfigArray,
     ...ReactConfigArray,
     {
@@ -41,13 +57,11 @@ const EslintConfig = [
                 },
             ],
         },
-    },
-    {
-        files: ["webpack.*.js"],
-        languageOptions: {
-            globals: {
-                ...Globals.node,
-            },
+        settings: {
+            // Rule "import/default" complains on Vite's web worker import directives.
+            "import/ignore": [
+                "\\.worker",
+            ],
         },
     },
     {

public/index.html renamed to index.html

@@ -1,12 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
     <title>Log Viewer</title>
-    <meta charset="utf-8">
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="description" content="YScope Log Viewer">
     <meta name="keywords"
           content="yscope clp debug debugging large log logs s3 scanner viewer vscode">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" crossorigin href="https://fonts.gstatic.com">
     <link rel="stylesheet"
@@ -16,5 +17,6 @@
 </head>
 <body>
 <div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
 </body>
 </html>

jest.config.ts

@@ -1,5 +1,5 @@
-import os from "node:os";
-import pathPosix from "node:path/posix";
+import * as os from "node:os";
+import * as pathPosix from "node:path/posix";
 
 import type {Config} from "jest";