feat: setup local demo page with webpack

eigerco · Sep 23, 2024 · 5d9cdc0 · 5d9cdc0
1 parent f310ba8
commit 5d9cdc0
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 37 deletions.
diff --git a/cli/js/.gitignore b/cli/js/.gitignore
@@ -0,0 +1,4 @@
+/node_modules
+/package-lock.json
+/dist/*
+!/dist/index.html
diff --git a/cli/js/README.md b/cli/js/README.md
@@ -0,0 +1,13 @@
+```bash
+wasm-pack build --release --target web node-wasm
+wasm-pack pack
+
+cd node-wasm/js
+npm pack
+
+cd cli/js
+npm i
+npm run build
+
+cargo run --features browser-node -- browser
+```
diff --git a/cli/static/index.html → cli/js/dist/index.html b/cli/static/index.html → cli/js/dist/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Lumina</title>
-  <script type="module" src="/js/run_node.js"></script>
+  <script src="/main.js"></script>
   <style>
     :root {
       --bg1: #121212;

diff --git a/cli/static/run_node.js → cli/js/index.js b/cli/static/run_node.js → cli/js/index.js
@@ -1,6 +1,6 @@
 Error.stackTraceLimit = 99; // rust stack traces can get pretty big, increase the default
 
-import init, { NodeConfig, NodeClient } from "/wasm/lumina_node_wasm.js";
+import { spawnNode, NodeConfig } from "lumina-node";
 
 async function fetch_config() {
   const response = await fetch('/cfg.json');
@@ -106,14 +106,21 @@ function log_event(event) {
 }
 
 async function main(document, window) {
-  await init();
+  window.node = await spawnNode();
 
-  window.node = await new NodeClient("/js/worker.js");
+  console.log("AAAAAA");
+  function timeout(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  await timeout(3000);
 
-  window.events = await window.node.events_channel();
+  console.log("AAAAAA");
+  window.events = await window.node.eventsChannel();
+  console.log("AAAAAA");
   window.events.onmessage = (event) => {
     log_event(event);
   };
+  console.log("AAAAAA");
 
   bind_config(await fetch_config());
 

diff --git a/cli/js/package.json b/cli/js/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "webpack-demo",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "lumina-node": "file:../../node-wasm/js/lumina-node-0.2.0.tgz",
+    "lumina-node-wasm": "file:../../node-wasm/pkg/lumina-node-wasm-0.2.0.tgz"
+  },
+  "devDependencies": {
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2"
+  }
+}
diff --git a/cli/js/webpack.config.js b/cli/js/webpack.config.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.wasm$/,
+        type: 'asset/resource',
+      },
+    ]
+  }
+};
diff --git a/cli/src/server.rs b/cli/src/server.rs
@@ -26,11 +26,7 @@ struct WasmNodeArgs {
 }
 
 #[derive(RustEmbed)]
-#[folder = "$WASM_NODE_OUT_DIR"]
-struct WasmPackage;
-
-#[derive(RustEmbed)]
-#[folder = "static"]
+#[folder = "js/dist"]
 struct StaticResources;
 
 #[derive(Debug, Args)]
@@ -63,8 +59,7 @@ pub(crate) async fn run(args: Params) -> Result<()> {
 
     let app = Router::new()
         .route("/", get(serve_index_html))
-        .route("/js/*path", get(serve_embedded_path::<StaticResources>))
-        .route("/wasm/*path", get(serve_embedded_path::<WasmPackage>))
+        .route("/*path", get(serve_embedded_path::<StaticResources>))
         .route("/cfg.json", get(serve_config))
         .with_state(state);
 

diff --git a/cli/static/worker.js b/cli/static/worker.js
diff --git a/node-wasm/js/index.js b/node-wasm/js/index.js
@@ -4,10 +4,10 @@ import init, { NodeClient } from "lumina-node-wasm"
 * Spawn a worker running lumina node and get the `NodeClient` connected to it.
 */
 export async function spawnNode() {
-    await init();
-    let worker = new Worker(new URL("worker.js", import.meta.url));
-    let client = await new NodeClient(worker);
-    return client;
+  await init();
+  let worker = new Worker(new URL("worker.js", import.meta.url));
+  let client = await new NodeClient(worker);
+  return client;
 }
 
 export * from "lumina-node-wasm";