swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make hydration more resilient using ids to hydrate

Browse Source
This commit is contained in:
Evan Almloff committed 2023-12-19 16:02:07 -06:00
1 parent cd019db9ef
commit 2d7d721fd6
8 files changed
+255 -324
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ssr/src/cache.rs
+28 -8
View File
@@ -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}>")?;
}
packages/ssr/src/renderer.rs
+41 -5
View File
@@ -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" }