mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-09-20 22:31:58 +00:00
make hydration more resilient using ids to hydrate
This commit is contained in:
parent
cd019db9ef
commit
2d7d721fd6
8 changed files with 255 additions and 324 deletions
|
@ -27,9 +27,7 @@ fn app(cx: Scope<AppProps>) -> 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!" }
|
||||
|
|
|
@ -123,8 +123,42 @@ 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() {
|
||||
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 = 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[parseInt(split[1])] = currentNode.nextSibling;
|
||||
}
|
||||
currentNode = treeWalker.nextNode();
|
||||
}
|
||||
}
|
||||
export function get_node(id) {
|
||||
return nodes[id];
|
||||
|
@ -181,7 +215,7 @@ mod js {
|
|||
pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn set_node(id: u32, node: Node);
|
||||
pub fn hydrate();
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn get_node(id: u32) -> Node;
|
||||
|
|
|
@ -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(usize),
|
||||
/// A marker for where to insert a node id for a root node
|
||||
RootNodeMarker(usize),
|
||||
}
|
||||
|
||||
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<Self, std::fmt::Error> {
|
||||
pub fn from_template(template: &VNode, prerender: bool) -> Result<Self, std::fmt::Error> {
|
||||
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<usize>,
|
||||
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 last_dyn_attr_id = None;
|
||||
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));
|
||||
last_dyn_attr_id = Some(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -113,12 +120,25 @@ impl StringCache {
|
|||
inside_style_tag: true,
|
||||
});
|
||||
write!(chain, "\"")?;
|
||||
} else if has_dynamic_attrs {
|
||||
} else if last_dyn_attr_id.is_some() {
|
||||
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 {
|
||||
write!(chain, " data-node-hydration=\"")?;
|
||||
if let Some(last_dyn_attr_id) = last_dyn_attr_id {
|
||||
chain
|
||||
.segments
|
||||
.push(Segment::AttributeNodeMarker(last_dyn_attr_id));
|
||||
} else if is_root {
|
||||
chain.segments.push(Segment::RootNodeMarker(root_idx));
|
||||
}
|
||||
write!(chain, "\"")?;
|
||||
}
|
||||
|
||||
if children.is_empty() && tag_is_self_closing(tag) {
|
||||
write!(chain, "/>")?;
|
||||
} else {
|
||||
|
@ -126,12 +146,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 last_dyn_attr_id.is_some() {
|
||||
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, "</{tag}>")?;
|
||||
}
|
||||
|
|
|
@ -69,7 +69,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 +80,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 +99,12 @@ impl Renderer {
|
|||
} else {
|
||||
write_attribute(buf, attr)?;
|
||||
}
|
||||
|
||||
if self.pre_render {
|
||||
if let AttributeValue::Listener(_) = &attr.value {
|
||||
accumulated_listeners.push(attr.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
Segment::Node(idx) => match &template.dynamic_nodes[*idx] {
|
||||
DynamicNode::Component(node) => {
|
||||
|
@ -115,7 +127,10 @@ 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, "<!--#-->")?;
|
||||
let node_id = text
|
||||
.mounted_element()
|
||||
.expect("Text nodes must be mounted before rendering");
|
||||
write!(buf, "<!--node-id{}-->", node_id.0)?;
|
||||
}
|
||||
|
||||
write!(
|
||||
|
@ -134,9 +149,12 @@ impl Renderer {
|
|||
}
|
||||
}
|
||||
|
||||
DynamicNode::Placeholder(_el) => {
|
||||
DynamicNode::Placeholder(el) => {
|
||||
if self.pre_render {
|
||||
write!(buf, "<pre></pre>")?;
|
||||
let id = el
|
||||
.mounted_element()
|
||||
.expect("Elements must be mounted before rendering");
|
||||
write!(buf, "<pre data-node-hydration={}></pre>", id.0)?;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -175,6 +193,22 @@ impl Renderer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
Segment::AttributeNodeMarker(idx) => {
|
||||
let id = template.dynamic_attrs[*idx].mounted_element();
|
||||
// first write the id
|
||||
write!(buf, "{}", id.0)?;
|
||||
// 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(idx) => {
|
||||
let id = template.root_ids.borrow()[*idx];
|
||||
write!(buf, "{}", id.0)?;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -192,7 +226,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" }
|
||||
|
|
120
packages/ssr/tests/hydration.rs
Normal file
120
packages/ssr/tests/hydration.rs
Normal file
|
@ -0,0 +1,120 @@
|
|||
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#"<div style="width:100px;" data-node-hydration="1"></div>"#
|
||||
);
|
||||
}
|
||||
|
||||
#[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#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2"></div></div>"#
|
||||
);
|
||||
}
|
||||
|
||||
#[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#"<div style="width:100px;" data-node-hydration="1"><div data-node-hydration="2,click:1"></div></div>"#
|
||||
);
|
||||
|
||||
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#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2,click:1"></div></div>"#
|
||||
);
|
||||
}
|
||||
|
||||
#[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#"<div data-node-hydration="1"><!--node-id2-->hello<!--#--></div>"#
|
||||
);
|
||||
|
||||
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#"<div data-node-hydration="1"><!--node-id3-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
|
||||
);
|
||||
}
|
||||
|
||||
#[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#"<h1 data-node-hydration="1"><!--node-id2-->High-Five counter: 0<!--#--></h1><button data-node-hydration="3,click:1">Up high!</button><button data-node-hydration="4,click:1">Down low!</button>"#
|
||||
);
|
||||
}
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -6,286 +6,10 @@ use dioxus_html::event_bubbles;
|
|||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{Comment, Node};
|
||||
|
||||
#[derive(Debug, Copy, Clone)]
|
||||
pub enum RehydrationError {
|
||||
NodeTypeMismatch,
|
||||
NodeNotFound,
|
||||
VNodeNotInitialized,
|
||||
}
|
||||
use RehydrationError::*;
|
||||
|
||||
fn set_node(hydrated: &mut Vec<bool>, 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;
|
||||
}
|
||||
}
|
||||
|
||||
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::<Node>()
|
||||
.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;
|
||||
|
||||
// Recursively rehydrate the dom from the VirtualDom
|
||||
self.rehydrate_scope(
|
||||
root_scope,
|
||||
&mut root,
|
||||
&mut hydrated,
|
||||
dom,
|
||||
&mut last_node_was_static_text,
|
||||
)?;
|
||||
|
||||
self.interpreter.flush();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn rehydrate_scope(
|
||||
&mut self,
|
||||
scope: &ScopeState,
|
||||
current_child: &mut Result<Node, RehydrationError>,
|
||||
hydrated: &mut Vec<bool>,
|
||||
dom: &VirtualDom,
|
||||
last_node_was_static_text: &mut bool,
|
||||
) -> 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,
|
||||
)
|
||||
}
|
||||
|
||||
fn rehydrate_vnode(
|
||||
&mut self,
|
||||
current_child: &mut Result<Node, RehydrationError>,
|
||||
hydrated: &mut Vec<bool>,
|
||||
dom: &VirtualDom,
|
||||
vnode: &VNode,
|
||||
last_node_was_static_text: &mut bool,
|
||||
) -> 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,
|
||||
)?;
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn rehydrate_template_node(
|
||||
&mut self,
|
||||
current_child: &mut Result<Node, RehydrationError>,
|
||||
hydrated: &mut Vec<bool>,
|
||||
dom: &VirtualDom,
|
||||
vnode: &VNode,
|
||||
node: &TemplateNode,
|
||||
last_node_was_static_text: &mut bool,
|
||||
) -> 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;
|
||||
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..];
|
||||
self.interpreter.new_event_listener(
|
||||
event_name,
|
||||
id.0 as u32,
|
||||
event_bubbles(event_name) as u8,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
if let Some(id) = mounted_id {
|
||||
set_node(hydrated, id, current_child.clone()?);
|
||||
}
|
||||
if !children.is_empty() {
|
||||
let mut children_current_child = current_child
|
||||
.as_mut()
|
||||
.map_err(|e| *e)?
|
||||
.first_child()
|
||||
.ok_or(NodeNotFound)?
|
||||
.dyn_into::<Node>()
|
||||
.map_err(|_| NodeTypeMismatch);
|
||||
for child in *children {
|
||||
self.rehydrate_template_node(
|
||||
&mut children_current_child,
|
||||
hydrated,
|
||||
dom,
|
||||
vnode,
|
||||
child,
|
||||
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 = 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,
|
||||
)?;
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn rehydrate_dynamic_node(
|
||||
&mut self,
|
||||
current_child: &mut Result<Node, RehydrationError>,
|
||||
hydrated: &mut Vec<bool>,
|
||||
dom: &VirtualDom,
|
||||
dynamic: &DynamicNode,
|
||||
last_node_was_static_text: &mut bool,
|
||||
) -> 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::<Comment>());
|
||||
}
|
||||
*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::<Comment>());
|
||||
}
|
||||
*current_child = current_child
|
||||
.as_mut()
|
||||
.map_err(|e| *e)?
|
||||
.next_sibling()
|
||||
.ok_or(NodeNotFound);
|
||||
|
||||
*last_node_was_static_text = false;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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,
|
||||
last_node_was_static_text,
|
||||
)?;
|
||||
}
|
||||
dioxus_core::DynamicNode::Fragment(fragment) => {
|
||||
for vnode in *fragment {
|
||||
self.rehydrate_vnode(
|
||||
current_child,
|
||||
hydrated,
|
||||
dom,
|
||||
vnode,
|
||||
last_node_was_static_text,
|
||||
)?;
|
||||
}
|
||||
}
|
||||
}
|
||||
Ok(())
|
||||
pub fn rehydrate(&mut self) {
|
||||
dioxus_interpreter_js::hydrate()
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue