Merge branch 'master' into master

packages/web/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "rust-analyzer.cargo.target": "wasm32-unknown-unknown",
+}

packages/web/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "dioxus-web"
-version = "0.0.5"
+version = "0.2.0"
 authors = ["Jonathan Kelley"]
 edition = "2018"
 description = "Dioxus VirtualDOM renderer for the web browser using websys"
@@ -11,25 +11,25 @@ documentation = "https://dioxuslabs.com"
 keywords = ["dom", "ui", "gui", "react", "wasm"]
 
 [dependencies]
-dioxus-core = { path = "../core", version = "^0.1.9" }
-dioxus-html = { path = "../html", version = "^0.1.6", features = ["wasm-bind"] }
+dioxus-core = { path = "../core", version = "^0.2.0" }
+dioxus-html = { path = "../html", version = "^0.2.0" }
+dioxus-interpreter-js = { path = "../interpreter", version = "^0.2.0", features = [
+    "web",
+] }
+
 js-sys = "0.3.56"
 wasm-bindgen = { version = "0.2.79", features = ["enable-interning"] }
-lazy_static = "1.4.0"
 wasm-bindgen-futures = "0.4.29"
-log = { version = "0.4.14", features = ["release_max_level_off"] }
+log = { version = "0.4.14" }
 fxhash = "0.2.1"
-wasm-logger = "0.2.0"
 console_error_panic_hook = { version = "0.1.7", optional = true }
-wasm-bindgen-test = "0.3.29"
 once_cell = "1.9.0"
-async-channel = "1.6.1"
 anyhow = "1.0.53"
 gloo-timers = { version = "0.2.3", features = ["futures"] }
 futures-util = "0.3.19"
 smallstr = "0.2.0"
-dioxus-interpreter-js = { path = "../interpreter", version = "^0.0.0", features = ["web"] }
 serde-wasm-bindgen = "0.4.2"
+futures-channel = "0.3.21"
 
 [dependencies.web-sys]
 version = "0.3.56"
@@ -80,3 +80,4 @@ panic_hook = ["console_error_panic_hook"]
 dioxus-core-macro = { path = "../core-macro" }
 wasm-bindgen-test = "0.3.29"
 dioxus-ssr = { path = "../ssr" }
+wasm-logger = "0.2.0"

packages/web/examples/hydrate.rs

@@ -49,7 +49,7 @@ fn main() {
     let _ = dom.rebuild();
 
     let pre = dioxus_ssr::pre_render_vdom(&dom);
-    log::debug!("{}", pre);
+    log::trace!("{}", pre);
 
     // set the inner content of main to the pre-rendered content
     window()

packages/web/src/dom.rs

@@ -87,14 +87,11 @@ impl WebsysDom {
             }
         });
 
+        // a match here in order to avoid some error during runtime browser test
         let document = load_document();
         let root = match document.get_element_by_id(&cfg.rootname) {
             Some(root) => root,
-            // a match here in order to avoid some error during runtime browser test
-            None => {
-                let body = document.create_element("body").ok().unwrap();
-                body
-            }
+            None => document.create_element("body").ok().unwrap(),
         };
 
         Self {
@@ -108,6 +105,7 @@ impl WebsysDom {
         for edit in edits.drain(..) {
             match edit {
                 DomEdit::PushRoot { root } => self.interpreter.PushRoot(root),
+                DomEdit::PopRoot {} => self.interpreter.PopRoot(),
                 DomEdit::AppendChildren { many } => self.interpreter.AppendChildren(many),
                 DomEdit::ReplaceWith { root, m } => self.interpreter.ReplaceWith(root, m),
                 DomEdit::InsertAfter { root, n } => self.interpreter.InsertAfter(root, n),
@@ -130,8 +128,8 @@ impl WebsysDom {
                     self.interpreter.RemoveEventListener(root, event)
                 }
 
-                DomEdit::RemoveAttribute { root, name } => {
-                    self.interpreter.RemoveAttribute(root, name)
+                DomEdit::RemoveAttribute { root, name, ns } => {
+                    self.interpreter.RemoveAttribute(root, name, ns)
                 }
 
                 DomEdit::CreateTextNode { text, root } => {
@@ -228,25 +226,32 @@ fn virtual_event_from_websys_event(
                 for x in 0..elements.length() {
                     let element = elements.item(x).unwrap();
                     if let Some(name) = element.get_attribute("name") {
-                        let value: String = (&element)
+                        let value: Option<String> = (&element)
                                 .dyn_ref()
                                 .map(|input: &web_sys::HtmlInputElement| {
                                     match input.type_().as_str() {
                                         "checkbox" => {
                                             match input.checked() {
-                                                true => "true".to_string(),
-                                                false => "false".to_string(),
+                                                true => Some("true".to_string()),
+                                                false => Some("false".to_string()),
                                             }
                                         },
-                                        _ => input.value()
+                                        "radio" => {
+                                            match input.checked() {
+                                                true => Some(input.value()),
+                                                false => None,
+                                            }
+                                        }
+                                        _ => Some(input.value())
                                     }
                                 })
-                                .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| input.value()))
-                                .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| input.value()))
-                                .or_else(|| target.dyn_ref::<web_sys::HtmlElement>().unwrap().text_content())
+                                .or_else(|| element.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| Some(input.value())))
+                                .or_else(|| element.dyn_ref().map(|input: &web_sys::HtmlSelectElement| Some(input.value())))
+                                .or_else(|| Some(element.dyn_ref::<web_sys::HtmlElement>().unwrap().text_content()))
                                 .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener");
-
-                        values.insert(name, value);
+                        if let Some(value) = value {
+                            values.insert(name, value);
+                        }
                     }
                 }
             }

packages/web/src/lib.rs

@@ -1,3 +1,5 @@
+#![deny(missing_docs)]
+
 //! Dioxus WebSys
 //!
 //! ## Overview
@@ -55,6 +57,7 @@
 use std::rc::Rc;
 
 pub use crate::cfg::WebConfig;
+pub use crate::util::use_eval;
 use dioxus::SchedulerMsg;
 use dioxus::VirtualDom;
 pub use dioxus_core as dioxus;
@@ -66,6 +69,7 @@ mod cfg;
 mod dom;
 mod rehydrate;
 mod ric_raf;
+mod util;
 
 /// Launch the VirtualDOM given a root component and a configuration.
 ///
@@ -211,7 +215,7 @@ pub async fn run_with_props<T: 'static + Send>(root: Component<T>, root_props: T
         websys_dom.apply_edits(edits.edits);
     }
 
