Delay Hydration second render until all assistive nodes have been rem…

…oved (#2629)

* Separate hydration and render queue.

* Revert "Fix issue with node refs and hydration (#2597)"

This reverts commit 469cc34.

* Priority Render.

* Add some tests.

* Add more tests.

* Add test result after click.

* Fix test comment.

* Fix test timing.

* Restore test.

* Once AtomicBool, now a Cell.

* Prefer use_future.

* Revealing of Suspense always happen after the component has re-rendered itself.

* Shifting should register correct next_sibling.

* Revert to HashMap.

* cargo +nightly fmt.

* Fix comment.

* Optimise Code size?

* Add comment if assertion fails.

* Revert "Merge branch 'hydration-4' into fc-prepared-state"

This reverts commit 427b087d4db6b2e497ad618273655bd18ba9bd01, reversing
changes made to 109fcfa.

* Revert "Revert "Merge branch 'hydration-4' into fc-prepared-state""

This reverts commit f1e4089.

* Redo #2957.

examples/js_callback/Cargo.toml

@@ -7,7 +7,7 @@ license = "MIT OR Apache-2.0"
 
 [dependencies]
 wasm-bindgen = "0.2"
-yew = { path = "../../packages/yew", features = ["csr"] }
+yew = { path = "../../packages/yew", features = ["csr", "tokio"] }
 wasm-bindgen-futures = "0.4"
 js-sys = "0.3"
 once_cell = "1"

packages/yew/src/dom_bundle/bcomp.rs

@@ -44,8 +44,10 @@ impl ReconcileTarget for BComp {
         self.scope.destroy_boxed(parent_to_detach);
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         self.scope.shift_node(next_parent.clone(), next_sibling);
+
+        self.node_ref.clone()
     }
 }
 

packages/yew/src/dom_bundle/blist.rs

@@ -380,10 +380,14 @@ impl ReconcileTarget for BList {
         }
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
-        for node in self.rev_children.iter().rev() {
-            node.shift(next_parent, next_sibling.clone());
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
+        let mut next_sibling = next_sibling;
+
+        for node in self.rev_children.iter() {
+            next_sibling = node.shift(next_parent, next_sibling.clone());
         }
+
+        next_sibling
     }
 }
 

packages/yew/src/dom_bundle/bnode.rs

@@ -62,7 +62,7 @@ impl ReconcileTarget for BNode {
         }
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         match self {
             Self::Tag(ref vtag) => vtag.shift(next_parent, next_sibling),
             Self::Text(ref btext) => btext.shift(next_parent, next_sibling),
@@ -72,6 +72,8 @@ impl ReconcileTarget for BNode {
                 next_parent
                     .insert_before(node, next_sibling.get().as_ref())
                     .unwrap();
+
+                NodeRef::new(node.clone())
             }
             Self::Portal(ref vportal) => vportal.shift(next_parent, next_sibling),
             Self::Suspense(ref vsuspense) => vsuspense.shift(next_parent, next_sibling),

packages/yew/src/dom_bundle/bportal.rs

@@ -26,8 +26,10 @@ impl ReconcileTarget for BPortal {
         self.node.detach(&self.inner_root, &self.host, false);
     }
 
-    fn shift(&self, _next_parent: &Element, _next_sibling: NodeRef) {
+    fn shift(&self, _next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         // portals have nothing in it's original place of DOM, we also do nothing.
+
+        next_sibling
     }
 }
 

packages/yew/src/dom_bundle/bsuspense.rs

@@ -60,18 +60,12 @@ impl ReconcileTarget for BSuspense {
         }
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         match self.fallback.as_ref() {
-            Some(Fallback::Bundle(bundle)) => {
-                bundle.shift(next_parent, next_sibling);
-            }
+            Some(Fallback::Bundle(bundle)) => bundle.shift(next_parent, next_sibling),
             #[cfg(feature = "hydration")]
-            Some(Fallback::Fragment(fragment)) => {
-                fragment.shift(next_parent, next_sibling);
-            }
-            None => {
-                self.children_bundle.shift(next_parent, next_sibling);
-            }
+            Some(Fallback::Fragment(fragment)) => fragment.shift(next_parent, next_sibling),
+            None => self.children_bundle.shift(next_parent, next_sibling),
         }
     }
 }

packages/yew/src/dom_bundle/btag/mod.rs

@@ -94,10 +94,12 @@ impl ReconcileTarget for BTag {
         }
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         next_parent
             .insert_before(&self.reference, next_sibling.get().as_ref())
             .unwrap();
+
+        self.node_ref.clone()
     }
 }
 

