Merge pull request #366 from WIGGLES-dev/master

Liveview Axum Integration + Example updates

packages/html/src/elements.rs

@@ -428,6 +428,11 @@ builder_constructors! {
     /// element.
     mark {};
 
+    /// Build a
+    /// [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
+    /// element.
+    menu {};
+
     /// Build a
     /// [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
     /// element.

packages/liveview/Cargo.toml

@@ -30,5 +30,16 @@ dioxus-core = { path = "../core", features = ["serialize"] }
 # warp
 warp = { version = "0.3", optional = true }
 
+# axum
+axum = { version = "0.5.1", optional = true, features = ["ws"] }
+tower = { version = "0.4.12", optional = true }
+
+[dev-dependencies]
+tokio = { version = "1", features = ["full"] }
+dioxus = { path = "../../" }
+warp = "0.3"
+axum = { version = "0.5.1", features = ["ws"] }
+tower = "0.4.12"
+
 [features]
 default = []

packages/liveview/examples/axum.rs

@@ -0,0 +1,38 @@
+use axum::{
+    extract::ws::WebSocketUpgrade, response::Html, response::IntoResponse, routing::get, Extension,
+    Router,
+};
+use dioxus_core::{Element, LazyNodes, Scope};
+use dioxus_liveview::Liveview;
+
+#[tokio::main]
+async fn main() {
+    #[cfg(feature = "axum")]
+    {
+        pretty_env_logger::init();
+
+        let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
+
+        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(
+                "/app",
+                get(move |ws: WebSocketUpgrade| async move {
+                    ws.on_upgrade(move |socket| async move {
+                        view.upgrade(socket, app).await;
+                    })
+                }),
+            );
+        axum::Server::bind(&addr.to_string().parse().unwrap())
+            .serve(app.into_make_service())
+            .await
+            .unwrap();
+    }
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
+}

packages/liveview/examples/warp.rs

@@ -1,5 +1,3 @@
-#![cfg(feature = "warp")]
-
 use dioxus_core::{Element, LazyNodes, Scope};
 use dioxus_liveview as liveview;
 use warp::ws::Ws;
@@ -7,26 +5,28 @@ use warp::Filter;
 
 #[tokio::main]
 async fn main() {
-    pretty_env_logger::init();
+    #[cfg(feature = "warp")]
+    {
+        pretty_env_logger::init();
 
-    let addr = ([127, 0, 0, 1], 3030);
+        let addr = ([127, 0, 0, 1], 3030);
 
-    // todo: compactify this routing under one liveview::app method
+        // todo: compactify this routing under one liveview::app method
-    let view = liveview::new(addr);
+        let view = liveview::new(addr);
-    let body = view.body("<title>Dioxus LiveView</title>");
+        let body = view.body("<title>Dioxus LiveView</title>");
 
-    let routes = warp::path::end()
+        let routes = warp::path::end()
-        .map(move || warp::reply::html(body.clone()))
+            .map(move || warp::reply::html(body.clone()))
-        .or(warp::path("app")
+            .or(warp::path("app")
-            .and(warp::ws())
+                .and(warp::ws())
-            .and(warp::any().map(move || view.clone()))
+                .and(warp::any().map(move || view.clone()))
-            .map(|ws: Ws, view: liveview::Liveview| {
+                .map(|ws: Ws, view: liveview::Liveview| {
-                ws.on_upgrade(|socket| async move {
+                    ws.on_upgrade(|socket| async move {
-                    view.upgrade(socket, app).await;
+                        view.upgrade(socket, app).await;
-                })
+                    })
-            }));
+                }));
-
+        warp::serve(routes).run(addr).await;
-    warp::serve(routes).run(addr).await;
+    }
 }
 
 fn app(cx: Scope) -> Element {

packages/liveview/src/adapters/axum_adapter.rs

@@ -1 +1,77 @@
+use crate::{events, Liveview};
+use axum::extract::ws::{Message, WebSocket};
+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;
 
+#[cfg(feature = "axum")]
+impl crate::Liveview {
+    pub async fn upgrade(&self, ws: WebSocket, app: fn(Scope) -> Element) {
+        connect(ws, self.pool.clone(), app).await;
+    }
+}
+
+pub async fn connect(socket: WebSocket, pool: LocalPoolHandle, app: fn(Scope) -> Element) {
+    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(app);
+        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/warp_adapter.rs

@@ -6,6 +6,7 @@ use tokio_stream::wrappers::UnboundedReceiverStream;
 use tokio_util::task::LocalPoolHandle;
 use warp::ws::{Message, WebSocket};
 
+#[cfg(feature = "warp")]
 impl crate::Liveview {
     pub async fn upgrade(&self, ws: warp::ws::WebSocket, app: fn(Scope) -> Element) {
         connect(ws, self.pool.clone(), app).await;