https://github.com/jonasleonhard/wasm-journey
Project where i experiment and learn WASM compiled with Rust
https://github.com/jonasleonhard/wasm-journey
html javascript rust vite wasm wasm-bindgen wasm-pack web-sys
Last synced: 6 months ago
JSON representation
Project where i experiment and learn WASM compiled with Rust
- Host: GitHub
- URL: https://github.com/jonasleonhard/wasm-journey
- Owner: JonasLeonhard
- Created: 2023-06-23T14:56:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T14:16:05.000Z (about 2 years ago)
- Last Synced: 2025-02-17T20:45:17.050Z (8 months ago)
- Topics: html, javascript, rust, vite, wasm, wasm-bindgen, wasm-pack, web-sys
- Language: Rust
- Homepage:
- Size: 4.75 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Description
This projects contains my experiments for learning WebAssembly with Rust.
## Status
- [ ] _in progress_
- [x] _finished_
- [ ] _no longer continued_
# Installation
- Rust (rustup -> rustc, cargo)
- wasm-pack (https://rustwasm.github.io/wasm-pack/installer/)
- optional: cargo generate for ('cargo install cargo-generate' for 'cargo generate --git https://github.com/rustwasm/wasm-pack-template')
or a perhand setup: cargo new --lib hello-wasm (see. https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm)
# Build a Project:
To build a project, checkout its readme.md file.
Mostly:
- wasm-pack build --target web
- wasm-pack build --target nodejs
- wasm-pack build --target bundler
And then serving the html via serve or a bundler like vite/webpack...
# Loading Wasm web
- now you can open the generated /pkg file in the browser:
# wasm-game-of-life
A wasm game of life inplementation, with drawing, zooming, starting and stopping the rendering.
# hello-wasm
A minimal example of 'wasm-pack build --web' loaded inside vanilla javascript calling javascripts alert funktion from WebAssembly using wasm_bindgen
```rust
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
pub fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {name}!"));
}
```
# hello-wasm-bundler
A minimal exampe of 'wasm-pack build --bundler' loaded inside of a vite project. Minimal DOMManipulation example using web_sys wasm_bindgen bindingsweb-sis
```rust
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
pub fn alert(s: &str); // bind to the browsers javascript alert function
}
#[wasm_bindgen]
pub fn greet(name: &str) -> Result<(), JsValue> {
alert(&format!(
"Hello, {name}! - lets insert something to the dom..."
));
// the web_sys crate contains predefined extern "C" byindings to most existing web-apis like
// window, document, body, etc.
let window = web_sys::window().expect("no global `window` exists");
let document = window.document().expect("should have a document on window");
let body = document.body().expect("document should have a body");
// Manufacture the element we're gonna append
let val = document.create_element("p")?;
val.set_inner_html(&format!("Hello from Rust: {name}!"));
body.append_child(&val)?;
Ok(())
}
```
# Resources
Those are beatiful tutorials i used to get started:
- https://rustwasm.github.io/book/
- https://rustwasm.github.io/docs/wasm-bindgen/
- https://rustwasm.github.io/docs/wasm-pack/
- https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm