1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
//! Abstraction over a rendering backend.
#[cfg(feature = "dom")]
pub mod dom_node;
#[cfg(feature = "ssr")]
pub mod ssr_node;
#[cfg(feature = "dom")]
pub use dom_node::*;
#[cfg(feature = "ssr")]
pub use ssr_node::*;
use std::cell::RefCell;
use std::fmt;
use std::rc::Rc;
use web_sys::Event;
use crate::prelude::*;
pub type EventListener = dyn Fn(Event);
/// Abstraction over a rendering backend.
///
/// You would probably use this trait as a trait bound when you want to accept any rendering backend.
/// For example, components are often generic over [`GenericNode`] to be able to render to different backends.
///
/// Note that components are **NOT** represented by [`GenericNode`]. Instead, components are _disappearing_, meaning
/// that they are simply functions that generate [`GenericNode`]s inside a new reactive context. This means that there
/// is no overhead whatsoever when using components.
///
/// Hirola ships with 2 rendering backends out of the box:
/// * [`DomNode`] - Rendering in the browser (to real DOM nodes).
/// * [`SsrNode`] - Render to a static string (often on the server side for Server Side Rendering, aka. SSR).
///
/// To implement your own rendering backend, you will need to create a new struct which implements [`GenericNode`].
pub trait GenericNode: fmt::Debug + Clone + PartialEq + Eq + 'static {
/// Create a new element node.
fn element(tag: &str) -> Self;
/// Create a new text node.
fn text_node(text: &str) -> Self;
/// Create a new fragment (list of nodes). A fragment is not necessarily wrapped around by an element.
fn fragment() -> Self;
/// Create a marker (dummy) node. For [`DomNode`], this is implemented by creating an empty comment node.
/// This is used, for example, in [`Keyed`] and [`Indexed`] for scenarios where you want to push a new item to the
/// end of the list. If the list is empty, a dummy node is needed to store the position of the component.
fn marker() -> Self;
/// Sets an attribute on a node.
fn set_attribute(&self, name: &str, value: &str);
/// Appends a child to the node's children.
fn append_child(&self, child: &Self);
/// Insert a new child node to this node's children. If `reference_node` is `Some`, the child will be inserted
/// before the reference node. Else if `None`, the child will be inserted at the end.
fn insert_child_before(&self, new_node: &Self, reference_node: Option<&Self>);
/// Remove a child node from this node's children.
fn remove_child(&self, child: &Self);
/// Replace a child node from this node's children with a new child node.
fn replace_child(&self, old: &Self, new: &Self);
/// Insert a new node before this node.
fn insert_sibling_before(&self, child: &Self);
/// Returns the parent node, or `None` if detached.
fn parent_node(&self) -> Option<Self>;
/// Returns the next sibling, or `None` if this node is the last sibling.
fn next_sibling(&self) -> Option<Self>;
/// Remove this node from the tree.
///
/// TODO: Remove this node on Drop.
fn remove_self(&self);
/// Add a [`EventListener`] to the event `name`.
fn event(&self, name: &str, handler: Box<EventListener>);
/// Update inner text of the node. If the node has elements, all the elements are replaced with a new text node.
fn update_inner_text(&self, text: &str);
/// Append an item that implements [`Render`] and automatically updates the DOM inside an effect.
fn append_render(&self, child: Box<dyn Fn() -> Box<dyn Render<Self>>>) {
let parent = self.clone();
let node = create_effect_initial(cloned!((parent) => move || {
let node = RefCell::new(child().render().node);
let effect = cloned!((node) => move || {
let new_node = child().update_node(&parent, &node.borrow());
*node.borrow_mut() = new_node;
});
(Rc::new(effect), node)
}));
parent.append_child(&node.borrow());
}
}