smart-house-web: leptos эсперименты

smart-house-web/frontend/src/main.rs

@@ -1,61 +1,156 @@
+#![allow(non_snake_case)]
 use leptos::prelude::*;
 
-#[allow(non_snake_case)]
+// Iteration is a very common task in most applications.
-// Composing different components together is how we build
+// So how do you take a list of data and render it in the DOM?
-// user interfaces. Here, we'll define a reusable <ProgressBar/>.
+// This example will show you the two ways:
-// You'll see how doc comments can be used to document components
+// 1) for mostly-static lists, using Rust iterators
-// and their properties.
+// 2) for lists that grow, shrink, or move items, using <For/>
-
-/// Shows progress toward a goal.
-#[component]
-fn ProgressBar(
-    // Marks this as an optional prop. It will default to the default
-    // value of its type, i.e., 0.
-    #[prop(default = 100)]
-    /// The maximum value of the progress bar.
-    max: u16,
-    // Will run `.into()` on the value passed into the prop.
-    #[prop(into)]
-    // `Signal<T>` is a wrapper for several reactive types.
-    // It can be helpful in component APIs like this, where we
-    // might want to take any kind of reactive value
-    /// How much progress should be displayed.
-    progress: Signal<i32>,
-) -> impl IntoView {
-    view! {
-        <progress
-            max={max}
-            value=progress
-        />
-        <br/>
-    }
-}
 
 #[component]
 fn App() -> impl IntoView {
-    let (count, set_count) = signal(0);
+    view! {
+        <h1>"Iteration"</h1>
+        <h2>"Static List"</h2>
+        <p>"Use this pattern if the list itself is static."</p>
+        <StaticList length=5/>
+        <h2>"Dynamic List"</h2>
+        <p>"Use this pattern if the rows in your list will change."</p>
+        <DynamicList initial_length=5/>
+    }
+}
 
-    let double_count = move || count.get() * 2;
+/// A list of counters, without the ability
+/// to add or remove any.
+#[component]
+fn StaticList(
+    /// How many counters to include in this list.
+    length: usize,
+) -> impl IntoView {
+    // create counter signals that start at incrementing numbers
+    let counters = (1..=length).map(|idx| RwSignal::new(idx));
+
+    // when you have a list that doesn't change, you can
+    // manipulate it using ordinary Rust iterators
+    // and collect it into a Vec<_> to insert it into the DOM
+    let counter_buttons = counters
+        .map(|count| {
+            view! {
+                <li>
+                    <button
+                        on:click=move |_| *count.write() += 1
+                    >
+                        {count}
+                    </button>
+                </li>
+            }
+        })
+        .collect::<Vec<_>>();
+
+    // Note that if `counter_buttons` were a reactive list
+    // and its value changed, this would be very inefficient:
+    // it would rerender every row every time the list changed.
+    view! {
+        <ul>{counter_buttons}</ul>
+    }
+}
+
+/// A list of counters that allows you to add or
+/// remove counters.
+#[component]
+fn DynamicList(
+    /// The number of counters to begin with.
+    initial_length: usize,
+) -> impl IntoView {
+    // This dynamic list will use the <For/> component.
+    // <For/> is a keyed list. This means that each row
+    // has a defined key. If the key does not change, the row
+    // will not be re-rendered. When the list changes, only
+    // the minimum number of changes will be made to the DOM.
+
+    // `next_counter_id` will let us generate unique IDs
+    // we do this by simply incrementing the ID by one
+    // each time we create a counter
+    let mut next_counter_id = initial_length;
+
+    // we generate an initial list as in <StaticList/>
+    // but this time we include the ID along with the signal
+    // see NOTE in add_counter below re: ArcRwSignal
+    let initial_counters = (0..initial_length)
+        .map(|id| (id, ArcRwSignal::new(id + 1)))
+        .collect::<Vec<_>>();
+
+    // now we store that initial list in a signal
+    // this way, we'll be able to modify the list over time,
+    // adding and removing counters, and it will change reactively
+    let (counters, set_counters) = signal(initial_counters);
+
+    let add_counter = move |_| {
+        // create a signal for the new counter
+        // we use ArcRwSignal here, instead of RwSignal
+        // ArcRwSignal is a reference-counted type, rather than the arena-allocated
+        // signal types we've been using so far.
+        // When we're creating a collection of signals like this, using ArcRwSignal
+        // allows each signal to be deallocated when its row is removed.
+        let sig = ArcRwSignal::new(next_counter_id + 1);
+        // add this counter to the list of counters
+        set_counters.update(move |counters| {
+            // since `.update()` gives us `&mut T`
+            // we can just use normal Vec methods like `push`
+            counters.push((next_counter_id, sig))
+        });
+        // increment the ID so it's always unique
+        next_counter_id += 1;
+    };
 
     view! {
-        <button
+        <div>
-            on:click=move |_| {
+            <button on:click=add_counter>
-                *set_count.write() += 1;
+                "Add Counter"
-            }
+            </button>
-        >
+            <ul>
-            "Click me"
+                // The <For/> component is central here
-        </button>
+                // This allows for efficient, key list rendering
-        <br/>
+                <For
-        // If you have this open in CodeSandbox or an editor with
+                    // `each` takes any function that returns an iterator
-        // rust-analyzer support, try hovering over `ProgressBar`,
+                    // this should usually be a signal or derived signal
-        // `max`, or `progress` to see the docs we defined above
+                    // if it's not reactive, just render a Vec<_> instead of <For/>
-        <ProgressBar max=50 progress=count/>
+                    each=move || counters.get()
-        // Let's use the default max value on this one
+                    // the key should be unique and stable for each row
-        // the default is 100, so it should move half as fast
+                    // using an index is usually a bad idea, unless your list
-        <ProgressBar progress=count/>
+                    // can only grow, because moving items around inside the list
-        // Signal::derive creates a Signal wrapper from our derived signal
+                    // means their indices will change and they will all rerender
-        // using double_count means it should move twice as fast
+                    key=|counter| counter.0
-        <ProgressBar max=50 progress=Signal::derive(double_count)/>
+                    // `children` receives each item from your `each` iterator
+                    // and returns a view
+                    children=move |(id, count)| {
+                        // we can convert our ArcRwSignal to a Copy-able RwSignal
+                        // for nicer DX when moving it into the view
+                        let count = RwSignal::from(count);
+                        view! {
+                            <li>
+                                <button
+                                    on:click=move |_| *count.write() += 1
+                                >
+                                    {count}
+                                </button>
+                                <button
+                                    on:click=move |_| {
+                                        set_counters
+                                            .write()
+                                            .retain(|(counter_id, _)| {
+                                                counter_id != &id
+                                            });
+                                    }
+                                >
+                                    "Remove"
+                                </button>
+                            </li>
+                        }
+                    }
+                />
+            </ul>
+        </div>
     }
 }