|
@@ -0,0 +1,46 @@
|
|
|
|
+use dioxus::core::Mutation::*;
|
|
|
|
+use dioxus::prelude::*;
|
|
|
|
+use dioxus_core::ElementId;
|
|
|
|
+
|
|
|
|
+// A real-world usecase of templates at peak performance
|
|
|
|
+// In react, this would be a lot of node creation.
|
|
|
|
+//
|
|
|
|
+// In Dioxus, we memoize the rsx! body and simplify it down to a few template loads
|
|
|
|
+fn app(cx: Scope) -> Element {
|
|
|
|
+ cx.render(rsx! {
|
|
|
|
+ div {
|
|
|
|
+ (0..3).map(|i| rsx! {
|
|
|
|
+ div {
|
|
|
|
+ h1 { "hello world! "}
|
|
|
|
+ p { "{i}" }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+#[test]
|
|
|
|
+fn list_renders() {
|
|
|
|
+ let mut dom = VirtualDom::new(app);
|
|
|
|
+
|
|
|
|
+ let edits = dom.rebuild().santize();
|
|
|
|
+
|
|
|
|
+ assert_eq!(
|
|
|
|
+ edits.edits,
|
|
|
|
+ [
|
|
|
|
+ // Load the outer div
|
|
|
|
+ LoadTemplate { name: "template", index: 0 },
|
|
|
|
+ // Load each template one-by-one, rehydrating it
|
|
|
|
+ LoadTemplate { name: "template", index: 0 },
|
|
|
|
+ HydrateText { path: &[1, 0], value: "0", id: ElementId(6) },
|
|
|
|
+ LoadTemplate { name: "template", index: 0 },
|
|
|
|
+ HydrateText { path: &[1, 0], value: "1", id: ElementId(7) },
|
|
|
|
+ LoadTemplate { name: "template", index: 0 },
|
|
|
|
+ HydrateText { path: &[1, 0], value: "2", id: ElementId(8) },
|
|
|
|
+ // Replace the 0th childn on the div with the 3 templates on the stack
|
|
|
|
+ ReplacePlaceholder { m: 3, path: &[0] },
|
|
|
|
+ // Append the container div to the dom
|
|
|
|
+ AppendChildren { m: 1 }
|
|
|
|
+ ]
|
|
|
|
+ )
|
|
|
|
+}
|