diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs index 1c10f2113..ad1cabf83 100644 --- a/packages/core/src/diff.rs +++ b/packages/core/src/diff.rs @@ -79,17 +79,44 @@ use std::{ }; use DomEdit::*; +/// Our DiffMachine is an iterative tree differ. +/// +/// It uses techniques of a register-based Turing Machines to allow pausing and restarting of the diff algorithm. This +/// was origially implemented using recursive techniques, but Rust lacks the abilty to call async functions recursively, +/// meaning we could not "pause" the diffing algorithm. +/// +/// Instead, we use a traditional stack machine approach to diff and create new nodes. pub struct DiffMachine<'bump> { vdom: &'bump SharedResources, pub mutations: Mutations<'bump>, + pub nodes_created_stack: SmallVec<[usize; 10]>, + + pub node_stack: SmallVec<[DiffInstruction<'bump>; 10]>, + pub scope_stack: SmallVec<[ScopeId; 5]>, pub diffed: FxHashSet, pub seen_scopes: FxHashSet, } +pub enum DiffInstruction<'a> { + DiffNode { + old: &'a VNode<'a>, + new: &'a VNode<'a>, + progress: usize, + }, + + Append {}, + Replace { + with: usize, + }, + + Create { + node: &'a VNode<'a>, + }, +} impl<'bump> DiffMachine<'bump> { pub(crate) fn new( @@ -98,6 +125,8 @@ impl<'bump> DiffMachine<'bump> { shared: &'bump SharedResources, ) -> Self { Self { + node_stack: smallvec![], + nodes_created_stack: smallvec![], mutations: edits, scope_stack: smallvec![cur_scope], vdom: shared, @@ -111,19 +140,15 @@ impl<'bump> DiffMachine<'bump> { /// /// This will PANIC if any component elements are passed in. pub fn new_headless(shared: &'bump SharedResources) -> Self { - Self { - mutations: Mutations::new(), - scope_stack: smallvec![ScopeId(0)], - vdom: shared, - diffed: FxHashSet::default(), - seen_scopes: FxHashSet::default(), - } - } - - // make incremental progress on the current task - pub fn work(&mut self, is_ready: impl FnMut() -> bool) -> Result { todo!() - // Ok(FiberResult::D) + // Self { + // node_stack: smallvec![], + // mutations: Mutations::new(), + // scope_stack: smallvec![ScopeId(0)], + // vdom: shared, + // diffed: FxHashSet::default(), + // seen_scopes: FxHashSet::default(), + // } } // @@ -134,17 +159,153 @@ impl<'bump> DiffMachine<'bump> { Ok(()) } - // Diff the `old` node with the `new` node. Emits instructions to modify a - // physical DOM node that reflects `old` into something that reflects `new`. - // - // the real stack should be what it is coming in and out of this function (ideally empty) - // - // each function call assumes the stack is fresh (empty). - pub async fn diff_node( - &mut self, - old_node: &'bump VNode<'bump>, - new_node: &'bump VNode<'bump>, - ) { + /// Progress the diffing for this "fiber" + /// + /// This method implements a depth-first iterative tree traversal. + /// + /// We do depth-first to maintain high cache locality (nodes were originally generated recursively) and because we + /// only need a stack (not a queue) of lists + /// + /// + /// + pub async fn work(&mut self) -> Result<()> { + // todo: don't move the reused instructions around + while let Some(mut make) = self.node_stack.pop() { + match &mut make { + DiffInstruction::DiffNode { old, new, progress } => { + // + } + + DiffInstruction::Append {} => { + let many = self.nodes_created_stack.pop().unwrap(); + self.edit_append_children(many as u32); + } + + DiffInstruction::Replace { with } => { + let many = self.nodes_created_stack.pop().unwrap(); + self.edit_replace_with(*with as u32, many as u32); + } + + DiffInstruction::Create { node, .. } => { + match &node.kind { + VNodeKind::Text(text) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_text_node(text.text, real_id); + text.dom_id.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + VNodeKind::Suspended(suspended) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_placeholder(real_id); + suspended.node.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + VNodeKind::Anchor(anchor) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_placeholder(real_id); + anchor.dom_id.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + + VNodeKind::Element(el) => { + let VElement { + tag_name, + listeners, + attributes, + children, + namespace, + static_attrs: _, + static_children: _, + static_listeners: _, + dom_id, + } = el; + + let real_id = self.vdom.reserve_node(); + self.edit_create_element(tag_name, *namespace, real_id); + dom_id.set(Some(real_id)); + + let cur_scope = self.current_scope().unwrap(); + + listeners.iter().for_each(|listener| { + self.fix_listener(listener); + listener.mounted_node.set(Some(real_id)); + self.edit_new_event_listener(listener, cur_scope.clone()); + + // if the node has an event listener, then it must be visited ? + }); + + for attr in *attributes { + self.edit_set_attribute(attr); + } + + // TODO: the append child edit + + *self.nodes_created_stack.last_mut().unwrap() += 1; + + // push every child onto the stack + self.nodes_created_stack.push(0); + for child in *children { + self.node_stack + .push(DiffInstruction::Create { node: child }) + } + } + + VNodeKind::Fragment(frag) => { + for node in frag.children { + self.node_stack.push(DiffInstruction::Create { node }) + } + } + + VNodeKind::Component(_) => { + // + } + } + } + } + } + + Ok(()) + } + + /// Create the new node, pushing instructions on our instruction stack to create any further children + /// + /// + pub fn create_iterative(&mut self, node: &'bump VNode<'bump>) { + match &node.kind { + // singles + // update the parent + VNodeKind::Text(text) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_text_node(text.text, real_id); + text.dom_id.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + VNodeKind::Suspended(suspended) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_placeholder(real_id); + suspended.node.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + VNodeKind::Anchor(anchor) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_placeholder(real_id); + anchor.dom_id.set(Some(real_id)); + *self.nodes_created_stack.last_mut().unwrap() += 1; + } + + VNodeKind::Element(el) => { + // + } + VNodeKind::Fragment(frag) => { + // + } + VNodeKind::Component(comp) => { + // + } + } + } + + pub fn diff_iterative(&mut self, old_node: &'bump VNode<'bump>, new_node: &'bump VNode<'bump>) { match (&old_node.kind, &new_node.kind) { // Handle the "sane" cases first. // The rsx and html macros strongly discourage dynamic lists not encapsulated by a "Fragment". @@ -275,8 +436,7 @@ impl<'bump> DiffMachine<'bump> { false => { // the props are different... scope.run_scope().unwrap(); - self.diff_node(scope.frames.wip_head(), scope.frames.fin_head()) - .await; + self.diff_node(scope.frames.wip_head(), scope.frames.fin_head()); } } @@ -308,7 +468,222 @@ impl<'bump> DiffMachine<'bump> { // This is the case where options or direct vnodes might be used. // In this case, it's faster to just skip ahead to their diff if old.children.len() == 1 && new.children.len() == 1 { - self.diff_node(&old.children[0], &new.children[0]).await; + self.diff_node(&old.children[0], &new.children[0]); + return; + } + + self.diff_children(old.children, new.children); + } + + (VNodeKind::Anchor(old), VNodeKind::Anchor(new)) => { + new.dom_id.set(old.dom_id.get()); + } + + // The strategy here is to pick the first possible node from the previous set and use that as our replace with root + // + // We also walk the "real node" list to make sure all latent roots are claened up + // This covers the case any time a fragment or component shows up with pretty much anything else + // + // This likely isn't the fastest way to go about replacing one node with a virtual node, but the "insane" cases + // are pretty rare. IE replacing a list (component or fragment) with a single node. + ( + VNodeKind::Component(_) + | VNodeKind::Fragment(_) + | VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_), + VNodeKind::Component(_) + | VNodeKind::Fragment(_) + | VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_), + ) => { + self.replace_and_create_many_with_many([old_node], [new_node]); + } + + // TODO + (VNodeKind::Suspended(old), new) => { + // + self.replace_and_create_many_with_many([old_node], [new_node]); + } + // a node that was once real is now suspended + (old, VNodeKind::Suspended(_)) => { + // + self.replace_and_create_many_with_many([old_node], [new_node]); + } + } + } + + // Diff the `old` node with the `new` node. Emits instructions to modify a + // physical DOM node that reflects `old` into something that reflects `new`. + // + // the real stack should be what it is coming in and out of this function (ideally empty) + // + // each function call assumes the stack is fresh (empty). + pub fn diff_node(&mut self, old_node: &'bump VNode<'bump>, new_node: &'bump VNode<'bump>) { + match (&old_node.kind, &new_node.kind) { + // Handle the "sane" cases first. + // The rsx and html macros strongly discourage dynamic lists not encapsulated by a "Fragment". + // So the sane (and fast!) cases are where the virtual structure stays the same and is easily diffable. + (VNodeKind::Text(old), VNodeKind::Text(new)) => { + let root = old_node.direct_id(); + + if old.text != new.text { + self.edit_push_root(root); + self.edit_set_text(new.text); + self.edit_pop(); + } + + new.dom_id.set(Some(root)); + } + + (VNodeKind::Element(old), VNodeKind::Element(new)) => { + let root = old_node.direct_id(); + + // If the element type is completely different, the element needs to be re-rendered completely + // This is an optimization React makes due to how users structure their code + // + // This case is rather rare (typically only in non-keyed lists) + if new.tag_name != old.tag_name || new.namespace != old.namespace { + self.replace_node_with_node(root, old_node, new_node); + return; + } + + new.dom_id.set(Some(root)); + + // Don't push the root if we don't have to + let mut has_comitted = false; + let mut please_commit = |edits: &mut Vec| { + if !has_comitted { + has_comitted = true; + edits.push(PushRoot { id: root.as_u64() }); + } + }; + + // Diff Attributes + // + // It's extraordinarily rare to have the number/order of attributes change + // In these cases, we just completely erase the old set and make a new set + // + // TODO: take a more efficient path than this + if old.attributes.len() == new.attributes.len() { + for (old_attr, new_attr) in old.attributes.iter().zip(new.attributes.iter()) { + if old_attr.value != new_attr.value { + please_commit(&mut self.mutations.edits); + self.edit_set_attribute(new_attr); + } + } + } else { + // TODO: provide some sort of report on how "good" the diffing was + please_commit(&mut self.mutations.edits); + for attribute in old.attributes { + self.edit_remove_attribute(attribute); + } + for attribute in new.attributes { + self.edit_set_attribute(attribute) + } + } + + // Diff listeners + // + // It's extraordinarily rare to have the number/order of listeners change + // In the cases where the listeners change, we completely wipe the data attributes and add new ones + // + // We also need to make sure that all listeners are properly attached to the parent scope (fix_listener) + // + // TODO: take a more efficient path than this + let cur_scope: ScopeId = self.scope_stack.last().unwrap().clone(); + if old.listeners.len() == new.listeners.len() { + for (old_l, new_l) in old.listeners.iter().zip(new.listeners.iter()) { + if old_l.event != new_l.event { + please_commit(&mut self.mutations.edits); + self.edit_remove_event_listener(old_l.event); + self.edit_new_event_listener(new_l, cur_scope); + } + new_l.mounted_node.set(old_l.mounted_node.get()); + self.fix_listener(new_l); + } + } else { + please_commit(&mut self.mutations.edits); + for listener in old.listeners { + self.edit_remove_event_listener(listener.event); + } + for listener in new.listeners { + listener.mounted_node.set(Some(root)); + self.edit_new_event_listener(listener, cur_scope); + + // Make sure the listener gets attached to the scope list + self.fix_listener(listener); + } + } + + if has_comitted { + self.edit_pop(); + } + + self.diff_children(old.children, new.children); + } + + (VNodeKind::Component(old), VNodeKind::Component(new)) => { + let scope_addr = old.ass_scope.get().unwrap(); + + // Make sure we're dealing with the same component (by function pointer) + if old.user_fc == new.user_fc { + // + self.scope_stack.push(scope_addr); + + // Make sure the new component vnode is referencing the right scope id + new.ass_scope.set(Some(scope_addr)); + + // make sure the component's caller function is up to date + let scope = self.get_scope_mut(&scope_addr).unwrap(); + + scope + .update_scope_dependencies(new.caller.clone(), ScopeChildren(new.children)); + + // React doesn't automatically memoize, but we do. + let compare = old.comparator.unwrap(); + + match compare(new) { + true => { + // the props are the same... + } + false => { + // the props are different... + scope.run_scope().unwrap(); + self.diff_node(scope.frames.wip_head(), scope.frames.fin_head()); + } + } + + self.scope_stack.pop(); + + self.seen_scopes.insert(scope_addr); + } else { + let mut old_iter = RealChildIterator::new(old_node, &self.vdom); + let first = old_iter + .next() + .expect("Components should generate a placeholder root"); + + // remove any leftovers + for to_remove in old_iter { + self.edit_push_root(to_remove.direct_id()); + self.edit_remove(); + } + + // seems like we could combine this into a single instruction.... + self.replace_node_with_node(first.direct_id(), old_node, new_node); + + // Wipe the old one and plant the new one + let old_scope = old.ass_scope.get().unwrap(); + self.destroy_scopes(old_scope); + } + } + + (VNodeKind::Fragment(old), VNodeKind::Fragment(new)) => { + // This is the case where options or direct vnodes might be used. + // In this case, it's faster to just skip ahead to their diff + if old.children.len() == 1 && new.children.len() == 1 { + self.diff_node(&old.children[0], &new.children[0]); return; } @@ -1116,14 +1491,14 @@ impl<'bump> DiffMachine<'bump> { // diff the rest for (new_child, old_child) in new.iter().zip(old.iter()) { - self.diff_node(old_child, new_child).await + self.diff_node(old_child, new_child) } } // old.len == new.len -> no nodes added/removed, but perhaps changed Ordering::Equal => { for (new_child, old_child) in new.iter().zip(old.iter()) { - self.diff_node(old_child, new_child).await; + self.diff_node(old_child, new_child); } } } @@ -1659,3 +2034,16 @@ fn compare_strs(a: &str, b: &str) -> bool { true } } + +struct DfsIterator<'a> { + idx: usize, + node: Option<(&'a VNode<'a>, &'a VNode<'a>)>, + nodes: Option<(&'a [VNode<'a>], &'a [VNode<'a>])>, +} +impl<'a> Iterator for DfsIterator<'a> { + type Item = (&'a VNode<'a>, &'a VNode<'a>); + + fn next(&mut self) -> Option { + todo!() + } +} diff --git a/packages/core/src/diff.rs.old b/packages/core/src/diff.rs.old new file mode 100644 index 000000000..6bcf03568 --- /dev/null +++ b/packages/core/src/diff.rs.old @@ -0,0 +1,1708 @@ +//! This module contains the stateful PriorityFiber and all methods to diff VNodes, their properties, and their children. +//! +//! The [`PriorityFiber`] calculates the diffs between the old and new frames, updates the new nodes, and generates a set +//! of mutations for the RealDom to apply. +//! +//! ## Notice: +//! The inspiration and code for this module was originally taken from Dodrio (@fitzgen) and then modified to support +//! Components, Fragments, Suspense, SubTree memoization, incremental diffing, cancelation, NodeRefs, and additional +//! batching operations. +//! +//! ## Implementation Details: +//! +//! ### IDs for elements +//! -------------------- +//! All nodes are addressed by their IDs. The RealDom provides an imperative interface for making changes to these nodes. +//! We don't necessarily require that DOM changes happen instnatly during the diffing process, so the implementor may choose +//! to batch nodes if it is more performant for their application. The element IDs are indicies into the internal element +//! array. The expectation is that implemenetors will use the ID as an index into a Vec of real nodes, allowing for passive +//! garbage collection as the VirtualDOM replaces old nodes. +//! +//! When new vnodes are created through `cx.render`, they won't know which real node they correspond to. During diffing, +//! we always make sure to copy over the ID. If we don't do this properly, the ElementId will be populated incorrectly +//! and brick the user's page. +//! +//! ### Fragment Support +//! +//! Fragments (nodes without a parent) are supported through a combination of "replace with" and anchor vnodes. Fragments +//! can be particularly challenging when they are empty, so the placeholder node lets us "reserve" a spot for the empty +//! fragment to be replaced with when it is no longer empty. This is guaranteed by logic in the NodeFactory - it is +//! impossible to craft a fragment with 0 elements - they must always have at least a single placeholder element. This is +//! slightly inefficient, but represents a such an uncommon use case that it is not worth optimizing. +//! +//! Other implementations either don't support fragments or use a "child + sibling" pattern to represent them. Our code is +//! vastly simpler and more performant when we can just create a placeholder element while the fragment has no children. +//! +//! ## Subtree Memoization +//! ----------------------- +//! We also employ "subtree memoization" which saves us from having to check trees which take no dynamic content. We can +//! detect if a subtree is "static" by checking if its children are "static". Since we dive into the tree depth-first, the +//! calls to "create" propogate this information upwards. Structures like the one below are entirely static: +//! ```rust +//! rsx!( div { class: "hello world", "this node is entirely static" } ) +//! ``` +//! Because the subtrees won't be diffed, their "real node" data will be stale (invalid), so its up to the reconciler to +//! track nodes created in a scope and clean up all relevant data. Support for this is currently WIP and depends on comp-time +//! hashing of the subtree from the rsx! macro. We do a very limited form of static analysis via static string pointers as +//! a way of short-circuiting the most expensive checks. +//! +//! ## Bloom Filter and Heuristics +//! ------------------------------ +//! For all components, we employ some basic heuristics to speed up allocations and pre-size bump arenas. The heuristics are +//! currently very rough, but will get better as time goes on. The information currently tracked includes the size of a +//! bump arena after first render, the number of hooks, and the number of nodes in the tree. +//! +//! ## Garbage Collection +//! --------------------- +//! Dioxus uses a passive garbage collection system to clean up old nodes once the work has been completed. This garabge +//! collection is done internally once the main diffing work is complete. After the "garbage" is collected, Dioxus will then +//! start to re-use old keys for new nodes. This results in a passive memory management system that is very efficient. +//! +//! The IDs used by the key/map are just an index into a vec. This means that Dioxus will drive the key allocation strategy +//! so the client only needs to maintain a simple list of nodes. By default, Dioxus will not manually clean up old nodes +//! for the client. As new nodes are created, old nodes will be over-written. +//! +//! Further Reading and Thoughts +//! ---------------------------- +//! There are more ways of increasing diff performance here that are currently not implemented. +//! More info on how to improve this diffing algorithm: +//! - https://hacks.mozilla.org/2019/03/fast-bump-allocated-virtual-doms-with-rust-and-wasm/ + +use crate::{arena::SharedResources, innerlude::*}; +use futures_util::Future; +use fxhash::{FxBuildHasher, FxHashMap, FxHashSet}; +use indexmap::IndexSet; +use smallvec::{smallvec, SmallVec}; + +use std::{ + any::Any, cell::Cell, cmp::Ordering, collections::HashSet, marker::PhantomData, pin::Pin, +}; +use DomEdit::*; + +pub struct DiffMachine<'bump> { + vdom: &'bump SharedResources, + + pub mutations: Mutations<'bump>, + + pub node_stack: SmallVec<[SearchNode<'bump>; 10]>, + + pub scope_stack: SmallVec<[ScopeId; 5]>, + + pub diffed: FxHashSet, + + pub seen_scopes: FxHashSet, +} +enum SearchNode<'a> { + Node { + old: &'a VNode<'a>, + new: &'a VNode<'a>, + }, + NodeList { + old: &'a [VNode<'a>], + node: &'a [VNode<'a>], + }, +} + +impl<'bump> DiffMachine<'bump> { + pub(crate) fn new( + edits: Mutations<'bump>, + cur_scope: ScopeId, + shared: &'bump SharedResources, + ) -> Self { + Self { + node_stack: smallvec![], + mutations: edits, + scope_stack: smallvec![cur_scope], + vdom: shared, + diffed: FxHashSet::default(), + seen_scopes: FxHashSet::default(), + } + } + + /// Allows the creation of a diff machine without the concept of scopes or a virtualdom + /// this is mostly useful for testing + /// + /// This will PANIC if any component elements are passed in. + pub fn new_headless(shared: &'bump SharedResources) -> Self { + Self { + node_stack: smallvec![], + mutations: Mutations::new(), + scope_stack: smallvec![ScopeId(0)], + vdom: shared, + diffed: FxHashSet::default(), + seen_scopes: FxHashSet::default(), + } + } + + // + pub async fn diff_scope(&mut self, id: ScopeId) -> Result<()> { + let component = self.get_scope_mut(&id).ok_or_else(|| Error::NotMounted)?; + let (old, new) = (component.frames.wip_head(), component.frames.fin_head()); + self.diff_node(old, new); + Ok(()) + } + + /// Progress the diffing for this "fiber" + /// + /// This method implements a depth-first iterative tree traversal. + /// + /// We do depth-first to maintain high cache locality (nodes were originally generated recursively) and because we + /// only need a stack (not a queue) of lists + /// + /// + /// + pub async fn work(&mut self) -> Result<()> { + // + while let Some(search) = self.node_stack.last_mut() { + // Prevent our task from blocking permanently + yield_now().await; + + match search { + SearchNode::Node { old, new } => { + // + // self.diff_node(old, new); + } + + SearchNode::NodeList { old, node } => { + // + todo!() + } + } + } + + Ok(()) + } + + // Diff the `old` node with the `new` node. Emits instructions to modify a + // physical DOM node that reflects `old` into something that reflects `new`. + // + // the real stack should be what it is coming in and out of this function (ideally empty) + // + // each function call assumes the stack is fresh (empty). + pub fn diff_node(&mut self, old_node: &'bump VNode<'bump>, new_node: &'bump VNode<'bump>) { + match (&old_node.kind, &new_node.kind) { + // Handle the "sane" cases first. + // The rsx and html macros strongly discourage dynamic lists not encapsulated by a "Fragment". + // So the sane (and fast!) cases are where the virtual structure stays the same and is easily diffable. + (VNodeKind::Text(old), VNodeKind::Text(new)) => { + let root = old_node.direct_id(); + + if old.text != new.text { + self.edit_push_root(root); + self.edit_set_text(new.text); + self.edit_pop(); + } + + new.dom_id.set(Some(root)); + } + + (VNodeKind::Element(old), VNodeKind::Element(new)) => { + let root = old_node.direct_id(); + + // If the element type is completely different, the element needs to be re-rendered completely + // This is an optimization React makes due to how users structure their code + // + // This case is rather rare (typically only in non-keyed lists) + if new.tag_name != old.tag_name || new.namespace != old.namespace { + self.replace_node_with_node(root, old_node, new_node); + return; + } + + new.dom_id.set(Some(root)); + + // Don't push the root if we don't have to + let mut has_comitted = false; + let mut please_commit = |edits: &mut Vec| { + if !has_comitted { + has_comitted = true; + edits.push(PushRoot { id: root.as_u64() }); + } + }; + + // Diff Attributes + // + // It's extraordinarily rare to have the number/order of attributes change + // In these cases, we just completely erase the old set and make a new set + // + // TODO: take a more efficient path than this + if old.attributes.len() == new.attributes.len() { + for (old_attr, new_attr) in old.attributes.iter().zip(new.attributes.iter()) { + if old_attr.value != new_attr.value { + please_commit(&mut self.mutations.edits); + self.edit_set_attribute(new_attr); + } + } + } else { + // TODO: provide some sort of report on how "good" the diffing was + please_commit(&mut self.mutations.edits); + for attribute in old.attributes { + self.edit_remove_attribute(attribute); + } + for attribute in new.attributes { + self.edit_set_attribute(attribute) + } + } + + // Diff listeners + // + // It's extraordinarily rare to have the number/order of listeners change + // In the cases where the listeners change, we completely wipe the data attributes and add new ones + // + // We also need to make sure that all listeners are properly attached to the parent scope (fix_listener) + // + // TODO: take a more efficient path than this + let cur_scope: ScopeId = self.scope_stack.last().unwrap().clone(); + if old.listeners.len() == new.listeners.len() { + for (old_l, new_l) in old.listeners.iter().zip(new.listeners.iter()) { + if old_l.event != new_l.event { + please_commit(&mut self.mutations.edits); + self.edit_remove_event_listener(old_l.event); + self.edit_new_event_listener(new_l, cur_scope); + } + new_l.mounted_node.set(old_l.mounted_node.get()); + self.fix_listener(new_l); + } + } else { + please_commit(&mut self.mutations.edits); + for listener in old.listeners { + self.edit_remove_event_listener(listener.event); + } + for listener in new.listeners { + listener.mounted_node.set(Some(root)); + self.edit_new_event_listener(listener, cur_scope); + + // Make sure the listener gets attached to the scope list + self.fix_listener(listener); + } + } + + if has_comitted { + self.edit_pop(); + } + + self.diff_children(old.children, new.children); + } + + (VNodeKind::Component(old), VNodeKind::Component(new)) => { + let scope_addr = old.ass_scope.get().unwrap(); + + // Make sure we're dealing with the same component (by function pointer) + if old.user_fc == new.user_fc { + // + self.scope_stack.push(scope_addr); + + // Make sure the new component vnode is referencing the right scope id + new.ass_scope.set(Some(scope_addr)); + + // make sure the component's caller function is up to date + let scope = self.get_scope_mut(&scope_addr).unwrap(); + + scope + .update_scope_dependencies(new.caller.clone(), ScopeChildren(new.children)); + + // React doesn't automatically memoize, but we do. + let compare = old.comparator.unwrap(); + + match compare(new) { + true => { + // the props are the same... + } + false => { + // the props are different... + scope.run_scope().unwrap(); + self.diff_node(scope.frames.wip_head(), scope.frames.fin_head()); + } + } + + self.scope_stack.pop(); + + self.seen_scopes.insert(scope_addr); + } else { + let mut old_iter = RealChildIterator::new(old_node, &self.vdom); + let first = old_iter + .next() + .expect("Components should generate a placeholder root"); + + // remove any leftovers + for to_remove in old_iter { + self.edit_push_root(to_remove.direct_id()); + self.edit_remove(); + } + + // seems like we could combine this into a single instruction.... + self.replace_node_with_node(first.direct_id(), old_node, new_node); + + // Wipe the old one and plant the new one + let old_scope = old.ass_scope.get().unwrap(); + self.destroy_scopes(old_scope); + } + } + + (VNodeKind::Fragment(old), VNodeKind::Fragment(new)) => { + // This is the case where options or direct vnodes might be used. + // In this case, it's faster to just skip ahead to their diff + if old.children.len() == 1 && new.children.len() == 1 { + self.diff_node(&old.children[0], &new.children[0]); + return; + } + + self.diff_children(old.children, new.children); + } + + (VNodeKind::Anchor(old), VNodeKind::Anchor(new)) => { + new.dom_id.set(old.dom_id.get()); + } + + // The strategy here is to pick the first possible node from the previous set and use that as our replace with root + // + // We also walk the "real node" list to make sure all latent roots are claened up + // This covers the case any time a fragment or component shows up with pretty much anything else + // + // This likely isn't the fastest way to go about replacing one node with a virtual node, but the "insane" cases + // are pretty rare. IE replacing a list (component or fragment) with a single node. + ( + VNodeKind::Component(_) + | VNodeKind::Fragment(_) + | VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_), + VNodeKind::Component(_) + | VNodeKind::Fragment(_) + | VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_), + ) => { + self.replace_and_create_many_with_many([old_node], [new_node]); + } + + // TODO + (VNodeKind::Suspended(old), new) => { + // + self.replace_and_create_many_with_many([old_node], [new_node]); + } + // a node that was once real is now suspended + (old, VNodeKind::Suspended(_)) => { + // + self.replace_and_create_many_with_many([old_node], [new_node]); + } + } + } + + // Emit instructions to create the given virtual node. + // + // The change list stack may have any shape upon entering this function: + // + // [...] + // + // When this function returns, the new node is on top of the change list stack: + // + // [... node] + pub fn create_vnode(&mut self, node: &'bump VNode<'bump>) -> CreateMeta { + match &node.kind { + VNodeKind::Text(text) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_text_node(text.text, real_id); + text.dom_id.set(Some(real_id)); + CreateMeta::new(text.is_static, 1) + } + + VNodeKind::Anchor(anchor) => { + let real_id = self.vdom.reserve_node(); + self.edit_create_placeholder(real_id); + anchor.dom_id.set(Some(real_id)); + CreateMeta::new(false, 1) + } + + VNodeKind::Element(el) => { + // we have the potential to completely eliminate working on this node in the future(!) + // + // This can only be done if all of the elements properties (attrs, children, listeners, etc) are static + // While creating these things, keep track if we can memoize this element. + // At the end, we'll set this flag on the element to skip it + let mut is_static: bool = true; + + let VElement { + tag_name, + listeners, + attributes, + children, + namespace, + static_attrs: _, + static_children: _, + static_listeners: _, + dom_id, + } = el; + + let real_id = self.vdom.reserve_node(); + self.edit_create_element(tag_name, *namespace, real_id); + dom_id.set(Some(real_id)); + + let cur_scope = self.current_scope().unwrap(); + + listeners.iter().for_each(|listener| { + self.fix_listener(listener); + listener.mounted_node.set(Some(real_id)); + self.edit_new_event_listener(listener, cur_scope.clone()); + + // if the node has an event listener, then it must be visited ? + is_static = false; + }); + + for attr in *attributes { + is_static = is_static && attr.is_static; + self.edit_set_attribute(attr); + } + + // Fast path: if there is a single text child, it is faster to + // create-and-append the text node all at once via setting the + // parent's `textContent` in a single change list instruction than + // to emit three instructions to (1) create a text node, (2) set its + // text content, and finally (3) append the text node to this + // parent. + // + // Notice: this is a web-specific optimization and may be changed in the future + // + // TODO move over + // if children.len() == 1 { + // if let VNodeKind::Text(text) = &children[0].kind { + // self.set_text(text.text); + // return CreateMeta::new(is_static, 1); + // } + // } + + for child in *children { + let child_meta = self.create_vnode(child); + is_static = is_static && child_meta.is_static; + + // append whatever children were generated by this call + self.edit_append_children(child_meta.added_to_stack); + } + + CreateMeta::new(is_static, 1) + } + + VNodeKind::Component(vcomponent) => { + let caller = vcomponent.caller.clone(); + + let parent_idx = self.scope_stack.last().unwrap().clone(); + + // Insert a new scope into our component list + let new_idx = self.vdom.insert_scope_with_key(|new_idx| { + let parent_scope = self.get_scope(&parent_idx).unwrap(); + let height = parent_scope.height + 1; + Scope::new( + caller, + new_idx, + Some(parent_idx), + height, + ScopeChildren(vcomponent.children), + self.vdom.clone(), + ) + }); + + // Actually initialize the caller's slot with the right address + vcomponent.ass_scope.set(Some(new_idx)); + + if !vcomponent.can_memoize { + let cur_scope = self.get_scope_mut(&parent_idx).unwrap(); + let extended = *vcomponent as *const VComponent; + let extended: *const VComponent<'static> = + unsafe { std::mem::transmute(extended) }; + cur_scope.borrowed_props.borrow_mut().push(extended); + } + + // TODO: + // add noderefs to current noderef list Noderefs + // add effects to current effect list Effects + + let new_component = self.get_scope_mut(&new_idx).unwrap(); + + // Run the scope for one iteration to initialize it + match new_component.run_scope() { + Ok(_) => { + // all good, new nodes exist + } + Err(err) => { + // failed to run. this is the first time the component ran, and it failed + // we manually set its head node to an empty fragment + panic!("failing components not yet implemented"); + } + } + + // Take the node that was just generated from running the component + let nextnode = new_component.frames.fin_head(); + + // Push the new scope onto the stack + self.scope_stack.push(new_idx); + + // Run the creation algorithm with this scope on the stack + let meta = self.create_vnode(nextnode); + + // pop the scope off the stack + self.scope_stack.pop(); + + if meta.added_to_stack == 0 { + panic!("Components should *always* generate nodes - even if they fail"); + } + + // Finally, insert this scope as a seen node. + self.seen_scopes.insert(new_idx); + + CreateMeta::new(vcomponent.is_static, meta.added_to_stack) + } + + // Fragments are the only nodes that can contain dynamic content (IE through curlies or iterators). + // We can never ignore their contents, so the prescence of a fragment indicates that we need always diff them. + // Fragments will just put all their nodes onto the stack after creation + VNodeKind::Fragment(frag) => self.create_children(frag.children), + + VNodeKind::Suspended(VSuspended { node: real_node }) => { + let id = self.vdom.reserve_node(); + self.edit_create_placeholder(id); + real_node.set(Some(id)); + CreateMeta::new(false, 1) + } + } + } + + fn create_children(&mut self, children: &'bump [VNode<'bump>]) -> CreateMeta { + let mut is_static = true; + let mut added_to_stack = 0; + + // add them backwards + for child in children.iter().rev() { + let child_meta = self.create_vnode(child); + is_static = is_static && child_meta.is_static; + added_to_stack += child_meta.added_to_stack; + } + + CreateMeta { + is_static, + added_to_stack, + } + } + + /// Destroy a scope and all of its descendents. + /// + /// Calling this will run the destuctors on all hooks in the tree. + /// It will also add the destroyed nodes to the `seen_nodes` cache to prevent them from being renderered. + fn destroy_scopes(&mut self, old_scope: ScopeId) { + let mut nodes_to_delete = vec![old_scope]; + let mut scopes_to_explore = vec![old_scope]; + + // explore the scope tree breadth first + while let Some(scope_id) = scopes_to_explore.pop() { + // If we're planning on deleting this node, then we don't need to both rendering it + self.seen_scopes.insert(scope_id); + let scope = self.get_scope(&scope_id).unwrap(); + for child in scope.descendents.borrow().iter() { + // Add this node to be explored + scopes_to_explore.push(child.clone()); + + // Also add it for deletion + nodes_to_delete.push(child.clone()); + } + } + + // Delete all scopes that we found as part of this subtree + for node in nodes_to_delete { + log::debug!("Removing scope {:#?}", node); + let _scope = self.vdom.try_remove(node).unwrap(); + // do anything we need to do to delete the scope + // I think we need to run the destructors on the hooks + // TODO + } + } + + // Diff the given set of old and new children. + // + // The parent must be on top of the change list stack when this function is + // entered: + // + // [... parent] + // + // the change list stack is in the same state when this function returns. + // + // If old no anchors are provided, then it's assumed that we can freely append to the parent. + // + // Remember, non-empty lists does not mean that there are real elements, just that there are virtual elements. + fn diff_children(&mut self, old: &'bump [VNode<'bump>], new: &'bump [VNode<'bump>]) { + const IS_EMPTY: bool = true; + const IS_NOT_EMPTY: bool = false; + + match (old.is_empty(), new.is_empty()) { + (IS_EMPTY, IS_EMPTY) => {} + + // Completely adding new nodes, removing any placeholder if it exists + (IS_EMPTY, IS_NOT_EMPTY) => { + let meta = self.create_children(new); + self.edit_append_children(meta.added_to_stack); + } + + // Completely removing old nodes and putting an anchor in its place + // no anchor (old has nodes) and the new is empty + // remove all the old nodes + (IS_NOT_EMPTY, IS_EMPTY) => { + for node in old { + self.remove_vnode(node); + } + } + + (IS_NOT_EMPTY, IS_NOT_EMPTY) => { + let first_old = &old[0]; + let first_new = &new[0]; + + match (&first_old.kind, &first_new.kind) { + // Anchors can only appear in empty fragments + (VNodeKind::Anchor(old_anchor), VNodeKind::Anchor(new_anchor)) => { + old_anchor.dom_id.set(new_anchor.dom_id.get()); + } + + // Replace the anchor with whatever new nodes are coming down the pipe + (VNodeKind::Anchor(anchor), _) => { + self.edit_push_root(anchor.dom_id.get().unwrap()); + let mut added = 0; + for el in new { + let meta = self.create_vnode(el); + added += meta.added_to_stack; + } + self.edit_replace_with(1, added); + } + + // Replace whatever nodes are sitting there with the anchor + (_, VNodeKind::Anchor(anchor)) => { + self.replace_and_create_many_with_many(old, [first_new]); + } + + // Use the complex diff algorithm to diff the nodes + _ => { + let new_is_keyed = new[0].key.is_some(); + let old_is_keyed = old[0].key.is_some(); + + debug_assert!( + new.iter().all(|n| n.key.is_some() == new_is_keyed), + "all siblings must be keyed or all siblings must be non-keyed" + ); + debug_assert!( + old.iter().all(|o| o.key.is_some() == old_is_keyed), + "all siblings must be keyed or all siblings must be non-keyed" + ); + + if new_is_keyed && old_is_keyed { + self.diff_keyed_children(old, new); + } else { + self.diff_non_keyed_children(old, new); + } + } + } + } + } + } + + // Diffing "keyed" children. + // + // With keyed children, we care about whether we delete, move, or create nodes + // versus mutate existing nodes in place. Presumably there is some sort of CSS + // transition animation that makes the virtual DOM diffing algorithm + // observable. By specifying keys for nodes, we know which virtual DOM nodes + // must reuse (or not reuse) the same physical DOM nodes. + // + // This is loosely based on Inferno's keyed patching implementation. However, we + // have to modify the algorithm since we are compiling the diff down into change + // list instructions that will be executed later, rather than applying the + // changes to the DOM directly as we compare virtual DOMs. + // + // 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: &'bump [VNode<'bump>], new: &'bump [VNode<'bump>]) { + if cfg!(debug_assertions) { + let mut keys = fxhash::FxHashSet::default(); + let mut assert_unique_keys = |children: &'bump [VNode<'bump>]| { + keys.clear(); + for child in children { + let key = child.key; + debug_assert!( + key.is_some(), + "if any sibling is keyed, all siblings must be keyed" + ); + keys.insert(key); + } + debug_assert_eq!( + children.len(), + keys.len(), + "keyed siblings must each have a unique key" + ); + }; + assert_unique_keys(old); + assert_unique_keys(new); + } + + // First up, we diff all the nodes with the same key at the beginning of the + // children. + // + // `shared_prefix_count` is the count of how many nodes at the start of + // `new` and `old` share the same keys. + // + // TODO: just inline this + let shared_prefix_count = match self.diff_keyed_prefix(old, new) { + KeyedPrefixResult::Finished => return, + KeyedPrefixResult::MoreWorkToDo(count) => count, + }; + + // Next, we find out how many of the nodes at the end of the children have + // the same key. We do _not_ diff them yet, since we want to emit the change + // list instructions such that they can be applied in a single pass over the + // DOM. Instead, we just save this information for later. + // + // `shared_suffix_count` is the count of how many nodes at the end of `new` + // and `old` share the same keys. + let shared_suffix_count = old[shared_prefix_count..] + .iter() + .rev() + .zip(new[shared_prefix_count..].iter().rev()) + .take_while(|&(old, new)| old.key == new.key) + .count(); + + let old_shared_suffix_start = old.len() - shared_suffix_count; + let new_shared_suffix_start = new.len() - shared_suffix_count; + + // Ok, we now hopefully have a smaller range of children in the middle + // within which to re-order nodes with the same keys, remove old nodes with + // now-unused keys, and create new nodes with fresh keys. + self.diff_keyed_middle( + &old[shared_prefix_count..old_shared_suffix_start], + &new[shared_prefix_count..new_shared_suffix_start], + shared_prefix_count, + shared_suffix_count, + old_shared_suffix_start, + ); + + // Finally, diff the nodes at the end of `old` and `new` that share keys. + let old_suffix = &old[old_shared_suffix_start..]; + let new_suffix = &new[new_shared_suffix_start..]; + debug_assert_eq!(old_suffix.len(), new_suffix.len()); + if !old_suffix.is_empty() { + self.diff_keyed_suffix(old_suffix, new_suffix, new_shared_suffix_start) + } + } + + // Diff the prefix of children in `new` and `old` that share the same keys in + // the same order. + // + // The stack is empty upon entry. + fn diff_keyed_prefix( + &mut self, + old: &'bump [VNode<'bump>], + new: &'bump [VNode<'bump>], + ) -> KeyedPrefixResult { + let mut shared_prefix_count = 0; + + for (old, new) in old.iter().zip(new.iter()) { + // abort early if we finally run into nodes with different keys + if old.key() != new.key() { + break; + } + self.diff_node(old, new); + shared_prefix_count += 1; + } + + // If that was all of the old children, then create and append the remaining + // new children and we're finished. + if shared_prefix_count == old.len() { + // Load the last element + let last_node = self.find_last_element(new.last().unwrap()).direct_id(); + self.edit_push_root(last_node); + + // Create the new children and insert them after + let meta = self.create_children(&new[shared_prefix_count..]); + self.edit_insert_after(meta.added_to_stack); + + return KeyedPrefixResult::Finished; + } + + // And if that was all of the new children, then remove all of the remaining + // old children and we're finished. + if shared_prefix_count == new.len() { + self.remove_children(&old[shared_prefix_count..]); + return KeyedPrefixResult::Finished; + } + + KeyedPrefixResult::MoreWorkToDo(shared_prefix_count) + } + + // Create the given children and append them to the parent node. + // + // The parent node must currently be on top of the change list stack: + // + // [... parent] + // + // When this function returns, the change list stack is in the same state. + pub fn create_and_append_children(&mut self, new: &'bump [VNode<'bump>]) { + for child in new { + let meta = self.create_vnode(child); + self.edit_append_children(meta.added_to_stack); + } + } + + // The most-general, expensive code path for keyed children diffing. + // + // We find the longest subsequence within `old` of children that are relatively + // ordered the same way in `new` (via finding a longest-increasing-subsequence + // of the old child's index within `new`). The children that are elements of + // this subsequence will remain in place, minimizing the number of DOM moves we + // will have to do. + // + // Upon entry to this function, the change list stack must be empty. + // + // This function will load the appropriate nodes onto the stack and do diffing in place. + // + // Upon exit from this function, it will be restored to that same state. + fn diff_keyed_middle( + &mut self, + old: &'bump [VNode<'bump>], + mut new: &'bump [VNode<'bump>], + shared_prefix_count: usize, + shared_suffix_count: usize, + old_shared_suffix_start: usize, + ) { + // Should have already diffed the shared-key prefixes and suffixes. + debug_assert_ne!(new.first().map(|n| n.key()), old.first().map(|o| o.key())); + debug_assert_ne!(new.last().map(|n| n.key()), old.last().map(|o| o.key())); + + // // The algorithm below relies upon using `u32::MAX` as a sentinel + // // value, so if we have that many new nodes, it won't work. This + // // check is a bit academic (hence only enabled in debug), since + // // wasm32 doesn't have enough address space to hold that many nodes + // // in memory. + // debug_assert!(new.len() < u32::MAX as usize); + + // Map from each `old` node's key to its index within `old`. + // IE if the keys were A B C, then we would have (A, 1) (B, 2) (C, 3). + let mut old_key_to_old_index = old + .iter() + .enumerate() + .map(|(i, o)| (o.key().unwrap(), i)) + .collect::>(); + + // The set of shared keys between `new` and `old`. + let mut shared_keys = FxHashSet::default(); + // let mut to_remove = FxHashSet::default(); + let mut to_add = FxHashSet::default(); + + // Map from each index in `new` to the index of the node in `old` that + // has the same key. + let mut new_index_to_old_index = new + .iter() + .map(|n| { + let key = n.key().unwrap(); + match old_key_to_old_index.get(&key) { + Some(&index) => { + shared_keys.insert(key); + index + } + None => { + // + to_add.insert(key); + u32::MAX as usize + } + } + }) + .collect::>(); + + dbg!(&shared_keys); + dbg!(&to_add); + + // If none of the old keys are reused by the new children, then we + // remove all the remaining old children and create the new children + // afresh. + if shared_suffix_count == 0 && shared_keys.is_empty() { + self.replace_and_create_many_with_many(old, new); + return; + } + + // // Remove any old children whose keys were not reused in the new + // // children. Remove from the end first so that we don't mess up indices. + // for old_child in old.iter().rev() { + // if !shared_keys.contains(&old_child.key()) { + // self.remove_child(old_child); + // } + // } + + // let old_keyds = old.iter().map(|f| f.key()).collect::>(); + // let new_keyds = new.iter().map(|f| f.key()).collect::>(); + // dbg!(old_keyds); + // dbg!(new_keyds); + + // // If there aren't any more new children, then we are done! + // if new.is_empty() { + // return; + // } + + // The longest increasing subsequence within `new_index_to_old_index`. This + // is the longest sequence on DOM nodes in `old` that are relatively ordered + // correctly within `new`. We will leave these nodes in place in the DOM, + // and only move nodes that are not part of the LIS. This results in the + // maximum number of DOM nodes left in place, AKA the minimum number of DOM + // nodes moved. + let mut new_index_is_in_lis = FxHashSet::default(); + new_index_is_in_lis.reserve(new_index_to_old_index.len()); + + let mut predecessors = vec![0; new_index_to_old_index.len()]; + let mut starts = vec![0; new_index_to_old_index.len()]; + + longest_increasing_subsequence::lis_with( + &new_index_to_old_index, + &mut new_index_is_in_lis, + |a, b| a < b, + &mut predecessors, + &mut starts, + ); + + dbg!(&new_index_is_in_lis); + // use the old nodes to navigate the new nodes + + let mut lis_in_order = new_index_is_in_lis.into_iter().collect::>(); + lis_in_order.sort_unstable(); + + dbg!(&lis_in_order); + + // we walk front to back, creating the head node + + // diff the shared, in-place nodes first + // this makes sure we can rely on their first/last nodes being correct later on + for id in &lis_in_order { + let new_node = &new[*id]; + let key = new_node.key().unwrap(); + let old_index = old_key_to_old_index.get(&key).unwrap(); + let old_node = &old[*old_index]; + self.diff_node(old_node, new_node); + } + + // return the old node from the key + let load_old_node_from_lsi = |key| -> &VNode { + let old_index = old_key_to_old_index.get(key).unwrap(); + let old_node = &old[*old_index]; + old_node + }; + + let mut root = None; + let mut new_iter = new.iter().enumerate(); + for lis_id in &lis_in_order { + eprintln!("tracking {:?}", lis_id); + // this is the next milestone node we are working up to + let new_anchor = &new[*lis_id]; + root = Some(new_anchor); + + let anchor_el = self.find_first_element(new_anchor); + self.edit_push_root(anchor_el.direct_id()); + // let mut pushed = false; + + 'inner: loop { + let (next_id, next_new) = new_iter.next().unwrap(); + if next_id == *lis_id { + // we've reached the milestone, break this loop so we can step to the next milestone + // remember: we already diffed this node + eprintln!("breaking {:?}", next_id); + break 'inner; + } else { + let key = next_new.key().unwrap(); + eprintln!("found key {:?}", key); + if shared_keys.contains(&key) { + eprintln!("key is contained {:?}", key); + shared_keys.remove(key); + // diff the two nodes + let old_node = load_old_node_from_lsi(key); + self.diff_node(old_node, next_new); + + // now move all the nodes into the right spot + for child in RealChildIterator::new(next_new, self.vdom) { + let el = child.direct_id(); + self.edit_push_root(el); + self.edit_insert_before(1); + } + } else { + eprintln!("key is not contained {:?}", key); + // new node needs to be created + // insert it before the current milestone + let meta = self.create_vnode(next_new); + self.edit_insert_before(meta.added_to_stack); + } + } + } + + self.edit_pop(); + } + + let final_lis_node = root.unwrap(); + let final_el_node = self.find_last_element(final_lis_node); + let final_el = final_el_node.direct_id(); + self.edit_push_root(final_el); + + let mut last_iter = new.iter().rev().enumerate(); + let last_key = final_lis_node.key().unwrap(); + loop { + let (last_id, last_node) = last_iter.next().unwrap(); + let key = last_node.key().unwrap(); + + eprintln!("checking final nodes {:?}", key); + + if last_key == key { + eprintln!("breaking final nodes"); + break; + } + + if shared_keys.contains(&key) { + eprintln!("key is contained {:?}", key); + shared_keys.remove(key); + // diff the two nodes + let old_node = load_old_node_from_lsi(key); + self.diff_node(old_node, last_node); + + // now move all the nodes into the right spot + for child in RealChildIterator::new(last_node, self.vdom) { + let el = child.direct_id(); + self.edit_push_root(el); + self.edit_insert_after(1); + } + } else { + eprintln!("key is not contained {:?}", key); + // new node needs to be created + // insert it before the current milestone + let meta = self.create_vnode(last_node); + self.edit_insert_after(meta.added_to_stack); + } + } + self.edit_pop(); + } + + // Diff the suffix of keyed children that share the same keys in the same order. + // + // The parent must be on the change list stack when we enter this function: + // + // [... parent] + // + // When this function exits, the change list stack remains the same. + fn diff_keyed_suffix( + &mut self, + old: &'bump [VNode<'bump>], + new: &'bump [VNode<'bump>], + new_shared_suffix_start: usize, + ) { + debug_assert_eq!(old.len(), new.len()); + debug_assert!(!old.is_empty()); + + for (old_child, new_child) in old.iter().zip(new.iter()) { + self.diff_node(old_child, new_child); + } + } + + // Diff children that are not keyed. + // + // The parent must be on the top of the change list stack when entering this + // function: + // + // [... parent] + // + // the change list stack is in the same state when this function returns. + async fn diff_non_keyed_children( + &mut self, + old: &'bump [VNode<'bump>], + new: &'bump [VNode<'bump>], + ) { + // Handled these cases in `diff_children` before calling this function. + // + debug_assert!(!new.is_empty()); + debug_assert!(!old.is_empty()); + + match old.len().cmp(&new.len()) { + // old.len > new.len -> removing some nodes + Ordering::Greater => { + // diff them together + for (new_child, old_child) in new.iter().zip(old.iter()) { + self.diff_node(old_child, new_child); + } + + // todo: we would emit fewer instructions if we just did a replace many + // remove whatever is still dangling + for item in &old[new.len()..] { + for i in RealChildIterator::new(item, self.vdom) { + self.edit_push_root(i.direct_id()); + self.edit_remove(); + } + } + } + + // old.len < new.len -> adding some nodes + // this is wrong in the case where we're diffing fragments + // + // we need to save the last old element and then replace it with all the new ones + Ordering::Less => { + // Add the new elements to the last old element while it still exists + let last = self.find_last_element(old.last().unwrap()); + self.edit_push_root(last.direct_id()); + + // create the rest and insert them + let meta = self.create_children(&new[old.len()..]); + self.edit_insert_after(meta.added_to_stack); + + self.edit_pop(); + + // diff the rest + for (new_child, old_child) in new.iter().zip(old.iter()) { + self.diff_node(old_child, new_child).await + } + } + + // old.len == new.len -> no nodes added/removed, but perhaps changed + Ordering::Equal => { + for (new_child, old_child) in new.iter().zip(old.iter()) { + self.diff_node(old_child, new_child).await; + } + } + } + } + + // ====================== + // Support methods + // ====================== + // Remove all of a node's children. + // + // The change list stack must have this shape upon entry to this function: + // + // [... parent] + // + // When this function returns, the change list stack is in the same state. + fn remove_all_children(&mut self, old: &'bump [VNode<'bump>]) { + // debug_assert!(self.traversal_is_committed()); + log::debug!("REMOVING CHILDREN"); + for _child in old { + // registry.remove_subtree(child); + } + // Fast way to remove all children: set the node's textContent to an empty + // string. + todo!() + // self.set_inner_text(""); + } + // Remove the current child and all of its following siblings. + // + // The change list stack must have this shape upon entry to this function: + // + // [... parent child] + // + // After the function returns, the child is no longer on the change list stack: + // + // [... parent] + fn remove_children(&mut self, old: &'bump [VNode<'bump>]) { + self.replace_and_create_many_with_many(old, None) + } + + fn find_last_element(&mut self, vnode: &'bump VNode<'bump>) -> &'bump VNode<'bump> { + let mut search_node = Some(vnode); + + loop { + let node = search_node.take().unwrap(); + match &node.kind { + // the ones that have a direct id + VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_) + | VNodeKind::Suspended(_) => break node, + + VNodeKind::Fragment(frag) => { + search_node = frag.children.last(); + } + VNodeKind::Component(el) => { + let scope_id = el.ass_scope.get().unwrap(); + let scope = self.get_scope(&scope_id).unwrap(); + search_node = Some(scope.root()); + } + } + } + } + + fn find_first_element(&mut self, vnode: &'bump VNode<'bump>) -> &'bump VNode<'bump> { + let mut search_node = Some(vnode); + + loop { + let node = search_node.take().unwrap(); + match &node.kind { + // the ones that have a direct id + VNodeKind::Text(_) + | VNodeKind::Element(_) + | VNodeKind::Anchor(_) + | VNodeKind::Suspended(_) => break node, + + VNodeKind::Fragment(frag) => { + search_node = Some(&frag.children[0]); + } + VNodeKind::Component(el) => { + let scope_id = el.ass_scope.get().unwrap(); + let scope = self.get_scope(&scope_id).unwrap(); + search_node = Some(scope.root()); + } + } + } + } + + fn remove_child(&mut self, node: &'bump VNode<'bump>) { + self.replace_and_create_many_with_many(Some(node), None); + } + + /// Remove all the old nodes and replace them with newly created new nodes. + /// + /// The new nodes *will* be created - don't create them yourself! + fn replace_and_create_many_with_many( + &mut self, + old_nodes: impl IntoIterator>, + new_nodes: impl IntoIterator>, + ) { + let mut nodes_to_replace = Vec::new(); + let mut nodes_to_search = old_nodes.into_iter().collect::>(); + let mut scopes_obliterated = Vec::new(); + while let Some(node) = nodes_to_search.pop() { + match &node.kind { + // the ones that have a direct id return immediately + VNodeKind::Text(el) => nodes_to_replace.push(el.dom_id.get().unwrap()), + VNodeKind::Element(el) => nodes_to_replace.push(el.dom_id.get().unwrap()), + VNodeKind::Anchor(el) => nodes_to_replace.push(el.dom_id.get().unwrap()), + VNodeKind::Suspended(el) => nodes_to_replace.push(el.node.get().unwrap()), + + // Fragments will either have a single anchor or a list of children + VNodeKind::Fragment(frag) => { + for child in frag.children { + nodes_to_search.push(child); + } + } + + // Components can be any of the nodes above + // However, we do need to track which components need to be removed + VNodeKind::Component(el) => { + let scope_id = el.ass_scope.get().unwrap(); + let scope = self.get_scope(&scope_id).unwrap(); + let root = scope.root(); + nodes_to_search.push(root); + scopes_obliterated.push(scope_id); + } + } + // TODO: enable internal garabge collection + // self.create_garbage(node); + } + + let n = nodes_to_replace.len(); + for node in nodes_to_replace { + self.edit_push_root(node); + } + + let mut nodes_created = 0; + for node in new_nodes { + let meta = self.create_vnode(node); + nodes_created += meta.added_to_stack; + } + + // if 0 nodes are created, then it gets interperted as a deletion + self.edit_replace_with(n as u32, nodes_created); + + // obliterate! + for scope in scopes_obliterated { + self.destroy_scopes(scope); + } + } + + fn create_garbage(&mut self, node: &'bump VNode<'bump>) { + match self.current_scope().and_then(|id| self.get_scope(&id)) { + Some(scope) => { + let garbage: &'bump VNode<'static> = unsafe { std::mem::transmute(node) }; + scope.pending_garbage.borrow_mut().push(garbage); + } + None => { + log::info!("No scope to collect garbage into") + } + } + } + + fn immediately_dispose_garabage(&mut self, node: ElementId) { + self.vdom.collect_garbage(node) + } + + fn replace_node_with_node( + &mut self, + anchor: ElementId, + old_node: &'bump VNode<'bump>, + new_node: &'bump VNode<'bump>, + ) { + self.edit_push_root(anchor); + let meta = self.create_vnode(new_node); + self.edit_replace_with(1, meta.added_to_stack); + self.create_garbage(old_node); + self.edit_pop(); + } + + fn remove_vnode(&mut self, node: &'bump VNode<'bump>) { + match &node.kind { + VNodeKind::Text(el) => self.immediately_dispose_garabage(node.direct_id()), + VNodeKind::Element(el) => { + self.immediately_dispose_garabage(node.direct_id()); + for child in el.children { + self.remove_vnode(&child); + } + } + VNodeKind::Anchor(a) => { + // + } + VNodeKind::Fragment(frag) => { + for child in frag.children { + self.remove_vnode(&child); + } + } + VNodeKind::Component(el) => { + // + // self.destroy_scopes(old_scope) + } + VNodeKind::Suspended(_) => todo!(), + } + } + + fn current_scope(&self) -> Option { + self.scope_stack.last().map(|f| f.clone()) + } + + fn fix_listener<'a>(&mut self, listener: &'a Listener<'a>) { + let scope_id = self.current_scope(); + if let Some(scope_id) = scope_id { + let scope = self.get_scope(&scope_id).unwrap(); + let mut queue = scope.listeners.borrow_mut(); + let long_listener: &'a Listener<'static> = unsafe { std::mem::transmute(listener) }; + queue.push(long_listener as *const _) + } + } + + pub fn get_scope_mut(&mut self, id: &ScopeId) -> Option<&'bump mut Scope> { + // ensure we haven't seen this scope before + // if we have, then we're trying to alias it, which is not allowed + debug_assert!(!self.seen_scopes.contains(id)); + + unsafe { self.vdom.get_scope_mut(*id) } + } + pub fn get_scope(&mut self, id: &ScopeId) -> Option<&'bump Scope> { + // ensure we haven't seen this scope before + // if we have, then we're trying to alias it, which is not allowed + unsafe { self.vdom.get_scope(*id) } + } + + // Navigation + pub(crate) fn edit_push_root(&mut self, root: ElementId) { + let id = root.as_u64(); + self.mutations.edits.push(PushRoot { id }); + } + + pub(crate) fn edit_pop(&mut self) { + self.mutations.edits.push(PopRoot {}); + } + + // Add Nodes to the dom + // add m nodes from the stack + pub(crate) fn edit_append_children(&mut self, many: u32) { + self.mutations.edits.push(AppendChildren { many }); + } + + // replace the n-m node on the stack with the m nodes + // ends with the last element of the chain on the top of the stack + pub(crate) fn edit_replace_with(&mut self, n: u32, m: u32) { + self.mutations.edits.push(ReplaceWith { n, m }); + } + + pub(crate) fn edit_insert_after(&mut self, n: u32) { + self.mutations.edits.push(InsertAfter { n }); + } + + pub(crate) fn edit_insert_before(&mut self, n: u32) { + self.mutations.edits.push(InsertBefore { n }); + } + + // Remove Nodesfrom the dom + pub(crate) fn edit_remove(&mut self) { + self.mutations.edits.push(Remove); + } + + // Create + pub(crate) fn edit_create_text_node(&mut self, text: &'bump str, id: ElementId) { + let id = id.as_u64(); + self.mutations.edits.push(CreateTextNode { text, id }); + } + + pub(crate) fn edit_create_element( + &mut self, + tag: &'static str, + ns: Option<&'static str>, + id: ElementId, + ) { + let id = id.as_u64(); + match ns { + Some(ns) => self.mutations.edits.push(CreateElementNs { id, ns, tag }), + None => self.mutations.edits.push(CreateElement { id, tag }), + } + } + + // placeholders are nodes that don't get rendered but still exist as an "anchor" in the real dom + pub(crate) fn edit_create_placeholder(&mut self, id: ElementId) { + let id = id.as_u64(); + self.mutations.edits.push(CreatePlaceholder { id }); + } + + // events + pub(crate) fn edit_new_event_listener(&mut self, listener: &Listener, scope: ScopeId) { + let Listener { + event, + mounted_node, + .. + } = listener; + + let element_id = mounted_node.get().unwrap().as_u64(); + + self.mutations.edits.push(NewEventListener { + scope, + event_name: event, + mounted_node_id: element_id, + }); + } + + pub(crate) fn edit_remove_event_listener(&mut self, event: &'static str) { + self.mutations.edits.push(RemoveEventListener { event }); + } + + // modify + pub(crate) fn edit_set_text(&mut self, text: &'bump str) { + self.mutations.edits.push(SetText { text }); + } + + pub(crate) fn edit_set_attribute(&mut self, attribute: &'bump Attribute) { + let Attribute { + name, + value, + is_static, + is_volatile, + namespace, + } = attribute; + // field: &'static str, + // value: &'bump str, + // ns: Option<&'static str>, + self.mutations.edits.push(SetAttribute { + field: name, + value, + ns: *namespace, + }); + } + + pub(crate) fn edit_set_attribute_ns( + &mut self, + attribute: &'bump Attribute, + namespace: &'bump str, + ) { + let Attribute { + name, + value, + is_static, + is_volatile, + // namespace, + .. + } = attribute; + // field: &'static str, + // value: &'bump str, + // ns: Option<&'static str>, + self.mutations.edits.push(SetAttribute { + field: name, + value, + ns: Some(namespace), + }); + } + + pub(crate) fn edit_remove_attribute(&mut self, attribute: &Attribute) { + let name = attribute.name; + self.mutations.edits.push(RemoveAttribute { name }); + } +} + +// When we create new nodes, we need to propagate some information back up the call chain. +// This gives the caller some information on how to handle things like insertins, appending, and subtree discarding. +#[derive(Debug)] +pub struct CreateMeta { + pub is_static: bool, + pub added_to_stack: u32, +} + +impl CreateMeta { + fn new(is_static: bool, added_to_tack: u32) -> Self { + Self { + is_static, + added_to_stack: added_to_tack, + } + } +} + +enum KeyedPrefixResult { + // Fast path: we finished diffing all the children just by looking at the + // prefix of shared keys! + Finished, + // There is more diffing work to do. Here is a count of how many children at + // the beginning of `new` and `old` we already processed. + MoreWorkToDo(usize), +} + +fn find_first_real_node<'a>( + nodes: impl IntoIterator>, + scopes: &'a SharedResources, +) -> Option<&'a VNode<'a>> { + for node in nodes { + let mut iter = RealChildIterator::new(node, scopes); + if let Some(node) = iter.next() { + return Some(node); + } + } + + None +} + +/// This iterator iterates through a list of virtual children and only returns real children (Elements, Text, Anchors). +/// +/// This iterator is useful when it's important to load the next real root onto the top of the stack for operations like +/// "InsertBefore". +pub struct RealChildIterator<'a> { + scopes: &'a SharedResources, + + // Heuristcally we should never bleed into 4 completely nested fragments/components + // Smallvec lets us stack allocate our little stack machine so the vast majority of cases are sane + // TODO: use const generics instead of the 4 estimation + stack: smallvec::SmallVec<[(u16, &'a VNode<'a>); 4]>, +} + +impl<'a> RealChildIterator<'a> { + pub fn new(starter: &'a VNode<'a>, scopes: &'a SharedResources) -> Self { + Self { + scopes, + stack: smallvec::smallvec![(0, starter)], + } + } + // keep the memory around + pub fn reset_with(&mut self, node: &'a VNode<'a>) { + self.stack.clear(); + self.stack.push((0, node)); + } +} + +impl<'a> Iterator for RealChildIterator<'a> { + type Item = &'a VNode<'a>; + + fn next(&mut self) -> Option<&'a VNode<'a>> { + let mut should_pop = false; + let mut returned_node: Option<&'a VNode<'a>> = None; + let mut should_push = None; + + while returned_node.is_none() { + if let Some((count, node)) = self.stack.last_mut() { + match &node.kind { + // We can only exit our looping when we get "real" nodes + // This includes fragments and components when they're empty (have a single root) + VNodeKind::Element(_) | VNodeKind::Text(_) => { + // We've recursed INTO an element/text + // We need to recurse *out* of it and move forward to the next + should_pop = true; + returned_node = Some(&*node); + } + + // If we get a fragment we push the next child + VNodeKind::Fragment(frag) => { + let subcount = *count as usize; + + if frag.children.len() == 0 { + should_pop = true; + returned_node = Some(&*node); + } + + if subcount >= frag.children.len() { + should_pop = true; + } else { + should_push = Some(&frag.children[subcount]); + } + } + // // If we get a fragment we push the next child + // VNodeKind::Fragment(frag) => { + // let subcount = *count as usize; + + // if frag.children.len() == 0 { + // should_pop = true; + // returned_node = Some(&*node); + // } + + // if subcount >= frag.children.len() { + // should_pop = true; + // } else { + // should_push = Some(&frag.children[subcount]); + // } + // } + + // Immediately abort suspended nodes - can't do anything with them yet + VNodeKind::Suspended(node) => { + // VNodeKind::Suspended => should_pop = true, + todo!() + } + + VNodeKind::Anchor(a) => { + todo!() + } + + // For components, we load their root and push them onto the stack + VNodeKind::Component(sc) => { + let scope = + unsafe { self.scopes.get_scope(sc.ass_scope.get().unwrap()) }.unwrap(); + // let scope = self.scopes.get(sc.ass_scope.get().unwrap()).unwrap(); + + // Simply swap the current node on the stack with the root of the component + *node = scope.frames.fin_head(); + } + } + } else { + // If there's no more items on the stack, we're done! + return None; + } + + if should_pop { + self.stack.pop(); + if let Some((id, _)) = self.stack.last_mut() { + *id += 1; + } + should_pop = false; + } + + if let Some(push) = should_push { + self.stack.push((0, push)); + should_push = None; + } + } + + returned_node + } +} + +fn compare_strs(a: &str, b: &str) -> bool { + // Check by pointer, optimizing for static strs + if !std::ptr::eq(a, b) { + // If the pointers are different then check by value + a == b + } else { + true + } +} + +struct DfsIterator<'a> { + idx: usize, + node: Option<(&'a VNode<'a>, &'a VNode<'a>)>, + nodes: Option<(&'a [VNode<'a>], &'a [VNode<'a>])>, +} +impl<'a> Iterator for DfsIterator<'a> { + type Item = (&'a VNode<'a>, &'a VNode<'a>); + + fn next(&mut self) -> Option { + todo!() + } +} diff --git a/packages/core/src/scheduler.rs b/packages/core/src/scheduler.rs index 95a8b8918..85ad7a8b1 100644 --- a/packages/core/src/scheduler.rs +++ b/packages/core/src/scheduler.rs @@ -285,7 +285,8 @@ impl Scheduler { let mut is_ready = || -> bool { (&mut deadline).now_or_never().is_some() }; // TODO: remove this unwrap - proprogate errors out - self.get_current_fiber().work(is_ready).unwrap() + // self.get_current_fiber().work(is_ready).unwrap() + todo!() } // waits for a trigger, canceling early if the deadline is reached diff --git a/packages/core/tests/iterative.rs b/packages/core/tests/iterative.rs new file mode 100644 index 000000000..295abbe81 --- /dev/null +++ b/packages/core/tests/iterative.rs @@ -0,0 +1,47 @@ +//! tests to prove that the iterative implementation works + +use anyhow::{Context, Result}; +use dioxus::{ + arena::SharedResources, + diff::{CreateMeta, DiffMachine}, + prelude::*, + scheduler::Mutations, + DomEdit, +}; +use dioxus_core as dioxus; +use dioxus_html as dioxus_elements; + +#[test] +fn test_original_diff() { + static App: FC<()> = |cx| { + cx.render(rsx! { + div { + div { + "Hello, world!" + } + } + }) + }; + + let mut dom = VirtualDom::new(App); + let mutations = dom.rebuild().unwrap(); + dbg!(mutations); +} + +#[async_std::test] +async fn test_iterative_diff() { + static App: FC<()> = |cx| { + cx.render(rsx! { + div { + div { + "Hello, world!" + } + } + }) + }; + + let shared = SharedResources::new(); + + let mut machine = DiffMachine::new_headless(&shared); + let a = machine.work().await.unwrap(); +}