chore: more refactoring, docs

packages/dioxus/Cargo.toml

@@ -35,9 +35,6 @@ env_logger = "0.9.0"
 tokio = { version = "1.21.2", features = ["full"] }
 # dioxus-edit-stream = { path = "../edit-stream" }
 
-[[bench]]
-name = "create"
-harness = false
 
 [[bench]]
 name = "jsframework"

packages/dioxus/benches/create.rs

@@ -1 +0,0 @@
-fn main() {}

packages/dioxus/benches/jsframework.rs

@@ -5,9 +5,14 @@
 //! to be made, but the change application phase will be just as performant as the vanilla wasm_bindgen code. In essence,
 //! we are measuring the overhead of Dioxus, not the performance of the "apply" phase.
 //!
-//! On my MBP 2019:
-//! - Dioxus takes 3ms to create 1_000 rows
-//! - Dioxus takes 30ms to create 10_000 rows
+//!
+//! Pre-templates (Mac M1):
+//! - 3ms to create 1_000 rows
+//! - 30ms to create 10_000 rows
+//!
+//! Post-templates
+//! - 580us to create 1_000 rows
+//! - 6.2ms to create 10_000 rows
 //!
 //! As pure "overhead", these are amazing good numbers, mostly slowed down by hitting the global allocator.
 //! These numbers don't represent Dioxus with the heuristic engine installed, so I assume it'll be even faster.
