implement hydration
This commit is contained in:
Evan Almloff committed
1 parent
e9dd5a94c7
commit
696109db10
6 files changed
+280
-168
No files matched your search
+236
-132
@@ -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(())
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user