Feat: more docs, dissolve vnode crate into dioxus-core

packages/web/src/lib.rs

@@ -1 +1,211 @@
+use std::{collections::HashMap, fmt, rc::Rc};
+use web_sys::{self, Element, EventTarget, Node, Text};
 
+use dioxus_core::prelude::{VElement, VNode, VText, VirtualNode};
+use std::ops::Deref;
+use std::sync::Mutex;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::JsValue;
+
+pub struct DomRenderer {}
+
+// Used to uniquely identify elements that contain closures so that the DomUpdater can
+// look them up by their unique id.
+// When the DomUpdater sees that the element no longer exists it will drop all of it's
+// Rc'd Closures for those events.
+use lazy_static::lazy_static;
+lazy_static! {
+    static ref ELEM_UNIQUE_ID: Mutex<u32> = Mutex::new(0);
+}
+
+fn create_unique_identifier() -> u32 {
+    let mut elem_unique_id = ELEM_UNIQUE_ID.lock().unwrap();
+    *elem_unique_id += 1;
+    *elem_unique_id
+}
+
+/// A node along with all of the closures that were created for that
+/// node's events and all of it's child node's events.
+pub struct CreatedNode<T> {
+    /// A `Node` or `Element` that was created from a `VirtualNode`
+    pub node: T,
+    /// A map of a node's unique identifier along with all of the Closures for that node.
+    ///
+    /// The DomUpdater uses this to look up nodes and see if they're still in the page. If not
+    /// the reference that we maintain to their closure will be dropped, thus freeing the Closure's
+    /// memory.
+    pub closures: HashMap<u32, Vec<DynClosure>>,
+}
+
+impl<T> CreatedNode<T> {
+    pub fn without_closures<N: Into<T>>(node: N) -> Self {
+        CreatedNode {
+            node: node.into(),
+            closures: HashMap::with_capacity(0),
+        }
+    }
+}
+
+impl<T> Deref for CreatedNode<T> {
+    type Target = T;
+    fn deref(&self) -> &Self::Target {
+        &self.node
+    }
+}
+
+impl From<CreatedNode<Element>> for CreatedNode<Node> {
+    fn from(other: CreatedNode<Element>) -> CreatedNode<Node> {
+        CreatedNode {
+            node: other.node.into(),
+            closures: other.closures,
+        }
+    }
+}
+
+//----------------------------------
+// Create nodes for the VNode types
+// ---------------------------------
+
+/// Return a `Text` element from a `VirtualNode`, typically right before adding it
+/// into the DOM.
+pub fn create_text_node(text_node: &VText) -> Text {
+    let document = web_sys::window().unwrap().document().unwrap();
+    document.create_text_node(&text_node.text)
+}
+
+/// 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_element_node(velement: &VElement) -> CreatedNode<Element> {
+    let document = web_sys::window().unwrap().document().unwrap();
+
+    let element = if html_validation::is_svg_namespace(&velement.tag) {
+        document
+            .create_element_ns(Some("http://www.w3.org/2000/svg"), &velement.tag)
+            .unwrap()
+    } else {
+        document.create_element(&velement.tag).unwrap()
+    };
+
+    let mut closures = HashMap::new();
+
+    velement.attrs.iter().for_each(|(name, value)| {
+        if name == "unsafe_inner_html" {
+            element.set_inner_html(value);
+
+            return;
+        }
+
+        element
+            .set_attribute(name, value)
+            .expect("Set element attribute in create element");
+    });
+
+    todo!("Support events properly in web ");
+    // if velement.events.0.len() > 0 {
+    //     let unique_id = create_unique_identifier();
+
+    //     element
+    //         .set_attribute("data-vdom-id".into(), &unique_id.to_string())
+    //         .expect("Could not set attribute on element");
+
+    //     closures.insert(unique_id, vec![]);
+
+    //     velement.events.0.iter().for_each(|(onevent, callback)| {
+    //         // onclick -> click
+    //         let event = &onevent[2..];
+
+    //         let current_elem: &EventTarget = element.dyn_ref().unwrap();
+
+    //         current_elem
+    //             .add_event_listener_with_callback(event, callback.as_ref().as_ref().unchecked_ref())
+    //             .unwrap();
+
+    //         closures
+    //             .get_mut(&unique_id)
+    //             .unwrap()
+    //             .push(Rc::clone(callback));
+    //     });
+    // }
+
+    let mut previous_node_was_text = false;
+
+    velement.children.iter().for_each(|child| {
+        match child {
+            VNode::Text(text_node) => {
+                let current_node = element.as_ref() as &web_sys::Node;
+
+                // We ensure that the text siblings are patched by preventing the browser from merging
+                // neighboring text nodes. Originally inspired by some of React's work from 2016.
+                //  -> https://reactjs.org/blog/2016/04/07/react-v15.html#major-changes
+                //  -> https://github.com/facebook/react/pull/5753
+                //
+                // `ptns` = Percy text node separator
+                if previous_node_was_text {
+                    let separator = document.create_comment("ptns");
+                    current_node
+                        .append_child(separator.as_ref() as &web_sys::Node)
+                        .unwrap();
+                }
+
+                current_node
+                    .append_child(&create_text_node(&text_node))
+                    // .append_child(&text_node.create_text_node())
+                    .unwrap();
+
+                previous_node_was_text = true;
+            }
+            VNode::Element(element_node) => {
+                previous_node_was_text = false;
+
+                let child = create_element_node(&element_node);
+                // let child = element_node.create_element_node();
+                let child_elem: Element = child.node;
+
+                closures.extend(child.closures);
+
+                element.append_child(&child_elem).unwrap();
+            }
+
+            VNode::Component(component) => {
+                //
+                todo!("Support components in the web properly");
+            }
+        }
+    });
+
+    todo!("Support events properly in web ");
+    // if let Some(on_create_elem) = velement.events.0.get("on_create_elem") {
+    //     let on_create_elem: &js_sys::Function = on_create_elem.as_ref().as_ref().unchecked_ref();
+    //     on_create_elem
+    //         .call1(&wasm_bindgen::JsValue::NULL, &element)
+    //         .unwrap();
+    // }
+
+    CreatedNode {
+        node: element,
+        closures,
+    }
+}
+
+/// Box<dyn AsRef<JsValue>>> is our js_sys::Closure. Stored this way to allow us to store
+/// any Closure regardless of the arguments.
+pub type DynClosure = Rc<dyn AsRef<JsValue>>;
+
+/// We need a custom implementation of fmt::Debug since JsValue doesn't
+/// implement debug.
+pub struct Events(pub HashMap<String, DynClosure>);
+
+impl PartialEq for Events {
+    // TODO: What should happen here..? And why?
+    fn eq(&self, _rhs: &Self) -> bool {
+        true
+    }
+}
+
+impl fmt::Debug for Events {
+    // Print out all of the event names for this VirtualNode
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        let events: String = self.0.keys().map(|key| " ".to_string() + key).collect();
+        write!(f, "{}", events)
+    }
+}

