yew/vlist: optimize diffing and patching (#1555)

* yew/vlist: optimize diffing and patching

* yew/vlist: fix key difference point detection

* yew-macro: update stderr

* vlist: store on the list, if all the children are keyed

* yew/vlist: simplify iterators

* yew/vlist: more short-circuiting during diff

* yew/vlist: clone Rcs instead of referencing

* yew/vlist: remove redundant branching

* yew/vlist: remove newline

* yew/vlist: remove false comment

* yew: partial vector deconstruction

* Apply suggestions from code review

Co-authored-by: Teymour Aldridge <[email protected]>
Co-authored-by: Cecile Tonglet <[email protected]>

* yew: use links in doc comments

* Update packages/yew/src/virtual_dom/mod.rs

Co-authored-by: Muhammad Hamza <[email protected]>

* yew: update insert_node() calls

Co-authored-by: Teymour Aldridge <[email protected]>
Co-authored-by: Cecile Tonglet <[email protected]>
Co-authored-by: Muhammad Hamza <[email protected]>

Author: 4 people

packages/yew-macro/src/html_tree/html_element.rs

@@ -221,11 +221,13 @@ impl ToTokens for HtmlElement {
             quote! { ::std::vec![#(#listeners_it),*].into_iter().flatten().collect() }
         };
 
+        // TODO: if none of the children have possibly None expressions or literals as keys, we can
+        // compute `VList.fully_keyed` at compile time.
         let child_list = quote! {
-            ::yew::virtual_dom::VList{
-                key: ::std::option::Option::None,
-                children: #children,
-            }
+            ::yew::virtual_dom::VList::with_children(
+                #children,
+                ::std::option::Option::None,
+            )
         };
 
         tokens.extend(match &name {

packages/yew-macro/src/html_tree/html_list.rs

@@ -77,7 +77,7 @@ impl ToTokens for HtmlList {
 
         tokens.extend(quote_spanned! {spanned.span()=>
             ::yew::virtual_dom::VNode::VList(
-                ::yew::virtual_dom::VList::new_with_children(#children, #key)
+                ::yew::virtual_dom::VList::with_children(#children, #key)
             )
         });
     }

packages/yew/src/html/component/scope.rs

@@ -172,7 +172,7 @@ impl<COMP: Component> Scope<COMP> {
     ) {
         let placeholder = {
             let placeholder: Node = document().create_text_node("").into();
-            insert_node(&placeholder, &parent, next_sibling.get());
+            insert_node(&placeholder, &parent, next_sibling.get().as_ref());
             node_ref.set(Some(placeholder.clone()));
             VNode::VRef(placeholder)
         };

packages/yew/src/html/mod.rs

@@ -66,7 +66,7 @@ pub type Html = VNode;
 /// ```
 /// ## Relevant examples
 /// - [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)
-#[derive(Debug, Default, Clone)]
+#[derive(Default, Clone)]
 pub struct NodeRef(Rc<RefCell<NodeRefInner>>);
 
 impl PartialEq for NodeRef {
@@ -75,6 +75,16 @@ impl PartialEq for NodeRef {
     }
 }
 
+impl std::fmt::Debug for NodeRef {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "NodeRef {{ references: {:?} }}",
+            self.get().map(|n| crate::utils::print_node(&n))
+        )
+    }
+}
+
 #[derive(PartialEq, Debug, Default, Clone)]
 struct NodeRefInner {
     node: Option<Node>,

packages/yew/src/utils/mod.rs

@@ -94,3 +94,13 @@ impl<IN, OUT> IntoIterator for NodeSeq<IN, OUT> {
         self.0.into_iter()
     }
 }
+
+/// Print the [web_sys::Node]'s contents as a string for debugging purposes
+pub fn print_node(n: &web_sys::Node) -> String {
+    use wasm_bindgen::JsCast;
+
+    match n.dyn_ref::<web_sys::Element>() {
+        Some(el) => el.outer_html(),
+        None => n.text_content().unwrap_or_default(),
+    }
+}

packages/yew/src/virtual_dom/mod.rs

@@ -422,10 +422,10 @@ pub(crate) trait VDiff {
     ) -> NodeRef;
 }
 
-pub(crate) fn insert_node(node: &Node, parent: &Element, next_sibling: Option<Node>) {
+pub(crate) fn insert_node(node: &Node, parent: &Element, next_sibling: Option<&Node>) {
     match next_sibling {
         Some(next_sibling) => parent
-            .insert_before(&node, Some(&next_sibling))
+            .insert_before(&node, Some(next_sibling))
             .expect("failed to insert tag before next sibling"),
         None => parent.append_child(node).expect("failed to append child"),
     };

packages/yew/src/virtual_dom/vcomp.rs

@@ -99,7 +99,6 @@ impl VComp {
         }
     }
 
-    #[allow(unused)]
     pub(crate) fn root_vnode(&self) -> Option<impl Deref<Target = VNode> + '_> {
         self.scope.as_ref().and_then(|scope| scope.root_vnode())
     }
@@ -202,7 +201,7 @@ impl PartialEq for VComp {
 
 impl fmt::Debug for VComp {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        f.write_str("VComp")
+        write!(f, "VComp {{ root: {:?} }}", self.root_vnode().as_deref())
     }
 }