wip: fragment diffing working

2022-11-23 23:15:01 -08:00
1 parent 0266dfdc05
commit 4dd9a616a5
@@ -5,7 +5,7 @@ use crate::mutations::Mutation::*;
 use crate::nodes::VNode;
 use crate::nodes::{DynamicNode, TemplateNode};
 use crate::virtual_dom::VirtualDom;
-use crate::{AttributeValue, ScopeId, SuspenseContext, TemplateAttribute};
+use crate::{AttributeValue, ElementId, ScopeId, SuspenseContext, TemplateAttribute};

 impl<'b: 'static> VirtualDom {
    /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
@@ -36,120 +36,140 @@ impl<'b: 'static> VirtualDom {

        let mut on_stack = 0;
        for (root_idx, root) in template.template.roots.iter().enumerate() {
+            // We might need to generate an ID for the root node
            on_stack += match root {
-                TemplateNode::Element { .. } | TemplateNode::Text(_) => {
-                    self.mutations.push(LoadTemplate {
-                        name: template.template.id,
-                        index: root_idx,
-                    });
-                    1
-                }
-
                TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
                    match &template.dynamic_nodes[*id] {
-                        DynamicNode::Fragment(frag) => match frag {
-                            VFragment::Empty(slot) => {
-                                let id =
-                                    self.next_element(template, template.template.node_paths[*id]);
-                                slot.set(id);
-                                self.mutations.push(CreatePlaceholder { id });
-                                1
-                            }
-                            VFragment::NonEmpty(_) => self.create_dynamic_node(
-                                template,
-                                &template.dynamic_nodes[*id],
-                                *id,
-                            ),
-                        },
-                        DynamicNode::Component { .. } => {
-                            self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
-                        }
+                        // a dynamic text node doesn't replace a template node, instead we create it on the fly
                        DynamicNode::Text(VText { id: slot, value }) => {
                            let id = self.next_element(template, template.template.node_paths[*id]);
                            slot.set(id);
                            self.mutations.push(CreateTextNode { value, id });
                            1
                        }
+
+                        DynamicNode::Fragment(VFragment::Empty(slot)) => {
+                            let id = self.next_element(template, template.template.node_paths[*id]);
+                            slot.set(id);
+                            self.mutations.push(CreatePlaceholder { id });
+                            1
+                        }
+
+                        DynamicNode::Fragment(VFragment::NonEmpty(_))
+                        | DynamicNode::Component { .. } => {
+                            self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
+                        }
                    }
                }
+
+                TemplateNode::Element { .. } | TemplateNode::Text(_) => {
+                    let this_id = self.next_element(template, &[]);
+                    template.root_ids[root_idx].set(this_id);
+                    self.mutations.push(LoadTemplate {
+                        name: template.template.id,
+                        index: root_idx,
+                        id: this_id,
+                    });
+
+                    // we're on top of a node that has a dynamic attribute for a descendant
+                    // Set that attribute now before the stack gets in a weird state
+                    while let Some((mut attr_id, path)) =
+                        dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
+                    {
+                        // if attribute is on a root node, then we've already created the element
+                        // Else, it's deep in the template and we should create a new id for it
+                        let id = match path.len() {
+                            1 => this_id,
+                            _ => self.next_element(template, template.template.attr_paths[attr_id]),
+                        };
+
+                        loop {
+                            let attribute = template.dynamic_attrs.get(attr_id).unwrap();
+                            attribute.mounted_element.set(id);
+
+                            match &attribute.value {
+                                AttributeValue::Text(value) => self.mutations.push(SetAttribute {
+                                    name: attribute.name,
+                                    value: *value,
+                                    ns: attribute.namespace,
+                                    id,
+                                }),
+                                AttributeValue::Bool(value) => {
+                                    self.mutations.push(SetBoolAttribute {
+                                        name: attribute.name,
+                                        value: *value,
+                                        id,
+                                    })
+                                }
+                                AttributeValue::Listener(_) => {
+                                    self.mutations.push(NewEventListener {
+                                        // all listeners start with "on"
+                                        event_name: &attribute.name[2..],
+                                        scope: cur_scope,
+                                        id,
+                                    })
+                                }
+                                AttributeValue::Float(_) => todo!(),
+                                AttributeValue::Int(_) => todo!(),
+                                AttributeValue::Any(_) => todo!(),
+                                AttributeValue::None => todo!(),
+                            }
+
+                            // Only push the dynamic attributes forward if they match the current path (same element)
+                            match dynamic_attrs.next_if(|(_, p)| *p == path) {
+                                Some((next_attr_id, _)) => attr_id = next_attr_id,
+                                None => break,
+                            }
+                        }
+                    }
+
+                    // We're on top of a node that has a dynamic child for a descendant
+                    // Skip any node that's a root
+                    let mut start = None;
+                    let mut end = None;
+
+                    // Collect all the dynamic nodes below this root
+                    // We assign the start and end of the range of dynamic nodes since they area ordered in terms of tree path
+                    //
+                    // [0]
+                    // [1, 1]     <---|
+                    // [1, 1, 1]  <---| these are the range of dynamic nodes below root 1
+                    // [1, 1, 2]  <---|
+                    // [2]
+                    //
+                    // We collect each range and then create them and replace the placeholder in the template
+                    while let Some((idx, p)) =
+                        dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8)
+                    {
+                        if p.len() == 1 {
+                            continue;
+                        }
+
+                        if start.is_none() {
+                            start = Some(idx);
+                        }
+
+                        end = Some(idx);
+                    }
+
+                    //
+                    if let (Some(start), Some(end)) = (start, end) {
+                        for idx in start..=end {
+                            let node = &template.dynamic_nodes[idx];
+                            let m = self.create_dynamic_node(template, node, idx);
+                            if m > 0 {
+                                self.mutations.push(ReplacePlaceholder {
+                                    m,
+                                    path: &template.template.node_paths[idx][1..],
+                                });
+                            }
+                        }
+                    }
+
+                    // elements create only one node :-)
+                    1
+                }
            };
-
-            // we're on top of a node that has a dynamic attribute for a descendant
-            // Set that attribute now before the stack gets in a weird state
-            while let Some((mut attr_id, path)) =
-                dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
-            {
-                let id = self.next_element(template, template.template.attr_paths[attr_id]);
-                self.mutations.push(AssignId {
-                    path: &path[1..],
-                    id,
-                });
-
-                loop {
-                    let attribute = template.dynamic_attrs.get(attr_id).unwrap();
-                    attribute.mounted_element.set(id);
-
-                    match &attribute.value {
-                        AttributeValue::Text(value) => self.mutations.push(SetAttribute {
-                            name: attribute.name,
-                            value: *value,
-                            ns: attribute.namespace,
-                            id,
-                        }),
-                        AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute {
-                            name: attribute.name,
-                            value: *value,
-                            id,
-                        }),
-                        AttributeValue::Listener(_) => self.mutations.push(NewEventListener {
-                            // all listeners start with "on"
-                            event_name: &attribute.name[2..],
-                            scope: cur_scope,
-                            id,
-                        }),
-                        AttributeValue::Float(_) => todo!(),
-                        AttributeValue::Int(_) => todo!(),
-                        AttributeValue::Any(_) => todo!(),
-                        AttributeValue::None => todo!(),
-                    }
-
-                    // Only push the dynamic attributes forward if they match the current path (same element)
-                    match dynamic_attrs.next_if(|(_, p)| *p == path) {
-                        Some((next_attr_id, _)) => attr_id = next_attr_id,
-                        None => break,
-                    }
-                }
-            }
-
-            // We're on top of a node that has a dynamic child for a descendant
-            // Skip any node that's a root
-            let mut start = None;
-            let mut end = None;
-
-            while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) {
-                if p.len() == 1 {
-                    continue;
-                }
-
-                if start.is_none() {
-                    start = Some(idx);
-                }
-
-                end = Some(idx);
-            }
-
-            if let (Some(start), Some(end)) = (start, end) {
-                for idx in start..=end {
-                    let node = &template.dynamic_nodes[idx];
-                    let m = self.create_dynamic_node(template, node, idx);
-                    if m > 0 {
-                        self.mutations.push(ReplacePlaceholder {
-                            m,
-                            path: &template.template.node_paths[idx][1..],
-                        });
-                    }
-                }
-            }
        }

        on_stack
