Support inner html

book/src/SUMMARY.md

@@ -9,6 +9,7 @@
     - [Writing html!](./html-macro/html-macro.md)
     - [Compile Time Errors](./html-macro/compile-time-errors.md)
     - [Working with Text](./html-macro/text/README.md)
+    - [Setting Inner HTML](./html-macro/setting-inner-html/README.md)
   - [Virtual DOM](./virtual-dom/README.md)
     - [Unit Testing your Views](./virtual-dom/unit-testing-views.md)
   - [Server Side Rendering (SSR)](./views/server-side-rendering/README.md)

book/src/html-macro/setting-inner-html/README.md

@@ -0,0 +1,16 @@
+# Setting Inner HTML
+
+You'll sometimes want to use a string of HTML in order to set the child nodes for an element.
+
+For example, if you're creating a tooltip component you might want to be able to support setting tooltips as such:
+
+<div data-tip="Hello <strong>World!</strong>"></div>
+
+You can use the `unsafe_inner_html` attribute for this purpose.
+
+Note that it is called `unsafe` because it can poentially expose your application to cross side scripting attacks if your application
+trusts arbitrary un-escaped HTML strings that are provided by users.
+
+```rust
+{{#bookimport ../../../../crates/virtual-dom-rs/tests/create_element.rs@inner-html}}
+```

crates/router-rs-macro-test/src/book_example.rs

@@ -16,7 +16,7 @@ fn route_data_and_param(id: u16, state: Provided<SomeState>, meal: Meal) -> Virt
     }
 }
 
