make wasm-bindgen and macroquad compatible

Based on not-fl3/macroquad#212 (comment)
rlane · Jul 10, 2021 · bd8d128 · bd8d128
1 parent 243e765
commit bd8d128
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 /target
+/wbindgen
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -10,6 +10,17 @@ macroquad = "0.3.6"
 rapier2d-f64 = "0.9"
 crossbeam = "0.8"
 oorandom = "11.1.3"
+wasm-bindgen = "0.2.74"
+
+[dependencies.web-sys]
+version = "0.3.4"
+features = [
+  'Document',
+  'Element',
+  'HtmlElement',
+  'Node',
+  'Window',
+]
 
 [dev-dependencies]
 criterion = { version = "0.3", features = ["html_reports"] }

diff --git a/www/serve.sh → scripts/serve.sh b/www/serve.sh → scripts/serve.sh
@@ -1,6 +1,5 @@
 #!/bin/bash -eux
 cd $(realpath $(dirname $0))/..
-cargo build --target wasm32-unknown-unknown
-cp target/wasm32-unknown-unknown/debug/oort.wasm www/
+./scripts/wasm-bindgen-macroquad.sh oort
 which basic-http-server || cargo install basic-http-server
 basic-http-server www
diff --git a/scripts/wasm-bindgen-macroquad.sh b/scripts/wasm-bindgen-macroquad.sh
@@ -0,0 +1,94 @@
+#!/usr/bin/env bash
+
+set -e
+
+HELP_STRING=$(cat <<- END
+	usage: build_wasm.sh PROJECT_NAME [--release]
+
+	Build script for combining a Macroquad project with wasm-bindgen,
+	allowing integration with the greater wasm-ecosystem.
+
+	example: build_wasm.sh flappy-bird
+
+	This'll go through the following steps:
+
+	    1. Build as target 'wasm32-unknown-unknown'
+	    2. Create the directory 'wbindgen' if it doesn't already exist
+	    3. Run wasm-bindgen with output into the wbindgen directory
+	    4. Apply patches to the output js file (detailed here: https://github.com/not-fl3/macroquad/issues/212#issuecomment-835276147)
+
+	Required arguments:
+
+	    PROJECT_NAME            The name of the artifact/target/project
+
+	Arguments:
+
+	    --release               Build in release mode
+
+
+	Author: Tom Solberg <me@sbg.dev>
+	Version: 0.1
+END
+)
+
+
+die () {
+    echo >&2 "usage: build_wasm.sh PROJECT_NAME [--release]"
+    echo >&2 "Error: $@"
+    echo >&2
+    exit 1
+}
+
+
+# Storage
+RELEASE=no
+POSITIONAL=()
+
+# Parse primary commands
+while [[ $# -gt 0 ]]
+do
+    key="$1"
+    case $key in
+        --release)
+            RELEASE=yes
+            shift
+            ;;
+
+        -h|--help)
+            echo "$HELP_STRING"
+            exit 0
+            ;;
+
+        *)
+            POSITIONAL+=("$1")
+            shift
+            ;;
+    esac
+done
+
+
+# Restore positionals
+set -- "${POSITIONAL[@]}"
+[ $# -ne 1 ] && die "too many arguments provided"
+
+PROJECT_NAME=$1
+
+EXTRA_ARGS=""
+if [ "$RELEASE" == "yes" ]; then
+    EXTRA_ARGS=" --release"
+    MODE=release
+else
+    MODE=debug
+fi
+
+# Build
+cargo build --target wasm32-unknown-unknown $EXTRA_ARGS
+
+# Generate bindgen outputs
+mkdir -p wbindgen
+wasm-bindgen --target web --out-dir wbindgen/ target/wasm32-unknown-unknown/$MODE/$PROJECT_NAME.wasm
+
+# Shim to tie the thing together
+sed -i "s/import \* as __wbg_star0 from 'env';//" wbindgen/$PROJECT_NAME.js
+sed -i "s/let wasm;/let wasm; export const set_wasm = (w) => wasm = w;/" wbindgen/$PROJECT_NAME.js
+sed -i "s/imports\['env'\] = __wbg_star0;/return imports.wbg\;/" wbindgen/$PROJECT_NAME.js
diff --git a/src/bin/oort.rs b/src/bin/oort.rs
@@ -5,6 +5,13 @@ use oort::{frame_timer, renderer, simulation};
 
 #[macroquad::main("Oort")]
 async fn main() {
+    let window = web_sys::window().expect("no global `window` exists");
+    let document = window.document().expect("should have a document on window");
+    let textbox = document
+        .get_element_by_id("textbox")
+        .expect("should have a textbox");
+    textbox.set_inner_html("Hello from Rust");
+
     let mut sim = simulation::Simulation::new();
     let collision_sound = audio::load_sound("assets/collision.wav").await.unwrap();
     let mut zoom = 0.001;

diff --git a/www/index.html b/www/index.html
@@ -7,6 +7,7 @@
   <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css" integrity="sha512-Aplc5M1v/ytxu11jVmWdmKQLn3SLeNHcv8ii1tWmMl61RFoGC5AXM1qSVDIpQorqQmY9FmO1U2Mw1PopeSCGrA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
+  <pre id="textbox" width=400 height=100>empty textbox</pre>
   <canvas id="glcanvas" tabindex="1"></canvas>
   <div id="editor"></div>
   <script>
@@ -33,6 +34,22 @@
     });
   </script>
   <script src="mq_js_bundle.js"></script>
-  <script>load("oort.wasm");</script>
+  <script type="module">
+    import init, { set_wasm } from "./wbindgen/oort.js";
+
+    async function run() {
+      let wbg = await init();
+
+      miniquad_add_plugin({
+        register_plugin: (a) => (a.wbg = wbg),
+        on_init: () => set_wasm(wasm_exports),
+        version: "0.0.1",
+        name: "wbg",
+      });
+
+      load("./wbindgen/oort_bg.wasm");
+    }
+    run();
+  </script>
 </body>
 </html>
diff --git a/www/wbindgen b/www/wbindgen
@@ -0,0 +1 @@
+../wbindgen