create some more compelling examples

packages/signals/examples/split_subscriptions.rs

@@ -0,0 +1,150 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use dioxus_signals::Signal;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+#[derive(Clone, Copy, Default)]
+struct ApplicationData {
+    first_data: Signal<i32>,
+    second_data: Signal<i32>,
+    many_signals: Signal<Vec<Signal<i32>>>,
+}
+
+fn use_app_data(cx: Scope) -> ApplicationData {
+    *use_context(cx).unwrap()
+}
+
+fn app(cx: Scope) -> Element {
+    use_context_provider(cx, ApplicationData::default);
+
+    render! {
+        div {
+            ReadsFirst {}
+        }
+        div {
+            ReadsSecond {}
+        }
+        div {
+            ReadsManySignals {}
+        }
+    }
+}
+
+fn ReadsFirst(cx: Scope) -> Element {
+    println!("running first");
+    let data = use_app_data(cx);
+
+    render! {
+        button {
+            onclick: move |_| {
+                *data.first_data.write() += 1;
+            },
+            "Increase"
+        }
+        button {
+            onclick: move |_| {
+                *data.first_data.write() -= 1;
+            },
+            "Decrease"
+        }
+        button {
+            onclick: move |_| {
+                *data.first_data.write() = 0;
+            },
+            "Reset"
+        }
+        "{data.first_data}"
+    }
+}
+
+fn ReadsSecond(cx: Scope) -> Element {
+    println!("running second");
+    let data = use_app_data(cx);
+
+    render! {
+        button {
+            onclick: move |_| {
+                *data.second_data.write() += 1;
+            },
+            "Increase"
+        }
+        button {
+            onclick: move |_| {
+                *data.second_data.write() -= 1;
+            },
+            "Decrease"
+        }
+        button {
+            onclick: move |_| {
+                *data.second_data.write() = 0;
+            },
+            "Reset"
+        }
+        "{data.second_data}"
+    }
+}
+
+fn ReadsManySignals(cx: Scope) -> Element {
+    println!("running many signals");
+    let data = use_app_data(cx);
+
+    render! {
+        button {
+            onclick: move |_| {
+                data.many_signals.write().push(Signal::new(0));
+            },
+            "Create"
+        }
+        button {
+            onclick: move |_| {
+                data.many_signals.write().pop();
+            },
+            "Destroy"
+        }
+        button {
+            onclick: move |_| {
+                if let Some(first) = data.many_signals.read().get(0) {
+                    *first.write() += 1;
+                }
+            },
+            "Increase First Item"
+        }
+        for signal in data.many_signals {
+            Child {
+                count: signal,
+            }
+        }
+    }
+}
+
+#[derive(Props, PartialEq)]
+struct ChildProps {
+    count: Signal<i32>,
+}
+
+fn Child(cx: Scope<ChildProps>) -> Element {
+    println!("running child");
+    let count = cx.props.count;
+
+    render! {
+        div {
+            "Child: {count}"
+            button {
+                onclick: move |_| {
+                    *count.write() += 1;
+                },
+                "Increase"
+            }
+            button {
+                onclick: move |_| {
+                    *count.write() -= 1;
+                },
+                "Decrease"
+            }
+        }
+    }
+}