mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +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);
|
let eval = use_eval(cx);
|
||||||
|
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
div {
|
div { "Server state: {state}" }
|
||||||
"Server state: {state}"
|
|
||||||
}
|
|
||||||
h1 { "High-Five counter: {count}" }
|
h1 { "High-Five counter: {count}" }
|
||||||
button { onclick: move |_| count += 1, "Up high!" }
|
button { onclick: move |_| count += 1, "Up high!" }
|
||||||
button { onclick: move |_| count -= 1, "Down low!" }
|
button { onclick: move |_| count -= 1, "Down low!" }
|
||||||
|
|
|
@ -123,8 +123,42 @@ mod js {
|
||||||
export function save_template(nodes, tmpl_id) {
|
export function save_template(nodes, tmpl_id) {
|
||||||
templates[tmpl_id] = nodes;
|
templates[tmpl_id] = nodes;
|
||||||
}
|
}
|
||||||
export function set_node(id, node) {
|
export function hydrate() {
|
||||||
nodes[id] = node;
|
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) {
|
export function get_node(id) {
|
||||||
return nodes[id];
|
return nodes[id];
|
||||||
|
@ -181,7 +215,7 @@ mod js {
|
||||||
pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
|
pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
|
||||||
|
|
||||||
#[wasm_bindgen]
|
#[wasm_bindgen]
|
||||||
pub fn set_node(id: u32, node: Node);
|
pub fn hydrate();
|
||||||
|
|
||||||
#[wasm_bindgen]
|
#[wasm_bindgen]
|
||||||
pub fn get_node(id: u32) -> Node;
|
pub fn get_node(id: u32) -> Node;
|
||||||
|
|
|
@ -27,6 +27,10 @@ pub enum Segment {
|
||||||
},
|
},
|
||||||
/// A marker for where to insert a dynamic inner html
|
/// A marker for where to insert a dynamic inner html
|
||||||
InnerHtmlMarker,
|
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 {
|
impl std::fmt::Write for StringChain {
|
||||||
|
@ -41,13 +45,13 @@ impl std::fmt::Write for StringChain {
|
||||||
}
|
}
|
||||||
|
|
||||||
impl StringCache {
|
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 chain = StringChain::default();
|
||||||
|
|
||||||
let mut cur_path = vec![];
|
let mut cur_path = vec![];
|
||||||
|
|
||||||
for (root_idx, root) in template.template.get().roots.iter().enumerate() {
|
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 {
|
Ok(Self {
|
||||||
|
@ -60,6 +64,8 @@ impl StringCache {
|
||||||
root: &TemplateNode,
|
root: &TemplateNode,
|
||||||
cur_path: &mut Vec<usize>,
|
cur_path: &mut Vec<usize>,
|
||||||
root_idx: usize,
|
root_idx: usize,
|
||||||
|
is_root: bool,
|
||||||
|
prerender: bool,
|
||||||
chain: &mut StringChain,
|
chain: &mut StringChain,
|
||||||
) -> Result<(), std::fmt::Error> {
|
) -> Result<(), std::fmt::Error> {
|
||||||
match root {
|
match root {
|
||||||
|
@ -76,7 +82,7 @@ impl StringCache {
|
||||||
// we need to collect the inner html and write it at the end
|
// we need to collect the inner html and write it at the end
|
||||||
let mut inner_html = None;
|
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
|
// 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 {
|
for attr in *attrs {
|
||||||
match attr {
|
match attr {
|
||||||
TemplateAttribute::Static {
|
TemplateAttribute::Static {
|
||||||
|
@ -97,8 +103,9 @@ impl StringCache {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
TemplateAttribute::Dynamic { id: index } => {
|
TemplateAttribute::Dynamic { id: index } => {
|
||||||
chain.segments.push(Segment::Attr(*index));
|
let index = *index;
|
||||||
has_dynamic_attrs = true;
|
chain.segments.push(Segment::Attr(index));
|
||||||
|
last_dyn_attr_id = Some(index);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -113,12 +120,25 @@ impl StringCache {
|
||||||
inside_style_tag: true,
|
inside_style_tag: true,
|
||||||
});
|
});
|
||||||
write!(chain, "\"")?;
|
write!(chain, "\"")?;
|
||||||
} else if has_dynamic_attrs {
|
} else if last_dyn_attr_id.is_some() {
|
||||||
chain.segments.push(Segment::StyleMarker {
|
chain.segments.push(Segment::StyleMarker {
|
||||||
inside_style_tag: false,
|
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) {
|
if children.is_empty() && tag_is_self_closing(tag) {
|
||||||
write!(chain, "/>")?;
|
write!(chain, "/>")?;
|
||||||
} else {
|
} else {
|
||||||
|
@ -126,12 +146,12 @@ impl StringCache {
|
||||||
// Write the static inner html, or insert a marker if dynamic inner html is possible
|
// Write the static inner html, or insert a marker if dynamic inner html is possible
|
||||||
if let Some(inner_html) = inner_html {
|
if let Some(inner_html) = inner_html {
|
||||||
chain.write_str(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);
|
chain.segments.push(Segment::InnerHtmlMarker);
|
||||||
}
|
}
|
||||||
|
|
||||||
for child in *children {
|
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}>")?;
|
write!(chain, "</{tag}>")?;
|
||||||
}
|
}
|
||||||
|
|
|
@ -69,7 +69,10 @@ impl Renderer {
|
||||||
let entry = self
|
let entry = self
|
||||||
.template_cache
|
.template_cache
|
||||||
.entry(template.template.get().name)
|
.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();
|
.clone();
|
||||||
|
|
||||||
let mut inner_html = None;
|
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
|
// 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();
|
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() {
|
for segment in entry.segments.iter() {
|
||||||
match segment {
|
match segment {
|
||||||
Segment::Attr(idx) => {
|
Segment::Attr(idx) => {
|
||||||
|
@ -93,6 +99,12 @@ impl Renderer {
|
||||||
} else {
|
} else {
|
||||||
write_attribute(buf, attr)?;
|
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] {
|
Segment::Node(idx) => match &template.dynamic_nodes[*idx] {
|
||||||
DynamicNode::Component(node) => {
|
DynamicNode::Component(node) => {
|
||||||
|
@ -115,7 +127,10 @@ impl Renderer {
|
||||||
DynamicNode::Text(text) => {
|
DynamicNode::Text(text) => {
|
||||||
// in SSR, we are concerned that we can't hunt down the right text node since they might get merged
|
// in SSR, we are concerned that we can't hunt down the right text node since they might get merged
|
||||||
if self.pre_render {
|
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!(
|
write!(
|
||||||
|
@ -134,9 +149,12 @@ impl Renderer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
DynamicNode::Placeholder(_el) => {
|
DynamicNode::Placeholder(el) => {
|
||||||
if self.pre_render {
|
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! {
|
render! {
|
||||||
div { class: "asdasdasd", class: "asdasdasd", id: "id-{dynamic}",
|
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 { "nest 1" }
|
||||||
div {}
|
div {}
|
||||||
div { "nest 2" }
|
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 {
|
fn app(cx: Scope) -> Element {
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
|
div { h1 { "thing 1" } }
|
||||||
|
div { h2 { "thing 2" } }
|
||||||
div {
|
div {
|
||||||
h1 { "thing 1" }
|
h2 { "thing 2" }
|
||||||
}
|
|
||||||
div {
|
|
||||||
h2 { "thing 2"}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
h2 { "thing 2"}
|
|
||||||
"asd"
|
"asd"
|
||||||
"asd"
|
"asd"
|
||||||
Bapp {}
|
Bapp {}
|
||||||
|
@ -27,14 +23,10 @@ fn app(cx: Scope) -> Element {
|
||||||
#[allow(non_snake_case)]
|
#[allow(non_snake_case)]
|
||||||
fn Bapp(cx: Scope) -> Element {
|
fn Bapp(cx: Scope) -> Element {
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
|
div { h1 { "thing 1" } }
|
||||||
|
div { h2 { "thing 2" } }
|
||||||
div {
|
div {
|
||||||
h1 { "thing 1" }
|
h2 { "thing 2" }
|
||||||
}
|
|
||||||
div {
|
|
||||||
h2 { "thing 2"}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
h2 { "thing 2"}
|
|
||||||
"asd"
|
"asd"
|
||||||
"asd"
|
"asd"
|
||||||
}
|
}
|
||||||
|
@ -60,6 +52,6 @@ fn main() {
|
||||||
.unwrap()
|
.unwrap()
|
||||||
.set_inner_html(&pre);
|
.set_inner_html(&pre);
|
||||||
|
|
||||||
// now rehydtrate
|
// now rehydrate
|
||||||
dioxus_web::launch_with_props(app, (), Config::new().hydrate(true));
|
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
|
// todo: we need to split rebuild and initialize into two phases
|
||||||
// it's a waste to produce edits just to get the vdom loaded
|
// 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.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) {
|
// let edits = dom.rebuild();
|
||||||
tracing::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);
|
||||||
websys_dom.load_templates(&edits.templates);
|
// }
|
||||||
websys_dom.apply_edits(edits.edits);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let edits = dom.rebuild();
|
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
|
// Dequeue all of the events from the channel in send order
|
||||||
// todo: we should re-order these if possible
|
// todo: we should re-order these if possible
|
||||||
while let Some(evt) = res {
|
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);
|
dom.handle_event(evt.name.as_str(), evt.data, evt.element, evt.bubbles);
|
||||||
res = rx.try_next().transpose().unwrap().ok();
|
res = rx.try_next().transpose().unwrap().ok();
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,286 +6,10 @@ use dioxus_html::event_bubbles;
|
||||||
use wasm_bindgen::JsCast;
|
use wasm_bindgen::JsCast;
|
||||||
use web_sys::{Comment, Node};
|
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 {
|
impl WebsysDom {
|
||||||
// we're streaming in patches, but the nodes already exist
|
// 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
|
// 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> {
|
pub fn rehydrate(&mut self) {
|
||||||
let mut root = self
|
dioxus_interpreter_js::hydrate()
|
||||||
.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(())
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue