Merge pull request #657 from DioxusLabs/revert-655-jk/fix-liveview

Revert "fix: liveview interpreter using new templates"

packages/core/src/virtual_dom.rs

@@ -280,6 +280,9 @@ impl VirtualDom {
     /// Whenever the VirtualDom "works", it will re-render this scope
     pub fn mark_dirty(&mut self, id: ScopeId) {
         let height = self.scopes[id.0].height;
+
+        println!("marking scope {} dirty with height {}", id.0, height);
+
         self.dirty_scopes.insert(DirtyScope { height, id });
     }
 

packages/desktop/src/controller.rs

@@ -1,7 +1,6 @@
 use crate::desktop_context::{DesktopContext, UserWindowEvent};
-use crate::events::IpcMessage;
+use crate::events::{decode_event, EventMessage};
 use dioxus_core::*;
-use dioxus_html::HtmlEvent;
 use futures_channel::mpsc::{unbounded, UnboundedSender};
 use futures_util::StreamExt;
 #[cfg(target_os = "ios")]
@@ -26,7 +25,7 @@ pub(super) struct DesktopController {
     pub(super) quit_app_on_close: bool,
     pub(super) is_ready: Arc<AtomicBool>,
     pub(super) proxy: EventLoopProxy<UserWindowEvent>,
-    pub(super) event_tx: UnboundedSender<HtmlEvent>,
+    pub(super) event_tx: UnboundedSender<serde_json::Value>,
 
     #[cfg(target_os = "ios")]
     pub(super) views: Vec<*mut Object>,
@@ -41,7 +40,7 @@ impl DesktopController {
         proxy: EventLoopProxy<UserWindowEvent>,
     ) -> Self {
         let edit_queue = Arc::new(Mutex::new(Vec::new()));
-        let (event_tx, mut event_rx) = unbounded::<HtmlEvent>();
+        let (event_tx, mut event_rx) = unbounded();
         let proxy2 = proxy.clone();
 
         let pending_edits = edit_queue.clone();
@@ -69,8 +68,14 @@ impl DesktopController {
                 loop {
                     tokio::select! {
                         _ = dom.wait_for_work() => {}
-                        Some(value) = event_rx.next() => {
-                            dom.handle_event(&value.name,  value.data.into_any(), value.element,  dioxus_html::events::event_bubbles(&value.name));
+                        Some(json_value) = event_rx.next() => {
+                            if let Ok(value) = serde_json::from_value::<EventMessage>(json_value) {
+                                let name = value.event.clone();
+                                let el_id = ElementId(value.mounted_dom_id);
+                                if let Some(evt) = decode_event(value) {
+                                    dom.handle_event(&name,  evt, el_id,  dioxus_html::events::event_bubbles(&name));
+                                }
+                            }
                         }
                     }
 

packages/desktop/src/events.rs

@@ -6,7 +6,7 @@ use serde_json::from_value;
 use std::any::Any;
 use std::rc::Rc;
 
-#[derive(Deserialize, Serialize, Debug)]
+#[derive(Deserialize, Serialize)]
 pub(crate) struct IpcMessage {
     method: String,
     params: serde_json::Value,
@@ -31,3 +31,61 @@ pub(crate) fn parse_ipc_message(payload: &str) -> Option<IpcMessage> {
         }
     }
 }
+
+macro_rules! match_data {
+    (
+        $m:ident;
+        $name:ident;
+        $(
+            $tip:ty => $($mname:literal)|* ;
+        )*
+    ) => {
+        match $name {
+            $( $($mname)|* => {
+                let val: $tip = from_value::<$tip>($m).ok()?;
+                Rc::new(val) as Rc<dyn Any>
+            })*
+            _ => return None,
+        }
+    };
+}
+
+#[derive(Deserialize)]
+pub struct EventMessage {
+    pub contents: serde_json::Value,
+    pub event: String,
+    pub mounted_dom_id: usize,
+}
+
+pub fn decode_event(value: EventMessage) -> Option<Rc<dyn Any>> {
+    let val = value.contents;
+    let name = value.event.as_str();
+    type DragData = MouseData;
+
+    let evt = match_data! { val; name;
+        MouseData => "click" | "contextmenu" | "dblclick" | "doubleclick" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
+        ClipboardData => "copy" | "cut" | "paste";
+        CompositionData => "compositionend" | "compositionstart" | "compositionupdate";
+        KeyboardData => "keydown" | "keypress" | "keyup";
+        FocusData => "blur" | "focus" | "focusin" | "focusout";
+        FormData => "change" | "input" | "invalid" | "reset" | "submit";
+        DragData => "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop";
+        PointerData => "pointerlockchange" | "pointerlockerror" | "pointerdown" | "pointermove" | "pointerup" | "pointerover" | "pointerout" | "pointerenter" | "pointerleave" | "gotpointercapture" | "lostpointercapture";
+        SelectionData => "selectstart" | "selectionchange" | "select";
+        TouchData => "touchcancel" | "touchend" | "touchmove" | "touchstart";
+        ScrollData => "scroll";
+        WheelData => "wheel";
+        MediaData => "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied"
+            | "encrypted" | "ended" | "interruptbegin" | "interruptend" | "loadeddata"
+            | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress"
+            | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate"
+            | "volumechange" | "waiting" | "error" | "load" | "loadend" | "timeout";
+        AnimationData => "animationstart" | "animationend" | "animationiteration";
+        TransitionData => "transitionend";
+        ToggleData => "toggle";
+        // ImageData => "load" | "error";
+        // OtherData => "abort" | "afterprint" | "beforeprint" | "beforeunload" | "hashchange" | "languagechange" | "message" | "offline" | "online" | "pagehide" | "pageshow" | "popstate" | "rejectionhandled" | "storage" | "unhandledrejection" | "unload" | "userproximity" | "vrdisplayactivate" | "vrdisplayblur" | "vrdisplayconnect" | "vrdisplaydeactivate" | "vrdisplaydisconnect" | "vrdisplayfocus" | "vrdisplaypointerrestricted" | "vrdisplaypointerunrestricted" | "vrdisplaypresentchange";
+    };
+
+    Some(evt)
+}

packages/desktop/src/lib.rs

@@ -18,7 +18,6 @@ use std::sync::Arc;
 
 use desktop_context::UserWindowEvent;
 pub use desktop_context::{use_eval, use_window, DesktopContext, EvalResult};
-use dioxus_html::HtmlEvent;
 use futures_channel::mpsc::UnboundedSender;
 pub use wry;
 pub use wry::application as tao;
@@ -157,7 +156,7 @@ fn build_webview(
     is_ready: Arc<AtomicBool>,
     proxy: tao::event_loop::EventLoopProxy<UserWindowEvent>,
     eval_sender: tokio::sync::mpsc::UnboundedSender<serde_json::Value>,
-    event_tx: UnboundedSender<HtmlEvent>,
+    event_tx: UnboundedSender<serde_json::Value>,
 ) -> wry::webview::WebView {
     let builder = cfg.window.clone();
     let window = builder.build(event_loop).unwrap();
@@ -191,9 +190,7 @@ fn build_webview(
                         eval_sender.send(result).unwrap();
                     }
                     "user_event" => {
-                        if let Ok(evt) = serde_json::from_value(message.params()) {
-                            _ = event_tx.unbounded_send(evt);
-                        }
+                        _ = event_tx.unbounded_send(message.params());
                     }
                     "initialize" => {
                         is_ready.store(true, std::sync::atomic::Ordering::Relaxed);
@@ -240,16 +237,16 @@ fn build_webview(
         // in release mode, we don't want to show the dev tool or reload menus
         webview = webview.with_initialization_script(
             r#"
-        if (document.addEventListener) {
-            document.addEventListener('contextmenu', function(e) {
-                e.preventDefault();
-            }, false);
-        } else {
-            document.attachEvent('oncontextmenu', function() {
-                window.event.returnValue = false;
-            });
-        }
-    "#,
+                        if (document.addEventListener) {
+                        document.addEventListener('contextmenu', function(e) {
+                            e.preventDefault();
+                        }, false);
+                        } else {
+                        document.attachEvent('oncontextmenu', function() {
+                            window.event.returnValue = false;
+                        });
+                        }
+                    "#,
         )
     } else {
         // in debug, we are okay with the reload menu showing and dev tool

packages/desktop/src/main.js

@@ -1,7 +0,0 @@
-export function main() {
-  let root = window.document.getElementById("main");
-  if (root != null) {
-    window.interpreter = new Interpreter(root);
-    window.ipc.postMessage(serializeIpcMessage("initialize"));
-  }
-}

packages/desktop/src/protocol.rs

@@ -52,14 +52,7 @@ pub(super) fn desktop_handler(
     } else if trimmed == "index.js" {
         Response::builder()
             .header("Content-Type", "text/javascript")
-            .body(
-                format!(
-                    "{} {}",
-                    dioxus_interpreter_js::INTERPRETER_JS,
-                    include_str!("./main.js")
-                )
-                .into_bytes(),
-            )
+            .body(dioxus_interpreter_js::INTERPRETER_JS.as_bytes().to_vec())
             .map_err(From::from)
     } else {
         let asset_root = asset_root

packages/html/Cargo.toml

@@ -39,10 +39,7 @@ features = [
     "ClipboardEvent",
 ]
 
-[dev-dependencies]
-serde_json = "*"
-
 [features]
-default = ["serialize"]
-serialize = ["serde", "serde_repr", "euclid/serde", "keyboard-types/serde", "dioxus-core/serialize"]
+default = []
+serialize = ["serde", "serde_repr", "euclid/serde", "keyboard-types/serde"]
 wasm-bind = ["web-sys", "wasm-bindgen"]

packages/html/src/events/drag.rs

@@ -10,11 +10,12 @@ pub type DragEvent = Event<DragData>;
 /// placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location
 /// (such as another DOM element). Applications are free to interpret a drag and drop interaction in an
 /// application-specific way.
-#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-#[derive(Debug, Clone)]
 pub struct DragData {
     /// Inherit mouse data
     pub mouse: MouseData,
+
+    /// And then add the rest of the drag data
+    pub data: Box<dyn Any>,
 }
 
 impl_event! {

packages/html/src/events/form.rs

@@ -11,8 +11,9 @@ pub struct FormData {
     pub value: String,
 
     pub values: HashMap<String, String>,
-    // #[cfg_attr(feature = "serialize", serde(skip))]
-    // pub files: Option<Arc<dyn FileEngine>>,
+
+    #[cfg_attr(feature = "serialize", serde(skip))]
+    pub files: Option<Arc<dyn FileEngine>>,
 }
 
 impl Debug for FormData {

packages/html/src/lib.rs

@@ -22,12 +22,6 @@ mod render_template;
 #[cfg(feature = "wasm-bind")]
 mod web_sys_bind;
 
-#[cfg(feature = "serialize")]
-mod transit;
-
-#[cfg(feature = "serialize")]
-pub use transit::*;
-
 pub use elements::*;
 pub use events::*;
 pub use global_attributes::*;

packages/html/src/transit.rs

@@ -1,152 +0,0 @@
-use std::{any::Any, rc::Rc};
-
-use crate::events::*;
-use dioxus_core::ElementId;
-use serde::{Deserialize, Serialize};
-
-// macro_rules! match_data {
-//     (
-//         $m:ident;
-//         $name:ident;
-//         $(
-//             $tip:ty => $($mname:literal)|* ;
-//         )*
-//     ) => {
-//         match $name {
-//             $( $($mname)|* => {
-//                 let val: $tip = from_value::<$tip>($m).ok()?;
-//                 Rc::new(val) as Rc<dyn Any>
-//             })*
-//             _ => return None,
-//         }
-//     };
-// }
-
-#[derive(Serialize, Deserialize, Debug, Clone)]
-pub struct HtmlEvent {
-    pub element: ElementId,
-    pub name: String,
-    pub data: EventData,
-    pub bubbles: bool,
-}
-
-impl HtmlEvent {
-    pub fn bubbles(&self) -> bool {
-        event_bubbles(&self.name)
-    }
-}
-
-#[derive(Deserialize, Serialize, Debug, Clone)]
-#[serde(untagged)]
-pub enum EventData {
-    Mouse(MouseData),
-    Clipboard(ClipboardData),
-    Composition(CompositionData),
-    Keyboard(KeyboardData),
-    Focus(FocusData),
-    Form(FormData),
-    Drag(DragData),
-    Pointer(PointerData),
-    Selection(SelectionData),
-    Touch(TouchData),
-    Scroll(ScrollData),
-    Wheel(WheelData),
-    Media(MediaData),
-    Animation(AnimationData),
-    Transition(TransitionData),
-    Toggle(ToggleData),
-}
-
-impl EventData {
-    pub fn into_any(self) -> Rc<dyn Any> {
-        match self {
-            EventData::Mouse(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Clipboard(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Composition(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Keyboard(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Focus(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Form(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Drag(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Pointer(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Selection(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Touch(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Scroll(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Wheel(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Media(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Animation(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Transition(data) => Rc::new(data) as Rc<dyn Any>,
-            EventData::Toggle(data) => Rc::new(data) as Rc<dyn Any>,
-        }
-    }
-}
-
-#[test]
-fn test_back_and_forth() {
-    let data = HtmlEvent {
-        element: ElementId(0),
-        data: EventData::Mouse(MouseData::default()),
-        name: "click".to_string(),
-        bubbles: true,
-    };
-
-    println!("{}", serde_json::to_string_pretty(&data).unwrap());
-
-    let o = r#"
-{
-  "element": 0,
-  "name": "click",
-  "bubbles": true,
-  "data": {
-    "alt_key": false,
-    "button": 0,
-    "buttons": 0,
-    "client_x": 0,
-    "client_y": 0,
-    "ctrl_key": false,
-    "meta_key": false,
-    "offset_x": 0,
-    "offset_y": 0,
-    "page_x": 0,
-    "page_y": 0,
-    "screen_x": 0,
-    "screen_y": 0,
-    "shift_key": false
-  }
-}
-    "#;
-
-    let p: HtmlEvent = serde_json::from_str(o).unwrap();
-}
-
-// pub fn decode_event(value: ) -> Option<Rc<dyn Any>> {
-//     let val = value.data;
-//     let name = value.event.as_str();
-//     type DragData = MouseData;
-
-//     let evt = match_data! { val; name;
-//         MouseData => "click" | "contextmenu" | "dblclick" | "doubleclick" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
-//         ClipboardData => "copy" | "cut" | "paste";
-//         CompositionData => "compositionend" | "compositionstart" | "compositionupdate";
-//         KeyboardData => "keydown" | "keypress" | "keyup";
-//         FocusData => "blur" | "focus" | "focusin" | "focusout";
-//         FormData => "change" | "input" | "invalid" | "reset" | "submit";
-//         DragData => "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop";
-//         PointerData => "pointerlockchange" | "pointerlockerror" | "pointerdown" | "pointermove" | "pointerup" | "pointerover" | "pointerout" | "pointerenter" | "pointerleave" | "gotpointercapture" | "lostpointercapture";
-//         SelectionData => "selectstart" | "selectionchange" | "select";
-//         TouchData => "touchcancel" | "touchend" | "touchmove" | "touchstart";
-//         ScrollData => "scroll";
-//         WheelData => "wheel";
-//         MediaData => "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied"
-//             | "encrypted" | "ended" | "interruptbegin" | "interruptend" | "loadeddata"
-//             | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress"
-//             | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate"
-//             | "volumechange" | "waiting" | "error" | "load" | "loadend" | "timeout";
-//         AnimationData => "animationstart" | "animationend" | "animationiteration";
-//         TransitionData => "transitionend";
-//         ToggleData => "toggle";
-//         // ImageData => "load" | "error";
-//         // OtherData => "abort" | "afterprint" | "beforeprint" | "beforeunload" | "hashchange" | "languagechange" | "message" | "offline" | "online" | "pagehide" | "pageshow" | "popstate" | "rejectionhandled" | "storage" | "unhandledrejection" | "unload" | "userproximity" | "vrdisplayactivate" | "vrdisplayblur" | "vrdisplayconnect" | "vrdisplaydeactivate" | "vrdisplaydisconnect" | "vrdisplayfocus" | "vrdisplaypointerrestricted" | "vrdisplaypointerunrestricted" | "vrdisplaypresentchange";
-//     };
-
-//     Some(evt)
-// }

packages/interpreter/src/interpreter.js

@@ -1,3 +1,11 @@
+export function main() {
+  let root = window.document.getElementById("main");
+  if (root != null) {
+    window.interpreter = new Interpreter(root);
+    window.ipc.postMessage(serializeIpcMessage("initialize"));
+  }
+}
+
 class ListenerMap {
   constructor(root) {
     // bubbling events can listen at the root element
@@ -52,7 +60,7 @@ class ListenerMap {
   }
 }
 
-class Interpreter {
+export class Interpreter {
   constructor(root) {
     this.root = root;
     this.listeners = new ListenerMap(root);
@@ -345,10 +353,7 @@ class Interpreter {
         break;
       case "NewEventListener":
         // this handler is only provided on desktop implementations since this
-        // method is not used by the web implementationa
-
-        let bubbles = event_bubbles(edit.name);
-
+        // method is not used by the web implementation
         let handler = (event) => {
           let target = event.target;
           if (target != null) {
@@ -430,21 +435,20 @@ class Interpreter {
             }
             window.ipc.postMessage(
               serializeIpcMessage("user_event", {
-                name: edit.name,
-                element: parseInt(realId),
-                data: contents,
-                bubbles: bubbles,
+                event: edit.name,
+                mounted_dom_id: parseInt(realId),
+                contents: contents,
               })
             );
           }
         };
-        this.NewEventListener(edit.name, edit.id, bubbles, handler);
+        this.NewEventListener(edit.name, edit.id, event_bubbles(edit.name), handler);
         break;
     }
   }
 }
 
-function serialize_event(event) {
+export function serialize_event(event) {
   switch (event.type) {
     case "copy":
     case "cut":

packages/liveview/Cargo.toml

@@ -10,6 +10,7 @@ description = "Build server-side apps with Dioxus"
 license = "MIT/Apache-2.0"
 
 
+
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
@@ -27,7 +28,7 @@ tokio-util = { version = "0.7.0", features = ["full"] }
 
 dioxus-html = { path = "../html", features = ["serialize"], version = "^0.2.1" }
 dioxus-core = { path = "../core", features = ["serialize"], version = "^0.2.1" }
-dioxus-interpreter-js = { path = "../interpreter" }
+
 
 # warp
 warp = { version = "0.3", optional = true }
@@ -38,9 +39,6 @@ tower = { version = "0.4.12", optional = true }
 
 # salvo
 salvo = { version = "0.32.0", optional = true, features = ["ws"] }
-thiserror = "1.0.37"
-uuid = { version = "1.2.2", features = ["v4"] }
-anyhow = "1.0.66"
 
 [dev-dependencies]
 tokio = { version = "1", features = ["full"] }
@@ -51,16 +49,4 @@ salvo = { version = "0.32.0", features = ["affix", "ws"] }
 tower = "0.4.12"
 
 [features]
-default = ["salvo"]
-
-[[example]]
-name = "axum"
-required-features = ["axum"]
-
-[[example]]
-name = "salvo"
-required-features = ["salvo"]
-
-[[example]]
-name = "warp"
-required-features = ["warp"]
+default = []

packages/liveview/examples/axum.rs

@@ -1,53 +1,32 @@
-use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
-use dioxus::prelude::*;
-
-fn app(cx: Scope) -> Element {
-    let mut num = use_state(cx, || 0);
-
-    cx.render(rsx! {
-        div {
-            "hello axum! {num}"
-            button { onclick: move |_| num += 1, "Increment" }
-        }
-    })
-}
+#[cfg(not(feature = "axum"))]
+fn main() {}
 
+#[cfg(feature = "axum")]
 #[tokio::main]
 async fn main() {
+    use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
+    use dioxus_core::{Element, LazyNodes, Scope};
     pretty_env_logger::init();
 
+    fn app(cx: Scope) -> Element {
+        cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
+    }
+
     let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
 
-    let view = dioxus_liveview::LiveViewPool::new();
+    let view = dioxus_liveview::new(addr);
+    let body = view.body("<title>Dioxus Liveview</title>");
 
     let app = Router::new()
+        .route("/", get(move || async { Html(body) }))
         .route(
-            "/",
-            get(move || async move {
-                Html(format!(
-                    r#"
-            <!DOCTYPE html>
-            <html>
-                <head> <title>Dioxus LiveView with Warp</title>  </head>
-                <body> <div id="main"></div> </body>
-                {glue}
-            </html>
-            "#,
-                    glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
-                ))
-            }),
-        )
-        .route(
-            "/ws",
+            "/app",
             get(move |ws: WebSocketUpgrade| async move {
                 ws.on_upgrade(move |socket| async move {
-                    _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
+                    view.upgrade_axum(socket, app).await;
                 })
             }),
         );
-
-    println!("Listening on http://{}", addr);
-
     axum::Server::bind(&addr.to_string().parse().unwrap())
         .serve(app.into_make_service())
         .await

packages/liveview/examples/salvo.rs

@@ -1,71 +1,55 @@
-use dioxus::prelude::*;
+#[cfg(not(feature = "salvo"))]
+fn main() {}
 
-use dioxus_liveview::LiveViewPool;
-use salvo::extra::affix;
-use salvo::extra::ws::WsHandler;
-use salvo::prelude::*;
-use std::net::SocketAddr;
-use std::sync::Arc;
+#[cfg(feature = "salvo")]
+#[tokio::main]
+async fn main() {
+    use std::sync::Arc;
 
-fn app(cx: Scope) -> Element {
-    let mut num = use_state(cx, || 0);
+    use dioxus_core::{Element, LazyNodes, Scope};
+    use dioxus_liveview as liveview;
+    use dioxus_liveview::Liveview;
+    use salvo::extra::affix;
+    use salvo::extra::ws::WsHandler;
+    use salvo::prelude::*;
 
-    cx.render(rsx! {
-        div {
-            "hello salvo! {num}"
-            button { onclick: move |_| num += 1, "Increment" }
-        }
-    })
-}
+    fn app(cx: Scope) -> Element {
+        cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
+    }
 
-#[tokio::main]
-async fn main() {
     pretty_env_logger::init();
 
-    let addr: SocketAddr = ([127, 0, 0, 1], 3030).into();
-
-    let view = LiveViewPool::new();
+    let addr = ([127, 0, 0, 1], 3030);
 
+    // todo: compactify this routing under one liveview::app method
+    let view = liveview::new(addr);
     let router = Router::new()
         .hoop(affix::inject(Arc::new(view)))
         .get(index)
-        .push(Router::with_path("ws").get(connect));
-
-    println!("Listening on http://{}", addr);
-
+        .push(Router::with_path("app").get(connect));
     Server::new(TcpListener::bind(addr)).serve(router).await;
-}
-
-#[handler]
-fn index(_depot: &mut Depot, res: &mut Response) {
-    let addr: SocketAddr = ([127, 0, 0, 1], 3030).into();
-    res.render(Text::Html(format!(
-        r#"
-            <!DOCTYPE html>
-            <html>
-                <head> <title>Dioxus LiveView with Warp</title>  </head>
-                <body> <div id="main"></div> </body>
-                {glue}
-            </html>
-            "#,
-        glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
-    )));
-}
-
-#[handler]
-async fn connect(
-    req: &mut Request,
-    depot: &mut Depot,
-    res: &mut Response,
-) -> Result<(), StatusError> {
-    let view = depot.obtain::<Arc<LiveViewPool>>().unwrap().clone();
-    let fut = WsHandler::new().handle(req, res)?;
-
-    tokio::spawn(async move {
-        if let Some(ws) = fut.await {
-            _ = view.launch(dioxus_liveview::salvo_socket(ws), app).await;
-        }
-    });
 
-    Ok(())
+    #[handler]
+    fn index(depot: &mut Depot, res: &mut Response) {
+        let view = depot.obtain::<Arc<Liveview>>().unwrap();
+        let body = view.body("<title>Dioxus LiveView</title>");
+        res.render(Text::Html(body));
+    }
+
+    #[handler]
+    async fn connect(
+        req: &mut Request,
+        depot: &mut Depot,
+        res: &mut Response,
+    ) -> Result<(), StatusError> {
+        let view = depot.obtain::<Arc<Liveview>>().unwrap().clone();
+        let fut = WsHandler::new().handle(req, res)?;
+        let fut = async move {
+            if let Some(ws) = fut.await {
+                view.upgrade_salvo(ws, app).await;
+            }
+        };
+        tokio::task::spawn(fut);
+        Ok(())
+    }
 }

packages/liveview/examples/warp.rs

@@ -1,56 +1,35 @@
-use dioxus::prelude::*;
-use dioxus_liveview::adapters::warp_adapter::warp_socket;
-use dioxus_liveview::LiveViewPool;
-use std::net::SocketAddr;
-use warp::ws::Ws;
-use warp::Filter;
-
-fn app(cx: Scope) -> Element {
-    let mut num = use_state(cx, || 0);
-
-    cx.render(rsx! {
-        div {
-            "hello warp! {num}"
-            button {
-                onclick: move |_| num += 1,
-                "Increment"
-            }
-        }
-    })
-}
+#[cfg(not(feature = "warp"))]
+fn main() {}
 
+#[cfg(feature = "warp")]
 #[tokio::main]
 async fn main() {
-    pretty_env_logger::init();
+    use dioxus_core::{Element, LazyNodes, Scope};
+    use dioxus_liveview as liveview;
+    use warp::ws::Ws;
+    use warp::Filter;
 
-    let addr: SocketAddr = ([127, 0, 0, 1], 3030).into();
+    fn app(cx: Scope) -> Element {
+        cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
+    }
 
-    let index = warp::path::end().map(move || {
-        warp::reply::html(format!(
-            r#"
-            <!DOCTYPE html>
-            <html>
-                <head> <title>Dioxus LiveView with Warp</title>  </head>
-                <body> <div id="main"></div> </body>
-                {glue}
-            </html>
-            "#,
-            glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws/"))
-        ))
-    });
-
-    let pool = LiveViewPool::new();
-
-    let ws = warp::path("ws")
-        .and(warp::ws())
-        .and(warp::any().map(move || pool.clone()))
-        .map(move |ws: Ws, pool: LiveViewPool| {
-            ws.on_upgrade(|ws| async move {
-                let _ = pool.launch(warp_socket(ws), app).await;
-            })
-        });
-
-    println!("Listening on http://{}", addr);
+    pretty_env_logger::init();
 
-    warp::serve(index.or(ws)).run(addr).await;
+    let addr = ([127, 0, 0, 1], 3030);
+
+    // todo: compactify this routing under one liveview::app method
+    let view = liveview::new(addr);
+    let body = view.body("<title>Dioxus LiveView</title>");
+
+    let routes = warp::path::end()
+        .map(move || warp::reply::html(body.clone()))
+        .or(warp::path("app")
+            .and(warp::ws())
+            .and(warp::any().map(move || view.clone()))
+            .map(|ws: Ws, view: liveview::Liveview| {
+                ws.on_upgrade(|socket| async move {
+                    view.upgrade_warp(socket, app).await;
+                })
+            }));
+    warp::serve(routes).run(addr).await;
 }

packages/liveview/src/adapters/axum_adapter.rs

@@ -1,23 +1,94 @@
-use crate::{LiveViewError, LiveViewSocket};
+use crate::events;
 use axum::extract::ws::{Message, WebSocket};
-use futures_util::{SinkExt, StreamExt};
+use dioxus_core::prelude::*;
+use futures_util::{
+    future::{select, Either},
+    pin_mut, SinkExt, StreamExt,
+};
+use tokio::sync::mpsc;
+use tokio_stream::wrappers::UnboundedReceiverStream;
+use tokio_util::task::LocalPoolHandle;
 
-/// Convert a warp websocket into a LiveViewSocket
-///
-/// This is required to launch a LiveView app using the warp web framework
-pub fn axum_socket(ws: WebSocket) -> impl LiveViewSocket {
-    ws.map(transform_rx)
-        .with(transform_tx)
-        .sink_map_err(|_| LiveViewError::SendingFailed)
-}
+impl crate::Liveview {
+    pub async fn upgrade_axum(&self, ws: WebSocket, app: fn(Scope) -> Element) {
+        connect(ws, self.pool.clone(), app, ()).await;
+    }
 
-fn transform_rx(message: Result<Message, axum::Error>) -> Result<String, LiveViewError> {
-    message
-        .map_err(|_| LiveViewError::SendingFailed)?
-        .into_text()
-        .map_err(|_| LiveViewError::SendingFailed)
+    pub async fn upgrade_axum_with_props<T>(
+        &self,
+        ws: WebSocket,
+        app: fn(Scope<T>) -> Element,
+        props: T,
+    ) where
+        T: Send + Sync + 'static,
+    {
+        connect(ws, self.pool.clone(), app, props).await;
+    }
 }
 
-async fn transform_tx(message: String) -> Result<Message, axum::Error> {
-    Ok(Message::Text(message))
+pub async fn connect<T>(
+    socket: WebSocket,
+    pool: LocalPoolHandle,
+    app: fn(Scope<T>) -> Element,
+    props: T,
+) where
+    T: Send + Sync + 'static,
+{
+    let (mut user_ws_tx, mut user_ws_rx) = socket.split();
+    let (event_tx, event_rx) = mpsc::unbounded_channel();
+    let (edits_tx, edits_rx) = mpsc::unbounded_channel();
+    let mut edits_rx = UnboundedReceiverStream::new(edits_rx);
+    let mut event_rx = UnboundedReceiverStream::new(event_rx);
+    let vdom_fut = pool.clone().spawn_pinned(move || async move {
+        let mut vdom = VirtualDom::new_with_props(app, props);
+        let edits = vdom.rebuild();
+        let serialized = serde_json::to_string(&edits.edits).unwrap();
+        edits_tx.send(serialized).unwrap();
+        loop {
+            let new_event = {
+                let vdom_fut = vdom.wait_for_work();
+                pin_mut!(vdom_fut);
+                match select(event_rx.next(), vdom_fut).await {
+                    Either::Left((l, _)) => l,
+                    Either::Right((_, _)) => None,
+                }
+            };
+            if let Some(new_event) = new_event {
+                vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event));
+            } else {
+                let mutations = vdom.work_with_deadline(|| false);
+                for mutation in mutations {
+                    let edits = serde_json::to_string(&mutation.edits).unwrap();
+                    edits_tx.send(edits).unwrap();
+                }
+            }
+        }
+    });
+    loop {
+        match select(user_ws_rx.next(), edits_rx.next()).await {
+            Either::Left((l, _)) => {
+                if let Some(Ok(msg)) = l {
+                    if let Ok(Some(msg)) = msg.to_text().map(events::parse_ipc_message) {
+                        let user_event = events::trigger_from_serialized(msg.params);
+                        event_tx.send(user_event).unwrap();
+                    } else {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+            Either::Right((edits, _)) => {
+                if let Some(edits) = edits {
+                    // send the edits to the client
+                    if user_ws_tx.send(Message::Text(edits)).await.is_err() {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+        }
+    }
+    vdom_fut.abort();
 }

packages/liveview/src/adapters/salvo_adapter.rs

@@ -1,25 +1,110 @@
-use futures_util::{SinkExt, StreamExt};
+use crate::events;
+use dioxus_core::prelude::*;
+use futures_util::{pin_mut, SinkExt, StreamExt};
 use salvo::extra::ws::{Message, WebSocket};
+use tokio::sync::mpsc;
+use tokio_stream::wrappers::UnboundedReceiverStream;
+use tokio_util::task::LocalPoolHandle;
 
-use crate::{LiveViewError, LiveViewSocket};
-
-/// Convert a salvo websocket into a LiveViewSocket
-///
-/// This is required to launch a LiveView app using the warp web framework
-pub fn salvo_socket(ws: WebSocket) -> impl LiveViewSocket {
-    ws.map(transform_rx)
-        .with(transform_tx)
-        .sink_map_err(|_| LiveViewError::SendingFailed)
+impl crate::Liveview {
+    pub async fn upgrade_salvo(&self, ws: salvo::extra::ws::WebSocket, app: fn(Scope) -> Element) {
+        connect(ws, self.pool.clone(), app, ()).await;
+    }
+    pub async fn upgrade_salvo_with_props<T>(
+        &self,
+        ws: salvo::extra::ws::WebSocket,
+        app: fn(Scope<T>) -> Element,
+        props: T,
+    ) where
+        T: Send + Sync + 'static,
+    {
+        connect(ws, self.pool.clone(), app, props).await;
+    }
 }
 
-fn transform_rx(message: Result<Message, salvo::Error>) -> Result<String, LiveViewError> {
-    let as_bytes = message.map_err(|_| LiveViewError::SendingFailed)?;
+pub async fn connect<T>(
+    ws: WebSocket,
+    pool: LocalPoolHandle,
+    app: fn(Scope<T>) -> Element,
+    props: T,
+) where
+    T: Send + Sync + 'static,
+{
+    // Use a counter to assign a new unique ID for this user.
 
-    let msg = String::from_utf8(as_bytes.into_bytes()).map_err(|_| LiveViewError::SendingFailed)?;
+    // Split the socket into a sender and receive of messages.
+    let (mut user_ws_tx, mut user_ws_rx) = ws.split();
 
-    Ok(msg)
-}
+    let (event_tx, event_rx) = mpsc::unbounded_channel();
+    let (edits_tx, edits_rx) = mpsc::unbounded_channel();
+
+    let mut edits_rx = UnboundedReceiverStream::new(edits_rx);
+    let mut event_rx = UnboundedReceiverStream::new(event_rx);
+
+    let vdom_fut = pool.spawn_pinned(move || async move {
+        let mut vdom = VirtualDom::new_with_props(app, props);
+
+        let edits = vdom.rebuild();
+
+        let serialized = serde_json::to_string(&edits.edits).unwrap();
+        edits_tx.send(serialized).unwrap();
+
+        loop {
+            use futures_util::future::{select, Either};
+
+            let new_event = {
+                let vdom_fut = vdom.wait_for_work();
+
+                pin_mut!(vdom_fut);
+
+                match select(event_rx.next(), vdom_fut).await {
+                    Either::Left((l, _)) => l,
+                    Either::Right((_, _)) => None,
+                }
+            };
+
+            if let Some(new_event) = new_event {
+                vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event));
+            } else {
+                let mutations = vdom.work_with_deadline(|| false);
+                for mutation in mutations {
+                    let edits = serde_json::to_string(&mutation.edits).unwrap();
+                    edits_tx.send(edits).unwrap();
+                }
+            }
+        }
+    });
+
+    loop {
+        use futures_util::future::{select, Either};
+
+        match select(user_ws_rx.next(), edits_rx.next()).await {
+            Either::Left((l, _)) => {
+                if let Some(Ok(msg)) = l {
+                    if let Ok(Some(msg)) = msg.to_str().map(events::parse_ipc_message) {
+                        if msg.method == "user_event" {
+                            let user_event = events::trigger_from_serialized(msg.params);
+                            event_tx.send(user_event).unwrap();
+                        }
+                    } else {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+            Either::Right((edits, _)) => {
+                if let Some(edits) = edits {
+                    // send the edits to the client
+                    if user_ws_tx.send(Message::text(edits)).await.is_err() {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+        }
+    }
 
-async fn transform_tx(message: String) -> Result<Message, salvo::Error> {
-    Ok(Message::text(message))
+    vdom_fut.abort();
 }

packages/liveview/src/adapters/warp_adapter.rs

@@ -1,28 +1,110 @@
-use crate::{LiveViewError, LiveViewSocket};
-use futures_util::{SinkExt, StreamExt};
+use crate::events;
+use dioxus_core::prelude::*;
+use futures_util::{pin_mut, SinkExt, StreamExt};
+use tokio::sync::mpsc;
+use tokio_stream::wrappers::UnboundedReceiverStream;
+use tokio_util::task::LocalPoolHandle;
 use warp::ws::{Message, WebSocket};
 
-/// Convert a warp websocket into a LiveViewSocket
-///
-/// This is required to launch a LiveView app using the warp web framework
-pub fn warp_socket(ws: WebSocket) -> impl LiveViewSocket {
-    ws.map(transform_rx)
-        .with(transform_tx)
-        .sink_map_err(|_| LiveViewError::SendingFailed)
+impl crate::Liveview {
+    pub async fn upgrade_warp(&self, ws: warp::ws::WebSocket, app: fn(Scope) -> Element) {
+        connect(ws, self.pool.clone(), app, ()).await;
+    }
+    pub async fn upgrade_warp_with_props<T>(
+        &self,
+        ws: warp::ws::WebSocket,
+        app: fn(Scope<T>) -> Element,
+        props: T,
+    ) where
+        T: Send + Sync + 'static,
+    {
+        connect(ws, self.pool.clone(), app, props).await;
+    }
 }
 
-fn transform_rx(message: Result<Message, warp::Error>) -> Result<String, LiveViewError> {
-    // destructure the message into the buffer we got from warp
-    let msg = message
-        .map_err(|_| LiveViewError::SendingFailed)?
-        .into_bytes();
+pub async fn connect<T>(
+    ws: WebSocket,
+    pool: LocalPoolHandle,
+    app: fn(Scope<T>) -> Element,
+    props: T,
+) where
+    T: Send + Sync + 'static,
+{
+    // Use a counter to assign a new unique ID for this user.
 
-    // transform it back into a string, saving us the allocation
-    let msg = String::from_utf8(msg).map_err(|_| LiveViewError::SendingFailed)?;
+    // Split the socket into a sender and receive of messages.
+    let (mut user_ws_tx, mut user_ws_rx) = ws.split();
 
-    Ok(msg)
-}
+    let (event_tx, event_rx) = mpsc::unbounded_channel();
+    let (edits_tx, edits_rx) = mpsc::unbounded_channel();
+
+    let mut edits_rx = UnboundedReceiverStream::new(edits_rx);
+    let mut event_rx = UnboundedReceiverStream::new(event_rx);
+
+    let vdom_fut = pool.spawn_pinned(move || async move {
+        let mut vdom = VirtualDom::new_with_props(app, props);
+
+        let edits = vdom.rebuild();
+
+        let serialized = serde_json::to_string(&edits.edits).unwrap();
+        edits_tx.send(serialized).unwrap();
+
+        loop {
+            use futures_util::future::{select, Either};
+
+            let new_event = {
+                let vdom_fut = vdom.wait_for_work();
+
+                pin_mut!(vdom_fut);
+
+                match select(event_rx.next(), vdom_fut).await {
+                    Either::Left((l, _)) => l,
+                    Either::Right((_, _)) => None,
+                }
+            };
+
+            if let Some(new_event) = new_event {
+                vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event));
+            } else {
+                let mutations = vdom.work_with_deadline(|| false);
+                for mutation in mutations {
+                    let edits = serde_json::to_string(&mutation.edits).unwrap();
+                    edits_tx.send(edits).unwrap();
+                }
+            }
+        }
+    });
+
+    loop {
+        use futures_util::future::{select, Either};
+
+        match select(user_ws_rx.next(), edits_rx.next()).await {
+            Either::Left((l, _)) => {
+                if let Some(Ok(msg)) = l {
+                    if let Ok(Some(msg)) = msg.to_str().map(events::parse_ipc_message) {
+                        if msg.method == "user_event" {
+                            let user_event = events::trigger_from_serialized(msg.params);
+                            event_tx.send(user_event).unwrap();
+                        }
+                    } else {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+            Either::Right((edits, _)) => {
+                if let Some(edits) = edits {
+                    // send the edits to the client
+                    if user_ws_tx.send(Message::text(edits)).await.is_err() {
+                        break;
+                    }
+                } else {
+                    break;
+                }
+            }
+        }
+    }
 
-async fn transform_tx(message: String) -> Result<Message, warp::Error> {
-    Ok(Message::text(message))
+    vdom_fut.abort();
 }

packages/liveview/src/events.rs

@@ -0,0 +1,207 @@
+#![allow(dead_code)]
+
+//! Convert a serialized event to an event trigger
+
+use std::any::Any;
+use std::sync::Arc;
+
+use dioxus_core::ElementId;
+// use dioxus_html::event_bubbles;
+use dioxus_html::events::*;
+
+#[derive(serde::Serialize, serde::Deserialize)]
+pub(crate) struct IpcMessage {
+    pub method: String,
+    pub params: serde_json::Value,
+}
+
+pub(crate) fn parse_ipc_message(payload: &str) -> Option<IpcMessage> {
+    match serde_json::from_str(payload) {
+        Ok(message) => Some(message),
+        Err(_) => None,
+    }
+}
+
+#[derive(serde::Serialize, serde::Deserialize)]
+struct ImEvent {
+    event: String,
+    mounted_dom_id: ElementId,
+    contents: serde_json::Value,
+}
+
+pub fn trigger_from_serialized(_val: serde_json::Value) {
+    todo!()
+    // let ImEvent {
+    //     event,
+    //     mounted_dom_id,
+    //     contents,
+    // } = serde_json::from_value(val).unwrap();
+
+    // let mounted_dom_id = Some(mounted_dom_id);
+
+    // let name = event_name_from_type(&event);
+    // let event = make_synthetic_event(&event, contents);
+
+    // UserEvent {
+    //     name,
+    //     scope_id: None,
+    //     element: mounted_dom_id,
+    //     data: event,
+    //     bubbles: event_bubbles(name),
+    // }
+}
+
+fn make_synthetic_event(name: &str, val: serde_json::Value) -> Arc<dyn Any> {
+    match name {
+        "copy" | "cut" | "paste" => {
+            //
+            Arc::new(ClipboardData {})
+        }
+        "compositionend" | "compositionstart" | "compositionupdate" => {
+            Arc::new(serde_json::from_value::<CompositionData>(val).unwrap())
+        }
+        "keydown" | "keypress" | "keyup" => {
+            let evt = serde_json::from_value::<KeyboardData>(val).unwrap();
+            Arc::new(evt)
+        }
+        "focus" | "blur" | "focusout" | "focusin" => {
+            //
+            Arc::new(FocusData {})
+        }
+
+        // todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy
+        // don't have a good solution with the serialized event problem
+        "change" | "input" | "invalid" | "reset" | "submit" => {
+            Arc::new(serde_json::from_value::<FormData>(val).unwrap())
+        }
+
+        "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
+        | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
+        | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
+            Arc::new(serde_json::from_value::<MouseData>(val).unwrap())
+        }
+        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
+        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
+            Arc::new(serde_json::from_value::<PointerData>(val).unwrap())
+        }
+        "select" => {
+            //
+            Arc::new(serde_json::from_value::<SelectionData>(val).unwrap())
+        }
+
+        "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
+            Arc::new(serde_json::from_value::<TouchData>(val).unwrap())
+        }
+
+        "scroll" => Arc::new(()),
+
+        "wheel" => Arc::new(serde_json::from_value::<WheelData>(val).unwrap()),
+
+        "animationstart" | "animationend" | "animationiteration" => {
+            Arc::new(serde_json::from_value::<AnimationData>(val).unwrap())
+        }
+
+        "transitionend" => Arc::new(serde_json::from_value::<TransitionData>(val).unwrap()),
+
+        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
+        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
+        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
+        | "timeupdate" | "volumechange" | "waiting" => {
+            //
+            Arc::new(MediaData {})
+        }
+
+        "toggle" => Arc::new(ToggleData {}),
+
+        _ => Arc::new(()),
+    }
+}
+
+fn event_name_from_type(typ: &str) -> &'static str {
+    match typ {
+        "copy" => "copy",
+        "cut" => "cut",
+        "paste" => "paste",
+        "compositionend" => "compositionend",
+        "compositionstart" => "compositionstart",
+        "compositionupdate" => "compositionupdate",
+        "keydown" => "keydown",
+        "keypress" => "keypress",
+        "keyup" => "keyup",
+        "focus" => "focus",
+        "focusout" => "focusout",
+        "focusin" => "focusin",
+        "blur" => "blur",
+        "change" => "change",
+        "input" => "input",
+        "invalid" => "invalid",
+        "reset" => "reset",
+        "submit" => "submit",
+        "click" => "click",
+        "contextmenu" => "contextmenu",
+        "doubleclick" => "doubleclick",
+        "drag" => "drag",
+        "dragend" => "dragend",
+        "dragenter" => "dragenter",
+        "dragexit" => "dragexit",
+        "dragleave" => "dragleave",
+        "dragover" => "dragover",
+        "dragstart" => "dragstart",
+        "drop" => "drop",
+        "mousedown" => "mousedown",
+        "mouseenter" => "mouseenter",
+        "mouseleave" => "mouseleave",
+        "mousemove" => "mousemove",
+        "mouseout" => "mouseout",
+        "mouseover" => "mouseover",
+        "mouseup" => "mouseup",
+        "pointerdown" => "pointerdown",
+        "pointermove" => "pointermove",
+        "pointerup" => "pointerup",
+        "pointercancel" => "pointercancel",
+        "gotpointercapture" => "gotpointercapture",
+        "lostpointercapture" => "lostpointercapture",
+        "pointerenter" => "pointerenter",
+        "pointerleave" => "pointerleave",
+        "pointerover" => "pointerover",
+        "pointerout" => "pointerout",
+        "select" => "select",
+        "touchcancel" => "touchcancel",
+        "touchend" => "touchend",
+        "touchmove" => "touchmove",
+        "touchstart" => "touchstart",
+        "scroll" => "scroll",
+        "wheel" => "wheel",
+        "animationstart" => "animationstart",
+        "animationend" => "animationend",
+        "animationiteration" => "animationiteration",
+        "transitionend" => "transitionend",
+        "abort" => "abort",
+        "canplay" => "canplay",
+        "canplaythrough" => "canplaythrough",
+        "durationchange" => "durationchange",
+        "emptied" => "emptied",
+        "encrypted" => "encrypted",
+        "ended" => "ended",
+        "error" => "error",
+        "loadeddata" => "loadeddata",
+        "loadedmetadata" => "loadedmetadata",
+        "loadstart" => "loadstart",
+        "pause" => "pause",
+        "play" => "play",
+        "playing" => "playing",
+        "progress" => "progress",
+        "ratechange" => "ratechange",
+        "seeked" => "seeked",
+        "seeking" => "seeking",
+        "stalled" => "stalled",
+        "suspend" => "suspend",
+        "timeupdate" => "timeupdate",
+        "volumechange" => "volumechange",
+        "waiting" => "waiting",
+        "toggle" => "toggle",
+        _ => {
+            panic!("unsupported event type")
+        }
+    }
+}

packages/liveview/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dioxus app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="main"></div>
+    <script>
+      import("./index.js").then(function (module) {
+        module.main();
+      });
+    </script>
+  </body>
+</html>

packages/liveview/src/interpreter.js

@@ -0,0 +1,973 @@
+function main() {
+  let root = window.document.getElementById("main");
+
+  if (root != null) {
+    // create a new ipc
+    window.ipc = new IPC(root);
+
+    window.ipc.send(serializeIpcMessage("initialize"));
+  }
+}
+
+class IPC {
+  constructor(root) {
+    // connect to the websocket
+    window.interpreter = new Interpreter(root);
+
+    this.ws = new WebSocket(WS_ADDR);
+
+    this.ws.onopen = () => {
+      console.log("Connected to the websocket");
+    };
+
+    this.ws.onerror = (err) => {
+      console.error("Error: ", err);
+    };
+
+    this.ws.onmessage = (event) => {
+      let edits = JSON.parse(event.data);
+      window.interpreter.handleEdits(edits);
+    };
+  }
+
+  send(msg) {
+    this.ws.send(msg);
+  }
+}
+
+class ListenerMap {
+  constructor(root) {
+    // bubbling events can listen at the root element
+    this.global = {};
+    // non bubbling events listen at the element the listener was created at
+    this.local = {};
+    this.root = root;
+  }
+
+  create(event_name, element, handler, bubbles) {
+    if (bubbles) {
+      if (this.global[event_name] === undefined) {
+        this.global[event_name] = {};
+        this.global[event_name].active = 1;
+        this.global[event_name].callback = handler;
+        this.root.addEventListener(event_name, handler);
+      } else {
+        this.global[event_name].active++;
+      }
+    }
+    else {
+      const id = element.getAttribute("data-dioxus-id");
+      if (!this.local[id]) {
+        this.local[id] = {};
+      }
+      this.local[id][event_name] = handler;
+      element.addEventListener(event_name, handler);
+    }
+  }
+
+  remove(element, event_name, bubbles) {
+    if (bubbles) {
+      this.global[event_name].active--;
+      if (this.global[event_name].active === 0) {
+        this.root.removeEventListener(event_name, this.global[event_name].callback);
+        delete this.global[event_name];
+      }
+    }
+    else {
+      const id = element.getAttribute("data-dioxus-id");
+      delete this.local[id][event_name];
+      if (this.local[id].length === 0) {
+        delete this.local[id];
+      }
+      element.removeEventListener(event_name, handler);
+    }
+  }
+}
+
+class Interpreter {
+  constructor(root) {
+    this.root = root;
+    this.lastNode = root;
+    this.listeners = new ListenerMap(root);
+    this.handlers = {};
+    this.nodes = [root];
+    this.parents = [];
+  }
+  checkAppendParent() {
+    if (this.parents.length > 0) {
+      const lastParent = this.parents[this.parents.length - 1];
+      lastParent[1]--;
+      if (lastParent[1] === 0) {
+        this.parents.pop();
+      }
+      lastParent[0].appendChild(this.lastNode);
+    }
+  }
+  AppendChildren(root, children) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    for (let i = 0; i < children.length; i++) {
+      node.appendChild(this.nodes[children[i]]);
+    }
+  }
+  ReplaceWith(root, nodes) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    let els = [];
+    for (let i = 0; i < nodes.length; i++) {
+      els.push(this.nodes[nodes[i]])
+    }
+    node.replaceWith(...els);
+  }
+  InsertAfter(root, nodes) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    let els = [];
+    for (let i = 0; i < nodes.length; i++) {
+      els.push(this.nodes[nodes[i]])
+    }
+    node.after(...els);
+  }
+  InsertBefore(root, nodes) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    let els = [];
+    for (let i = 0; i < nodes.length; i++) {
+      els.push(this.nodes[nodes[i]])
+    }
+    node.before(...els);
+  }
+  Remove(root) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    if (node !== undefined) {
+      node.remove();
+    }
+  }
+  CreateTextNode(text, root) {
+    this.lastNode = document.createTextNode(text);
+    this.checkAppendParent();
+    if (root != null) {
+      this.nodes[root] = this.lastNode;
+    }
+  }
+  CreateElement(tag, root, children) {
+    this.lastNode = document.createElement(tag);
+    this.checkAppendParent();
+    if (root != null) {
+      this.nodes[root] = this.lastNode;
+    }
+    if (children > 0) {
+      this.parents.push([this.lastNode, children]);
+    }
+  }
+  CreateElementNs(tag, root, ns, children) {
+    this.lastNode = document.createElementNS(ns, tag);
+    this.checkAppendParent();
+    if (root != null) {
+      this.nodes[root] = this.lastNode;
+    }
+    if (children > 0) {
+      this.parents.push([this.lastNode, children]);
+    }
+  }
+  CreatePlaceholder(root) {
+    this.lastNode = document.createElement("pre");
+    this.lastNode.hidden = true;
+    this.checkAppendParent();
+    if (root != null) {
+      this.nodes[root] = this.lastNode;
+    }
+  }
+  NewEventListener(event_name, root, handler, bubbles) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    node.setAttribute("data-dioxus-id", `${root}`);
+    this.listeners.create(event_name, node, handler, bubbles);
+  }
+  RemoveEventListener(root, event_name, bubbles) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    node.removeAttribute(`data-dioxus-id`);
+    this.listeners.remove(node, event_name, bubbles);
+  }
+  SetText(root, text) {
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    node.data = text;
+  }
+  SetAttribute(root, field, value, ns) {
+    const name = field;
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    if (ns === "style") {
+      // @ts-ignore
+      node.style[name] = value;
+    } else if (ns != null || ns != undefined) {
+      node.setAttributeNS(ns, name, value);
+    } else {
+      switch (name) {
+        case "value":
+          if (value !== node.value) {
+            node.value = value;
+          }
+          break;
+        case "checked":
+          node.checked = value === "true";
+          break;
+        case "selected":
+          node.selected = value === "true";
+          break;
+        case "dangerous_inner_html":
+          node.innerHTML = value;
+          break;
+        default:
+          // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+          if (value === "false" && bool_attrs.hasOwnProperty(name)) {
+            node.removeAttribute(name);
+          } else {
+            node.setAttribute(name, value);
+          }
+      }
+    }
+  }
+  RemoveAttribute(root, field, ns) {
+    const name = field;
+    let node;
+    if (root == null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[root];
+    }
+    if (ns == "style") {
+      node.style.removeProperty(name);
+    } else if (ns !== null || ns !== undefined) {
+      node.removeAttributeNS(ns, name);
+    } else if (name === "value") {
+      node.value = "";
+    } else if (name === "checked") {
+      node.checked = false;
+    } else if (name === "selected") {
+      node.selected = false;
+    } else if (name === "dangerous_inner_html") {
+      node.innerHTML = "";
+    } else {
+      node.removeAttribute(name);
+    }
+  }
+  CloneNode(old, new_id) {
+    let node;
+    if (old === null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[old];
+    }
+    this.nodes[new_id] = node.cloneNode(true);
+  }
+  CloneNodeChildren(old, new_ids) {
+    let node;
+    if (old === null) {
+      node = this.lastNode;
+    } else {
+      node = this.nodes[old];
+    }
+    const old_node = node.cloneNode(true);
+    let i = 0;
+    for (let node = old_node.firstChild; i < new_ids.length; node = node.nextSibling) {
+      this.nodes[new_ids[i++]] = node;
+    }
+  }
+  FirstChild() {
+    this.lastNode = this.lastNode.firstChild;
+  }
+  NextSibling() {
+    this.lastNode = this.lastNode.nextSibling;
+  }
+  ParentNode() {
+    this.lastNode = this.lastNode.parentNode;
+  }
+  StoreWithId(id) {
+    this.nodes[id] = this.lastNode;
+  }
+  SetLastNode(root) {
+    this.lastNode = this.nodes[root];
+  }
+  handleEdits(edits) {
+    for (let edit of edits) {
+      this.handleEdit(edit);
+    }
+  }
+  handleEdit(edit) {
+    switch (edit.type) {
+      case "PushRoot":
+        this.PushRoot(edit.root);
+        break;
+      case "AppendChildren":
+        this.AppendChildren(edit.root, edit.children);
+        break;
+      case "ReplaceWith":
+        this.ReplaceWith(edit.root, edit.nodes);
+        break;
+      case "InsertAfter":
+        this.InsertAfter(edit.root, edit.nodes);
+        break;
+      case "InsertBefore":
+        this.InsertBefore(edit.root, edit.nodes);
+        break;
+      case "Remove":
+        this.Remove(edit.root);
+        break;
+      case "CreateTextNode":
+        this.CreateTextNode(edit.text, edit.root);
+        break;
+      case "CreateElement":
+        this.CreateElement(edit.tag, edit.root, edit.children);
+        break;
+      case "CreateElementNs":
+        this.CreateElementNs(edit.tag, edit.root, edit.ns, edit.children);
+        break;
+      case "CreatePlaceholder":
+        this.CreatePlaceholder(edit.root);
+        break;
+      case "RemoveEventListener":
+        this.RemoveEventListener(edit.root, edit.event_name);
+        break;
+      case "NewEventListener":
+        // this handler is only provided on desktop implementations since this
+        // method is not used by the web implementation
+        let handler = (event) => {
+          let target = event.target;
+          if (target != null) {
+            let realId = target.getAttribute(`data-dioxus-id`);
+            let shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
+
+            if (event.type === "click") {
+              // todo call prevent default if it's the right type of event
+              if (shouldPreventDefault !== `onclick`) {
+                if (target.tagName === "A") {
+                  event.preventDefault();
+                  const href = target.getAttribute("href");
+                  if (href !== "" && href !== null && href !== undefined) {
+                    window.ipc.postMessage(
+                      serializeIpcMessage("browser_open", { href })
+                    );
+                  }
+                }
+              }
+
+              // also prevent buttons from submitting
+              if (target.tagName === "BUTTON" && event.type == "submit") {
+                event.preventDefault();
+              }
+            }
+            // walk the tree to find the real element
+            while (realId == null) {
+              // we've reached the root we don't want to send an event
+              if (target.parentElement === null) {
+                return;
+              }
+
+              target = target.parentElement;
+              realId = target.getAttribute(`data-dioxus-id`);
+            }
+
+            shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
+
+            let contents = serialize_event(event);
+
+            if (shouldPreventDefault === `on${event.type}`) {
+              event.preventDefault();
+            }
+
+            if (event.type === "submit") {
+              event.preventDefault();
+            }
+
+            if (
+              target.tagName === "FORM" &&
+              (event.type === "submit" || event.type === "input")
+            ) {
+              for (let x = 0; x < target.elements.length; x++) {
+                let element = target.elements[x];
+                let name = element.getAttribute("name");
+                if (name != null) {
+                  if (element.getAttribute("type") === "checkbox") {
+                    // @ts-ignore
+                    contents.values[name] = element.checked ? "true" : "false";
+                  } else if (element.getAttribute("type") === "radio") {
+                    if (element.checked) {
+                      contents.values[name] = element.value;
+                    }
+                  } else {
+                    // @ts-ignore
+                    contents.values[name] =
+                      element.value ?? element.textContent;
+                  }
+                }
+              }
+            }
+
+            if (realId === null) {
+              return;
+            }
+            realId = parseInt(realId);
+            window.ipc.send(
+              serializeIpcMessage("user_event", {
+                event: edit.event_name,
+                mounted_dom_id: realId,
+                contents: contents,
+              })
+            );
+          }
+        };
+        this.NewEventListener(edit.event_name, edit.root, handler, event_bubbles(edit.event_name));
+
+        break;
+      case "SetText":
+        this.SetText(edit.root, edit.text);
+        break;
+      case "SetAttribute":
+        this.SetAttribute(edit.root, edit.field, edit.value, edit.ns);
+        break;
+      case "RemoveAttribute":
+        this.RemoveAttribute(edit.root, edit.name, edit.ns);
+        break;
+      case "CloneNode":
+        this.CloneNode(edit.id, edit.new_id);
+        break;
+      case "CloneNodeChildren":
+        this.CloneNodeChildren(edit.id, edit.new_ids);
+        break;
+      case "FirstChild":
+        this.FirstChild();
+        break;
+      case "NextSibling":
+        this.NextSibling();
+        break;
+      case "ParentNode":
+        this.ParentNode();
+        break;
+      case "StoreWithId":
+        this.StoreWithId(BigInt(edit.id));
+        break;
+      case "SetLastNode":
+        this.SetLastNode(BigInt(edit.id));
+        break;
+    }
+  }
+}
+
+function serialize_event(event) {
+  switch (event.type) {
+    case "copy":
+    case "cut":
+    case "past": {
+      return {};
+    }
+    case "compositionend":
+    case "compositionstart":
+    case "compositionupdate": {
+      let { data } = event;
+      return {
+        data,
+      };
+    }
+    case "keydown":
+    case "keypress":
+    case "keyup": {
+      let {
+        charCode,
+        key,
+        altKey,
+        ctrlKey,
+        metaKey,
+        keyCode,
+        shiftKey,
+        location,
+        repeat,
+        which,
+        code,
+      } = event;
+      return {
+        char_code: charCode,
+        key: key,
+        alt_key: altKey,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        key_code: keyCode,
+        shift_key: shiftKey,
+        location: location,
+        repeat: repeat,
+        which: which,
+        code,
+      };
+    }
+    case "focus":
+    case "blur": {
+      return {};
+    }
+    case "change": {
+      let target = event.target;
+      let value;
+      if (target.type === "checkbox" || target.type === "radio") {
+        value = target.checked ? "true" : "false";
+      } else {
+        value = target.value ?? target.textContent;
+      }
+      return {
+        value: value,
+        values: {},
+      };
+    }
+    case "input":
+    case "invalid":
+    case "reset":
+    case "submit": {
+      let target = event.target;
+      let value = target.value ?? target.textContent;
+
+      if (target.type === "checkbox") {
+        value = target.checked ? "true" : "false";
+      }
+
+      return {
+        value: value,
+        values: {},
+      };
+    }
+    case "click":
+    case "contextmenu":
+    case "doubleclick":
+    case "dblclick":
+    case "drag":
+    case "dragend":
+    case "dragenter":
+    case "dragexit":
+    case "dragleave":
+    case "dragover":
+    case "dragstart":
+    case "drop":
+    case "mousedown":
+    case "mouseenter":
+    case "mouseleave":
+    case "mousemove":
+    case "mouseout":
+    case "mouseover":
+    case "mouseup": {
+      const {
+        altKey,
+        button,
+        buttons,
+        clientX,
+        clientY,
+        ctrlKey,
+        metaKey,
+        offsetX,
+        offsetY,
+        pageX,
+        pageY,
+        screenX,
+        screenY,
+        shiftKey,
+      } = event;
+      return {
+        alt_key: altKey,
+        button: button,
+        buttons: buttons,
+        client_x: clientX,
+        client_y: clientY,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        offset_x: offsetX,
+        offset_y: offsetY,
+        page_x: pageX,
+        page_y: pageY,
+        screen_x: screenX,
+        screen_y: screenY,
+        shift_key: shiftKey,
+      };
+    }
+    case "pointerdown":
+    case "pointermove":
+    case "pointerup":
+    case "pointercancel":
+    case "gotpointercapture":
+    case "lostpointercapture":
+    case "pointerenter":
+    case "pointerleave":
+    case "pointerover":
+    case "pointerout": {
+      const {
+        altKey,
+        button,
+        buttons,
+        clientX,
+        clientY,
+        ctrlKey,
+        metaKey,
+        pageX,
+        pageY,
+        screenX,
+        screenY,
+        shiftKey,
+        pointerId,
+        width,
+        height,
+        pressure,
+        tangentialPressure,
+        tiltX,
+        tiltY,
+        twist,
+        pointerType,
+        isPrimary,
+      } = event;
+      return {
+        alt_key: altKey,
+        button: button,
+        buttons: buttons,
+        client_x: clientX,
+        client_y: clientY,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        page_x: pageX,
+        page_y: pageY,
+        screen_x: screenX,
+        screen_y: screenY,
+        shift_key: shiftKey,
+        pointer_id: pointerId,
+        width: width,
+        height: height,
+        pressure: pressure,
+        tangential_pressure: tangentialPressure,
+        tilt_x: tiltX,
+        tilt_y: tiltY,
+        twist: twist,
+        pointer_type: pointerType,
+        is_primary: isPrimary,
+      };
+    }
+    case "select": {
+      return {};
+    }
+    case "touchcancel":
+    case "touchend":
+    case "touchmove":
+    case "touchstart": {
+      const { altKey, ctrlKey, metaKey, shiftKey } = event;
+      return {
+        // changed_touches: event.changedTouches,
+        // target_touches: event.targetTouches,
+        // touches: event.touches,
+        alt_key: altKey,
+        ctrl_key: ctrlKey,
+        meta_key: metaKey,
+        shift_key: shiftKey,
+      };
+    }
+    case "scroll": {
+      return {};
+    }
+    case "wheel": {
+      const { deltaX, deltaY, deltaZ, deltaMode } = event;
+      return {
+        delta_x: deltaX,
+        delta_y: deltaY,
+        delta_z: deltaZ,
+        delta_mode: deltaMode,
+      };
+    }
+    case "animationstart":
+    case "animationend":
+    case "animationiteration": {
+      const { animationName, elapsedTime, pseudoElement } = event;
+      return {
+        animation_name: animationName,
+        elapsed_time: elapsedTime,
+        pseudo_element: pseudoElement,
+      };
+    }
+    case "transitionend": {
+      const { propertyName, elapsedTime, pseudoElement } = event;
+      return {
+        property_name: propertyName,
+        elapsed_time: elapsedTime,
+        pseudo_element: pseudoElement,
+      };
+    }
+    case "abort":
+    case "canplay":
+    case "canplaythrough":
+    case "durationchange":
+    case "emptied":
+    case "encrypted":
+    case "ended":
+    case "error":
+    case "loadeddata":
+    case "loadedmetadata":
+    case "loadstart":
+    case "pause":
+    case "play":
+    case "playing":
+    case "progress":
+    case "ratechange":
+    case "seeked":
+    case "seeking":
+    case "stalled":
+    case "suspend":
+    case "timeupdate":
+    case "volumechange":
+    case "waiting": {
+      return {};
+    }
+    case "toggle": {
+      return {};
+    }
+    default: {
+      return {};
+    }
+  }
+}
+function serializeIpcMessage(method, params = {}) {
+  return JSON.stringify({ method, params });
+}
+const bool_attrs = {
+  allowfullscreen: true,
+  allowpaymentrequest: true,
+  async: true,
+  autofocus: true,
+  autoplay: true,
+  checked: true,
+  controls: true,
+  default: true,
+  defer: true,
+  disabled: true,
+  formnovalidate: true,
+  hidden: true,
+  ismap: true,
+  itemscope: true,
+  loop: true,
+  multiple: true,
+  muted: true,
+  nomodule: true,
+  novalidate: true,
+  open: true,
+  playsinline: true,
+  readonly: true,
+  required: true,
+  reversed: true,
+  selected: true,
+  truespeed: true,
+};
+
+function is_element_node(node) {
+  return node.nodeType == 1;
+}
+
+function event_bubbles(event) {
+  switch (event) {
+    case "copy":
+      return true;
+    case "cut":
+      return true;
+    case "paste":
+      return true;
+    case "compositionend":
+      return true;
+    case "compositionstart":
+      return true;
+    case "compositionupdate":
+      return true;
+    case "keydown":
+      return true;
+    case "keypress":
+      return true;
+    case "keyup":
+      return true;
+    case "focus":
+      return false;
+    case "focusout":
+      return true;
+    case "focusin":
+      return true;
+    case "blur":
+      return false;
+    case "change":
+      return true;
+    case "input":
+      return true;
+    case "invalid":
+      return true;
+    case "reset":
+      return true;
+    case "submit":
+      return true;
+    case "click":
+      return true;
+    case "contextmenu":
+      return true;
+    case "doubleclick":
+      return true;
+    case "dblclick":
+      return true;
+    case "drag":
+      return true;
+    case "dragend":
+      return true;
+    case "dragenter":
+      return false;
+    case "dragexit":
+      return false;
+    case "dragleave":
+      return true;
+    case "dragover":
+      return true;
+    case "dragstart":
+      return true;
+    case "drop":
+      return true;
+    case "mousedown":
+      return true;
+    case "mouseenter":
+      return false;
+    case "mouseleave":
+      return false;
+    case "mousemove":
+      return true;
+    case "mouseout":
+      return true;
+    case "scroll":
+      return false;
+    case "mouseover":
+      return true;
+    case "mouseup":
+      return true;
+    case "pointerdown":
+      return true;
+    case "pointermove":
+      return true;
+    case "pointerup":
+      return true;
+    case "pointercancel":
+      return true;
+    case "gotpointercapture":
+      return true;
+    case "lostpointercapture":
+      return true;
+    case "pointerenter":
+      return false;
+    case "pointerleave":
+      return false;
+    case "pointerover":
+      return true;
+    case "pointerout":
+      return true;
+    case "select":
+      return true;
+    case "touchcancel":
+      return true;
+    case "touchend":
+      return true;
+    case "touchmove":
+      return true;
+    case "touchstart":
+      return true;
+    case "wheel":
+      return true;
+    case "abort":
+      return false;
+    case "canplay":
+      return false;
+    case "canplaythrough":
+      return false;
+    case "durationchange":
+      return false;
+    case "emptied":
+      return false;
+    case "encrypted":
+      return true;
+    case "ended":
+      return false;
+    case "error":
+      return false;
+    case "loadeddata":
+      return false;
+    case "loadedmetadata":
+      return false;
+    case "loadstart":
+      return false;
+    case "pause":
+      return false;
+    case "play":
+      return false;
+    case "playing":
+      return false;
+    case "progress":
+      return false;
+    case "ratechange":
+      return false;
+    case "seeked":
+      return false;
+    case "seeking":
+      return false;
+    case "stalled":
+      return false;
+    case "suspend":
+      return false;
+    case "timeupdate":
+      return false;
+    case "volumechange":
+      return false;
+    case "waiting":
+      return false;
+    case "animationstart":
+      return true;
+    case "animationend":
+      return true;
+    case "animationiteration":
+      return true;
+    case "transitionend":
+      return true;
+    case "toggle":
+      return true;
+  }
+}

packages/liveview/src/lib.rs

@@ -1,55 +1,56 @@
+#![allow(dead_code)]
+
+pub(crate) mod events;
 pub mod adapters {
     #[cfg(feature = "warp")]
     pub mod warp_adapter;
-    #[cfg(feature = "warp")]
-    pub use warp_adapter::*;
 
     #[cfg(feature = "axum")]
     pub mod axum_adapter;
-    #[cfg(feature = "axum")]
-    pub use axum_adapter::*;
 
     #[cfg(feature = "salvo")]
     pub mod salvo_adapter;
-
-    #[cfg(feature = "salvo")]
-    pub use salvo_adapter::*;
 }
 
-pub use adapters::*;
-
-pub mod pool;
-use futures_util::{SinkExt, StreamExt};
-pub use pool::*;
+use std::net::SocketAddr;
 
-pub trait WebsocketTx: SinkExt<String, Error = LiveViewError> {}
-impl<T> WebsocketTx for T where T: SinkExt<String, Error = LiveViewError> {}
+use tokio_util::task::LocalPoolHandle;
 
-pub trait WebsocketRx: StreamExt<Item = Result<String, LiveViewError>> {}
-impl<T> WebsocketRx for T where T: StreamExt<Item = Result<String, LiveViewError>> {}
+#[derive(Clone)]
+pub struct Liveview {
+    pool: LocalPoolHandle,
+    addr: String,
+}
 
-#[derive(Debug, thiserror::Error)]
-pub enum LiveViewError {
-    #[error("warp error")]
-    SendingFailed,
+impl Liveview {
+    pub fn body(&self, header: &str) -> String {
+        format!(
+            r#"
+<!DOCTYPE html>
+<html>
+  <head>
+    {header}
+  </head>
+  <body>
+    <div id="main"></div>
+    <script>
+      var WS_ADDR = "ws://{addr}/app";
+      {interpreter}
+      main();
+    </script>
+  </body>
+</html>"#,
+            addr = self.addr,
+            interpreter = include_str!("../src/interpreter.js")
+        )
+    }
 }
 
-use dioxus_interpreter_js::INTERPRETER_JS;
-static MAIN_JS: &str = include_str!("./main.js");
-
-/// This script that gets injected into your app connects this page to the websocket endpoint
-///
-/// Once the endpoint is connected, it will send the initial state of the app, and then start
-/// processing user events and returning edits to the liveview instance
-pub fn interpreter_glue(url: &str) -> String {
-    format!(
-        r#"
-<script>
-    var WS_ADDR = "{url}";
-    {INTERPRETER_JS}
-    {MAIN_JS}
-    main();
-</script>
-    "#
-    )
+pub fn new(addr: impl Into<SocketAddr>) -> Liveview {
+    let addr: SocketAddr = addr.into();
+
+    Liveview {
+        pool: LocalPoolHandle::new(16),
+        addr: addr.to_string(),
+    }
 }

packages/liveview/src/main.js

@@ -1,36 +0,0 @@
-function main() {
-  let root = window.document.getElementById("main");
-
-  if (root != null) {
-    // create a new ipc
-    window.ipc = new IPC(root);
-    window.ipc.postMessage(serializeIpcMessage("initialize"));
-  }
-}
-
-class IPC {
-  constructor(root) {
-    // connect to the websocket
-    window.interpreter = new Interpreter(root);
-
-    this.ws = new WebSocket(WS_ADDR);
-
-    this.ws.onopen = () => {
-      console.log("Connected to the websocket");
-    };
-
-    this.ws.onerror = (err) => {
-      console.error("Error: ", err);
-    };
-
-    this.ws.onmessage = (event) => {
-      console.log("Received message: ", event.data);
-      let edits = JSON.parse(event.data);
-      window.interpreter.handleEdits(edits);
-    };
-  }
-
-  postMessage(msg) {
-    this.ws.send(msg);
-  }
-}

packages/liveview/src/pool.rs

@@ -1,123 +0,0 @@
-use crate::LiveViewError;
-use dioxus_core::prelude::*;
-use dioxus_html::HtmlEvent;
-use futures_util::{pin_mut, SinkExt, StreamExt};
-use std::time::Duration;
-use tokio_util::task::LocalPoolHandle;
-
-#[derive(Clone)]
-pub struct LiveViewPool {
-    pub(crate) pool: LocalPoolHandle,
-}
-
-impl Default for LiveViewPool {
-    fn default() -> Self {
-        Self::new()
-    }
-}
-
-impl LiveViewPool {
-    pub fn new() -> Self {
-        LiveViewPool {
-            pool: LocalPoolHandle::new(16),
-        }
-    }
-
-    pub async fn launch(
-        &self,
-        ws: impl LiveViewSocket,
-        app: fn(Scope<()>) -> Element,
-    ) -> Result<(), LiveViewError> {
-        self.launch_with_props(ws, app, ()).await
-    }
-
-    pub async fn launch_with_props<T: Send + 'static>(
-        &self,
-        ws: impl LiveViewSocket,
-        app: fn(Scope<T>) -> Element,
-        props: T,
-    ) -> Result<(), LiveViewError> {
-        match self.pool.spawn_pinned(move || run(app, props, ws)).await {
-            Ok(Ok(_)) => Ok(()),
-            Ok(Err(e)) => Err(e),
-            Err(_) => Err(LiveViewError::SendingFailed),
-        }
-    }
-}
-
-/// A LiveViewSocket is a Sink and Stream of Strings that Dioxus uses to communicate with the client
-pub trait LiveViewSocket:
-    SinkExt<String, Error = LiveViewError>
-    + StreamExt<Item = Result<String, LiveViewError>>
-    + Send
-    + 'static
-{
-}
-
-impl<S> LiveViewSocket for S where
-    S: SinkExt<String, Error = LiveViewError>
-        + StreamExt<Item = Result<String, LiveViewError>>
-        + Send
-        + 'static
-{
-}
-
-/// The primary event loop for the VirtualDom waiting for user input
-///
-/// This function makes it easy to integrate Dioxus LiveView with any socket-based framework.
-///
-/// As long as your framework can provide a Sink and Stream of Strings, you can use this function.
-///
-/// You might need to transform the error types of the web backend into the LiveView error type.
-pub async fn run<T>(
-    app: Component<T>,
-    props: T,
-    ws: impl LiveViewSocket,
-) -> Result<(), LiveViewError>
-where
-    T: Send + 'static,
-{
-    let mut vdom = VirtualDom::new_with_props(app, props);
-
-    // todo: use an efficient binary packed format for this
-    let edits = serde_json::to_string(&vdom.rebuild()).unwrap();
-
-    // pin the futures so we can use select!
-    pin_mut!(ws);
-
-    // send the initial render to the client
-    ws.send(edits).await?;
-
-    // desktop uses this wrapper struct thing around the actual event itself
-    // this is sorta driven by tao/wry
-    #[derive(serde::Deserialize)]
-    struct IpcMessage {
-        params: HtmlEvent,
-    }
-
-    loop {
-        tokio::select! {
-            // poll any futures or suspense
-            _ = vdom.wait_for_work() => {}
-
-            evt = ws.next() => {
-                match evt {
-                    Some(Ok(evt)) => {
-                        if let Ok(IpcMessage { params }) = serde_json::from_str::<IpcMessage>(&evt) {
-                            vdom.handle_event(&params.name, params.data.into_any(), params.element, params.bubbles);
-                        }
-                    }
-                    // log this I guess? when would we get an error here?
-                    Some(Err(_e)) => {},
-                    None => return Ok(()),
-                }
-            }
-        }
-
-        let edits = vdom
-            .render_with_deadline(tokio::time::sleep(Duration::from_millis(10)))
-            .await;
-
-        ws.send(serde_json::to_string(&edits).unwrap()).await?;
-    }
-}

packages/tui/src/widgets/button.rs

@@ -32,6 +32,7 @@ pub(crate) fn Button<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
             callback.call(FormData {
                 value: text.to_string(),
                 values: HashMap::new(),
+                files: None,
             });
         }
         state.set(new_state);

packages/tui/src/widgets/checkbox.rs

@@ -56,6 +56,7 @@ pub(crate) fn CheckBox<'a>(cx: Scope<'a, CheckBoxProps>) -> Element<'a> {
                     "on".to_string()
                 },
                 values: HashMap::new(),
+                files: None,
             });
         }
         state.set(new_state);

packages/tui/src/widgets/number.rs

@@ -84,6 +84,7 @@ pub(crate) fn NumbericInput<'a>(cx: Scope<'a, NumbericInputProps>) -> Element<'a
             input_handler.call(FormData {
                 value: text,
                 values: HashMap::new(),
+                files: None,
             });
         }
     };

packages/tui/src/widgets/password.rs

@@ -84,7 +84,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> {
     };
 
     render! {
-        div {
+        div{
             width: "{width}",
             height: "{height}",
             border_style: "{border}",
@@ -99,6 +99,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> {
                     input_handler.call(FormData{
                         value: text.clone(),
                         values: HashMap::new(),
+                        files: None
                     });
                 }
 

packages/tui/src/widgets/slider.rs

@@ -58,6 +58,7 @@ pub(crate) fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
             oninput.call(FormData {
                 value,
                 values: HashMap::new(),
+                files: None,
             });
         }
     };

packages/tui/src/widgets/textbox.rs

@@ -95,6 +95,7 @@ pub(crate) fn TextBox<'a>(cx: Scope<'a, TextBoxProps>) -> Element<'a> {
                     input_handler.call(FormData{
                         value: text.clone(),
                         values: HashMap::new(),
+                        files: None
                     });
                 }
 

packages/web/src/dom.rs

@@ -331,7 +331,11 @@ fn read_input_to_data(target: Element) -> Rc<FormData> {
         }
     }
 
-    Rc::new(FormData { value, values })
+    Rc::new(FormData {
+        value,
+        values,
+        files: None,
+    })
 }
 
 fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {