Merge branch 'master' into server-fn

packages/web/src/dom.rs

@@ -10,8 +10,8 @@
 use dioxus_core::{
     BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
 };
-use dioxus_html::{event_bubbles, CompositionData, FileEngine, FormData};
-use dioxus_interpreter_js::{save_template, Channel};
+use dioxus_html::{event_bubbles, CompositionData, FileEngine, FormData, MountedData};
+use dioxus_interpreter_js::{get_node, save_template, Channel};
 use futures_channel::mpsc;
 use js_sys::Array;
 use rustc_hash::FxHashMap;
@@ -28,6 +28,7 @@ pub struct WebsysDom {
     templates: FxHashMap<String, u32>,
     max_template_id: u32,
     pub(crate) interpreter: Channel,
+    event_channel: mpsc::UnboundedSender<UiEvent>,
 }
 
 pub struct UiEvent {
@@ -35,7 +36,6 @@ pub struct UiEvent {
     pub bubbles: bool,
     pub element: ElementId,
     pub data: Rc<dyn Any>,
-    pub event: Event,
 }
 
 impl WebsysDom {
@@ -49,8 +49,9 @@ impl WebsysDom {
         };
         let interpreter = Channel::default();
 
-        let handler: Closure<dyn FnMut(&Event)> =
-            Closure::wrap(Box::new(move |event: &web_sys::Event| {
+        let handler: Closure<dyn FnMut(&Event)> = Closure::wrap(Box::new({
+            let event_channel = event_channel.clone();
+            move |event: &web_sys::Event| {
                 let name = event.type_();
                 let element = walk_event_for_id(event);
                 let bubbles = dioxus_html::event_bubbles(name.as_str());
@@ -74,10 +75,10 @@ impl WebsysDom {
                         bubbles,
                         element,
                         data,
-                        event: event.clone(),
                     });
                 }
-            }));
+            }
+        }));
 
         dioxus_interpreter_js::initilize(
             root.clone().unchecked_into(),
@@ -90,6 +91,7 @@ impl WebsysDom {
             interpreter,
             templates: FxHashMap::default(),
             max_template_id: 0,
+            event_channel,
         }
     }
 
@@ -161,6 +163,8 @@ impl WebsysDom {
     pub fn apply_edits(&mut self, mut edits: Vec<Mutation>) {
         use Mutation::*;
         let i = &mut self.interpreter;
+        // we need to apply the mount events last, so we collect them here
+        let mut to_mount = Vec::new();
         for edit in &edits {
             match edit {
                 AppendChildren { id, m } => i.append_children(id.0 as u32, *m as u32),
@@ -211,18 +215,43 @@ impl WebsysDom {
                 },
                 SetText { value, id } => i.set_text(id.0 as u32, value),
                 NewEventListener { name, id, .. } => {
-                    console::log_1(&format!("new event listener: {}", name).into());
-                    i.new_event_listener(name, id.0 as u32, event_bubbles(name) as u8);
-                }
-                RemoveEventListener { name, id } => {
-                    i.remove_event_listener(name, id.0 as u32, event_bubbles(name) as u8)
+                    match *name {
+                        // mounted events are fired immediately after the element is mounted.
+                        "mounted" => {
+                            to_mount.push(*id);
+                        }
+                        _ => {
+                            i.new_event_listener(name, id.0 as u32, event_bubbles(name) as u8);
+                        }
+                    }
                 }
+                RemoveEventListener { name, id } => match *name {
+                    "mounted" => {}
+                    _ => {
+                        i.remove_event_listener(name, id.0 as u32, event_bubbles(name) as u8);
+                    }
+                },
                 Remove { id } => i.remove(id.0 as u32),
                 PushRoot { id } => i.push_root(id.0 as u32),
             }
         }
         edits.clear();
         i.flush();
+
+        for id in to_mount {
+            let node = get_node(id.0 as u32);
+            if let Some(element) = node.dyn_ref::<Element>() {
+                log::info!("mounted event fired: {}", id.0);
+                let data: MountedData = element.into();
+                let data = Rc::new(data);
+                let _ = self.event_channel.unbounded_send(UiEvent {
+                    name: "mounted".to_string(),
+                    bubbles: false,
+                    element: id,
+                    data,
+                });
+            }
+        }
     }
 }
 
@@ -380,22 +409,38 @@ extern "C" {
 }
 
 fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {
-    let mut target = event
+    let target = event
         .target()
         .expect("missing target")
-        .dyn_into::<web_sys::Element>()
-        .expect("not a valid element");
+        .dyn_into::<web_sys::Node>()
+        .expect("not a valid node");
+    let mut current_target_element = target.dyn_ref::<web_sys::Element>().cloned();
 
     loop {
-        match target.get_attribute("data-dioxus-id").map(|f| f.parse()) {
-            Some(Ok(id)) => return Some((ElementId(id), target)),
-            Some(Err(_)) => return None,
+        match (
+            current_target_element
+                .as_ref()
+                .and_then(|el| el.get_attribute("data-dioxus-id").map(|f| f.parse())),
+            current_target_element,
+        ) {
+            // This node is an element, and has a dioxus id, so we can stop walking
+            (Some(Ok(id)), Some(target)) => return Some((ElementId(id), target)),
 
-            // walk the tree upwards until we actually find an event target
-            None => match target.parent_element() {
-                Some(parent) => target = parent,
-                None => return None,
-            },
+            // Walk the tree upwards until we actually find an event target
+            (None, target_element) => {
+                let parent = match target_element.as_ref() {
+                    Some(el) => el.parent_element(),
+                    // if this is the first node and not an element, we need to get the parent from the target node
+                    None => target.parent_element(),
+                };
+                match parent {
+                    Some(parent) => current_target_element = Some(parent),
+                    _ => return None,
+                }
+            }
+
+            // This node is an element with an invalid dioxus id, give up
+            _ => return None,
         }
     }
 }