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

Feat: re-enable stack machine approach

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-02-17 10:53:55 -05:00
1 parent 1781ebba86
commit e3ede7fcbf
15 files changed
+1072 -562
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vscode/spellright.dict
Vendored
+1
View File
@@ -25,3 +25,4 @@ Derefing
rei
RefMut
diffed
datafetching
packages/cli/src/logging.rs
+4 -2
View File
@@ -31,12 +31,14 @@ pub fn set_up_logging() {
})
// set the default log level. to filter out verbose log messages from dependencies, set
// this to Warn and overwrite the log level for your crate.
.level(log::LevelFilter::Warn)
.level(log::LevelFilter::Info)
// .level(log::LevelFilter::Warn)
// change log levels for individual modules. Note: This looks for the record's target
// field which defaults to the module path but can be overwritten with the `target`
// parameter:
// `info!(target="special_target", "This log message is about special_target");`
.level_for("dioxus", log::LevelFilter::Info)
// .level_for("dioxus", log::LevelFilter::Debug)
// .level_for("dioxus", log::LevelFilter::Info)
// .level_for("pretty_colored", log::LevelFilter::Trace)
// output to stdout
.chain(std::io::stdout())
packages/core/Cargo.toml
+4 -1
View File
@@ -31,5 +31,8 @@ id-arena = "2.2.1"
thiserror = "1.0.23"
fxhash = "0.2.1"
longest-increasing-subsequence = "0.1.0"
serde = "1.0.123"
serde = { version = "1.0.123", features = ["derive"] }
log = "0.4.14"
pretty_env_logger = "0.4.0"
ouroboros = "0.8.0"
# hashbrown = { version = "0.9.1", features = ["bumpalo"] }
packages/core/src/changelist.rs
+25 -12
View File
@@ -19,6 +19,8 @@
//!
//!
use bumpalo::Bump;
use crate::innerlude::{Listener, VirtualDom};
/// The `Edit` represents a single modifcation of the renderer tree.
@@ -31,6 +33,7 @@ use crate::innerlude::{Listener, VirtualDom};
///
///
///
#[derive(Debug)]
pub enum Edit<'d> {
SetText { text: &'d str },
RemoveSelfAndNextSiblings {},
@@ -57,14 +60,23 @@ pub enum Edit<'d> {
}
pub struct EditList<'src> {
traversal: Traversal,
pub traversal: Traversal,
next_temporary: u32,
forcing_new_listeners: bool,
emitter: Vec<Edit<'src>>,
pub emitter: Vec<Edit<'src>>,
}
/// Traversal methods.
impl EditList<'_> {
impl<'b> EditList<'b> {
pub fn new(bump: &'b Bump) -> Self {
Self {
traversal: Traversal::new(),
next_temporary: 0,
forcing_new_listeners: false,
emitter: Vec::new(),
}
}
/// Traversal methods.
pub fn go_down(&mut self) {
self.traversal.down();
}
@@ -98,36 +110,37 @@ impl EditList<'_> {
pub fn commit_traversal(&mut self) {
if self.traversal.is_committed() {
log::debug!("Traversal already committed");
return;
}
for mv in self.traversal.commit() {
match mv {
MoveTo::Parent => {
// debug!("emit: pop");
log::debug!("emit: pop");
self.emitter.push(Edit::Pop {});
// self.emitter.pop();
}
MoveTo::Child(n) => {
// debug!("emit: push_child({})", n);
log::debug!("emit: push_child({})", n);
self.emitter.push(Edit::PushChild { n });
}
MoveTo::ReverseChild(n) => {
// debug!("emit: push_reverse_child({})", n);
log::debug!("emit: push_reverse_child({})", n);
self.emitter.push(Edit::PushReverseChild { n });
// self.emitter.push_reverse_child(n);
}
MoveTo::Sibling(n) => {
// debug!("emit: pop_push_child({})", n);
log::debug!("emit: pop_push_child({})", n);
self.emitter.push(Edit::PopPushChild { n });
// self.emitter.pop_push_child(n);
}
MoveTo::ReverseSibling(n) => {
// debug!("emit: pop_push_reverse_child({})", n);
log::debug!("emit: pop_push_reverse_child({})", n);
self.emitter.push(Edit::PopPushReverseChild { n });
}
MoveTo::TempChild(temp) => {
// debug!("emit: push_temporary({})", temp);
log::debug!("emit: push_temporary({})", temp);
self.emitter.push(Edit::PushTemporary { temp });
// self.emitter.push_temporary(temp);
}
@@ -477,8 +490,8 @@ impl Traversal {
#[inline]
pub fn is_committed(&self) -> bool {
// is_empty is not inlined?
// self.uncommitted.is_empty()
self.uncommitted.len() == 0
self.uncommitted.is_empty()
// self.uncommitted.len() == 0
}
/// Commit this traversals moves and return the optimized path from the last
packages/core/src/diff.rs
+2
View File
@@ -238,6 +238,8 @@ mod tests {
.for_each(|f| assert_eq!(compare_patch(f.0, f.1), true, "{}", description));
}
// todo: make this actually perform real comparisons
// by default, nothing is derived for vnodes or patches
fn compare_patch(patch1: &Patch, patch2: &Patch) -> bool {
match (patch1, patch2) {
(Patch::AppendChildren(_, _), Patch::AppendChildren(_, _)) => true,
packages/core/src/dodriodiff.rs
+20 -5
View File
@@ -1,3 +1,4 @@
use bumpalo::Bump;
/// Diff the `old` node with the `new` node. Emits instructions to modify a
/// physical DOM node that reflects `old` into something that reflects `new`.
///
@@ -36,7 +37,7 @@ use fxhash::{FxHashMap, FxHashSet};
use generational_arena::Index;
use crate::{
changelist::EditList,
changelist::{Edit, EditList},
innerlude::{Attribute, Listener, Scope, VElement, VNode, VText},
virtual_dom::LifecycleEvent,
};
@@ -55,8 +56,8 @@ use std::cmp::Ordering;
/// The order of these re-entrances is stored in the DiffState itself. The DiffState comes pre-loaded with a set of components
/// that were modified by the eventtrigger. This prevents doubly evaluating components if they wereboth updated via
/// subscriptions and props changes.
struct DiffingMachine<'a> {
change_list: &'a mut EditList<'a>,
pub struct DiffMachine<'a> {
pub change_list: EditList<'a>,
immediate_queue: Vec<Index>,
diffed: FxHashSet<Index>,
need_to_diff: FxHashSet<Index>,
@@ -67,8 +68,21 @@ enum NeedToDiff {
Subscription,
}
impl<'a> DiffingMachine<'a> {
fn diff_node(&mut self, old: &VNode<'a>, new: &VNode<'a>) {
impl<'a> DiffMachine<'a> {
pub fn new(bump: &'a Bump) -> Self {
Self {
change_list: EditList::new(bump),
immediate_queue: Vec::new(),
diffed: FxHashSet::default(),
need_to_diff: FxHashSet::default(),
}
}
pub fn consume(self) -> Vec<Edit<'a>> {
self.change_list.emitter
}
pub fn diff_node(&mut self, old: &VNode<'a>, new: &VNode<'a>) {
/*
For each valid case, we "commit traversal", meaning we save this current position in the tree.
Then, we diff and queue an edit event (via chagelist). s single trees - when components show up, we save that traversal and then re-enter later.
@@ -107,6 +121,7 @@ impl<'a> DiffingMachine<'a> {
// compare elements
// if different, schedule different types of update
(VNode::Element(eold), VNode::Element(enew)) => {
log::debug!("elements are different");
// If the element type is completely different, the element needs to be re-rendered completely
if enew.tag_name != eold.tag_name || enew.namespace != eold.namespace {
self.change_list.commit_traversal();
packages/core/src/lib.rs
+7 -6
View File
@@ -65,13 +65,13 @@
//! - dioxus-liveview (SSR + StringRenderer)
//!
// pub mod changelist; // An "edit phase" described by transitions and edit operations
pub mod changelist; // An "edit phase" described by transitions and edit operations
pub mod component; // Logic for extending FC
pub mod context; // Logic for providing hook + context functionality to user components
pub mod debug_renderer; // Test harness for validating that lifecycles and diffs work appropriately
pub mod diff;
pub mod patch; // The diffing algorithm that builds the ChangeList
// pub mod dodriodiff; // The diffing algorithm that builds the ChangeList
// pub mod diff;
// pub mod patch; // The diffing algorithm that builds the ChangeList
pub mod dodriodiff; // The diffing algorithm that builds the ChangeList
pub mod error; // Error type we expose to the renderers
pub mod events; // Manages the synthetic event API
pub mod hooks; // Built-in hooks
@@ -99,7 +99,7 @@ pub(crate) mod innerlude {
// pub use nodes::iterables::IterableNodes;
/// This type alias is an internal way of abstracting over the static functions that represent components.
pub type FC<P> = for<'a> fn(Context<'a>, &'a P) -> VNode<'a>;
pub type FC<P> = for<'a> fn(Context<'a>, &'a P) -> &'a VNode<'a>;
// pub type FC<P> = for<'a> fn(Context<'a, P>) -> VNode<'a>;
// TODO @Jon, fix this
@@ -139,7 +139,8 @@ pub mod prelude {
pub use dioxus_core_macro::fc;
pub use dioxus_html_2::html;
pub use crate::diff::DiffMachine;
// pub use crate::diff::DiffMachine;
pub use crate::dodriodiff::DiffMachine;
pub use crate::hooks::*;
}
packages/core/src/nodes.rs
+1 -1
View File
@@ -192,7 +192,7 @@ mod velement {
/// Keys must be unique among siblings.
///
/// If any sibling is keyed, then they all must be keyed.
#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize)]
#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
pub struct NodeKey(pub(crate) u32);
impl Default for NodeKey {
packages/core/src/scope.rs
+121 -36
View File
@@ -3,11 +3,82 @@ use crate::innerlude::*;
use crate::nodes::VNode;
use bumpalo::Bump;
use generational_arena::Index;
use owning_ref::StableAddress;
use std::{
any::TypeId, borrow::Borrow, cell::RefCell, future::Future, marker::PhantomData,
sync::atomic::AtomicUsize, todo,
any::TypeId,
borrow::{Borrow, BorrowMut},
cell::{RefCell, UnsafeCell},
future::Future,
marker::PhantomData,
ops::{Deref, DerefMut},
sync::atomic::AtomicUsize,
todo,
};
pub struct BumpContainer(pub UnsafeCell<Bump>);
impl BumpContainer {
fn new() -> Self {
Self(UnsafeCell::new(Bump::new()))
}
}
impl Deref for BumpContainer {
type Target = Bump;
fn deref(&self) -> &Self::Target {
todo!()
// self.0.borrow()
}
}
impl DerefMut for BumpContainer {
fn deref_mut(&mut self) -> &mut Self::Target {
todo!()
// self.0.borrow_mut()
}
}
unsafe impl StableAddress for BumpContainer {}
#[ouroboros::self_referencing]
pub struct BumpFrame {
pub bump: BumpContainer,
#[covariant]
#[borrows(bump)]
pub head_node: &'this VNode<'this>,
}
pub struct ActiveFrame {
pub idx: AtomicUsize,
pub frames: [BumpFrame; 2],
}
impl ActiveFrame {
fn from_frames(a: BumpFrame, b: BumpFrame) -> Self {
Self {
idx: 0.into(),
frames: [a, b],
}
}
fn next(&self) -> &BumpFrame {
self.idx.fetch_add(1, std::sync::atomic::Ordering::Relaxed);
let cur = self.idx.borrow().load(std::sync::atomic::Ordering::Relaxed);
match cur % 1 {
1 => &self.frames[1],
0 => &self.frames[0],
_ => unreachable!("mod cannot by non-zero"),
}
}
// fn next(&self) -> &BumpFrame {
// self.idx.fetch_add(1, std::sync::atomic::Ordering::Relaxed);
// let cur = self.idx.borrow().load(std::sync::atomic::Ordering::Relaxed);
// match cur % 2_usize {
// 1 => &self.frames[1],
// 0 => &self.frames[0],
// }
// }
}
/// Every component in Dioxus is represented by a `Scope`.
///
/// Scopes contain the state for hooks, the component's props, and other lifecycle information.
@@ -26,16 +97,12 @@ pub struct Scope {
pub parent: Option<Index>,
// todo, do better with the active frame stuff
pub frames: [Bump; 2],
// somehow build this vnode with a lifetime tied to self
// This root node has "static" lifetime, but it's really not static.
// It's goverened by the oldest of the two frames and is switched every time a new render occurs
// Use this node as if it were static is unsafe, and needs to be fixed with ourborous or owning ref
// ! do not copy this reference are things WILL break !
pub root_node: *mut VNode<'static>,
pub active_frame: ActiveFrame,
pub frames: ActiveFrame,
// IE Which listeners need to be woken up?
pub listeners: Vec<Box<dyn Fn()>>,
@@ -45,19 +112,19 @@ pub struct Scope {
pub caller: *const i32,
}
pub enum ActiveFrame {
First,
Second,
}
// pub enum ActiveFrame {
// First,
// Second,
// }
impl ActiveFrame {
fn next(&mut self) {
match self {
ActiveFrame::First => *self = ActiveFrame::Second,
ActiveFrame::Second => *self = ActiveFrame::First,
}
}
}
// impl ActiveFrame {
// fn next(&mut self) {
// match self {
// ActiveFrame::First => *self = ActiveFrame::Second,
// ActiveFrame::Second => *self = ActiveFrame::First,
// }
// }
// }
impl Scope {
// create a new scope from a function
@@ -72,26 +139,31 @@ impl Scope {
// Create the two buffers the componetn will render into
// There will always be an "old" and "new"
let frames = [Bump::new(), Bump::new()];
let listeners = Vec::new();
let active_frame = ActiveFrame::First;
let new_frame = BumpFrameBuilder {
bump: BumpContainer::new(),
head_node_builder: |bump| bump.alloc(VNode::text("")),
}
.build();
let new = frames[0].alloc(VNode::Text(VText::new("")));
let old_frame = BumpFrameBuilder {
bump: BumpContainer::new(),
head_node_builder: |bump| bump.alloc(VNode::text("")),
}
.build();
let cur_node = new as *mut _;
let frames = ActiveFrame::from_frames(old_frame, new_frame);
Self {
hook_arena,
hooks,
props_type,
caller,
active_frame,
frames,
listeners,
parent,
frames,
root_node: cur_node,
}
}
@@ -99,15 +171,21 @@ impl Scope {
/// This function downcasts the function pointer based on the stored props_type
///
/// Props is ?Sized because we borrow the props and don't need to know the size. P (sized) is used as a marker (unsized)
pub(crate) fn run<'a, P: Properties + ?Sized>(&self, props: &'a P) {
let bump = match self.active_frame {
// If the active frame is the first, then we need to bump into the second
ActiveFrame::First => &self.frames[1],
// If the active frame is the second, then we need to bump into the first
ActiveFrame::Second => &self.frames[0],
}; // n.b, there might be a better way of doing this active frame stuff - perhaps swapping
pub(crate) fn run<'a, 'bump, P: Properties + ?Sized>(&'bump mut self, props: &'a P) {
// I really wanted to do this safely, but I don't think we can.
// We want to reset the bump before writing into it. This requires &mut to the bump
// Ouroborous lets us borrow with self, but the heads (IE the source) cannot be changed while the ref is live
let ctx = Context {
// n.b, there might be a better way of doing this active frame stuff - perhaps swapping
let frame = self.frames.next();
frame.with_bump(|bump_container| {
let bump: &mut Bump = unsafe { &mut *bump_container.0.get() };
bump.reset();
let bump = &*bump;
let ctx: Context<'bump> = Context {
scope: &*self,
_p: PhantomData {},
arena: &self.hook_arena,
@@ -128,8 +206,15 @@ impl Scope {
This is safe because we check that the generic type matches before casting.
*/
let caller = unsafe { std::mem::transmute::<*const i32, FC<P>>(self.caller) };
let new_nodes = caller(ctx, props);
let old_nodes: &mut VNode<'static> = unsafe { &mut *self.root_node };
let nodes: &'bump VNode = caller(ctx, props);
});
// let new_nodes = caller(ctx, props);
// let r = new_nodes as *const _;
// self.old_root = self.new_root;
// self.new_root = new_nodes as *const _;
// let old_nodes: &mut VNode<'static> = unsafe { &mut *self.root_node };
// TODO: Iterate through the new nodes
// move any listeners into ourself
packages/core/src/virtual_dom.rs
+48 -30
View File
@@ -1,12 +1,14 @@
// use crate::{changelist::EditList, nodes::VNode};
use crate::nodes::VNode;
use crate::{dodriodiff::DiffMachine, nodes::VNode};
use crate::{events::EventTrigger, innerlude::*};
use any::Any;
use bumpalo::Bump;
use generational_arena::{Arena, Index};
use std::{
any::{self, TypeId},
borrow::BorrowMut,
cell::{RefCell, UnsafeCell},
collections::{vec_deque, VecDeque},
future::Future,
marker::PhantomData,
rc::Rc,
@@ -24,7 +26,7 @@ pub struct VirtualDom {
/// The index of the root component.
base_scope: Index,
event_queue: Rc<RefCell<Vec<LifecycleEvent>>>,
event_queue: Rc<RefCell<VecDeque<LifecycleEvent>>>,
// Mark the root props with P, even though they're held by the root component
// This is done so we don't have a "generic" vdom, making it easier to hold references to it, especially when the holders
@@ -65,7 +67,7 @@ impl VirtualDom {
let first_event = LifecycleEvent::mount(base_scope, None, 0, root_props);
// Create an event queue with a mount for the base scope
let event_queue = Rc::new(RefCell::new(vec![first_event]));
let event_queue = Rc::new(RefCell::new(vec![first_event].into_iter().collect()));
let _root_prop_type = TypeId::of::<P>();
@@ -84,11 +86,14 @@ impl VirtualDom {
return Err(Error::WrongProps);
}
self.event_queue.borrow_mut().push(LifecycleEvent {
self.event_queue
.as_ref()
.borrow_mut()
.push_back(LifecycleEvent {
event_type: LifecycleType::PropsChanged {
props: Box::new(new_props),
},
index: self.base_scope,
component_index: self.base_scope,
});
Ok(())
@@ -103,8 +108,13 @@ impl VirtualDom {
/// Update the root props, and progress
/// Takes a bump arena to allocate into, making the diff phase as fast as possible
pub fn progress(&mut self) -> Result<()> {
let event = self.event_queue.borrow_mut().pop().ok_or(Error::NoEvent)?;
process_event(&mut self.components, event)
let event = self
.event_queue
.as_ref()
.borrow_mut()
.pop_front()
.ok_or(Error::NoEvent)?;
self.process_event(event)
}
/// This method is the most sophisticated way of updating the virtual dom after an external event has been triggered.
@@ -151,35 +161,42 @@ impl VirtualDom {
// Prop updates take prescedence over subscription updates
// Run all prop updates *first* as they will cascade into children.
// *then* run the non-prop updates that were not already covered by props
let mut events = self.event_queue.borrow_mut();
// for now, just naively process each event in the queue
for event in events.drain(..) {
process_event(&mut self.components, event)?;
let mut affected_components = Vec::new();
// It's essentially draining the vec, but with some dancing to release the RefMut
// We also want to be able to push events into the queue from processing the event
while let Some(event) = {
let new_evt = self.event_queue.as_ref().borrow_mut().pop_front();
new_evt
} {
affected_components.push(event.component_index);
self.process_event(event)?;
}
// todo!()
let diff_bump = Bump::new();
let diff_machine = DiffMachine::new(&diff_bump);
Ok(())
}
pub async fn progress_completely(&mut self) -> Result<()> {
Ok(())
}
}
/// Using mutable access to the Virtual Dom, progress a given lifecycle event
///
///
///
///
///
///
fn process_event(
// dom: &mut VirtualDom<P>,
components: &mut Arena<Scope>,
LifecycleEvent { index, event_type }: LifecycleEvent,
) -> Result<()> {
let scope = components.get(index).ok_or(Error::NoEvent)?;
/// Using mutable access to the Virtual Dom, progress a given lifecycle event
///
///
///
///
///
///
fn process_event(
&mut self,
LifecycleEvent {
component_index: index,
event_type,
}: LifecycleEvent,
) -> Result<()> {
let scope = self.components.get_mut(index).ok_or(Error::NoEvent)?;
match event_type {
// Component needs to be mounted to the virtual dom
@@ -208,7 +225,7 @@ fn process_event(
// Component was removed from the DOM
// Run any destructors and cleanup for the hooks and the dump the component
LifecycleType::Removed {} => {
let f = components.remove(index);
let f = self.components.remove(index);
// let f = dom.components.remove(index);
}
@@ -226,10 +243,11 @@ fn process_event(
}
Ok(())
}
}
pub struct LifecycleEvent {
pub index: Index,
pub component_index: Index,
pub event_type: LifecycleType,
}
@@ -265,7 +283,7 @@ impl LifecycleEvent {
props: P,
) -> Self {
Self {
index: which,
component_index: which,
event_type: LifecycleType::Mount {
to,
under,
packages/web/Cargo.toml
+3
View File
@@ -17,6 +17,8 @@ futures = "0.3.12"
wasm-logger = "0.2.0"
log = "0.4.14"
fxhash = "0.2.1"
pretty_env_logger = "0.4.0"
console_error_panic_hook = "0.1.6"
# html-validation = { path = "../html-validation", version = "0.1.1" }
[dependencies.web-sys]
@@ -36,6 +38,7 @@ features = [
"MouseEvent",
"InputEvent",
"DocumentType",
"CharacterData",
]
[profile.release]
packages/web/examples/basic.rs
+38 -33
View File
@@ -8,42 +8,47 @@ use dioxus_web::*;
fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
// log::debug!("Hello world, from the app");
console_error_panic_hook::set_once();
WebsysRenderer::simple_render(html! {
// Body
<div>
<div class="flex items-center justify-center flex-col">
<div class="flex items-center justify-center">
<div class="flex flex-col bg-white rounded p-4 w-full max-w-xs">
// Title
<div class="font-bold text-xl">
// {format!("Fibonacci Calculator: n = {}",n)}
"Jon's awesome site!!11"
</div>
// Subtext / description
<div class="text-sm text-gray-500">
// {format!("Calculated in {} nanoseconds",duration)}
// {format!("Calculated in {} nanoseconds",duration)}
"He worked so hard on it :)"
</div>
<div class="flex flex-row items-center justify-center mt-6">
// Main number
<div class="font-medium text-6xl">
"1337"
<div class="font-bold text-xl"> "Count is {}" </div>
<button onclick={move |_| log::info!("button1 clicked!")}> "increment" </button>
<button onclick={move |_| log::info!("button2 clicked!")}> "decrement" </button>
</div>
</div>
// Try another
<div class="flex flex-row justify-between mt-6">
// <a href=format!("http://localhost:8080/fib/{}", other_fib_to_try) class="underline">
"Legit made my own React"
// </a>
</div>
</div>
</div>
</div>
});
// WebsysRenderer::simple_render(html! {
// <div>
// <div class="flex items-center justify-center flex-col">
// <div class="flex items-center justify-center">
// <div class="flex flex-col bg-white rounded p-4 w-full max-w-xs">
// // Title
// <div class="font-bold text-xl">
// "Jon's awesome site!!11"
// </div>
// // Subtext / description
// <div class="text-sm text-gray-500">
// "He worked so hard on it :)"
// </div>
// <div class="flex flex-row items-center justify-center mt-6">
// // Main number
// <div class="font-medium text-6xl">
// "1337"
// </div>
// </div>
// // Try another
// <div class="flex flex-row justify-between mt-6">
// // <a href=format!("http://localhost:8080/fib/{}", other_fib_to_try) class="underline">
// "Legit made my own React"
// // </a>
// </div>
// </div>
// </div>
// </div>
// </div>
// });
}
packages/web/src/interpreter.rs
+274 -8
View File
@@ -1,17 +1,16 @@
// use crate::cached_set::CacheId;
// use crate::{Element, EventsTrampoline};
use dioxus_core::changelist::Edit;
use fxhash::FxHashMap;
use log::{debug, info, log};
use wasm_bindgen::{closure::Closure, JsCast};
use web_sys::{window, Document, Element, Event, Node};
#[derive(Clone, Copy, PartialEq, Eq, Debug, Hash)]
pub(crate) struct CacheId(u32);
pub struct CacheId(u32);
#[derive(Debug)]
pub(crate) struct ChangeListInterpreter {
pub struct PatchMachine {
container: Element,
stack: Stack,
pub stack: Stack,
temporaries: FxHashMap<u32, Node>,
templates: FxHashMap<CacheId, Node>,
callback: Option<Closure<dyn FnMut(&Event)>>,
@@ -19,7 +18,7 @@ pub(crate) struct ChangeListInterpreter {
}
#[derive(Debug, Default)]
struct Stack {
pub struct Stack {
list: Vec<Node>,
}
@@ -47,11 +46,19 @@ impl Stack {
}
pub fn top(&self) -> &Node {
&self.list[self.list.len() - 1]
log::info!(
"Called top of stack with {} items remaining",
self.list.len()
);
match self.list.last() {
Some(a) => a,
None => panic!("should not happen"),
}
// &self.list[self.list.len() - 1]
}
}
impl ChangeListInterpreter {
impl PatchMachine {
pub fn new(container: Element) -> Self {
let document = window()
.expect("must have access to the window")
@@ -114,6 +121,265 @@ impl ChangeListInterpreter {
// }) as Box<dyn FnMut(&Event)>));
}
pub fn handle_edit(&mut self, edit: &Edit) {
match *edit {
// 0
Edit::SetText { text } => {
//
self.stack.top().set_text_content(Some(text))
}
// 1
Edit::RemoveSelfAndNextSiblings {} => {
let node = self.stack.pop();
let mut sibling = node.next_sibling();
while let Some(inner) = sibling {
let temp = inner.next_sibling();
if let Some(sibling) = inner.dyn_ref::<Element>() {
sibling.remove();
}
sibling = temp;
}
if let Some(node) = node.dyn_ref::<Element>() {
node.remove();
}
}
// 2
Edit::ReplaceWith => {
let new_node = self.stack.pop();
let old_node = self.stack.pop();
if old_node.has_type::<Element>() {
old_node
.dyn_ref::<Element>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else if old_node.has_type::<web_sys::CharacterData>() {
old_node
.dyn_ref::<web_sys::CharacterData>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else if old_node.has_type::<web_sys::DocumentType>() {
old_node
.dyn_ref::<web_sys::DocumentType>()
.unwrap()
.replace_with_with_node_1(&new_node)
.unwrap();
} else {
panic!("Cannot replace node: {:?}", old_node);
}
self.stack.push(new_node);
}
// 3
Edit::SetAttribute { name, value } => {
let node = self.stack.top();
if let Some(node) = node.dyn_ref::<Element>() {
node.set_attribute(name, value).unwrap();
// Some attributes are "volatile" and don't work through `setAttribute`.
// TODO:
// if name == "value" {
// node.set_value(value);
// }
// if name == "checked" {
// node.set_checked(true);
// }
// if name == "selected" {
// node.set_selected(true);
// }
}
}
// 4
Edit::RemoveAttribute { name } => {
let node = self.stack.top();
if let Some(node) = node.dyn_ref::<Element>() {
node.remove_attribute(name).unwrap();
// Some attributes are "volatile" and don't work through `removeAttribute`.
// TODO:
// if name == "value" {
// node.set_value("");
// }
// if name == "checked" {
// node.set_checked(false);
// }
// if name == "selected" {
// node.set_selected(false);
// }
}
}
// 5
Edit::PushReverseChild { n } => {
let parent = self.stack.top();
let children = parent.child_nodes();
let child = children.get(children.length() - n - 1).unwrap();
self.stack.push(child);
}
// 6
Edit::PopPushChild { n } => {
self.stack.pop();
let parent = self.stack.top();
let children = parent.child_nodes();
let child = children.get(n).unwrap();
self.stack.push(child);
}
// 7
Edit::Pop => {
self.stack.pop();
}
// 8
Edit::AppendChild => {
let child = self.stack.pop();
self.stack.top().append_child(&child).unwrap();
}
// 9
Edit::CreateTextNode { text } => self.stack.push(
self.document
.create_text_node(text)
.dyn_into::<Node>()
.unwrap(),
),
// 10
Edit::CreateElement { tag_name } => {
let el = self
.document
.create_element(tag_name)
.unwrap()
.dyn_into::<Node>()
.unwrap();
self.stack.push(el);
}
// 11
Edit::NewEventListener { event_type, a, b } => {
let el = self.stack.top();
let el = el
.dyn_ref::<Element>()
.expect(&format!("not an element: {:?}", el));
el.add_event_listener_with_callback(
event_type,
self.callback.as_ref().unwrap().as_ref().unchecked_ref(),
)
.unwrap();
debug!("adding attributes: {}, {}", a, b);
el.set_attribute(&format!("dodrio-a-{}", event_type), &a.to_string())
.unwrap();
el.set_attribute(&format!("dodrio-b-{}", event_type), &b.to_string())
.unwrap();
}
// 12
Edit::UpdateEventListener { event_type, a, b } => {
if let Some(el) = self.stack.top().dyn_ref::<Element>() {
el.set_attribute(&format!("dodrio-a-{}", event_type), &a.to_string())
.unwrap();
el.set_attribute(&format!("dodrio-b-{}", event_type), &b.to_string())
.unwrap();
}
}
// 13
Edit::RemoveEventListener { event_type } => {
if let Some(el) = self.stack.top().dyn_ref::<Element>() {
el.remove_event_listener_with_callback(
event_type,
self.callback.as_ref().unwrap().as_ref().unchecked_ref(),
)
.unwrap();
}
}
// 14
Edit::CreateElementNs { tag_name, ns } => {
let el = self
.document
.create_element_ns(Some(ns), tag_name)
.unwrap()
.dyn_into::<Node>()
.unwrap();
self.stack.push(el);
}
// 15
Edit::SaveChildrenToTemporaries {
mut temp,
start,
end,
} => {
let parent = self.stack.top();
let children = parent.child_nodes();
for i in start..end {
self.temporaries.insert(temp, children.get(i).unwrap());
temp += 1;
}
}
// 16
Edit::PushChild { n } => {
let parent = self.stack.top();
let child = parent.child_nodes().get(n).unwrap();
self.stack.push(child);
}
// 17
Edit::PushTemporary { temp } => {
let t = self.temporaries.get(&temp).unwrap().clone();
self.stack.push(t);
}
// 18
Edit::InsertBefore => {
let before = self.stack.pop();
let after = self.stack.pop();
after
.parent_node()
.unwrap()
.insert_before(&before, Some(&after))
.unwrap();
self.stack.push(before);
}
// 19
Edit::PopPushReverseChild { n } => {
self.stack.pop();
let parent = self.stack.top();
let children = parent.child_nodes();
let child = children.get(children.length() - n - 1).unwrap();
self.stack.push(child);
}
// 20
Edit::RemoveChild { n } => {
let parent = self.stack.top();
if let Some(child) = parent.child_nodes().get(n).unwrap().dyn_ref::<Element>() {
child.remove();
}
}
// 21
Edit::SetClass { class_name } => {
if let Some(el) = self.stack.top().dyn_ref::<Element>() {
el.set_class_name(class_name);
}
}
}
}
// 0
pub fn set_text(&mut self, text: &str) {
self.stack.top().set_text_content(Some(text));
packages/web/src/lib.rs
+115 -428
View File
@@ -1,5 +1,5 @@
//! Dioxus WebSys
//!
//! --------------
//! This crate implements a renderer of the Dioxus Virtual DOM for the web browser.
//!
//! While it is possible to render a single component directly, it is not possible to render component trees. For these,
@@ -16,8 +16,11 @@
//! ```
//!
//! The `WebsysRenderer` is particularly useful when needing to cache a Virtual DOM in between requests
use web_sys::{window, Document, Element, Event, Node};
use dioxus::{patch::Patch, prelude::VText};
use dioxus::prelude::VElement;
// use dioxus::{patch::Patch, prelude::VText};
// use dioxus::{patch::Patch, prelude::VText};
pub use dioxus_core as dioxus;
use dioxus_core::{
events::EventTrigger,
@@ -26,6 +29,7 @@ use dioxus_core::{
use futures::{channel::mpsc, future, SinkExt, StreamExt};
use mpsc::UnboundedSender;
pub mod interpreter;
use interpreter::PatchMachine;
/// The `WebsysRenderer` provides a way of rendering a Dioxus Virtual DOM to the browser's DOM.
/// Under the hood, we leverage WebSys and interact directly with the DOM
@@ -71,18 +75,18 @@ impl WebsysRenderer {
let (sender, mut receiver) = mpsc::unbounded::<EventTrigger>();
// Iterate through the nodes, attaching the closure and sender to the listener
{
let mut remote_sender = sender.clone();
let listener = move || {
let event = EventTrigger::new();
wasm_bindgen_futures::spawn_local(async move {
remote_sender
.send(event)
.await
.expect("Updating receiver failed");
})
};
}
// {
// let mut remote_sender = sender.clone();
// let listener = move || {
// let event = EventTrigger::new();
// wasm_bindgen_futures::spawn_local(async move {
// remote_sender
// .send(event)
// .await
// .expect("Updating receiver failed");
// })
// };
// }
// Event loop waits for the receiver to finish up
// TODO! Connect the sender to the virtual dom's suspense system
@@ -105,433 +109,116 @@ impl WebsysRenderer {
pub fn simple_render(tree: impl for<'a> Fn(&'a Bump) -> VNode<'a>) {
let bump = Bump::new();
// Choose the body to render the app into
let window = web_sys::window().expect("should have access to the Window");
let document = window
.document()
.expect("should have access to the Document");
let body = document.body().unwrap();
// Build a dummy div
let container: &Element = body.as_ref();
container.set_inner_html("");
container
.append_child(
document
.create_element("div")
.expect("should create element OK")
.as_ref(),
)
.expect("should append child OK");
// Create the old dom and the new dom
// The old is just an empty div, like the one we made above
let old = html! { <div> </div> }(&bump);
let created = create_dom_node(&old);
let root_node = created.node;
let new = tree(&bump);
let mut machine = DiffMachine::new();
// Build a machine that diffs doms
let mut diff_machine = DiffMachine::new(&bump);
diff_machine.diff_node(&old, &new);
let patches = machine.diff(&old, &new);
// log::info!("There are {:?} patches", patches.len());
// Build a machine that patches doms
// In practice, the diff machine might be on a different computer, sending us patches
let mut patch_machine = PatchMachine::new(body.clone().into());
let root2 = root_node.clone();
patch(root_node, &patches).expect("Failed to simple render");
let document = web_sys::window().unwrap().document().unwrap();
// need to make sure we push the root node onto the stack before trying to run anything
// this provides an entrance for the diffing machine to do its work
// Here, we grab the div out of the container (the body) to connect with the dummy div we made above
// This is because we don't support fragments (yet)
let root_node = container.first_child().unwrap();
patch_machine.stack.push(root_node);
document.body().unwrap().append_child(&root2);
// log::info!("Succesfully patched the dom");
// Consume the diff machine, generating the patch list
for patch in diff_machine.consume() {
patch_machine.handle_edit(&patch);
log::info!("Patch is {:?}", patch);
}
}
pub fn complex_render(
tree1: impl for<'a> Fn(&'a Bump) -> VNode<'a>,
tree2: impl for<'a> Fn(&'a Bump) -> VNode<'a>,
) {
let bump = Bump::new();
let old = tree1(&bump);
let new = tree2(&bump);
let mut machine = DiffMachine::new(&bump);
machine.diff_node(&old, &new);
for patch in machine.consume() {
println!("Patch is {:?}", patch);
}
}
}
use std::collections::HashMap;
use std::collections::HashSet;
use std::{cmp::min, rc::Rc};
use wasm_bindgen::JsCast;
use wasm_bindgen::JsValue;
use web_sys::{Element, Node, Text};
#[cfg(test)]
mod tests {
use std::env;
/// Apply all of the patches to our old root node in order to create the new root node
/// that we desire.
/// This is usually used after diffing two virtual nodes.
pub fn patch<N: Into<Node>>(root_node: N, patches: &Vec<Patch>) -> Result<(), JsValue> {
// pub fn patch<N: Into<Node>>(root_node: N, patches: &Vec<Patch>) -> Result<ActiveClosures, JsValue> {
let root_node: Node = root_node.into();
use super::*;
use dioxus_core as dioxus;
use dioxus_core::prelude::html;
let mut cur_node_idx = 0;
let mut nodes_to_find = HashSet::new();
for patch in patches {
nodes_to_find.insert(patch.node_idx());
#[test]
fn simple_patch() {
env::set_var("RUST_LOG", "trace");
pretty_env_logger::init();
log::info!("Hello!");
let renderer = WebsysRenderer::simple_render(html! {
<div>
"Hello world"
<button onclick={move |_| log::info!("button1 clicked!")}> "click me" </button>
<button onclick={move |_| log::info!("button2 clicked!")}> "click me" </button>
</div>
});
}
let mut element_nodes_to_patch = HashMap::new();
let mut text_nodes_to_patch = HashMap::new();
// Closures that were added to the DOM during this patch operation.
// let mut active_closures = HashMap::new();
find_nodes(
root_node,
&mut cur_node_idx,
&mut nodes_to_find,
&mut element_nodes_to_patch,
&mut text_nodes_to_patch,
);
for patch in patches {
let patch_node_idx = patch.node_idx();
if let Some(element) = element_nodes_to_patch.get(&patch_node_idx) {
let new_closures = apply_element_patch(&element, &patch)?;
// active_closures.extend(new_closures);
continue;
}
if let Some(text_node) = text_nodes_to_patch.get(&patch_node_idx) {
apply_text_patch(&text_node, &patch)?;
continue;
}
unreachable!("Getting here means we didn't find the element or next node that we were supposed to patch.")
}
// Ok(active_closures)
Ok(())
}
fn find_nodes(
root_node: Node,
cur_node_idx: &mut usize,
nodes_to_find: &mut HashSet<usize>,
element_nodes_to_patch: &mut HashMap<usize, Element>,
text_nodes_to_patch: &mut HashMap<usize, Text>,
) {
if nodes_to_find.len() == 0 {
return;
}
// We use child_nodes() instead of children() because children() ignores text nodes
let children = root_node.child_nodes();
let child_node_count = children.length();
// If the root node matches, mark it for patching
if nodes_to_find.get(&cur_node_idx).is_some() {
match root_node.node_type() {
Node::ELEMENT_NODE => {
element_nodes_to_patch.insert(*cur_node_idx, root_node.unchecked_into());
}
Node::TEXT_NODE => {
text_nodes_to_patch.insert(*cur_node_idx, root_node.unchecked_into());
}
other => unimplemented!("Unsupported root node type: {}", other),
}
nodes_to_find.remove(&cur_node_idx);
}
*cur_node_idx += 1;
for i in 0..child_node_count {
let node = children.item(i).unwrap();
match node.node_type() {
Node::ELEMENT_NODE => {
find_nodes(
node,
cur_node_idx,
nodes_to_find,
element_nodes_to_patch,
text_nodes_to_patch,
#[test]
fn complex_patch() {
env::set_var("RUST_LOG", "trace");
pretty_env_logger::init();
log::info!("Hello!");
let renderer = WebsysRenderer::complex_render(
html! {
<div>
"Hello world"
<div>
<h1> "Heading" </h1>
</div>
</div>
},
html! {
<div>
"Hello world"
"Hello world"
"Hello world"
<div>
<h1> "Heading" </h1>
</div>
</div>
},
);
}
Node::TEXT_NODE => {
if nodes_to_find.get(&cur_node_idx).is_some() {
text_nodes_to_patch.insert(*cur_node_idx, node.unchecked_into());
}
*cur_node_idx += 1;
}
Node::COMMENT_NODE => {
// At this time we do not support user entered comment nodes, so if we see a comment
// then it was a delimiter created by virtual-dom-rs in order to ensure that two
// neighboring text nodes did not get merged into one by the browser. So we skip
// over this virtual-dom-rs generated comment node.
}
_other => {
// Ignoring unsupported child node type
// TODO: What do we do with this situation? Log a warning?
}
}
}
}
// pub type ActiveClosures = HashMap<u32, Vec<DynClosure>>;
// fn apply_element_patch(node: &Element, patch: &Patch) -> Result<ActiveClosures, JsValue> {
fn apply_element_patch(node: &Element, patch: &Patch) -> Result<(), JsValue> {
// let active_closures = HashMap::new();
match patch {
Patch::AddAttributes(_node_idx, attributes) => {
for (attrib_name, attrib_val) in attributes.iter() {
node.set_attribute(attrib_name, attrib_val)?;
}
// Ok(active_closures)
Ok(())
}
Patch::RemoveAttributes(_node_idx, attributes) => {
for attrib_name in attributes.iter() {
node.remove_attribute(attrib_name)?;
}
// Ok(active_closures)
Ok(())
}
Patch::Replace(_node_idx, new_node) => {
let created_node = create_dom_node(&new_node);
node.replace_with_with_node_1(&created_node.node)?;
Ok(())
// Ok(created_node.closures)
}
Patch::TruncateChildren(_node_idx, num_children_remaining) => {
let children = node.child_nodes();
let mut child_count = children.length();
// We skip over any separators that we placed between two text nodes
// -> `<!--ptns-->`
// and trim all children that come after our new desired `num_children_remaining`
let mut non_separator_children_found = 0;
for index in 0 as u32..child_count {
let child = children
.get(min(index, child_count - 1))
.expect("Potential child to truncate");
// If this is a comment node then we know that it is a `<!--ptns-->`
// text node separator that was created in virtual_node/mod.rs.
if child.node_type() == Node::COMMENT_NODE {
continue;
}
non_separator_children_found += 1;
if non_separator_children_found <= *num_children_remaining as u32 {
continue;
}
node.remove_child(&child).expect("Truncated children");
child_count -= 1;
}
Ok(())
// Ok(active_closures)
}
Patch::AppendChildren(_node_idx, new_nodes) => {
let parent = &node;
let mut active_closures = HashMap::new();
for new_node in new_nodes {
let created_node = create_dom_node(&new_node);
// let created_node = new_node.create_dom_node();
parent.append_child(&created_node.node)?;
active_closures.extend(created_node.closures);
}
Ok(())
// Ok(active_closures)
}
Patch::ChangeText(_node_idx, _new_node) => {
unreachable!("Elements should not receive ChangeText patches.")
}
}
}
fn apply_text_patch(node: &Text, patch: &Patch) -> Result<(), JsValue> {
match patch {
Patch::ChangeText(_node_idx, new_node) => {
node.set_node_value(Some(&new_node.text));
}
Patch::Replace(_node_idx, new_node) => {
node.replace_with_with_node_1(&create_dom_node(&new_node).node)?;
// node.replace_with_with_node_1(&new_node.create_dom_node().node)?;
}
other => unreachable!(
"Text nodes should only receive ChangeText or Replace patches, not ",
// other,
// "Text nodes should only receive ChangeText or Replace patches, not {:?}.",
// other,
),
};
Ok(())
}
/// A node along with all of the closures that were created for that
/// node's events and all of it's child node's events.
pub struct CreatedNode<T> {
/// A `Node` or `Element` that was created from a `VirtualNode`
pub node: T,
/// A map of a node's unique identifier along with all of the Closures for that node.
///
/// The DomUpdater uses this to look up nodes and see if they're still in the page. If not
/// the reference that we maintain to their closure will be dropped, thus freeing the Closure's
/// memory.
pub closures: HashMap<u32, Vec<DynClosure>>,
}
/// Box<dyn AsRef<JsValue>>> is our js_sys::Closure. Stored this way to allow us to store
/// any Closure regardless of the arguments.
pub type DynClosure = Rc<dyn AsRef<JsValue>>;
impl<T> CreatedNode<T> {
pub fn without_closures<N: Into<T>>(node: N) -> Self {
CreatedNode {
node: node.into(),
closures: HashMap::with_capacity(0),
}
}
}
impl<T> std::ops::Deref for CreatedNode<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
&self.node
}
}
impl From<CreatedNode<Element>> for CreatedNode<Node> {
fn from(other: CreatedNode<Element>) -> CreatedNode<Node> {
CreatedNode {
node: other.node.into(),
closures: other.closures,
}
}
}
fn create_dom_node(node: &VNode<'_>) -> CreatedNode<Node> {
match node {
VNode::Text(text_node) => CreatedNode::without_closures(create_text_node(text_node)),
VNode::Element(element_node) => create_element_node(element_node).into(),
// VNode::Element(element_node) => element_node.create_element_node().into(),
VNode::Suspended => todo!(" not iimplemented yet"),
VNode::Component(_) => todo!(" not iimplemented yet"),
}
}
/// Build a DOM element by recursively creating DOM nodes for this element and it's
/// children, it's children's children, etc.
pub fn create_element_node(node: &dioxus_core::nodes::VElement) -> CreatedNode<Element> {
let document = web_sys::window().unwrap().document().unwrap();
// TODO: enable svg again
// let element = if html_validation::is_svg_namespace(&node.tag_name) {
// document
// .create_element_ns(Some("http://www.w3.org/2000/svg"), &node.tag_name)
// .unwrap()
// } else {
let element = document.create_element(&node.tag_name).unwrap();
// };
let mut closures = HashMap::new();
node.attributes
.iter()
.map(|f| (f.name, f.value))
.for_each(|(name, value)| {
if name == "unsafe_inner_html" {
element.set_inner_html(value);
return;
}
element
.set_attribute(name, value)
.expect("Set element attribute in create element");
});
// if node.events.0.len() > 0 {
// let unique_id = create_unique_identifier();
// element
// .set_attribute("data-vdom-id".into(), &unique_id.to_string())
// .expect("Could not set attribute on element");
// closures.insert(unique_id, vec![]);
// node.events.0.iter().for_each(|(onevent, callback)| {
// // onclick -> click
// let event = &onevent[2..];
// let current_elem: &EventTarget = element.dyn_ref().unwrap();
// current_elem
// .add_event_listener_with_callback(event, callback.as_ref().as_ref().unchecked_ref())
// .unwrap();
// closures
// .get_mut(&unique_id)
// .unwrap()
// .push(Rc::clone(callback));
// });
// }
let mut previous_node_was_text = false;
node.children.iter().for_each(|child| {
// log::info!("Patching child");
match child {
VNode::Text(text_node) => {
let current_node = element.as_ref() as &web_sys::Node;
// We ensure that the text siblings are patched by preventing the browser from merging
// neighboring text nodes. Originally inspired by some of React's work from 2016.
// -> https://reactjs.org/blog/2016/04/07/react-v15.html#major-changes
// -> https://github.com/facebook/react/pull/5753
//
// `ptns` = Percy text node separator
if previous_node_was_text {
let separator = document.create_comment("ptns");
current_node
.append_child(separator.as_ref() as &web_sys::Node)
.unwrap();
}
current_node
.append_child(&create_text_node(&text_node))
.unwrap();
previous_node_was_text = true;
}
VNode::Element(element_node) => {
previous_node_was_text = false;
let child = create_element_node(element_node);
// let child = element_node.create_element_node();
let child_elem: Element = child.node;
closures.extend(child.closures);
element.append_child(&child_elem).unwrap();
}
VNode::Suspended => {
todo!("Not yet supported")
}
VNode::Component(_) => {
todo!("Not yet supported")
}
}
});
// TODO: connect on mount to the event system somehow
// if let Some(on_create_elem) = node.events.0.get("on_create_elem") {
// let on_create_elem: &js_sys::Function = on_create_elem.as_ref().as_ref().unchecked_ref();
// on_create_elem
// .call1(&wasm_bindgen::JsValue::NULL, &element)
// .unwrap();
// }
CreatedNode {
node: element,
closures,
}
}
/// Return a `Text` element from a `VirtualNode`, typically right before adding it
/// into the DOM.
pub fn create_text_node(node: &VText) -> Text {
let document = web_sys::window().unwrap().document().unwrap();
document.create_text_node(&node.text)
}
// /// For any listeners in the tree, attach the sender closure.
// /// When a event is triggered, we convert it into the synthetic event type and dump it back in the Virtual Dom's queu
// fn attach_listeners(sender: &UnboundedSender<EventTrigger>, dom: &VirtualDom) {}
// fn render_diffs() {}
packages/web/src/percypatch.rs
+409
View File
@@ -0,0 +1,409 @@
use std::collections::HashMap;
use std::collections::HashSet;
use std::{cmp::min, rc::Rc};
use wasm_bindgen::JsCast;
use wasm_bindgen::JsValue;
use web_sys::{Element, Node, Text};
/// Apply all of the patches to our old root node in order to create the new root node
/// that we desire.
/// This is usually used after diffing two virtual nodes.
pub fn patch<N: Into<Node>>(root_node: N, patches: &Vec<Patch>) -> Result<(), JsValue> {
// pub fn patch<N: Into<Node>>(root_node: N, patches: &Vec<Patch>) -> Result<ActiveClosures, JsValue> {
let root_node: Node = root_node.into();
let mut cur_node_idx = 0;
let mut nodes_to_find = HashSet::new();
for patch in patches {
nodes_to_find.insert(patch.node_idx());
}
let mut element_nodes_to_patch = HashMap::new();
let mut text_nodes_to_patch = HashMap::new();
// Closures that were added to the DOM during this patch operation.
// let mut active_closures = HashMap::new();
find_nodes(
root_node,
&mut cur_node_idx,
&mut nodes_to_find,
&mut element_nodes_to_patch,
&mut text_nodes_to_patch,
);
for patch in patches {
let patch_node_idx = patch.node_idx();
if let Some(element) = element_nodes_to_patch.get(&patch_node_idx) {
let new_closures = apply_element_patch(&element, &patch)?;
// active_closures.extend(new_closures);
continue;
}
if let Some(text_node) = text_nodes_to_patch.get(&patch_node_idx) {
apply_text_patch(&text_node, &patch)?;
continue;
}
unreachable!("Getting here means we didn't find the element or next node that we were supposed to patch.")
}
// Ok(active_closures)
Ok(())
}
fn find_nodes(
root_node: Node,
cur_node_idx: &mut usize,
nodes_to_find: &mut HashSet<usize>,
element_nodes_to_patch: &mut HashMap<usize, Element>,
text_nodes_to_patch: &mut HashMap<usize, Text>,
) {
if nodes_to_find.len() == 0 {
return;
}
// We use child_nodes() instead of children() because children() ignores text nodes
let children = root_node.child_nodes();
let child_node_count = children.length();
// If the root node matches, mark it for patching
if nodes_to_find.get(&cur_node_idx).is_some() {
match root_node.node_type() {
Node::ELEMENT_NODE => {
element_nodes_to_patch.insert(*cur_node_idx, root_node.unchecked_into());
}
Node::TEXT_NODE => {
text_nodes_to_patch.insert(*cur_node_idx, root_node.unchecked_into());
}
other => unimplemented!("Unsupported root node type: {}", other),
}
nodes_to_find.remove(&cur_node_idx);
}
*cur_node_idx += 1;
for i in 0..child_node_count {
let node = children.item(i).unwrap();
match node.node_type() {
Node::ELEMENT_NODE => {
find_nodes(
node,
cur_node_idx,
nodes_to_find,
element_nodes_to_patch,
text_nodes_to_patch,
);
}
Node::TEXT_NODE => {
if nodes_to_find.get(&cur_node_idx).is_some() {
text_nodes_to_patch.insert(*cur_node_idx, node.unchecked_into());
}
*cur_node_idx += 1;
}
Node::COMMENT_NODE => {
// At this time we do not support user entered comment nodes, so if we see a comment
// then it was a delimiter created by virtual-dom-rs in order to ensure that two
// neighboring text nodes did not get merged into one by the browser. So we skip
// over this virtual-dom-rs generated comment node.
}
_other => {
// Ignoring unsupported child node type
// TODO: What do we do with this situation? Log a warning?
}
}
}
}
// pub type ActiveClosures = HashMap<u32, Vec<DynClosure>>;
// fn apply_element_patch(node: &Element, patch: &Patch) -> Result<ActiveClosures, JsValue> {
fn apply_element_patch(node: &Element, patch: &Patch) -> Result<(), JsValue> {
// let active_closures = HashMap::new();
match patch {
Patch::AddAttributes(_node_idx, attributes) => {
for (attrib_name, attrib_val) in attributes.iter() {
node.set_attribute(attrib_name, attrib_val)?;
}
// Ok(active_closures)
Ok(())
}
Patch::RemoveAttributes(_node_idx, attributes) => {
for attrib_name in attributes.iter() {
node.remove_attribute(attrib_name)?;
}
// Ok(active_closures)
Ok(())
}
Patch::Replace(_node_idx, new_node) => {
let created_node = create_dom_node(&new_node);
node.replace_with_with_node_1(&created_node.node)?;
Ok(())
// Ok(created_node.closures)
}
Patch::TruncateChildren(_node_idx, num_children_remaining) => {
let children = node.child_nodes();
let mut child_count = children.length();
// We skip over any separators that we placed between two text nodes
// -> `<!--ptns-->`
// and trim all children that come after our new desired `num_children_remaining`
let mut non_separator_children_found = 0;
for index in 0 as u32..child_count {
let child = children
.get(min(index, child_count - 1))
.expect("Potential child to truncate");
// If this is a comment node then we know that it is a `<!--ptns-->`
// text node separator that was created in virtual_node/mod.rs.
if child.node_type() == Node::COMMENT_NODE {
continue;
}
non_separator_children_found += 1;
if non_separator_children_found <= *num_children_remaining as u32 {
continue;
}
node.remove_child(&child).expect("Truncated children");
child_count -= 1;
}
Ok(())
// Ok(active_closures)
}
Patch::AppendChildren(_node_idx, new_nodes) => {
let parent = &node;
let mut active_closures = HashMap::new();
for new_node in new_nodes {
let created_node = create_dom_node(&new_node);
// let created_node = new_node.create_dom_node();
parent.append_child(&created_node.node)?;
active_closures.extend(created_node.closures);
}
Ok(())
// Ok(active_closures)
}
Patch::ChangeText(_node_idx, _new_node) => {
unreachable!("Elements should not receive ChangeText patches.")
}
}
}
fn apply_text_patch(node: &Text, patch: &Patch) -> Result<(), JsValue> {
match patch {
Patch::ChangeText(_node_idx, new_node) => {
node.set_node_value(Some(&new_node.text));
}
Patch::Replace(_node_idx, new_node) => {
node.replace_with_with_node_1(&create_dom_node(&new_node).node)?;
// node.replace_with_with_node_1(&new_node.create_dom_node().node)?;
}
other => unreachable!(
"Text nodes should only receive ChangeText or Replace patches, not ",
// other,
// "Text nodes should only receive ChangeText or Replace patches, not {:?}.",
// other,
),
};
Ok(())
}
/// A node along with all of the closures that were created for that
/// node's events and all of it's child node's events.
pub struct CreatedNode<T> {
/// A `Node` or `Element` that was created from a `VirtualNode`
pub node: T,
/// A map of a node's unique identifier along with all of the Closures for that node.
///
/// The DomUpdater uses this to look up nodes and see if they're still in the page. If not
/// the reference that we maintain to their closure will be dropped, thus freeing the Closure's
/// memory.
pub closures: HashMap<u32, Vec<DynClosure>>,
}
/// Box<dyn AsRef<JsValue>>> is our js_sys::Closure. Stored this way to allow us to store
/// any Closure regardless of the arguments.
pub type DynClosure = Rc<dyn AsRef<JsValue>>;
impl<T> CreatedNode<T> {
pub fn without_closures<N: Into<T>>(node: N) -> Self {
CreatedNode {
node: node.into(),
closures: HashMap::with_capacity(0),
}
}
}
impl<T> std::ops::Deref for CreatedNode<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
&self.node
}
}
impl From<CreatedNode<Element>> for CreatedNode<Node> {
fn from(other: CreatedNode<Element>) -> CreatedNode<Node> {
CreatedNode {
node: other.node.into(),
closures: other.closures,
}
}
}
fn create_dom_node(node: &VNode<'_>) -> CreatedNode<Node> {
match node {
VNode::Text(text_node) => CreatedNode::without_closures(create_text_node(text_node)),
VNode::Element(element_node) => create_element_node(element_node).into(),
// VNode::Element(element_node) => element_node.create_element_node().into(),
VNode::Suspended => todo!(" not iimplemented yet"),
VNode::Component(_) => todo!(" not iimplemented yet"),
}
}
/// Build a DOM element by recursively creating DOM nodes for this element and it's
/// children, it's children's children, etc.
pub fn create_element_node(node: &dioxus_core::nodes::VElement) -> CreatedNode<Element> {
let document = web_sys::window().unwrap().document().unwrap();
// TODO: enable svg again
// let element = if html_validation::is_svg_namespace(&node.tag_name) {
// document
// .create_element_ns(Some("http://www.w3.org/2000/svg"), &node.tag_name)
// .unwrap()
// } else {
let element = document.create_element(&node.tag_name).unwrap();
// };
let mut closures = HashMap::new();
node.attributes
.iter()
.map(|f| (f.name, f.value))
.for_each(|(name, value)| {
if name == "unsafe_inner_html" {
element.set_inner_html(value);
return;
}
element
.set_attribute(name, value)
.expect("Set element attribute in create element");
});
// if node.events.0.len() > 0 {
// let unique_id = create_unique_identifier();
// element
// .set_attribute("data-vdom-id".into(), &unique_id.to_string())
// .expect("Could not set attribute on element");
// closures.insert(unique_id, vec![]);
// node.events.0.iter().for_each(|(onevent, callback)| {
// // onclick -> click
// let event = &onevent[2..];
// let current_elem: &EventTarget = element.dyn_ref().unwrap();
// current_elem
// .add_event_listener_with_callback(event, callback.as_ref().as_ref().unchecked_ref())
// .unwrap();
// closures
// .get_mut(&unique_id)
// .unwrap()
// .push(Rc::clone(callback));
// });
// }
let mut previous_node_was_text = false;
node.children.iter().for_each(|child| {
// log::info!("Patching child");
match child {
VNode::Text(text_node) => {
let current_node = element.as_ref() as &web_sys::Node;
// We ensure that the text siblings are patched by preventing the browser from merging
// neighboring text nodes. Originally inspired by some of React's work from 2016.
// -> https://reactjs.org/blog/2016/04/07/react-v15.html#major-changes
// -> https://github.com/facebook/react/pull/5753
//
// `ptns` = Percy text node separator
if previous_node_was_text {
let separator = document.create_comment("ptns");
current_node
.append_child(separator.as_ref() as &web_sys::Node)
.unwrap();
}
current_node
.append_child(&create_text_node(&text_node))
.unwrap();
previous_node_was_text = true;
}
VNode::Element(element_node) => {
previous_node_was_text = false;
let child = create_element_node(element_node);
// let child = element_node.create_element_node();
let child_elem: Element = child.node;
closures.extend(child.closures);
element.append_child(&child_elem).unwrap();
}
VNode::Suspended => {
todo!("Not yet supported")
}
VNode::Component(_) => {
todo!("Not yet supported")
}
}
});
// TODO: connect on mount to the event system somehow
// if let Some(on_create_elem) = node.events.0.get("on_create_elem") {
// let on_create_elem: &js_sys::Function = on_create_elem.as_ref().as_ref().unchecked_ref();
// on_create_elem
// .call1(&wasm_bindgen::JsValue::NULL, &element)
// .unwrap();
// }
CreatedNode {
node: element,
closures,
}
}
/// Return a `Text` element from a `VirtualNode`, typically right before adding it
/// into the DOM.
pub fn create_text_node(node: &VText) -> Text {
let document = web_sys::window().unwrap().document().unwrap();
document.create_text_node(&node.text)
}
// /// For any listeners in the tree, attach the sender closure.
// /// When a event is triggered, we convert it into the synthetic event type and dump it back in the Virtual Dom's queu
// fn attach_listeners(sender: &UnboundedSender<EventTrigger>, dom: &VirtualDom) {}
// fn render_diffs() {}