From 5c48292707ef34ba5451f33be5bc6390bae676d0 Mon Sep 17 00:00:00 2001 From: Sebastian Zivota Date: Tue, 12 May 2020 19:44:34 +0200 Subject: [PATCH 1/2] Expanded getting started/project setup/wasm-pack docs --- .../project-setup/using-wasm-pack.md | 62 ++++++++++++++++++- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/src/getting-started/project-setup/using-wasm-pack.md b/src/getting-started/project-setup/using-wasm-pack.md index c53b4d4..0690718 100644 --- a/src/getting-started/project-setup/using-wasm-pack.md +++ b/src/getting-started/project-setup/using-wasm-pack.md @@ -6,12 +6,60 @@ This tool was created by the Rust / Wasm Working Group and is the most actively Note that the crate-type in your `Cargo.toml` will need to be `cdylib` when using `wasm-pack` {% endhint %} -### Install +### Install wasm-pack ```bash cargo install wasm-pack ``` +### Set up your project + +{% hint style="info" %} +If you start from the [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) template, these setup steps are already taken care of. +{% endhint %} + +* Add a minimal `index.html` file to your project root: +```html + + + + + Yew + + + + + +``` + +* Add a `main.js` file with these contents to your project root: +```javascript +import init, { run_app } from './pkg/myapp.js'; +async function main() { + await init('/pkg/myapp_bg.wasm'); + run_app(); +} +main() +``` + +* Add `wasm-bindgen` as a dependency in `Cargo.toml`: +```toml +[dependencies] +wasm-bindgen = "^0.2" +``` + +* Add a `run_app` function to `lib.rs`: +```rust +use wasm_bindgen::prelude; + +#[wasm_bindgen] +pub fn run_app() -> Result<(), JsValue> { + yew::start_app::(); + + Ok(()) +} +``` + ### Build This command will produce a bundle in the `./pkg` directory with your app's compiled WebAssembly along with a JavaScript wrapper which can be used to start your application. @@ -22,12 +70,20 @@ wasm-pack build --target web ### Bundle -For more information on Rollup visit this [guide](https://rollupjs.org/guide/en/#quick-start) +You need the `wasm` plugin for `rollup`: ```bash -rollup ./main.js --format iife --file ./pkg/bundle.js +npm install @rollup/plugin-wasm --save-dev ``` +Now you can bundle your application: + +```bash +rollup ./main.js --format iife --plugin wasm --file ./pkg/bundle.js +``` + +For more information on Rollup visit this [guide](https://rollupjs.org/guide/en/#quick-start). + ### Serve Feel free to use your preferred server. Here we use a simple python server to serve to [http://\[::1\]:8000](http://[::1]:8000). From 0de0a87a190a943e99810ed639e2757ac9b53b15 Mon Sep 17 00:00:00 2001 From: Sebastian Zivota Date: Wed, 13 May 2020 14:57:47 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=E2=80=9Cstart=20from=E2=80=9D=20=E2=86=92?= =?UTF-8?q?=20=E2=80=9Cuse=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/getting-started/project-setup/using-wasm-pack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/getting-started/project-setup/using-wasm-pack.md b/src/getting-started/project-setup/using-wasm-pack.md index 0690718..179b8be 100644 --- a/src/getting-started/project-setup/using-wasm-pack.md +++ b/src/getting-started/project-setup/using-wasm-pack.md @@ -15,7 +15,7 @@ cargo install wasm-pack ### Set up your project {% hint style="info" %} -If you start from the [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) template, these setup steps are already taken care of. +If you use the [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) template, these setup steps are already taken care of. {% endhint %} * Add a minimal `index.html` file to your project root: