port liveview events

packages/liveview/src/element.rs

@@ -4,6 +4,7 @@ use dioxus_html::{geometry::euclid::Rect, MountedResult, RenderedElementBacking}
 use crate::query::QueryEngine;
 
 /// A mounted element passed to onmounted events
+#[derive(Clone)]
 pub struct LiveviewElement {
     id: ElementId,
     query: QueryEngine,

packages/liveview/src/events.rs

@@ -0,0 +1,149 @@
+//! Convert a serialized event to an event trigger
+
+use dioxus_html::*;
+
+use crate::element::LiveviewElement;
+
+pub(crate) struct SerializedHtmlEventConverter;
+
+impl HtmlEventConverter for SerializedHtmlEventConverter {
+    fn convert_animation_data(&self, event: &PlatformEventData) -> AnimationData {
+        event
+            .downcast::<SerializedAnimationData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_clipboard_data(&self, event: &PlatformEventData) -> ClipboardData {
+        event
+            .downcast::<SerializedClipboardData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_composition_data(&self, event: &PlatformEventData) -> CompositionData {
+        event
+            .downcast::<SerializedCompositionData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_drag_data(&self, event: &PlatformEventData) -> DragData {
+        event
+            .downcast::<SerializedDragData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_focus_data(&self, event: &PlatformEventData) -> FocusData {
+        event
+            .downcast::<SerializedFocusData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_form_data(&self, event: &PlatformEventData) -> FormData {
+        event
+            .downcast::<SerializedFormData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_image_data(&self, event: &PlatformEventData) -> ImageData {
+        event
+            .downcast::<SerializedImageData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_keyboard_data(&self, event: &PlatformEventData) -> KeyboardData {
+        event
+            .downcast::<SerializedKeyboardData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_media_data(&self, event: &PlatformEventData) -> MediaData {
+        event
+            .downcast::<SerializedMediaData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_mounted_data(&self, event: &PlatformEventData) -> MountedData {
+        event.downcast::<LiveviewElement>().cloned().unwrap().into()
+    }
+
+    fn convert_mouse_data(&self, event: &PlatformEventData) -> MouseData {
+        event
+            .downcast::<SerializedMouseData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_pointer_data(&self, event: &PlatformEventData) -> PointerData {
+        event
+            .downcast::<SerializedPointerData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_scroll_data(&self, event: &PlatformEventData) -> ScrollData {
+        event
+            .downcast::<SerializedScrollData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_selection_data(&self, event: &PlatformEventData) -> SelectionData {
+        event
+            .downcast::<SerializedSelectionData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_toggle_data(&self, event: &PlatformEventData) -> ToggleData {
+        event
+            .downcast::<SerializedToggleData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_touch_data(&self, event: &PlatformEventData) -> TouchData {
+        event
+            .downcast::<SerializedTouchData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_transition_data(&self, event: &PlatformEventData) -> TransitionData {
+        event
+            .downcast::<SerializedTransitionData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
+    fn convert_wheel_data(&self, event: &PlatformEventData) -> WheelData {
+        event
+            .downcast::<SerializedWheelData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+}

packages/liveview/src/lib.rs

@@ -24,6 +24,7 @@ mod query;
 use futures_util::{SinkExt, StreamExt};
 pub use pool::*;
 mod eval;
+mod events;
 
 pub trait WebsocketTx: SinkExt<String, Error = LiveViewError> {}
 impl<T> WebsocketTx for T where T: SinkExt<String, Error = LiveViewError> {}

packages/liveview/src/pool.rs

@@ -1,11 +1,12 @@
 use crate::{
     element::LiveviewElement,
     eval::init_eval,
+    events::SerializedHtmlEventConverter,
     query::{QueryEngine, QueryResult},
     LiveViewError,
 };
 use dioxus_core::{prelude::*, Mutations};
-use dioxus_html::{EventData, HtmlEvent, MountedData};
+use dioxus_html::{EventData, HtmlEvent, MountedData, PlatformEventData};
 use futures_util::{pin_mut, SinkExt, StreamExt};
 use serde::Serialize;
 use std::{rc::Rc, time::Duration};
@@ -24,6 +25,9 @@ impl Default for LiveViewPool {
 
 impl LiveViewPool {
     pub fn new() -> Self {
+        // Set the event converter
+        dioxus_html::set_event_converter(Box::new(SerializedHtmlEventConverter));
+
         LiveViewPool {
             pool: LocalPoolHandle::new(16),
         }
@@ -171,12 +175,11 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
                                         let element = LiveviewElement::new(evt.element, query_engine.clone());
                                         vdom.handle_event(
                                             &evt.name,
-                                            Rc::new(MountedData::new(element)),
+                                            Rc::new(PlatformEventData::new(Box::new(MountedData::new(element)))),
                                             evt.element,
                                             evt.bubbles,
                                         );
-                                    }
+                                    } else {
-                                    else{
                                         vdom.handle_event(
                                             &evt.name,
                                             evt.data.into_any(),