simple counter application with functional components (#2603)

* simple counter application with functional components * clean up some comments * use the word 'function' instead of 'functional' Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * add the counter functional example package to workspace root cargo toml * add data-trunk link tag in index html * include counter functional into the examples readme file Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
yewstack · Apr 12, 2022 · 7377156 · 7377156 · github-actions · Apr 12, 2022
1 parent daf6ec0
commit 7377156
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 0 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -12,6 +12,7 @@ members = [
   "examples/boids",
   "examples/contexts",
   "examples/counter",
+  "examples/counter_functional",
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
   "examples/function_memory_game",

diff --git a/examples/README.md b/examples/README.md
@@ -34,6 +34,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [boids](boids)                                     | S  | Yew port of [Boids](https://en.wikipedia.org/wiki/Boids)                                                                           |
 | [contexts](contexts)                               | F  | A technical demonstration of Context API.                                                                                          |
 | [counter](counter)                                 | S  | Simple counter which can be incremented and decremented                                                                            |
+| [counter_functional](counter_functional)           | F  | Simple counter which can be incremented and decremented made using function components                                             |
 | [dyn_create_destroy_apps](dyn_create_destroy_apps) | S  | Uses the function `start_app_in_element` and the `AppHandle` struct to dynamically create and delete Yew apps                      |
 | [file_upload](file_upload)                         | S  | Uses the `gloo::file` to read the content of user uploaded files                                                                   |
 | [function_todomvc](function_todomvc)               | F  | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks.                                              |

diff --git a/examples/counter_functional/Cargo.toml b/examples/counter_functional/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "counter_functional"
+version = "0.1.0"
+authors = ["Zahash <zahash.z@gmail.com>"]
+edition = "2021"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+yew = { path = "../../packages/yew", features = ["csr"] }
diff --git a/examples/counter_functional/README.md b/examples/counter_functional/README.md
@@ -0,0 +1,21 @@
+# Counter Example
+
+A simple example of a counter which can be increased or decreased with the press of a button implemented using function components
+
+## Running
+
+Run a debug version of this application:
+
+```bash
+trunk serve
+```
+
+Run a release version of this application:
+
+```bash
+trunk serve --release
+```
+
+## Concepts
+
+Demonstrates the use of function components.
diff --git a/examples/counter_functional/index.html b/examples/counter_functional/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Counter Function Yew</title>
+    <link data-trunk rel="rust" />
+  </head>
+  <body></body>
+</html>
diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
@@ -0,0 +1,28 @@
+use yew::prelude::*;
+
+#[function_component(App)]
+fn app() -> Html {
+    let state = use_state(|| 0);
+
+    let incr_counter = {
+        let state = state.clone();
+        Callback::from(move |_| state.set(*state + 1))
+    };
+
+    let decr_counter = {
+        let state = state.clone();
+        Callback::from(move |_| state.set(*state - 1))
+    };
+
+    html!(
+        <>
+        <p> {"current count: "} {*state} </p>
+        <button onclick={incr_counter}> {"+"} </button>
+        <button onclick={decr_counter}> {"-"} </button>
+        </>
+    )
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
Benchmark suite	Current: `7377156`	Previous: `daf6ec0`	Ratio
`yew-struct-keyed 01_run1k`	`225.8875`	`156.064`	`1.45`
`yew-struct-keyed 02_replace1k`	`224.433`	`188.7795`	`1.19`
`yew-struct-keyed 03_update10th1k_x16`	`358.3595`	`315.98850000000004`	`1.13`
`yew-struct-keyed 04_select1k`	`72.30799999999999`	`52.0095`	`1.39`
`yew-struct-keyed 05_swap1k`	`99.957`	`75.5505`	`1.32`
`yew-struct-keyed 06_remove-one-1k`	`32.537`	`25.5745`	`1.27`
`yew-struct-keyed 07_create10k`	`3262.2275`	`2801.632`	`1.16`
`yew-struct-keyed 08_create1k-after1k_x2`	`457.603`	`386.4065`	`1.18`
`yew-struct-keyed 09_clear1k_x8`	`194.5915`	`166.05599999999998`	`1.17`
`yew-struct-keyed 21_ready-memory`	`1.457233428955078`	`1.457233428955078`	`1`
`yew-struct-keyed 22_run-memory`	`1.6921844482421875`	`1.6921310424804688`	`1.00`
`yew-struct-keyed 23_update5-memory`	`1.6954841613769531`	`1.6968612670898438`	`1.00`
`yew-struct-keyed 24_run5-memory`	`1.944538116455078`	`1.9441375732421875`	`1.00`
`yew-struct-keyed 25_run-clear-memory`	`1.3269538879394531`	`1.3270988464355469`	`1.00`
`yew-struct-keyed 31_startup-ci`	`1741.4520000000002`	`1730.7399999999998`	`1.01`
`yew-struct-keyed 32_startup-bt`	`42.236`	`28.756`	`1.47`
`yew-struct-keyed 33_startup-mainthreadcost`	`314.76400000000007`	`237.664`	`1.32`
`yew-struct-keyed 34_startup-totalbytes`	`328.744140625`	`328.744140625`	`1`