dioxus/packages/core/src/virtual_dom.rs

723 lines
26 KiB
Rust
Raw Normal View History

2021-05-16 06:06:02 +00:00
//! # VirtualDOM Implementation for Rust
2021-09-10 00:58:48 +00:00
//!
2021-05-16 06:06:02 +00:00
//! This module provides the primary mechanics to create a hook-based, concurrent VDOM for Rust.
2021-08-27 13:40:04 +00:00
2021-11-05 20:28:08 +00:00
use crate::innerlude::*;
2021-10-04 05:28:04 +00:00
use futures_channel::mpsc::{UnboundedReceiver, UnboundedSender};
use futures_util::{Future, StreamExt};
2021-11-05 20:28:08 +00:00
use fxhash::FxHashSet;
use indexmap::IndexSet;
2021-11-12 06:36:33 +00:00
use smallvec::SmallVec;
2021-11-05 20:28:08 +00:00
use std::pin::Pin;
2021-11-12 03:07:38 +00:00
use std::sync::Arc;
2021-11-05 20:28:08 +00:00
use std::task::Poll;
use std::{any::Any, collections::VecDeque};
2021-10-04 05:28:04 +00:00
/// A virtual node system that progresses user events and diffs UI trees.
///
2021-11-10 22:09:52 +00:00
///
/// ## Guide
///
/// Components are defined as simple functions that take [`Context`] and a [`Properties`] type and return an [`Element`].
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// #[derive(Props, PartialEq)]
/// struct AppProps {
/// title: String
/// }
///
/// fn App(cx: Context, props: &AppProps) -> Element {
/// cx.render(rsx!(
/// div {"hello, {props.title}"}
/// ))
/// }
/// ```
///
/// Components may be composed to make complex apps.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// fn App(cx: Context, props: &AppProps) -> Element {
/// cx.render(rsx!(
/// NavBar { routes: ROUTES }
/// Title { "{props.title}" }
/// Footer {}
/// ))
/// }
/// ```
///
/// To start an app, create a [`VirtualDom`] and call [`VirtualDom::rebuild`] to get the list of edits required to
/// draw the UI.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// let mut vdom = VirtualDom::new(App);
/// let edits = vdom.rebuild();
/// ```
///
/// To inject UserEvents into the VirtualDom, call [`VirtualDom::get_scheduler_channel`] to get access to the scheduler.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// let channel = vdom.get_scheduler_channel();
/// channel.send_unbounded(SchedulerMsg::UserEvent(UserEvent {
/// // ...
/// }))
/// ```
///
/// While waiting for UserEvents to occur, call [`VirtualDom::wait_for_work`] to poll any futures inside the VirtualDom.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// vdom.wait_for_work().await;
/// ```
///
/// Once work is ready, call [`VirtualDom::work_with_deadline`] to compute the differences between the previous and
/// current UI trees. This will return a [`Mutations`] object that contains Edits, Effects, and NodeRefs that need to be
/// handled by the renderer.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// let mutations = vdom.work_with_deadline(|| false);
/// for edit in mutations {
/// apply(edit);
/// }
/// ```
///
/// ## Building an event loop around Dioxus:
///
/// Putting everything together, you can build an event loop around Dioxus by using the methods outlined above.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// fn App(cx: Context, props: &()) -> Element {
2021-09-10 00:58:48 +00:00
/// cx.render(rsx!{
/// div { "Hello World" }
2021-09-10 00:58:48 +00:00
/// })
/// }
///
2021-09-10 00:58:48 +00:00
/// async fn main() {
/// let mut dom = VirtualDom::new(App);
///
2021-09-10 00:58:48 +00:00
/// let mut inital_edits = dom.rebuild();
/// apply_edits(inital_edits);
///
2021-09-10 00:58:48 +00:00
/// loop {
/// dom.wait_for_work().await;
/// let frame_timeout = TimeoutFuture::new(Duration::from_millis(16));
/// let deadline = || (&mut frame_timeout).now_or_never();
/// let edits = dom.run_with_deadline(deadline).await;
2021-09-10 00:58:48 +00:00
/// apply_edits(edits);
/// }
/// }
/// ```
pub struct VirtualDom {
2021-08-09 21:09:33 +00:00
base_scope: ScopeId,
2021-03-29 16:31:47 +00:00
2021-11-12 02:34:20 +00:00
_root_props: Box<dyn Any>,
2021-11-05 20:28:08 +00:00
2021-11-10 22:09:52 +00:00
scopes: Box<ScopeArena>,
2021-11-05 20:28:08 +00:00
2021-11-07 03:11:17 +00:00
receiver: UnboundedReceiver<SchedulerMsg>,
2021-11-05 20:28:08 +00:00
2021-11-10 22:09:52 +00:00
sender: UnboundedSender<SchedulerMsg>,
2021-11-07 03:11:17 +00:00
pending_messages: VecDeque<SchedulerMsg>,
2021-11-10 22:09:52 +00:00
2021-11-07 03:11:17 +00:00
dirty_scopes: IndexSet<ScopeId>,
2021-02-03 07:26:04 +00:00
}
2021-11-07 03:11:17 +00:00
// Methods to create the VirtualDom
impl VirtualDom {
/// Create a new VirtualDOM with a component that does not have special props.
2021-05-16 06:06:02 +00:00
///
/// # Description
2021-05-16 06:06:02 +00:00
///
/// Later, the props can be updated by calling "update" with a new set of props, causing a set of re-renders.
2021-05-16 06:06:02 +00:00
///
/// This is useful when a component tree can be driven by external state (IE SSR) but it would be too expensive
/// to toss out the entire tree.
2021-05-16 06:06:02 +00:00
///
///
/// # Example
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-11-10 22:09:52 +00:00
/// fn Example(cx: Context, props: &()) -> Element {
2021-08-27 13:40:04 +00:00
/// cx.render(rsx!( div { "hello world" } ))
2021-05-16 06:06:02 +00:00
/// }
///
/// let dom = VirtualDom::new(Example);
/// ```
///
/// Note: the VirtualDOM is not progressed, you must either "run_with_deadline" or use "rebuild" to progress it.
2021-06-23 05:44:48 +00:00
pub fn new(root: FC<()>) -> Self {
Self::new_with_props(root, ())
2021-02-03 07:26:04 +00:00
}
/// Create a new VirtualDOM with the given properties for the root component.
///
/// # Description
///
2021-02-03 07:26:04 +00:00
/// Later, the props can be updated by calling "update" with a new set of props, causing a set of re-renders.
///
/// This is useful when a component tree can be driven by external state (IE SSR) but it would be too expensive
/// to toss out the entire tree.
2021-05-16 06:06:02 +00:00
///
///
/// # Example
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-08-27 13:40:04 +00:00
/// #[derive(PartialEq, Props)]
/// struct SomeProps {
/// name: &'static str
/// }
///
2021-11-10 22:09:52 +00:00
/// fn Example(cx: Context, props: &SomeProps) -> Element {
2021-08-27 13:40:04 +00:00
/// cx.render(rsx!{ div{ "hello {cx.name}" } })
2021-05-16 06:06:02 +00:00
/// }
///
/// let dom = VirtualDom::new(Example);
/// ```
///
2021-08-27 13:40:04 +00:00
/// Note: the VirtualDOM is not progressed on creation. You must either "run_with_deadline" or use "rebuild" to progress it.
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-08-27 13:40:04 +00:00
/// let mut dom = VirtualDom::new_with_props(Example, SomeProps { name: "jane" });
/// let mutations = dom.rebuild();
/// ```
2021-11-10 22:09:52 +00:00
pub fn new_with_props<P: 'static>(root: FC<P>, root_props: P) -> Self {
2021-10-04 05:28:04 +00:00
let (sender, receiver) = futures_channel::mpsc::unbounded::<SchedulerMsg>();
Self::new_with_props_and_scheduler(root, root_props, sender, receiver)
}
2021-11-05 22:02:44 +00:00
/// Launch the VirtualDom, but provide your own channel for receiving and sending messages into the scheduler
2021-10-04 05:28:04 +00:00
///
/// This is useful when the VirtualDom must be driven from outside a thread and it doesn't make sense to wait for the
2021-10-24 17:30:36 +00:00
/// VirtualDom to be created just to retrieve its channel receiver.
pub fn new_with_props_and_scheduler<P: 'static>(
2021-10-04 05:28:04 +00:00
root: FC<P>,
root_props: P,
sender: UnboundedSender<SchedulerMsg>,
receiver: UnboundedReceiver<SchedulerMsg>,
) -> Self {
let scopes = ScopeArena::new(sender.clone());
2021-11-12 02:34:20 +00:00
let mut caller = Box::new(move |scp: &Scope| -> Element { root(scp, &root_props) });
let caller_ref: *mut dyn Fn(&Scope) -> Element = caller.as_mut() as *mut _;
let base_scope = scopes.new_with_key(root as _, caller_ref, None, ElementId(0), 0, 0);
2021-11-05 20:28:08 +00:00
2021-11-11 16:49:07 +00:00
let pending_messages = VecDeque::new();
let mut dirty_scopes = IndexSet::new();
dirty_scopes.insert(base_scope);
2021-03-11 17:27:01 +00:00
Self {
2021-11-09 07:11:44 +00:00
scopes: Box::new(scopes),
2021-11-05 22:02:44 +00:00
base_scope,
receiver,
2021-11-12 02:34:20 +00:00
_root_props: caller,
2021-11-11 16:49:07 +00:00
pending_messages,
dirty_scopes,
sender,
2021-03-11 17:27:01 +00:00
}
}
2021-02-03 07:26:04 +00:00
/// Get the [`Scope`] for the root component.
2021-09-01 19:52:38 +00:00
///
2021-10-24 17:30:36 +00:00
/// This is useful for traversing the tree from the root for heuristics or alternsative renderers that use Dioxus
2021-09-01 19:52:38 +00:00
/// directly.
2021-11-07 03:11:17 +00:00
///
/// # Example
pub fn base_scope(&self) -> &Scope {
2021-11-07 03:11:17 +00:00
self.get_scope(&self.base_scope).unwrap()
2021-08-06 02:23:41 +00:00
}
/// Get the [`Scope`] for a component given its [`ScopeId`]
2021-11-07 03:11:17 +00:00
///
/// # Example
///
///
///
pub fn get_scope<'a>(&'a self, id: &ScopeId) -> Option<&'a Scope> {
2021-11-07 14:58:19 +00:00
self.scopes.get_scope(id)
2021-08-06 02:23:41 +00:00
}
2021-11-07 03:11:17 +00:00
/// Get an [`UnboundedSender`] handle to the channel used by the scheduler.
///
/// # Example
2021-09-01 19:45:53 +00:00
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-11-10 22:09:52 +00:00
///
2021-09-01 19:52:38 +00:00
///
2021-11-10 22:09:52 +00:00
/// ```
2021-11-07 03:11:17 +00:00
pub fn get_scheduler_channel(&self) -> futures_channel::mpsc::UnboundedSender<SchedulerMsg> {
self.sender.clone()
}
/// Check if the [`VirtualDom`] has any pending updates or work to be done.
2021-09-01 19:52:38 +00:00
///
2021-11-07 03:11:17 +00:00
/// # Example
2021-09-01 19:52:38 +00:00
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-09-01 19:52:38 +00:00
///
2021-11-07 03:11:17 +00:00
///
2021-11-10 22:09:52 +00:00
/// ```
2021-11-07 03:11:17 +00:00
pub fn has_any_work(&self) -> bool {
!(self.dirty_scopes.is_empty() && self.pending_messages.is_empty())
2021-09-01 19:45:53 +00:00
}
2021-11-07 03:11:17 +00:00
/// Waits for the scheduler to have work
/// This lets us poll async tasks during idle periods without blocking the main thread.
pub async fn wait_for_work(&mut self) {
// todo: poll the events once even if there is work to do to prevent starvation
2021-11-07 04:06:00 +00:00
// if there's no futures in the virtualdom, just wait for a scheduler message and put it into the queue to be processed
2021-11-15 14:49:01 +00:00
if self.scopes.pending_futures.borrow().is_empty() {
2021-11-07 04:06:00 +00:00
self.pending_messages
.push_front(self.receiver.next().await.unwrap());
} else {
struct PollTasks<'a> {
2021-11-12 06:36:33 +00:00
scopes: &'a mut ScopeArena,
2021-11-07 04:06:00 +00:00
}
2021-11-07 03:11:17 +00:00
2021-11-07 04:06:00 +00:00
impl<'a> Future for PollTasks<'a> {
type Output = ();
fn poll(
2021-11-15 14:49:01 +00:00
self: Pin<&mut Self>,
2021-11-07 04:06:00 +00:00
cx: &mut std::task::Context<'_>,
) -> Poll<Self::Output> {
let mut all_pending = true;
2021-11-12 06:36:33 +00:00
let mut unfinished_tasks: SmallVec<[_; 10]> = smallvec::smallvec![];
let mut scopes_to_clear: SmallVec<[_; 10]> = smallvec::smallvec![];
2021-11-07 04:06:00 +00:00
// Poll every scope manually
2021-11-15 14:49:01 +00:00
for fut in self.scopes.pending_futures.borrow().iter() {
2021-11-07 04:06:00 +00:00
let scope = self
.scopes
.get_scope(fut)
.expect("Scope should never be moved");
let mut items = scope.items.borrow_mut();
2021-11-12 21:06:33 +00:00
// really this should just be retain_mut but that doesn't exist yet
2021-11-12 06:36:33 +00:00
while let Some(mut task) = items.tasks.pop() {
2021-11-07 04:06:00 +00:00
// todo: does this make sense?
// I don't usually write futures by hand
// I think the futures neeed to be pinned using bumpbox or something
// right now, they're bump allocated so this shouldn't matter anyway - they're not going to move
2021-11-12 06:36:33 +00:00
let task_mut = task.as_mut();
let unpinned = unsafe { Pin::new_unchecked(task_mut) };
2021-11-07 04:06:00 +00:00
2021-11-07 14:58:19 +00:00
if unpinned.poll(cx).is_ready() {
2021-11-07 04:06:00 +00:00
all_pending = false
2021-11-12 06:36:33 +00:00
} else {
unfinished_tasks.push(task);
2021-11-07 03:11:17 +00:00
}
}
2021-11-12 06:36:33 +00:00
if unfinished_tasks.is_empty() {
scopes_to_clear.push(*fut);
}
2021-11-12 21:06:33 +00:00
items.tasks.extend(unfinished_tasks.drain(..));
2021-11-12 06:36:33 +00:00
}
for scope in scopes_to_clear {
2021-11-15 14:49:01 +00:00
self.scopes.pending_futures.borrow_mut().remove(&scope);
2021-11-07 03:11:17 +00:00
}
2021-11-07 04:06:00 +00:00
// Resolve the future if any singular task is ready
match all_pending {
true => Poll::Pending,
false => Poll::Ready(()),
}
2021-11-07 03:11:17 +00:00
}
}
2021-11-07 04:06:00 +00:00
// Poll both the futures and the scheduler message queue simulataneously
use futures_util::future::{select, Either};
2021-11-07 03:11:17 +00:00
2021-11-07 04:06:00 +00:00
let scheduler_fut = self.receiver.next();
let tasks_fut = PollTasks {
2021-11-12 06:36:33 +00:00
scopes: &mut self.scopes,
2021-11-07 04:06:00 +00:00
};
match select(tasks_fut, scheduler_fut).await {
// Futures don't generate work
Either::Left((_, _)) => {}
2021-11-07 03:11:17 +00:00
2021-11-07 04:06:00 +00:00
// Save these messages in FIFO to be processed later
Either::Right((msg, _)) => self.pending_messages.push_front(msg.unwrap()),
}
2021-09-02 03:22:34 +00:00
}
2021-08-08 19:15:16 +00:00
}
2021-08-06 02:23:41 +00:00
2021-08-09 21:09:33 +00:00
/// Run the virtualdom with a deadline.
2021-08-08 19:15:16 +00:00
///
2021-11-15 14:49:01 +00:00
/// This method will perform any outstanding diffing work and try to return as many mutations as possible before the
/// deadline is reached. This method accepts a closure that returns `true` if the deadline has been reached. To wrap
/// your future into a deadline, consider the `now_or_never` method from `future_utils`.
2021-08-08 19:15:16 +00:00
///
2021-11-15 14:49:01 +00:00
/// ```rust, ignore
/// let mut vdom = VirtualDom::new(App);
2021-08-08 19:15:16 +00:00
///
2021-11-15 14:49:01 +00:00
/// let timeout = TimeoutFuture::from_ms(16);
/// let deadline = || (&mut timeout).now_or_never();
2021-08-08 19:15:16 +00:00
///
2021-11-15 14:49:01 +00:00
/// let mutations = vdom.work_with_deadline(deadline);
/// ```
///
/// This method is useful when needing to schedule the virtualdom around other tasks on the main thread to prevent
/// "jank". It will try to finish whatever work it has by the deadline to free up time for other work.
2021-08-08 19:15:16 +00:00
///
2021-11-15 14:49:01 +00:00
/// If the work is not finished by the deadline, Dioxus will store it for later and return when work_with_deadline
/// is called again. This means you can ensure some level of free time on the VirtualDom's thread during the work phase.
2021-08-09 17:17:19 +00:00
///
/// For use in the web, it is expected that this method will be called to be executed during "idle times" and the
/// mutations to be applied during the "paint times" IE "animation frames". With this strategy, it is possible to craft
/// entirely jank-free applications that perform a ton of work.
///
2021-11-15 14:49:01 +00:00
/// In general use, Dioxus is plenty fast enough to not need to worry about this.
///
2021-08-08 19:15:16 +00:00
/// # Example
///
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-11-10 22:09:52 +00:00
/// fn App(cx: Context, props: &()) -> Element {
/// cx.render(rsx!( div {"hello"} ))
/// }
2021-11-07 04:06:00 +00:00
///
2021-08-09 17:17:19 +00:00
/// let mut dom = VirtualDom::new(App);
2021-11-07 04:06:00 +00:00
///
2021-08-08 19:15:16 +00:00
/// loop {
2021-11-07 04:06:00 +00:00
/// let mut timeout = TimeoutFuture::from_ms(16);
2021-11-07 14:58:19 +00:00
/// let deadline = move || (&mut timeout).now_or_never();
2021-11-07 04:06:00 +00:00
///
2021-08-08 19:15:16 +00:00
/// let mutations = dom.run_with_deadline(deadline).await;
2021-11-07 04:06:00 +00:00
///
2021-08-08 19:15:16 +00:00
/// apply_mutations(mutations);
/// }
/// ```
2021-11-07 14:58:19 +00:00
pub fn work_with_deadline(&mut self, mut deadline: impl FnMut() -> bool) -> Vec<Mutations> {
let mut committed_mutations = vec![];
2021-11-05 20:28:08 +00:00
2021-11-07 03:11:17 +00:00
while self.has_any_work() {
while let Ok(Some(msg)) = self.receiver.try_next() {
2021-11-07 03:23:56 +00:00
self.pending_messages.push_front(msg);
}
2021-11-07 04:06:00 +00:00
while let Some(msg) = self.pending_messages.pop_back() {
2021-11-07 03:11:17 +00:00
match msg {
2021-11-12 02:34:20 +00:00
// TODO: Suspsense
2021-11-07 03:23:56 +00:00
SchedulerMsg::Immediate(id) => {
self.dirty_scopes.insert(id);
2021-11-07 03:11:17 +00:00
}
2021-11-15 14:49:01 +00:00
SchedulerMsg::Suspended { node, scope } => {
todo!("should wire up suspense")
// self.suspense_scopes.insert(id);
}
2021-11-07 03:23:56 +00:00
SchedulerMsg::UiEvent(event) => {
2021-11-15 14:49:01 +00:00
if let Some(element) = event.element {
2021-11-07 03:23:56 +00:00
log::info!("Calling listener {:?}, {:?}", event.scope_id, element);
2021-11-12 04:55:57 +00:00
self.scopes.call_listener_with_bubbling(event, element);
while let Ok(Some(dirty_scope)) = self.receiver.try_next() {
self.pending_messages.push_front(dirty_scope);
2021-11-07 03:23:56 +00:00
}
2021-11-07 04:06:00 +00:00
} else {
2021-11-07 14:58:19 +00:00
log::debug!("User event without a targetted ElementId. Not currently supported.\nUnsure how to proceed. {:?}", event);
2021-11-07 03:23:56 +00:00
}
2021-11-07 03:11:17 +00:00
}
}
}
2021-11-05 20:28:08 +00:00
2021-11-09 07:11:44 +00:00
let scopes = &self.scopes;
let mut diff_state = DiffState::new(scopes);
2021-11-05 20:28:08 +00:00
2021-11-07 04:06:00 +00:00
let mut ran_scopes = FxHashSet::default();
2021-11-05 20:28:08 +00:00
2021-11-07 04:06:00 +00:00
// Sort the scopes by height. Theoretically, we'll de-duplicate scopes by height
self.dirty_scopes
.retain(|id| scopes.get_scope(id).is_some());
self.dirty_scopes.sort_by(|a, b| {
let h1 = scopes.get_scope(a).unwrap().height;
let h2 = scopes.get_scope(b).unwrap().height;
h1.cmp(&h2).reverse()
});
2021-11-05 20:28:08 +00:00
2021-11-07 04:06:00 +00:00
if let Some(scopeid) = self.dirty_scopes.pop() {
if !ran_scopes.contains(&scopeid) {
ran_scopes.insert(scopeid);
2021-11-05 20:28:08 +00:00
if self.scopes.run_scope(&scopeid) {
2021-11-08 03:36:57 +00:00
let (old, new) = (
self.scopes.wip_head(&scopeid),
self.scopes.fin_head(&scopeid),
);
2021-11-12 02:50:08 +00:00
diff_state.stack.push(DiffInstruction::Diff { new, old });
2021-11-07 04:06:00 +00:00
diff_state.stack.scope_stack.push(scopeid);
2021-11-12 21:06:33 +00:00
2021-11-12 02:34:20 +00:00
let scope = scopes.get_scope(&scopeid).unwrap();
2021-11-12 21:06:33 +00:00
diff_state.stack.element_stack.push(scope.container);
2021-11-07 04:06:00 +00:00
}
}
}
2021-11-05 20:28:08 +00:00
2021-11-12 21:06:33 +00:00
if diff_state.work(&mut deadline) {
2021-11-07 04:06:00 +00:00
let DiffState {
mutations,
seen_scopes,
..
} = diff_state;
2021-11-05 20:28:08 +00:00
2021-11-07 04:06:00 +00:00
for scope in seen_scopes {
self.dirty_scopes.remove(&scope);
2021-11-07 03:23:56 +00:00
}
2021-11-05 20:28:08 +00:00
2021-11-07 04:06:00 +00:00
committed_mutations.push(mutations);
} else {
2021-11-07 14:58:19 +00:00
// leave the work in an incomplete state
2021-11-07 03:23:56 +00:00
return committed_mutations;
2021-11-05 20:28:08 +00:00
}
2021-11-07 03:23:56 +00:00
}
2021-11-05 20:28:08 +00:00
2021-11-07 03:23:56 +00:00
committed_mutations
}
2021-11-05 20:28:08 +00:00
2021-11-07 03:23:56 +00:00
/// Performs a *full* rebuild of the virtual dom, returning every edit required to generate the actual dom from scratch
///
/// The diff machine expects the RealDom's stack to be the root of the application.
///
/// Tasks will not be polled with this method, nor will any events be processed from the event queue. Instead, the
/// root component will be ran once and then diffed. All updates will flow out as mutations.
///
/// All state stored in components will be completely wiped away.
///
/// # Example
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
/// static App: FC<()> = |cx, props| cx.render(rsx!{ "hello world" });
2021-11-07 03:23:56 +00:00
/// let mut dom = VirtualDom::new();
/// let edits = dom.rebuild();
///
/// apply_edits(edits);
/// ```
pub fn rebuild(&mut self) -> Mutations {
2021-11-09 07:11:44 +00:00
let mut diff_state = DiffState::new(&self.scopes);
2021-11-07 04:06:00 +00:00
2021-11-08 03:36:57 +00:00
let scope_id = self.base_scope;
if self.scopes.run_scope(&scope_id) {
2021-11-09 07:16:25 +00:00
diff_state
.stack
.create_node(self.scopes.fin_head(&scope_id), MountType::Append);
2021-11-09 07:11:44 +00:00
2021-11-12 02:34:20 +00:00
diff_state.stack.element_stack.push(ElementId(0));
2021-11-09 07:16:25 +00:00
diff_state.stack.scope_stack.push(scope_id);
2021-11-09 07:11:44 +00:00
diff_state.work(|| false);
2021-11-08 03:36:57 +00:00
}
2021-11-09 07:11:44 +00:00
diff_state.mutations
2021-11-05 20:28:08 +00:00
}
2021-11-07 03:11:17 +00:00
/// Compute a manual diff of the VirtualDOM between states.
2021-11-05 20:28:08 +00:00
///
2021-11-07 03:11:17 +00:00
/// This can be useful when state inside the DOM is remotely changed from the outside, but not propagated as an event.
2021-11-05 20:28:08 +00:00
///
2021-11-07 03:11:17 +00:00
/// In this case, every component will be diffed, even if their props are memoized. This method is intended to be used
/// to force an update of the DOM when the state of the app is changed outside of the app.
2021-11-05 20:28:08 +00:00
///
2021-11-07 03:11:17 +00:00
/// # Example
2021-11-12 02:34:20 +00:00
/// ```rust, ignore
2021-11-07 03:11:17 +00:00
/// #[derive(PartialEq, Props)]
/// struct AppProps {
/// value: Shared<&'static str>,
/// }
///
/// static App: FC<AppProps> = |cx, props|{
2021-11-07 03:11:17 +00:00
/// let val = cx.value.borrow();
/// cx.render(rsx! { div { "{val}" } })
/// };
///
/// let value = Rc::new(RefCell::new("Hello"));
2021-11-15 14:49:01 +00:00
/// let mut dom = VirtualDom::new_with_props(App, AppProps { value: value.clone(), });
2021-11-07 03:11:17 +00:00
///
/// let _ = dom.rebuild();
///
/// *value.borrow_mut() = "goodbye";
///
/// let edits = dom.diff();
/// ```
2021-11-07 04:06:00 +00:00
pub fn hard_diff<'a>(&'a mut self, scope_id: &ScopeId) -> Option<Mutations<'a>> {
2021-11-10 22:09:52 +00:00
let mut diff_machine = DiffState::new(&self.scopes);
if self.scopes.run_scope(scope_id) {
2021-11-07 04:06:00 +00:00
diff_machine.force_diff = true;
2021-11-10 22:09:52 +00:00
diff_machine.diff_scope(scope_id);
2021-11-05 20:28:08 +00:00
}
2021-11-10 22:09:52 +00:00
Some(diff_machine.mutations)
2021-11-05 20:28:08 +00:00
}
/// Renders an `rsx` call into the Base Scope's allocator.
///
/// Useful when needing to render nodes from outside the VirtualDom, such as in a test.
pub fn render_vnodes<'a>(&'a self, lazy_nodes: Option<LazyNodes<'a, '_>>) -> &'a VNode<'a> {
2021-11-10 22:09:52 +00:00
let scope = self.scopes.get_scope(&self.base_scope).unwrap();
let frame = scope.wip_frame();
let factory = NodeFactory { bump: &frame.bump };
let node = lazy_nodes.unwrap().call(factory);
frame.bump.alloc(node)
}
/// Renders an `rsx` call into the Base Scope's allocator.
///
/// Useful when needing to render nodes from outside the VirtualDom, such as in a test.
pub fn diff_vnodes<'a>(&'a self, old: &'a VNode<'a>, new: &'a VNode<'a>) -> Mutations<'a> {
2021-11-10 22:09:52 +00:00
let mut machine = DiffState::new(&self.scopes);
machine.stack.push(DiffInstruction::Diff { new, old });
2021-11-12 02:50:08 +00:00
machine.stack.element_stack.push(ElementId(0));
2021-11-10 22:09:52 +00:00
machine.stack.scope_stack.push(self.base_scope);
machine.work(|| false);
machine.mutations
}
/// Renders an `rsx` call into the Base Scope's allocator.
///
/// Useful when needing to render nodes from outside the VirtualDom, such as in a test.
pub fn create_vnodes<'a>(&'a self, left: Option<LazyNodes<'a, '_>>) -> Mutations<'a> {
2021-11-10 22:09:52 +00:00
let nodes = self.render_vnodes(left);
let mut machine = DiffState::new(&self.scopes);
2021-11-12 02:50:08 +00:00
machine.stack.element_stack.push(ElementId(0));
2021-11-10 22:09:52 +00:00
machine.stack.create_node(nodes, MountType::Append);
machine.work(|| false);
machine.mutations
}
/// Renders an `rsx` call into the Base Scope's allocator.
///
/// Useful when needing to render nodes from outside the VirtualDom, such as in a test.
pub fn diff_lazynodes<'a>(
&'a self,
left: Option<LazyNodes<'a, '_>>,
right: Option<LazyNodes<'a, '_>>,
) -> (Mutations<'a>, Mutations<'a>) {
let (old, new) = (self.render_vnodes(left), self.render_vnodes(right));
2021-11-10 22:09:52 +00:00
let mut create = DiffState::new(&self.scopes);
create.stack.scope_stack.push(self.base_scope);
2021-11-12 02:50:08 +00:00
create.stack.element_stack.push(ElementId(0));
2021-11-10 22:09:52 +00:00
create.stack.create_node(old, MountType::Append);
create.work(|| false);
2021-11-10 22:09:52 +00:00
let mut edit = DiffState::new(&self.scopes);
2021-11-12 02:50:08 +00:00
edit.stack.scope_stack.push(self.base_scope);
edit.stack.element_stack.push(ElementId(0));
2021-11-10 22:09:52 +00:00
edit.stack.push(DiffInstruction::Diff { old, new });
edit.work(&mut || false);
2021-11-10 22:09:52 +00:00
(create.mutations, edit.mutations)
}
2021-09-13 23:07:15 +00:00
}
2021-11-07 03:23:56 +00:00
pub enum SchedulerMsg {
// events from the host
UiEvent(UserEvent),
// setstate
Immediate(ScopeId),
2021-11-15 14:49:01 +00:00
Suspended { scope: ScopeId, node: NodeLink },
2021-11-07 03:23:56 +00:00
}
2021-11-15 14:49:01 +00:00
/// User Events are events that are shuttled from the renderer into the VirtualDom trhough the scheduler channel.
///
/// These events will be passed to the appropriate Element given by `mounted_dom_id` and then bubbled up through the tree
/// where each listener is checked and fired if the event name matches.
///
/// It is the expectation that the event name matches the corresponding event listener, otherwise Dioxus will panic in
/// attempting to downcast the event data.
///
/// Because Event Data is sent across threads, it must be `Send + Sync`. We are hoping to lift the `Sync` restriction but
/// `Send` will not be lifted. The entire `UserEvent` must also be `Send + Sync` due to its use in the scheduler channel.
///
/// # Example
/// ```rust
/// fn App(cx: Context, props: &()) -> Element {
/// rsx!(cx, div {
/// onclick: move |_| println!("Clicked!")
/// })
/// }
///
/// let mut dom = VirtualDom::new(App);
/// let mut scheduler = dom.get_scheduler_channel();
/// scheduler.unbounded_send(SchedulerMsg::UiEvent(
/// UserEvent {
/// scope_id: None,
/// priority: EventPriority::Medium,
/// name: "click",
/// element: Some(ElementId(0)),
/// data: Arc::new(ClickEvent { .. })
/// }
/// )).unwrap();
/// ```
2021-11-07 03:23:56 +00:00
#[derive(Debug)]
pub struct UserEvent {
/// The originator of the event trigger
2021-11-12 04:55:57 +00:00
pub scope_id: Option<ScopeId>,
2021-11-07 03:23:56 +00:00
pub priority: EventPriority,
/// The optional real node associated with the trigger
2021-11-15 14:49:01 +00:00
pub element: Option<ElementId>,
2021-11-07 03:23:56 +00:00
/// The event type IE "onclick" or "onmouseover"
///
/// The name that the renderer will use to mount the listener.
pub name: &'static str,
2021-11-07 06:01:22 +00:00
/// Event Data
2021-11-15 14:49:01 +00:00
pub data: Arc<dyn Any + Send + Sync>,
2021-11-07 03:23:56 +00:00
}
/// Priority of Event Triggers.
///
/// Internally, Dioxus will abort work that's taking too long if new, more important work arrives. Unlike React, Dioxus
/// won't be afraid to pause work or flush changes to the RealDOM. This is called "cooperative scheduling". Some Renderers
/// implement this form of scheduling internally, however Dioxus will perform its own scheduling as well.
///
/// The ultimate goal of the scheduler is to manage latency of changes, prioritizing "flashier" changes over "subtler" changes.
///
/// React has a 5-tier priority system. However, they break things into "Continuous" and "Discrete" priority. For now,
/// we keep it simple, and just use a 3-tier priority system.
///
/// - NoPriority = 0
/// - LowPriority = 1
/// - NormalPriority = 2
/// - UserBlocking = 3
/// - HighPriority = 4
/// - ImmediatePriority = 5
///
/// We still have a concept of discrete vs continuous though - discrete events won't be batched, but continuous events will.
/// This means that multiple "scroll" events will be processed in a single frame, but multiple "click" events will be
/// flushed before proceeding. Multiple discrete events is highly unlikely, though.
#[derive(Debug, PartialEq, Eq, Clone, Copy, Hash, PartialOrd, Ord)]
pub enum EventPriority {
/// Work that must be completed during the EventHandler phase.
///
/// Currently this is reserved for controlled inputs.
Immediate = 3,
/// "High Priority" work will not interrupt other high priority work, but will interrupt medium and low priority work.
///
/// This is typically reserved for things like user interaction.
///
/// React calls these "discrete" events, but with an extra category of "user-blocking" (Immediate).
High = 2,
/// "Medium priority" work is generated by page events not triggered by the user. These types of events are less important
/// than "High Priority" events and will take precedence over low priority events.
///
/// This is typically reserved for VirtualEvents that are not related to keyboard or mouse input.
///
/// React calls these "continuous" events (e.g. mouse move, mouse wheel, touch move, etc).
Medium = 1,
/// "Low Priority" work will always be preempted unless the work is significantly delayed, in which case it will be
/// advanced to the front of the work queue until completed.
///
/// The primary user of Low Priority work is the asynchronous work system (Suspense).
///
/// This is considered "idle" work or "background" work.
Low = 0,
}