leptos-rs · qknight · Oct 25, 2023 · Oct 25, 2023
diff --git a/examples/counters_stable/src/lib.rs b/examples/counters_stable/src/lib.rs
@@ -1,5 +1,6 @@
 use leptos::*;
 use leptos_meta::*;
+use log::info;
 
 const MANY_COUNTERS: usize = 1000;
 
@@ -38,6 +39,19 @@ pub fn Counters() -> impl IntoView {
         set_counters.update(|counters| counters.clear());
     };
 
+    let (x_counters_input, set_x_counters_input) = create_signal(2);
+    let add_x_counters = move |_| {
+        let v = x_counters_input.get() as usize;
+        info!("add_x_counters: {}", v);
+        let next_id = next_counter_id.get();
+        let new_counters = (next_id..next_id + v).map(|id| {
+            let signal = create_signal(0);
+            (id, signal)
+        });
+        set_counters.update(move |counters| counters.extend(new_counters));
+        set_next_counter_id.update(|id| *id += v);
+    };
+
     view! {
         <Title text="Counters (Stable)" />
         <div>
@@ -50,6 +64,17 @@ pub fn Counters() -> impl IntoView {
             <button on:click=clear_counters>
                 "Clear Counters"
             </button>
+            <p>
+            <input data-testid="add_x_counters_input" type="text" on:input=move |ev| {
+                let x = event_target_value(&ev).parse::<i32>().unwrap_or_default();
+                set_x_counters_input.set(x)
+              }
+              prop:value=x_counters_input/>
+            <button on:click=add_x_counters>
+                "Add " {move || x_counters_input.get()} " counters"
+            </button>
+            </p>
+
             <p>
                 "Total: "
                 <span data-testid="total">{move ||

diff --git a/examples/select_stable/Cargo.toml b/examples/select_stable/Cargo.toml
@@ -0,0 +1,27 @@
+[package]
+name = "select_stable"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr"] }
+leptos_meta = { path = "../../meta", features = ["csr"] }
+log = "0.4"
+console_log = "1"
+console_error_panic_hook = "0.1.7"
+
+[dev-dependencies]
+wasm-bindgen = "0.2.87"
+wasm-bindgen-test = "0.3.37"
+pretty_assertions = "1.4.0"
+
+[dev-dependencies.web-sys]
+features = [
+    "Event",
+    "EventInit",
+    "EventTarget",
+    "HtmlElement",
+    "HtmlInputElement",
+    "XPathResult",
+]
+version = "0.3.64"
diff --git a/examples/select_stable/Makefile.toml b/examples/select_stable/Makefile.toml
@@ -0,0 +1,18 @@
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/wasm-test.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+    { path = "../cargo-make/playwright-test.toml" },
+]
+
+[tasks.build]
+toolchain = "stable"
+command = "cargo"
+args = ["build-all-features"]
+install_crate = "cargo-all-features"
+
+[tasks.check]
+toolchain = "stable"
+command = "cargo"
+args = ["check-all-features"]
+install_crate = "cargo-all-features"
diff --git a/examples/select_stable/README.md b/examples/select_stable/README.md
@@ -0,0 +1,8 @@
+# Leptos Select Example on Rust Stable
+
+This example showcases a basic Leptos app with a select drop-down. It is a good example of how to setup a basic reactive app with signals and effects, and how to interact with browser events. 
+It will compile on Rust stable, because it has the `stable` feature enabled.
+
+## Getting Started
+
+See the [Examples README](../README.md) for setup and run instructions.
diff --git a/examples/select_stable/index.html b/examples/select_stable/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
+  </head>
+  <body></body>
+</html>
diff --git a/examples/select_stable/package.json b/examples/select_stable/package.json
@@ -0,0 +1,11 @@
+{
+  "private": "true",
+  "scripts": {
+    "start-server": "trunk serve",
+    "e2e": "cargo make test-playwright",
+    "e2e:auto-start": "start-server-and-test start-server http://127.0.0.1:8080 e2e"
+  },
+  "devDependencies": {
+    "start-server-and-test": "^1.15.4"
+  }
+}
diff --git a/examples/select_stable/src/lib.rs b/examples/select_stable/src/lib.rs
@@ -0,0 +1,164 @@
+use leptos::*;
+use log::info;
+use log::error;
+
+#[component]
+pub fn Selector() -> impl IntoView {
+    #[derive(Debug, Clone, Copy)]
+    pub struct SelectOption {
+        pub label: &'static str,
+        pub pos: usize,
+    }
+    let options: Vec<SelectOption> =  vec![
+        SelectOption{ label: "h0rses", pos: 0},
+        SelectOption{ label: "b1rds", pos: 1},
+        SelectOption{ label: "2nfish", pos: 2},
+    ];
+
+    let options_clone = options.clone();
+    let selection: RwSignal<Option<usize>> = create_rw_signal(Some(1)); // initial selection
+
+    view! {
+      <div style="background:#ffffbf">
+      <h2>Selector</h2>
+      <select
+        id = "selector"
+        on:change = move |ev| {
+          let new_selection = event_target_value(&ev);
+          if new_selection.is_empty() {
+            selection.set(None);
+          } else {
+            match new_selection.parse() {
+              Ok(v) => {
+                info!("You selected {}", v);
+                selection.set(Some(v))
+              },
+              Err(_) => {
+                error!("Error: Unexpected option value {new_selection}");
+              },
+            }
+          }
+        }
+      >
+      <For
+        each = move || options_clone.clone()
+        key = |option| option.pos
+        let:option
+          >
+          <option
+            value = option.pos
+            selected = (selection.get() == Some(option.pos))
+            >
+            { option.label }
+          </option>
+      </For>
+      </select>
+        <p>
+        "You selected: "
+        <span data-testid="my_selection">{move || {
+          match selection.get() {
+            Some(v) => {
+              options[v].label
+            },
+            None => "No idea..."
+          }
+        }
+        }</span>
+        </p>
+      </div>
+    }
+}
+
+#[component]
+pub fn Dynamic_selector() -> impl IntoView {
+    #[derive(Debug, Clone, Copy)]
+    pub struct SelectionOption {
+        pub label: &'static str,
+        pub id: u32,
+        pub amount: RwSignal<u32>,
+    }
+    let selection_options_default: Vec<SelectionOption> = vec![
+        SelectionOption{ label: "h0rses", id: 0, amount: create_rw_signal::<u32>(0)},
+        SelectionOption{ label: "b1rds", id: 1, amount: create_rw_signal::<u32>(10)},
+        SelectionOption{ label: "2nfish", id: 2, amount: create_rw_signal::<u32>(20)},
+        SelectionOption{ label: "3lk", id: 3, amount: create_rw_signal::<u32>(30)},
+    ];
+    let default_selection: RwSignal<Option<u32>> = create_rw_signal(Some(0));
+    let selection_options = create_rw_signal::<Vec<SelectionOption>>(selection_options_default);
+    let print = move |_| {
+        let s = selection_options.get();
+        info!("{} {}", s[0].label, s[0].amount.get());
+    };
+    let add_option = move |_| {
+        let a = SelectionOption{ label: "4eel", id: 4, amount: create_rw_signal::<u32>(20)};
+        selection_options.update(|n| {
+            if n.len() > 0 {
+                n[0].amount.set(200);
+                info!("n[0]: {} {}", n[0].label, n[0].amount.get())
+            }
+            n.push(a);
+        });
+    };
+    view! {
+      <div style="background:#eae3ff">
+        <h2>Dynamic_selector</h2>
+        <select
+          id = "dynamic_selector"
+          on:change = move |ev| {
+            let target_value = event_target_value(&ev);
+            if target_value.is_empty() {
+              default_selection.set(None);
+            } else {
+               match target_value.parse() {
+                 Ok(v) => {
+                   info!("You selected {}", v);
+                   default_selection.set(Some(v))
+                 },
+                 Err(_) => {
+                   error!("Error: Unexpected option value {target_value}");
+                 },
+              }
+            }
+          }
+        >
+          <For
+            each = {move || selection_options.clone().get()}
+            key = |option| option.id
+            let:option
+          >
+            <option
+              value = move || option.id
+              default_selection = (default_selection.get() == Some(option.id))
+            > { move || {
+               let z = option.amount.get();
+               let v = format!("{} - {}", option.label, z);
+               v
+               }
+              }
+            </option>
+          </For>
+        </select>
+        <p>
+        "You selected: "
+        <span data-testid="mymultiselection">{move || {
+          let selected_option = default_selection.get();
+            match selected_option {
+                Some(v) => {
+                    let l = selection_options.get()[v as usize].label;
+                    let a = selection_options.get()[v as usize].amount.get();
+                    format!("{} - {}", l, a.to_string())
+                },
+                None => "no idea...".to_string()
+            }
+        }
+        }</span>
+         <button on:click=add_option>
+           "Add another option to selector"
+         </button>
+         <button on:click=print>
+           "Print"
+         </button>
+        </p>
+      </div>
+    }
+}
diff --git a/examples/select_stable/src/main.rs b/examples/select_stable/src/main.rs
@@ -0,0 +1,9 @@
+use leptos::*;
+use select_stable::Selector;
+use select_stable::Dynamic_selector;
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+    mount_to_body(|| view! { <Selector/> <Dynamic_selector/> })
+}