Fix inserting attributes after expanding dynamic nodes (#3094)

packages/core/tests/many_roots.rs

@@ -2,16 +2,24 @@
 
 use dioxus::dioxus_core::Mutation::*;
 use dioxus::prelude::*;
-use dioxus_core::ElementId;
+use dioxus_core::{AttributeValue, ElementId};
+use pretty_assertions::assert_eq;
 
 /// Should push the text node onto the stack and modify it
+/// Regression test for https://github.com/DioxusLabs/dioxus/issues/2809 and https://github.com/DioxusLabs/dioxus/issues/3055
 #[test]
 fn many_roots() {
     fn app() -> Element {
+        let width = "100%";
         rsx! {
             div {
                 MyNav {}
                 MyOutlet {}
+                div {
+                    // We need to make sure that dynamic attributes are set before the nodes before them are expanded
+                    // If they are set after, then the paths are incorrect
+                    width,
+                }
             }
         }
     }
@@ -38,13 +46,21 @@ fn many_roots() {
         [
             // load the div {} container
             LoadTemplate { index: 0, id: ElementId(1) },
-            // Load myoutlet first
-            LoadTemplate { index: 0, id: ElementId(2) },
-            ReplacePlaceholder { path: &[1], m: 1 },
-            // Then the MyNav
+            // Set the width attribute first
+            AssignId { path: &[2], id: ElementId(2,) },
+            SetAttribute {
+                name: "width",
+                ns: Some("style",),
+                value: AttributeValue::Text("100%".to_string()),
+                id: ElementId(2,),
+            },
+            // Load MyOutlet next
             LoadTemplate { index: 0, id: ElementId(3) },
-            LoadTemplate { index: 1, id: ElementId(4) },
-            LoadTemplate { index: 2, id: ElementId(5) },
+            ReplacePlaceholder { path: &[1], m: 1 },
+            // Then MyNav
+            LoadTemplate { index: 0, id: ElementId(4) },
+            LoadTemplate { index: 1, id: ElementId(5) },
+            LoadTemplate { index: 2, id: ElementId(6) },
             ReplacePlaceholder { path: &[0], m: 3 },
             // Then mount the div to the dom
             AppendChildren { m: 1, id: ElementId(0) },