-fn download_some_data (id: u16, state: Provided<SomeState>, meal: Meal) {
+fn download_some_data(id: u16, state: Provided<SomeState>, meal: Meal) {
     // Check state to see if we've already downloaded data ...
     // If not - download the data that we need
 }

crates/router-rs-macro-test/src/on_visit.rs

@@ -1,5 +1,5 @@
 use router_rs::prelude::*;
-use std::sync::atomic::{AtomicBool, Ordering, AtomicUsize};
+use std::sync::atomic::{AtomicBool, AtomicUsize, Ordering};
 use virtual_dom_rs::prelude::VirtualNode;
 
 static mut VISITED: AtomicBool = AtomicBool::new(false);
@@ -57,7 +57,7 @@ fn route_param_and_data(id: u16, state: Provided<SomeState>) -> VirtualNode {
     VirtualNode::Text("".into())
 }
 
-fn set_id (id: u16, state: Provided<SomeState>) {
+fn set_id(id: u16, state: Provided<SomeState>) {
     unsafe {
         *ID.get_mut() = id as usize;
     }
@@ -74,7 +74,10 @@ fn visit_params_data() {
         assert_eq!(ID.load(Ordering::SeqCst), 0);
     }
 
-    router.matching_routerhandler("/users/5").unwrap().on_visit("/users/5");
+    router
+        .matching_routerhandler("/users/5")
+        .unwrap()
+        .on_visit("/users/5");
 
     unsafe {
         assert_eq!(ID.load(Ordering::SeqCst), 5);

crates/virtual-dom-rs/tests/create_element.rs

@@ -3,6 +3,12 @@
 //! To run all tests in this file:
 //!
 //! wasm-pack test crates/virtual-dom-rs --chrome --headless -- --test create_element
+//!
+//! ---
+//!
+//! To run a single test:
+//!
+//! wasm-pack test crates/virtual-dom-rs --chrome --headless -- --test create_element nested_divs
 
 #![feature(proc_macro_hygiene)]
 
@@ -76,3 +82,18 @@ fn click_event() {
 
     assert_eq!(*clicked, Cell::new(true));
 }
+
+// @book start inner-html
+#[wasm_bindgen_test]
+fn inner_html() {
+    let div = html! {
+    <div
+      unsafe_inner_html="<span>hi</span>"
+    >
+    </div>
+    };
+    let div: Element = div.create_dom_node().node.unchecked_into();
+
+    assert_eq!(div.inner_html(), "<span>hi</span>");
+}
+// @book end inner-html

crates/virtual-node/src/lib.rs

@@ -227,6 +227,12 @@ impl VElement {
         let mut closures = HashMap::new();
 
         self.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");
@@ -578,18 +584,24 @@ mod tests {
         assert_eq!(&node.to_string(), "<br>");
     }
 
-    // TODO: Use html_macro as dev dependency and uncomment
-    //    #[test]
-    //    fn to_string() {
-    //        let node = html! {
-    //        <div id="some-id", !onclick=|_ev| {},>
-    //            <span>
-    //                { "Hello world" }
-    //            </span>
-    //        </div>
-    //        };
-    //        let expected = r#"<div id="some-id"><span>Hello world</span></div>"#;
-    //
-    //        assert_eq!(node.to_string(), expected);
-    //    }
+    #[test]
+    fn to_string() {
+        let mut node = VirtualNode::Element(VElement::new("div"));
+        node.as_velement_mut()
+            .unwrap()
+            .attrs
+            .insert("id".into(), "some-id".into());
+
+        let mut child = VirtualNode::Element(VElement::new("span"));
+
+        let mut text = VirtualNode::Text(VText::new("Hello world"));
+
+        child.as_velement_mut().unwrap().children.push(text);
+
+        node.as_velement_mut().unwrap().children.push(child);
+
+        let expected = r#"<div id="some-id"><span>Hello world</span></div>"#;
+
+        assert_eq!(node.to_string(), expected);
+    }
 }

examples/isomorphic/app/src/lib.rs

@@ -106,7 +106,8 @@ fn download_contributors_json(store: Provided<Rc<RefCell<Store>>>) {
 
     web_sys::window()
         .unwrap()
-        .request_animation_frame(raf_closure.as_ref().unchecked_ref()).unwrap();
+        .request_animation_frame(raf_closure.as_ref().unchecked_ref())
+        .unwrap();
 
     // TODO: We don't want to repeatedly forget this closure and should instead figure out a place
     // to store it.

examples/isomorphic/app/src/state/mod.rs

@@ -40,9 +40,9 @@ impl State {
         match msg {
             Msg::Click => self.increment_click(),
             Msg::SetPath(path) => self.set_path(path.to_string()),
-	    Msg::SetContributorsJson(json) => {
-		self.contributors = Some(json.into_serde().unwrap());
-	    },
+            Msg::SetContributorsJson(json) => {
+                self.contributors = Some(json.into_serde().unwrap());
+            }
             Msg::InitiatedContributorsDownload => {
                 self.has_initiated_contributors_download = true;
             }

examples/isomorphic/app/src/store.rs

@@ -39,7 +39,7 @@ impl Store {
                 if let Some(after_route) = &self.after_route {
                     after_route(path.as_str());
                 }
-            },
+            }
             _ => self.state.msg(msg),
         }
 

examples/isomorphic/app/src/views/nav_bar_view/nav_bar_item_view.rs

@@ -8,11 +8,7 @@ pub struct NavBarItemView {
 }
 
 impl NavBarItemView {
-    pub fn new(
-        path: &'static str,
-        text: &'static str,
-        style: &'static str
-    ) -> NavBarItemView {
+    pub fn new(path: &'static str, text: &'static str, style: &'static str) -> NavBarItemView {
         NavBarItemView { path, text, style }
     }
 }

examples/isomorphic/client/src/lib.rs

@@ -54,8 +54,7 @@ impl Client {
         }));
 
         app.store.borrow_mut().set_after_route(Box::new(|new_path| {
-            history()
-                .push_state_with_url(&JsValue::null(), "Rust Web App", Some(new_path));
+            history().push_state_with_url(&JsValue::null(), "Rust Web App", Some(new_path));
         }));
 
         let store = Rc::clone(&app.store);
@@ -67,8 +66,7 @@ impl Client {
         };
         let on_popstate = Box::new(on_popstate) as Box<FnMut(_)>;
         let mut on_popstate = Closure::wrap(on_popstate);
-        window()
-            .set_onpopstate(Some(on_popstate.as_ref().unchecked_ref()));
+        window().set_onpopstate(Some(on_popstate.as_ref().unchecked_ref()));
         on_popstate.forget();
 
         let root_node = document()
@@ -141,9 +139,7 @@ fn history() -> web_sys::History {
 }
 
 fn location() -> web_sys::Location {
-        document()
-        .location()
-        .unwrap()
+    document().location().unwrap()
 }
 
 fn hostname() -> String {