diff

    fn diff_scope<M: WriteMutations>(
        &mut self,
        to: Option<&mut M>,
        scope: ScopeId,
        new_nodes: Element,
    ) {
        self.runtime.clone().with_scope_on_stack(scope, || {
            // We don't diff the nodes if the scope is suspended or has an error
            let Ok(new_real_nodes) = &new_nodes else {
                return;
            };
            let scope_state = &mut self.scopes[scope.0];
            // Load the old and new rendered nodes
            let old = scope_state.last_rendered_node.take().unwrap();

            // If there are suspended scopes, we need to check if the scope is suspended before we diff it
            // If it is suspended, we need to diff it but write the mutations nothing
            // Note: It is important that we still diff the scope even if it is suspended, because the scope may render other child components which may change between renders
            let mut render_to = to.filter(|_| self.runtime.scope_should_render(scope));
            old.diff_node(new_real_nodes, self, render_to.as_deref_mut());

            self.scopes[scope.0].last_rendered_node = Some(LastRenderedNode::new(new_nodes));

            if render_to.is_some() {
                self.runtime.get_state(scope).mount(&self.runtime);
            }
        })
    }

pub(crate) struct VNodeMount {
    /// The parent of this node
    pub parent: Option<ElementRef>,

    /// A back link to the original node
    pub node: VNode,

    /// The IDs for the roots of this template - to be used when moving the template around and removing it from
    /// the actual Dom
    pub root_ids: Box<[ElementId]>,

    /// The element in the DOM that each attribute is mounted to
    pub(crate) mounted_attributes: Box<[ElementId]>,

    /// For components: This is the ScopeId the component is mounted to
    /// For other dynamic nodes: This is element in the DOM that each dynamic node is mounted to
    pub(crate) mounted_dynamic_nodes: Box<[usize]>,
}

    pub(crate) fn diff_node(
        &self,
        new: &VNode,
        dom: &mut VirtualDom,
        mut to: Option<&mut impl WriteMutations>,
    ) {
        // ...
        // If the templates are different, we need to replace the entire template
        if self.template != new.template {
            let mount_id = self.mount.get();
            let parent = dom.get_mounted_parent(mount_id);
            return self.replace(std::slice::from_ref(new), parent, dom, to);
        }

        self.move_mount_to(new, dom);

        // If the templates are the same, we don't need to do anything, except copy over the mount information
        if self == new {
            return;
        }

        // If the templates are the same, we can diff the attributes and children
        // Start with the attributes
        // Since the attributes are only side effects, we can skip diffing them entirely if the node is suspended and we aren't outputting mutations
        if let Some(to) = to.as_deref_mut() {
            self.diff_attributes(new, dom, to);
        }

        // Now diff the dynamic nodes
        let mount_id = new.mount.get();
        for (dyn_node_idx, (old, new)) in self
            .dynamic_nodes
            .iter()
            .zip(new.dynamic_nodes.iter())
            .enumerate()
        {
            self.diff_dynamic_node(mount_id, dyn_node_idx, old, new, dom, to.as_deref_mut())
        }
    }

// 1. one template, a dynamic attribute and a dynamic text
fn same_template() -> Element {
  let n = step();
  let cls = if n >= 2 { "big" } else { "small" };
  rsx! {
    div { class: "{cls}", id: "static-id",
      "count {n}"
      span { "static text" }
    }
  }
}

===== 1 same template
--- rebuild (step 0): 5 edits
  LoadTemplate <div> index=0 id=1
  SetAttribute class=Text("small") id=1
  CreateTextNode "count 0" id=2
  ReplacePlaceholder path=[0] m=1
  AppendChildren id=0 m=1
--- step 1: 1 edits
  SetText "count 1" id=2
--- step 2: 2 edits
  SetAttribute class=Text("big") id=1
  SetText "count 2" id=2

    pub(crate) fn replace_inner(
        &self,
        right: &[VNode],
        parent: Option<ElementRef>,
        dom: &mut VirtualDom,
        mut to: Option<&mut impl WriteMutations>,
        destroy_component_state: bool,
    ) {
        let m = dom.create_children(to.as_deref_mut(), right, parent);

        // Instead of *just* removing it, we can use the replace mutation
        self.remove_node_inner(dom, to, destroy_component_state, Some(m))
    }

