Struct virtual_dom_rs::VirtualNode

pub struct VirtualNode {
    pub tag: String,
    pub props: HashMap<String, String, RandomState>,
    pub custom_events: CustomEvents,
    pub browser_events: BrowserEvents,
    pub children: Option<Vec<VirtualNode, Global>>,
    pub text: Option<String>,
}

When building your views you’ll typically use the html! macro to generate VirtualNode’s.

html! { <div> <span></span> </div> } really generates a VirtualNode with one child (span).

Later, on the client side, you’ll use the diff and patch modules to update the real DOM with your latest tree of virtual nodes (virtual dom).

Or on the server side you’ll just call .to_string() on your root virtual node in order to recursively render the node and all of its children.

TODO: Make all of these fields private and create accessor methods

Fields

tag: String

The HTML tag, such as “div”

props: HashMap<String, String, RandomState>

HTML props such as id, class, style, etc

custom_events: CustomEvents

Events that will get added to your real DOM element via .addEventListener

browser_events: BrowserEvents

Events that are specified in web_sys such as oninput onclick onmousemove etc…

children: Option<Vec<VirtualNode, Global>>

The children of this VirtualNode. So a

structure would have a parent div and one child, em.

text: Option<String>

Some(String) if this is a text node. When patching these into a real DOM these use document.createTextNode(text)

Implementations

impl VirtualNode

pub fn filter_label<F, 'a>(&'a self, filter: F) -> Vec<&'a VirtualNode, Global>where
    F: Fn(&str) -> bool,

Get a vector of all of the VirtualNode children / grandchildren / etc of your virtual_node that have a label that matches your filter.

Examples

let component = html! {<div>
 <span label="hello",> {"Hi!"} </span>
 <em label="world",> {"There!!"} </em>
 <em label="hello",></em>
</div> };

let hello_nodes = component.filter_label(|label| {
    label.contains("hello")
});

assert_eq!(hello_nodes.len(), 2);
}

pub fn filter_label_equals<'a>(
    &'a self,
    label: &str
) -> Vec<&'a VirtualNode, Global>

Get a vector of all of the descendants of this VirtualNode that have the provided filter.

Examples

let component = html! {<div>
 <span label="hello",> {"Hi!"} </span>
 <em label="world",> {"There!!"} </em>
 <em label="hello",></em>
</div> };

let hello_nodes = component.filter_label_equals("hello");

assert_eq!(hello_nodes.len(), 2);
}

impl VirtualNode

pub fn new(tag: &str) -> VirtualNode

Create a new virtual node with a given tag.

These get patched into the DOM using document.createElement

use virtual_dom_rs::VirtualNode;

let div = VirtualNode::new("div");

pub fn text(text: &str) -> VirtualNode

Create a text node.

These get patched into the DOM using document.createTextNode

use virtual_dom_rs::VirtualNode;

let div = VirtualNode::text("div");

impl VirtualNode

pub fn create_element(&self) -> Element

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_text_node(&self) -> Text

Return a Text element from a VirtualNode, typically right before adding it into the DOM.

pub fn is_text_node(&self) -> bool

Whether or not this VirtualNode is representing a Text node

Trait Implementations

impl Debug for VirtualNode

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Display for VirtualNode

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl From<ParsedVirtualNode> for VirtualNode

fn from(parsed_node: ParsedVirtualNode) -> VirtualNode

Converts to this type from the input type.

impl From<VirtualNode> for ParsedVirtualNode

fn from(node: VirtualNode) -> ParsedVirtualNode

Converts to this type from the input type.

impl PartialEq<VirtualNode> for VirtualNode

fn eq(&self, other: &VirtualNode) -> bool

This method tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

This method tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl StructuralPartialEq for VirtualNode