Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-09-21 14:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #811 from Demonthos/implement-hydration

Browse source 
Implement Hydration
This commit is contained in:
Jon Kelley 2023-01-31 22:47:53 -08:00 committed by GitHub
commit 741cbcbccc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 280 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/core/src/lib.rs
View file

@ -73,7 +73,8 @@ pub use crate::innerlude::{
fc_to_builder, AnyValue, Attribute, AttributeValue, BorrowedAttributeValue, CapturedError,
Component, DynamicNode, Element, ElementId, Event, Fragment, IntoDynNode, LazyNodes, Mutation,
Mutations, Properties, RenderReturn, Scope, ScopeId, ScopeState, Scoped, SuspenseContext,
TaskId, Template, TemplateAttribute, TemplateNode, VComponent, VNode, VText, VirtualDom,
TaskId, Template, TemplateAttribute, TemplateNode, VComponent, VNode, VPlaceholder, VText,
VirtualDom,
};
/// The purpose of this module is to alleviate imports of many common types

2
packages/web/Cargo.toml
View file

@ -88,4 +88,4 @@ dioxus = { path = "../dioxus", version = "0.3.0" }
wasm-bindgen-test = "0.3.29"
dioxus-ssr = { path = "../ssr", version = "0.3.0"}
wasm-logger = "0.2.0"
dioxus-web = { path = "." }
dioxus-web = { path = ".", features = ["hydrate"] }

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

