fix: setnode method for rehydration code

This commit is contained in:
Jonathan Kelley 2022-03-17 10:51:23 -04:00
parent 014eb974f7
commit f26f704b6b
6 changed files with 61 additions and 30 deletions

View file

@ -12,7 +12,7 @@ extern "C" {
pub fn new(arg: Element) -> Interpreter; pub fn new(arg: Element) -> Interpreter;
#[wasm_bindgen(method)] #[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)] #[wasm_bindgen(method)]
pub fn PushRoot(this: &Interpreter, root: u64); pub fn PushRoot(this: &Interpreter, root: u64);

View file

@ -20,6 +20,9 @@ export class Interpreter {
pop() { pop() {
return this.stack.pop(); return this.stack.pop();
} }
SetNode(id, node) {
this.nodes[id] = node;
}
PushRoot(root) { PushRoot(root) {
const node = this.nodes[root]; const node = this.nodes[root];
this.stack.push(node); this.stack.push(node);

3
packages/web/.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"rust-analyzer.cargo.target": "wasm32-unknown-unknown",
}

View file

@ -13,7 +13,9 @@ keywords = ["dom", "ui", "gui", "react", "wasm"]
[dependencies] [dependencies]
dioxus-core = { path = "../core", version = "^0.2.0" } dioxus-core = { path = "../core", version = "^0.2.0" }
dioxus-html = { path = "../html", 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" js-sys = "0.3.56"
wasm-bindgen = { version = "0.2.79", features = ["enable-interning"] } 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" wasm-bindgen-test = "0.3.29"
dioxus-ssr = { path = "../ssr" } dioxus-ssr = { path = "../ssr" }
wasm-logger = "0.2.0" wasm-logger = "0.2.0"

View file

@ -80,8 +80,7 @@ impl WebsysDom {
*last_node_was_text = true; *last_node_was_text = true;
self.interpreter.set_node(node_id.0, node); self.interpreter.SetNode(node_id.0, node);
// self.nodes[node_id.0] = Some(node);
*cur_place += 1; *cur_place += 1;
} }
@ -93,21 +92,7 @@ impl WebsysDom {
let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap(); let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
use smallstr::SmallString; self.interpreter.SetNode(node_id.0, node.clone());
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::<Element>()
.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());
*cur_place += 1; *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::<Element>()
.unwrap()
.set_attribute("dioxus-id", s.as_str())
.unwrap();
}
place.pop(); place.pop();
nodes.pop(); nodes.pop();
@ -145,7 +145,7 @@ impl WebsysDom {
let cur_place = place.last_mut().unwrap(); let cur_place = place.last_mut().unwrap();
let node = nodes.last().unwrap().child_nodes().get(*cur_place).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); // self.nodes[node_id.0] = Some(node);

View file

@ -2,6 +2,7 @@ use dioxus_core::prelude::*;
use dioxus_core_macro::*; use dioxus_core_macro::*;
use dioxus_html as dioxus_elements; use dioxus_html as dioxus_elements;
use wasm_bindgen_test::wasm_bindgen_test; use wasm_bindgen_test::wasm_bindgen_test;
use web_sys::window;
wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser); wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
@ -10,10 +11,12 @@ fn makes_tree() {
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
cx.render(rsx! { cx.render(rsx! {
div { div {
h1 {} div {
} h1 {}
div { }
h2 {} div {
h2 {}
}
} }
}) })
} }
@ -29,13 +32,34 @@ fn rehydrates() {
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
cx.render(rsx! { cx.render(rsx! {
div { div {
h1 {} div {
} h1 { "h1" }
div { }
h2 {} 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!("<div id='main'>{}</div>", out));
dioxus_web::launch_cfg(app, |c| c.hydrate(true));
} }