feat: events work again!

packages/web/src/lib.rs

@@ -12,7 +12,7 @@ pub use dioxus_core as dioxus;
 use dioxus_core::{events::EventTrigger, prelude::FC};
 
 pub use dioxus_core::prelude;
-pub mod interpreter;
+// pub mod interpreter;
 pub mod new;
 
 /// The `WebsysRenderer` provides a way of rendering a Dioxus Virtual DOM to the browser's DOM.
@@ -34,7 +34,7 @@ impl WebsysRenderer {
     ///
     /// Run the app to completion, panicing if any error occurs while rendering.
     /// Pairs well with the wasm_bindgen async handler
-    pub async fn start(root: impl for<'a> Fn(Context<'a, ()>) -> VNode + 'static) {
+    pub async fn start(root: FC<()>) {
         Self::new(root).run().await.expect("Virtual DOM failed :(");
     }
 
@@ -42,7 +42,7 @@ impl WebsysRenderer {
     ///
     /// This means that the root component must either consumes its own context, or statics are used to generate the page.
     /// The root component can access things like routing in its context.
-    pub fn new(root: impl for<'a> Fn(Context<'a, ()>) -> VNode + 'static) -> Self {
+    pub fn new(root: FC<()>) -> Self {
         Self::new_with_props(root, ())
     }
 
@@ -50,10 +50,7 @@ impl WebsysRenderer {
     /// Automatically progresses the creation of the VNode tree to completion.
     ///
     /// A VDom is automatically created. If you want more granular control of the VDom, use `from_vdom`
-    pub fn new_with_props<T: Properties + 'static>(
-        root: impl for<'a> Fn(Context<'a, T>) -> VNode + 'static,
-        root_props: T,
-    ) -> Self {
+    pub fn new_with_props<T: Properties + 'static>(root: FC<T>, root_props: T) -> Self {
         Self::from_vdom(VirtualDom::new_with_props(root, root_props))
     }
 
@@ -63,28 +60,23 @@ impl WebsysRenderer {
     }
 
     pub async fn run(&mut self) -> dioxus_core::error::Result<()> {
-        // let (sender, mut receiver) = async_channel::unbounded::<EventTrigger>();
-
         let body_element = prepare_websys_dom();
 
-        // let mut patch_machine = interpreter::PatchMachine::new(body_element.clone(), move |ev| {
-        //     log::debug!("Event trigger! {:#?}", ev);
-        //     let mut c = sender.clone();
-        //     wasm_bindgen_futures::spawn_local(async move {
-        //         c.send(ev).await.unwrap();
-        //     });
-        // });
-
         let root_node = body_element.first_child().unwrap();
 
-        let mut websys_dom = crate::new::WebsysDom::new(body_element);
+        let mut websys_dom = crate::new::WebsysDom::new(body_element.clone());
 
         websys_dom.stack.push(root_node);
-        // patch_machine.stack.push(root_node.clone());
-
-        // todo: initialize the event registry properly on the root
 
         self.internal_dom.rebuild(&mut websys_dom)?;
+
+        while let Some(trigger) = websys_dom.wait_for_event().await {
+            let root_node = body_element.first_child().unwrap();
+            websys_dom.stack.push(root_node.clone());
+            self.internal_dom
+                .progress_with_event(&mut websys_dom, trigger)?;
+        }
+
         // let edits = self.internal_dom.rebuild()?;
         // log::debug!("Received edits: {:#?}", edits);
         // edits.iter().for_each(|edit| {

packages/web/src/new.rs

@@ -1,19 +1,35 @@
-use std::collections::HashMap;
+use std::{collections::HashMap, rc::Rc, sync::Arc};
 
-use dioxus_core::virtual_dom::RealDomNode;
+use dioxus_core::{
+    events::{EventTrigger, VirtualEvent},
+    prelude::ScopeIdx,
+    virtual_dom::RealDomNode,
+};
+use fxhash::FxHashMap;
 use nohash_hasher::IntMap;
 use wasm_bindgen::{closure::Closure, JsCast};
 use web_sys::{
     window, Document, Element, Event, HtmlElement, HtmlInputElement, HtmlOptionElement, Node,
 };
 
-use crate::interpreter::Stack;
 pub struct WebsysDom {
     pub stack: Stack,
     nodes: IntMap<u32, Node>,
     document: Document,
     root: Element,
 
+    event_receiver: async_channel::Receiver<EventTrigger>,
+    trigger: Arc<dyn Fn(EventTrigger)>,
+
+    // every callback gets a monotomically increasing callback ID
+    callback_id: usize,
+
+    // map of listener types to number of those listeners
+    listeners: FxHashMap<String, (usize, Closure<dyn FnMut(&Event)>)>,
+
+    // Map of callback_id to component index and listener id
+    callback_map: FxHashMap<usize, (usize, usize)>,
+
     // We need to make sure to add comments between text nodes
     // 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.
@@ -33,18 +49,39 @@ impl WebsysDom {
             .document()
             .expect("must have access to the Document");
 
+        let (sender, mut receiver) = async_channel::unbounded::<EventTrigger>();
+
+        let sender_callback = Arc::new(move |ev| {
+            let mut c = sender.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                c.send(ev).await.unwrap();
+            });
+        });
+
+        let mut nodes =
+            HashMap::with_capacity_and_hasher(1000, nohash_hasher::BuildNoHashHasher::default());
+
+        nodes.insert(0_u32, root.clone().dyn_into::<Node>().unwrap());
         Self {
             stack: Stack::with_capacity(10),
-            nodes: HashMap::with_capacity_and_hasher(
-                1000,
-                nohash_hasher::BuildNoHashHasher::default(),
-            ),
+            nodes,
+
+            callback_id: 0,
+            listeners: FxHashMap::default(),
+            callback_map: FxHashMap::default(),
             document,
+            event_receiver: receiver,
+            trigger: sender_callback,
             root,
             last_node_was_text: false,
             node_counter: Counter(0),
         }
     }
+
+    pub async fn wait_for_event(&mut self) -> Option<EventTrigger> {
+        let v = self.event_receiver.recv().await.unwrap();
+        Some(v)
+    }
 }
 
 struct Counter(u32);