packages/yew/src/dom_bundle/btext.rs

@@ -26,12 +26,14 @@ impl ReconcileTarget for BText {
         }
     }
 
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         let node = &self.text_node;
 
         next_parent
             .insert_before(node, next_sibling.get().as_ref())
             .unwrap();
+
+        NodeRef::new(self.text_node.clone().into())
     }
 }
 

packages/yew/src/dom_bundle/fragment.rs

@@ -156,11 +156,16 @@ impl Fragment {
     }
 
     /// Shift current Fragment into a different position in the dom.
-    pub fn shift(&self, next_parent: &Element, next_sibling: NodeRef) {
+    pub fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef {
         for node in self.iter() {
             next_parent
                 .insert_before(node, next_sibling.get().as_ref())
                 .unwrap();
         }
+
+        self.front()
+            .cloned()
+            .map(NodeRef::new)
+            .unwrap_or(next_sibling)
     }
 }

packages/yew/src/dom_bundle/traits.rs

@@ -16,7 +16,7 @@ pub(super) trait ReconcileTarget {
     /// Move elements from one parent to another parent.
     /// This is for example used by `VSuspense` to preserve component state without detaching
     /// (which destroys component state).
-    fn shift(&self, next_parent: &Element, next_sibling: NodeRef);
+    fn shift(&self, next_parent: &Element, next_sibling: NodeRef) -> NodeRef;
 }
 
 /// This trait provides features to update a tree by calculating a difference against another tree.

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

@@ -301,61 +301,83 @@ impl<COMP: BaseComponent> Runnable for CreateRunner<COMP> {
     }
 }
 
