wip: start moving events to rc<event>

packages/web/Cargo.toml

@@ -36,9 +36,12 @@ version = "0.3.50"
 features = [
     "Comment",
     "Document",
+    # "DataTransfer",
     "Element",
     "HtmlElement",
     "HtmlInputElement",
+    "HtmlSelectElement",
+    "HtmlTextAreaElement",
     "EventTarget",
     "HtmlCollection",
     "Node",
@@ -60,6 +63,7 @@ features = [
     "DocumentType",
     "CharacterData",
     "HtmlOptionElement",
+
 ]
 
 [profile.release]

packages/web/examples/input.rs

@@ -0,0 +1,72 @@
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_web::WebsysRenderer;
+
+fn main() {
+    // wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    log::info!("hello world");
+    wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
+}
+
+static App: FC<()> = |ctx| {
+    let (val, set_val) = use_state(&ctx, || "asd".to_string());
+
+    ctx.render(rsx! {
+        div { class: "max-w-lg max-w-xs bg-blue-800 shadow-2xl rounded-lg mx-auto text-center py-12 mt-4 rounded-xl"
+            div { class: "container py-5 max-w-md mx-auto"
+                h1 { class: "text-gray-200 text-center font-extrabold -mt-3 text-3xl", 
+                    "Text Input Example"
+                } 
+                div { class: "mb-4"
+                    input {
+                        placeholder: "Username"
+                        class: "shadow appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id: "username" 
+                        type: "text"
+                        value: "{val}"
+                        oninput: move |evet| {
+                            log::debug!("Value is {:#?}", evet);
+                            set_val(evet.value);
+                        }
+                    }
+                    p { "Val is: {val}" }
+                }            
+            }
+        }
+    })    
+};
+
+static Example: FC<()> = |ctx| {
+    ctx.render(rsx! {
+        div { class: "max-w-lg max-w-xs bg-blue-800 shadow-2xl rounded-lg mx-auto text-center py-12 mt-4 rounded-xl"
+            div { class: "container py-5 max-w-md mx-auto"
+                h1 { class: "text-gray-200 text-center font-extrabold -mt-3 text-3xl", 
+                    "Text Input Example"
+                } 
+                UserInput {}
+            }
+        }
+    })
+};
+
+static UserInput: FC<()> = |ctx| {
+    let (val, set_val) = use_state(&ctx, || "asd".to_string());
+
+    rsx!{ in ctx,
+        div { class: "mb-4"
+            input { class: "shadow appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                placeholder: "Username"
+                id: "username" 
+                type: "text"
+                oninput: move |evet| {
+                    log::debug!("Value is {:#?}", evet);
+                    set_val(evet.value);
+                }
+            }
+            p { "Val is: {val}" }
+        }
+    }
+    
+};

packages/web/src/interpreter.rs

@@ -7,7 +7,9 @@ use dioxus_core::{
 };
 use fxhash::FxHashMap;
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{window, Document, Element, Event, HtmlInputElement, HtmlOptionElement, Node};
+use web_sys::{
+    window, Document, Element, Event, HtmlElement, HtmlInputElement, HtmlOptionElement, Node,
+};
 
 #[derive(Clone, Copy, PartialEq, Eq, Debug, Hash)]
 pub struct CacheId(u32);
@@ -564,11 +566,38 @@ fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
             todo!()
         }
 
-        "change" | "input" | "invalid" | "reset" | "submit" => {
+        "change" => {
+            let evt: web_sys::Event = event.clone().dyn_into().expect("wrong error typ");
+            todo!()
+            // VirtualEvent::FormEvent(FormEvent {value:})
+        }
+
+        "input" | "invalid" | "reset" | "submit" => {
             // is a special react events
             let evt: web_sys::InputEvent = event.clone().dyn_into().expect("wrong event type");
-            let value: Option<String> = (&evt).data();
-            let value = value.unwrap_or_default();
+            let this: web_sys::EventTarget = evt.target().unwrap();
+
+            let value = (&this)
+                .dyn_ref()
+                .map(|input: &web_sys::HtmlInputElement| input.value())
+                .or_else(|| {
+                    (&this)
+                        .dyn_ref()
+                        .map(|input: &web_sys::HtmlTextAreaElement| input.value())
+                })
+                .or_else(|| {
+                    (&this)
+                        .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");
+
+            // let p2 = evt.data_transfer();
+
+            // let value: Option<String> = (&evt).data();
+            // let value = val;
+            // let value = value.unwrap_or_default();
             // let value = (&evt).data().expect("No data to unwrap");
 
             // todo - this needs to be a "controlled" event