mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-01 06:11:16 +00:00
Changes to the WASM stage of the Rust quickstart
This commit is contained in:
parent
80b2ac1375
commit
0409cb0140
1 changed files with 8 additions and 8 deletions
|
@ -3,7 +3,7 @@
|
|||
# Running In A Browser Using WebAssembly
|
||||
|
||||
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
|
||||
`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.
|
||||
|
@ -14,7 +14,7 @@ Install `wasm-pack` using cargo:
|
|||
cargo install wasm-pack
|
||||
```
|
||||
|
||||
Edit the `Cargo.toml` to add the dependencies.
|
||||
Edit the `Cargo.toml` file to add the dependencies.
|
||||
|
||||
```toml
|
||||
[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,
|
||||
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:
|
||||
|
||||
```toml
|
||||
|
@ -35,7 +35,7 @@ path = "src/main.rs"
|
|||
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)`
|
||||
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
|
||||
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"`.
|
||||
(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
|
||||
`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:
|
||||
|
||||
```sh
|
||||
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/).
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue