Build examples with trunk

Cargo.toml

@@ -31,28 +31,24 @@ members = [
   "yew-dsl",
 
   # Examples
+  "examples/ccxt_and_gravatar",
   "examples/counter",
   "examples/crm",
   "examples/custom_components",
   "examples/dashboard",
   "examples/file_upload",
   "examples/fragments",
-  "examples/futures_wp",
+  "examples/futures",
   "examples/game_of_life",
   "examples/inner_html",
   "examples/js_callback",
   "examples/keyed_list",
-  "examples/large_table",
-  "examples/minimal",
-  "examples/minimal_wp",
   "examples/mount_point",
   "examples/multi_thread",
   "examples/nested_list",
   "examples/node_refs",
-  "examples/npm_and_rest",
   "examples/pub_sub",
   "examples/store",
-  "examples/textarea",
   "examples/timer",
   "examples/todomvc",
   "examples/two_apps",

_PR.md

@@ -0,0 +1,116 @@
+# PR
+
+This is just the file I'm using to keep track of everything. It won't be part of the final PR.
+
+## TODO
+
+- [ ] update all examples
+- [ ] update examples for yew-router (fix #1377)
+- [ ] update examples for yewtil
+
+## Somewhat related issues
+
+- #1073 (should probably be closed now)
+- #1016 (promises some good stylin' for the examples but it's been a while)
+
+## List of examples that I deem satisfactory
+
+- game_of_life
+- nested_list
+- todomvc
+
+## Examples
+
+### 1. counter
+
+### 2. crm
+
+Modified to make the example more modular.
+What used to be a single component handling a lot of message spaghetti is now split into dedicated components.
+
+### 3. custom_components
+
+Should be updated or removed
+
+### 4. dashboard
+
+### 5. file_upload
+
+### 6. fragments
+
+Should be updated or removed
+
+### 7. futures
+
+Renamed from "futures_wp".
+
+### 8. game_of_life
+
+Split code across two files.
+
+### 9. inner_html
+
+### 10. js_callback
+
+Make use of wasm-bindgen's ability to automatically load js files without having to include them in the HTML.
+Split the bindings into a separate file for clarity.
+
+Trunk Issue: <https://github.com/thedodd/trunk/issues/40>
+
+### 11. keyed_list
+
+Split into multiple files for clarity.
+
+### 12. large_table
+
+This example was removed because it's quite literally just a large table...
+"game_of_life" is a far superior but not-quite-as-big table experience and "keyed_list" takes care of the large part.
+
+### 13. minimal
+
+Removed because this example is very similar to "counter" but it can only count to one.
+A "minimal" example should either demonstrate every aspect of Yew's API in a small application or be a template.
+
+### 14. minimal_wp
+
+This example was removed because it's the same as "minimal" but for wasm-pack.
+Different approaches to building apps should be explored through templates, not the examples.
+
+### 15. mount_point
+
+### 16. multi_thread
+
+**TODO** this example is special!
+
+### 17. nested_list
+
+### 18. node_refs
+
+### 19. npm_and_rest
+
+Renamed to "ccxt_and_gravatar" because it has nothing to do with NPM.
+Updated the services to be more ergonomic and added display for the Gravatar profile.
+
+Example should be updated or put out of its misery
+
+### 20. pub_sub
+
+Should be updated
+
+### 21. store
+
+### 22. textarea
+
+Removed because it's literally just a textarea.
+Other examples like todomvc use similar concepts for something more useful.
+
+### 23. timer
+
+### 24. todomvc
+
+Split `State` into a separate file to make it more manageable.
+Updated TodoMVC CSS to latest version.
+
+### 25. two_apps
+
+### 26. webgl

examples/.gitignore

@@ -1,5 +1 @@
-*/static/package.json
-*/static/wasm_bg.wasm
-*/static/wasm_bg.d.ts
-*/static/wasm.d.ts
-*/static/wasm.js
+*/dist/

examples/README.md

@@ -1,43 +1,15 @@
 # Yew Examples
 
-In order to run the examples, we provide the `run_example.sh` script.
-This script takes care of compiling the example and runs a web server for you.
-All that's left is for you to play around with the examples :).
-
-> **A note for Windows users:**<br>
-> 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>
-> See <https://gitforwindows.org/#bash> for more information.
->
-> We're always trying to improve the developer experience for developers across all platforms.
-> There's an ongoing effort to replace the bash scripts with a Rust command line tool ([#1418](https://github.com/yewstack/yew/issues/1418)).
-> If at any point you encounter an issue, don't hesitate to ask a question or open an issue.
-
 ## Dependencies
 
-Before we can run the examples we need to get a few things ready.
-
-Some examples currently use `wasm-bindgen` and others use `wasm-pack`.
-You can install them both using the following command:
+The examples are built with [trunk](https://github.com/thedodd/trunk).
+You can install it with the following command:
 
 ```bash
-cargo install wasm-pack wasm-bindgen-cli
+# at some point in the future, trunk should automatically download wasm-bindgen for you
+cargo install trunk wasm-bindgen-cli
 ```
 
-### Optional dependencies
-
-We've written a small web server which you can use to serve the built examples. In order to
-use it, you'll need to have installed Python (3.6 or greater).
-You can also use a different web server, provided that it can serve static files from a directory.
-
-> **Note:**<br>
-> Some examples don't have an `index.html` file in their static directory.
-> The python web server handles this by serving a default index file.
-> If you aren't using it, you will need to create the index file manually.
-
-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).
-This extension is used to serve static files.
-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.
-
 ## Run an example
 
 ```bash
@@ -48,54 +20,46 @@ git clone https://github.com/yewstack/yew.git
 cd yew/examples
 
 # run the "todomvc" example
-./run_example.sh todomvc
+cd todomvc
+trunk serve
 ```
 
-## Script options
-
-The general structure of the command looks like this:<br>
-`./run_example.sh <example> [OPTIONS]`
-
-`<example>` is the name of the example (i.e. the name of the directory).
-
-The following table describes all possible options:
-
-| Option                   | Description                                                                                                         |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `--debug`<br>`--release` | Specifies which profile to use for `cargo build`. Defaults to `--debug`.                                            |
-| `--build-only`           | Disables the built-in server.<br>Use this if you don't have Python installed or if you want to use your own server. |
+Some examples will may require additional steps.
+In those cases, instructions are placed in the example's README.md file.
 
 ## List of examples
 
-| Example                                | Description                                                                                                                        | Has README |
-| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | :--------: |
-| [counter](counter)                     | A single component which displays a stateful number. The number can be incremented and decremented using buttons                   |     ✖      |
-| [crm](crm)                             | See the `README` file for details                                                                                                  |     ✔      |
-| [custom_components](custom_components) | Demonstrates the use of components                                                                                                 |     ✔      |
-| [dashboard](dashboard)                 | Uses the `fetch` and `websocket` services to load external data                                                                    |     ✔      |
-| [file_upload](file_upload)             | Uses the `reader` service to read the content of user uploaded files                                                               |     ✖      |
-| [fragments](fragments)                 | Similar to the counter example but demonstrating the use of [fragments](https://yew.rs/docs/concepts/html/lists#fragments)         |     ✖      |
-| [futures_wp](futures_wp)               | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |     ✔      |
-| [game_of_life](game_of_life)           | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |     ✖      |
-| [inner_html](inner_html)               | Embeds an external document as raw HTML by manually managing the element                                                           |     ✖      |
-| [js_callback](js_callback)             | Interacts with JavaScript code                                                                                                     |     ✔      |
-| [keyed_list](keyed_list)               | Demonstrates how to use keys to improve the performance of lists                                                                   |     ✖      |
-| [large_table](large_table)             | Renders a big table which highlights the selected cell                                                                             |     ✖      |
-| [minimal](minimal)                     | A simple button that listens to click events                                                                                       |     ✖      |
-| [minimal_wp](minimal)                  | Same as the minimal example but using `wasm-pack`                                                                                  |     ✖      |
-| [mount_point](mount_point)             | Shows how to mount the root component to a custom element                                                                          |     ✖      |
-| [multi_thread](multi_thread)           | Demonstrates the use of Web Workers to offload computation to the background                                                       |     ✔      |
-| [nested_list](nested_list)             | Renders a styled list which tracks hover events                                                                                    |     ✖      |
-| [node_refs](node_refs)                 | Uses a [`NodeRef`](https://yew.rs/docs/concepts/components/refs) to focus the input element under the cursor                       |     ✖      |
-| [npm_and_rest](npm_and_rest)           | A more elaborate demonstration of the `fetch` service                                                                              |     ✖      |
-| [pub_sub](pub_sub)                     | Cross-component communication using [Agents](https://yew.rs/docs/concepts/agents)                                                  |     ✔      |
-| [store](store)                         | Showcases the `yewtil::store` API                                                                                                  |     ✔      |
-| [textarea](textarea)                   | Shows how to use the value of a textarea or input tag                                                                              |     ✖      |
-| [timer](timer)                         | Demonstrates the use of the interval and timeout services                                                                          |     ✖      |
-| [todomvc](todomvc)                     | Implementation of the [TodoMVC](http://todomvc.com/) app                                                                           |     ✔      |
-| [two_apps](two_apps)                   | Runs two separate Yew apps at the same time                                                                                        |     ✖      |
-| [webgl](webgl)                         | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew |     ✔      |
+| Example                                | Description                                                                                                                        |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| [ccxt_and_gravatar](ccxt_and_gravatar) | Please see the `README`.                                                                                                           |
+| [counter](counter)                     | A single component which displays a stateful number. The number can be incremented and decremented using buttons                   |
+| [crm](crm)                             | See the `README` file for details                                                                                                  |
+| [custom_components](custom_components) | Demonstrates the use of components                                                                                                 |
+| [dashboard](dashboard)                 | Uses the `fetch` and `websocket` services to load external data                                                                    |
+| [file_upload](file_upload)             | Uses the `reader` service to read the content of user uploaded files                                                               |
+| [fragments](fragments)                 | Similar to the counter example but demonstrating the use of [fragments](https://yew.rs/docs/concepts/html/lists#fragments)         |
+| [futures_wp](futures_wp)               | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |
+| [game_of_life](game_of_life)           | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |
+| [inner_html](inner_html)               | Embeds an external document as raw HTML by manually managing the element                                                           |
+| [js_callback](js_callback)             | Interacts with JavaScript code                                                                                                     |
+| [keyed_list](keyed_list)               | Demonstrates how to use keys to improve the performance of lists                                                                   |
+| [mount_point](mount_point)             | Shows how to mount the root component to a custom element                                                                          |
+| [multi_thread](multi_thread)           | Demonstrates the use of Web Workers to offload computation to the background                                                       |
+| [nested_list](nested_list)             | Renders a styled list which tracks hover events                                                                                    |
+| [node_refs](node_refs)                 | Uses a [`NodeRef`](https://yew.rs/docs/concepts/components/refs) to focus the input element under the cursor                       |
+| [pub_sub](pub_sub)                     | Cross-component communication using [Agents](https://yew.rs/docs/concepts/agents)                                                  |
+| [store](store)                         | Showcases the `yewtil::store` API                                                                                                  |
+| [timer](timer)                         | Demonstrates the use of the interval and timeout services                                                                          |
+| [todomvc](todomvc)                     | Implementation of the [TodoMVC](http://todomvc.com/) app                                                                           |
+| [two_apps](two_apps)                   | Runs two separate Yew apps at the same time                                                                                        |
+| [webgl](webgl)                         | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew |
 
 ## Next steps
 
 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.
+
+## Help out
+
+Most examples have an "improvements" section in their README.md which lists ways to improve the example.
+
+The biggest point of improvement is the presentation of the examples (ex. styling).

examples/npm_and_rest/Cargo.toml → examples/ccxt_and_gravatar/Cargo.toml

@@ -1,14 +1,13 @@
 [package]
-name = "npm_and_rest"
+name = "ccxt_and_gravatar"
 version = "0.1.0"
 authors = ["Denis Kolodin <[email protected]>"]
 edition = "2018"
 
 [dependencies]
-anyhow = "1"
+anyhow = "1.0"
 js-sys = "0.3"
-serde = "1"
-serde_derive = "1"
+serde = { version = "1.0", features = ["derive"] }
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["console"] }
 yew = { path = "../../yew" }

examples/ccxt_and_gravatar/README.md

@@ -0,0 +1,24 @@
+# CCXT and Gravatar Example
+
+I honestly have a hard time describing what this example does...
+You can either list cryptocurrency exchanges powered by [CCXT] or display some data from a hard-coded [Gravatar] profile.
+How do these thing fit together? I don't know.
+
+## Concepts
+
+- Uses the [`FetchService`] to retrieve the Gravatar profile.
+- Interop with the CCXT js library using `wasm-bindgen`.
+
+## Improvements
+
+This example can be seen as a mix of [dashboard](../dashboard) (fetching data) and [js_callback](../js_callback) (js interop).
+It lacks a distinct purpose.
+If you have something in mind that can use Gravatar, CCXT, or even both, feel free to reshape this example however you wish.
+
+- Handle Gravatar API errors properly
+- Create proper js bindings for CCTX instead of using reflection
+- Improve the presentation using CSS
+
+[ccxt]: https://github.com/ccxt/ccxt
+[gravatar]: https://gravatar.com
+[`fetchservice`]: https://docs.rs/yew/latest/yew/services/fetch/struct.FetchService.html

examples/ccxt_and_gravatar/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew • CCXT and Gravatar</title>
+
+    <script src="https://unpkg.com/ccxt"></script>
+  </head>
+
+  <body></body>
+</html>

examples/ccxt_and_gravatar/src/ccxt.rs

@@ -0,0 +1,19 @@
+use js_sys::{Array, Reflect};
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    static ccxt: JsValue;
+}
+
+fn raw_exchanges() -> Array {
+    let v = Reflect::get(&ccxt, &JsValue::from_str("exchanges")).unwrap();
+    Array::from(&v)
+}
+
+pub fn iter_exchanges() -> impl Iterator<Item = String> + 'static {
+    raw_exchanges()
+        .to_vec()
+        .into_iter()
+        .filter_map(|v| v.as_string())
+}