You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* remove old files
* update counter
* update crm example
* Add readme for counter
* update custom_components
* update webgl example
* update two_apps
* update todomvc
* mark special case multithread
* update dashboard
* update examples readme
* file_upload example
* fragments example
* futures example
* game_of_life example
* inner_html example
* js_callback example
* keyed_list example
* remove large_table
* remove minimal
* mount_point example
* I can't count apparently
* nested_list example
* node_refs example
* timer example
* store example
* pub_sub example
* rip npm_and_my_sanity
* use a title:tm:
* clean up multi_thread
* fix format
* boids part 1
* boids part 2
* add workflow
See: <siku2#13>
* remove my little scratchpad again
* add boids to examples table
* runtime-generated list in nested_list example
* update workflow
* first batch of yewtil examples
* clippy "futures"
* remove old yew-router examples
* add a new router example to the main examples
* remove remaining yewtil examples
* more progress
* update for testing purposes
* author list
* improve content generation
* revert this mistake
I thought it would be great to use `unimplemented!()` in case the component doesn't have any properties.
This helps avoid the mistake of forgetting to update the change method when adding props later on.
What I didn't consider is that just because the props are () that doesn't mean that Yew isn't going to call it...
So yeah, it's still a good idea for update, but certainly not for change.
* missed a few
* turn router switch example into test
* seems to be working
* make it possible to host the router example on a sub-path
* create a 404 file for SPA
* remove the three examples and update table
* remove the 404 file because it isn't working anyway
* fix small router issue relating to the sub-path hack
In order to run the examples, we provide the `run_example.sh` script.
4
-
This script takes care of compiling the example and runs a web server for you.
5
-
All that's left is for you to play around with the examples :).
6
-
7
-
> **A note for Windows users:**<br>
8
-
> Depending on how you installed `git` you will already have a bash emulator at your disposal. This allows you to run the `run_example.sh` script (and any other bash script) normally.<br>
9
-
> See <https://gitforwindows.org/#bash> for more information.
10
-
>
11
-
> We're always trying to improve the developer experience for developers across all platforms.
12
-
> There's an ongoing effort to replace the bash scripts with a Rust command line tool ([#1418](https://github.com/yewstack/yew/issues/1418)).
13
-
> If at any point you encounter an issue, don't hesitate to ask a question or open an issue.
14
-
15
3
## Dependencies
16
4
17
-
Before we can run the examples we need to get a few things ready.
18
-
19
-
Some examples currently use `wasm-bindgen` and others use `wasm-pack`.
20
-
You can install them both using the following command:
5
+
The examples are built with [trunk](https://github.com/thedodd/trunk).
6
+
You can install it with the following command:
21
7
22
8
```bash
23
-
cargo install wasm-pack wasm-bindgen-cli
9
+
# at some point in the future, trunk should automatically download wasm-bindgen for you
10
+
cargo install trunk wasm-bindgen-cli
24
11
```
25
12
26
-
### Optional dependencies
27
-
28
-
We've written a small web server which you can use to serve the built examples. In order to
29
-
use it, you'll need to have installed Python (3.6 or greater).
30
-
You can also use a different web server, provided that it can serve static files from a directory.
31
-
32
-
> **Note:**<br>
33
-
> Some examples don't have an `index.html` file in their static directory.
34
-
> The python web server handles this by serving a default index file.
35
-
> If you aren't using it, you will need to create the index file manually.
36
-
37
-
One alternative to the built-in web server there is an extension for [Visual Studio Code](https://code.visualstudio.com/) called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
38
-
This extension is used to serve static files.
39
-
To do so, open the `index.html` file in the static directory of the example you wish to run and press "Open with Live Server" in the context menu.
|[counter](counter)| A single component which displays a stateful number. The number can be incremented and decremented using buttons | ✖ |
73
-
|[crm](crm)| See the `README` file for details | ✔ |
74
-
|[custom_components](custom_components)| Demonstrates the use of components | ✔ |
75
-
|[dashboard](dashboard)| Uses the `fetch` and `websocket` services to load external data | ✔ |
76
-
|[file_upload](file_upload)| Uses the `reader` service to read the content of user uploaded files | ✖ |
77
-
|[fragments](fragments)| Similar to the counter example but demonstrating the use of [fragments](https://yew.rs/docs/concepts/html/lists#fragments)| ✖ |
78
-
|[futures_wp](futures_wp)| Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer. | ✔ |
79
-
|[game_of_life](game_of_life)| Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)| ✖ |
80
-
|[inner_html](inner_html)| Embeds an external document as raw HTML by manually managing the element | ✖ |
81
-
|[js_callback](js_callback)| Interacts with JavaScript code | ✔ |
82
-
|[keyed_list](keyed_list)| Demonstrates how to use keys to improve the performance of lists | ✖ |
83
-
|[large_table](large_table)| Renders a big table which highlights the selected cell | ✖ |
84
-
|[minimal](minimal)| A simple button that listens to click events | ✖ |
85
-
|[minimal_wp](minimal)| Same as the minimal example but using `wasm-pack`| ✖ |
86
-
|[mount_point](mount_point)| Shows how to mount the root component to a custom element | ✖ |
87
-
|[multi_thread](multi_thread)| Demonstrates the use of Web Workers to offload computation to the background | ✔ |
88
-
|[nested_list](nested_list)| Renders a styled list which tracks hover events | ✖ |
89
-
|[node_refs](node_refs)| Uses a [`NodeRef`](https://yew.rs/docs/concepts/components/refs) to focus the input element under the cursor | ✖ |
90
-
|[npm_and_rest](npm_and_rest)| A more elaborate demonstration of the `fetch` service | ✖ |
91
-
|[pub_sub](pub_sub)| Cross-component communication using [Agents](https://yew.rs/docs/concepts/agents)| ✔ |
92
-
|[store](store)| Showcases the `yewtil::store` API | ✔ |
93
-
|[textarea](textarea)| Shows how to use the value of a textarea or input tag | ✖ |
94
-
|[timer](timer)| Demonstrates the use of the interval and timeout services | ✖ |
95
-
|[todomvc](todomvc)| Implementation of the [TodoMVC](http://todomvc.com/) app | ✔ |
96
-
|[two_apps](two_apps)| Runs two separate Yew apps at the same time | ✖ |
97
-
|[webgl](webgl)| Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew | ✔ |
|[dashboard](dashboard)| Uses the `fetch` and `websocket` services to load external data |
38
+
|[file_upload](file_upload)| Uses the `reader` service to read the content of user uploaded files |
39
+
|[futures](futures)| Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer. |
40
+
|[game_of_life](game_of_life)| Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)|
41
+
|[inner_html](inner_html)| Embeds an external document as raw HTML by manually managing the element |
42
+
|[js_callback](js_callback)| Interacts with JavaScript code |
43
+
|[keyed_list](keyed_list)| Demonstrates how to use keys to improve the performance of lists |
44
+
|[mount_point](mount_point)| Shows how to mount the root component to a custom element |
45
+
|[multi_thread](multi_thread)| Demonstrates the use of Web Workers to offload computation to the background |
46
+
|[nested_list](nested_list)| Renders a styled list which tracks hover events |
47
+
|[node_refs](node_refs)| Uses a [`NodeRef`](https://yew.rs/docs/concepts/components/refs) to focus the input element under the cursor |
48
+
|[pub_sub](pub_sub)| Cross-component communication using [Agents](https://yew.rs/docs/concepts/agents)|
49
+
|[router](router)| The best yew blog built with `yew-router`|
50
+
|[store](store)| Showcases the `yewtil::store` API |
51
+
|[timer](timer)| Demonstrates the use of the interval and timeout services |
52
+
|[todomvc](todomvc)| Implementation of [TodoMVC](http://todomvc.com/)|
53
+
|[two_apps](two_apps)| Runs two separate Yew apps which can communicate with each other |
54
+
|[webgl](webgl)| Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew |
98
55
99
56
## Next steps
100
57
101
58
Have a look at Yew's [starter templates](https://yew.rs/docs/getting-started/starter-templates) when starting a project using Yew – they can significantly simplify things.
59
+
60
+
## Help out
61
+
62
+
Most examples have an "improvements" section in their README.md which lists ways to improve the example.
63
+
64
+
The biggest point of improvement is the presentation of the examples (ex. styling).
0 commit comments