Mutations

let els = this.stack.splice(this.stack.length - $n$); let node = this.loadChild($ptr$, $len$); node.replaceWith(...els);

                    TemplateNode::Text { .. } | TemplateNode::Element { .. } => {
                        if let Some(to) = to.as_deref_mut() {
                            self.load_template_root(mount, root_idx, dom, to);
                        }

                        // If this is an element, load in all of the placeholder or dynamic content under this root element too
                        if matches!(root, TemplateNode::Element { .. }) {
                            // !!VERY IMPORTANT!!
                            // Write out all attributes before we load the children. Loading the children will change paths we rely on
                            // to assign ids to elements with dynamic attributes
                            if let Some(to) = to.as_deref_mut() {
                                self.write_attrs(mount, &mut attrs, root_idx as u8, dom, to);
                            }
                            // This operation relies on the fact that the root node is the top node on the stack so we need to do it here
                            self.load_placeholders(
                                mount,
                                &mut nodes,
                                root_idx as u8,
                                dom,
                                to.as_deref_mut(),
                            );
                        }

                        // This creates one node on the stack
                        1
                    }

        let reversed_iter = (start..=end).rev();

        for dynamic_node_id in reversed_iter {
            let m = self.create_dynamic_node(
                &self.dynamic_nodes[dynamic_node_id],
                mount,
                dynamic_node_id,
                dom,
                to.as_deref_mut(),
            );
            if let Some(to) = to.as_deref_mut() {
                // If we actually created real new nodes, we need to replace the placeholder for this dynamic node with the new dynamic nodes
                if m > 0 {
                    // The path is one shorter because the top node is the root
                    let path = &self.template.node_paths[dynamic_node_id][1..];
                    to.replace_placeholder_with_nodes(path, m);
                }
            }
        }

fn app() -> Element {
  let mut count = use_signal(|| 0);
  rsx! {
    div { class: "box", id: "c{count}",
      h1 { "Counter" }
      p { "count = {count}" }
      button { onclick: move |_| count += 1, "+1" }
      Child { n: count() }
    }
  }
}

#[component]
fn Child(n: i32) -> Element {
  rsx! {
    if n % 2 == 0 {
      span { "even" }
    } else {
      "odd"
    }
  }
}

node_paths: [[0, 1, 0], [0, 3]]
attr_paths: [[0], [0, 2]]

== rebuild_to_vec: 9 edits
 0 LoadTemplate { index: 0, id: ElementId(1) }
 1 SetAttribute { name: "id", ns: None, value: Text("c0"), id: ElementId(1) }
 2 AssignId { path: [2], id: ElementId(2) }
 3 NewEventListener { name: "click", id: ElementId(2) }
 4 LoadTemplate { index: 0, id: ElementId(3) }
 5 ReplacePlaceholder { path: [3], m: 1 }
 6 CreateTextNode { value: "count = 0", id: ElementId(4) }
 7 ReplacePlaceholder { path: [1, 0], m: 1 }
 8 AppendChildren { id: ElementId(0), m: 1 }

== MiniDom
load_template(t0, 0, 1) (new template)         stack=1
set_attribute(id, Some("c0"), 1)               stack=1
assign_node_id([2], 2)                         stack=1
create_event_listener(click, 2)                stack=1
load_template(t1, 0, 3) (new template)         stack=2
replace_placeholder_with_nodes([3], m=1)       stack=1
create_text_node("count = 0", 4)               stack=2
replace_placeholder_with_nodes([1, 0], m=1)    stack=1
append_children(0, m=1)                        stack=0

MiniDom html: <div class="box" id="c0"><h1>Counter</h1><p>count = 0</p><button [onclick]>+1</button><span>even</span></div>
ssr html:     <div class="box" id="c0"><h1>Counter</h1><p>count = 0</p><button>+1</button><span>even</span></div>

rebuild_in_place then ssr: <div class="box" id="c0"><h1>Counter</h1><p>count = 0</p><button>+1</button><span>even</span></div>

before: <div class="box" id="c0"><h1>Counter</h1><p>count = 0</p><button [onclick]>+1</button><span>even</span></div>
-- click #1
set_attribute(id, Some("c1"), 1)               stack=0
set_node_text("count = 1", 4)                  stack=0
load_template(t2, 0, 5) (new template)         stack=1
replace_node_with(3, m=1)                      stack=0
after:  <div class="box" id="c1"><h1>Counter</h1><p>count = 1</p><button [onclick]>+1</button>odd</div>
-- click #2
set_attribute(id, Some("c2"), 1)               stack=0
set_node_text("count = 2", 4)                  stack=0
load_template(t1, 0, 3)                        stack=1
replace_node_with(5, m=1)                      stack=0
after:  <div class="box" id="c2"><h1>Counter</h1><p>count = 2</p><button [onclick]>+1</button><span>even</span></div>

== keyed swap [1,2,3] -> [3,2,1]
before: <ul [onclick]><li>1</li><li>2</li><li>3</li></ul>
push_root(6)                                   stack=1
push_root(4)                                   stack=2
insert_nodes_before(2, m=2)                    stack=0
after:  <ul [onclick]><li>3</li><li>2</li><li>1</li></ul>

    fn load_template(&mut self, _template: Template, index: usize, id: ElementId) {
        self.edits.push(Mutation::LoadTemplate { index, id })
    }

            value: match value {
                AttributeValue::Text(s) => AttributeValue::Text(s.clone()),
                AttributeValue::Bool(b) => AttributeValue::Bool(*b),
                AttributeValue::Float(n) => AttributeValue::Float(*n),
                AttributeValue::Int(n) => AttributeValue::Int(*n),
                AttributeValue::None => AttributeValue::None,
                _ => panic!("Cannot serialize attribute value"),
            },

            websys_dom.skip_mutations = true;

                virtual_dom.rebuild(&mut websys_dom);
            });
            websys_dom.skip_mutations = false;