Make wasm-demo work with and without npm

Author: TatriX

examples/wasm-demo/README.md

@@ -1,20 +1,46 @@
 # The Minimal Demo for Plotters + WASM
 
-You can run the demo locally using `npm`:
-```bash
-cd www
-npm install
-npm start
-```
+To build the demo you need [wasm-pack](https://rustwasm.github.io/docs/book/game-of-life/setup.html).
 
-or with the following command under this directory (Python required).
+Then you can run it locally either using `npm` and `webpack-dev-server` or
+just with static web server.
 
+The following script will install needed software and run the server via `npm`.
 ```
 ./start-server.sh
 ```
 
-For Windows users without Bash, `start-server.bat` can be used to launch the server.
+For Windows users without Bash, `start-server.bat` can be used to
+launch the server.
 
 ```
 start-server.bat
 ```
+
+## Developing with NPM
+Please use [rust-wasm guide](https://rustwasm.github.io/docs/book/game-of-life/setup.html) for initial setup .
+Then you can run the demo locally using `npm`:
+```bash
+wasm-pack build
+cd www
+npm install
+npm start
+```
+
+This will start a dev server which will automatically reload your page
+whenever you change anything in `www` directory. To update `rust` code
+call `wasm-pack build` manually.
+
+## Developing without dependenices
+If you don't want to use `npm` here's how you can run the example
+using any web server. We are using rust [basic-http-server](https://github.com/brson/basic-http-server), but
+any web server will do.
+
+```bash
+# Install web server (instead you can use your local nginx for example)
+cargo install basic-http-server
+wasm-pack build --target web # Note `--target web`
+basic-http-server
+```
+
+Then open http://127.0.0.1:4000/www

examples/wasm-demo/server.py

@@ -1,9 +1,8 @@
 if not exist "www\pkg" mkdir www\pkg
 rustup target add wasm32-unknown-unknown
-cargo build --target=wasm32-unknown-unknown --release
-wasm-bindgen --version
-if errorlevel 1 cargo install wasm-bindgen-cli
-wasm-bindgen --out-dir www\pkg --target web target\wasm32-unknown-unknown\release\wasm_demo.wasm
+wasm-pack build --release
+if errorlevel 1 cargo install wasm-pack
+wasm-pack build --release
 cd www
-echo "Goto http://localhost:8000/ to see the demo!"
-python ..\server.py
+npm install
+npm start

examples/wasm-demo/start-server.bat

@@ -6,20 +6,18 @@ mkdir -p www/pkg
 
 rustup target add wasm32-unknown-unknown
 
-if [ -z "$(cargo install --list | grep wasm-bindgen-cli)" ]
+if [ -z "$(cargo install --list | grep wasm-pack)" ]
 then
-	cargo install wasm-bindgen-cli
+	cargo install wasm-pack
 fi
 
 if [ "${CONFIG}" = "release" ]
 then
-	cargo build --target=wasm32-unknown-unknown --release
+    wasm-pack build
 else
-	cargo build --target=wasm32-unknown-unknown
+    wasm-pack build --release
 fi
 
-wasm-bindgen --out-dir www/pkg   --target web target/wasm32-unknown-unknown/${CONFIG}/wasm_demo.wasm
 cd www
-
-echo "Goto http://localhost:8000/ to see the result"
-python ../server.py
+npm install
+npm start

examples/wasm-demo/start-server.sh

@@ -1,5 +1,21 @@
-// A dependency graph that contains any wasm must all be imported
-// asynchronously. This `bootstrap.js` file does the single async import, so
-// that no one else needs to worry about it again.
-import("./index.js")
-  .catch(e => console.error("Error importing `index.js`:", e));
+init();
+
+async function init() {
+    if (typeof process == "object") {
+        // We run in the npm/webpack environment.
+        const [{Chart}, {main, setup}] = await Promise.all([
+            import("wasm-demo"),
+            import("./index.js"),
+        ]);
+        setup(Chart);
+        main();
+    } else {
+        const [{Chart, default: init}, {main, setup}] = await Promise.all([
+            import("../pkg/wasm_demo.js"),
+            import("./index.js"),
+        ]);
+        await init();
+        setup(Chart);
+        main();
+    }
+}

examples/wasm-demo/www/bootstrap.js

@@ -1,18 +1,25 @@
-import { Chart, drawPower } from "wasm-demo";
+// If you only use `npm` you can simply
+// import { Chart } from "wasm-demo" and remove `setup` call from `bootstrap.js`.
+class Chart {}
 
 const canvas = document.getElementById("canvas");
 const coord = document.getElementById("coord");
 const plotType = document.getElementById("plot-type");
 const status = document.getElementById("status");
-let chart = undefined;
 
-main();
+let chart = null;
 
-function main() {
+/** Main entry point */
+export function main() {
     setupUI();
     setupCanvas();
 }
 
+/** This function is used in `bootstrap.js` to setup imports. */
+export function setup(WasmChart) {
+    Chart = WasmChart;
+}
+
 /** Add event listeners. */
 function setupUI() {
     status.innerText = "WebAssembly loaded!";
@@ -48,7 +55,7 @@ function onMouseMove(event) {
 function updatePlot() {
     const selected = plotType.selectedOptions[0];
     status.innerText = `Rendering ${selected.innerText}...`;
-    chart = undefined;
+    chart = null;
     const start = performance.now();
     chart = (selected.value == "mandelbrot")
         ? Chart.mandelbrot(canvas)