language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-09-29 13:24:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Use Rust project templates as basis for current tutorial (#4488)

Browse source 
Uses the Rust project template to refactor the tutorial and numerous grammar and language changes.
This commit is contained in:
Chris Chinchilla 2024-02-02 16:55:11 +01:00 • committed by GitHub
parent 858ed639ec
commit ba98a89e9b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 169 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/tutorial/rust/src/conclusion.md
View file

@ -1,13 +1,14 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Conclusion
In this tutorial, we have demonstrated how to combine some built-in Slint elements with Rust code to build a little
game. There are many more features that we haven't talked about, such as layouts, widgets, or styling.
This tutorial showed you how to combine built-in Slint elements with Rust code to build a
game. There is much more to Slint, such as layouts, widgets, or styling.
We recommend the following links to continue:
* [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected a few demos and examples. These are a great starting point to learn how to use many Slint features.
* [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
* [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
* [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load `.slint` files.
- [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected several demos and examples. These are a great starting point to learn how to use many Slint features.
- [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
- [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example and you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
- [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
- [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load Slint files.

32
docs/tutorial/rust/src/creating_the_tiles_from_rust.md
View file

@ -1,30 +1,34 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Creating The Tiles From Rust
The tiles in the game should have a random placement. We'll need to add the `rand` dependency to
`Cargo.toml` for the randomization, using the `cargo` command.
This step places the game tiles randomly. The code uses the `rand` dependency for the randomization. Add it to the `Cargo.toml` file using the `cargo` command.
```sh
cargo add rand@0.8
```
What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
We'll do so by accessing the `memory_tiles` property through the Rust code. For each top-level property,
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
`VecModel` allows us to make modifications and we can use it to replace the static generated model.
We modify the main function like so:
Change the main function to the following:
```rust,noplayground
{{#include main_tiles_from_rust.rs:tiles}}
```
Note that we clone the `tiles_model` because we'll use it later to update the game logic.
The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the Rust code.
Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure
the icons when clicking. There's only one last aspect missing now, the rules for the game.
For each top-level property,
Slint generates a getter and a setter function. In this case `get_memory_tiles` and `set_memory_tiles`.
Since `memory_tiles` is a Slint array, it's represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
You can't change the model generated by Slint, but you can extract the tiles from it and put them
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
`VecModel` lets you make changes and you can use it to replace the static generated model.
Note that you clone the `tiles_model` because you'll use it later to update the game logic.
Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
the icons when a player clicks on them.
There's one last aspect missing now, the rules for the game.
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>

33
docs/tutorial/rust/src/from_one_to_multiple_tiles.md
View file

@ -1,34 +1,39 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# From One To Multiple Tiles
After modeling a single tile, let's create a grid of them. For the grid to be our game board, we need two features:
After modeling a single tile, this step creates a grid of them. For the grid to be a game board, you need two features:
1. A data model: This shall be an array where each element describes the tile data structure, such as the
url of the image, whether the image shall be visible and if this tile has been solved. We modify the model
from Rust code.
1. A way of creating many instances of the tiles, with the above `.slint` markup code.
1. **A data model**: An array created as a Rust model, where each element describes the tile data structure, such as:
In Slint we can declare an array of structures using brackets, to create a model. We can use the <span class="hljs-keyword">for</span> loop
to create many instances of the same element. In `.slint` the for loop is declarative and automatically updates when
the model changes. We instantiate all the different <span class="hljs-title">MemoryTile</span> elements and place them on a grid based on their
index with a little bit of spacing between the tiles.
- URL of the image
- Whether the image is visible
- If the player has solved this tile.
First, we copy the tile data structure definition and paste it at top inside the `slint!` macro:
2. A way of creating multiple instances of the tiles.
With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
to create multiple instances of the same element.
With Slint the for loop is declarative and automatically updates when
the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
index with spacing between the tiles.
First, add the tile data structure definition at the top of the `slint!` macro:
```slint
{{#include main_multiple_tiles.rs:tile_data}}
```
Next, we replace the _export component <span class="hljs-title">MainWindow</span> inherits Window { ... }_ section at the bottom of the `slint!` macro with the following snippet:
Next, replace the _export component <span class="hljs-title">MainWindow</span> inherits Window { ... }_ section at the bottom of the `slint!` macro with the following:
```slint
{{#include main_multiple_tiles.rs:main_window}}
```
The <code><span class="hljs-keyword">for</span> tile\[i\] <span class="hljs-keyword">in</span> memory_tiles:</code> syntax declares a variable `tile` which contains the data of one element from the `memory_tiles` array,
and a variable `i` which is the index of the tile. We use the `i` index to calculate the position of tile based on its row and column,
using the modulo and integer division to create a 4 by 4 grid.
and a variable `i` which is the index of the tile. The code uses the `i` index to calculate the position of a tile, based on its row and column,
using modulo and integer division to create a 4 by 4 grid.
Running this gives us a window that shows 8 tiles, which can be opened individually.
Running the code opens a window that shows 8 tiles, which a player can open individually.
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>

46
docs/tutorial/rust/src/game_logic_in_rust.md
View file

@ -1,44 +1,48 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Game Logic In Rust
We'll implement the rules of the game in Rust as well. The general philosophy of Slint is that merely the user
interface is implemented in the `.slint` language and the business logic in your favorite programming
language. The game rules shall enforce that at most two tiles have their curtain open. If the tiles match, then we
consider them solved and they remain open. Otherwise we wait for a little while, so the player can memorize
the location of the icons, and then close them again.
This step implements the rules of the game in Rust as well.
We'll modify the `.slint` markup inside the `slint!` macro to signal to the Rust code when the user clicks on a tile.
Two changes to <span class="hljs-title">MainWindow</span> are needed: We need to add a way for the MainWindow to call to the Rust code that it should
check if a pair of tiles has been solved. And we need to add a property that Rust code can toggle to disable further
tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed! First, we paste
the callback and property declarations into <span class="hljs-title">MainWindow</span>:
Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
language.
The game rules enforce that at most two tiles have their curtain open. If the tiles match, then the game
considers them solved and they remain open. Otherwise, the game waits briefly so the player can memorize
the location of the icons, and then closes the curtains again.
Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the Rust code when the user clicks on a tile.
```slint
{{#include main_game_logic_in_rust.rs:mainwindow_interface}}
```
The last change to the `.slint` markup is to act when the <span class="hljs-title">MemoryTile</span> signals that it was clicked on.
We add the following handler in <span class="hljs-title">MainWindow</span>:
This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the Rust code that it should
check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed!
The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.
Add the following handler in <span class="hljs-title">MainWindow</span>:
```slint
{{#include main_game_logic_in_rust.rs:tile_click_logic}}
```
On the Rust side, we can now add an handler to the `check_if_pair_solved` callback, that will check if
two tiles are opened. If they match, the `solved` property is set to true in the model. If they don't
match, start a timer that will close them after one second. While the timer is running, we disable every tile so
one can't click anything during this time.
On the Rust side, you can now add a handler to the `check_if_pair_solved` callback, that checks if a player opened two tiles.
If they match, the code sets the `solved` property to true in the model. If they don't
match, start a timer that closes the tiles after one second. While the timer is running, disable every tile so
a player can't click anything during this time.
Insert this code before the `main_window.run()` call:
Add this code before the `main_window.run().unwrap();` call:
```rust,noplayground
{{#include main_game_logic_in_rust.rs:game_logic}}
```
Notice that we take a [Weak](https://slint.dev/docs/rust/slint/struct.Weak) pointer of our `main_window`. This is very
important because capturing a copy of the `main_window` itself within the callback handler would result in a circular ownership.
The code uses a [Weak](https://slint.dev/docs/rust/slint/struct.Weak) pointer of the `main_window`. This is
important because capturing a copy of the `main_window` itself within the callback handler would result in circular ownership.
The `MainWindow` owns the callback handler, which itself owns a reference to the `MainWindow`, which must be weak
instead of strong to avoid a memory leak.
These were the last changes and running the result gives us a window on the screen that allows us
to play the game by the rules.
These were the last changes and running the code opens a window that allows a player to play the game by the rules.

29
docs/tutorial/rust/src/getting_started.md
View file

@ -1,30 +1,31 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Getting Started
We assume that you are a somewhat familiar with Rust, and that you know how to create a Rust application with
`cargo new`. The [Rust Getting Started Guide](https://www.rust-lang.org/learn/get-started) can help you get set up.
This tutorial assumes that you are somewhat familiar with Rust. We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for `.slint` files](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for `.slint` files](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
First, we create a new cargo project:
Before using the template, install `[cargo-generate](https://github.com/cargo-generate/cargo-generate)`:
```sh
cargo new memory
cargo install cargo-generate
```
Use the template to create a new project with the following command:
```sh
cargo generate --git https://github.com/slint-ui/slint-rust-template --name memory
cd memory
```
Then we edit `Cargo.toml` to add the slint dependency using `cargo add`:
```sh
cargo add slint@1.4.1
```
Finally we copy the hello world program from the [Slint documentation](https://slint.dev/docs/rust/slint/) into our `src/main.rs`:
Replace the contents of `src/main.rs` with the hello world program from the [Slint documentation](https://slint.dev/docs/rust/slint/):
```rust,noplayground
{{#include main_initial.rs:main}}
```
We run this example with `cargo run` and a window will appear with the green "Hello World" greeting.
Run the example with `cargo run` and a window appears with the green "Hello World" greeting.
![Screenshot of initial tutorial app showing Hello World](https://slint.dev/blog/memory-game-tutorial/getting-started.png "Hello World")
![Screenshot of an initial tutorial app showing Hello World](https://slint.dev/blog/memory-game-tutorial/getting-started.png "Hello World")

9
docs/tutorial/rust/src/ideas_for_the_reader.md
View file

@ -1,12 +1,13 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Ideas For The Reader
The game is visually a little bare. Here are some ideas how you could make further changes to enhance it:
The game is visually bare. Here are some ideas on how you could make further changes to enhance it:
- The tiles could have rounded corners, to look a little less sharp. The [border-radius](https://slint.dev/docs/slint/src/builtins/elements.html#rectangle)
property of _[Rectangle](https://slint.dev/docs/slint/src/builtins/elements#rectangle)_ can be used to achieve that.
- The tiles could have rounded corners, to look less sharp. Use the [border-radius](https://slint.dev/docs/slint/src/builtins/elements.html#rectangle)
property of _[Rectangle](https://slint.dev/docs/slint/src/builtins/elements#rectangle)_ to achieve that.
- In real world memory games, the back of the tiles often have some common graphic. You could add an image with
- In real-world memory games, the back of the tiles often have some common graphic. You could add an image with
the help of another _[Image](https://slint.dev/docs/slint/src/builtins/elements.html#image)_
element. Note that you may have to use _Rectangle_'s _clip property_
element around it to ensure that the image is clipped away when the curtain effect opens.

12
docs/tutorial/rust/src/introduction.md
View file

@ -1,15 +1,15 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Introduction
This tutorial will introduce you to the Slint UI framework in a playful way by implementing a little memory game. We're going to combine the `.slint` language for the graphics with the game rules implemented in Rust.
This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the `.slint` language for the graphics with the game rules implemented in Rust.
The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
We know that there are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
same icon. The objective is to locate all icon pairs. You can uncover two tiles at the same time. If they
aren't the same, the icons will be obscured again.
If you uncover two tiles with the same icon, then they remain visible - they're solved.
There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
same icon. The objective is to locate all icon pairs. The player can uncover two tiles at the same time. If they
aren't the same, the game obscures the icons again.
If the player uncovers two tiles with the same icon, then they remain visible - they're solved.
This is how the game looks like in action:
This is how the game looks in action:
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/memory_clip.mp4"
class="img-fluid img-thumbnail rounded"></video>

3
docs/tutorial/rust/src/main_game_logic_in_rust.rs
View file

@ -50,9 +50,8 @@ fn main() {
}
}
});
main_window.run().unwrap();
// ANCHOR_END: game_logic
main_window.run().unwrap();
}
slint::slint! {

4
docs/tutorial/rust/src/main_multiple_tiles.rs
View file

@ -8,16 +8,16 @@ fn main() {
slint::slint! {
// ANCHOR: tile_data
// Added:
struct TileData {
image: image,
image_visible: bool,
solved: bool,
}
// ANCHOR_END: tile_data
component MemoryTile inherits Rectangle {
// ANCHOR_END: tile_data
callback clicked;
in property <bool> open_curtain;
in property <bool> solved;

37
docs/tutorial/rust/src/memory_tile.md
View file

@ -1,25 +1,32 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Memory Tile
With the skeleton in place, let's look at the first element of the game, the memory tile. It will be the
visual building block that consists of an underlying filled rectangle background, the icon image. Later we'll add a
covering rectangle that acts as a curtain. The background rectangle is declared to be 64 logical pixels wide and tall,
and it's filled with a soothing tone of blue. Note how lengths in the `.slint` language have a unit, here
the `px` suffix. That makes the code easier to read and the compiler can detect when your are accidentally
mixing values with different units attached to them.
With the skeleton in place, this step looks at the first element of the game, the memory tile. It's the
visual building block that consists of an underlying filled rectangle background, the icon image. Later you'll add a
covering rectangle that acts as a curtain.
We copy the following code inside of the `slint!` macro:
You declare the background rectangle as 64 logical pixels wide and tall
and it's filled with a soothing tone of blue.
Note how lengths in the `.slint` language have a unit, here
the `px` suffix. That makes the code easier to read and the compiler can detect when you accidentally
mix values with different units attached to them.
Copy the following code inside of the `slint!` macro, replacing the current content:
```slint
{{#include main_memory_tile.rs:tile}}
{{#include main_mem ory_tile.rs:tile}}
```
Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hljs-built_in">Image</span> element that
loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
When using the `slint!` macro, the path is relative to the folder in which the Cargo.toml is located.
When using .slint files, it's relative to the folder of the .slint file containing it.
This icon and others we're going to use later need to be installed first. You can download a
[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
When using the `slint!` macro, the path is relative to the folder that contains the `Cargo.toml` file.
When using `.slint` files, it's relative to the folder of the `.slint` file containing it.
You need to install this icon and others you use later first. You can download a pre-prepared
[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) and extract it with the
following two commands:
```sh
@ -27,9 +34,9 @@ curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
unzip icons.zip
```
This should unpack an `icons` directory containing a bunch of icons.
This unpacks an `icons` directory containing several icons.
Running the program with `cargo run` gives us a window on the screen that shows the icon of a bus on a
Running the program with `cargo run` now opens a window that shows the icon of a bus on a
blue background.
![Screenshot of the first tile](https://slint.dev/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

46
docs/tutorial/rust/src/polishing_the_tile.md
View file

@ -1,36 +1,42 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Polishing the Tile
Next, let's add a curtain like cover that opens up when clicking. We achieve this by declaring two rectangles
below the <span class="hljs-built_in">Image</span>, so that they are drawn afterwards and thus on top of the image.
In this step, you add a curtain-like cover that opens when clicked. You do this by declaring two rectangles
below the <span class="hljs-built_in">Image</span>, so that Slint draws them after the Image and thus on top of the image.
The <span class="hljs-built_in">TouchArea</span> element declares a transparent rectangular region that allows
reacting to user input such as a mouse click or tap. We use that to forward a callback to the <em>MainWindow</em>
that the tile was clicked on. In the <em>MainWindow</em> we react by flipping a custom <em>open_curtain</em> property.
That in turn is used in property bindings for the animated width and x properties. Let's look at the two states a bit
more in detail:
reacting to user input such as a mouse click or tap. The element forwards a callback to the <em>MainWindow</em> indicating that a user clicked the tile.
| *open_curtain* value: | false | true |
| --- | --- | --- |
| Left curtain rectangle | Fill the left half by setting the width *width* to half the parent's width | Width of zero makes the rectangle invisible |
| Right curtain rectangle | Fill the right half by setting *x* and *width* to half of the parent's width | *width* of zero makes the rectangle invisible. *x* is moved to the right, to slide the curtain open when animated |
The <em>MainWindow</em> reacts by flipping a custom <em>open_curtain</em> property.
Property bindings for the animated width and x properties also use the custom <em>open_curtain</em> property.
In order to make our tile extensible, the hard-coded icon name is replaced with an *icon*
property that can be set from the outside when instantiating the element. For the final polish, we add a
*solved* property that we use to animate the color to a shade of green when we've found a pair, later. We
replace the code inside the `slint!` macro with the following:
The following table shows more detail on the two states:
| _open_curtain_ value: | false | true |
| ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Left curtain rectangle | Fill the left half by setting the width _width_ to half the parent's width | Width of zero makes the rectangle invisible |
| Right curtain rectangle | Fill the right half by setting _x_ and _width_ to half of the parent's width | _width_ of zero makes the rectangle invisible. _x_ moves to the right, sliding the curtain open when animated |
To make the tile extensible, replace the hard-coded icon name with an _icon_
property that can be set when instantiating the element.
For the final polish, add a
_solved_ property used to animate the color to a shade of green when a player finds a pair.
Replace the code inside the `slint!` macro with the following:
```slint
{{#include main_polishing_the_tile.rs:tile}}
```
Note the use of `root` and `self` in the code. `root` refers to the outermost
element in the component, that's the <span class="hljs-title">MemoryTile</span> in this case. `self` refers
The code uses `root` and `self`. `root` refers to the outermost
element in the component, the <span class="hljs-title">MemoryTile</span> in this case. `self` refers
to the current element.
Note that we export the <span class="hljs-title">MainWindow</span> component. This is necessary so that we can later access it
from our business logic.
The code exports the <span class="hljs-title">MainWindow</span> component. This is necessary so that you can later access it
from application business logic.
Running this gives us a window on the screen with a rectangle that opens up to show us the bus icon, when clicking on
it. Subsequent clicks will close and open the curtain again.
Running the code opens a window with a rectangle that opens up to show the bus icon when clicked. Subsequent clicks close and open the curtain again.
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>

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

@ -1,19 +1,20 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
# Running In A Browser Using WebAssembly
Right now, we used `cargo run` to build and run our program 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
for demonstration purposes. So in this section we'll use the standard rust tool `wasm-bindgen` and
`wasm-pack` to run the game in the browser. The [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html)
documentation explains all you need to know about using wasm and rust.
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.
Make sure to have `wasm-pack` installed using
Install `wasm-pack` using cargo:
```sh
cargo install wasm-pack
```
You'll need to edit your `Cargo.toml` to add the dependencies.
Edit the `Cargo.toml` to add the dependencies.
```toml
[target.'cfg(target_arch = "wasm32")'.dependencies]
@ -21,11 +22,11 @@ wasm-bindgen = { version = "0.2" }
getrandom = { version = "0.2.2", features = ["js"] }
```
The `'cfg(target_arch = "wasm32")'` ensures that these dependencies will only be active
`'cfg(target_arch = "wasm32")'` ensures that these dependencies are only active
when compiling for the wasm32 architecture. Note that the `rand` dependency is now duplicated,
in order to enable the `"wasm-bindgen"` feature.
to enable the `"wasm-bindgen"` feature.
While you are editing the Cargo.toml, one last change is needed: you need 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
@ -34,10 +35,10 @@ path = "src/main.rs"
crate-type = ["cdylib"]
```
This is required because wasm-pack require rust to generate a `"cdylib"`.
This is needed because wasm-pack requires Rust to generate a `"cdylib"`.
You also need to modify the `main.rs` by adding the `wasm_bindgen(start)`
attribute to the main function and export it with the `pub` keyword:
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:
```rust,noplayground
#[cfg_attr(target_arch = "wasm32",
@ -47,12 +48,13 @@ pub fn main() {
}
```
Now, we can compile our program with `wasm-pack build --release --target web`. This
will create a `pkg` directory containing a few files, including a `.js` file
named after your program name. We just have to import that from a HTML file. So let's create a minimal
`index.html` that declares a `<canvas>` element for rendering and loads our generated wasm
Now, you can 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
file. The Slint runtime expects the `<canvas>` element to have the id `id = "canvas"`.
(Replace `memory.js` by the correct file name).
(Replace `memory.js` with the correct file name).
```html
<html>
@ -69,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 we can't simply open the index.html. Instead we need to serve it through a web server.
For example, using Python, it's as simple as running
`file://` URL, so you can't simply 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 then you can now access the game on [http://localhost:8000](http://localhost:8000/).
And now you can now access the game at [http://localhost:8000](http://localhost:8000/).