packages/web/src/virtual_node_test_utils.rs

@@ -0,0 +1,141 @@
+//! A collection of functions that are useful for unit testing your html! views.
+
+use crate::VirtualNode;
+
+impl VirtualNode {
+    /// Get a vector of all of the VirtualNode children / grandchildren / etc of
+    /// your virtual_node that have a label that matches your filter.
+    ///
+    /// # Examples
+    ///
+    /// ```rust,ignore
+    /// # #[macro_use] extern crate virtual_dom_rs;  fn main() {
+    ///
+    /// 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<'a, F>(&'a self, filter: F) -> Vec<&'a VirtualNode>
+    where
+        F: Fn(&str) -> bool,
+    {
+        // Get descendants recursively
+        let mut descendants: Vec<&'a VirtualNode> = vec![];
+        match self {
+            VirtualNode::Text(_) => { /* nothing to do */ }
+            VirtualNode::Element(element_node) => {
+                for child in element_node.children.iter() {
+                    get_descendants(&mut descendants, child);
+                }
+            }
+        }
+
+        // Filter descendants
+        descendants
+            .into_iter()
+            .filter(|vn: &&'a VirtualNode| match vn {
+                VirtualNode::Text(_) => false,
+                VirtualNode::Element(element_node) => match element_node.attrs.get("label") {
+                    Some(label) => filter(label),
+                    None => false,
+                },
+            })
+            .collect()
+    }
+
+    /// Get a vector of all of the descendants of this VirtualNode
+    /// that have the provided `filter`.
+    ///
+    /// # Examples
+    ///
+    /// ```rust,ignore
+    /// # #[macro_use] extern crate virtual_dom_rs;  fn main() {
+    ///
+    /// 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);
+    /// }
+    /// ```
+    pub fn filter_label_equals<'a>(&'a self, label: &str) -> Vec<&'a VirtualNode> {
+        self.filter_label(|node_label| node_label == label)
+    }
+}
+
+fn get_descendants<'a>(descendants: &mut Vec<&'a VirtualNode>, node: &'a VirtualNode) {
+    descendants.push(node);
+    match node {
+        VirtualNode::Text(_) => { /* nothing to do */ }
+        VirtualNode::Element(element_node) => {
+            for child in element_node.children.iter() {
+                get_descendants(descendants, child);
+            }
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::VElement;
+    use std::collections::HashMap;
+
+    // TODO: Move this test somewhere that we can use the `html!` macro
+    //    #[test]
+    //    fn filter_label() {
+    //        let html = html! {
+    //        // Should not pick up labels on the root node
+    //        <div label="hello0",>
+    //            // This node gets picked up
+    //            <span label="hello1",>
+    //            </span>
+    //            // This node gets picked up
+    //            <em label="hello2",>
+    //                { "hello there :)!" }
+    //            </em>
+    //            <div label="world",></div>
+    //        </div>
+    //        };
+    //
+    //        let hello_nodes = html.filter_label(|label| label.contains("hello"));
+    //
+    //        assert_eq!(
+    //            hello_nodes.len(),
+    //            2,
+    //            "2 elements with label containing 'hello'"
+    //        );
+    //    }
+
+    #[test]
+    fn label_equals() {
+        let span = VirtualNode::element("span");
+
+        let mut attrs = HashMap::new();
+        attrs.insert("label".to_string(), "hello".to_string());
+        let mut em = VElement::new("em");
+        em.attrs = attrs;
+
+        let mut html = VElement::new("div");
+        html.children.push(span);
+        html.children.push(em.into());
+
+        let html_node = VirtualNode::Element(html);
+        let hello_nodes = html_node.filter_label_equals("hello");
+
+        assert_eq!(hello_nodes.len(), 1);
+    }
+}