wip: add html event type

packages/liveview/src/adapters/warp_adapter.rs

@@ -1,110 +1,75 @@
-use crate::events;
+use std::{convert::Infallible, time::Duration};
+
+use crate::{
+    events::{self, IpcMessage},
+    LiveView, LiveViewError,
+};
 use dioxus_core::prelude::*;
+use dioxus_html::a;
 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};
 
-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,
+impl LiveView {
+    pub async fn upgrade_warp(self, ws: WebSocket, app: fn(Scope<()>) -> Element) {}
+
+    pub async fn upgrade_warp_with_props<T: Send + 'static>(
+        self,
+        ws: WebSocket,
         app: fn(Scope<T>) -> Element,
         props: T,
-    ) where
-        T: Send + Sync + 'static,
-    {
-        connect(ws, self.pool.clone(), app, props).await;
+    ) {
+        self.pool
+            .spawn_pinned(move || liveview_eventloop(app, props, ws))
+            .await;
     }
 }
 
-pub async fn connect<T>(
-    ws: WebSocket,
-    pool: LocalPoolHandle,
-    app: fn(Scope<T>) -> Element,
+async fn liveview_eventloop<T>(
+    app: Component<T>,
     props: T,
-) where
-    T: Send + Sync + 'static,
+    mut ws: WebSocket,
+) -> Result<(), LiveViewError>
+where
+    T: Send + 'static,
 {
-    // Use a counter to assign a new unique ID for this user.
-
-    // Split the socket into a sender and receive of messages.
-    let (mut user_ws_tx, mut user_ws_rx) = ws.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.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();
-                }
-            }
-        }
-    });
+    let mut vdom = VirtualDom::new_with_props(app, props);
+    let edits = serde_json::to_string(&vdom.rebuild()).unwrap();
+    ws.send(Message::text(edits)).await.unwrap();
 
     loop {
-        use futures_util::future::{select, Either};
+        tokio::select! {
+            // poll any futures or suspense
+            _ = vdom.wait_for_work() => {}
 
-        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();
+            evt = ws.next() => {
+                match evt {
+                    Some(Ok(evt)) => {
+                        if let Ok(evt) = evt.to_str() {
+                            let IpcMessage { name, element, bubbles, data } = serde_json::from_str(evt).unwrap();
+
+                            vdom.handle_event(&name, data, element, bubbles);
                         }
-                    } 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;
+                    Some(Err(e)) => {
+                        // log this I guess?
+                        // when would we get an error here?
                     }
-                } else {
-                    break;
+                    None => break,
                 }
+
             }
         }
-    }
 
-    vdom_fut.abort();
+        let edits = vdom
+            .render_with_deadline(tokio::time::sleep(Duration::from_millis(10)))
+            .await;
+
+        ws.send(Message::text(serde_json::to_string(&edits).unwrap()))
+            .await
+            .unwrap();
+    }
+    Ok(()) as Result<(), LiveViewError>
 }

packages/liveview/src/events.rs

@@ -11,15 +11,10 @@ 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,
-    }
+    pub name: String,
+    pub element: ElementId,
+    pub bubbles: bool,
+    pub data: serde_json::Value,
 }
 
 #[derive(serde::Serialize, serde::Deserialize)]

packages/liveview/src/interpreter.js

@@ -4,7 +4,6 @@ function main() {
   if (root != null) {
     // create a new ipc
     window.ipc = new IPC(root);
-
     window.ipc.send(serializeIpcMessage("initialize"));
   }
 }
@@ -970,4 +969,4 @@ function event_bubbles(event) {
     case "toggle":
       return true;
   }
-}
+}

packages/liveview/src/lib.rs

@@ -1,6 +1,21 @@
 #![allow(dead_code)]
 
+pub static INTERPRETER: &str = include_str!("interpreter.js");
+
+pub fn interpreter_glue(url: &str) -> String {
+    format!(
+        r#"
+<script>
+    var WS_ADDR = "{url}";
+    {INTERPRETER}
+    main();
+</script>
+    "#
+    )
+}
+
 pub(crate) mod events;
+
 pub mod adapters {
     #[cfg(feature = "warp")]
     pub mod warp_adapter;
@@ -16,41 +31,8 @@ use std::net::SocketAddr;
 
 use tokio_util::task::LocalPoolHandle;
 
-#[derive(Clone)]
-pub struct Liveview {
-    pool: LocalPoolHandle,
-    addr: String,
-}
+pub mod pool;
+pub use pool::*;
 
-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")
-        )
-    }
-}
-
-pub fn new(addr: impl Into<SocketAddr>) -> Liveview {
-    let addr: SocketAddr = addr.into();
-
-    Liveview {
-        pool: LocalPoolHandle::new(16),
-        addr: addr.to_string(),
-    }
-}
+#[derive(Debug, Clone, PartialEq, thiserror::Error)]
+pub enum LiveViewError {}

packages/liveview/src/pool.rs

@@ -0,0 +1,46 @@
+use std::net::SocketAddr;
+
+use tokio_util::task::LocalPoolHandle;
+
+#[derive(Clone)]
+pub struct LiveView {
+    pub(crate) pool: LocalPoolHandle,
+    pub(crate) addr: String,
+}
+
+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")
+        )
+    }
+
+    pub fn interpreter_code(&self) -> String {
+        include_str!("../src/interpreter.js").to_string()
+    }
+
+    pub fn new(addr: impl Into<SocketAddr>) -> Self {
+        let addr: SocketAddr = addr.into();
+
+        LiveView {
+            pool: LocalPoolHandle::new(16),
+            addr: addr.to_string(),
+        }
+    }
+}