@@ -56,11 +93,13 @@ impl Counter {
 }
 impl dioxus_core::diff::RealDom for WebsysDom {
     fn push_root(&mut self, root: dioxus_core::virtual_dom::RealDomNode) {
+        log::debug!("Called `[`push_root] {:?}", root);
         let domnode = self.nodes.get(&root.0).expect("Failed to pop know root");
         self.stack.push(domnode.clone());
     }
 
     fn append_child(&mut self) {
+        log::debug!("Called [`append_child`]");
         let child = self.stack.pop();
 
         if child.dyn_ref::<web_sys::Text>().is_some() {
@@ -81,6 +120,7 @@ impl dioxus_core::diff::RealDom for WebsysDom {
     }
 
     fn replace_with(&mut self) {
+        log::debug!("Called [`replace_with`]");
         let new_node = self.stack.pop();
         let old_node = self.stack.pop();
 
@@ -117,10 +157,12 @@ impl dioxus_core::diff::RealDom for WebsysDom {
     }
 
     fn remove(&mut self) {
+        log::debug!("Called [`remove`]");
         todo!()
     }
 
     fn remove_all_children(&mut self) {
+        log::debug!("Called [`remove_all_children`]");
         todo!()
     }
 
@@ -134,6 +176,8 @@ impl dioxus_core::diff::RealDom for WebsysDom {
         self.stack.push(textnode.clone());
         self.nodes.insert(nid, textnode);
 
+        log::debug!("Called [`create_text_node`]: {}, {}", text, nid);
+
         RealDomNode::new(nid)
     }
 
@@ -148,6 +192,7 @@ impl dioxus_core::diff::RealDom for WebsysDom {
         self.stack.push(el.clone());
         let nid = self.node_counter.next();
         self.nodes.insert(nid, el);
+        log::debug!("Called [`create_element`]: {}, {:?}", tag, nid);
         RealDomNode::new(nid)
     }
 
@@ -166,6 +211,7 @@ impl dioxus_core::diff::RealDom for WebsysDom {
         self.stack.push(el.clone());
         let nid = self.node_counter.next();
         self.nodes.insert(nid, el);
+        log::debug!("Called [`create_element_ns`]: {:}", nid);
         RealDomNode::new(nid)
     }
 
@@ -173,81 +219,133 @@ impl dioxus_core::diff::RealDom for WebsysDom {
         &mut self,
         event: &str,
         scope: dioxus_core::prelude::ScopeIdx,
-        id: usize,
+        el_id: usize,
+        real_id: RealDomNode,
     ) {
-        // if let Some(entry) = self.listeners.get_mut(event) {
-        //     entry.0 += 1;
-        // } else {
-        //     let trigger = self.trigger.clone();
-        //     let handler = Closure::wrap(Box::new(move |event: &web_sys::Event| {
-        //         log::debug!("Handling event!");
+        log::debug!(
+            "Called [`new_event_listener`]: {}, {:?}, {}, {:?}",
+            event,
+            scope,
+            el_id,
+            real_id
+        );
+        // attach the correct attributes to the element
+        // these will be used by accessing the event's target
+        // This ensures we only ever have one handler attached to the root, but decide
+        // dynamically when we want to call a listener.
 
-        //         let target = event
-        //             .target()
-        //             .expect("missing target")
-        //             .dyn_into::<Element>()
-        //             .expect("not a valid element");
+        let el = self.stack.top();
 
-        //         let typ = event.type_();
+        let el = el
+            .dyn_ref::<Element>()
+            .expect(&format!("not an element: {:?}", el));
 
-        //         let gi_id: Option<usize> = target
-        //             .get_attribute(&format!("dioxus-giid-{}", typ))
-        //             .and_then(|v| v.parse().ok());
+        let (gi_id, gi_gen) = (&scope).into_raw_parts();
+        el.set_attribute(
+            &format!("dioxus-event-{}", event),
+            &format!("{}.{}.{}.{}", gi_id, gi_gen, el_id, real_id.0),
+        )
+        .unwrap();
 
-        //         let gi_gen: Option<u64> = target
-        //             .get_attribute(&format!("dioxus-gigen-{}", typ))
-        //             .and_then(|v| v.parse().ok());
+        // Register the callback to decode
 
-        //         let li_idx: Option<usize> = target
-        //             .get_attribute(&format!("dioxus-lidx-{}", typ))
-        //             .and_then(|v| v.parse().ok());
+        if let Some(entry) = self.listeners.get_mut(event) {
+            entry.0 += 1;
+        } else {
+            let trigger = self.trigger.clone();
+            let handler = Closure::wrap(Box::new(move |event: &web_sys::Event| {
+                // "Result" cannot be received from JS
+                // Instead, we just build and immediately execute a closure that returns result
+                let res = || -> anyhow::Result<EventTrigger> {
+                    log::debug!("Handling event!");
 
-        //         if let (Some(gi_id), Some(gi_gen), Some(li_idx)) = (gi_id, gi_gen, li_idx) {
-        //             // Call the trigger
-        //             log::debug!(
-        //                 "decoded gi_id: {},  gi_gen: {},  li_idx: {}",
-        //                 gi_id,
-        //                 gi_gen,
-        //                 li_idx
-        //             );
+                    let target = event
+                        .target()
+                        .expect("missing target")
+                        .dyn_into::<Element>()
+                        .expect("not a valid element");
 
-        //             let triggered_scope = ScopeIdx::from_raw_parts(gi_id, gi_gen);
-        //             trigger.0.as_ref()(EventTrigger::new(
-        //                 virtual_event_from_websys_event(event),
-        //                 triggered_scope,
-        //                 // scope,
-        //                 li_idx,
-        //             ));
-        //         }
-        //     }) as Box<dyn FnMut(&Event)>);
+                    let typ = event.type_();
+                    use anyhow::Context;
+                    let val: String = target
+                        .get_attribute(&format!("dioxus-event-{}", typ))
+                        .context("")?;
 
-        //     self.root
-        //         .add_event_listener_with_callback(event, (&handler).as_ref().unchecked_ref())
-        //         .unwrap();
+                    let mut fields = val.splitn(4, ".");
 
-        //     // Increment the listeners
-        //     self.listeners.insert(event.into(), (1, handler));
-        // }
+                    let gi_id = fields
+                        .next()
+                        .and_then(|f| f.parse::<usize>().ok())
+                        .context("")?;
+                    let gi_gen = fields
+                        .next()
+                        .and_then(|f| f.parse::<u64>().ok())
+                        .context("")?;
+                    let el_id = fields
+                        .next()
+                        .and_then(|f| f.parse::<usize>().ok())
+                        .context("")?;
+                    let real_id = fields
+                        .next()
+                        .and_then(|f| f.parse::<u32>().ok().map(RealDomNode::new))
+                        .context("")?;
+
+                    // Call the trigger
+                    log::debug!(
+                        "decoded gi_id: {},  gi_gen: {},  li_idx: {}",
+                        gi_id,
+                        gi_gen,
+                        el_id
+                    );
+
+                    let triggered_scope = ScopeIdx::from_raw_parts(gi_id, gi_gen);
+                    Ok(EventTrigger::new(
+                        virtual_event_from_websys_event(event),
+                        triggered_scope,
+                        real_id,
+                    ))
+                };
+
+                match res() {
+                    Ok(synthetic_event) => trigger.as_ref()(synthetic_event),
+                    Err(_) => log::error!("Error decoding Dioxus event attribute."),
+                };
+            }) as Box<dyn FnMut(&Event)>);
+
+            self.root
+                .add_event_listener_with_callback(event, (&handler).as_ref().unchecked_ref())
+                .unwrap();
+
+            // Increment the listeners
+            self.listeners.insert(event.into(), (1, handler));
+        }
     }
 
     fn remove_event_listener(&mut self, event: &str) {
+        log::debug!("Called [`remove_event_listener`]: {}", event);
         todo!()
     }
 
     fn set_text(&mut self, text: &str) {
+        log::debug!("Called [`set_text`]: {}", text);
         self.stack.top().set_text_content(Some(text))
     }
 
     fn set_attribute(&mut self, name: &str, value: &str, is_namespaced: bool) {
+        log::debug!("Called [`set_attribute`]: {}, {}", name, value);
         if name == "class" {
             if let Some(el) = self.stack.top().dyn_ref::<Element>() {
                 el.set_class_name(value);
             }
         } else {
+            if let Some(el) = self.stack.top().dyn_ref::<Element>() {
+                el.set_attribute(name, value).unwrap();
+            }
         }
     }
 
     fn remove_attribute(&mut self, name: &str) {
+        log::debug!("Called [`remove_attribute`]: {}", name);
         let node = self.stack.top();
         if let Some(node) = node.dyn_ref::<web_sys::Element>() {
             node.remove_attribute(name).unwrap();
@@ -270,6 +368,234 @@ impl dioxus_core::diff::RealDom for WebsysDom {
     }
 
     fn raw_node_as_any_mut(&self) -> &mut dyn std::any::Any {
+        log::debug!("Called [`raw_node_as_any_mut`]");
         todo!()
     }
 }
+
+#[derive(Debug, Default)]
+pub struct Stack {
+    list: Vec<Node>,
+}
+
+impl Stack {
+    pub fn with_capacity(cap: usize) -> Self {
+        Stack {
+            list: Vec::with_capacity(cap),
+        }
+    }
+
+    pub fn push(&mut self, node: Node) {
+        // debug!("stack-push: {:?}", node);
+        self.list.push(node);
+    }
+
+    pub fn pop(&mut self) -> Node {
+        let res = self.list.pop().unwrap();
+        res
+    }
+
+    pub fn clear(&mut self) {
+        self.list.clear();
+    }
+
+    pub fn top(&self) -> &Node {
+        match self.list.last() {
+            Some(a) => a,
+            None => panic!("Called 'top' of an empty stack, make sure to push the root first"),
+        }
+    }
+}
+
+fn virtual_event_from_websys_event(event: &web_sys::Event) -> VirtualEvent {
+    use dioxus_core::events::on::*;
+    match event.type_().as_str() {
+        "copy" | "cut" | "paste" => {
+            // let evt: web_sys::ClipboardEvent = event.clone().dyn_into().unwrap();
+
+            todo!()
+        }
+
+        "compositionend" | "compositionstart" | "compositionupdate" => {
+            let evt: web_sys::CompositionEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "keydown" | "keypress" | "keyup" => {
+            let evt: web_sys::KeyboardEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "focus" | "blur" => {
+            let evt: web_sys::FocusEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "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 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
+            // these events won't carry the right data with them
+            todo!()
+            // VirtualEvent::FormEvent(FormEvent { value })
+        }
+
+        "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
+        | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
+        | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
+            let evt: web_sys::MouseEvent = event.clone().dyn_into().unwrap();
+
+            #[derive(Debug)]
+            pub struct CustomMouseEvent(web_sys::MouseEvent);
+            impl dioxus_core::events::on::MouseEvent for CustomMouseEvent {
+                fn alt_key(&self) -> bool {
+                    todo!()
+                }
+                fn button(&self) -> i32 {
+                    todo!()
+                }
+                fn buttons(&self) -> i32 {
+                    todo!()
+                }
+                fn client_x(&self) -> i32 {
+                    todo!()
+                }
+                fn client_y(&self) -> i32 {
+                    todo!()
+                }
+                fn ctrl_key(&self) -> bool {
+                    todo!()
+                }
+                fn meta_key(&self) -> bool {
+                    todo!()
+                }
+                fn page_x(&self) -> i32 {
+                    todo!()
+                }
+                fn page_y(&self) -> i32 {
+                    todo!()
+                }
+                fn screen_x(&self) -> i32 {
+                    todo!()
+                }
+                fn screen_y(&self) -> i32 {
+                    todo!()
+                }
+                fn shift_key(&self) -> bool {
+                    todo!()
+                }
+                fn get_modifier_state(&self, key_code: usize) -> bool {
+                    todo!()
+                }
+            }
+            VirtualEvent::MouseEvent(Rc::new(CustomMouseEvent(evt)))
+            // MouseEvent(Box::new(RawMouseEvent {
+            //                 alt_key: evt.alt_key(),
+            //                 button: evt.button() as i32,
+            //                 buttons: evt.buttons() as i32,
+            //                 client_x: evt.client_x(),
+            //                 client_y: evt.client_y(),
+            //                 ctrl_key: evt.ctrl_key(),
+            //                 meta_key: evt.meta_key(),
+            //                 page_x: evt.page_x(),
+            //                 page_y: evt.page_y(),
+            //                 screen_x: evt.screen_x(),
+            //                 screen_y: evt.screen_y(),
+            //                 shift_key: evt.shift_key(),
+            //                 get_modifier_state: GetModifierKey(Box::new(|f| {
+            //                     // evt.get_modifier_state(f)
+            //                     todo!("This is not yet implemented properly, sorry :(");
+            //                 })),
+            //             }))
+            // todo!()
+            // VirtualEvent::MouseEvent()
+        }
+
+        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
+        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
+            let evt: web_sys::PointerEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "select" => {
+            // let evt: web_sys::SelectionEvent = event.clone().dyn_into().unwrap();
+            // not required to construct anything special beyond standard event stuff
+            todo!()
+        }
+
+        "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
+            let evt: web_sys::TouchEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "scroll" => {
+            // let evt: web_sys::UIEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "wheel" => {
+            let evt: web_sys::WheelEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
+        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
+        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
+        | "timeupdate" | "volumechange" | "waiting" => {
+            // not required to construct anything special beyond standard event stuff
+
+            // let evt: web_sys::MediaEvent = event.clone().dyn_into().unwrap();
+            // let evt: web_sys::MediaEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "animationstart" | "animationend" | "animationiteration" => {
+            let evt: web_sys::AnimationEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "transitionend" => {
+            let evt: web_sys::TransitionEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+
+        "toggle" => {
+            // not required to construct anything special beyond standard event stuff (target)
+
+            // let evt: web_sys::ToggleEvent = event.clone().dyn_into().unwrap();
+            todo!()
+        }
+        _ => VirtualEvent::OtherEvent,
+    }
+}

packages/web/src/old/interpreter.rs

@@ -2,7 +2,6 @@ use std::{borrow::Borrow, convert::TryInto, default, fmt::Debug, sync::Arc};
 
 use dioxus_core::{
     events::{EventTrigger, VirtualEvent},
-    patch::Edit,
     prelude::ScopeIdx,
 };
 use fxhash::FxHashMap;