Move to vite for example application

Webpack has been a bit painful to manage. Vite has a nice TypeScript starter template. This now works with the TypeScript definitions exported from the WASM module.
tangibl · Jun 13, 2023 · 62215c9 · 62215c9
1 parent 9fed461
commit 62215c9
Show file tree

Hide file tree

Showing 13 changed files with 1,042 additions and 6,630 deletions.
diff --git a/www/.gitignore b/www/.gitignore
@@ -1,2 +1,24 @@
-dist
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/www/README.md b/www/README.md
@@ -1,4 +1,4 @@
-# TopCodes WASM Example
+# TopCode WASM Example
 
 This sub-project allows for faster iteration during development. It does not
 currently serve as a proper integration test.
@@ -7,7 +7,5 @@ To get started, run:
 
 ```sh
 npm install
-npm run start
-```
-
-The Webpack server will run on http://localhost:8080.
+npm run dev 
+```
diff --git a/www/bootstrap.js b/www/bootstrap.js
diff --git a/www/index.html b/www/index.html
@@ -1,43 +1,19 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
-    <title>TopCode Webcam example using WASM</title>
-    <style>
-      html, body {
-        padding: 0;
-        margin: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      body {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-      }
-
-      .video-container {
-        width: 640px;
-        height: 480px;
-      }
-
-      .video-container > * {
-        position: absolute;
-      }
-    </style>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
   </head>
   <body>
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
-    <script src="./bootstrap.js"></script>
     <div class="video-container">
       <video width="640px" height="480px"></video>
       <canvas id="annotation-canvas" width="640px" height="480px"></canvas>
       <canvas style="display: none;" id="video-canvas" width="640px" height="480px"></canvas>
     </div>
     <div id="statistics">-</div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>