diff --git a/packages/core/tests/suspense.rs b/packages/core/tests/suspense.rs
index abce7f8a6..1a7ab3d58 100644
--- a/packages/core/tests/suspense.rs
+++ b/packages/core/tests/suspense.rs
@@ -11,7 +11,7 @@ fn it_works() {
let mut dom = VirtualDom::new(app);
_ = dom.rebuild();
dom.wait_for_suspense().await;
- let out = dioxus_ssr::pre_render(&dom);
+ let out = dioxus_ssr::render(&dom);
assert_eq!(out, "Waiting for... child
");
diff --git a/packages/fullstack/examples/axum-hello-world/src/main.rs b/packages/fullstack/examples/axum-hello-world/src/main.rs
index 64e5b44a0..e9d3dcad6 100644
--- a/packages/fullstack/examples/axum-hello-world/src/main.rs
+++ b/packages/fullstack/examples/axum-hello-world/src/main.rs
@@ -27,9 +27,7 @@ fn app(cx: Scope) -> Element {
let eval = use_eval(cx);
cx.render(rsx! {
- div {
- "Server state: {state}"
- }
+ div { "Server state: {state}" }
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
diff --git a/packages/fullstack/src/adapters/axum_adapter.rs b/packages/fullstack/src/adapters/axum_adapter.rs
index 41a7c92be..09e6e1aa1 100644
--- a/packages/fullstack/src/adapters/axum_adapter.rs
+++ b/packages/fullstack/src/adapters/axum_adapter.rs
@@ -254,7 +254,6 @@ where
fn register_server_fns(self, server_fn_route: &'static str) -> Self {
self.register_server_fns_with_handler(server_fn_route, |func| {
- use crate::layer::Service;
move |req: Request| {
let mut service = crate::server_fn_service(Default::default(), func);
async move {
diff --git a/packages/fullstack/src/hooks/server_cached.rs b/packages/fullstack/src/hooks/server_cached.rs
index 82e755fc3..827ba22c5 100644
--- a/packages/fullstack/src/hooks/server_cached.rs
+++ b/packages/fullstack/src/hooks/server_cached.rs
@@ -12,9 +12,10 @@ use serde::{de::DeserializeOwned, Serialize};
/// use dioxus_fullstack::prelude::*;
///
/// fn app(cx: Scope) -> Element {
-/// let state1 = use_state(cx, || server_cached(|| {
+/// let state1 = server_cached(cx, || from_server(|| {
/// 1234
/// }));
+///
/// todo!()
/// }
/// ```
diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs
index 00b6d8ca0..a42824e15 100644
--- a/packages/interpreter/src/sledgehammer_bindings.rs
+++ b/packages/interpreter/src/sledgehammer_bindings.rs
@@ -86,8 +86,43 @@ mod js {
export function save_template(nodes, tmpl_id) {
templates[tmpl_id] = nodes;
}
- export function set_node(id, node) {
- nodes[id] = node;
+ export function hydrate(ids) {
+ console.log("hydrating", ids);
+ const hydrateNodes = document.querySelectorAll('[data-node-hydration]');
+ for (let i = 0; i < hydrateNodes.length; i++) {
+ const hydrateNode = hydrateNodes[i];
+ const hydration = hydrateNode.getAttribute('data-node-hydration');
+ const split = hydration.split(',');
+ const id = ids[parseInt(split[0])];
+ nodes[id] = hydrateNode;
+ console.log("hydrating node", hydrateNode, id);
+ if (split.length > 1) {
+ hydrateNode.listening = split.length - 1;
+ hydrateNode.setAttribute('data-dioxus-id', id);
+ for (let j = 1; j < split.length; j++) {
+ const listener = split[j];
+ const split2 = listener.split(':');
+ const event_name = split2[0];
+ const bubbles = split2[1] === '1';
+ console.log("hydrating listener", event_name, bubbles);
+ listeners.create(event_name, hydrateNode, bubbles);
+ }
+ }
+ }
+ const treeWalker = document.createTreeWalker(
+ document.body,
+ NodeFilter.SHOW_COMMENT,
+ );
+ let currentNode = treeWalker.nextNode();
+ while (currentNode) {
+ const id = currentNode.textContent;
+ const split = id.split('node-id');
+ if (split.length > 1) {
+ console.log("hydrating text", currentNode.nextSibling, id);
+ nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
+ }
+ currentNode = treeWalker.nextNode();
+ }
}
export function get_node(id) {
return nodes[id];
@@ -112,7 +147,7 @@ mod js {
pub fn save_template(nodes: Vec, tmpl_id: u16);
#[wasm_bindgen]
- pub fn set_node(id: u32, node: Node);
+ pub fn hydrate(ids: Vec);
#[wasm_bindgen]
pub fn get_node(id: u32) -> Node;
diff --git a/packages/ssr/src/cache.rs b/packages/ssr/src/cache.rs
index bcd6ba71f..11f90058a 100644
--- a/packages/ssr/src/cache.rs
+++ b/packages/ssr/src/cache.rs
@@ -27,6 +27,10 @@ pub enum Segment {
},
/// A marker for where to insert a dynamic inner html
InnerHtmlMarker,
+ /// A marker for where to insert a node id for an attribute
+ AttributeNodeMarker,
+ /// A marker for where to insert a node id for a root node
+ RootNodeMarker,
}
impl std::fmt::Write for StringChain {
@@ -41,13 +45,13 @@ impl std::fmt::Write for StringChain {
}
impl StringCache {
- pub fn from_template(template: &VNode) -> Result {
+ pub fn from_template(template: &VNode, prerender: bool) -> Result {
let mut chain = StringChain::default();
let mut cur_path = vec![];
for (root_idx, root) in template.template.get().roots.iter().enumerate() {
- Self::recurse(root, &mut cur_path, root_idx, &mut chain)?;
+ Self::recurse(root, &mut cur_path, root_idx, true, prerender, &mut chain)?;
}
Ok(Self {
@@ -60,6 +64,8 @@ impl StringCache {
root: &TemplateNode,
cur_path: &mut Vec,
root_idx: usize,
+ is_root: bool,
+ prerender: bool,
chain: &mut StringChain,
) -> Result<(), std::fmt::Error> {
match root {
@@ -76,7 +82,7 @@ impl StringCache {
// we need to collect the inner html and write it at the end
let mut inner_html = None;
// we need to keep track of if we have dynamic attrs to know if we need to insert a style and inner_html marker
- let mut has_dynamic_attrs = false;
+ let mut has_dyn_attrs = false;
for attr in *attrs {
match attr {
TemplateAttribute::Static {
@@ -97,8 +103,9 @@ impl StringCache {
}
}
TemplateAttribute::Dynamic { id: index } => {
- chain.segments.push(Segment::Attr(*index));
- has_dynamic_attrs = true;
+ let index = *index;
+ chain.segments.push(Segment::Attr(index));
+ has_dyn_attrs = true
}
}
}
@@ -113,12 +120,23 @@ impl StringCache {
inside_style_tag: true,
});
write!(chain, "\"")?;
- } else if has_dynamic_attrs {
+ } else if has_dyn_attrs {
chain.segments.push(Segment::StyleMarker {
inside_style_tag: false,
});
}
+ // write the id if we are prerendering and this is either a root node or a node with a dynamic attribute
+ if prerender && (has_dyn_attrs || is_root) {
+ write!(chain, " data-node-hydration=\"")?;
+ if has_dyn_attrs {
+ chain.segments.push(Segment::AttributeNodeMarker);
+ } else if is_root {
+ chain.segments.push(Segment::RootNodeMarker);
+ }
+ write!(chain, "\"")?;
+ }
+
if children.is_empty() && tag_is_self_closing(tag) {
write!(chain, "/>")?;
} else {
@@ -126,12 +144,12 @@ impl StringCache {
// Write the static inner html, or insert a marker if dynamic inner html is possible
if let Some(inner_html) = inner_html {
chain.write_str(inner_html)?;
- } else if has_dynamic_attrs {
+ } else if has_dyn_attrs {
chain.segments.push(Segment::InnerHtmlMarker);
}
for child in *children {
- Self::recurse(child, cur_path, root_idx, chain)?;
+ Self::recurse(child, cur_path, root_idx, false, prerender, chain)?;
}
write!(chain, "")?;
}
diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs
index 6f22e4a51..2db5fdc66 100644
--- a/packages/ssr/src/renderer.rs
+++ b/packages/ssr/src/renderer.rs
@@ -28,6 +28,9 @@ pub struct Renderer {
/// A cache of templates that have been rendered
template_cache: HashMap<&'static str, Arc>,
+
+ /// The current dynamic node id for hydration
+ dynamic_node_id: usize,
}
impl Renderer {
@@ -54,6 +57,7 @@ impl Renderer {
// We should never ever run into async or errored nodes in SSR
// Error boundaries and suspense boundaries will convert these to sync
if let RenderReturn::Ready(node) = dom.get_scope(scope).unwrap().root_node() {
+ self.dynamic_node_id = 0;
self.render_template(buf, dom, node)?
};
@@ -69,7 +73,10 @@ impl Renderer {
let entry = self
.template_cache
.entry(template.template.get().name)
- .or_insert_with(|| Arc::new(StringCache::from_template(template).unwrap()))
+ .or_insert_with({
+ let prerender = self.pre_render;
+ move || Arc::new(StringCache::from_template(template, prerender).unwrap())
+ })
.clone();
let mut inner_html = None;
@@ -77,6 +84,9 @@ impl Renderer {
// We need to keep track of the dynamic styles so we can insert them into the right place
let mut accumulated_dynamic_styles = Vec::new();
+ // We need to keep track of the listeners so we can insert them into the right place
+ let mut accumulated_listeners = Vec::new();
+
for segment in entry.segments.iter() {
match segment {
Segment::Attr(idx) => {
@@ -93,6 +103,15 @@ impl Renderer {
} else {
write_attribute(buf, attr)?;
}
+
+ if self.pre_render {
+ if let AttributeValue::Listener(_) = &attr.value {
+ // The onmounted event doesn't need a DOM listener
+ if attr.name != "onmounted" {
+ accumulated_listeners.push(attr.name);
+ }
+ }
+ }
}
Segment::Node(idx) => match &template.dynamic_nodes[*idx] {
DynamicNode::Component(node) => {
@@ -115,7 +134,8 @@ impl Renderer {
DynamicNode::Text(text) => {
// in SSR, we are concerned that we can't hunt down the right text node since they might get merged
if self.pre_render {
- write!(buf, "")?;
+ write!(buf, "", self.dynamic_node_id)?;
+ self.dynamic_node_id += 1;
}
write!(
@@ -134,9 +154,14 @@ impl Renderer {
}
}
- DynamicNode::Placeholder(_el) => {
+ DynamicNode::Placeholder(_) => {
if self.pre_render {
- write!(buf, "")?;
+ write!(
+ buf,
+ "",
+ self.dynamic_node_id
+ )?;
+ self.dynamic_node_id += 1;
}
}
},
@@ -175,6 +200,22 @@ impl Renderer {
}
}
}
+
+ Segment::AttributeNodeMarker => {
+ // first write the id
+ write!(buf, "{}", self.dynamic_node_id)?;
+ self.dynamic_node_id += 1;
+ // then write any listeners
+ for name in accumulated_listeners.drain(..) {
+ write!(buf, ",{}:", &name[2..])?;
+ write!(buf, "{}", dioxus_html::event_bubbles(name) as u8)?;
+ }
+ }
+
+ Segment::RootNodeMarker => {
+ write!(buf, "{}", self.dynamic_node_id)?;
+ self.dynamic_node_id += 1
+ }
}
}
@@ -192,7 +233,9 @@ fn to_string_works() {
render! {
div { class: "asdasdasd", class: "asdasdasd", id: "id-{dynamic}",
- "Hello world 1 -->" "{dynamic}" "<-- Hello world 2"
+ "Hello world 1 -->"
+ "{dynamic}"
+ "<-- Hello world 2"
div { "nest 1" }
div {}
div { "nest 2" }
diff --git a/packages/ssr/tests/hydration.rs b/packages/ssr/tests/hydration.rs
new file mode 100644
index 000000000..8c9e9f5c8
--- /dev/null
+++ b/packages/ssr/tests/hydration.rs
@@ -0,0 +1,199 @@
+use dioxus::prelude::*;
+
+#[test]
+fn root_ids() {
+ fn app(cx: Scope) -> Element {
+ render! { div { width: "100px" } }
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#""#
+ );
+}
+
+#[test]
+fn dynamic_attributes() {
+ fn app(cx: Scope) -> Element {
+ let dynamic = 123;
+ render! {
+ div { width: "100px", div { width: "{dynamic}px" } }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#""#
+ );
+}
+
+#[test]
+fn listeners() {
+ fn app(cx: Scope) -> Element {
+ render! {
+ div { width: "100px", div { onclick: |_| {} } }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#""#
+ );
+
+ fn app2(cx: Scope) -> Element {
+ let dynamic = 123;
+ render! {
+ div { width: "100px", div { width: "{dynamic}px", onclick: |_| {} } }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app2);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#""#
+ );
+}
+
+#[test]
+fn text_nodes() {
+ fn app(cx: Scope) -> Element {
+ let dynamic_text = "hello";
+ render! {
+ div { dynamic_text }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"hello
"#
+ );
+
+ fn app2(cx: Scope) -> Element {
+ let dynamic = 123;
+ render! {
+ div { "{dynamic}", "{1234}" }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app2);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"1231234
"#
+ );
+}
+
+#[allow(non_snake_case)]
+#[test]
+fn components_hydrate() {
+ fn app(cx: Scope) -> Element {
+ render! { Child {} }
+ }
+
+ fn Child(cx: Scope) -> Element {
+ render! { div { "hello" } }
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"hello
"#
+ );
+
+ fn app2(cx: Scope) -> Element {
+ render! { Child2 {} }
+ }
+
+ fn Child2(cx: Scope) -> Element {
+ let dyn_text = "hello";
+ render! {
+ div { dyn_text }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app2);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"hello
"#
+ );
+
+ fn app3(cx: Scope) -> Element {
+ render! { Child3 {} }
+ }
+
+ fn Child3(cx: Scope) -> Element {
+ render! { div { width: "{1}" } }
+ }
+
+ let mut dom = VirtualDom::new(app3);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#""#
+ );
+
+ fn app4(cx: Scope) -> Element {
+ render! { Child4 {} }
+ }
+
+ fn Child4(cx: Scope) -> Element {
+ render! {
+ for _ in 0..2 {
+ render! {
+ render! {
+ "{1}"
+ }
+ }
+ }
+ }
+ }
+
+ let mut dom = VirtualDom::new(app4);
+ _ = dom.rebuild();
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"11"#
+ );
+}
+
+#[test]
+fn hello_world_hydrates() {
+ fn app(cx: Scope) -> Element {
+ let mut count = use_state(cx, || 0);
+
+ cx.render(rsx! {
+ h1 { "High-Five counter: {count}" }
+ button { onclick: move |_| count += 1, "Up high!" }
+ button { onclick: move |_| count -= 1, "Down low!" }
+ })
+ }
+
+ let mut dom = VirtualDom::new(app);
+ _ = dbg!(dom.rebuild());
+
+ assert_eq!(
+ dioxus_ssr::pre_render(&dom),
+ r#"High-Five counter: 0
"#
+ );
+}
diff --git a/packages/ssr/tests/simple.rs b/packages/ssr/tests/simple.rs
index cdf186a80..a9034df9b 100644
--- a/packages/ssr/tests/simple.rs
+++ b/packages/ssr/tests/simple.rs
@@ -47,9 +47,7 @@ fn dynamic() {
fn components() {
#[component]
fn MyComponent(cx: Scope, name: i32) -> Element {
- render! {
- div { "component {name}" }
- }
+ render! { div { "component {name}" } }
}
assert_eq!(
diff --git a/packages/web/examples/hydrate.rs b/packages/web/examples/hydrate.rs
index 08c0f95cd..8a6cd464e 100644
--- a/packages/web/examples/hydrate.rs
+++ b/packages/web/examples/hydrate.rs
@@ -4,14 +4,10 @@ use web_sys::window;
fn app(cx: Scope) -> Element {
cx.render(rsx! {
+ div { h1 { "thing 1" } }
+ div { h2 { "thing 2" } }
div {
- h1 { "thing 1" }
- }
- div {
- h2 { "thing 2"}
- }
- div {
- h2 { "thing 2"}
+ h2 { "thing 2" }
"asd"
"asd"
Bapp {}
@@ -27,14 +23,10 @@ fn app(cx: Scope) -> Element {
#[allow(non_snake_case)]
fn Bapp(cx: Scope) -> Element {
cx.render(rsx! {
+ div { h1 { "thing 1" } }
+ div { h2 { "thing 2" } }
div {
- h1 { "thing 1" }
- }
- div {
- h2 { "thing 2"}
- }
- div {
- h2 { "thing 2"}
+ h2 { "thing 2" }
"asd"
"asd"
}
@@ -60,6 +52,6 @@ fn main() {
.unwrap()
.set_inner_html(&pre);
- // now rehydtrate
+ // now rehydrate
dioxus_web::launch_with_props(app, (), Config::new().hydrate(true));
}
diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs
index 656374f7d..982368de7 100644
--- a/packages/web/src/dom.rs
+++ b/packages/web/src/dom.rs
@@ -1,11 +1,10 @@
//! Implementation of a renderer for Dioxus on the web.
//!
//! Oustanding todos:
-//! - Removing event listeners (delegation)
//! - Passive event listeners
//! - no-op event listener patch for safari
//! - tests to ensure dyn_into works for various event types.
-//! - Partial delegation?>
+//! - Partial delegation?
use dioxus_core::{
BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index 30a2952fa..364f4aaa7 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -216,14 +216,16 @@ pub async fn run_with_props(root: fn(Scope) -> 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;
- websys_dom.load_templates(&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();
+ }
if let Err(err) = websys_dom.rehydrate(&dom) {
- tracing::error!(
- "Rehydration failed {:?}. Rebuild DOM into element from scratch",
- &err
- );
+ tracing::error!("Rehydration failed. {:?}", err);
+ tracing::error!("Rebuild DOM into element from scratch");
websys_dom.root.set_text_content(None);
let edits = dom.rebuild();
@@ -252,13 +254,6 @@ pub async fn run_with_props(root: fn(Scope) -> Element, root_prop
pin_mut!(work);
#[cfg(all(feature = "hot_reload", debug_assertions))]
- // futures_util::select! {
- // _ = work => (None, None),
- // new_template = hotreload_rx.next() => {
- // (None, new_template)
- // }
- // evt = rx.next() =>
- // }
match select(work, select(hotreload_rx.next(), rx.next())).await {
Either::Left((_, _)) => (None, None),
Either::Right((Either::Left((new_template, _)), _)) => (None, new_template),
@@ -278,6 +273,13 @@ pub async fn run_with_props(root: fn(Scope) -> 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();
}
diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index 11c68f89c..4905d1e24 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -1,105 +1,62 @@
use crate::dom::WebsysDom;
-use dioxus_core::{
- AttributeValue, DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom,
-};
-use dioxus_html::event_bubbles;
-use wasm_bindgen::JsCast;
-use web_sys::{Comment, Node};
+use dioxus_core::{DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom};
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug)]
pub enum RehydrationError {
- NodeTypeMismatch,
- NodeNotFound,
VNodeNotInitialized,
}
-use RehydrationError::*;
-fn set_node(hydrated: &mut Vec, id: ElementId, node: Node) {
- let idx = id.0;
- if idx >= hydrated.len() {
- hydrated.resize(idx + 1, false);
- }
- if !hydrated[idx] {
- dioxus_interpreter_js::set_node(idx as u32, node);
- hydrated[idx] = true;
- }
-}
+use RehydrationError::*;
impl WebsysDom {
// we're streaming in patches, but the nodes already exist
// so we're just going to write the correct IDs to the node and load them in
pub fn rehydrate(&mut self, dom: &VirtualDom) -> Result<(), RehydrationError> {
- let mut root = self
- .root
- .clone()
- .dyn_into::()
- .map_err(|_| NodeTypeMismatch)?
- .first_child()
- .ok_or(NodeNotFound);
-
let root_scope = dom.base_scope();
-
- let mut hydrated = vec![true];
-
- let mut last_node_was_static_text = false;
+ let mut ids = Vec::new();
+ let mut to_mount = Vec::new();
// Recursively rehydrate the dom from the VirtualDom
- self.rehydrate_scope(
- root_scope,
- &mut root,
- &mut hydrated,
- dom,
- &mut last_node_was_static_text,
- )?;
+ self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?;
+
+ dioxus_interpreter_js::hydrate(ids);
+
+ for id in to_mount {
+ self.send_mount_event(id);
+ }
- self.interpreter.flush();
Ok(())
}
fn rehydrate_scope(
&mut self,
scope: &ScopeState,
- current_child: &mut Result,
- hydrated: &mut Vec,
dom: &VirtualDom,
- last_node_was_static_text: &mut bool,
+ ids: &mut Vec,
+ to_mount: &mut Vec,
) -> Result<(), RehydrationError> {
let vnode = match scope.root_node() {
dioxus_core::RenderReturn::Ready(ready) => ready,
_ => return Err(VNodeNotInitialized),
};
- self.rehydrate_vnode(
- current_child,
- hydrated,
- dom,
- vnode,
- last_node_was_static_text,
- )
+ self.rehydrate_vnode(dom, vnode, ids, to_mount)
}
fn rehydrate_vnode(
&mut self,
- current_child: &mut Result,
- hydrated: &mut Vec,
dom: &VirtualDom,
vnode: &VNode,
- last_node_was_static_text: &mut bool,
+ ids: &mut Vec,
+ to_mount: &mut Vec,
) -> Result<(), RehydrationError> {
for (i, root) in vnode.template.get().roots.iter().enumerate() {
- // make sure we set the root node ids even if the node is not dynamic
- set_node(
- hydrated,
- *vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?,
- current_child.clone()?,
- );
-
self.rehydrate_template_node(
- current_child,
- hydrated,
dom,
vnode,
root,
- last_node_was_static_text,
+ ids,
+ to_mount,
+ Some(*vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?),
)?;
}
Ok(())
@@ -107,191 +64,75 @@ impl WebsysDom {
fn rehydrate_template_node(
&mut self,
- current_child: &mut Result,
- hydrated: &mut Vec,
dom: &VirtualDom,
vnode: &VNode,
node: &TemplateNode,
- last_node_was_static_text: &mut bool,
+ ids: &mut Vec,
+ to_mount: &mut Vec,
+ root_id: Option,
) -> Result<(), RehydrationError> {
tracing::trace!("rehydrate template node: {:?}", node);
- if let Ok(current_child) = current_child {
- if tracing::event_enabled!(tracing::Level::TRACE) {
- web_sys::console::log_1(¤t_child.clone().into());
- }
- }
match node {
TemplateNode::Element {
children, attrs, ..
} => {
- let mut mounted_id = None;
- let mut should_send_mount_event = true;
+ let mut mounted_id = root_id;
for attr in *attrs {
if let dioxus_core::TemplateAttribute::Dynamic { id } = attr {
let attribute = &vnode.dynamic_attrs[*id];
- let value = &attribute.value;
let id = attribute.mounted_element();
mounted_id = Some(id);
- let name = attribute.name;
- if let AttributeValue::Listener(_) = value {
- let event_name = &name[2..];
- match event_name {
- "mounted" => should_send_mount_event = true,
- _ => {
- self.interpreter.new_event_listener(
- event_name,
- id.0 as u32,
- event_bubbles(event_name) as u8,
- );
- }
+ if let dioxus_core::AttributeValue::Listener(_) = attribute.value {
+ if attribute.name == "onmounted" {
+ to_mount.push(id);
}
}
}
}
if let Some(id) = mounted_id {
- set_node(hydrated, id, current_child.clone()?);
- if should_send_mount_event {
- self.send_mount_event(id);
- }
+ ids.push(id.0 as u32);
}
if !children.is_empty() {
- let mut children_current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .first_child()
- .ok_or(NodeNotFound)?
- .dyn_into::()
- .map_err(|_| NodeTypeMismatch);
for child in *children {
- self.rehydrate_template_node(
- &mut children_current_child,
- hydrated,
- dom,
- vnode,
- child,
- last_node_was_static_text,
- )?;
+ self.rehydrate_template_node(dom, vnode, child, ids, to_mount, None)?;
}
}
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
- *last_node_was_static_text = false;
- }
- TemplateNode::Text { .. } => {
- // if the last node was static text, it got merged with this one
- if !*last_node_was_static_text {
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
- }
- *last_node_was_static_text = true;
}
TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
- self.rehydrate_dynamic_node(
- current_child,
- hydrated,
- dom,
- &vnode.dynamic_nodes[*id],
- last_node_was_static_text,
- )?;
+ self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids, to_mount)?;
}
+ _ => {}
}
Ok(())
}
fn rehydrate_dynamic_node(
&mut self,
- current_child: &mut Result,
- hydrated: &mut Vec,
dom: &VirtualDom,
dynamic: &DynamicNode,
- last_node_was_static_text: &mut bool,
+ ids: &mut Vec,
+ to_mount: &mut Vec,
) -> Result<(), RehydrationError> {
tracing::trace!("rehydrate dynamic node: {:?}", dynamic);
- if let Ok(current_child) = current_child {
- if tracing::event_enabled!(tracing::Level::TRACE) {
- web_sys::console::log_1(¤t_child.clone().into());
- }
- }
match dynamic {
dioxus_core::DynamicNode::Text(text) => {
- let id = text.mounted_element();
- // skip comment separator before node
- if cfg!(debug_assertions) {
- assert!(current_child
- .as_mut()
- .map_err(|e| *e)?
- .has_type::());
- }
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
-
- set_node(
- hydrated,
- id.ok_or(VNodeNotInitialized)?,
- current_child.clone()?,
- );
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
-
- // skip comment separator after node
- if cfg!(debug_assertions) {
- assert!(current_child
- .as_mut()
- .map_err(|e| *e)?
- .has_type::());
- }
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
-
- *last_node_was_static_text = false;
+ ids.push(text.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
}
dioxus_core::DynamicNode::Placeholder(placeholder) => {
- set_node(
- hydrated,
- placeholder.mounted_element().ok_or(VNodeNotInitialized)?,
- current_child.clone()?,
- );
- *current_child = current_child
- .as_mut()
- .map_err(|e| *e)?
- .next_sibling()
- .ok_or(NodeNotFound);
- *last_node_was_static_text = false;
+ ids.push(placeholder.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
}
dioxus_core::DynamicNode::Component(comp) => {
let scope = comp.mounted_scope().ok_or(VNodeNotInitialized)?;
self.rehydrate_scope(
- dom.get_scope(scope).unwrap(),
- current_child,
- hydrated,
+ dom.get_scope(scope).ok_or(VNodeNotInitialized)?,
dom,
- last_node_was_static_text,
+ ids,
+ to_mount,
)?;
}
dioxus_core::DynamicNode::Fragment(fragment) => {
for vnode in *fragment {
- self.rehydrate_vnode(
- current_child,
- hydrated,
- dom,
- vnode,
- last_node_was_static_text,
- )?;
+ self.rehydrate_vnode(dom, vnode, ids, to_mount)?;
}
}
}