add persistant iterator to native core

This commit is contained in:
Evan Almloff committed 2022-05-03 11:01:49 -05:00
1 parent a62e729bfa
commit 7a17683447
3 files changed
+567

No files matched your search

@@ -0,0 +1,342 @@
use dioxus_native_core::{
real_dom::{NodeType, RealDom},
state::State,
utils::PersistantElementIter,
};
use dioxus_native_core_macro::State;
#[derive(State, Default, Clone)]
struct Empty {}
#[test]
#[allow(unused_variables)]
fn traverse() {
use dioxus_core::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
#[allow(non_snake_case)]
fn Base(cx: Scope) -> Element {
rsx!(cx, div {})
}
let vdom = VirtualDom::new(Base);
let mutations = vdom.create_vnodes(rsx! {
div{
div{
"hello"
p{
"world"
}
"hello world"
}
}
});
let mut rdom: RealDom<Empty> = RealDom::new();
let _to_update = rdom.apply_mutations(vec![mutations]);
let mut iter = PersistantElementIter::new();
let div_tag = "div".to_string();
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
let text1 = "hello".to_string();
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Text { text: text1, .. }
));
let p_tag = "p".to_string();
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Element { tag: p_tag, .. }
));
let text2 = "world".to_string();
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Text { text: text2, .. }
));
let text3 = "hello world".to_string();
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Text { text: text3, .. }
));
assert!(matches!(
&rdom[iter.next(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Text { text: text3, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Text { text: text2, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Element { tag: p_tag, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Text { text: text1, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Element { tag: div_tag, .. }
));
assert!(matches!(
&rdom[iter.prev(&rdom).id()].node_type,
NodeType::Text { text: text3, .. }
));
}
#[test]
#[allow(unused_variables)]
fn persist_removes() {
use dioxus_core::VNode;
use dioxus_core::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
#[allow(non_snake_case)]
fn Base(cx: Scope) -> Element {
rsx!(cx, div {})
}
let vdom = VirtualDom::new(Base);
let (build, update) = vdom.diff_lazynodes(
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "2",
"world"
}
p{
key: "3",
"hello world"
}
}
},
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "3",
"hello world"
}
}
},
);
let mut rdom: RealDom<Empty> = RealDom::new();
let _to_update = rdom.apply_mutations(vec![build]);
// this will end on the node that is removed
let mut iter1 = PersistantElementIter::new();
// this will end on the after node that is removed
let mut iter2 = PersistantElementIter::new();
// div
iter1.next(&rdom).id();
iter2.next(&rdom).id();
// p
iter1.next(&rdom).id();
iter2.next(&rdom).id();
// "hello"
iter1.next(&rdom).id();
iter2.next(&rdom).id();
// p
iter1.next(&rdom).id();
iter2.next(&rdom).id();
// "world"
iter1.next(&rdom).id();
iter2.next(&rdom).id();
// p
iter2.next(&rdom).id();
// "hello world"
iter2.next(&rdom).id();
iter1.prune(&update, &rdom);
iter2.prune(&update, &rdom);
let _to_update = rdom.apply_mutations(vec![update]);
let p_tag = "p".to_string();
let idx = iter1.next(&rdom).id();
assert!(matches!(
&rdom[idx].node_type,
NodeType::Element { tag: p_tag, .. }
));
let text = "hello world".to_string();
let idx = iter1.next(&rdom).id();
assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
let div_tag = "div".to_string();
let idx = iter2.next(&rdom).id();
assert!(matches!(
&rdom[idx].node_type,
NodeType::Element { tag: div_tag, .. }
));
}
#[test]
#[allow(unused_variables)]
fn persist_instertions_before() {
use dioxus_core::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
#[allow(non_snake_case)]
fn Base(cx: Scope) -> Element {
rsx!(cx, div {})
}
let vdom = VirtualDom::new(Base);
let (build, update) = vdom.diff_lazynodes(
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "3",
"hello world"
}
}
},
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "2",
"world"
}
p{
key: "3",
"hello world"
}
}
},
);
let mut rdom: RealDom<Empty> = RealDom::new();
let _to_update = rdom.apply_mutations(vec![build]);
let mut iter = PersistantElementIter::new();
// div
iter.next(&rdom).id();
// p
iter.next(&rdom).id();
// "hello"
iter.next(&rdom).id();
// p
iter.next(&rdom).id();
// "hello world"
iter.next(&rdom).id();
iter.prune(&update, &rdom);
let _to_update = rdom.apply_mutations(vec![update]);
let p_tag = "div".to_string();
let idx = iter.next(&rdom).id();
assert!(matches!(
&rdom[idx].node_type,
NodeType::Element { tag: p_tag, .. }
));
}
#[test]
#[allow(unused_variables)]
fn persist_instertions_after() {
use dioxus_core::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
#[allow(non_snake_case)]
fn Base(cx: Scope) -> Element {
rsx!(cx, div {})
}
let vdom = VirtualDom::new(Base);
let (build, update) = vdom.diff_lazynodes(
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "2",
"world"
}
}
},
rsx! {
div{
p{
key: "1",
"hello"
}
p{
key: "2",
"world"
}
p{
key: "3",
"hello world"
}
}
},
);
let mut rdom: RealDom<Empty> = RealDom::new();
let _to_update = rdom.apply_mutations(vec![build]);
let mut iter = PersistantElementIter::new();
// div
iter.next(&rdom).id();
// p
iter.next(&rdom).id();
// "hello"
iter.next(&rdom).id();
// p
iter.next(&rdom).id();
// "world"
iter.next(&rdom).id();
iter.prune(&update, &rdom);
let _to_update = rdom.apply_mutations(vec![update]);
let p_tag = "p".to_string();
let idx = iter.next(&rdom).id();
assert!(matches!(
&rdom[idx].node_type,
NodeType::Element { tag: p_tag, .. }
));
let text = "hello world".to_string();
let idx = iter.next(&rdom).id();
assert!(matches!(&rdom[idx].node_type, NodeType::Text { text, .. }));
}
+1
View File
@@ -2,3 +2,4 @@ pub mod layout_attributes;
pub mod node_ref;
pub mod real_dom;
pub mod state;
pub mod utils;
+224
View File
@@ -0,0 +1,224 @@
use crate::{
real_dom::{NodeType, RealDom},
state::State,
};
use dioxus_core::{DomEdit, ElementId, Mutations};
pub enum ElementProduced {
Progressed(ElementId),
Looped(ElementId),
}
impl ElementProduced {
pub fn id(&self) -> ElementId {
match self {
ElementProduced::Progressed(id) => *id,
ElementProduced::Looped(id) => *id,
}
}
}
#[derive(Debug)]
enum NodePosition {
AtNode,
InChild(usize),
}
impl NodePosition {
fn map(&self, mut f: impl FnMut(usize) -> usize) -> Self {
match self {
Self::AtNode => Self::AtNode,
Self::InChild(i) => Self::InChild(f(*i)),
}
}
fn get_or_insert(&mut self, child_idx: usize) -> usize {
match self {
Self::AtNode => {
*self = Self::InChild(child_idx);
child_idx
}
Self::InChild(i) => *i,
}
}
}
/// The focus system needs a iterator that can persist through changes in the [VirtualDom].
/// Iterate through it with [ElementIter::next] [ElementIter::prev], and update it with [ElementIter::update] (with data from [`VirtualDom::work_with_deadline`]).
/// The iterator loops around when it reaches the end or the beginning.
pub struct PersistantElementIter {
// stack of elements and fragments
stack: smallvec::SmallVec<[(ElementId, NodePosition); 5]>,
}
impl Default for PersistantElementIter {
fn default() -> Self {
PersistantElementIter {
stack: smallvec::smallvec![(ElementId(0), NodePosition::AtNode)],
}
}
}
impl PersistantElementIter {
pub fn new() -> Self {
Self::default()
}
/// remove stale element refreneces
pub fn prune<S: State>(&mut self, mutations: &Mutations, rdom: &RealDom<S>) {
let ids_removed: Vec<_> = mutations
.edits
.iter()
.filter_map(|e| {
if let DomEdit::Remove { root } = e {
Some(*root)
} else {
None
}
})
.collect();
if let Some(r) = self
.stack
.iter()
.position(|(el_id, _)| ids_removed.iter().any(|id| el_id.as_u64() == *id))
{
self.stack.truncate(r);
}
// if a child is removed or inserted before or at the current element, update the child index
for (el_id, child_idx) in self.stack.iter_mut() {
if let NodePosition::InChild(child_idx) = child_idx {
if let NodeType::Element { children, .. } = &rdom[*el_id].node_type {
for m in &mutations.edits {
match m {
DomEdit::Remove { root } => {
if children
.iter()
.take(*child_idx + 1)
.any(|c| c.as_u64() == *root)
{
*child_idx -= 1;
}
}
DomEdit::InsertBefore { root, n } => {
if children
.iter()
.take(*child_idx + 1)
.any(|c| c.as_u64() == *root)
{
*child_idx += *n as usize;
}
}
DomEdit::InsertAfter { root, n } => {
if children
.iter()
.take(*child_idx)
.any(|c| c.as_u64() == *root)
{
*child_idx += *n as usize;
}
}
_ => (),
}
}
}
}
}
}
/// get the next element
pub fn next<S: State>(&mut self, rdom: &RealDom<S>) -> ElementProduced {
if self.stack.is_empty() {
let id = ElementId(0);
let new = (id, NodePosition::AtNode);
self.stack.push(new);
ElementProduced::Looped(id)
} else {
let (last, o_child_idx) = self.stack.last_mut().unwrap();
let node = &rdom[*last];
match &node.node_type {
NodeType::Element { children, .. } => {
*o_child_idx = o_child_idx.map(|i| i + 1);
// if we have children, go to the next child
let child_idx = o_child_idx.get_or_insert(0);
if child_idx >= children.len() {
self.pop();
self.next(rdom)
} else {
let id = children[child_idx];
if let NodeType::Element { .. } = &rdom[id].node_type {
self.stack.push((id, NodePosition::AtNode));
}
ElementProduced::Progressed(id)
}
}
NodeType::Text { .. } | NodeType::Placeholder { .. } => {
// we are at a leaf, so we are done
ElementProduced::Progressed(self.pop())
}
}
}
}
/// get the previous element
pub fn prev<S: State>(&mut self, rdom: &RealDom<S>) -> ElementProduced {
fn push_back<S: State>(
stack: &mut smallvec::SmallVec<[(ElementId, NodePosition); 5]>,
new_node: ElementId,
rdom: &RealDom<S>,
) -> ElementId {
match &rdom[new_node].node_type {
NodeType::Element { children, .. } => {
if children.is_empty() {
new_node
} else {
stack.push((new_node, NodePosition::InChild(children.len() - 1)));
push_back(stack, *children.last().unwrap(), rdom)
}
}
_ => new_node,
}
}
if self.stack.is_empty() {
let new_node = ElementId(0);
ElementProduced::Looped(push_back(&mut self.stack, new_node, rdom))
} else {
let (last, o_child_idx) = self.stack.last_mut().unwrap();
let node = &rdom[*last];
match &node.node_type {
NodeType::Element { children, .. } => {
// if we have children, go to the next child
if let NodePosition::InChild(0) = o_child_idx {
ElementProduced::Progressed(self.pop())
} else {
*o_child_idx = o_child_idx.map(|i| i - 1);
if let NodePosition::InChild(child_idx) = o_child_idx {
if *child_idx >= children.len() || children.len() == 0 {
self.pop();
self.prev(rdom)
} else {
let new_node = children[*child_idx];
ElementProduced::Progressed(push_back(
&mut self.stack,
new_node,
rdom,
))
}
} else {
self.pop();
self.prev(rdom)
}
}
}
NodeType::Text { .. } | NodeType::Placeholder { .. } => {
// we are at a leaf, so we are done
ElementProduced::Progressed(self.pop())
}
}
}
}
fn pop(&mut self) -> ElementId {
self.stack.pop().unwrap().0
}
}