// 2. if / else: two different templates in one dynamic slot
fn if_else() -> Element {
  let n = step();
  rsx! {
    if n % 2 == 0 {
      div { "even {n}" }
    } else {
      p { "odd {n}" }
    }
  }
}

===== 2 if/else
--- rebuild (step 0): 4 edits
  LoadTemplate <div> index=0 id=1
  CreateTextNode "even 0" id=2
  ReplacePlaceholder path=[0] m=1
  AppendChildren id=0 m=1
--- step 1: 4 edits
  LoadTemplate <p> index=0 id=3
  CreateTextNode "odd 1" id=4
  ReplacePlaceholder path=[0] m=1
  ReplaceWith id=1 m=1
--- step 2: 4 edits
  LoadTemplate <div> index=0 id=1
  CreateTextNode "even 2" id=2
  ReplacePlaceholder path=[0] m=1
  ReplaceWith id=3 m=1
--- step 3: 4 edits
  LoadTemplate <p> index=0 id=3
  CreateTextNode "odd 3" id=4
  ReplacePlaceholder path=[0] m=1
  ReplaceWith id=1 m=1

        match (old_node, new_node) {
            (Text(old), Text(new)) => {
                // Diffing text is just a side effect, if we are diffing suspended nodes and are not outputting mutations, we can skip it
                if let Some(to) = to {
                    let id = ElementId(dom.get_mounted_dyn_node(mount, idx));
                    self.diff_vtext(to, id, old, new)
                }
            }
            (Placeholder(_), Placeholder(_)) => {}
            (Fragment(old), Fragment(new)) => dom.diff_non_empty_fragment(
                to,
                old,
                new,
                Some(self.reference_to_dynamic_node(mount, idx)),
            ),
            (Component(old), Component(new)) => {
                let scope_id = ScopeId(dom.get_mounted_dyn_node(mount, idx));
                self.diff_vcomponent(
                    mount,
                    idx,
                    new,
                    old,
                    scope_id,
                    Some(self.reference_to_dynamic_node(mount, idx)),
                    dom,
                    to,
                )
            }
            (old, new) => {
                // ...
                let old_mount = dom.get_mounted_dyn_node(mount, idx);
                dom.set_mounted_dyn_node(mount, idx, usize::MAX);

                let new_nodes_on_stack =
                    self.create_dynamic_node(new, mount, idx, dom, to.as_deref_mut());

                // Restore the mount for the scope we are removing
                let new_mount = dom.get_mounted_dyn_node(mount, idx);
                dom.set_mounted_dyn_node(mount, idx, old_mount);

                self.remove_dynamic_node(mount, dom, to, true, idx, old, Some(new_nodes_on_stack));

                // Restore the mount for the node we created
                dom.set_mounted_dyn_node(mount, idx, new_mount);
            }
        };

// 3. Option<String>: placeholder <-> text
fn option_text() -> Element {
  let n = step();
  let label = if n % 2 == 1 { Some(format!("label {n}")) } else { None };
  rsx! {
    div { {label} }
  }
}

===== 3 Option text
--- rebuild (step 0): 4 edits
  LoadTemplate <div> index=0 id=1
  CreatePlaceholder id=2
  ReplacePlaceholder path=[0] m=1
  AppendChildren id=0 m=1
--- step 1: 2 edits
  CreateTextNode "label 1" id=3
  ReplaceWith id=2 m=1
--- step 2: 2 edits
  CreatePlaceholder id=2
  ReplaceWith id=3 m=1
--- step 3: 2 edits
  CreateTextNode "label 3" id=3
  ReplaceWith id=2 m=1

                                // Volatile attributes are attributes that the browser may override so we always update them
                                let volatile = old.volatile;
                                // We only need to write the attribute if the attribute is volatile or the value has changed
                                // and this is not an event listener.
                                // Interpreters reference event listeners by name and element id, so we don't need to write them
                                // even if the closure has changed.
                                let attribute_changed = match (&old.value, &new.value) {
                                    (AttributeValue::Text(l), AttributeValue::Text(r)) => l != r,
                                    (AttributeValue::Float(l), AttributeValue::Float(r)) => l != r,
                                    (AttributeValue::Int(l), AttributeValue::Int(r)) => l != r,
                                    (AttributeValue::Bool(l), AttributeValue::Bool(r)) => l != r,
                                    (AttributeValue::Any(l), AttributeValue::Any(r)) => {
                                        !l.as_ref().any_cmp(r.as_ref())
                                    }
                                    (AttributeValue::None, AttributeValue::None) => false,
                                    (AttributeValue::Listener(_), AttributeValue::Listener(_)) => {
                                        false
                                    }
                                    _ => true,
                                };

