Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix hydration after suspense

Browse source
This commit is contained in:
Evan Almloff 2023-12-27 10:17:18 -06:00
parent 2d7d721fd6
commit e2646e655e
9 changed files with 250 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/fullstack/src/adapters/axum_adapter.rs
View file

@ -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<Body>| {
let mut service = crate::server_fn_service(Default::default(), func);
async move {

9
packages/interpreter/src/sledgehammer_bindings.rs
View file

@ -123,13 +123,14 @@ mod js {
export function save_template(nodes, tmpl_id) {
templates[tmpl_id] = nodes;
}
export function hydrate() {
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 = parseInt(split[0]);
const id = ids[parseInt(split[0])];
nodes[id] = hydrateNode;
console.log("hydrating node", hydrateNode, id);
if (split.length > 1) {
@ -155,7 +156,7 @@ mod js {
const split = id.split('node-id');
if (split.length > 1) {
console.log("hydrating text", currentNode.nextSibling, id);
nodes[parseInt(split[1])] = currentNode.nextSibling;
nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
}
currentNode = treeWalker.nextNode();
}
@ -215,7 +216,7 @@ mod js {
pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
#[wasm_bindgen]
pub fn hydrate();
pub fn hydrate(ids: Vec<u32>);
#[wasm_bindgen]
pub fn get_node(id: u32) -> Node;

22
packages/ssr/src/cache.rs
View file

@ -28,9 +28,9 @@ 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),
AttributeNodeMarker,
/// A marker for where to insert a node id for a root node
RootNodeMarker(usize),
RootNodeMarker,
}
impl std::fmt::Write for StringChain {
@ -82,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 last_dyn_attr_id = None;
let mut has_dyn_attrs = false;
for attr in *attrs {
match attr {
TemplateAttribute::Static {
@ -105,7 +105,7 @@ impl StringCache {
TemplateAttribute::Dynamic { id: index } => {
let index = *index;
chain.segments.push(Segment::Attr(index));
last_dyn_attr_id = Some(index);
has_dyn_attrs = true
}
}
}
@ -120,21 +120,19 @@ impl StringCache {
inside_style_tag: true,
});
write!(chain, "\"")?;
} else if last_dyn_attr_id.is_some() {
} 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 {
if prerender && (has_dyn_attrs || is_root) {
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));
if has_dyn_attrs {
chain.segments.push(Segment::AttributeNodeMarker);
} else if is_root {
chain.segments.push(Segment::RootNodeMarker(root_idx));
chain.segments.push(Segment::RootNodeMarker);
}
write!(chain, "\"")?;
}
@ -146,7 +144,7 @@ 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 last_dyn_attr_id.is_some() {
} else if has_dyn_attrs {
chain.segments.push(Segment::InnerHtmlMarker);
}

34
packages/ssr/src/renderer.rs
View file

@ -28,6 +28,9 @@ pub struct Renderer {
/// A cache of templates that have been rendered
template_cache: HashMap<&'static str, Arc<StringCache>>,
/// 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)?
};
@ -127,10 +131,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 {
let node_id = text
.mounted_element()
.expect("Text nodes must be mounted before rendering");
write!(buf, "<!--node-id{}-->", node_id.0)?;
write!(buf, "<!--node-id{}-->", self.dynamic_node_id)?;
self.dynamic_node_id += 1;
}
write!(
@ -149,12 +151,14 @@ impl Renderer {
}
}
DynamicNode::Placeholder(el) => {
DynamicNode::Placeholder(_) => {
if self.pre_render {
let id = el
.mounted_element()
.expect("Elements must be mounted before rendering");
write!(buf, "<pre data-node-hydration={}></pre>", id.0)?;
write!(
buf,
"<pre data-node-hydration={}></pre>",
self.dynamic_node_id
)?;
self.dynamic_node_id += 1;
}
}
},
@ -194,10 +198,10 @@ impl Renderer {
}
}
Segment::AttributeNodeMarker(idx) => {
let id = template.dynamic_attrs[*idx].mounted_element();
Segment::AttributeNodeMarker => {
// first write the id
write!(buf, "{}", id.0)?;
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..])?;
@ -205,9 +209,9 @@ impl Renderer {
}
}
Segment::RootNodeMarker(idx) => {
let id = template.root_ids.borrow()[*idx];
write!(buf, "{}", id.0)?;
Segment::RootNodeMarker => {
write!(buf, "{}", self.dynamic_node_id)?;
self.dynamic_node_id += 1
}
}
}

92
packages/ssr/tests/hydration.rs
View file

@ -11,7 +11,7 @@ fn root_ids() {
assert_eq!(
dioxus_ssr::pre_render(&dom),
r#"<div style="width:100px;" data-node-hydration="1"></div>"#
r#"<div style="width:100px;" data-node-hydration="0"></div>"#
);
}
@ -29,7 +29,7 @@ fn dynamic_attributes() {
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>"#
r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1"></div></div>"#
);
}
@ -46,7 +46,7 @@ fn listeners() {
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>"#
r#"<div style="width:100px;" data-node-hydration="0"><div data-node-hydration="1,click:1"></div></div>"#
);
fn app2(cx: Scope) -> Element {
@ -61,7 +61,7 @@ fn listeners() {
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>"#
r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1,click:1"></div></div>"#
);
}
@ -79,7 +79,7 @@ fn text_nodes() {
assert_eq!(
dioxus_ssr::pre_render(&dom),
r#"<div data-node-hydration="1"><!--node-id2-->hello<!--#--></div>"#
r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
);
fn app2(cx: Scope) -> Element {
@ -94,7 +94,85 @@ fn text_nodes() {
assert_eq!(
dioxus_ssr::pre_render(&dom),
r#"<div data-node-hydration="1"><!--node-id3-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
r#"<div data-node-hydration="0"><!--node-id1-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
);
}
#[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#"<div data-node-hydration="0">hello</div>"#
);
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#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
);
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#"<div style="width:1;" data-node-hydration="0"></div>"#
);
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#"<!--node-id0-->1<!--#--><!--node-id1-->1<!--#-->"#
);
}
@ -115,6 +193,6 @@ fn hello_world_hydrates() {
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>"#
r#"<h1 data-node-hydration="0"><!--node-id1-->High-Five counter: 0<!--#--></h1><button data-node-hydration="2,click:1">Up high!</button><button data-node-hydration="3,click:1">Down low!</button>"#
);
}

