language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-01 14:21:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Changes to the WASM stage of the Rust quickstart

Browse source
This commit is contained in:
Chris Chinchilla 2024-03-11 17:18:29 +01:00 • committed by Olivier Goffart
parent 80b2ac1375
commit 0409cb0140
1 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/tutorial/rust/src/running_in_a_browser.md
View file

@ -3,7 +3,7 @@
# Running In A Browser Using WebAssembly # Running In A Browser Using WebAssembly
The tutorial so far used `cargo run` to build and run the code as a native application. The tutorial so far used `cargo run` to build and run the code as a native application.
Native applications are the primary target of the Slint framework, but we also support WebAssembly Native applications are the primary target of the Slint framework, but it also supports WebAssembly
for demonstration purposes. This section uses the standard rust tool `wasm-bindgen` and for demonstration purposes. This section uses the standard rust tool `wasm-bindgen` and
`wasm-pack` to run the game in the browser. Read the [wasm-bindgen documentation](https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html) `wasm-pack` to run the game in the browser. Read the [wasm-bindgen documentation](https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html)
for more about using wasm and rust. for more about using wasm and rust.
@ -14,7 +14,7 @@ Install `wasm-pack` using cargo:
cargo install wasm-pack cargo install wasm-pack
``` ```
Edit the `Cargo.toml` to add the dependencies. Edit the `Cargo.toml` file to add the dependencies.
```toml ```toml
[target.'cfg(target_arch = "wasm32")'.dependencies] [target.'cfg(target_arch = "wasm32")'.dependencies]
@ -26,7 +26,7 @@ getrandom = { version = "0.2.2", features = ["js"] }
when compiling for the wasm32 architecture. Note that the `rand` dependency is now duplicated, when compiling for the wasm32 architecture. Note that the `rand` dependency is now duplicated,
to enable the `"wasm-bindgen"` feature. to enable the `"wasm-bindgen"` feature.
While you are editing the `Cargo.toml``, make one last change. To turn the binary into While you are editing the `Cargo.toml`, make one last change. To turn the binary into
a library by adding the following: a library by adding the following:
```toml ```toml
@ -35,7 +35,7 @@ path = "src/main.rs"
crate-type = ["cdylib"] crate-type = ["cdylib"]
``` ```
This is needed because wasm-pack requires Rust to generate a `"cdylib"`. This is because wasm-pack requires Rust to generate a `"cdylib"`.
You also need to change `main.rs` by adding the `wasm_bindgen(start)` You also need to change `main.rs` by adding the `wasm_bindgen(start)`
attribute to the `main` function and export it with the `pub` keyword: attribute to the `main` function and export it with the `pub` keyword:
@ -48,11 +48,11 @@ pub fn main() {
} }
``` ```
Now, you can compile the program with `wasm-pack build --release --target web`. This Compile the program with `wasm-pack build --release --target web`. This
creates a `pkg` directory containing several files, including a `.js` file creates a `pkg` directory containing several files, including a `.js` file
named after the program name that you need to import into an HTML file. named after the program name that you need to import into an HTML file.
Create a minimal `index.html` that declares a `<canvas>` element for rendering and loads the generated wasm Create a minimal `index.html` in the top level of the project that declares a `<canvas>` element for rendering and loads the generated wasm
file. The Slint runtime expects the `<canvas>` element to have the id `id = "canvas"`. file. The Slint runtime expects the `<canvas>` element to have the id `id = "canvas"`.
(Replace `memory.js` with the correct file name). (Replace `memory.js` with the correct file name).
@ -71,11 +71,11 @@ file. The Slint runtime expects the `<canvas>` element to have the id `id = "can
``` ```
Unfortunately, loading ES modules isn't allowed for files on the file system when accessed from a Unfortunately, loading ES modules isn't allowed for files on the file system when accessed from a
`file://` URL, so you can't simply load the index.html. Instead, you need to serve it through a web server. `file://` URL, so you can't load the `index.html`. Instead, you need to serve it through a web server.
For example, using Python, by running: For example, using Python, by running:
```sh ```sh
python3 -m http.server python3 -m http.server
``` ```
And now you can now access the game at [http://localhost:8000](http://localhost:8000/). Now you can access the game at [http://localhost:8000](http://localhost:8000/).