Created
September 18, 2020 22:16
-
-
Save zachreizner/69dd97ddfed44c6b0e89ab9f85b1579b to your computer and use it in GitHub Desktop.
How to use web-sys + winit and build with wasm-bindgen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fn main() { | |
let event_loop = EventLoop::new(); | |
let window = WindowBuilder::new() | |
.with_resizable(false) | |
.with_inner_size(winit::dpi::PhysicalSize::<u32>::new(1024, 576)) | |
.build(&event_loop) | |
.unwrap(); | |
std::panic::set_hook(Box::new(console_error_panic_hook::hook)); | |
console_log::init().expect("could not initialize logger"); | |
use winit::platform::web::WindowExtWebSys; | |
// On wasm, append the canvas to the document body | |
web_sys::window() | |
.and_then(|win| win.document()) | |
.and_then(|doc| doc.body()) | |
.and_then(|body| { | |
body.append_child(&web_sys::Element::from(window.canvas())) | |
.ok() | |
}) | |
.expect("couldn't append canvas to document body"); | |
event_loop.run(move |event, _, control_flow| { | |
// handle events | |
}); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> | |
</head> | |
<body> | |
<script type="module"> | |
// Replace program.js with the name of your crate. | |
import(`./program.js`).then((module) => module.default()); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/bash | |
# Place this file in the same directory as your Cargo.toml. | |
# Use `cargo install --version 0.2.64 wasm-bindgen-cli` with the version that matches that of wasm-bindgen in your | |
# Cargo.toml to prepare your system to use this script. The wasm-bindgen program must be in your $PATH. | |
set -e | |
cd "$(dirname "$0")" | |
OUT_DIR=/tmp/web_build | |
PUBLIC_DIR="${OUT_DIR}/public" | |
TARGET=wasm32-unknown-unknown | |
RUSTFLAGS=--cfg=web_sys_unstable_apis cargo build --target "${TARGET}" --target-dir "${OUT_DIR}" $@ | |
PROFILE="debug" | |
if [[ $* == *--release* ]]; then | |
PROFILE="release" | |
fi | |
# Replace program.wasm with the name of your crate. | |
wasm-bindgen --out-dir "${PUBLIC_DIR}" --web "${OUT_DIR}/${TARGET}/${PROFILE}"/program.wasm | |
# Ensure run.html is in the same directory as this program so that we may copy it to PUBLIC_DIR. | |
cp ./run.html "${PUBLIC_DIR}/index.html" | |
# Assume we are using python3 | |
python -m http.server --directory "${PUBLIC_DIR}" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment