switch to a mutations trait to fix some lifetime issues

packages/core/src/create.rs

@@ -1,6 +1,4 @@
-use crate::innerlude::{ElementPath, ElementRef, VComponent, VPlaceholder, VText};
-use crate::mutations::Mutation;
-use crate::mutations::Mutation::*;
+use crate::innerlude::{ElementPath, ElementRef, VComponent, VPlaceholder, VText, WriteMutations};
 use crate::nodes::VNode;
 use crate::nodes::{DynamicNode, TemplateNode};
 use crate::virtual_dom::VirtualDom;
@@ -64,15 +62,20 @@ impl VirtualDom {
     /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
     ///
     /// This method pushes the ScopeID to the internal scopestack and returns the number of nodes created.
-    pub(crate) fn create_scope(&mut self, scope: ScopeId, template: &VNode) -> usize {
+    pub(crate) fn create_scope(
+        &mut self,
+        scope: ScopeId,
+        template: &VNode,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         self.runtime.scope_stack.borrow_mut().push(scope);
-        let nodes = self.create(template);
+        let nodes = self.create(template, to);
         self.runtime.scope_stack.borrow_mut().pop();
         nodes
     }
 
     /// Create this template and write its mutations
-    pub(crate) fn create(&mut self, node: &VNode) -> usize {
+    pub(crate) fn create(&mut self, node: &VNode, to: &mut impl WriteMutations) -> usize {
         // check for a overriden template
         #[cfg(debug_assertions)]
         {
@@ -95,12 +98,7 @@ impl VirtualDom {
 
         // The best renderers will have templates prehydrated and registered
         // Just in case, let's create the template using instructions anyways
-        self.register_template(node.template.get());
-
-        // we know that this will generate at least one mutation per node
-        self.mutations
-            .edits
-            .reserve(node.template.get().roots.len());
+        self.register_template(node.template.get(), to);
 
         // Walk the roots, creating nodes and assigning IDs
         // nodes in an iterator of ((dynamic_node_index, sorted_index), path)
@@ -153,30 +151,46 @@ impl VirtualDom {
             .map(|(idx, root)| match root {
                 DynamicText { id } | Dynamic { id } => {
                     nodes.next().unwrap();
-                    self.write_dynamic_root(node, *id)
+                    self.write_dynamic_root(node, *id, to)
                 }
                 Element { .. } => {
                     #[cfg(not(debug_assertions))]
                     let id = self.write_element_root(node, idx, &mut attrs, &mut nodes, &[]);
                     #[cfg(debug_assertions)]
-                    let id =
-                        self.write_element_root(node, idx, &mut attrs, &mut nodes, &nodes_sorted);
+                    let id = self.write_element_root(
+                        node,
+                        idx,
+                        &mut attrs,
+                        &mut nodes,
+                        &nodes_sorted,
+                        to,
+                    );
                     id
                 }
-                Text { .. } => self.write_static_text_root(node, idx),
+                Text { .. } => self.write_static_text_root(node, idx, to),
             })
             .sum()
     }
 
-    fn write_static_text_root(&mut self, node: &VNode, idx: usize) -> usize {
+    fn write_static_text_root(
+        &mut self,
+        node: &VNode,
+        idx: usize,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         // Simply just load the template root, no modifications needed
-        self.load_template_root(node, idx);
+        self.load_template_root(node, idx, to);
 
         // Text producs just one node on the stack
         1
     }
 
-    fn write_dynamic_root(&mut self, template: &VNode, idx: usize) -> usize {
+    fn write_dynamic_root(
+        &mut self,
+        template: &VNode,
+        idx: usize,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         use DynamicNode::*;
         match &template.dynamic_nodes[idx] {
             node @ Component { .. } | node @ Fragment(_) => {
@@ -187,7 +201,7 @@ impl VirtualDom {
                     element: template.clone(),
                     scope: self.runtime.current_scope_id().unwrap_or(ScopeId(0)),
                 };
-                self.create_dynamic_node(template_ref, node)
+                self.create_dynamic_node(template_ref, node, to)
             }
             Placeholder(VPlaceholder { id, parent }) => {
                 let template_ref = ElementRef {
@@ -199,21 +213,17 @@ impl VirtualDom {
                 };
                 *parent.borrow_mut() = Some(template_ref);
                 let id = self.set_slot(id);
-                self.mutations.push(CreatePlaceholder { id });
+                to.create_placeholder(id);
                 1
             }
             Text(VText { id, value }) => {
                 let id = self.set_slot(id);
-                self.create_static_text(value, id);
+                to.create_text_node(value, id);
                 1
             }
         }
     }
 
-    fn create_static_text(&mut self, value: &str, id: ElementId) {
-        self.mutations.push(CreateTextNode { value, id });
-    }
-
     /// We write all the descendent data for this element
     ///
     /// Elements can contain other nodes - and those nodes can be dynamic or static
@@ -226,15 +236,22 @@ impl VirtualDom {
         dynamic_attrs: &mut Peekable<impl Iterator<Item = (usize, &'static [u8])>>,
         dynamic_nodes_iter: &mut Peekable<impl Iterator<Item = ((usize, usize), &'static [u8])>>,
         dynamic_nodes: &[(usize, &'static [u8])],
+        to: &mut impl WriteMutations,
     ) -> usize {
         // Load the template root and get the ID for the node on the stack
-        let root_on_stack = self.load_template_root(template, root_idx);
+        let root_on_stack = self.load_template_root(template, root_idx, to);
 
         // Write all the attributes below this root
-        self.write_attrs_on_root(dynamic_attrs, root_idx as u8, root_on_stack, template);
+        self.write_attrs_on_root(dynamic_attrs, root_idx as u8, root_on_stack, template, to);
 
         // Load in all of the placeholder or dynamic content under this root too
-        self.load_placeholders(dynamic_nodes_iter, dynamic_nodes, root_idx as u8, template);
+        self.load_placeholders(
+            dynamic_nodes_iter,
+            dynamic_nodes,
+            root_idx as u8,
+            template,
+            to,
+        );
 
         1
     }
@@ -259,6 +276,7 @@ impl VirtualDom {
         dynamic_nodes: &[(usize, &'static [u8])],
         root_idx: u8,
         template: &VNode,
+        to: &mut impl WriteMutations,
     ) {
         let (start, end) = match collect_dyn_node_range(dynamic_nodes_iter, root_idx) {
             Some((a, b)) => (a, b),
@@ -281,11 +299,11 @@ impl VirtualDom {
                 element: template.clone(),
                 scope: self.runtime.current_scope_id().unwrap_or(ScopeId(0)),
             };
-            let m = self.create_dynamic_node(boundary_ref, &template.dynamic_nodes[idx]);
+            let m = self.create_dynamic_node(boundary_ref, &template.dynamic_nodes[idx], to);
             if m > 0 {
                 // The path is one shorter because the top node is the root
                 let path = &template.template.get().node_paths[idx][1..];
-                self.mutations.push(ReplacePlaceholder { m, path });
+                to.replace_placeholder_with_nodes(path, m);
             }
         }
     }
@@ -296,14 +314,15 @@ impl VirtualDom {
         root_idx: u8,
         root: ElementId,
         node: &VNode,
+        to: &mut impl WriteMutations,
     ) {
         while let Some((mut attr_id, path)) =
             attrs.next_if(|(_, p)| p.first().copied() == Some(root_idx))
         {
-            let id = self.assign_static_node_as_dynamic(path, root);
+            let id = self.assign_static_node_as_dynamic(path, root, to);
 
             loop {
-                self.write_attribute(node, attr_id, &node.dynamic_attrs[attr_id], id);
+                self.write_attribute(node, attr_id, &node.dynamic_attrs[attr_id], id, to);
 
                 // Only push the dynamic attributes forward if they match the current path (same element)
                 match attrs.next_if(|(_, p)| *p == path) {
@@ -320,6 +339,7 @@ impl VirtualDom {
         idx: usize,
         attribute: &crate::Attribute,
         id: ElementId,
+        to: &mut impl WriteMutations,
     ) {
         // Make sure we set the attribute's associated id
         attribute.mounted_element.set(id);
@@ -336,35 +356,27 @@ impl VirtualDom {
                     scope: self.runtime.current_scope_id().unwrap_or(ScopeId(0)),
                 };
                 self.elements[id.0] = Some(element_ref);
-                self.mutations.push(NewEventListener {
-                    // all listeners start with "on"
-                    name: &unbounded_name[2..],
-                    id,
-                })
+                to.create_event_listener(&unbounded_name[2..], id);
             }
             _ => {
                 let unbounded_value = &attribute.value;
 
-                self.mutations.push(SetAttribute {
-                    name: unbounded_name,
-                    value: unbounded_value,
-                    ns: attribute.namespace,
-                    id,
-                })
+                to.set_attribute(unbounded_name, attribute.namespace, unbounded_value, id);
             }
         }
     }
 
-    fn load_template_root(&mut self, template: &VNode, root_idx: usize) -> ElementId {
+    fn load_template_root(
+        &mut self,
+        template: &VNode,
+        root_idx: usize,
+        to: &mut impl WriteMutations,
+    ) -> ElementId {
         // Get an ID for this root since it's a real root
         let this_id = self.next_element();
         template.root_ids.borrow_mut()[root_idx] = this_id;
 
-        self.mutations.push(LoadTemplate {
-            name: template.template.get().name,
-            index: root_idx,
-            id: this_id,
-        });
+        to.load_template(template.template.get().name, root_idx, this_id);
 
         this_id
     }
@@ -380,6 +392,7 @@ impl VirtualDom {
         &mut self,
         path: &'static [u8],
         this_id: ElementId,
+        to: &mut impl WriteMutations,
     ) -> ElementId {
         if path.len() == 1 {
             return this_id;
@@ -389,16 +402,17 @@ impl VirtualDom {
         // Else, it's deep in the template and we should create a new id for it
         let id = self.next_element();
 
-        self.mutations.push(Mutation::AssignId {
-            path: &path[1..],
-            id,
-        });
+        to.assign_node_id(&path[1..], id);
 
         id
     }
 
     /// Insert a new template into the VirtualDom's template registry
-    pub(crate) fn register_template_first_byte_index(&mut self, mut template: Template<'static>) {
+    pub(crate) fn register_template_first_byte_index(
+        &mut self,
+        mut template: Template<'static>,
+        to: &mut impl WriteMutations,
+    ) {
         // First, make sure we mark the template as seen, regardless if we process it
         let (path, _) = template.name.rsplit_once(':').unwrap();
         if let Some((_, old_template)) = self
@@ -421,14 +435,18 @@ impl VirtualDom {
 
         // If it's all dynamic nodes, then we don't need to register it
         if !template.is_completely_dynamic() {
-            self.mutations.templates.push(template);
+            to.register_template(template);
         }
     }
 
     /// Insert a new template into the VirtualDom's template registry
     // used in conditional compilation
     #[allow(unused_mut)]
-    pub(crate) fn register_template(&mut self, mut template: Template<'static>) {
+    pub(crate) fn register_template(
+        &mut self,
+        mut template: Template<'static>,
+        to: &mut impl WriteMutations,
+    ) {
         let (path, byte_index) = template.name.rsplit_once(':').unwrap();
 
         let byte_index = byte_index.parse::<usize>().unwrap();
@@ -458,22 +476,32 @@ impl VirtualDom {
 
             // If it's all dynamic nodes, then we don't need to register it
             if !template.is_completely_dynamic() {
-                self.mutations.templates.push(template);
+                to.register_template(template)
             }
         }
     }
 
-    pub(crate) fn create_dynamic_node(&mut self, parent: ElementRef, node: &DynamicNode) -> usize {
+    pub(crate) fn create_dynamic_node(
+        &mut self,
+        parent: ElementRef,
+        node: &DynamicNode,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         use DynamicNode::*;
         match node {
-            Text(text) => self.create_dynamic_text(parent, text),
-            Placeholder(place) => self.create_placeholder(place, parent),
-            Component(component) => self.create_component_node(Some(parent), component),
-            Fragment(frag) => self.create_children(frag, Some(parent)),
+            Text(text) => self.create_dynamic_text(parent, text, to),
+            Placeholder(place) => self.create_placeholder(place, parent, to),
+            Component(component) => self.create_component_node(Some(parent), component, to),
+            Fragment(frag) => self.create_children(frag, Some(parent), to),
         }
     }
 
-    fn create_dynamic_text(&mut self, parent: ElementRef, text: &VText) -> usize {
+    fn create_dynamic_text(
+        &mut self,
+        parent: ElementRef,
+        text: &VText,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         // Allocate a dynamic element reference for this text node
         let new_id = self.next_element();
 
@@ -481,11 +509,7 @@ impl VirtualDom {
         text.id.set(Some(new_id));
 
         // Add the mutation to the list
-        self.mutations.push(HydrateText {
-            id: new_id,
-            path: &parent.path.path[1..],
-            value: &text.value,
-        });
+        to.hydrate_text_node(&parent.path.path[1..], &text.value, new_id);
 
         // Since we're hydrating an existing node, we don't create any new nodes
         0
@@ -495,6 +519,7 @@ impl VirtualDom {
         &mut self,
         placeholder: &VPlaceholder,
         parent: ElementRef,
+        to: &mut impl WriteMutations,
     ) -> usize {
         // Allocate a dynamic element reference for this text node
         let id = self.next_element();
@@ -506,10 +531,7 @@ impl VirtualDom {
         *placeholder.parent.borrow_mut() = Some(parent);
 
         // Assign the ID to the existing node in the template
-        self.mutations.push(AssignId {
-            path: &parent.path.path[1..],
-            id,
-        });
+        to.assign_node_id(&parent.path.path[1..], id);
 
         // Since the placeholder is already in the DOM, we don't create any new nodes
         0
@@ -519,11 +541,12 @@ impl VirtualDom {
         &mut self,
         parent: Option<ElementRef>,
         component: &VComponent,
+        to: &mut impl WriteMutations,
     ) -> usize {
         use RenderReturn::*;
 
         // Load up a ScopeId for this vcomponent
-        let scope = self.load_scope_from_vcomponent(component);
+        let scope = self.load_scope_from_vcomponent(component, to);
 
         component.scope.set(Some(scope));
 
@@ -535,14 +558,18 @@ impl VirtualDom {
             // Create the component's root element
             Ready(t) => {
                 self.assign_boundary_ref(parent, t);
-                self.create_scope(scope, t)
+                self.create_scope(scope, t, to)
             }
-            Aborted(t) => self.mount_aborted(t, parent),
+            Aborted(t) => self.mount_aborted(t, parent, to),
         }
     }
 
     /// Load a scope from a vcomponent. If the scope id doesn't exist, that means the component is currently "live"
-    fn load_scope_from_vcomponent(&mut self, component: &VComponent) -> ScopeId {
+    fn load_scope_from_vcomponent(
+        &mut self,
+        component: &VComponent,
+        to: &mut impl WriteMutations,
+    ) -> ScopeId {
         component.scope.get().unwrap_or_else(|| {
             self.new_scope(component.props.clone(), component.name)
                 .context()
@@ -550,9 +577,14 @@ impl VirtualDom {
         })
     }
 
-    fn mount_aborted(&mut self, placeholder: &VPlaceholder, parent: Option<ElementRef>) -> usize {
+    fn mount_aborted(
+        &mut self,
+        placeholder: &VPlaceholder,
+        parent: Option<ElementRef>,
+        to: &mut impl WriteMutations,
+    ) -> usize {
         let id = self.next_element();
-        self.mutations.push(Mutation::CreatePlaceholder { id });
+        to.create_placeholder(id);
         placeholder.id.set(Some(id));
         *placeholder.parent.borrow_mut() = parent;
 

packages/core/src/diff.rs

@@ -3,7 +3,9 @@ use std::ops::Deref;
 use crate::{
     any_props::AnyProps,
     arena::ElementId,
-    innerlude::{DirtyScope, ElementPath, ElementRef, VComponent, VPlaceholder, VText},
+    innerlude::{
+        DirtyScope, ElementPath, ElementRef, VComponent, VPlaceholder, VText, WriteMutations,
+    },
     mutations::Mutation,
     nodes::RenderReturn,
     nodes::{DynamicNode, VNode},
@@ -16,7 +18,12 @@ use rustc_hash::{FxHashMap, FxHashSet};
 use DynamicNode::*;
 
 impl VirtualDom {
-    pub(super) fn diff_scope(&mut self, scope: ScopeId, new_nodes: RenderReturn) {
+    pub(super) fn diff_scope(
+        &mut self,
+        scope: ScopeId,
+        new_nodes: RenderReturn,
+        to: &mut impl WriteMutations,
+    ) {
         self.runtime.scope_stack.borrow_mut().push(scope);
         let scope_state = &mut self.scopes[scope.0];
         // Load the old and new bump arenas
@@ -27,10 +34,10 @@ impl VirtualDom {
 
         match (&old, new) {
             // Normal pathway
-            (Ready(l), Ready(r)) => self.diff_node(l, r),
+            (Ready(l), Ready(r)) => self.diff_node(l, r, to),
 
             // Unwind the mutations if need be
-            (Ready(l), Aborted(p)) => self.diff_ok_to_err(l, p),
+            (Ready(l), Aborted(p)) => self.diff_ok_to_err(l, p, to),
 
             // Just move over the placeholder
             (Aborted(l), Aborted(r)) => {
@@ -44,24 +51,19 @@ impl VirtualDom {
                 l,
                 [r],
                 l.parent.borrow().expect("root node should not be none"),
+                to,
             ),
         };
         self.runtime.scope_stack.borrow_mut().pop();
     }
 
-    fn diff_ok_to_err(&mut self, l: &VNode, p: &VPlaceholder) {
+    fn diff_ok_to_err(&mut self, l: &VNode, p: &VPlaceholder, to: &mut impl WriteMutations) {
         let id = self.next_element();
         p.id.set(Some(id));
         *p.parent.borrow_mut() = l.parent.borrow().clone();
-        self.mutations.push(Mutation::CreatePlaceholder { id });
-
-        let pre_edits = self.mutations.edits.len();
-
-        self.remove_node(l, true);
+        to.create_placeholder(id);
 
-        // We should always have a remove mutation
-        // Eventually we don't want to generate placeholders, so this might not be true. But it's true today
-        assert!(self.mutations.edits.len() > pre_edits);
+        self.remove_node(l, true, to);
 
         // We want to optimize the replace case to use one less mutation if possible
         // Since mutations are done in reverse, the last node removed will be the first in the stack
@@ -72,7 +74,12 @@ impl VirtualDom {
         };
     }
 
-    fn diff_node(&mut self, left_template: &VNode, right_template: &VNode) {
+    fn diff_node(
+        &mut self,
+        left_template: &VNode,
+        right_template: &VNode,
+        to: &mut impl WriteMutations,
+    ) {
         // If hot reloading is enabled, we need to make sure we're using the latest template
         #[cfg(debug_assertions)]
         {
@@ -83,7 +90,7 @@ impl VirtualDom {
                     right_template.template.set(template);
                     if template != left_template.template.get() {
                         let parent = left_template.parent.take();
-                        return self.replace(left_template, [right_template], parent);
+                        return self.replace(left_template, [right_template], parent, to);
                     }
                 }
             }
@@ -101,7 +108,7 @@ impl VirtualDom {
 
         // If the templates are different by name, we need to replace the entire template
         if templates_are_different(left_template, right_template) {
-            return self.light_diff_templates(left_template, right_template);
+            return self.light_diff_templates(left_template, right_template, to);
         }
 
         // If the templates are the same, we can diff the attributes and children
@@ -117,7 +124,7 @@ impl VirtualDom {
 
                 // If the attributes are different (or volatile), we need to update them
                 if left_attr.value != right_attr.value || left_attr.volatile {
-                    self.update_attribute(right_attr, left_attr);
+                    self.update_attribute(right_attr, left_attr, to);
                 }
             });
 
@@ -135,7 +142,7 @@ impl VirtualDom {
                     },
                     scope: self.runtime.scope_stack.borrow().last().copied().unwrap(),
                 };
-                self.diff_dynamic_node(left_node, right_node, current_ref);
+                self.diff_dynamic_node(left_node, right_node, current_ref, to);
             });
 
         // Make sure the roots get transferred over while we're here
@@ -153,30 +160,36 @@ impl VirtualDom {
         left_node: &DynamicNode,
         right_node: &DynamicNode,
         parent: ElementRef,
+        to: &mut impl WriteMutations,
     ) {
         match (left_node, right_node) {
-            (Text(left), Text(right)) => self.diff_vtext(left, right),
-            (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right, parent),
+            (Text(left), Text(right)) => self.diff_vtext(left, right, to),
+            (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right, parent, to),
             (Placeholder(left), Placeholder(right)) => {
                 right.id.set(left.id.get());
                 *right.parent.borrow_mut() = left.parent.borrow().clone();
             },
-            (Component(left), Component(right)) => self.diff_vcomponent(left, right, Some(parent)),
-            (Placeholder(left), Fragment(right)) => self.replace_placeholder(left, right, parent),
-            (Fragment(left), Placeholder(right)) => self.node_to_placeholder(left, right, parent),
+            (Component(left), Component(right)) => self.diff_vcomponent(left, right, Some(parent), to),
+            (Placeholder(left), Fragment(right)) => self.replace_placeholder(left, right, parent, to),
+            (Fragment(left), Placeholder(right)) => self.node_to_placeholder(left, right, parent, to),
             _ => todo!("This is an usual custom case for dynamic nodes. We don't know how to handle it yet."),
         };
     }
 
-    fn update_attribute(&mut self, right_attr: &Attribute, left_attr: &Attribute) {
+    fn update_attribute(
+        &mut self,
+        right_attr: &Attribute,
+        left_attr: &Attribute,
+        to: &mut impl WriteMutations,
+    ) {
         let name = &left_attr.name;
         let value = &right_attr.value;
-        self.mutations.push(Mutation::SetAttribute {
-            id: left_attr.mounted_element.get(),
-            ns: right_attr.namespace,
+        to.set_attribute(
             name,
+            right_attr.namespace,
             value,
-        });
+            left_attr.mounted_element.get(),
+        );
     }
 
     fn diff_vcomponent(
@@ -184,6 +197,7 @@ impl VirtualDom {
         left: &VComponent,
         right: &VComponent,
         parent: Option<ElementRef>,
+        to: &mut impl WriteMutations,
     ) {
         if std::ptr::eq(left, right) {
             return;
@@ -191,7 +205,7 @@ impl VirtualDom {
 
         // Replace components that have different render fns
         if left.render_fn != right.render_fn {
-            return self.replace_vcomponent(right, left, parent);
+            return self.replace_vcomponent(right, left, parent, to);
         }
 
         // Make sure the new vcomponent has the right scopeid associated to it
@@ -221,7 +235,7 @@ impl VirtualDom {
 
         // Now run the component and diff it
         let new = self.run_scope(scope_id);
-        self.diff_scope(scope_id, new);
+        self.diff_scope(scope_id, new, to);
 
         self.dirty_scopes.remove(&DirtyScope {
             height: self.runtime.get_context(scope_id).unwrap().height,
@@ -234,14 +248,11 @@ impl VirtualDom {
         right: &VComponent,
         left: &VComponent,
         parent: Option<ElementRef>,
+        to: &mut impl WriteMutations,
     ) {
         let m = self.create_component_node(parent, right);
 
-        let pre_edits = self.mutations.edits.len();
-
-        self.remove_component_node(left, true);
-
-        assert!(self.mutations.edits.len() > pre_edits);
+        self.remove_component_node(left, true, to);
 
         // We want to optimize the replace case to use one less mutation if possible
         // Since mutations are done in reverse, the last node removed will be the first in the stack
@@ -289,13 +300,13 @@ impl VirtualDom {
     ///     Component { ..props }
     /// }
     /// ```
-    fn light_diff_templates(&mut self, left: &VNode, right: &VNode) {
+    fn light_diff_templates(&mut self, left: &VNode, right: &VNode, to: &mut impl WriteMutations) {
         let parent = left.parent.take();
         match matching_components(left, right) {
-            None => self.replace(left, [right], parent),
+            None => self.replace(left, [right], parent, to),
             Some(components) => components
                 .into_iter()
-                .for_each(|(l, r)| self.diff_vcomponent(l, r, parent)),
+                .for_each(|(l, r)| self.diff_vcomponent(l, r, parent, to)),
         }
     }
 
@@ -303,19 +314,22 @@ impl VirtualDom {
     ///
     /// This just moves the ID of the old node over to the new node, and then sets the text of the new node if it's
     /// different.
-    fn diff_vtext(&mut self, left: &VText, right: &VText) {
+    fn diff_vtext(&mut self, left: &VText, right: &VText, to: &mut impl WriteMutations) {
         let id = left.id.get().unwrap_or_else(|| self.next_element());
 
         right.id.set(Some(id));
         if left.value != right.value {
-            self.mutations.push(Mutation::SetText {
-                id,
-                value: &right.value,
-            });
+            to.set_node_text(&right.value, id);
         }
     }
 
-    fn diff_non_empty_fragment(&mut self, old: &[VNode], new: &[VNode], parent: ElementRef) {
+    fn diff_non_empty_fragment(
+        &mut self,
+        old: &[VNode],
+        new: &[VNode],
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
         let new_is_keyed = new[0].key.is_some();
         let old_is_keyed = old[0].key.is_some();
         debug_assert!(
@@ -328,9 +342,9 @@ impl VirtualDom {
         );
 
         if new_is_keyed && old_is_keyed {
-            self.diff_keyed_children(old, new, parent);
+            self.diff_keyed_children(old, new, parent, to);
         } else {
-            self.diff_non_keyed_children(old, new, parent);
+            self.diff_non_keyed_children(old, new, parent, to);
         }
     }
 
@@ -342,7 +356,13 @@ impl VirtualDom {
     //     [... parent]
     //
     // the change list stack is in the same state when this function returns.
-    fn diff_non_keyed_children(&mut self, old: &[VNode], new: &[VNode], parent: ElementRef) {
+    fn diff_non_keyed_children(
+        &mut self,
+        old: &[VNode],
+        new: &[VNode],
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
         use std::cmp::Ordering;
 
         // Handled these cases in `diff_children` before calling this function.
@@ -350,15 +370,15 @@ impl VirtualDom {
         debug_assert!(!old.is_empty());
 
         match old.len().cmp(&new.len()) {
-            Ordering::Greater => self.remove_nodes(&old[new.len()..]),
+            Ordering::Greater => self.remove_nodes(&old[new.len()..], to),
             Ordering::Less => {
-                self.create_and_insert_after(&new[old.len()..], old.last().unwrap(), parent)
+                self.create_and_insert_after(&new[old.len()..], old.last().unwrap(), parent, to)
             }
             Ordering::Equal => {}
         }
 
         for (new, old) in new.iter().zip(old.iter()) {
-            self.diff_node(old, new);
+            self.diff_node(old, new, to);
         }
     }
 
@@ -378,7 +398,13 @@ impl VirtualDom {
     // https://github.com/infernojs/inferno/blob/36fd96/packages/inferno/src/DOM/patching.ts#L530-L739
     //
     // The stack is empty upon entry.
-    fn diff_keyed_children(&mut self, old: &[VNode], new: &[VNode], parent: ElementRef) {
+    fn diff_keyed_children(
+        &mut self,
+        old: &[VNode],
+        new: &[VNode],
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
         if cfg!(debug_assertions) {
             let mut keys = rustc_hash::FxHashSet::default();
             let mut assert_unique_keys = |children: &[VNode]| {
@@ -406,7 +432,7 @@ impl VirtualDom {
         //
         // `shared_prefix_count` is the count of how many nodes at the start of
         // `new` and `old` share the same keys.
-        let (left_offset, right_offset) = match self.diff_keyed_ends(old, new, parent) {
+        let (left_offset, right_offset) = match self.diff_keyed_ends(old, new, parent, to) {
             Some(count) => count,
             None => return,
         };
@@ -425,25 +451,25 @@ impl VirtualDom {
 
         if new_middle.is_empty() {
             // remove the old elements
-            self.remove_nodes(old_middle);
+            self.remove_nodes(old_middle, to);
         } else if old_middle.is_empty() {
             // there were no old elements, so just create the new elements
             // we need to find the right "foothold" though - we shouldn't use the "append" at all
             if left_offset == 0 {
                 // insert at the beginning of the old list
                 let foothold = &old[old.len() - right_offset];
-                self.create_and_insert_before(new_middle, foothold, parent);
+                self.create_and_insert_before(new_middle, foothold, parent, to);
             } else if right_offset == 0 {
                 // insert at the end  the old list
                 let foothold = old.last().unwrap();
-                self.create_and_insert_after(new_middle, foothold, parent);
+                self.create_and_insert_after(new_middle, foothold, parent, to);
             } else {
                 // inserting in the middle
                 let foothold = &old[left_offset - 1];
-                self.create_and_insert_after(new_middle, foothold, parent);
+                self.create_and_insert_after(new_middle, foothold, parent, to);
             }
         } else {
-            self.diff_keyed_middle(old_middle, new_middle, parent);
+            self.diff_keyed_middle(old_middle, new_middle, parent, to);
         }
     }
 
@@ -457,6 +483,7 @@ impl VirtualDom {
         old: &[VNode],
         new: &[VNode],
         parent: ElementRef,
+        to: &mut impl WriteMutations,
     ) -> Option<(usize, usize)> {
         let mut left_offset = 0;
 
@@ -465,21 +492,21 @@ impl VirtualDom {
             if old.key != new.key {
                 break;
             }
-            self.diff_node(old, new);
+            self.diff_node(old, new, to);
             left_offset += 1;
         }
 
         // If that was all of the old children, then create and append the remaining
         // new children and we're finished.
         if left_offset == old.len() {
-            self.create_and_insert_after(&new[left_offset..], old.last().unwrap(), parent);
+            self.create_and_insert_after(&new[left_offset..], old.last().unwrap(), parent, to);
             return None;
         }
 
         // And if that was all of the new children, then remove all of the remaining
         // old children and we're finished.
         if left_offset == new.len() {
-            self.remove_nodes(&old[left_offset..]);
+            self.remove_nodes(&old[left_offset..], to);
             return None;
         }
 
@@ -490,7 +517,7 @@ impl VirtualDom {
             if old.key != new.key {
                 break;
             }
-            self.diff_node(old, new);
+            self.diff_node(old, new, to);
             right_offset += 1;
         }
 
@@ -511,7 +538,13 @@ impl VirtualDom {
     //
     // Upon exit from this function, it will be restored to that same self.
     #[allow(clippy::too_many_lines)]
-    fn diff_keyed_middle(&mut self, old: &[VNode], new: &[VNode], parent: ElementRef) {
+    fn diff_keyed_middle(
+        &mut self,
+        old: &[VNode],
+        new: &[VNode],
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
         /*
         1. Map the old keys into a numerical ordering based on indices.
         2. Create a map of old key to its index
@@ -567,8 +600,8 @@ impl VirtualDom {
         // create the new children afresh.
         if shared_keys.is_empty() {
             if !old.is_empty() {
-                self.remove_nodes(&old[1..]);
-                self.replace(&old[0], new, Some(parent));
+                self.remove_nodes(&old[1..], to);
+                self.replace(&old[0], new, Some(parent), to);
             } else {
                 // I think this is wrong - why are we appending?
                 // only valid of the if there are no trailing elements
@@ -584,7 +617,7 @@ impl VirtualDom {
         for child in old {
             let key = child.key.unwrap();
             if !shared_keys.contains(&key) {
-                self.remove_node(child, true);
+                self.remove_node(child, true, to);
             }
         }
 
@@ -611,7 +644,7 @@ impl VirtualDom {
         }
 
         for idx in &lis_sequence {
-            self.diff_node(&old[new_index_to_old_index[*idx]], &new[*idx]);
+            self.diff_node(&old[new_index_to_old_index[*idx]], &new[*idx], to);
         }
 
         let mut nodes_created = 0;
@@ -625,17 +658,14 @@ impl VirtualDom {
                 if old_index == u32::MAX as usize {
                     nodes_created += self.create(new_node);
                 } else {
-                    self.diff_node(&old[old_index], new_node);
-                    nodes_created += self.push_all_real_nodes(new_node);
+                    self.diff_node(&old[old_index], new_node, to);
+                    nodes_created += self.push_all_real_nodes(new_node, to);
                 }
             }
 
             let id = self.find_last_element(&new[last]);
             if nodes_created > 0 {
-                self.mutations.push(Mutation::InsertAfter {
-                    id,
-                    m: nodes_created,
-                })
+                to.insert_nodes_after(id, nodes_created)
             }
             nodes_created = 0;
         }
@@ -651,17 +681,14 @@ impl VirtualDom {
                     if old_index == u32::MAX as usize {
                         nodes_created += self.create(new_node);
                     } else {
-                        self.diff_node(&old[old_index], new_node);
-                        nodes_created += self.push_all_real_nodes(new_node);
+                        self.diff_node(&old[old_index], new_node, to);
+                        nodes_created += self.push_all_real_nodes(new_node, to);
                     }
                 }
 
                 let id = self.find_first_element(&new[last]);
                 if nodes_created > 0 {
-                    self.mutations.push(Mutation::InsertBefore {
-                        id,
-                        m: nodes_created,
-                    });
+                    to.insert_nodes_before(id, nodes_created);
                 }
 
                 nodes_created = 0;
@@ -677,23 +704,20 @@ impl VirtualDom {
                 if old_index == u32::MAX as usize {
                     nodes_created += self.create(new_node);
                 } else {
-                    self.diff_node(&old[old_index], new_node);
-                    nodes_created += self.push_all_real_nodes(new_node);
+                    self.diff_node(&old[old_index], new_node, to);
+                    nodes_created += self.push_all_real_nodes(new_node, to);
                 }
             }
 
             let id = self.find_first_element(&new[first_lis]);
             if nodes_created > 0 {
-                self.mutations.push(Mutation::InsertBefore {
-                    id,
-                    m: nodes_created,
-                });
+                to.insert_nodes_before(id, nodes_created);
             }
         }
     }
 
     /// Push all the real nodes on the stack
-    fn push_all_real_nodes(&mut self, node: &VNode) -> usize {
+    fn push_all_real_nodes(&mut self, node: &VNode, to: &mut impl WriteMutations) -> usize {
         node.template
             .get()
             .roots
@@ -703,35 +727,29 @@ impl VirtualDom {
                 let node = match node.dynamic_root(idx) {
                     Some(node) => node,
                     None => {
-                        self.mutations.push(Mutation::PushRoot {
-                            id: node.root_ids.borrow()[idx],
-                        });
+                        to.push_root(node.root_ids.borrow()[idx]);
                         return 1;
                     }
                 };
 
                 match node {
                     Text(t) => {
-                        self.mutations.push(Mutation::PushRoot {
-                            id: t.id.get().unwrap(),
-                        });
+                        to.push_root(t.id.get().unwrap());
                         1
                     }
                     Placeholder(t) => {
-                        self.mutations.push(Mutation::PushRoot {
-                            id: t.id.get().unwrap(),
-                        });
+                        to.push_root(t.id.get().unwrap());
                         1
                     }
                     Fragment(nodes) => nodes
                         .iter()
-                        .map(|node| self.push_all_real_nodes(node))
+                        .map(|node| self.push_all_real_nodes(node, to))
                         .sum(),
 
                     Component(comp) => {
                         let scope = comp.scope.get().unwrap();
                         match self.get_scope(scope).unwrap().root_node() {
-                            RenderReturn::Ready(node) => self.push_all_real_nodes(node),
+                            RenderReturn::Ready(node) => self.push_all_real_nodes(node, to),
                             RenderReturn::Aborted(_node) => todo!(),
                         }
                     }
@@ -744,6 +762,7 @@ impl VirtualDom {
         &mut self,
         nodes: impl IntoIterator<Item = &'a VNode>,
         parent: Option<ElementRef>,
+        to: &mut impl WriteMutations,
     ) -> usize {
         nodes
             .into_iter()
@@ -754,16 +773,28 @@ impl VirtualDom {
             .sum()
     }
 
-    fn create_and_insert_before(&mut self, new: &[VNode], before: &VNode, parent: ElementRef) {
-        let m = self.create_children(new, Some(parent));
+    fn create_and_insert_before(
+        &mut self,
+        new: &[VNode],
+        before: &VNode,
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
+        let m = self.create_children(new, Some(parent), to);
         let id = self.find_first_element(before);
-        self.mutations.push(Mutation::InsertBefore { id, m })
+        to.insert_nodes_before(id, m);
     }
 
-    fn create_and_insert_after(&mut self, new: &[VNode], after: &VNode, parent: ElementRef) {
-        let m = self.create_children(new, Some(parent));
+    fn create_and_insert_after(
+        &mut self,
+        new: &[VNode],
+        after: &VNode,
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
+        let m = self.create_children(new, Some(parent), to);
         let id = self.find_last_element(after);
-        self.mutations.push(Mutation::InsertAfter { id, m })
+        to.insert_nodes_after(id, m);
     }
 
     /// Simply replace a placeholder with a list of nodes
@@ -772,10 +803,11 @@ impl VirtualDom {
         l: &VPlaceholder,
         r: impl IntoIterator<Item = &'a VNode>,
         parent: ElementRef,
+        to: &mut impl WriteMutations,
     ) {
-        let m = self.create_children(r, Some(parent));
+        let m = self.create_children(r, Some(parent), to);
         let id = l.id.get().unwrap();
-        self.mutations.push(Mutation::ReplaceWith { id, m });
+        to.replace_with(id, m);
         self.reclaim(id);
     }
 
@@ -784,16 +816,11 @@ impl VirtualDom {
         left: &VNode,
         right: impl IntoIterator<Item = &'a VNode>,
         parent: Option<ElementRef>,
+        to: &mut impl WriteMutations,
     ) {
-        let m = self.create_children(right, parent);
-
-        let pre_edits = self.mutations.edits.len();
+        let m = self.create_children(right, parent, to);
 
-        self.remove_node(left, true);
-
-        // We should always have a remove mutation
-        // Eventually we don't want to generate placeholders, so this might not be true. But it's true today
-        assert!(self.mutations.edits.len() > pre_edits);
+        self.remove_node(left, true, to);
 
         // We want to optimize the replace case to use one less mutation if possible
         // Since mutations are done in reverse, the last node removed will be the first in the stack
@@ -804,17 +831,22 @@ impl VirtualDom {
         };
     }
 
-    fn node_to_placeholder(&mut self, l: &[VNode], r: &VPlaceholder, parent: ElementRef) {
+    fn node_to_placeholder(
+        &mut self,
+        l: &[VNode],
+        r: &VPlaceholder,
+        parent: ElementRef,
+        to: &mut impl WriteMutations,
+    ) {
         // Create the placeholder first, ensuring we get a dedicated ID for the placeholder
         let placeholder = self.next_element();
 
         r.id.set(Some(placeholder));
         r.parent.borrow_mut().replace(parent);
 
-        self.mutations
-            .push(Mutation::CreatePlaceholder { id: placeholder });
+        to.create_placeholder(placeholder);
 
-        self.remove_nodes(l);
+        self.remove_nodes(l, to);
 
         // We want to optimize the replace case to use one less mutation if possible
         // Since mutations are done in reverse, the last node removed will be the first in the stack
@@ -827,43 +859,43 @@ impl VirtualDom {
 
     /// Remove these nodes from the dom
     /// Wont generate mutations for the inner nodes
-    fn remove_nodes(&mut self, nodes: &[VNode]) {
+    fn remove_nodes(&mut self, nodes: &[VNode], to: &mut impl WriteMutations) {
         nodes
             .iter()
             .rev()
-            .for_each(|node| self.remove_node(node, true));
+            .for_each(|node| self.remove_node(node, true, to));
     }
 
-    fn remove_node(&mut self, node: &VNode, gen_muts: bool) {
+    fn remove_node(&mut self, node: &VNode, gen_muts: bool, to: &mut impl WriteMutations) {
         // Clean up any attributes that have claimed a static node as dynamic for mount/unmounta
         // Will not generate mutations!
-        self.reclaim_attributes(node);
+        self.reclaim_attributes(node, to);
 
         // Remove the nested dynamic nodes
         // We don't generate mutations for these, as they will be removed by the parent (in the next line)
         // But we still need to make sure to reclaim them from the arena and drop their hooks, etc
-        self.remove_nested_dyn_nodes(node);
+        self.remove_nested_dyn_nodes(node, to);
 
         // Clean up the roots, assuming we need to generate mutations for these
         // This is done last in order to preserve Node ID reclaim order (reclaim in reverse order of claim)
-        self.reclaim_roots(node, gen_muts);
+        self.reclaim_roots(node, gen_muts, to);
     }
 
-    fn reclaim_roots(&mut self, node: &VNode, gen_muts: bool) {
+    fn reclaim_roots(&mut self, node: &VNode, gen_muts: bool, to: &mut impl WriteMutations) {
         for (idx, _) in node.template.get().roots.iter().enumerate() {
             if let Some(dy) = node.dynamic_root(idx) {
-                self.remove_dynamic_node(dy, gen_muts);
+                self.remove_dynamic_node(dy, gen_muts, to);
             } else {
                 let id = node.root_ids.borrow()[idx];
                 if gen_muts {
-                    self.mutations.push(Mutation::Remove { id });
+                    to.remove_node(id);
                 }
                 self.reclaim(id);
             }
         }
     }
 
-    fn reclaim_attributes(&mut self, node: &VNode) {
+    fn reclaim_attributes(&mut self, node: &VNode, to: &mut impl WriteMutations) {
         let mut id = None;
         for (idx, attr) in node.dynamic_attrs.iter().enumerate() {
             // We'll clean up the root nodes either way, so don't worry
@@ -894,7 +926,7 @@ impl VirtualDom {
         }
     }
 
-    fn remove_nested_dyn_nodes(&mut self, node: &VNode) {
+    fn remove_nested_dyn_nodes(&mut self, node: &VNode, to: &mut impl WriteMutations) {
         for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() {
             let path_len = node
                 .template
@@ -904,41 +936,56 @@ impl VirtualDom {
                 .map(|path| path.len());
             // Roots are cleaned up automatically above and nodes with a empty path are placeholders
             if let Some(2..) = path_len {
-                self.remove_dynamic_node(dyn_node, false)
+                self.remove_dynamic_node(dyn_node, false, to)
             }
         }
     }
 
-    fn remove_dynamic_node(&mut self, node: &DynamicNode, gen_muts: bool) {
+    fn remove_dynamic_node(
+        &mut self,
+        node: &DynamicNode,
+        gen_muts: bool,
+        to: &mut impl WriteMutations,
+    ) {
         match node {
-            Component(comp) => self.remove_component_node(comp, gen_muts),
-            Text(t) => self.remove_text_node(t, gen_muts),
-            Placeholder(t) => self.remove_placeholder(t, gen_muts),
+            Component(comp) => self.remove_component_node(comp, gen_muts, to),
+            Text(t) => self.remove_text_node(t, gen_muts, to),
+            Placeholder(t) => self.remove_placeholder(t, gen_muts, to),
             Fragment(nodes) => nodes
                 .iter()
-                .for_each(|node| self.remove_node(node, gen_muts)),
+                .for_each(|node| self.remove_node(node, gen_muts, to)),
         };
     }
 
-    fn remove_placeholder(&mut self, t: &VPlaceholder, gen_muts: bool) {
+    fn remove_placeholder(
+        &mut self,
+        t: &VPlaceholder,
+        gen_muts: bool,
+        to: &mut impl WriteMutations,
+    ) {
         if let Some(id) = t.id.take() {
             if gen_muts {
-                self.mutations.push(Mutation::Remove { id });
+                to.remove_node(id);
             }
             self.reclaim(id)
         }
     }
 
-    fn remove_text_node(&mut self, t: &VText, gen_muts: bool) {
+    fn remove_text_node(&mut self, t: &VText, gen_muts: bool, to: &mut impl WriteMutations) {
         if let Some(id) = t.id.take() {
             if gen_muts {
-                self.mutations.push(Mutation::Remove { id });
+                to.remove_node(id);
             }
             self.reclaim(id)
         }
     }
 
-    fn remove_component_node(&mut self, comp: &VComponent, gen_muts: bool) {
+    fn remove_component_node(
+        &mut self,
+        comp: &VComponent,
+        gen_muts: bool,
+        to: &mut impl WriteMutations,
+    ) {
         // Remove the component reference from the vcomponent so they're not tied together
         let scope = comp
             .scope
@@ -947,8 +994,10 @@ impl VirtualDom {
 
         // Remove the component from the dom
         match unsafe { self.get_scope(scope).unwrap().root_node() } {
-            RenderReturn::Ready(t) => self.remove_node(t, gen_muts),
-            RenderReturn::Aborted(placeholder) => self.remove_placeholder(placeholder, gen_muts),
+            RenderReturn::Ready(t) => self.remove_node(t, gen_muts, to),
+            RenderReturn::Aborted(placeholder) => {
+                self.remove_placeholder(placeholder, gen_muts, to)
+            }
         };
 
         // Now drop all the resouces

packages/core/src/lib.rs

@@ -74,9 +74,9 @@ pub(crate) mod innerlude {
 
 pub use crate::innerlude::{
     fc_to_builder, vdom_is_rendering, AnyValue, Attribute, AttributeValue, CapturedError,
-    Component, DynamicNode, Element, ElementId, Event, Fragment, IntoDynNode, Mutation, Mutations,
-    Properties, RenderReturn, ScopeId, ScopeState, TaskId, Template, TemplateAttribute,
-    TemplateNode, VComponent, VNode, VPlaceholder, VText, VirtualDom,
+    Component, DynamicNode, Element, ElementId, Event, Fragment, IntoDynNode, Mutation,
+    MutationsVec, Properties, RenderReturn, ScopeId, ScopeState, TaskId, Template,
+    TemplateAttribute, TemplateNode, VComponent, VNode, VPlaceholder, VText, VirtualDom,
 };
 
 /// The purpose of this module is to alleviate imports of many common types

packages/core/src/mutations.rs

@@ -2,7 +2,7 @@ use rustc_hash::FxHashSet;
 
 use crate::{arena::ElementId, AttributeValue, ScopeId, Template};
 
-/// A container for all the relevant steps to modify the Real DOM
+/// Something that can handle the mutations that are generated by the diffing process and apply them to the Real DOM
 ///
 /// This object provides a bunch of important information for a renderer to use patch the Real Dom with the state of the
 /// VirtualDom. This includes the scopes that were modified, the templates that were discovered, and a list of changes
@@ -13,42 +13,128 @@ use crate::{arena::ElementId, AttributeValue, ScopeId, Template};
 /// Templates, however, apply to all subtrees, not just target subtree.
 ///
 /// Mutations are the only link between the RealDOM and the VirtualDOM.
-#[derive(Debug, Default)]
-#[must_use = "not handling edits can lead to visual inconsistencies in UI"]
-pub struct Mutations<'a> {
-    /// The ID of the subtree that these edits are targetting
-    pub subtree: usize,
+pub trait WriteMutations {
+    /// Register a template with the renderer
+    fn register_template(&mut self, template: Template<'static>);
 
-    /// The list of Scopes that were diffed, created, and removed during the Diff process.
-    pub dirty_scopes: FxHashSet<ScopeId>,
+    /// Add these m children to the target element
+    ///
+    /// Id: The ID of the element being mounted to
+    /// M: The number of nodes on the stack to append to the target element
+    fn append_children(&mut self, id: ElementId, m: usize);
 
-    /// Any templates encountered while diffing the DOM.
+    /// Assign the element at the given path the target ElementId.
     ///
-    /// These must be loaded into a cache before applying the edits
-    pub templates: Vec<Template<'static>>,
+    /// The path is in the form of a list of indices based on children. Templates cannot have more than 255 children per
+    /// element, hence the use of a single byte.
+    ///
+    /// Path: The path of the child of the topmost node on the stack. A path of `[]` represents the topmost node. A path of `[0]` represents the first child. `[0,1,2]` represents 1st child's 2nd child's 3rd child.
+    /// Id: The ID we're assigning to this element/placeholder. This will be used later to modify the element or replace it with another element.
+    fn assign_node_id(&mut self, path: &'static [u8], id: ElementId);
 
-    /// Any mutations required to patch the renderer to match the layout of the VirtualDom
-    pub edits: Vec<Mutation<'a>>,
-}
+    /// Create a placeholder in the DOM that we will use later.
+    ///
+    /// Dioxus currently requires the use of placeholders to maintain a re-entrance point for things like list diffing
+    ///
+    /// Id: The ID we're assigning to this element/placeholder. This will be used later to modify the element or replace it with another element.
+    fn create_placeholder(&mut self, id: ElementId);
 
-impl<'a> Mutations<'a> {
-    /// Rewrites IDs to just be "template", so you can compare the mutations
+    /// Create a node specifically for text with the given value
     ///
-    /// Used really only for testing
-    pub fn santize(mut self) -> Self {
-        for edit in self.edits.iter_mut() {
-            if let Mutation::LoadTemplate { name, .. } = edit {
-                *name = "template"
-            }
-        }
+    /// Value: The text content of this text node
+    /// Id: The ID we're assigning to this specific text nodes. This will be used later to modify the element or replace it with another element.
+    fn create_text_node(&mut self, value: &str, id: ElementId);
 
-        self
-    }
+    /// Hydrate an existing text node at the given path with the given text.
+    ///
+    /// Assign this text node the given ID since we will likely need to modify this text at a later point
+    ///
+    /// Path: The path of the child of the topmost node on the stack. A path of `[]` represents the topmost node. A path of `[0]` represents the first child. `[0,1,2]` represents 1st child's 2nd child's 3rd child.
+    /// Value: The value of the textnode that we want to set the placeholder with
+    /// Id: The ID we're assigning to this specific text nodes. This will be used later to modify the element or replace it with another element.
+    fn hydrate_text_node(&mut self, path: &'static [u8], value: &str, id: ElementId);
 
-    /// Push a new mutation into the dom_edits list
-    pub(crate) fn push(&mut self, mutation: Mutation<'static>) {
-        self.edits.push(mutation)
-    }
+    /// Load and clone an existing node from a template saved under that specific name
+    ///
+    /// Dioxus guarantees that the renderer will have already been provided the template.
+    /// When the template is picked up in the template list, it should be saved under its "name" - here, the name
+    ///
+    /// Name: The unique "name" of the template based on the template location. When paired with `rsx!`, this is autogenerated
+    /// Index: The index root we loading from the template. The template is stored as a list of nodes. This index represents the position of that root
+    /// Id: The ID we're assigning to this element being loaded from the template (This will be used later to move the element around in lists)
+    fn load_template(&mut self, name: &'static str, index: usize, id: ElementId);
+
+    /// Replace the target element (given by its ID) with the topmost m nodes on the stack
+    ///
+    /// id: The ID of the node we're going to replace with new nodes
+    /// m: The number of nodes on the stack to replace the target element with
+    fn replace_node_with(&mut self, id: ElementId, m: usize);
+
+    /// Replace an existing element in the template at the given path with the m nodes on the stack
+    ///
+    /// Path: The path of the child of the topmost node on the stack. A path of `[]` represents the topmost node. A path of `[0]` represents the first child. `[0,1,2]` represents 1st child's 2nd child's 3rd child.
+    /// M: The number of nodes on the stack to replace the target element with
+    fn replace_placeholder_with_nodes(&mut self, path: &'static [u8], m: usize);
+
+    /// Insert a number of nodes after a given node.
+    ///
+    /// Id: The ID of the node to insert after.
+    /// M: The number of nodes on the stack to insert after the target node.
+    fn insert_nodes_after(&mut self, id: ElementId, m: usize);
+
+    /// Insert a number of nodes before a given node.
+    ///
+    /// Id: The ID of the node to insert before.
+    /// M: The number of nodes on the stack to insert before the target node.
+    fn insert_nodes_before(&mut self, id: ElementId, m: usize);
+
+    /// Set the value of a node's attribute.
+    ///
+    /// Name: The name of the attribute to set.
+    /// NS: The (optional) namespace of the attribute. For instance, "style" is in the "style" namespace.
+    /// Value: The value of the attribute.
+    /// Id: The ID of the node to set the attribute of.
+    fn set_attribute(
+        &mut self,
+        name: &'static str,
+        ns: Option<&'static str>,
+        value: &AttributeValue,
+        id: ElementId,
+    );
+
+    /// Set the text content of a node.
+    ///
+    /// Value: The textcontent of the node
+    /// Id: The ID of the node to set the textcontent of.
+    fn set_node_text(&mut self, value: &str, id: ElementId);
+
+    /// Create a new Event Listener.
+    ///
+    /// Name: The name of the event to listen for.
+    /// Id: The ID of the node to attach the listener to.
+    fn create_event_listener(&mut self, name: &'static str, id: ElementId);
+
+    /// Remove an existing Event Listener.
+    ///
+    /// Name: The name of the event to remove.
+    /// Id: The ID of the node to remove.
+    fn remove_event_listener(&mut self, name: &'static str, id: ElementId);
+
+    /// Remove a particular node from the DOM
+    ///
+    /// Id: The ID of the node to remove.
+    fn remove_node(&mut self, id: ElementId);
+
+    /// Push the given root node onto our stack.
+    ///
+    /// Id: The ID of the root node to push.
+    fn push_root(&mut self, id: ElementId) {}
+
+    /// Swap to a new subtree
+    fn swap_subtree(&mut self, subtree_index: usize) {}
+
+    /// Mark a scope as dirty
+    fn mark_scope_dirty(&mut self, scope_id: ScopeId) {}
 }
 
 /// A `Mutation` represents a single instruction for the renderer to use to modify the UI tree to match the state
@@ -56,7 +142,7 @@ impl<'a> Mutations<'a> {
 ///
 /// These edits can be serialized and sent over the network or through any interface
 #[derive(Debug, PartialEq)]
-pub enum Mutation<'a> {
+pub enum Mutation {
     /// Add these m children to the target element
     AppendChildren {
         /// The ID of the element being mounted to
@@ -98,7 +184,7 @@ pub enum Mutation<'a> {
     /// Create a node specifically for text with the given value
     CreateTextNode {
         /// The text content of this text node
-        value: &'a str,
+        value: String,
 
         /// The ID we're assigning to this specific text nodes
         ///
@@ -117,7 +203,7 @@ pub enum Mutation<'a> {
         path: &'static [u8],
 
         /// The value of the textnode that we want to set the placeholder with
-        value: &'a str,
+        value: String,
 
         /// The ID we're assigning to this specific text nodes
         ///
@@ -186,23 +272,23 @@ pub enum Mutation<'a> {
     /// Set the value of a node's attribute.
     SetAttribute {
         /// The name of the attribute to set.
-        name: &'a str,
+        name: &'static str,
+
+        /// The (optional) namespace of the attribute.
+        /// For instance, "style" is in the "style" namespace.
+        ns: Option<&'static str>,
 
         /// The value of the attribute.
-        value: &'a AttributeValue,
+        value: AttributeValue,
 
         /// The ID of the node to set the attribute of.
         id: ElementId,
-
-        /// The (optional) namespace of the attribute.
-        /// For instance, "style" is in the "style" namespace.
-        ns: Option<&'a str>,
     },
 
     /// Set the textcontent of a node.
     SetText {
         /// The textcontent of the node
-        value: &'a str,
+        value: String,
 
         /// The ID of the node to set the textcontent of.
         id: ElementId,
@@ -211,7 +297,7 @@ pub enum Mutation<'a> {
     /// Create a new Event Listener.
     NewEventListener {
         /// The name of the event to listen for.
-        name: &'a str,
+        name: String,
 
         /// The ID of the node to attach the listener to.
         id: ElementId,
@@ -220,7 +306,7 @@ pub enum Mutation<'a> {
     /// Remove an existing Event Listener.
     RemoveEventListener {
         /// The name of the event to remove.
-        name: &'a str,
+        name: String,
 
         /// The ID of the node to remove.
         id: ElementId,
@@ -238,3 +324,186 @@ pub enum Mutation<'a> {
         id: ElementId,
     },
 }
+
+/// A static list of mutations that can be applied to the DOM. Note: this list does not contain any `Any` attribute values
+pub struct MutationsVec {
+    /// The list of Scopes that were diffed, created, and removed during the Diff process.
+    pub dirty_scopes: FxHashSet<ScopeId>,
+
+    /// Any templates encountered while diffing the DOM.
+    ///
+    /// These must be loaded into a cache before applying the edits
+    pub templates: Vec<Template<'static>>,
+
+    /// Any mutations required to patch the renderer to match the layout of the VirtualDom
+    pub edits: Vec<Mutation>,
+}
+
+impl MutationsVec {
+    /// Rewrites IDs to just be "template", so you can compare the mutations
+    ///
+    /// Used really only for testing
+    pub fn santize(mut self) -> Self {
+        for edit in self.edits.iter_mut() {
+            if let Mutation::LoadTemplate { name, .. } = edit {
+                *name = "template"
+            }
+        }
+
+        self
+    }
+}
+
+impl WriteMutations for MutationsVec {
+    fn register_template(&mut self, template: Template<'static>) {
+        self.templates.push(template)
+    }
+
+    fn append_children(&mut self, id: ElementId, m: usize) {
+        self.edits.push(Mutation::AppendChildren { id, m })
+    }
+
+    fn assign_node_id(&mut self, path: &'static [u8], id: ElementId) {
+        self.edits.push(Mutation::AssignId { path, id })
+    }
+
+    fn create_placeholder(&mut self, id: ElementId) {
+        self.edits.push(Mutation::CreatePlaceholder { id })
+    }
+
+    fn create_text_node(&mut self, value: &str, id: ElementId) {
+        self.edits.push(Mutation::CreateTextNode {
+            value: value.into(),
+            id,
+        })
+    }
+
+    fn hydrate_text_node(&mut self, path: &'static [u8], value: &str, id: ElementId) {
+        self.edits.push(Mutation::HydrateText {
+            path,
+            value: value.into(),
+            id,
+        })
+    }
+
+    fn load_template(&mut self, name: &'static str, index: usize, id: ElementId) {
+        self.edits.push(Mutation::LoadTemplate { name, index, id })
+    }
+
+    fn replace_node_with(&mut self, id: ElementId, m: usize) {
+        self.edits.push(Mutation::ReplaceWith { id, m })
+    }
+
+    fn replace_placeholder_with_nodes(&mut self, path: &'static [u8], m: usize) {
+        self.edits.push(Mutation::ReplacePlaceholder { path, m })
+    }
+
+    fn insert_nodes_after(&mut self, id: ElementId, m: usize) {
+        self.edits.push(Mutation::InsertAfter { id, m })
+    }
+
+    fn insert_nodes_before(&mut self, id: ElementId, m: usize) {
+        self.edits.push(Mutation::InsertBefore { id, m })
+    }
+
+    fn set_attribute(
+        &mut self,
+        name: &'static str,
+        ns: Option<&'static str>,
+        value: &AttributeValue,
+        id: ElementId,
+    ) {
+        self.edits.push(Mutation::SetAttribute {
+            name,
+            ns,
+            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"),
+            },
+            id,
+        })
+    }
+
+    fn set_node_text(&mut self, value: &str, id: ElementId) {
+        self.edits.push(Mutation::SetText {
+            value: value.into(),
+            id,
+        })
+    }
+
+    fn create_event_listener(&mut self, name: &'static str, id: ElementId) {
+        self.edits.push(Mutation::NewEventListener {
+            name: name.into(),
+            id,
+        })
+    }
+
+    fn remove_event_listener(&mut self, name: &'static str, id: ElementId) {
+        self.edits.push(Mutation::RemoveEventListener {
+            name: name.into(),
+            id,
+        })
+    }
+
+    fn remove_node(&mut self, id: ElementId) {
+        self.edits.push(Mutation::Remove { id })
+    }
+
+    fn push_root(&mut self, id: ElementId) {
+        self.edits.push(Mutation::PushRoot { id })
+    }
+
+    fn swap_subtree(&mut self, _subtree_index: usize) {}
+
+    fn mark_scope_dirty(&mut self, scope_id: ScopeId) {
+        self.dirty_scopes.insert(scope_id);
+    }
+}
+
+/// A struct that ignores all mutations
+pub struct NoOpMutations;
+
+impl WriteMutations for NoOpMutations {
+    fn register_template(&mut self, template: Template<'static>) {}
+
+    fn append_children(&mut self, id: ElementId, m: usize) {}
+
+    fn assign_node_id(&mut self, path: &'static [u8], id: ElementId) {}
+
+    fn create_placeholder(&mut self, id: ElementId) {}
+
+    fn create_text_node(&mut self, value: &str, id: ElementId) {}
+
+    fn hydrate_text_node(&mut self, path: &'static [u8], value: &str, id: ElementId) {}
+
+    fn load_template(&mut self, name: &'static str, index: usize, id: ElementId) {}
+
+    fn replace_node_with(&mut self, id: ElementId, m: usize) {}
+
+    fn replace_placeholder_with_nodes(&mut self, path: &'static [u8], m: usize) {}
+
+    fn insert_nodes_after(&mut self, id: ElementId, m: usize) {}
+
+    fn insert_nodes_before(&mut self, id: ElementId, m: usize) {}
+
+    fn set_attribute(
+        &mut self,
+        name: &'static str,
+        ns: Option<&'static str>,
+        value: &AttributeValue,
+        id: ElementId,
+    ) {
+    }
+
+    fn set_node_text(&mut self, value: &str, id: ElementId) {}
+
+    fn create_event_listener(&mut self, name: &'static str, id: ElementId) {}
+
+    fn remove_event_listener(&mut self, name: &'static str, id: ElementId) {}
+
+    fn remove_node(&mut self, id: ElementId) {}
+}

packages/core/src/virtual_dom.rs

@@ -5,7 +5,10 @@
 use crate::{
     any_props::{BoxedAnyProps, VProps},
     arena::ElementId,
-    innerlude::{DirtyScope, ElementRef, ErrorBoundary, Mutations, Scheduler, SchedulerMsg},
+    innerlude::{
+        DirtyScope, ElementRef, ErrorBoundary, Mutations, NoOpMutations, Scheduler, SchedulerMsg,
+        WriteMutations,
+    },
     mutations::Mutation,
     nodes::RenderReturn,
     nodes::{Template, TemplateId},
@@ -188,8 +191,6 @@ pub struct VirtualDom {
     // The element ids that are used in the renderer
     pub(crate) elements: Slab<Option<ElementRef>>,
 
-    pub(crate) mutations: Mutations<'static>,
-
     pub(crate) runtime: Rc<Runtime>,
 
     // Currently suspended scopes
@@ -263,7 +264,6 @@ impl VirtualDom {
             dirty_scopes: Default::default(),
             templates: Default::default(),
             elements: Default::default(),
-            mutations: Mutations::default(),
             suspended_scopes: Default::default(),
         };
 
@@ -544,38 +544,33 @@ impl VirtualDom {
     ///
     /// apply_edits(edits);
     /// ```
-    pub fn rebuild(&mut self) -> Mutations {
+    pub fn rebuild(&mut self, to: &mut impl WriteMutations) {
         let _runtime = RuntimeGuard::new(self.runtime.clone());
         match unsafe { self.run_scope(ScopeId::ROOT) } {
             // Rebuilding implies we append the created elements to the root
             RenderReturn::Ready(node) => {
                 let m = self.create_scope(ScopeId::ROOT, &node);
-                self.mutations.edits.push(Mutation::AppendChildren {
-                    id: ElementId(0),
-                    m,
-                });
+                to.append_children(ElementId(0), m);
             }
             // If an error occurs, we should try to render the default error component and context where the error occured
             RenderReturn::Aborted(placeholder) => {
                 tracing::debug!("Ran into suspended or aborted scope during rebuild");
                 let id = self.next_element();
                 placeholder.id.set(Some(id));
-                self.mutations.push(Mutation::CreatePlaceholder { id });
+                to.create_placeholder(id);
             }
         }
-
-        self.finalize()
     }
 
     /// Render whatever the VirtualDom has ready as fast as possible without requiring an executor to progress
     /// suspended subtrees.
-    pub fn render_immediate(&mut self) -> Mutations {
+    pub fn render_immediate(&mut self, to: &mut impl WriteMutations) {
         // Build a waker that won't wake up since our deadline is already expired when it's polled
         let waker = futures_util::task::noop_waker();
         let mut cx = std::task::Context::from_waker(&waker);
 
         // Now run render with deadline but dont even try to poll any async tasks
-        let fut = self.render_with_deadline(std::future::ready(()));
+        let fut = self.render_with_deadline(std::future::ready(()), to);
         pin_mut!(fut);
 
         // The root component is not allowed to be async
@@ -596,7 +591,7 @@ impl VirtualDom {
 
             self.wait_for_work().await;
 
-            _ = self.render_immediate();
+            _ = self.render_immediate(&mut NoOpMutations);
         }
     }
 
@@ -605,7 +600,11 @@ impl VirtualDom {
     /// It's generally a good idea to put some sort of limit on the suspense process in case a future is having issues.
     ///
     /// If no suspense trees are present
-    pub async fn render_with_deadline(&mut self, deadline: impl Future<Output = ()>) -> Mutations {
+    pub async fn render_with_deadline(
+        &mut self,
+        deadline: impl Future<Output = ()>,
+        to: &mut impl WriteMutations,
+    ) {
         pin_mut!(deadline);
 
         self.process_events();
@@ -625,7 +624,7 @@ impl VirtualDom {
                     let _runtime = RuntimeGuard::new(self.runtime.clone());
                     // Run the scope and get the mutations
                     let new_nodes = self.run_scope(dirty.id);
-                    self.diff_scope(dirty.id, new_nodes);
+                    self.diff_scope(dirty.id, new_nodes, to);
                 }
             }
 
@@ -645,16 +644,11 @@ impl VirtualDom {
             if let Either::Left((_, _)) = select(&mut deadline, pinned).await {
                 // release the borrowed
                 drop(work);
-                return self.finalize();
+                return;
             }
         }
     }
 
-    /// Swap the current mutations with a new
-    fn finalize(&mut self) -> Mutations {
-        std::mem::take(&mut self.mutations)
-    }
-
     /// Get the current runtime
     pub fn runtime(&self) -> Rc<Runtime> {
         self.runtime.clone()