-    let work_loop = ric_raf::RafLoop::new();
+    let mut work_loop = ric_raf::RafLoop::new();
 
     loop {
         log::trace!("waiting for work");

packages/web/src/rehydrate.rs

@@ -80,8 +80,7 @@ impl WebsysDom {
 
                 *last_node_was_text = true;
 
-                self.interpreter.set_node(node_id.0, node);
-                // self.nodes[node_id.0] = Some(node);
+                self.interpreter.SetNode(node_id.0, node);
 
                 *cur_place += 1;
             }
@@ -93,21 +92,7 @@ impl WebsysDom {
 
                 let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
 
-                use smallstr::SmallString;
-                use std::fmt::Write;
-
-                // 8 digits is enough, yes?
-                // 12 million nodes in one page?
-                let mut s: SmallString<[u8; 8]> = smallstr::SmallString::new();
-                write!(s, "{}", node_id).unwrap();
-
-                node.dyn_ref::<Element>()
-                    .unwrap()
-                    .set_attribute("dioxus-id", s.as_str())
-                    .unwrap();
-
-                self.interpreter.set_node(node_id.0, node.clone());
-                // self.nodes[node_id.0] = Some(node.clone());
+                self.interpreter.SetNode(node_id.0, node.clone());
 
                 *cur_place += 1;
 
@@ -129,6 +114,21 @@ impl WebsysDom {
                     );
                 }
 
+                if !vel.listeners.is_empty() {
+                    use smallstr::SmallString;
+                    use std::fmt::Write;
+
+                    // 8 digits is enough, yes?
+                    // 12 million nodes in one page?
+                    let mut s: SmallString<[u8; 8]> = smallstr::SmallString::new();
+                    write!(s, "{}", node_id).unwrap();
+
+                    node.dyn_ref::<Element>()
+                        .unwrap()
+                        .set_attribute("dioxus-id", s.as_str())
+                        .unwrap();
+                }
+
                 place.pop();
                 nodes.pop();
 
@@ -145,7 +145,7 @@ impl WebsysDom {
                 let cur_place = place.last_mut().unwrap();
                 let node = nodes.last().unwrap().child_nodes().get(*cur_place).unwrap();
 
-                self.interpreter.set_node(node_id.0, node);
+                self.interpreter.SetNode(node_id.0, node);
 
                 // self.nodes[node_id.0] = Some(node);
 

packages/web/src/ric_raf.rs

@@ -7,6 +7,7 @@
 //! Because RIC doesn't work on Safari, we polyfill using the "ricpolyfill.js" file and use some basic detection to see
 //! if RIC is available.
 
+use futures_util::StreamExt;
 use gloo_timers::future::TimeoutFuture;
 use js_sys::Function;
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue};
@@ -14,21 +15,21 @@ use web_sys::{window, Window};
 
 pub(crate) struct RafLoop {
     window: Window,
-    ric_receiver: async_channel::Receiver<u32>,
-    raf_receiver: async_channel::Receiver<()>,
+    ric_receiver: futures_channel::mpsc::UnboundedReceiver<u32>,
+    raf_receiver: futures_channel::mpsc::UnboundedReceiver<()>,
     ric_closure: Closure<dyn Fn(JsValue)>,
     raf_closure: Closure<dyn Fn(JsValue)>,
 }
 
 impl RafLoop {
     pub fn new() -> Self {
-        let (raf_sender, raf_receiver) = async_channel::unbounded();
+        let (raf_sender, raf_receiver) = futures_channel::mpsc::unbounded();
 
         let raf_closure: Closure<dyn Fn(JsValue)> = Closure::wrap(Box::new(move |_v: JsValue| {
-            raf_sender.try_send(()).unwrap()
+            raf_sender.unbounded_send(()).unwrap()
         }));
 
-        let (ric_sender, ric_receiver) = async_channel::unbounded();
+        let (ric_sender, ric_receiver) = futures_channel::mpsc::unbounded();
 
         let has_idle_callback = {
             let bo = window().unwrap().dyn_into::<js_sys::Object>().unwrap();
@@ -45,7 +46,7 @@ impl RafLoop {
                 10
             };
 
-            ric_sender.try_send(time_remaining).unwrap()
+            ric_sender.unbounded_send(time_remaining).unwrap()
         }));
 
         // execute the polyfill for safari
@@ -64,16 +65,16 @@ impl RafLoop {
         }
     }
     /// waits for some idle time and returns a timeout future that expires after the idle time has passed
