make hydration more resilient using ids to hydrate

packages/web/src/lib.rs

@@ -215,21 +215,21 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
             // todo: we need to split rebuild and initialize into two phases
             // it's a waste to produce edits just to get the vdom loaded
 
-            let templates = dom.rebuild().templates;
+            let mutations = dom.rebuild();
+            web_sys::console::log_1(&format!("mutations: {:#?}", mutations).into());
+            let templates = mutations.templates;
             websys_dom.load_templates(&templates);
+            websys_dom.interpreter.flush();
+            websys_dom.rehydrate();
+            // if !true {
+            //     tracing::error!("Rehydration failed. Rebuild DOM into element from scratch");
+            //     websys_dom.root.set_text_content(None);
 
-            if let Err(err) = websys_dom.rehydrate(&dom) {
-                tracing::error!(
-                    "Rehydration failed {:?}. Rebuild DOM into element from scratch",
-                    &err
-                );
-                websys_dom.root.set_text_content(None);
+            //     let edits = dom.rebuild();
 
-                let edits = dom.rebuild();
-
-                websys_dom.load_templates(&edits.templates);
-                websys_dom.apply_edits(edits.edits);
-            }
+            //     websys_dom.load_templates(&edits.templates);
+            //     websys_dom.apply_edits(edits.edits);
+            // }
         }
     } else {
         let edits = dom.rebuild();
@@ -277,6 +277,13 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
         // Dequeue all of the events from the channel in send order
         // todo: we should re-order these if possible
         while let Some(evt) = res {
+            web_sys::console::log_1(
+                &format!(
+                    "event: {:?}, {:?}, {:?}",
+                    evt.name, evt.bubbles, evt.element
+                )
+                .into(),
+            );
             dom.handle_event(evt.name.as_str(), evt.data, evt.element, evt.bubbles);
             res = rx.try_next().transpose().unwrap().ok();
         }