Struct virtual_node::VirtualNode

pub struct VirtualNode {
    pub tag: String,
    pub props: HashMap<String, String>,
    pub events: Events,
    pub children: Option<Vec<VirtualNode>>,
    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>

HTML props such as id, class, style, etc

events: Events

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

children: Option<Vec<VirtualNode>>

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)

Methods

impl VirtualNode

pub fn filter_label<'a, F>(&'a self, filter: F) -> Vec<&'a VirtualNode> 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>

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) -> CreatedElement

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<'_> From<&'_ str> for VirtualNode

fn from(text: &str) -> Self

Performs the conversion.

impl From<String> for VirtualNode

fn from(text: String) -> Self

Performs the conversion.

impl<'a> From<&'a String> for VirtualNode

fn from(text: &'a String) -> Self

Performs the conversion.

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: &VirtualNode) -> bool

This method tests for !=.

impl IntoIterator for VirtualNode

type Item = VirtualNode

The type of the elements being iterated over.

type IntoIter = IntoIter<VirtualNode>

Which kind of iterator are we turning this into?

fn into_iter(self) -> Self::IntoIter

Creates an iterator from a value.

impl Debug for VirtualNode

fn fmt(&self, f: &mut Formatter) -> Result

Formats the value using the given formatter.

impl Display for VirtualNode

fn fmt(&self, f: &mut Formatter) -> Result

Formats the value using the given formatter.