-pub(crate) enum UpdateEvent {
-    /// Drain messages for a component.
-    Message,
-    /// Wraps properties, node ref, and next sibling for a component
-    #[cfg(feature = "csr")]
-    Properties(Rc<dyn Any>, NodeRef),
+#[cfg(feature = "csr")]
+pub(crate) struct PropsUpdateRunner {
+    pub props: Rc<dyn Any>,
+    pub state: Shared<Option<ComponentState>>,
+    pub next_sibling: NodeRef,
+}
+
+#[cfg(feature = "csr")]
+impl Runnable for PropsUpdateRunner {
+    fn run(self: Box<Self>) {
+        let Self {
+            next_sibling,
+            props,
+            state: shared_state,
+        } = *self;
+
+        if let Some(state) = shared_state.borrow_mut().as_mut() {
+            let schedule_render = match state.render_state {
+                #[cfg(feature = "csr")]
+                ComponentRenderState::Render {
+                    next_sibling: ref mut current_next_sibling,
+                    ..
+                } => {
+                    // When components are updated, their siblings were likely also updated
+                    *current_next_sibling = next_sibling;
+                    // Only trigger changed if props were changed
+                    state.inner.props_changed(props)
+                }
+
+                #[cfg(feature = "hydration")]
+                ComponentRenderState::Hydration {
+                    next_sibling: ref mut current_next_sibling,
+                    ..
+                } => {
+                    // When components are updated, their siblings were likely also updated
+                    *current_next_sibling = next_sibling;
+                    // Only trigger changed if props were changed
+                    state.inner.props_changed(props)
+                }
+
+                #[cfg(feature = "ssr")]
+                ComponentRenderState::Ssr { .. } => {
+                    #[cfg(debug_assertions)]
+                    panic!("properties do not change during SSR");
+
+                    #[cfg(not(debug_assertions))]
+                    false
+                }
+            };
+
+            #[cfg(debug_assertions)]
+            super::log_event(
+                state.comp_id,
+                format!("props_update(schedule_render={})", schedule_render),
+            );
+
+            if schedule_render {
+                scheduler::push_component_render(
+                    state.comp_id,
+                    Box::new(RenderRunner {
+                        state: shared_state.clone(),
+                    }),
+                );
+                // Only run from the scheduler, so no need to call `scheduler::start()`
+            }
+        };
+    }
 }
 
 pub(crate) struct UpdateRunner {
     pub state: Shared<Option<ComponentState>>,
-    pub event: UpdateEvent,
 }
 
 impl Runnable for UpdateRunner {
     fn run(self: Box<Self>) {
         if let Some(state) = self.state.borrow_mut().as_mut() {
-            let schedule_render = match self.event {
-                UpdateEvent::Message => state.inner.flush_messages(),
-
-                #[cfg(feature = "csr")]
-                UpdateEvent::Properties(props, next_sibling) => {
-                    match state.render_state {
-                        #[cfg(feature = "csr")]
-                        ComponentRenderState::Render {
-                            next_sibling: ref mut current_next_sibling,
-                            ..
-                        } => {
-                            // When components are updated, their siblings were likely also updated
-                            *current_next_sibling = next_sibling;
-                            // Only trigger changed if props were changed
-                            state.inner.props_changed(props)
-                        }
-
-                        #[cfg(feature = "hydration")]
-                        ComponentRenderState::Hydration {
-                            next_sibling: ref mut current_next_sibling,
-                            ..
-                        } => {
-                            // When components are updated, their siblings were likely also updated
-                            *current_next_sibling = next_sibling;
-                            // Only trigger changed if props were changed
-                            state.inner.props_changed(props)
-                        }
-
-                        #[cfg(feature = "ssr")]
-                        ComponentRenderState::Ssr { .. } => {
-                            #[cfg(debug_assertions)]
-                            panic!("properties do not change during SSR");
-
-                            #[cfg(not(debug_assertions))]
-                            false
-                        }
-                    }
-                }
-            };
+            let schedule_render = state.inner.flush_messages();
 
             #[cfg(debug_assertions)]
             super::log_event(
@@ -453,9 +475,8 @@ impl RenderRunner {
 
         if suspension.resumed() {
             // schedule a render immediately if suspension is resumed.
-
             scheduler::push_component_render(
-                state.comp_id,
+                comp_id,
                 Box::new(RenderRunner {
                     state: shared_state,
                 }),
@@ -542,7 +563,7 @@ impl RenderRunner {
             } => {
                 // We schedule a "first" render to run immediately after hydration,
                 // to fix NodeRefs (first_node and next_sibling).
-                scheduler::push_component_first_render(
+                scheduler::push_component_priority_render(
                     state.comp_id,
                     Box::new(RenderRunner {
                         state: self.state.clone(),

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

@@ -9,7 +9,7 @@ use std::rc::Rc;
 use std::{fmt, iter};
 
 #[cfg(any(feature = "csr", feature = "ssr"))]
-use super::lifecycle::{ComponentState, UpdateEvent, UpdateRunner};
+use super::lifecycle::{ComponentState, UpdateRunner};
 use super::BaseComponent;
 use crate::callback::Callback;
 use crate::context::{ContextHandle, ContextProvider};
@@ -353,10 +353,10 @@ mod feat_csr_ssr {
             })
         }
 
-        pub(super) fn push_update(&self, event: UpdateEvent) {
+        #[inline]
+        fn schedule_update(&self) {
             scheduler::push_component_update(Box::new(UpdateRunner {
                 state: self.state.clone(),
-                event,
             }));
             // Not guaranteed to already have the scheduler started
             scheduler::start();
@@ -369,7 +369,7 @@ mod feat_csr_ssr {
         {
             // We are the first message in queue, so we queue the update.
             if self.pending_messages.push(msg.into()) == 1 {
-                self.push_update(UpdateEvent::Message);
+                self.schedule_update();
             }
         }
 
@@ -382,7 +382,7 @@ mod feat_csr_ssr {
 
             // The queue was empty, so we queue the update
             if self.pending_messages.append(&mut messages) == msg_len {
-                self.push_update(UpdateEvent::Message);
+                self.schedule_update();
             }
         }
     }
@@ -400,7 +400,7 @@ mod feat_csr {
     use super::*;
     use crate::dom_bundle::{BSubtree, Bundle};
     use crate::html::component::lifecycle::{
-        ComponentRenderState, CreateRunner, DestroyRunner, RenderRunner,
+        ComponentRenderState, CreateRunner, DestroyRunner, PropsUpdateRunner, RenderRunner,
     };
     use crate::html::NodeRef;
     use crate::scheduler;
@@ -416,6 +416,20 @@ mod feat_csr {
         }
     }
 
+    fn schedule_props_update(
+        state: Shared<Option<ComponentState>>,
+        props: Rc<dyn Any>,
+        next_sibling: NodeRef,
+    ) {
+        scheduler::push_component_props_update(Box::new(PropsUpdateRunner {
+            state,
+            next_sibling,
+            props,
+        }));
+        // Not guaranteed to already have the scheduler started
+        scheduler::start();
+    }
+
     impl<COMP> Scope<COMP>
     where
         COMP: BaseComponent,
@@ -459,7 +473,7 @@ mod feat_csr {
             #[cfg(debug_assertions)]
             super::super::log_event(self.id, "reuse");
 
-            self.push_update(UpdateEvent::Properties(props, next_sibling));
+            schedule_props_update(self.state.clone(), props, next_sibling)
         }
     }