From f26f704b6b7a5fe8ed8fc41b159a9dbd9592579b Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Thu, 17 Mar 2022 10:51:23 -0400 Subject: [PATCH] fix: setnode method for rehydration code --- packages/interpreter/src/bindings.rs | 2 +- packages/interpreter/src/interpreter.js | 3 ++ packages/web/.vscode/settings.json | 3 ++ packages/web/Cargo.toml | 5 +-- packages/web/src/rehydrate.rs | 36 ++++++++++----------- packages/web/tests/hydrate.rs | 42 +++++++++++++++++++------ 6 files changed, 61 insertions(+), 30 deletions(-) create mode 100644 packages/web/.vscode/settings.json diff --git a/packages/interpreter/src/bindings.rs b/packages/interpreter/src/bindings.rs index aa937728b..3f0dc5ce1 100644 --- a/packages/interpreter/src/bindings.rs +++ b/packages/interpreter/src/bindings.rs @@ -12,7 +12,7 @@ extern "C" { pub fn new(arg: Element) -> Interpreter; #[wasm_bindgen(method)] - pub fn set_node(this: &Interpreter, id: usize, node: Node); + pub fn SetNode(this: &Interpreter, id: usize, node: Node); #[wasm_bindgen(method)] pub fn PushRoot(this: &Interpreter, root: u64); diff --git a/packages/interpreter/src/interpreter.js b/packages/interpreter/src/interpreter.js index f6b4fe200..af7c42a96 100644 --- a/packages/interpreter/src/interpreter.js +++ b/packages/interpreter/src/interpreter.js @@ -20,6 +20,9 @@ export class Interpreter { pop() { return this.stack.pop(); } + SetNode(id, node) { + this.nodes[id] = node; + } PushRoot(root) { const node = this.nodes[root]; this.stack.push(node); diff --git a/packages/web/.vscode/settings.json b/packages/web/.vscode/settings.json new file mode 100644 index 000000000..8974c7a87 --- /dev/null +++ b/packages/web/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "rust-analyzer.cargo.target": "wasm32-unknown-unknown", +} diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml index 257fd8529..fb4fee77b 100644 --- a/packages/web/Cargo.toml +++ b/packages/web/Cargo.toml @@ -13,7 +13,9 @@ keywords = ["dom", "ui", "gui", "react", "wasm"] [dependencies] dioxus-core = { path = "../core", version = "^0.2.0" } dioxus-html = { path = "../html", version = "^0.2.0" } -dioxus-interpreter-js = { path = "../interpreter", version = "^0.2.0", features = ["web"] } +dioxus-interpreter-js = { path = "../interpreter", version = "^0.2.0", features = [ + "web", +] } js-sys = "0.3.56" wasm-bindgen = { version = "0.2.79", features = ["enable-interning"] } @@ -79,4 +81,3 @@ dioxus-core-macro = { path = "../core-macro" } wasm-bindgen-test = "0.3.29" dioxus-ssr = { path = "../ssr" } wasm-logger = "0.2.0" - diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs index 387baab59..24e46d11e 100644 --- a/packages/web/src/rehydrate.rs +++ b/packages/web/src/rehydrate.rs @@ -80,8 +80,7 @@ impl WebsysDom { *last_node_was_text = true; - self.interpreter.set_node(node_id.0, node); - // self.nodes[node_id.0] = Some(node); + self.interpreter.SetNode(node_id.0, node); *cur_place += 1; } @@ -93,21 +92,7 @@ impl WebsysDom { let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap(); - use smallstr::SmallString; - use std::fmt::Write; - - // 8 digits is enough, yes? - // 12 million nodes in one page? - let mut s: SmallString<[u8; 8]> = smallstr::SmallString::new(); - write!(s, "{}", node_id).unwrap(); - - node.dyn_ref::() - .unwrap() - .set_attribute("dioxus-id", s.as_str()) - .unwrap(); - - self.interpreter.set_node(node_id.0, node.clone()); - // self.nodes[node_id.0] = Some(node.clone()); + self.interpreter.SetNode(node_id.0, node.clone()); *cur_place += 1; @@ -129,6 +114,21 @@ impl WebsysDom { ); } + if !vel.listeners.is_empty() { + use smallstr::SmallString; + use std::fmt::Write; + + // 8 digits is enough, yes? + // 12 million nodes in one page? + let mut s: SmallString<[u8; 8]> = smallstr::SmallString::new(); + write!(s, "{}", node_id).unwrap(); + + node.dyn_ref::() + .unwrap() + .set_attribute("dioxus-id", s.as_str()) + .unwrap(); + } + place.pop(); nodes.pop(); @@ -145,7 +145,7 @@ impl WebsysDom { let cur_place = place.last_mut().unwrap(); let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap(); - self.interpreter.set_node(node_id.0, node); + self.interpreter.SetNode(node_id.0, node); // self.nodes[node_id.0] = Some(node); diff --git a/packages/web/tests/hydrate.rs b/packages/web/tests/hydrate.rs index b8a034a5b..76f851c83 100644 --- a/packages/web/tests/hydrate.rs +++ b/packages/web/tests/hydrate.rs @@ -2,6 +2,7 @@ use dioxus_core::prelude::*; use dioxus_core_macro::*; use dioxus_html as dioxus_elements; use wasm_bindgen_test::wasm_bindgen_test; +use web_sys::window; wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser); @@ -10,10 +11,12 @@ fn makes_tree() { fn app(cx: Scope) -> Element { cx.render(rsx! { div { - h1 {} - } - div { - h2 {} + div { + h1 {} + } + div { + h2 {} + } } }) } @@ -29,13 +32,34 @@ fn rehydrates() { fn app(cx: Scope) -> Element { cx.render(rsx! { div { - h1 {} - } - div { - h2 {} + div { + h1 { "h1" } + } + div { + h2 { "h2" } + } + button { + onclick: move |_| { + println!("clicked"); + }, + "listener test" + } + false.then(|| rsx!{ "hello" }) } }) } - dioxus_web::launch(app); + let mut dom = VirtualDom::new(app); + let _ = dom.rebuild(); + let out = dioxus_ssr::render_vdom_cfg(&dom, |c| c.pre_render(true)); + + window() + .unwrap() + .document() + .unwrap() + .body() + .unwrap() + .set_inner_html(&format!("
{}
", out)); + + dioxus_web::launch_cfg(app, |c| c.hydrate(true)); }