// 5. a conditional attribute and an event listener
fn attr_listener() -> Element {
  let n = step();
  rsx! {
    button {
      title: if n % 2 == 1 { "odd" },
      onclick: move |_| println!("clicked at step {n}"),
      "btn"
    }
  }
}

===== 5 conditional attribute + listener
...
--- step 1: 1 edits
  SetAttribute title=Text("odd") id=1
--- step 2: 1 edits
  SetAttribute title=None id=1

    pub(crate) fn diff_vcomponent(
        &self,
        mount: MountId,
        idx: usize,
        new: &VComponent,
        old: &VComponent,
        scope_id: ScopeId,
        parent: Option<ElementRef>,
        dom: &mut VirtualDom,
        to: Option<&mut impl WriteMutations>,
    ) {
        // Replace components that have different render fns
        if old.render_fn != new.render_fn {
            return self.replace_vcomponent(mount, idx, new, parent, dom, to);
        }

        // copy out the box for both
        let old_scope = &mut dom.scopes[scope_id.0];
        let old_props: &mut dyn AnyProps = old_scope.props.deref_mut();
        let new_props: &dyn AnyProps = new.props.deref();

        // If the props are static, then we try to memoize by setting the new with the old
        // The target ScopeState still has the reference to the old props, so there's no need to update anything
        // This also implicitly drops the new props since they're not used
        if old_props.memoize(new_props.props()) {
            tracing::trace!("Memoized props for component {:#?}", scope_id,);
            return;
        }

        // Now diff the scope
        dom.run_and_diff_scope(to, scope_id);

        let height = dom.runtime.get_state(scope_id).height;
        dom.dirty_scopes.remove(&ScopeOrder::new(height, scope_id));
    }

// 4. a component's props
fn props_app() -> Element {
  let n = step();
  // label changes at step 2 only
  let label = if n >= 2 { "B" } else { "A" };
  rsx! {
    h1 { "parent {n}" }
    Child { label }
  }
}

#[component]
fn Child(label: String) -> Element {
  CHILD_RUNS.with(|c| c.set(c.get() + 1));
  rsx! { p { "child {label}" } }
}

===== 4 component props
--- rebuild (step 0): 7 edits
  LoadTemplate <h1> index=0 id=1
  CreateTextNode "parent 0" id=2
  ReplacePlaceholder path=[0] m=1
  LoadTemplate <p> index=0 id=3
  CreateTextNode "child A" id=4
  ReplacePlaceholder path=[0] m=1
  AppendChildren id=0 m=2
--- step 1: 1 edits
  SetText "parent 1" id=2
  Child has run 1 times
--- step 2: 2 edits
  SetText "parent 2" id=2
  SetText "child B" id=4
  Child has run 2 times

    pub(crate) fn next_element(&mut self) -> ElementId {
        let mut elements = self.runtime.elements.borrow_mut();
        ElementId(elements.insert(None))
    }

    pub(crate) fn reclaim(&mut self, el: ElementId) {
        if !self.try_reclaim(el) {
            tracing::error!("cannot reclaim {:?}", el);
        }
    }

    pub(crate) fn try_reclaim(&mut self, el: ElementId) -> bool {
        // We never reclaim the unmounted elements or the root element
        if el.0 == 0 || el.0 == usize::MAX {
            return true;
        }

        let mut elements = self.runtime.elements.borrow_mut();
        elements.try_remove(el.0).is_some()
    }

===== 5 conditional attribute + listener
--- rebuild (step 0): 4 edits
  LoadTemplate <button> index=0 id=1
  SetAttribute title=None id=1
  NewEventListener click id=1
  AppendChildren id=0 m=1