Add back ondestroy hook

examples/shortcut.rs

@@ -8,10 +8,7 @@ fn main() {
 fn app() -> Element {
     let toggled = use_signal(|| false);
 
-    use_global_shortcut("ctrl+s", {
-        to_owned![toggled];
-        move || toggled.modify(|t| !*t)
-    });
+    use_global_shortcut("ctrl+s", move || toggled.toggle());
 
-    rsx!("toggle: {toggled.get()}")
+    rsx!("toggle: {toggled}")
 }

examples/svg.rs

@@ -1,103 +1,52 @@
 // Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
 
 use dioxus::prelude::*;
+use rand::{thread_rng, Rng};
 
 fn main() {
     dioxus_desktop::launch(app);
 }
 
 fn app() -> Element {
-    let val = use_signal(|| 5);
-
     rsx! {
-        div {
-            user_select: "none",
-            webkit_user_select: "none",
-            margin_left: "10%",
-            margin_right: "10%",
+        div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
             h1 { "Click die to generate a new value" }
-            div {
-                cursor: "pointer",
-                height: "80%",
-                width: "80%",
-                Die {
-                    value: **val,
-                    keep: true,
-                    onclick: move |_| {
-                        use rand::Rng;
-                        let mut rng = rand::thread_rng();
-                        val.set(rng.gen_range(1..=6));
-                    }
-                }
-            }
+            div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
         }
     }
 }
 
-#[derive(Props)]
-pub struct DieProps<'a> {
-    pub value: u64,
-    pub keep: bool,
-    pub onclick: EventHandler<'a, MouseEvent>,
-}
+#[component]
+fn Dice() -> Element {
+    const Y: bool = true;
+    const N: bool = false;
+    const DOTS: [(i64, i64); 7] = [(-1, -1), (-1, -0), (-1, 1), (1, -1), (1, 0), (1, 1), (0, 0)];
+    const DOTS_FOR_VALUE: [[bool; 7]; 6] = [
+        [N, N, N, N, N, N, Y],
+        [N, N, Y, Y, N, N, N],
+        [N, N, Y, Y, N, N, Y],
+        [Y, N, Y, Y, N, Y, N],
+        [Y, N, Y, Y, N, Y, Y],
+        [Y, Y, Y, Y, Y, Y, N],
+    ];
 
-const DOTS: [(i64, i64); 7] = [(-1, -1), (-1, -0), (-1, 1), (1, -1), (1, 0), (1, 1), (0, 0)];
-const DOTS_FOR_VALUE: [[bool; 7]; 6] = [
-    [false, false, false, false, false, false, true],
-    [false, false, true, true, false, false, false],
-    [false, false, true, true, false, false, true],
-    [true, false, true, true, false, true, false],
-    [true, false, true, true, false, true, true],
-    [true, true, true, true, true, true, false],
-];
+    let value = use_signal(|| 5);
+    let active_dots = use_selector(move || &DOTS_FOR_VALUE[(*value() - 1) as usize]);
 
-const OFFSET: i64 = 600;
-const DOT_RADIUS: &str = "200";
-const HELD_COLOR: &str = "#aaa";
-const UNHELD_COLOR: &str = "#ddd";
-
-// A six-sided die (D6) with dots.
-#[allow(non_snake_case)]
-pub fn Die(props: DieProps) -> Element {
-    let &DieProps { value, keep, .. } = cx.props;
-
-    let active_dots = &DOTS_FOR_VALUE[(value - 1) as usize];
-    let fill = if keep { HELD_COLOR } else { UNHELD_COLOR };
-    let dots = DOTS
-        .iter()
-        .zip(active_dots.iter())
-        .filter(|(_, &active)| active)
-        .map(|((x, y), _)| {
-            let dcx = x * OFFSET;
-            let dcy = y * OFFSET;
-
-            rsx! {
+    rsx! {
+        svg {
+            view_box: "-1000 -1000 2000 2000",
+            prevent_default: "onclick",
+            onclick: move |e| value.set(thread_rng().gen_range(1..=6)),
+            rect { x: -1000, y: -1000, width: 2000, height: 2000, rx: 200, fill: "#aaa" }
+            for ((x, y), _) in DOTS.iter().zip(active_dots.read().iter()).filter(|(_, &active)| active) {
                 circle {
-                    cx: "{dcx}",
-                    cy: "{dcy}",
-                    r: "{DOT_RADIUS}",
+                    cx: *x * 600,
+                    cy: *y * 600,
+                    r: 200,
                     fill: "#333"
                 }
             }
-        });
-
-    rsx! {
-      svg {
-        onclick: move |e| cx.props.onclick.call(e),
-        prevent_default: "onclick",
-        class: "die",
-        view_box: "-1000 -1000 2000 2000",
-
-        rect {
-          x: "-1000",
-          y: "-1000",
-          width: "2000",
-          height: "2000",
-          rx: "{DOT_RADIUS}",
-          fill: "{fill}",
         }
-
-        {dots}
-      }
     }
 }