Merge branch 'master' into eval-stuff

packages/web/.vscode/settings.json

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

packages/web/Cargo.toml

@@ -13,7 +13,9 @@ keywords = ["dom", "ui", "gui", "react", "wasm"]
 [dependencies]
 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"] }
+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"] }
@@ -79,4 +81,3 @@ dioxus-core-macro = { path = "../core-macro" }
 wasm-bindgen-test = "0.3.29"
 dioxus-ssr = { path = "../ssr" }
 wasm-logger = "0.2.0"
-

packages/web/src/dom.rs

@@ -241,25 +241,33 @@ 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| {
+                                    log::info!("Input type: {}", input.type_());
                                     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(|| target.dyn_ref().map(|input: &web_sys::HtmlTextAreaElement| Some(input.value())))
+                                .or_else(|| target.dyn_ref().map(|input: &web_sys::HtmlSelectElement| Some(input.value())))
+                                .or_else(|| Some(target.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/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/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));
 }