bugfixes, testing and refactoring

examples/tui_color_test.rs

@@ -4,54 +4,11 @@ fn main() {
     dioxus::tui::launch_cfg(
         app,
         dioxus::tui::Config {
-            rendering_mode: dioxus::tui::RenderingMode::Rgb,
+            rendering_mode: dioxus::tui::RenderingMode::Ansi,
         },
     );
 }
 
-#[derive(Props, PartialEq)]
-struct BoxProps {
-    x: i32,
-    y: i32,
-    hue: f32,
-    alpha: f32,
-}
-fn Box(cx: Scope<BoxProps>) -> Element {
-    let painted = use_state(&cx, || true);
-
-    // use_future(&cx, (), move |_| {
-    //     let count = count.to_owned();
-    //     let update = cx.schedule_update();
-    //     async move {
-    //         loop {
-    //             count.with_mut(|i| *i += 1);
-    //             tokio::time::sleep(std::time::Duration::from_millis(800)).await;
-    //             update();
-    //         }
-    //     }
-    // });
-
-    let x = cx.props.x;
-    let y = cx.props.y;
-    let hue = cx.props.hue;
-    let current_painted = painted.get();
-    let alpha = cx.props.alpha + if *current_painted { 100.0 } else { 0.0 };
-
-    cx.render(rsx! {
-        div {
-            left: "{x}px",
-            top: "{y}px",
-            width: "100%",
-            height: "100%",
-            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
-            align_items: "center",
-            onkeydown: |_| painted.with_mut(|i| *i = !*i),
-            onmouseenter: |_| painted.with_mut(|i| *i = !*i),
-            p{" "}
-        }
-    })
-}
-
 fn app(cx: Scope) -> Element {
     let steps = 50;
     cx.render(rsx! {
@@ -71,11 +28,12 @@ fn app(cx: Scope) -> Element {
                                 {
                                     let alpha = y as f32*100.0/steps as f32;
                                     cx.render(rsx! {
-                                        Box{
-                                            x: x,
-                                            y: y,
-                                            alpha: alpha,
-                                            hue: hue,
+                                        div {
+                                            left: "{x}px",
+                                            top: "{y}px",
+                                            width: "10%",
+                                            height: "100%",
+                                            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
                                         }
                                     })
                                 }

examples/tui_readme.rs

@@ -5,26 +5,15 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let alpha = use_state(&cx, || 100);
-
     cx.render(rsx! {
         div {
-            onwheel: move |evt| alpha.set((**alpha + evt.data.delta_y as i64).min(100).max(0)),
-
             width: "100%",
             height: "10px",
             background_color: "red",
-            // justify_content: "center",
-            // align_items: "center",
+            justify_content: "center",
+            align_items: "center",
 
-            p{
-                color: "rgba(0, 255, 0, {alpha}%)",
-                "Hello world!"
-            }
-            p{
-                "{alpha}"
-            }
-            // p{"Hi"}
+            "Hello world!"
         }
     })
 }

examples/tui_stress_test.rs

@@ -0,0 +1,88 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch_cfg(
+        app,
+        dioxus::tui::Config {
+            rendering_mode: dioxus::tui::RenderingMode::Rgb,
+        },
+    );
+}
+
+#[derive(Props, PartialEq)]
+struct BoxProps {
+    x: i32,
+    y: i32,
+    hue: f32,
+    alpha: f32,
+}
+#[allow(non_snake_case)]
+fn Box(cx: Scope<BoxProps>) -> Element {
+    let count = use_state(&cx, || 0);
+
+    use_future(&cx, (), move |_| {
+        let count = count.to_owned();
+        let update = cx.schedule_update();
+        async move {
+            loop {
+                count.with_mut(|i| *i += 1);
+                tokio::time::sleep(std::time::Duration::from_millis(800)).await;
+                update();
+            }
+        }
+    });
+
+    let x = cx.props.x * 2;
+    let y = cx.props.y * 2;
+    let hue = cx.props.hue;
+    let count = count.get();
+    let alpha = cx.props.alpha + (count % 100) as f32;
+
+    cx.render(rsx! {
+        div {
+            left: "{x}%",
+            top: "{y}%",
+            width: "100%",
+            height: "100%",
+            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
+            align_items: "center",
+            p{"{count}"}
+        }
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    let steps = 50;
+    cx.render(rsx! {
+        div{
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            (0..=steps).map(|x|
+                {
+                    let hue = x as f32*360.0/steps as f32;
+                    cx.render(rsx! {
+                        div{
+                            width: "100%",
+                            height: "100%",
+                            flex_direction: "row",
+                            (0..=steps).map(|y|
+                                {
+                                    let alpha = y as f32*100.0/steps as f32;
+                                    cx.render(rsx! {
+                                        Box{
+                                            x: x,
+                                            y: y,
+                                            alpha: alpha,
+                                            hue: hue,
+                                        }
+                                    })
+                                }
+                            )
+                        }
+                    })
+                }
+            )
+        }
+    })
+}

examples/tui_text.rs

@@ -15,7 +15,7 @@ fn app(cx: Scope) -> Element {
             onwheel: move |evt| alpha.set((**alpha + evt.data.delta_y as i64).min(100).max(0)),
 
             p {
-                // background_color: "black",
+                background_color: "black",
                 flex_direction: "column",
                 justify_content: "center",
                 align_items: "center",

packages/core/src/diff.rs

@@ -423,6 +423,7 @@ impl<'b> DiffState<'b> {
         match (old.children.len(), new.children.len()) {
             (0, 0) => {}
             (0, _) => {
+                self.mutations.push_root(root);
                 let created = self.create_children(new.children);
                 self.mutations.append_children(created as u32);
             }

packages/native-core/Cargo.toml

@@ -3,8 +3,6 @@ name = "dioxus-native-core"
 version = "0.2.0"
 edition = "2021"
 license = "MIT/Apache-2.0"
-authors = ["@dementhos"]
-description = "TUI-based renderer for Dioxus"
 repository = "https://github.com/DioxusLabs/dioxus/"
 homepage = "https://dioxuslabs.com"
 
@@ -13,5 +11,10 @@ dioxus-core = { path = "../core", version = "^0.2.0" }
 dioxus-html = { path = "../html", version = "^0.2.0" }
 dioxus-core-macro = { path = "../core-macro", version = "^0.2.0" }
 
-stretch2 = "0.4.1"
+# stretch2 = "0.4.1"
+stretch2 = { git = "https://github.com/Demonthos/stretch.git" }
 smallvec = "1.6"
+fxhash = "0.2"
+
+[dev-dependencies]
+rand = "0.8.5"