@@ -196,8 +216,8 @@ impl<'b: 'static> VirtualDom {
    ) {
        match *node {
            // Todo: create the children's template
-            TemplateNode::Dynamic(idx) => {
-                let id = self.next_element(template, template.template.node_paths[idx]);
+            TemplateNode::Dynamic(_) => {
+                let id = ElementId(0);
                self.mutations
                    .template_mutations
                    .push(CreatePlaceholder { id })
@@ -218,7 +238,7 @@ impl<'b: 'static> VirtualDom {
                tag,
                inner_opt,
            } => {
-                let id = self.next_element(template, &[]); // never gets referenced, empty path is fine, I think?
+                let id = ElementId(0);

                self.mutations.template_mutations.push(CreateElement {
                    name: tag,
@@ -344,19 +364,28 @@ impl<'b: 'static> VirtualDom {
        use RenderReturn::*;

        match return_nodes {
-            Sync(Ok(t)) => self.mount_component(scope, t, idx),
+            Sync(Ok(t)) => {
+                self.mount_component(scope, template, t, idx)
+                // self.create(t)
+            }
            Sync(Err(_e)) => todo!("Propogate error upwards"),
            Async(_) => self.mount_component_placeholder(template, idx, scope),
        }
    }

-    fn mount_component(&mut self, scope: ScopeId, template: &'b VNode<'b>, idx: usize) -> usize {
+    fn mount_component(
+        &mut self,
+        scope: ScopeId,
+        parent: &'b VNode<'b>,
+        new: &'b VNode<'b>,
+        idx: usize,
+    ) -> usize {
        // Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
        // is encountered
        let mutations_to_this_point = self.mutations.len();

        // Create the component's root element
-        let created = self.create_scope(scope, template);
+        let created = self.create_scope(scope, new);

        // If there are no suspense leaves below us, then just don't bother checking anything suspense related
        if self.collected_leaves.is_empty() {
@@ -370,7 +399,7 @@ impl<'b: 'static> VirtualDom {
        };

        // Since this is a boundary, use its placeholder within the template as the placeholder for the suspense tree
-        let new_id = self.next_element(template, template.template.node_paths[idx]);
+        let new_id = self.next_element(new, parent.template.node_paths[idx]);

        // Now connect everything to the boundary
        self.scopes[scope.0].placeholder.set(Some(new_id));
@@ -392,7 +421,7 @@ impl<'b: 'static> VirtualDom {
        // Now assign the placeholder in the DOM
        self.mutations.push(AssignId {
            id: new_id,
-            path: &template.template.node_paths[idx][1..],
+            path: &parent.template.node_paths[idx][1..],
        });

        0
@@ -412,6 +441,11 @@ impl<'b: 'static> VirtualDom {
        // Set the placeholder of the scope
        self.scopes[scope.0].placeholder.set(Some(new_id));

+        println!(
+            "assigning id {:?} to path {:?}, template: {:?}",
+            new_id, &template.template.node_paths, template.template
+        );
+
        // Since the placeholder is already in the DOM, we don't create any new nodes
        self.mutations.push(AssignId {
            id: new_id,
@@ -1,26 +1,17 @@
-use std::any::Any;
-use std::cell::Cell;
-
-use crate::factory::RenderReturn;
-use crate::innerlude::{Mutations, VComponent, VFragment, VText};
-use crate::virtual_dom::VirtualDom;
-use crate::{Attribute, AttributeValue, TemplateNode};
-
-use crate::any_props::VProps;
-use DynamicNode::*;
-
-use crate::mutations::Mutation;
-use crate::nodes::{DynamicNode, Template, TemplateId};
-use crate::scopes::Scope;
 use crate::{
-    any_props::AnyProps,
    arena::ElementId,
-    bump_frame::BumpFrame,
-    nodes::VNode,
-    scopes::{ScopeId, ScopeState},
+    factory::RenderReturn,
+    innerlude::{DirtyScope, VComponent, VFragment, VText},
+    mutations::Mutation,
+    nodes::{DynamicNode, VNode},
+    scopes::ScopeId,
+    virtual_dom::VirtualDom,
+    AttributeValue, TemplateNode,
 };
+
 use fxhash::{FxHashMap, FxHashSet};
-use slab::Slab;
+use std::cell::Cell;
+use DynamicNode::*;

 impl<'b: 'static> VirtualDom {
    pub fn diff_scope(&mut self, scope: ScopeId) {
@@ -123,6 +114,15 @@ impl<'b: 'static> VirtualDom {
                _ => self.replace(left_template, right_template, left_node, right_node),
            };
        }
+
+        // Make sure the roots get transferred over
+        for (left, right) in left_template
+            .root_ids
+            .iter()
+            .zip(right_template.root_ids.iter())
+        {
+            right.set(left.get());
+        }
    }

    fn diff_vcomponent(&mut self, left: &'b VComponent<'b>, right: &'b VComponent<'b>) {
@@ -228,8 +228,7 @@ impl<'b: 'static> VirtualDom {
    }

    fn replace_placeholder_with_nodes(&mut self, l: &'b Cell<ElementId>, r: &'b [VNode<'b>]) {
-        let created = r.iter().fold(0, |acc, child| acc + self.create(child));
-
+        let created = self.create_children(r);
        self.mutations.push(Mutation::ReplaceWith {
            id: l.get(),
            m: created,
@@ -238,9 +237,10 @@ impl<'b: 'static> VirtualDom {

    fn replace_nodes_with_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b Cell<ElementId>) {
        //
-
        // Remove the old nodes, except for one
        self.remove_nodes(&l[1..]);
+        let id = self.next_element(&l[0], &[]);
+        // self.replace(left_template, right_template, left, right)
    }

    fn diff_non_empty_fragment(&mut self, new: &'b [VNode<'b>], old: &'b [VNode<'b>]) {
@@ -613,8 +613,12 @@ impl<'b: 'static> VirtualDom {
        }
    }

-    fn insert_after(&mut self, node: &'b VNode<'b>, nodes_created: usize) {}
-    fn insert_before(&mut self, node: &'b VNode<'b>, nodes_created: usize) {}
+    fn insert_after(&mut self, node: &'b VNode<'b>, nodes_created: usize) {
+        todo!()
+    }
+    fn insert_before(&mut self, node: &'b VNode<'b>, nodes_created: usize) {
+        todo!()
+    }

    fn replace_node_with_on_stack(&mut self, old: &'b VNode<'b>, m: usize) {
        todo!()
@@ -623,7 +627,39 @@ impl<'b: 'static> VirtualDom {
    /// Remove these nodes from the dom
    /// Wont generate mutations for the inner nodes
    fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) {
-        //
+        nodes.into_iter().for_each(|node| self.remove_node(node));
+    }
+
+    fn remove_node(&mut self, node: &'b VNode<'b>) {
+        for (idx, root) in node.template.roots.iter().enumerate() {
+            let id = match root {
+                TemplateNode::Text(_) | TemplateNode::Element { .. } => node.root_ids[idx].get(),
+                TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
+                    match &node.dynamic_nodes[*id] {
+                        Text(t) => t.id.get(),
+                        Fragment(VFragment::Empty(t)) => t.get(),
+                        Fragment(VFragment::NonEmpty(t)) => return self.remove_nodes(t),
+                        Component(comp) => return self.remove_component(comp.scope.get().unwrap()),
+                    }
+                }
+            };
+
+            self.mutations.push(Mutation::Remove { id })
+        }
+    }
+
+    fn remove_component(&mut self, scope_id: ScopeId) {
+        let height = self.scopes[scope_id.0].height;
+        self.dirty_scopes.remove(&DirtyScope {
+            height,
+            id: scope_id,
+        });
+
+        // I promise, since we're descending down the tree, this is safe
+        match unsafe { self.scopes[scope_id.0].root_node().extend_lifetime_ref() } {
+            RenderReturn::Sync(Ok(t)) => self.remove_node(t),
+            _ => todo!("cannot handle nonstandard nodes"),
+        }
    }

    /// Push all the real nodes on the stack
@@ -632,26 +668,60 @@ impl<'b: 'static> VirtualDom {
    }

    fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize {
-        todo!()
+        nodes.iter().fold(0, |acc, child| acc + self.create(child))
    }

-    pub(crate) fn create_and_insert_before(&self, new: &[VNode], after: &VNode) {
-        let id = self.find_last_element(after);
+    fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) {
+        let m = self.create_children(new);
+        let id = self.find_first_element(before);
+        self.mutations.push(Mutation::InsertBefore { id, m })
    }
-    pub(crate) fn create_and_insert_after(&self, new: &[VNode], after: &VNode) {
+
+    fn create_and_insert_after(&mut self, new: &'b [VNode<'b>], after: &'b VNode<'b>) {
+        let m = self.create_children(new);
        let id = self.find_last_element(after);
+        self.mutations.push(Mutation::InsertAfter { id, m })
    }

    fn find_first_element(&self, node: &VNode) -> ElementId {
-        todo!()
+        match &node.template.roots[0] {
+            TemplateNode::Element { .. } | TemplateNode::Text(_) => node.root_ids[0].get(),
+            TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
+                match &node.dynamic_nodes[*id] {
+                    Text(t) => t.id.get(),
+                    Fragment(VFragment::NonEmpty(t)) => self.find_first_element(&t[0]),
+                    Fragment(VFragment::Empty(t)) => t.get(),
+                    Component(comp) => {
+                        let scope = comp.scope.get().unwrap();
+                        match self.scopes[scope.0].root_node() {
+                            RenderReturn::Sync(Ok(t)) => self.find_first_element(t),
+                            _ => todo!("cannot handle nonstandard nodes"),
+                        }
+                    }
+                }
+            }
+        }
    }

    fn find_last_element(&self, node: &VNode) -> ElementId {
        match node.template.roots.last().unwrap() {
-            TemplateNode::Element { .. } => todo!(),
-            TemplateNode::Text(t) => todo!(),
-            TemplateNode::Dynamic(_) => todo!(),
-            TemplateNode::DynamicText(_) => todo!(),
+            TemplateNode::Element { .. } | TemplateNode::Text(_) => {
+                node.root_ids.last().unwrap().get()
+            }
+            TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
+                match &node.dynamic_nodes[*id] {
+                    Text(t) => t.id.get(),
+                    Fragment(VFragment::NonEmpty(t)) => self.find_last_element(t.last().unwrap()),
+                    Fragment(VFragment::Empty(t)) => t.get(),
+                    Component(comp) => {
+                        let scope = comp.scope.get().unwrap();
+                        match self.scopes[scope.0].root_node() {
+                            RenderReturn::Sync(Ok(t)) => self.find_last_element(t),
+                            _ => todo!("cannot handle nonstandard nodes"),
+                        }
+                    }
+                }
+            }
        }
    }

@@ -666,6 +736,15 @@ impl<'b: 'static> VirtualDom {
        left: &'b DynamicNode<'b>,
        right: &'b DynamicNode<'b>,
    ) {
+        // Remove all but the first root
+        for root in &left_template.template.roots[1..] {
+            match root {
+                TemplateNode::Element { .. } => todo!(),
+                TemplateNode::Text(_) => todo!(),
+                TemplateNode::Dynamic(_) => todo!(),
+                TemplateNode::DynamicText(_) => todo!(),
+            }
+        }
    }
 }

@@ -94,6 +94,7 @@ pub enum Mutation<'a> {
    LoadTemplate {
        name: &'static str,
        index: usize,
+        id: ElementId,
    },

    // Take the current element and replace it with the element with the given id.
@@ -103,8 +104,8 @@ pub enum Mutation<'a> {
    },

    ReplacePlaceholder {
-        m: usize,
        path: &'static [u8],
+        m: usize,
    },

    /// Insert a number of nodes after a given node.
@@ -176,4 +177,7 @@ pub enum Mutation<'a> {
        /// The name of the event to remove.
        event: &'a str,
    },
+    Remove {
+        id: ElementId,
+    },
 }
@@ -38,15 +38,6 @@ pub struct VNode<'a> {
 }

 impl<'a> VNode<'a> {
-    pub fn placeholder_template(cx: &'a ScopeState) -> Self {
-        Self::template_from_dynamic_node(
-            cx,
-            DynamicNode::Fragment(VFragment::Empty(Cell::new(ElementId(0)))),
-            "dioxus-placeholder",
-        )
-        .unwrap()
-    }
-
    pub fn empty() -> Element<'a> {
        Ok(VNode {
            node_id: Cell::new(ElementId(0)),
@@ -63,48 +54,6 @@ impl<'a> VNode<'a> {
            },
        })
    }
-
-    pub fn template_from_dynamic_node(
-        cx: &'a ScopeState,
-        node: DynamicNode<'a>,
-        id: &'static str,
-    ) -> anyhow::Result<Self> {
-        Ok(VNode {
-            node_id: Cell::new(ElementId(0)),
-            key: None,
-            parent: None,
-            root_ids: &[],
-            dynamic_nodes: cx.bump().alloc([node]),
-            dynamic_attrs: &[],
-            template: Template {
-                id,
-                roots: &[TemplateNode::Dynamic(0)],
-                node_paths: &[&[0]],
-                attr_paths: &[],
-            },
-        })
-    }
-
-    pub fn single_text(
-        _cx: &'a ScopeState,
-        text: &'static [TemplateNode<'static>],
-        id: &'static str,
-    ) -> anyhow::Result<Self> {
-        Ok(VNode {
-            node_id: Cell::new(ElementId(0)),
-            key: None,
-            parent: None,
-            root_ids: &[],
-            dynamic_nodes: &[],
-            dynamic_attrs: &[],
-            template: Template {
-                id,
-                roots: text,
-                node_paths: &[&[0]],
-                attr_paths: &[],
-            },
-        })
-    }
 }

 #[derive(Debug, Clone, Copy)]
@@ -37,8 +37,8 @@ pub struct SuspenseBoundary {
 }

 impl SuspenseBoundary {
-    pub fn new(id: ScopeId) -> Rc<Self> {
-        Rc::new(Self {
+    pub fn new(id: ScopeId) -> Self {
+        Self {
            id,
            waiting_on: Default::default(),
            mutations: RefCell::new(Mutations::new()),
@@ -46,7 +46,7 @@ impl SuspenseBoundary {
            created_on_stack: Cell::new(0),
            onresolve: None,
            onstart: None,
-        })
+        }
    }
 }

@@ -103,6 +103,9 @@ impl ScopeState {
        }
    }

+    /// Get the current render since the inception of this component
+    ///
+    /// This can be used as a helpful diagnostic when debugging hooks/renders, etc
    pub fn generation(&self) -> usize {
        self.render_cnt.get()
    }
@@ -252,7 +252,7 @@ impl VirtualDom {
        // This could be unexpected, so we might rethink this behavior later
        //
        // We *could* just panic if the suspense boundary is not found
-        root.provide_context(SuspenseBoundary::new(ScopeId(0)));
+        root.provide_context(Rc::new(SuspenseBoundary::new(ScopeId(0))));

        // the root element is always given element ID 0 since it's the container for the entire tree
        dom.elements.insert(ElementRef::null());