Build react components with wasm modules (currently only with rust).
Install rust nightly and set up a new rust library. Make sure you set the
crate-type to "cdylib" and add both wasm-bindgen and react-wasm-bridge
as dependencies.
Your module should export a function called render that takes two parameters:
state and factory.
#[wasm_bindgen]
pub fn render(state: &State, factory: &Builder) -> JsValue {
...
}
state is an object that holds the component props. You'll use factory to
generate elements and return a root elem (details TBD).
Build the module (cargo +nightly build --target wasm32-unknown-unknown) and
run it through wasm-bindgen (wasm-bindgen target/wasm32-unknown-unknown/$(MODE)/hello.wasm --out-dir . or similar).
Add react-wasm-bridge to your react project. Then load your wasm module and
pass it to the <ReactWasmBridge/> component as the module prop. Any other
props will be passed to the underlying rust module into its render function
(strings and numbers only).
To build a transpiled version of the library, make sure you have all of these things:
- yarn
- rust nightly
- wasm-bindgen
- Firefox
and run make. The transpiled version will be output into dist/.
Run make examples and it'll build all of them. Or just go into each example
directory to make them individually.
By default, the examples build in debug mode. Use make run MODE=release and
it'll build in release mode. If you've already built it, you'll have to make clean or it won't rebuild.