2021-02-12 21:11:33 +00:00
|
|
|
//! Dioxus WebSys
|
2021-02-17 15:53:55 +00:00
|
|
|
//! --------------
|
2021-02-12 21:11:33 +00:00
|
|
|
//! This crate implements a renderer of the Dioxus Virtual DOM for the web browser.
|
|
|
|
//!
|
2021-02-14 23:03:16 +00:00
|
|
|
//! While it is possible to render a single component directly, it is not possible to render component trees. For these,
|
2021-02-12 21:11:33 +00:00
|
|
|
//! an external renderer is needed to progress the component lifecycles. The `WebsysRenderer` shows how to use the Virtual DOM
|
|
|
|
//! API to progress these lifecycle events to generate a fully-mounted Virtual DOM instance which can be renderer in the
|
|
|
|
//! `render` method.
|
|
|
|
//!
|
|
|
|
//! ```ignore
|
|
|
|
//! fn main() {
|
|
|
|
//! let renderer = WebsysRenderer::<()>::new(|_| html! {<div> "Hello world" </div>});
|
|
|
|
//! let output = renderer.render();
|
|
|
|
//! assert_eq!(output, "<div>Hello World</div>");
|
|
|
|
//! }
|
|
|
|
//! ```
|
|
|
|
//!
|
|
|
|
//! The `WebsysRenderer` is particularly useful when needing to cache a Virtual DOM in between requests
|
2021-02-17 15:53:55 +00:00
|
|
|
use web_sys::{window, Document, Element, Event, Node};
|
2021-02-12 21:11:33 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
use dioxus::prelude::VElement;
|
|
|
|
// use dioxus::{patch::Patch, prelude::VText};
|
|
|
|
// use dioxus::{patch::Patch, prelude::VText};
|
2021-02-15 04:39:46 +00:00
|
|
|
pub use dioxus_core as dioxus;
|
2021-02-12 21:11:33 +00:00
|
|
|
use dioxus_core::{
|
|
|
|
events::EventTrigger,
|
2021-02-21 02:59:16 +00:00
|
|
|
prelude::{bumpalo::Bump, html, DiffMachine, VNode, VirtualDom, FC},
|
2021-02-12 21:11:33 +00:00
|
|
|
};
|
|
|
|
use futures::{channel::mpsc, future, SinkExt, StreamExt};
|
|
|
|
use mpsc::UnboundedSender;
|
2021-02-13 07:49:10 +00:00
|
|
|
pub mod interpreter;
|
2021-02-17 15:53:55 +00:00
|
|
|
use interpreter::PatchMachine;
|
2021-02-12 21:11:33 +00:00
|
|
|
/// 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
|
|
|
|
|
|
|
|
///
|
2021-02-13 08:19:35 +00:00
|
|
|
pub struct WebsysRenderer {
|
|
|
|
internal_dom: VirtualDom,
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
|
|
|
|
2021-02-13 08:19:35 +00:00
|
|
|
impl WebsysRenderer {
|
2021-02-12 21:11:33 +00:00
|
|
|
/// Create a new instance of the Dioxus Virtual Dom with no properties for the root component.
|
2021-01-16 06:30:48 +00:00
|
|
|
///
|
2021-02-12 21:11:33 +00:00
|
|
|
/// This means that the root component must either consumes its own context, or statics are used to generate the page.
|
|
|
|
/// The root component can access things like routing in its context.
|
|
|
|
pub fn new(root: FC<()>) -> Self {
|
|
|
|
Self::new_with_props(root, ())
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
2021-02-12 21:11:33 +00:00
|
|
|
/// Create a new text-renderer instance from a functional component root.
|
|
|
|
/// Automatically progresses the creation of the VNode tree to completion.
|
|
|
|
///
|
|
|
|
/// A VDom is automatically created. If you want more granular control of the VDom, use `from_vdom`
|
2021-02-21 02:59:16 +00:00
|
|
|
pub fn new_with_props<T: 'static>(root: FC<T>, root_props: T) -> Self {
|
2021-02-12 21:11:33 +00:00
|
|
|
Self::from_vdom(VirtualDom::new_with_props(root, root_props))
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
|
|
|
|
2021-02-12 21:11:33 +00:00
|
|
|
/// Create a new text renderer from an existing Virtual DOM.
|
|
|
|
/// This will progress the existing VDom's events to completion.
|
2021-02-13 08:19:35 +00:00
|
|
|
pub fn from_vdom(dom: VirtualDom) -> Self {
|
2021-02-12 21:11:33 +00:00
|
|
|
Self { internal_dom: dom }
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
|
|
|
|
2021-02-12 21:11:33 +00:00
|
|
|
/// Run the renderer, progressing any events that crop up
|
|
|
|
/// Yield on event handlers
|
|
|
|
/// If the dom errors out, self is consumed and the dom is torn down
|
|
|
|
pub async fn run(self) -> dioxus_core::error::Result<()> {
|
|
|
|
let WebsysRenderer { mut internal_dom } = self;
|
|
|
|
|
|
|
|
// Progress the mount of the root component
|
|
|
|
internal_dom
|
|
|
|
.progress()
|
|
|
|
.expect("Progressing the root failed :(");
|
|
|
|
|
|
|
|
// set up the channels to connect listeners to the event loop
|
|
|
|
let (sender, mut receiver) = mpsc::unbounded::<EventTrigger>();
|
|
|
|
|
|
|
|
// Iterate through the nodes, attaching the closure and sender to the listener
|
2021-02-17 15:53:55 +00:00
|
|
|
// {
|
|
|
|
// 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");
|
|
|
|
// })
|
|
|
|
// };
|
|
|
|
// }
|
2021-01-16 06:30:48 +00:00
|
|
|
|
2021-02-12 21:11:33 +00:00
|
|
|
// Event loop waits for the receiver to finish up
|
|
|
|
// TODO! Connect the sender to the virtual dom's suspense system
|
|
|
|
// Suspense is basically an external event that can force renders to specific nodes
|
|
|
|
while let Some(event) = receiver.next().await {
|
|
|
|
// event is triggered
|
|
|
|
// relevant listeners are ran
|
|
|
|
// internal state is modified, components are tagged for changes
|
|
|
|
|
|
|
|
match internal_dom.progress_with_event(event).await {
|
|
|
|
Err(_) => {}
|
2021-02-15 04:39:46 +00:00
|
|
|
Ok(_) => {} // Ok(_) => render_diffs(),
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
2021-02-12 21:11:33 +00:00
|
|
|
// waiting for next event to arrive from the external triggers
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
|
|
|
|
2021-02-12 21:11:33 +00:00
|
|
|
Ok(())
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-15 05:17:40 +00:00
|
|
|
pub fn simple_render(tree: impl for<'a> Fn(&'a Bump) -> VNode<'a>) {
|
2021-02-15 04:39:46 +00:00
|
|
|
let bump = Bump::new();
|
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
// 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
|
2021-02-15 04:39:46 +00:00
|
|
|
let old = html! { <div> </div> }(&bump);
|
|
|
|
let new = tree(&bump);
|
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
// Build a machine that diffs doms
|
|
|
|
let mut diff_machine = DiffMachine::new(&bump);
|
|
|
|
diff_machine.diff_node(&old, &new);
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
// 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());
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
// 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);
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
// Consume the diff machine, generating the patch list
|
|
|
|
for patch in diff_machine.consume() {
|
|
|
|
patch_machine.handle_edit(&patch);
|
|
|
|
log::info!("Patch is {:?}", patch);
|
2021-02-15 04:39:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
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();
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
let old = tree1(&bump);
|
|
|
|
let new = tree2(&bump);
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
let mut machine = DiffMachine::new(&bump);
|
|
|
|
machine.diff_node(&old, &new);
|
2021-02-15 04:39:46 +00:00
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
for patch in machine.consume() {
|
|
|
|
println!("Patch is {:?}", patch);
|
2021-02-15 04:39:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
#[cfg(test)]
|
|
|
|
mod tests {
|
|
|
|
use std::env;
|
|
|
|
|
|
|
|
use super::*;
|
|
|
|
use dioxus_core as dioxus;
|
|
|
|
use dioxus_core::prelude::html;
|
|
|
|
|
|
|
|
#[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>
|
2021-02-15 04:39:46 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-02-17 15:53:55 +00:00
|
|
|
#[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>
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
2021-01-16 06:30:48 +00:00
|
|
|
}
|