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

wip: fragment diffing working

Browse Source
This commit is contained in:
Jonathan Kelley committed 2022-11-23 23:15:01 -08:00
1 parent 0266dfdc05
commit 4dd9a616a5
13 files changed
+489 -258
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/core/src/create.rs
+145 -111
View File
@@ -5,7 +5,7 @@ use crate::mutations::Mutation::*;
use crate::nodes::VNode;
use crate::nodes::{DynamicNode, TemplateNode};
use crate::virtual_dom::VirtualDom;
use crate::{AttributeValue, ScopeId, SuspenseContext, TemplateAttribute};
use crate::{AttributeValue, ElementId, ScopeId, SuspenseContext, TemplateAttribute};
impl<'b: 'static> VirtualDom {
/// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
@@ -36,120 +36,140 @@ impl<'b: 'static> VirtualDom {
let mut on_stack = 0;
for (root_idx, root) in template.template.roots.iter().enumerate() {
// We might need to generate an ID for the root node
on_stack += match root {
TemplateNode::Element { .. } | TemplateNode::Text(_) => {
self.mutations.push(LoadTemplate {
name: template.template.id,
index: root_idx,
});
1
}
TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
match &template.dynamic_nodes[*id] {
DynamicNode::Fragment(frag) => match frag {
VFragment::Empty(slot) => {
let id =
self.next_element(template, template.template.node_paths[*id]);
slot.set(id);
self.mutations.push(CreatePlaceholder { id });
1
}
VFragment::NonEmpty(_) => self.create_dynamic_node(
template,
&template.dynamic_nodes[*id],
*id,
),
},
DynamicNode::Component { .. } => {
self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
}
// a dynamic text node doesn't replace a template node, instead we create it on the fly
DynamicNode::Text(VText { id: slot, value }) => {
let id = self.next_element(template, template.template.node_paths[*id]);
slot.set(id);
self.mutations.push(CreateTextNode { value, id });
1
}
DynamicNode::Fragment(VFragment::Empty(slot)) => {
let id = self.next_element(template, template.template.node_paths[*id]);
slot.set(id);
self.mutations.push(CreatePlaceholder { id });
1
}
DynamicNode::Fragment(VFragment::NonEmpty(_))
| DynamicNode::Component { .. } => {
self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
}
}
}
TemplateNode::Element { .. } | TemplateNode::Text(_) => {
let this_id = self.next_element(template, &[]);
template.root_ids[root_idx].set(this_id);
self.mutations.push(LoadTemplate {
name: template.template.id,
index: root_idx,
id: this_id,
});
// we're on top of a node that has a dynamic attribute for a descendant
// Set that attribute now before the stack gets in a weird state
while let Some((mut attr_id, path)) =
dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
{
// if attribute is on a root node, then we've already created the element
// Else, it's deep in the template and we should create a new id for it
let id = match path.len() {
1 => this_id,
_ => self.next_element(template, template.template.attr_paths[attr_id]),
};
loop {
let attribute = template.dynamic_attrs.get(attr_id).unwrap();
attribute.mounted_element.set(id);
match &attribute.value {
AttributeValue::Text(value) => self.mutations.push(SetAttribute {
name: attribute.name,
value: *value,
ns: attribute.namespace,
id,
}),
AttributeValue::Bool(value) => {
self.mutations.push(SetBoolAttribute {
name: attribute.name,
value: *value,
id,
})
}
AttributeValue::Listener(_) => {
self.mutations.push(NewEventListener {
// all listeners start with "on"
event_name: &attribute.name[2..],
scope: cur_scope,
id,
})
}
AttributeValue::Float(_) => todo!(),
AttributeValue::Int(_) => todo!(),
AttributeValue::Any(_) => todo!(),
AttributeValue::None => todo!(),
}
// Only push the dynamic attributes forward if they match the current path (same element)
match dynamic_attrs.next_if(|(_, p)| *p == path) {
Some((next_attr_id, _)) => attr_id = next_attr_id,
None => break,
}
}
}
// We're on top of a node that has a dynamic child for a descendant
// Skip any node that's a root
let mut start = None;
let mut end = None;
// Collect all the dynamic nodes below this root
// We assign the start and end of the range of dynamic nodes since they area ordered in terms of tree path
//
// [0]
// [1, 1] <---|
// [1, 1, 1] <---| these are the range of dynamic nodes below root 1
// [1, 1, 2] <---|
// [2]
//
// We collect each range and then create them and replace the placeholder in the template
while let Some((idx, p)) =
dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8)
{
if p.len() == 1 {
continue;
}
if start.is_none() {
start = Some(idx);
}
end = Some(idx);
}
//
if let (Some(start), Some(end)) = (start, end) {
for idx in start..=end {
let node = &template.dynamic_nodes[idx];
let m = self.create_dynamic_node(template, node, idx);
if m > 0 {
self.mutations.push(ReplacePlaceholder {
m,
path: &template.template.node_paths[idx][1..],
});
}
}
}
// elements create only one node :-)
1
}
};
// we're on top of a node that has a dynamic attribute for a descendant
// Set that attribute now before the stack gets in a weird state
while let Some((mut attr_id, path)) =
dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
{
let id = self.next_element(template, template.template.attr_paths[attr_id]);
self.mutations.push(AssignId {
path: &path[1..],
id,
});
loop {
let attribute = template.dynamic_attrs.get(attr_id).unwrap();
attribute.mounted_element.set(id);
match &attribute.value {
AttributeValue::Text(value) => self.mutations.push(SetAttribute {
name: attribute.name,
value: *value,
ns: attribute.namespace,
id,
}),
AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute {
name: attribute.name,
value: *value,
id,
}),
AttributeValue::Listener(_) => self.mutations.push(NewEventListener {
// all listeners start with "on"
event_name: &attribute.name[2..],
scope: cur_scope,
id,
}),
AttributeValue::Float(_) => todo!(),
AttributeValue::Int(_) => todo!(),
AttributeValue::Any(_) => todo!(),
AttributeValue::None => todo!(),
}
// Only push the dynamic attributes forward if they match the current path (same element)
match dynamic_attrs.next_if(|(_, p)| *p == path) {
Some((next_attr_id, _)) => attr_id = next_attr_id,
None => break,
}
}
}
// We're on top of a node that has a dynamic child for a descendant
// Skip any node that's a root
let mut start = None;
let mut end = None;
while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) {
if p.len() == 1 {
continue;
}
if start.is_none() {
start = Some(idx);
}
end = Some(idx);
}
if let (Some(start), Some(end)) = (start, end) {
for idx in start..=end {
let node = &template.dynamic_nodes[idx];
let m = self.create_dynamic_node(template, node, idx);
if m > 0 {
self.mutations.push(ReplacePlaceholder {
m,
path: &template.template.node_paths[idx][1..],
});
}
}
}
}
on_stack
@@ -196,8 +216,8 @@ impl<'b: 'static> VirtualDom {
) {
match *node {
// Todo: create the children's template
TemplateNode::Dynamic(idx) => {
let id = self.next_element(template, template.template.node_paths[idx]);
TemplateNode::Dynamic(_) => {
let id = ElementId(0);
self.mutations
.template_mutations
.push(CreatePlaceholder { id })
@@ -218,7 +238,7 @@ impl<'b: 'static> VirtualDom {
tag,
inner_opt,
} => {
let id = self.next_element(template, &[]); // never gets referenced, empty path is fine, I think?
let id = ElementId(0);
self.mutations.template_mutations.push(CreateElement {
name: tag,
@@ -344,19 +364,28 @@ impl<'b: 'static> VirtualDom {
use RenderReturn::*;
match return_nodes {
Sync(Ok(t)) => self.mount_component(scope, t, idx),
Sync(Ok(t)) => {
self.mount_component(scope, template, t, idx)
// self.create(t)
}
Sync(Err(_e)) => todo!("Propogate error upwards"),
Async(_) => self.mount_component_placeholder(template, idx, scope),
}
}
fn mount_component(&mut self, scope: ScopeId, template: &'b VNode<'b>, idx: usize) -> usize {
fn mount_component(
&mut self,
scope: ScopeId,
parent: &'b VNode<'b>,
new: &'b VNode<'b>,
idx: usize,
) -> usize {
// Keep track of how many mutations are in the buffer in case we need to split them out if a suspense boundary
// is encountered
let mutations_to_this_point = self.mutations.len();
// Create the component's root element
let created = self.create_scope(scope, template);
let created = self.create_scope(scope, new);
// If there are no suspense leaves below us, then just don't bother checking anything suspense related
if self.collected_leaves.is_empty() {
@@ -370,7 +399,7 @@ impl<'b: 'static> VirtualDom {
};
// Since this is a boundary, use its placeholder within the template as the placeholder for the suspense tree
let new_id = self.next_element(template, template.template.node_paths[idx]);
let new_id = self.next_element(new, parent.template.node_paths[idx]);
// Now connect everything to the boundary
self.scopes[scope.0].placeholder.set(Some(new_id));
@@ -392,7 +421,7 @@ impl<'b: 'static> VirtualDom {
// Now assign the placeholder in the DOM
self.mutations.push(AssignId {
id: new_id,
path: &template.template.node_paths[idx][1..],
path: &parent.template.node_paths[idx][1..],
});
0
@@ -412,6 +441,11 @@ impl<'b: 'static> VirtualDom {
// Set the placeholder of the scope
self.scopes[scope.0].placeholder.set(Some(new_id));
println!(
"assigning id {:?} to path {:?}, template: {:?}",
new_id, &template.template.node_paths, template.template
);
// Since the placeholder is already in the DOM, we don't create any new nodes
self.mutations.push(AssignId {
id: new_id,
packages/core/src/diff.rs
+113 -34
View File
@@ -1,26 +1,17 @@
use std::any::Any;
use std::cell::Cell;
use crate::factory::RenderReturn;
use crate::innerlude::{Mutations, VComponent, VFragment, VText};
use crate::virtual_dom::VirtualDom;
use crate::{Attribute, AttributeValue, TemplateNode};
use crate::any_props::VProps;
use DynamicNode::*;
use crate::mutations::Mutation;
use crate::nodes::{DynamicNode, Template, TemplateId};
use crate::scopes::Scope;
use crate::{
any_props::AnyProps,
arena::ElementId,
bump_frame::BumpFrame,
nodes::VNode,
scopes::{ScopeId, ScopeState},
factory::RenderReturn,
innerlude::{DirtyScope, VComponent, VFragment, VText},
mutations::Mutation,
nodes::{DynamicNode, VNode},
scopes::ScopeId,
virtual_dom::VirtualDom,
AttributeValue, TemplateNode,
};
use fxhash::{FxHashMap, FxHashSet};
use slab::Slab;
use std::cell::Cell;
use DynamicNode::*;
impl<'b: 'static> VirtualDom {
pub fn diff_scope(&mut self, scope: ScopeId) {
@@ -123,6 +114,15 @@ impl<'b: 'static> VirtualDom {
_ => self.replace(left_template, right_template, left_node, right_node),
};
}
// Make sure the roots get transferred over
for (left, right) in left_template
.root_ids
.iter()
.zip(right_template.root_ids.iter())
{
right.set(left.get());
}
}
fn diff_vcomponent(&mut self, left: &'b VComponent<'b>, right: &'b VComponent<'b>) {
@@ -228,8 +228,7 @@ impl<'b: 'static> VirtualDom {
}
fn replace_placeholder_with_nodes(&mut self, l: &'b Cell<ElementId>, r: &'b [VNode<'b>]) {
let created = r.iter().fold(0, |acc, child| acc + self.create(child));
let created = self.create_children(r);
self.mutations.push(Mutation::ReplaceWith {
id: l.get(),
m: created,
@@ -238,9 +237,10 @@ impl<'b: 'static> VirtualDom {
fn replace_nodes_with_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b Cell<ElementId>) {
//
// Remove the old nodes, except for one
self.remove_nodes(&l[1..]);
let id = self.next_element(&l[0], &[]);
// self.replace(left_template, right_template, left, right)
}
fn diff_non_empty_fragment(&mut self, new: &'b [VNode<'b>], old: &'b [VNode<'b>]) {
@@ -613,8 +613,12 @@ impl<'b: 'static> VirtualDom {
}
}
fn insert_after(&mut self, node: &'b VNode<'b>, nodes_created: usize) {}
fn insert_before(&mut self, node: &'b VNode<'b>, nodes_created: usize) {}
fn insert_after(&mut self, node: &'b VNode<'b>, nodes_created: usize) {
todo!()
}
fn insert_before(&mut self, node: &'b VNode<'b>, nodes_created: usize) {
todo!()
}
fn replace_node_with_on_stack(&mut self, old: &'b VNode<'b>, m: usize) {
todo!()
@@ -623,7 +627,39 @@ impl<'b: 'static> VirtualDom {
/// Remove these nodes from the dom
/// Wont generate mutations for the inner nodes
fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) {
//
nodes.into_iter().for_each(|node| self.remove_node(node));
}
fn remove_node(&mut self, node: &'b VNode<'b>) {
for (idx, root) in node.template.roots.iter().enumerate() {
let id = match root {
TemplateNode::Text(_) | TemplateNode::Element { .. } => node.root_ids[idx].get(),
TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
match &node.dynamic_nodes[*id] {
Text(t) => t.id.get(),
Fragment(VFragment::Empty(t)) => t.get(),
Fragment(VFragment::NonEmpty(t)) => return self.remove_nodes(t),
Component(comp) => return self.remove_component(comp.scope.get().unwrap()),
}
}
};
self.mutations.push(Mutation::Remove { id })
}
}
fn remove_component(&mut self, scope_id: ScopeId) {
let height = self.scopes[scope_id.0].height;
self.dirty_scopes.remove(&DirtyScope {
height,
id: scope_id,
});
// I promise, since we're descending down the tree, this is safe
match unsafe { self.scopes[scope_id.0].root_node().extend_lifetime_ref() } {
RenderReturn::Sync(Ok(t)) => self.remove_node(t),
_ => todo!("cannot handle nonstandard nodes"),
}
}
/// Push all the real nodes on the stack
@@ -632,26 +668,60 @@ impl<'b: 'static> VirtualDom {
}
fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize {
todo!()
nodes.iter().fold(0, |acc, child| acc + self.create(child))
}
pub(crate) fn create_and_insert_before(&self, new: &[VNode], after: &VNode) {
let id = self.find_last_element(after);
fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) {
let m = self.create_children(new);
let id = self.find_first_element(before);
self.mutations.push(Mutation::InsertBefore { id, m })
}
pub(crate) fn create_and_insert_after(&self, new: &[VNode], after: &VNode) {
fn create_and_insert_after(&mut self, new: &'b [VNode<'b>], after: &'b VNode<'b>) {
let m = self.create_children(new);
let id = self.find_last_element(after);
self.mutations.push(Mutation::InsertAfter { id, m })
}
fn find_first_element(&self, node: &VNode) -> ElementId {
todo!()
match &node.template.roots[0] {
TemplateNode::Element { .. } | TemplateNode::Text(_) => node.root_ids[0].get(),
TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
match &node.dynamic_nodes[*id] {
Text(t) => t.id.get(),
Fragment(VFragment::NonEmpty(t)) => self.find_first_element(&t[0]),
Fragment(VFragment::Empty(t)) => t.get(),
Component(comp) => {
let scope = comp.scope.get().unwrap();
match self.scopes[scope.0].root_node() {
RenderReturn::Sync(Ok(t)) => self.find_first_element(t),
_ => todo!("cannot handle nonstandard nodes"),
}
}
}
}
}
}
fn find_last_element(&self, node: &VNode) -> ElementId {
match node.template.roots.last().unwrap() {
TemplateNode::Element { .. } => todo!(),
TemplateNode::Text(t) => todo!(),
TemplateNode::Dynamic(_) => todo!(),
TemplateNode::DynamicText(_) => todo!(),
TemplateNode::Element { .. } | TemplateNode::Text(_) => {
node.root_ids.last().unwrap().get()
}
TemplateNode::DynamicText(id) | TemplateNode::Dynamic(id) => {
match &node.dynamic_nodes[*id] {
Text(t) => t.id.get(),
Fragment(VFragment::NonEmpty(t)) => self.find_last_element(t.last().unwrap()),
Fragment(VFragment::Empty(t)) => t.get(),
Component(comp) => {
let scope = comp.scope.get().unwrap();
match self.scopes[scope.0].root_node() {
RenderReturn::Sync(Ok(t)) => self.find_last_element(t),
_ => todo!("cannot handle nonstandard nodes"),
}
}
}
}
}
}
@@ -666,6 +736,15 @@ impl<'b: 'static> VirtualDom {
left: &'b DynamicNode<'b>,
right: &'b DynamicNode<'b>,
) {
// Remove all but the first root
for root in &left_template.template.roots[1..] {
match root {
TemplateNode::Element { .. } => todo!(),
TemplateNode::Text(_) => todo!(),
TemplateNode::Dynamic(_) => todo!(),
TemplateNode::DynamicText(_) => todo!(),
}
}
}
}
packages/core/src/mutations.rs
+5 -1
View File
@@ -94,6 +94,7 @@ pub enum Mutation<'a> {
LoadTemplate {
name: &'static str,
index: usize,
id: ElementId,
},
// Take the current element and replace it with the element with the given id.
@@ -103,8 +104,8 @@ pub enum Mutation<'a> {
},
ReplacePlaceholder {
m: usize,
path: &'static [u8],
m: usize,
},
/// Insert a number of nodes after a given node.
@@ -176,4 +177,7 @@ pub enum Mutation<'a> {
/// The name of the event to remove.
event: &'a str,
},
Remove {
id: ElementId,
},
}
packages/core/src/nodes.rs
-51
View File
@@ -38,15 +38,6 @@ pub struct VNode<'a> {
}
impl<'a> VNode<'a> {
pub fn placeholder_template(cx: &'a ScopeState) -> Self {
Self::template_from_dynamic_node(
cx,
DynamicNode::Fragment(VFragment::Empty(Cell::new(ElementId(0)))),
"dioxus-placeholder",
)
.unwrap()
}
pub fn empty() -> Element<'a> {
Ok(VNode {
node_id: Cell::new(ElementId(0)),
@@ -63,48 +54,6 @@ impl<'a> VNode<'a> {
},
})
}
pub fn template_from_dynamic_node(
cx: &'a ScopeState,
node: DynamicNode<'a>,
id: &'static str,
) -> anyhow::Result<Self> {
Ok(VNode {
node_id: Cell::new(ElementId(0)),
key: None,
parent: None,
root_ids: &[],
dynamic_nodes: cx.bump().alloc([node]),
dynamic_attrs: &[],
template: Template {
id,
roots: &[TemplateNode::Dynamic(0)],
node_paths: &[&[0]],
attr_paths: &[],
},
})
}
pub fn single_text(
_cx: &'a ScopeState,
text: &'static [TemplateNode<'static>],
id: &'static str,
) -> anyhow::Result<Self> {
Ok(VNode {
node_id: Cell::new(ElementId(0)),
key: None,
parent: None,
root_ids: &[],
dynamic_nodes: &[],
dynamic_attrs: &[],
template: Template {
id,
roots: text,
node_paths: &[&[0]],
attr_paths: &[],
},
})
}
}
#[derive(Debug, Clone, Copy)]
packages/core/src/scheduler/suspense.rs
+3 -3
View File
@@ -37,8 +37,8 @@ pub struct SuspenseBoundary {
}
impl SuspenseBoundary {
pub fn new(id: ScopeId) -> Rc<Self> {
Rc::new(Self {
pub fn new(id: ScopeId) -> Self {
Self {
id,
waiting_on: Default::default(),
mutations: RefCell::new(Mutations::new()),
@@ -46,7 +46,7 @@ impl SuspenseBoundary {
created_on_stack: Cell::new(0),
onresolve: None,
onstart: None,
})
}
}
}
packages/core/src/scopes.rs
+3
View File
@@ -103,6 +103,9 @@ impl ScopeState {
}
}
/// Get the current render since the inception of this component
///
/// This can be used as a helpful diagnostic when debugging hooks/renders, etc
pub fn generation(&self) -> usize {
self.render_cnt.get()
}
packages/core/src/virtual_dom.rs
+1 -1
View File
@@ -252,7 +252,7 @@ impl VirtualDom {
// This could be unexpected, so we might rethink this behavior later
//
// We *could* just panic if the suspense boundary is not found
root.provide_context(SuspenseBoundary::new(ScopeId(0)));
root.provide_context(Rc::new(SuspenseBoundary::new(ScopeId(0))));
// the root element is always given element ID 0 since it's the container for the entire tree
dom.elements.insert(ElementRef::null());
packages/core/tests/create_lists.rs
+16 -14
View File
@@ -6,6 +6,8 @@ use dioxus_core::ElementId;
// In react, this would be a lot of node creation.
//
// In Dioxus, we memoize the rsx! body and simplify it down to a few template loads
//
// Also note that the IDs increase linearly. This lets us drive a vec on the renderer for O(1) re-indexing
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
@@ -29,41 +31,41 @@ fn list_renders() {
edits.template_mutations,
[
// Create the outer div
CreateElement { name: "div", namespace: None, id: ElementId(1) },
CreateElement { name: "div", namespace: None, id: ElementId(0) },
// todo: since this is the only child, we should just use
// append when modify the values (IE no need for a placeholder)
CreatePlaceholder { id: ElementId(2) },
CreatePlaceholder { id: ElementId(0) },
AppendChildren { m: 1 },
SaveTemplate { name: "template", m: 1 },
// Create the inner template div
CreateElement { name: "div", namespace: None, id: ElementId(3) },
CreateElement { name: "h1", namespace: None, id: ElementId(4) },
CreateElement { name: "div", namespace: None, id: ElementId(0) },
CreateElement { name: "h1", namespace: None, id: ElementId(0) },
CreateStaticText { value: "hello world! " },
AppendChildren { m: 1 },
CreateElement { name: "p", namespace: None, id: ElementId(5) },
CreateElement { name: "p", namespace: None, id: ElementId(0) },
CreateStaticText { value: "d" },
AppendChildren { m: 1 },
AppendChildren { m: 2 },
SaveTemplate { name: "template", m: 1 }
]
],
);
assert_eq!(
edits.edits,
[
// Load the outer div
LoadTemplate { name: "template", index: 0 },
LoadTemplate { name: "template", index: 0, id: ElementId(1) },
// Load each template one-by-one, rehydrating it
LoadTemplate { name: "template", index: 0 },
HydrateText { path: &[1, 0], value: "0", id: ElementId(6) },
LoadTemplate { name: "template", index: 0 },
HydrateText { path: &[1, 0], value: "1", id: ElementId(7) },
LoadTemplate { name: "template", index: 0 },
HydrateText { path: &[1, 0], value: "2", id: ElementId(8) },
LoadTemplate { name: "template", index: 0, id: ElementId(2) },
HydrateText { path: &[1, 0], value: "0", id: ElementId(3) },
LoadTemplate { name: "template", index: 0, id: ElementId(4) },
HydrateText { path: &[1, 0], value: "1", id: ElementId(5) },
LoadTemplate { name: "template", index: 0, id: ElementId(6) },
HydrateText { path: &[1, 0], value: "2", id: ElementId(7) },
// Replace the 0th childn on the div with the 3 templates on the stack
ReplacePlaceholder { m: 3, path: &[0] },
// Append the container div to the dom
AppendChildren { m: 1 }
]
],
)
}
packages/core/tests/create_passthru.rs
+12 -5
View File
@@ -28,13 +28,15 @@ fn nested_passthru_creates() {
assert_eq!(
edits.edits,
[
LoadTemplate { name: "template", index: 0 },
LoadTemplate { name: "template", index: 0, id: ElementId(1) },
AppendChildren { m: 1 },
]
)
}
/// Should load all the templates and append them
///
/// Take note on how we don't spit out the template for child_comp since it's entirely dynamic
#[test]
fn nested_passthru_creates_add() {
fn app(cx: Scope) -> Element {
@@ -64,15 +66,20 @@ fn nested_passthru_creates_add() {
assert_eq!(
dom.rebuild().santize().edits,
[
LoadTemplate { name: "template", index: 0 },
LoadTemplate { name: "template", index: 0 },
LoadTemplate { name: "template", index: 0 },
LoadTemplate { name: "template", index: 1 },
// load 1
LoadTemplate { name: "template", index: 0, id: ElementId(1) },
// load 2
LoadTemplate { name: "template", index: 0, id: ElementId(2) },
// load 3
LoadTemplate { name: "template", index: 0, id: ElementId(3) },
// load div that contains 4
LoadTemplate { name: "template", index: 1, id: ElementId(4) },
AppendChildren { m: 4 },
]
);
}
/// note that the template is all dynamic roots - so it doesn't actually get cached as a template
#[test]
fn dynamic_node_as_root() {
fn app(cx: Scope) -> Element {
packages/core/tests/diff_unkeyed_list.rs
+134
View File
@@ -0,0 +1,134 @@
use dioxus::core::{ElementId, Mutation::*};
use dioxus::prelude::*;
#[test]
fn list_creates_one_by_one() {
let mut dom = VirtualDom::new(|cx| {
let gen = cx.generation();
cx.render(rsx! {
div {
(0..gen).map(|i| rsx! {
div { "{i}" }
})
}
})
});
// load the div and then assign the empty fragment as a placeholder
assert_eq!(
dom.rebuild().santize().edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(1,) },
AssignId { path: &[0], id: ElementId(2,) },
AppendChildren { m: 1 },
]
);
// Rendering the first item should replace the placeholder with an element
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(3,) },
HydrateText { path: &[0], value: "0", id: ElementId(4,) },
ReplaceWith { id: ElementId(2,), m: 1 },
]
);
// Rendering the next item should insert after the previous
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(5,) },
HydrateText { path: &[0], value: "1", id: ElementId(6,) },
InsertAfter { id: ElementId(3,), m: 1 },
]
);
// ... and again!
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(7,) },
HydrateText { path: &[0], value: "2", id: ElementId(8,) },
InsertAfter { id: ElementId(5,), m: 1 },
]
);
// once more
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(9,) },
HydrateText { path: &[0], value: "3", id: ElementId(10,) },
InsertAfter { id: ElementId(7,), m: 1 },
]
);
}
#[test]
fn removes_one_by_one() {
let mut dom = VirtualDom::new(|cx| {
let gen = 3 - cx.generation();
println!("gen: {:?}", gen);
println!("range: {:?}", 0..gen);
cx.render(rsx! {
div {
(0..gen).map(|i| rsx! {
div { "{i}" }
})
}
})
});
// load the div and then assign the empty fragment as a placeholder
assert_eq!(
dom.rebuild().santize().edits,
[
// The container
LoadTemplate { name: "template", index: 0, id: ElementId(1) },
// each list item
LoadTemplate { name: "template", index: 0, id: ElementId(2) },
HydrateText { path: &[0], value: "0", id: ElementId(3) },
LoadTemplate { name: "template", index: 0, id: ElementId(4) },
HydrateText { path: &[0], value: "1", id: ElementId(5) },
LoadTemplate { name: "template", index: 0, id: ElementId(6) },
HydrateText { path: &[0], value: "2", id: ElementId(7) },
// replace the placeholder in the template with the 3 templates on the stack
ReplacePlaceholder { m: 3, path: &[0] },
// Mount the div
AppendChildren { m: 1 }
]
);
// Remove div(3)
// Rendering the first item should replace the placeholder with an element
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[Remove { id: ElementId(6) }]
);
// Remove div(2)
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(
dom.render_immediate().santize().edits,
[Remove { id: ElementId(4) }]
);
// Remove div(1) and replace with a placeholder
dom.mark_dirty_scope(ScopeId(0));
assert_eq!(dom.render_immediate().santize().edits, []);
// dom.mark_dirty_scope(ScopeId(0));
// assert_eq!(
// dom.render_immediate().santize().edits,
// [Remove { id: ElementId(4) }]
// );
}
packages/core/tests/suspend.rs
+44 -32
View File
@@ -1,55 +1,67 @@
use dioxus_core::*;
use std::{cell::RefCell, rc::Rc, time::Duration};
use dioxus::core::ElementId;
use dioxus::core::{Mutation::*, SuspenseBoundary};
use dioxus::prelude::*;
use dioxus_core::SuspenseContext;
use std::{rc::Rc, time::Duration};
#[tokio::test]
async fn it_works() {
let mut dom = VirtualDom::new(app);
let mutations = dom.rebuild();
let mutations = dom.rebuild().santize();
println!("mutations: {:?}", mutations);
// We should at least get the top-level template in
assert_eq!(
mutations.template_mutations,
[
CreateElement { name: "div", namespace: None, id: ElementId(0) },
CreateStaticText { value: "Waiting for child..." },
CreatePlaceholder { id: ElementId(0) },
AppendChildren { m: 2 },
SaveTemplate { name: "template", m: 1 }
]
);
// And we should load it in and assign the placeholder properly
assert_eq!(
mutations.edits,
[
LoadTemplate { name: "template", index: 0, id: ElementId(1) },
// hmmmmmmmmm.... with suspense how do we guarantee that IDs increase linearly?
// can we even?
AssignId { path: &[1], id: ElementId(3) },
AppendChildren { m: 1 },
]
);
// wait just a moment, not enough time for the boundary to resolve
dom.wait_for_work().await;
}
fn app(cx: Scope) -> Element {
println!("running root app");
VNode::template_from_dynamic_node(
cx,
cx.component(suspense_boundary, (), "suspense_boundary"),
"app",
)
cx.render(rsx!(
div {
"Waiting for child..."
suspense_boundary {}
}
))
}
fn suspense_boundary(cx: Scope) -> Element {
println!("running boundary");
cx.use_hook(|| cx.provide_context(Rc::new(SuspenseBoundary::new(cx.scope_id()))));
let _ = cx.use_hook(|| {
cx.provide_context(Rc::new(RefCell::new(SuspenseBoundary::new(cx.scope_id()))))
});
// Ensure the right types are found
cx.has_context::<SuspenseContext>().unwrap();
VNode::template_from_dynamic_node(cx, cx.component(async_child, (), "async_child"), "app")
cx.render(rsx!(async_child {}))
}
async fn async_child(cx: Scope<'_>) -> Element {
println!("rendering async child");
let fut = cx.use_hook(|| {
Box::pin(async {
println!("Starting sleep");
tokio::time::sleep(Duration::from_secs(1)).await;
println!("Sleep ended");
})
});
fut.await;
println!("Future awaited and complete");
VNode::template_from_dynamic_node(cx, cx.component(async_text, (), "async_text"), "app")
use_future!(cx, || tokio::time::sleep(Duration::from_millis(10))).await;
cx.render(rsx!(async_text {}))
}
async fn async_text(cx: Scope<'_>) -> Element {
VNode::single_text(&cx, &[TemplateNode::Text("it works!")], "beauty")
cx.render(rsx!("async_text"))
}
packages/core/tests/task.rs
+11 -5
View File
@@ -3,6 +3,8 @@
use dioxus::prelude::*;
use std::time::Duration;
static mut POLL_COUNT: usize = 0;
#[tokio::test]
async fn it_works() {
let mut dom = VirtualDom::new(app);
@@ -11,23 +13,27 @@ async fn it_works() {
tokio::select! {
_ = dom.wait_for_work() => {}
_ = tokio::time::sleep(Duration::from_millis(600)) => {}
_ = tokio::time::sleep(Duration::from_millis(10)) => {}
};
// By the time the tasks are finished, we should've accumulated ticks from two tasks
// Be warned that by setting the delay to too short, tokio might not schedule in the tasks
assert_eq!(unsafe { POLL_COUNT }, 135);
}
fn app(cx: Scope) -> Element {
cx.use_hook(|| {
cx.spawn(async {
for x in 0..10 {
tokio::time::sleep(Duration::from_millis(50)).await;
println!("Hello, world! {x}");
tokio::time::sleep(Duration::from_micros(50)).await;
unsafe { POLL_COUNT += x }
}
});
cx.spawn(async {
for x in 0..10 {
tokio::time::sleep(Duration::from_millis(25)).await;
println!("Hello, world from second thread! {x}");
tokio::time::sleep(Duration::from_micros(25)).await;
unsafe { POLL_COUNT += x * 2 }
}
});
});
packages/rsx/src/lib.rs
+2 -1
View File
@@ -121,6 +121,7 @@ impl<'a> ToTokens for TemplateRenderer<'a> {
});
// Render and release the mutable borrow on context
let num_roots = self.roots.len();
let roots = quote! { #( #root_printer ),* };
let node_printer = &context.dynamic_nodes;
let dyn_attr_printer = &context.dynamic_attributes;
@@ -147,7 +148,7 @@ impl<'a> ToTokens for TemplateRenderer<'a> {
parent: None,
key: #key_tokens,
template: TEMPLATE,
root_ids: __cx.bump().alloc([]),
root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([::dioxus::core::ElementId(0); #num_roots]) as &mut [::dioxus::core::ElementId]).as_slice_of_cells(),
dynamic_nodes: __cx.bump().alloc([ #( #node_printer ),* ]),
dynamic_attrs: __cx.bump().alloc([ #( #dyn_attr_printer ),* ]),
}