-    pub async fn wait_for_idle_time(&self) -> TimeoutFuture {
+    pub async fn wait_for_idle_time(&mut self) -> TimeoutFuture {
         let ric_fn = self.ric_closure.as_ref().dyn_ref::<Function>().unwrap();
         let _cb_id: u32 = self.window.request_idle_callback(ric_fn).unwrap();
-        let deadline = self.ric_receiver.recv().await.unwrap();
+        let deadline = self.ric_receiver.next().await.unwrap();
         TimeoutFuture::new(deadline)
     }
 
-    pub async fn wait_for_raf(&self) {
+    pub async fn wait_for_raf(&mut self) {
         let raf_fn = self.raf_closure.as_ref().dyn_ref::<Function>().unwrap();
         let _id: i32 = self.window.request_animation_frame(raf_fn).unwrap();
-        self.raf_receiver.recv().await.unwrap();
+        self.raf_receiver.next().await.unwrap();
     }
 }

packages/web/src/util.rs

@@ -1 +1,26 @@
 //! Utilities specific to websys
+
+use dioxus_core::*;
+
+/// Get a closure that executes any JavaScript in the webpage.
+///
+/// # Safety
+///
+/// Please be very careful with this function. A script with too many dynamic
+/// parts is practically asking for a hacker to find an XSS vulnerability in
+/// it. **This applies especially to web targets, where the JavaScript context
+/// has access to most, if not all of your application data.**
+///
+/// # Panics
+///
+/// The closure will panic if the provided script is not valid JavaScript code
+/// or if it returns an uncaught error.
+pub fn use_eval<S: std::string::ToString>(cx: &ScopeState) -> &dyn Fn(S) {
+    cx.use_hook(|_| {
+        |script: S| {
+            js_sys::Function::new_no_args(&script.to_string())
+                .call0(&wasm_bindgen::JsValue::NULL)
+                .expect("failed to eval script");
+        }
+    })
+}

packages/web/tests/hydrate.rs

@@ -2,6 +2,7 @@ use dioxus_core::prelude::*;
 use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
 use wasm_bindgen_test::wasm_bindgen_test;
+use web_sys::window;
 
 wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
 
@@ -10,10 +11,12 @@ fn makes_tree() {
     fn app(cx: Scope) -> Element {
         cx.render(rsx! {
             div {
-                h1 {}
-            }
-            div {
-                h2 {}
+                div {
+                    h1 {}
+                }
+                div {
+                    h2 {}
+                }
             }
         })
     }
@@ -29,13 +32,34 @@ fn rehydrates() {
     fn app(cx: Scope) -> Element {
         cx.render(rsx! {
             div {
-                h1 {}
-            }
-            div {
-                h2 {}
+                div {
+                    h1 { "h1" }
+                }
+                div {
+                    h2 { "h2" }
+                }
+                button {
+                    onclick: move |_| {
+                        println!("clicked");
+                    },
+                    "listener test"
+                }
+                false.then(|| rsx!{ "hello" })
             }
         })
     }
 
-    dioxus_web::launch(app);
+    let mut dom = VirtualDom::new(app);
+    let _ = dom.rebuild();
+    let out = dioxus_ssr::render_vdom_cfg(&dom, |c| c.pre_render(true));
+
+    window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .body()
+        .unwrap()
+        .set_inner_html(&format!("<div id='main'>{}</div>", out));
+
+    dioxus_web::launch_cfg(app, |c| c.hydrate(true));
 }