wip: lots of changes to diffing

examples/README.md

@@ -11,7 +11,7 @@ These examples are fully-fledged micro apps. They can be ran with the `cargo run
 | [Global State Management](./statemanagement.rs)     | Share state between components              | 🛠      |
 | [Virtual Refs]()                                    | Cross-platform imperative elements          | 🛠      |
 | [Inline Styles](./inline-styles.rs)                 | Define styles for elements inline           | 🛠      |
-| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals       | ✅     |
+| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals       | ✅      |
 
 These examples are not necessarily meant to be run, but rather serve as a reference for the given functionality.
 
@@ -22,15 +22,15 @@ These examples are not necessarily meant to be run, but rather serve as a refere
 | [Global State Management](./statemanagement.rs)     | Share state between components                  | 🛠      |
 | [Virtual Refs]()                                    | Cross-platform imperative elements              | 🛠      |
 | [Inline Styles](./inline-styles.rs)                 | Define styles for elements inline               | 🛠      |
-| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals           | ✅     |
-| [Maps/Iterators](./iterators.rs)                    | Use iterators in the rsx! macro                 | 🛠      |
+| [Conditional Rendering](./conditional-rendering.rs) | Hide/Show elements using conditionals           | ✅      |
+| [Maps/Iterators](./iterators.rs)                    | Use iterators in the rsx! macro                 | ✅      |
 | [Render To string](./tostring.rs)                   | Render a mounted virtualdom to a string         | 🛠      |
 | [Component Children](./children.rs)                 | Pass children into child components             | 🛠      |
 | [Function Driven children]()                        | Pass functions to make VNodes                   | 🛠      |
-| [Memoization & Borrowed Data](./memo.rs)            | Suppress renders, borrow from parents           | ✅     |
-| [Fragments](./fragments.rs)                         | Support root-less element groups                | ✅     |
+| [Memoization & Borrowed Data](./memo.rs)            | Suppress renders, borrow from parents           | ✅      |
+| [Fragments](./fragments.rs)                         | Support root-less element groups                | ✅      |
 | [Null/None Components](./empty.rs)                  | Return nothing!                                 | 🛠      |
-| [Spread Pattern for props](./spreadpattern.rs)      | Manually specify and override props             | ✅     |
+| [Spread Pattern for props](./spreadpattern.rs)      | Manually specify and override props             | ✅      |
 | [Controlled Inputs](./controlled-inputs.rs)         | this does                                       | 🛠      |
 | [Custom Elements]()                                 | Define custom elements                          | 🛠      |
 | [Web Components]()                                  | Custom elements to interface with WebComponents | 🛠      |
@@ -38,9 +38,9 @@ These examples are not necessarily meant to be run, but rather serve as a refere
 | [Asynchronous Data]()                               | Using suspense to wait for data                 | 🛠      |
 | [Fiber/Scheduled Rendering]()                       | this does                                       | 🛠      |
 | [CSS Compiled Styles]()                             | this does                                       | 🛠      |
-| [Anti-patterns](./antipatterns.rs)                  | A collection of discouraged patterns            | ✅     |
-| [Complete rsx reference](./rsx_usage.rs)            | A complete reference for all rsx! usage         | ✅     |
-| [Event Listeners](./listener.rs)                    | Attach closures to events on elements           | ✅     |
+| [Anti-patterns](./antipatterns.rs)                  | A collection of discouraged patterns            | ✅      |
+| [Complete rsx reference](./rsx_usage.rs)            | A complete reference for all rsx! usage         | ✅      |
+| [Event Listeners](./listener.rs)                    | Attach closures to events on elements           | ✅      |
 
 These web-specific examples must be run with `dioxus-cli` using `dioxus develop --example XYZ`
 

examples/calculator.rs

@@ -18,7 +18,7 @@ enum Operator {
     Div,
 }
 
-static App: FC<()> = |cx| {
+const App: FC<()> = |cx| {
     let cur_val = use_state(cx, || 0.0_f64);
     let operator = use_state(cx, || None as Option<Operator>);
     let display_value = use_state(cx, || "".to_string());
@@ -52,6 +52,7 @@ static App: FC<()> = |cx| {
             display_value.set(format!("-{}", *display_value))
         }
     };
+
     let toggle_percent = move |_| todo!();
 
     let clear_key = move |_| {

examples/manually.rs

@@ -0,0 +1,23 @@
+use dioxus_core::*;
+
+fn main() {
+    use DomEdit::*;
+
+    // .. should result in an "invalid node tree"
+    let edits = vec![
+        CreateElement { tag: "div", id: 0 },
+        // CreatePlaceholder { id: 1 },
+        CreateElement { tag: "h1", id: 2 },
+        CreateTextNode {
+            text: "hello world",
+            id: 3,
+        },
+        AppendChildren { many: 1 },
+        AppendChildren { many: 1 },
+        AppendChildren { many: 1 },
+        // ReplaceWith { many: 1 },
+    ];
+    dioxus_webview::WebviewRenderer::run_with_edits(App, (), |c| c, Some(edits)).expect("failed");
+}
+
+const App: FC<()> = |cx| todo!();

examples/model.rs

@@ -28,129 +28,39 @@ fn main() {
     .expect("failed to launch dioxus app");
 }
 
-enum Operator {
-    Add,
-    Sub,
-    Mul,
-    Div,
-}
-
 static App: FC<()> = |cx| {
-    let (cur_val, set_cur_val) = use_state(cx, || 0.0_f64).classic();
-    let (operator, set_operator) = use_state(cx, || None as Option<Operator>).classic();
-    let (display_value, set_display_value) = use_state(cx, || "0".to_string()).classic();
+    let state = use_state(cx, || Calculator::new());
 
-    let clear_display = display_value.eq("0");
+    let clear_display = state.display_value.eq("0");
     let clear_text = if clear_display { "C" } else { "AC" };
-
-    let input_digit = move |num: u8| {
-        let mut new = if operator.is_some() {
-            String::new()
-        } else if display_value == "0" {
-            String::new()
-        } else {
-            display_value.clone()
-        };
-        if operator.is_some() {
-            let val = display_value.parse::<f64>().unwrap();
-            set_cur_val(val);
-        }
-
-        new.push_str(num.to_string().as_str());
-        set_display_value(new);
-    };
-
-    let input_dot = move || {
-        let mut new = display_value.clone();
-        new.push_str(".");
-        set_display_value(new);
-    };
-
-    let perform_operation = move || {
-        if let Some(op) = operator.as_ref() {
-            let rhs = display_value.parse::<f64>().unwrap();
-            let new_val = match op {
-                Operator::Add => *cur_val + rhs,
-                Operator::Sub => *cur_val - rhs,
-                Operator::Mul => *cur_val * rhs,
-                Operator::Div => *cur_val / rhs,
-            };
-            set_cur_val(new_val);
-            set_display_value(new_val.to_string());
-            set_operator(None);
-        }
-    };
-
-    let toggle_sign = move |_| {
-        if display_value.starts_with("-") {
-            set_display_value(display_value.trim_start_matches("-").to_string())
-        } else {
-            set_display_value(format!("-{}", *display_value))
-        }
-    };
-    let toggle_percent = move |_| todo!();
-
-    let clear_key = move |_| {
-        set_display_value("0".to_string());
-        if !clear_display {
-            set_operator(None);
-            set_cur_val(0.0);
-        }
-    };
-
-    let keydownhandler = move |evt: KeyboardEvent| match evt.key_code() {
-        KeyCode::Backspace => {
-            let mut new = display_value.clone();
-            if !new.as_str().eq("0") {
-                new.pop();
-            }
-            set_display_value(new);
-        }
-        KeyCode::_0 => input_digit(0),
-        KeyCode::_1 => input_digit(1),
-        KeyCode::_2 => input_digit(2),
-        KeyCode::_3 => input_digit(3),
-        KeyCode::_4 => input_digit(4),
-        KeyCode::_5 => input_digit(5),
-        KeyCode::_6 => input_digit(6),
-        KeyCode::_7 => input_digit(7),
-        KeyCode::_8 => input_digit(8),
-        KeyCode::_9 => input_digit(9),
-        KeyCode::Add => set_operator(Some(Operator::Add)),
-        KeyCode::Subtract => set_operator(Some(Operator::Sub)),
-        KeyCode::Divide => set_operator(Some(Operator::Div)),
-        KeyCode::Multiply => set_operator(Some(Operator::Mul)),
-        _ => {}
-    };
+    let formatted = state.formatted_display();
 
     cx.render(rsx! {
-        div {
-            id: "wrapper"
-            div { class: "app" onkeydown: {keydownhandler}
-                style { "{STYLE}" }
-                div { class: "calculator", 
-                    CalculatorDisplay { val: &display_value}
+        div { id: "wrapper"
+            div { class: "app", style { "{STYLE}" }
+                div { class: "calculator", onkeypress: move |evt| state.get_mut().handle_keydown(evt),
+                    div { class: "calculator-display", "{formatted}"}
                     div { class: "calculator-keypad"
                         div { class: "input-keys"
                             div { class: "function-keys"
-                                CalculatorKey { name: "key-clear", onclick: {clear_key} "{clear_text}" }
-                                CalculatorKey { name: "key-sign", onclick: {toggle_sign}, "±"}
-                                CalculatorKey { name: "key-percent", onclick: {toggle_percent} "%"}
+                                CalculatorKey { name: "key-clear", onclick: move |_| state.get_mut().clear_display(), "{clear_text}" }
+                                CalculatorKey { name: "key-sign", onclick: move |_| state.get_mut().toggle_sign(), "±"}
+                                CalculatorKey { name: "key-percent", onclick: move |_| state.get_mut().toggle_percent(), "%"}
                             }
                             div { class: "digit-keys"
-                                CalculatorKey { name: "key-0", onclick: move |_| input_digit(0), "0" }
-                                CalculatorKey { name: "key-dot", onclick: move |_|  input_dot(), "●" }
+                                CalculatorKey { name: "key-0", onclick: move |_| state.get_mut().input_digit(0), "0" }
+                                CalculatorKey { name: "key-dot", onclick: move |_|  state.get_mut().input_dot(), "●" }
                                 {(1..10).map(move |k| rsx!{
-                                    CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| input_digit(k), "{k}" }
+                                    CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_|  state.get_mut().input_digit(k), "{k}" }
                                 })}
                             }
                         }
                         div { class: "operator-keys"
-                            CalculatorKey { name: "key-divide", onclick: move |_| set_operator(Some(Operator::Div)) "÷" }
-                            CalculatorKey { name: "key-multiply", onclick: move |_| set_operator(Some(Operator::Mul)) "×" }
-                            CalculatorKey { name: "key-subtract", onclick: move |_| set_operator(Some(Operator::Sub)) "−" }
-                            CalculatorKey { name: "key-add", onclick: move |_| set_operator(Some(Operator::Add)) "+" }
-                            CalculatorKey { name: "key-equals", onclick: move |_| perform_operation() "=" }
+                            CalculatorKey { name:"key-divide", onclick: move |_| state.get_mut().set_operator(Operator::Div), "÷" }
+                            CalculatorKey { name:"key-multiply", onclick: move |_| state.get_mut().set_operator(Operator::Mul), "×" }
+                            CalculatorKey { name:"key-subtract", onclick: move |_| state.get_mut().set_operator(Operator::Sub), "−" }
+                            CalculatorKey { name:"key-add", onclick: move |_| state.get_mut().set_operator(Operator::Add), "+" }
+                            CalculatorKey { name:"key-equals", onclick: move |_| state.get_mut().perform_operation(), "=" }
                         }
                     }
                 }
@@ -161,10 +71,7 @@ static App: FC<()> = |cx| {
 
 #[derive(Props)]
 struct CalculatorKeyProps<'a> {
-    /// Name!
     name: &'static str,
-
-    /// Click!
     onclick: &'a dyn Fn(MouseEvent),
 }
 
@@ -178,19 +85,106 @@ fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> VNode<'a> {
     })
 }
 
-#[derive(Props, PartialEq)]
-struct CalculatorDisplayProps<'a> {
-    val: &'a str,
+#[derive(Clone)]
+struct Calculator {
+    display_value: String,
+    operator: Option<Operator>,
+    waiting_for_operand: bool,
+    cur_val: f64,
+}
+#[derive(Clone)]
+enum Operator {
+    Add,
+    Sub,
+    Mul,
+    Div,
 }
 
-fn CalculatorDisplay<'a>(cx: Context<'a, CalculatorDisplayProps>) -> VNode<'a> {
-    use separator::Separatable;
-    // Todo, add float support to the num-format crate
-    let formatted = cx.val.parse::<f64>().unwrap().separated_string();
-    // TODO: make it autoscaling with css
-    cx.render(rsx! {
-        div { class: "calculator-display"
-            div { class: "auto-scaling-text", "{formatted}" }
+impl Calculator {
+    fn new() -> Self {
+        Calculator {
+            display_value: "0".to_string(),
+            operator: None,
+            waiting_for_operand: false,
+            cur_val: 0.0,
         }
-    })
+    }
+    fn formatted_display(&self) -> String {
+        use separator::Separatable;
+        self.display_value
+            .parse::<f64>()
+            .unwrap()
+            .separated_string()
+    }
+    fn clear_display(&mut self) {
+        self.display_value = "0".to_string();
+    }
+    fn input_digit(&mut self, digit: u8) {
+        let content = digit.to_string();
+        if self.waiting_for_operand || self.display_value == "0" {
+            self.waiting_for_operand = false;
+            self.display_value = content;
+        } else {
+            self.display_value.push_str(content.as_str());
+        }
+    }
+    fn input_dot(&mut self) {
+        if self.display_value.find(".").is_none() {
+            self.display_value.push_str(".");
+        }
+    }
+    fn perform_operation(&mut self) {
+        if let Some(op) = &self.operator {
+            let rhs = self.display_value.parse::<f64>().unwrap();
+            let new_val = match op {
+                Operator::Add => self.cur_val + rhs,
+                Operator::Sub => self.cur_val - rhs,
+                Operator::Mul => self.cur_val * rhs,
+                Operator::Div => self.cur_val / rhs,
+            };
+            self.cur_val = new_val;
+            self.display_value = new_val.to_string();
+            self.operator = None;
+        }
+    }
+    fn toggle_sign(&mut self) {
+        if self.display_value.starts_with("-") {
+            self.display_value = self.display_value.trim_start_matches("-").to_string();
+        } else {
+            self.display_value = format!("-{}", self.display_value);
+        }
+    }
+    fn toggle_percent(&mut self) {
+        self.display_value = (self.display_value.parse::<f64>().unwrap() / 100.0).to_string();
+    }
+    fn backspace(&mut self) {
+        if !self.display_value.as_str().eq("0") {
+            self.display_value.pop();
+        }
+    }
+    fn set_operator(&mut self, operator: Operator) {
+        self.operator = Some(operator);
+        self.cur_val = self.display_value.parse::<f64>().unwrap();
+        self.waiting_for_operand = true;
+    }
+    fn handle_keydown(&mut self, evt: KeyboardEvent) {
+        match evt.key_code() {
+            KeyCode::Backspace => self.backspace(),
+            KeyCode::_0 => self.input_digit(0),
+            KeyCode::_1 => self.input_digit(1),
+            KeyCode::_2 => self.input_digit(2),
+            KeyCode::_3 => self.input_digit(3),
+            KeyCode::_4 => self.input_digit(4),
+            KeyCode::_5 => self.input_digit(5),
+            KeyCode::_6 => self.input_digit(6),
+            KeyCode::_7 => self.input_digit(7),
+            KeyCode::_8 => self.input_digit(8),
+            KeyCode::_9 => self.input_digit(9),
+            KeyCode::Add => self.operator = Some(Operator::Add),
+            KeyCode::Subtract => self.operator = Some(Operator::Sub),
+            KeyCode::Divide => self.operator = Some(Operator::Div),
+            KeyCode::Multiply => self.operator = Some(Operator::Mul),
+            _ => {}
+        }
+    }
 }

examples/reference/README.md

@@ -21,7 +21,6 @@ This folder holds a bunch of useful reference code. However, none of the code is
 | [NodeRef](./noderefs.rs)                            | How to handle futures with suspense |
 | [Signals](./signals.rs)                             | How to handle futures with suspense |
 | [ToString](./tostring.rs)                           | How to handle futures with suspense |
-| [Fiber](./fiber.rs)                                 | How to handle futures with suspense |
 | [Global CSS](./global_css.rs)                       | How to handle futures with suspense |
 | [State Management](./statemanagement.rs)            | How to handle futures with suspense |
 | [Testing](./testing.rs)                             | How to handle futures with suspense |

examples/reference/empty.rs

@@ -4,5 +4,7 @@
 //! This is a simple pattern that allows you to return no elements!
 
 fn main() {}
+
 use dioxus::prelude::*;
+
 static Example: FC<()> = |cx| cx.render(rsx! { Fragment {} });

examples/reference/fiber.rs

@@ -1,10 +0,0 @@
-use dioxus::prelude::*;
-fn main() {}
-
-static Example: FC<()> = |cx| {
-    cx.render(rsx! {
-        div {
-
-        }
-    })
-};

examples/reference/global_css.rs

@@ -1,10 +1,31 @@
+//! Examples: CSS
+//! -------------
+//!
+//! Originally taken from:
+//! - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal
+//!
+//! Include global styles in your app!
+//!
+//! You can simply drop in a "style" tag and set the inner contents to your stylesheet.
+//! It's slightly more manual than React, but is less magical.
+//!
+//! A coming update with the assets system will make it possible to include global css from child components.
+
 use dioxus::prelude::*;
 fn main() {}
 
-static Example: FC<()> = |cx| {
-    cx.render(rsx! {
-        div {
+const STYLE: &str = r#"
+body {background-color: powderblue;}
+h1   {color: blue;}
+p    {color: red;}
+"#;
 
+const Example: FC<()> = |cx| {
+    cx.render(rsx! {
+        head { style { "{STYLE}" } }
+        body {
+            h1 {"This is a heading"}
+            p {"This is a paragraph"}
         }
     })
 };

examples/reference/iterators.rs

@@ -1,17 +1,38 @@
-use dioxus::prelude::*;
+//! Example: Iterators
+//! ------------------
+//!
+//! This example demonstrates how to use iterators with Dioxus.
+//! Iterators must be used through the curly braces item in element bodies.
+//! While you might be inclined to `.collect::<>` into Html, Dioxus prefers you provide an iterator that
+//! resolves to VNodes. It's more efficient and easier to write than having to `collect` everywhere.
+//!
+//! This also makes it easy to write "pull"-style iterators that don't have a known size.
+
 fn main() {}
 
+use dioxus::prelude::*;
 static Example: FC<()> = |cx| {
     let g = use_state(cx, || 0);
+
     let v = (0..10).map(|f| {
         rsx! {
             li {
-                onclick: move |_| g.set(10)
+                onclick: move |_| g.set(f)
+                "ID: {f}"
+                ul {
+                    {(0..10).map(|k| rsx!{
+                        li {
+                            "Sub iterator: {f}.{k}"
+                        }
+                    })}
+                }
             }
         }
     });
+
     cx.render(rsx! {
-        div {
+        h3 {"Selected: {g}"}
+        ul {
             {v}
         }
     })

examples/showcase.rs

@@ -11,7 +11,6 @@ mod reference {
     mod controlled_inputs;
     mod custom_elements;
     mod empty;
-    mod fiber;
     mod fragments;
     mod global_css;
     mod inline_styles;

examples/testbed.rs

@@ -1,15 +1,28 @@
 use dioxus::prelude::*;
 
-fn main() {}
+fn main() {
+    env_logger::init();
+    dioxus::desktop::launch(Example, |c| c);
+}
 
-static App: FC<()> = |cx| {
-    //
-    cx.render(rsx!(
-        div {
-            h1 {}
-        }
-    ))
+const STYLE: &str = r#"
+body {background-color: powderblue;}
+h1   {color: blue;}
+p    {color: red;}
+"#;
+
+const Example: FC<()> = |cx| {
+    cx.render(rsx! {
+        Child { }
+        Child { }
+    })
 };
 
-#[test]
-fn blah() {}
+const Child: FC<()> = |cx| {
+    cx.render(rsx!(
+        h1 {"1" }
+        h1 {"2" }
+        h1 {"3" }
+        h1 {"4" }
+    ))
+};