@ -8,6 +8,7 @@
/// dioxus_web::launch(App, Config::new().hydrate(true).root_name("myroot"))
/// ```
pub struct Config {
#[cfg(feature = "hydrate")]
pub(crate) hydrate: bool,
pub(crate) rootname: String,
pub(crate) cached_strings: Vec<String>,
@ -17,6 +18,7 @@ pub struct Config {
impl Default for Config {
fn default() -> Self {
Self {
#[cfg(feature = "hydrate")]
hydrate: false,
rootname: "main".to_string(),
cached_strings: Vec::new(),
@ -33,6 +35,7 @@ impl Config {
Self::default()
}
#[cfg(feature = "hydrate")]
/// Enable SSR hydration
///
/// This enables Dioxus to pick up work from a pre-renderd HTML file. Hydration will completely skip over any async

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

@ -22,9 +22,11 @@ use crate::Config;
pub struct WebsysDom {
document: Document,
#[allow(dead_code)]
pub(crate) root: Element,
templates: FxHashMap<String, u32>,
max_template_id: u32,
interpreter: Channel,
pub(crate) interpreter: Channel,
}
pub struct UiEvent {
@ -72,10 +74,14 @@ impl WebsysDom {
}
}));
dioxus_interpreter_js::initilize(root.unchecked_into(), handler.as_ref().unchecked_ref());
dioxus_interpreter_js::initilize(
root.clone().unchecked_into(),
handler.as_ref().unchecked_ref(),
);
handler.forget();
Self {
document,
root,
interpreter,
templates: FxHashMap::default(),
max_template_id: 0,

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

@ -62,6 +62,8 @@ mod cache;
mod cfg;
mod dom;
mod hot_reload;
#[cfg(feature = "hydrate")]
mod rehydrate;
mod util;
// Currently disabled since it actually slows down immediate rendering
@ -179,17 +181,40 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
wasm_bindgen::intern(s);
}
let _should_hydrate = cfg.hydrate;
let (tx, mut rx) = futures_channel::mpsc::unbounded();
#[cfg(feature = "hydrate")]
let should_hydrate = cfg.hydrate;
#[cfg(not(feature = "hydrate"))]
let should_hydrate = false;
let mut websys_dom = dom::WebsysDom::new(cfg, tx);
log::info!("rebuilding app");
// if should_hydrate {
// } else {
{
if should_hydrate {
#[cfg(feature = "hydrate")]
{
// 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);
if let Err(err) = websys_dom.rehydrate(&dom) {
log::error!(
"Rehydration failed {:?}. Rebuild DOM into element from scratch",
&err
);
websys_dom.root.set_text_content(None);
let edits = dom.rebuild();
websys_dom.load_templates(&edits.templates);
websys_dom.apply_edits(edits.edits);
}
}
} else {
let edits = dom.rebuild();
websys_dom.load_templates(&edits.templates);
@ -249,30 +274,3 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
websys_dom.apply_edits(edits.edits);
}
}
// if should_hydrate {
// // 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 _ = dom.rebuild();
// #[cfg(feature = "hydrate")]
// #[allow(unused_variables)]
// if let Err(err) = websys_dom.rehydrate(&dom) {
// log::error!(
// "Rehydration failed {:?}. Rebuild DOM into element from scratch",
// &err
// );
// websys_dom.root.set_text_content(None);
// // errrrr we should split rebuild into two phases
// // one that initializes things and one that produces edits
// let edits = dom.rebuild();
// websys_dom.apply_edits(edits.edits);
// }
// } else {
// let edits = dom.rebuild();
// websys_dom.apply_edits(edits.template_mutations);
// websys_dom.apply_edits(edits.edits);
// }

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

@ -1,9 +1,13 @@
use crate::dom::WebsysDom;
use dioxus_core::{VNode, VirtualDom};
use dioxus_core::{
AttributeValue, DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VPlaceholder, VText,
VirtualDom,
};
use dioxus_html::event_bubbles;
use wasm_bindgen::JsCast;
use web_sys::{Comment, Element, Node, Text};
use web_sys::{Comment, Node};
#[derive(Debug)]
#[derive(Debug, Copy, Clone)]
pub enum RehydrationError {
NodeTypeMismatch,
NodeNotFound,
@ -11,163 +15,263 @@ pub enum RehydrationError {
}
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 root = self
let mut root = self
.root
.clone()
.dyn_into::<Node>()
.map_err(|_| NodeTypeMismatch)?;
.map_err(|_| NodeTypeMismatch)?
.first_child()
.ok_or(NodeNotFound);
let root_scope = dom.base_scope();
let root_node = root_scope.root_node();
let mut nodes = vec![root];
let mut counter = vec![0];
let mut hydrated = vec![true];
let mut last_node_was_text = false;
let mut last_node_was_static_text = false;
todo!()
// // Recursively rehydrate the dom from the VirtualDom
// self.rehydrate_single(
// &mut nodes,
// &mut counter,
// dom,
// root_node,
// &mut last_node_was_text,
// )
// 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_single(
fn rehydrate_scope(
&mut self,
nodes: &mut Vec<Node>,
place: &mut Vec<u32>,
scope: &ScopeState,
current_child: &mut Result<Node, RehydrationError>,
hydrated: &mut Vec<bool>,
dom: &VirtualDom,
node: &VNode,
last_node_was_text: &mut bool,
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.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> {
match node {
VNode::Text(t) => {
let node_id = t.id.get().ok_or(VNodeNotInitialized)?;
let cur_place = place.last_mut().unwrap();
// skip over the comment element
if *last_node_was_text {
if cfg!(debug_assertions) {
let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
let node_text = node.dyn_into::<Comment>().unwrap();
assert_eq!(node_text.data(), "spacer");
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.get();
mounted_id = Some(id);
let name = attribute.name;
if let AttributeValue::Listener(_) = value {
self.interpreter.new_event_listener(
&name[2..],
id.0 as u32,
event_bubbles(name) as u8,
);
}
}
*cur_place += 1;
}
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(())
}
let node = nodes
.last()
.unwrap()
.child_nodes()
.get(*cur_place)
.ok_or(NodeNotFound)?;
let _text_el = node.dyn_ref::<Text>().ok_or(NodeTypeMismatch)?;
// in debug we make sure the text is the same
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> {
match dynamic {
dioxus_core::DynamicNode::Text(VText { id, .. }) => {
// skip comment separator before node
if cfg!(debug_assertions) {
let contents = _text_el.node_value().unwrap();
assert_eq!(t.text, contents);
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_text = true;
self.interpreter.SetNode(node_id.0, node);
*cur_place += 1;
}
VNode::Element(vel) => {
let node_id = vel.id.get().ok_or(VNodeNotInitialized)?;
let cur_place = place.last_mut().unwrap();
let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
self.interpreter.SetNode(node_id.0, node.clone());
*cur_place += 1;
nodes.push(node.clone());
place.push(0);
// we cant have the last node be text
let mut last_node_was_text = false;
for child in vel.children {
self.rehydrate_single(nodes, place, dom, child, &mut last_node_was_text)?;
}
for listener in vel.listeners {
let id = listener.mounted_node.get().unwrap();
self.interpreter.NewEventListener(
listener.event,
Some(id.as_u64()),
self.handler.as_ref().unchecked_ref(),
event_bubbles(listener.event),
);
}
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();
nodes.pop();
set_node(
hydrated,
id.get().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) {
let el = node.dyn_ref::<Element>().unwrap();
let name = el.tag_name().to_lowercase();
assert_eq!(name, vel.tag);
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(VPlaceholder { id, .. }) => {
set_node(
hydrated,
id.get().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.scope.get().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,
)?;
}
}
VNode::Placeholder(el) => {
let node_id = el.id.get().ok_or(VNodeNotInitialized)?;
let cur_place = place.last_mut().unwrap();
let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
self.interpreter.SetNode(node_id.0, node);
// self.nodes[node_id.0] = Some(node);
*cur_place += 1;
}
VNode::Fragment(el) => {
for el in el.children {
self.rehydrate_single(nodes, place, dom, el, last_node_was_text)?;
}
}
VNode::Component(el) => {
let scope = dom.get_scope(el.scope.get().unwrap()).unwrap();
let node = scope.root_node();
todo!()
// self.rehydrate_single(nodes, place, dom, node, last_node_was_text)?;
}
VNode::TemplateRef(_) => todo!(),
}
Ok(())
}