4
packages/ssr/tests/simple.rs
View file

@ -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!(

3
packages/web/src/dom.rs
View file

@ -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,

28
packages/web/src/lib.rs
View file

@ -215,21 +215,23 @@ 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 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);
{
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. {:?}", err);
tracing::error!("Rebuild DOM into element from scratch");
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();

116
packages/web/src/rehydrate.rs
View file

@ -6,10 +6,122 @@ use dioxus_html::event_bubbles;
use wasm_bindgen::JsCast;
use web_sys::{Comment, Node};
#[derive(Debug)]
pub enum RehydrationError {
VNodeNotInitialized,
}
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) {
dioxus_interpreter_js::hydrate()
pub fn rehydrate(&mut self, dom: &VirtualDom) -> Result<(), RehydrationError> {
let root_scope = dom.base_scope();
let mut ids = Vec::new();
// Recursively rehydrate the dom from the VirtualDom
self.rehydrate_scope(root_scope, dom, &mut ids)?;
dioxus_interpreter_js::hydrate(ids);
Ok(())
}
fn rehydrate_scope(
&mut self,
scope: &ScopeState,
dom: &VirtualDom,
ids: &mut Vec<u32>,
) -> Result<(), RehydrationError> {
let vnode = match scope.root_node() {
dioxus_core::RenderReturn::Ready(ready) => ready,
_ => return Err(VNodeNotInitialized),
};
self.rehydrate_vnode(dom, vnode, ids)
}
fn rehydrate_vnode(
&mut self,
dom: &VirtualDom,
vnode: &VNode,
ids: &mut Vec<u32>,
) -> Result<(), RehydrationError> {
for (i, root) in vnode.template.get().roots.iter().enumerate() {
self.rehydrate_template_node(
dom,
vnode,
root,
ids,
Some(*vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?),
)?;
}
Ok(())
}
fn rehydrate_template_node(
&mut self,
dom: &VirtualDom,
vnode: &VNode,
node: &TemplateNode,
ids: &mut Vec<u32>,
root_id: Option<ElementId>,
) -> Result<(), RehydrationError> {
tracing::trace!("rehydrate template node: {:?}", node);
match node {
TemplateNode::Element {
children, attrs, ..
} => {
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);
}
}
if let Some(id) = mounted_id {
ids.push(id.0 as u32);
}
if !children.is_empty() {
for child in *children {
self.rehydrate_template_node(dom, vnode, child, ids, None)?;
}
}
}
TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids)?;
}
_ => {}
}
Ok(())
}
fn rehydrate_dynamic_node(
&mut self,
dom: &VirtualDom,
dynamic: &DynamicNode,
ids: &mut Vec<u32>,
) -> Result<(), RehydrationError> {
tracing::trace!("rehydrate dynamic node: {:?}", dynamic);
match dynamic {
dioxus_core::DynamicNode::Text(text) => {
ids.push(text.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
}
dioxus_core::DynamicNode::Placeholder(placeholder) => {
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).ok_or(VNodeNotInitialized)?, dom, ids)?;
}
dioxus_core::DynamicNode::Fragment(fragment) => {
for vnode in *fragment {
self.rehydrate_vnode(dom, vnode, ids)?;
}
}
}
Ok(())
}
}