@@ -20,25 +25,26 @@ criterion_group!(mbenches, create_rows);
 criterion_main!(mbenches);
 
 fn create_rows(c: &mut Criterion) {
-    static App: Component = |cx| {
+    fn app(cx: Scope) -> Element {
         let mut rng = SmallRng::from_entropy();
 
-        render!(table {
-            tbody {
-                (0..10_000_usize).map(|f| {
-                    let label = Label::new(&mut rng);
-                    rsx!(Row {
-                        row_id: f,
-                        label: label
+        render!(
+            table {
+                tbody {
+                    (0..10_000_usize).map(|f| {
+                        let label = Label::new(&mut rng);
+                        rsx!( Row { row_id: f, label: label } )
                     })
-                })
+                }
             }
-        })
-    };
+        )
+    }
 
     c.bench_function("create rows", |b| {
+        let mut dom = VirtualDom::new(app);
+        dom.rebuild();
+
         b.iter(|| {
-            let mut dom = VirtualDom::new(App);
             let g = dom.rebuild();
             assert!(g.edits.len() > 1);
         })

packages/dioxus/examples/stress.rs

@@ -0,0 +1,101 @@
+use dioxus::prelude::*;
+use rand::prelude::*;
+
+fn main() {
+    let mut dom = VirtualDom::new(app);
+
+    dom.rebuild();
+
+    for _ in 0..1000 {
+        dom.rebuild();
+    }
+}
+
+fn app(cx: Scope) -> Element {
+    let mut rng = SmallRng::from_entropy();
+
+    render! (
+        table {
+            tbody {
+                (0..10_000_usize).map(|f| {
+                    let label = Label::new(&mut rng);
+                    rsx!( Row { row_id: f, label: label } )
+                })
+            }
+        }
+    )
+}
+
+#[derive(PartialEq, Props)]
+struct RowProps {
+    row_id: usize,
+    label: Label,
+}
+fn Row(cx: Scope<RowProps>) -> Element {
+    let [adj, col, noun] = cx.props.label.0;
+    render! {
+        tr {
+            td { class:"col-md-1", "{cx.props.row_id}" }
+            td { class:"col-md-1", onclick: move |_| { /* run onselect */ },
+                a { class: "lbl", "{adj}" "{col}" "{noun}" }
+            }
+            td { class: "col-md-1",
+                a { class: "remove", onclick: move |_| {/* remove */},
+                    span { class: "glyphicon glyphicon-remove remove", aria_hidden: "true" }
+                }
+            }
+            td { class: "col-md-6" }
+        }
+    }
+}
+
+#[derive(PartialEq)]
+struct Label([&'static str; 3]);
+
+impl Label {
+    fn new(rng: &mut SmallRng) -> Self {
+        Label([
+            ADJECTIVES.choose(rng).unwrap(),
+            COLOURS.choose(rng).unwrap(),
+            NOUNS.choose(rng).unwrap(),
+        ])
+    }
+}
+
+static ADJECTIVES: &[&str] = &[
+    "pretty",
+    "large",
+    "big",
+    "small",
+    "tall",
+    "short",
+    "long",
+    "handsome",
+    "plain",
+    "quaint",
+    "clean",
+    "elegant",
+    "easy",
+    "angry",
+    "crazy",
+    "helpful",
+    "mushy",
+    "odd",
+    "unsightly",
+    "adorable",
+    "important",
+    "inexpensive",
+    "cheap",
+    "expensive",
+    "fancy",
+];
+
+static COLOURS: &[&str] = &[
+    "red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black",
+    "orange",
+];
+
+static NOUNS: &[&str] = &[
+    "table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
+    "pizza", "mouse", "keyboard",
+];

packages/dioxus/tests/rsx_syntax.rs

@@ -1,5 +1,3 @@
-use dioxus::prelude::*;
-
 fn basic_syntax_is_a_template(cx: Scope) -> Element {
     let asd = 123;
     let var = 123;
@@ -23,8 +21,63 @@ fn basic_syntax_is_a_template(cx: Scope) -> Element {
     })
 }
 
+// imports come after the test since the rsx! macro is sensitive to its location in the file
+// (the byte index is used to differentiate sub templates)
+use dioxus::core::{ElementId, Mutation};
+use dioxus::prelude::*;
+
 #[test]
 fn dual_stream() {
     let mut dom = VirtualDom::new(basic_syntax_is_a_template);
-    dbg!(dom.rebuild());
+    let edits = dom.rebuild();
+
+    use Mutation::*;
+    assert_eq!(
+        edits.template_mutations,
+        vec![
+            CreateElement { name: "div", namespace: None, id: ElementId(1) },
+            SetAttribute { name: "class", value: "asd", id: ElementId(1) },
+            CreateElement { name: "div", namespace: None, id: ElementId(2) },
+            CreatePlaceholder { id: ElementId(3) },
+            AppendChildren { m: 1 },
+            CreateElement { name: "div", namespace: None, id: ElementId(4) },
+            CreateElement { name: "h1", namespace: None, id: ElementId(5) },
+            CreateText { value: "var" },
+            AppendChildren { m: 1 },
+            CreateElement { name: "p", namespace: None, id: ElementId(6) },
+            CreateText { value: "you're great!" },
+            AppendChildren { m: 1 },
+            CreateElement { name: "div", namespace: None, id: ElementId(7) },
+            SetAttribute { name: "background-color", value: "red", id: ElementId(7) },
+            CreateElement { name: "h1", namespace: None, id: ElementId(8) },
+            CreateText { value: "var" },
+            AppendChildren { m: 1 },
+            CreateElement { name: "div", namespace: None, id: ElementId(9) },
+            CreateElement { name: "b", namespace: None, id: ElementId(10) },
+            CreateText { value: "asd" },
+            AppendChildren { m: 1 },
+            CreateText { value: "not great" },
+            AppendChildren { m: 2 },
+            AppendChildren { m: 2 },
+            CreateElement { name: "p", namespace: None, id: ElementId(11) },
+            CreateText { value: "you're great!" },
+            AppendChildren { m: 1 },
+            AppendChildren { m: 4 },
+            AppendChildren { m: 2 },
+            SaveTemplate { name: "packages/dioxus/tests/rsx_syntax.rs:5:15:122", m: 1 }
+        ]
+    );
+
+    assert_eq!(
+        edits.edits,
+        vec![
+            LoadTemplate { name: "packages/dioxus/tests/rsx_syntax.rs:5:15:122", index: 0 },
+            AssignId { path: &[], id: ElementId(12) },
+            SetAttribute { name: "class", value: "123", id: ElementId(12) },
+            SetAttribute { name: "onclick", value: "asd", id: ElementId(12) }, // ---- todo: listeners
+            HydrateText { path: &[0, 0], value: "123", id: ElementId(13) },
+            ReplacePlaceholder { m: 1, path: &[0, 0] },
+            AppendChildren { m: 1 }
+        ]
+    );
 }

packages/dioxus/tests/suspense.rs

@@ -1,6 +1,7 @@
 use std::future::IntoFuture;
 
 use dioxus::prelude::*;
+use dioxus_core::SuspenseBoundary;
 
 #[inline_props]
 fn suspense_boundary<'a>(cx: Scope<'a>, children: Element<'a>) -> Element {

packages/dioxus/tests/task.rs

@@ -1 +0,0 @@
-fn main() {}