From a634bfcc55624689e4b79eb1c11d7ae1e8bfc54f Mon Sep 17 00:00:00 2001 From: Matthias Braun Date: Sun, 15 Jan 2023 21:08:25 +0100 Subject: [PATCH] Fix typos in hello-world.rust.en-us.md --- .../hello-world/hello-world.rust.en-us.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/examples/hello-world/hello-world.rust.en-us.md b/examples/hello-world/hello-world.rust.en-us.md index 8ec012a..2d1ce1e 100644 --- a/examples/hello-world/hello-world.rust.en-us.md +++ b/examples/hello-world/hello-world.rust.en-us.md @@ -6,25 +6,25 @@ For our first program, we will be doing a "Hello world" type of program in [Rust](https://www.rust-lang.org/) and [wasm-pack](https://github.com/rustwasm/wasm-pack). -To keep things simple with Wasm's limitations mentioned [in the introduction example](/example-redirect?exampleName=introduction&programmingLanguage=all), instead of displaying a string, we will add two numbers together and display the result. Though, it is good to keep in mind, in later examples, a lot of these limitations will be abstracted away by your WebAssembly Language of choice (In this case, Rust). It is also highly recommended you take a look at the [wasm-pack QuickStart Guide](https://github.com/rustwasm/wasm-pack#-quickstart-guide), as it will be referenced a lot in this example. +To keep things simple with Wasm's limitations mentioned [in the introduction example](/example-redirect?exampleName=introduction&programmingLanguage=all), instead of displaying a string, we will add two numbers together and display the result. It is good to keep in mind, though, that in later examples a lot of these limitations will be abstracted away by your WebAssembly language of choice (in this case, Rust). It is also highly recommended you take a look at the [wasm-pack quickstart guide](https://github.com/rustwasm/wasm-pack#-quickstart-guide), as it will be referenced a lot in this example. --- ## Project Setup -So first, Let's get [rust installed](https://www.rust-lang.org/tools/install), which includes [cargo](https://doc.rust-lang.org/cargo/index.html). Then, using cargo, let's install wasm-pack, which we will need later: +First, let's get [Rust installed](https://www.rust-lang.org/tools/install) which includes [cargo](https://doc.rust-lang.org/cargo/index.html). Then, using cargo, let's install wasm-pack, which we will need later: ```bash cargo install wasm-pack ``` -Next, let's create our rust crate in our current directory using cargo: +Next, let's create a Rust crate in our current directory using cargo: ```bash cargo init ``` -Then, let's edit our new `Cargo.toml` to implement [wasm-pack](https://github.com/rustwasm/wasm-pack#-quickstart-guide) as mentioned in their quickstart: +Then, let's edit our new `Cargo.toml` to implement [wasm-pack](https://github.com/rustwasm/wasm-pack#-quickstart-guide) as mentioned in their quickstart guide: ```toml [package] @@ -40,22 +40,22 @@ crate-type = ["cdylib"] wasm-bindgen = "0.2" ``` -Lastly, let's take a quick peek inside at the `src/` directory. Since we are building a library (lib) to be used by a larger application, **we need to rename the `src/main.rs` to `src/lib.rs`.** Go ahead and do that now before moving forward. +Lastly, we'll take a quick peek inside the `src/` directory. Since we are building a library (lib) to be used by a larger application, **we need to rename the `src/main.rs` to `src/lib.rs`.** Go ahead and do that now before moving forward. -Now that we have our project and environment setup, let's go ahead and start the actual implementation. +Now that we have our project and environment set up, on to the actual implementation. --- ## Implementation -Let's go ahead and replace `src/lib.rs` with the required `use` call as mentioned in the quickstart, as well as our add function: +In `src/lib.rs`, import the prelude of `wasm-bindgen` and define our `add` function: ```rust // The wasm-pack uses wasm-bindgen to build and generate JavaScript binding file. // Import the wasm-bindgen crate. use wasm_bindgen::prelude::*; -// Our Add function +// Our addition function // wasm-pack requires "exported" functions // to include #[wasm_bindgen] #[wasm_bindgen] @@ -64,26 +64,26 @@ pub fn add(a: i32, b: i32) -> i32 { } ``` -Then, let's compile our crate using wasm-pack, into a wasm module. Then run the following command, taking note of the [--target web](https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target). The wasm-pack tool has support for a lot of different output types, especially for bundlers like Webpack or Rollup. But, since we want an ES6 module in our case, we use the `web` target below: +Next, let's compile our crate using wasm-pack into a Wasm module. Then run the following command, taking note of the [`--target web`](https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target). The wasm-pack tool has support for a lot of different output types, especially for bundlers like Webpack or Rollup. But, since we want an ES6 module in our case, we use the `web` target below: ```bash wasm-pack build --target web ``` -This will output a `pkg/` directory containing our wasm module, wrapped in a js object. Next, lets create an `index.js` JavaScript file, and import the outputted ES6 module in our `pkg/` directory. Then, we will call our exported `add()` function: +This will output a `pkg/` directory containing our Wasm module, wrapped in a JS object. Next, let's create an `index.js` JavaScript file, and import the outputted ES6 module in our `pkg/` directory. Then, we will call our exported `add()` function: -> **NOTE:** In this example, we are using the exported function from the wasm module directly to help highlight the WebAssembly API. `wasm-bindgen` generates JavaScript bindings code that can be imported as an ES6 import, and is the recommended way to work with your Rust Wasm modules. These JavaScript bindings are shown in the "Passing High Level Data Types with `wasm-bindgen`" example. +> **NOTE:** In this example, we are using the exported function from the Wasm module directly to help highlight the WebAssembly API. `wasm-bindgen` generates JavaScript bindings code that can be imported as an ES6 import, and is the recommended way to work with your Rust Wasm modules. These JavaScript bindings are shown in the "Passing High Level Data Types with `wasm-bindgen`" example. ```javascript -// Import our outputted wasm ES6 module -// Which, export default's, an initialization function +// Import our outputted Wasm ES6 module +// Which exports an initialization function import init from "./pkg/hello_world.js"; const runWasm = async () => { - // Instantiate our wasm module + // Instantiate our Wasm module const helloWorld = await init("./pkg/hello_world_bg.wasm"); - // Call the Add function export from wasm, save the result + // Call the Add function export from Wasm, save the result const addResult = helloWorld.add(24, 24); // Set the result onto the body @@ -92,7 +92,7 @@ const runWasm = async () => { runWasm(); ``` -Lastly, lets load our ES6 Module, `index.js` Javascript file in our `index.html`: +Lastly, let's load our ES6 Module, `index.js` JavaScript file in our `index.html`: ```html @@ -106,7 +106,7 @@ Lastly, lets load our ES6 Module, `index.js` Javascript file in our `index.html` ``` -And we should have a working Wasm Add (Hello World) program! Congrats! +And we should have a working Wasm program that adds (Hello World)! Congrats! You should have something similar to the demo ([Source Code](/source-redirect?path=examples/hello-world/demo/rust)) below: @@ -114,4 +114,4 @@ You should have something similar to the demo ([Source Code](/source-redirect?pa -Next let's take a deeper look at WebAssembly [Exports](/example-redirect?exampleName=exports). +Next, let's take a deeper look at WebAssembly [exports](/example-redirect?exampleName=exports).