Merge branch 'master' into add-file-data-drag-event

packages/web/Cargo.toml

@@ -93,4 +93,6 @@ dioxus = { workspace = true }
 wasm-bindgen-test = "0.3.29"
 dioxus-ssr = { workspace = true}
 wasm-logger = "0.2.0"
+gloo-timers = "0.2.3"
+gloo-dialogs = "0.1.1"
 dioxus-web = { workspace = true, features = ["hydrate"] }

packages/web/examples/README.md

@@ -0,0 +1,10 @@
+Examples
+========
+
+# Hydrate
+
+- `hydrate` show hydrate
+
+# Async
+
+- `timeout_count` button to add count and show count in the future

packages/web/examples/timeout_count.rs

@@ -0,0 +1,31 @@
+// https://jakelazaroff.com/words/were-react-hooks-a-mistake/
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_web::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let count = use_ref(cx, || 0);
+    let started = use_state(cx, || false);
+
+    let start = move || {
+        if !*started.get() {
+            let count = count.clone(); // clone reference rather than value
+            let alert = move || gloo_dialogs::alert(&format!("Your score was {}!", count.read()));
+            gloo_timers::callback::Timeout::new(5_000, alert).forget();
+        }
+        started.set(true); // this cannot be done inside condition or infinite loop
+    };
+
+    cx.render(rsx! {
+        button {
+            onclick: move |_event| {
+                start();
+                *count.write() += 1;
+            },
+            // format is needed as {count} does not seemed to work in `if` within content
+            if **started { format!("Current score: {}", count.write()) } else { "Start".to_string() }
+        }
+    })
+}

packages/web/src/rehydrate.rs

@@ -90,7 +90,7 @@ impl WebsysDom {
             // make sure we set the root node ids even if the node is not dynamic
             set_node(
                 hydrated,
-                vnode.root_ids.get(i).ok_or(VNodeNotInitialized)?,
+                *vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?,
                 current_child.clone()?,
             );
 
@@ -115,6 +115,12 @@ impl WebsysDom {
         node: &TemplateNode,
         last_node_was_static_text: &mut bool,
     ) -> Result<(), RehydrationError> {
+        log::trace!("rehydrate template node: {:?}", node);
+        if let Ok(current_child) = current_child {
+            if log::log_enabled!(log::Level::Trace) {
+                web_sys::console::log_1(&current_child.clone().into());
+            }
+        }
         match node {
             TemplateNode::Element {
                 children, attrs, ..
@@ -198,6 +204,12 @@ impl WebsysDom {
         dynamic: &DynamicNode,
         last_node_was_static_text: &mut bool,
     ) -> Result<(), RehydrationError> {
+        log::trace!("rehydrate dynamic node: {:?}", dynamic);
+        if let Ok(current_child) = current_child {
+            if log::log_enabled!(log::Level::Trace) {
+                web_sys::console::log_1(&current_child.clone().into());
+            }
+        }
         match dynamic {
             dioxus_core::DynamicNode::Text(VText { id, .. }) => {
                 // skip comment separator before node