feat: introduce simpler adapters for liveview

packages/liveview/examples/axum.rs

@@ -1,32 +1,53 @@
-#[cfg(not(feature = "axum"))]
-fn main() {}
+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(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::new(addr);
-    let body = view.body("<title>Dioxus Liveview</title>");
+    let view = dioxus_liveview::LiveViewPool::new();
 
     let app = Router::new()
-        .route("/", get(move || async { Html(body) }))
         .route(
-            "/app",
+            "/",
+            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",
             get(move |ws: WebSocketUpgrade| async move {
                 ws.on_upgrade(move |socket| async move {
-                    view.upgrade_axum(socket, app).await;
+                    _ = view.launch(dioxus_liveview::axum_socket(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,55 +1,70 @@
-#[cfg(not(feature = "salvo"))]
-fn main() {}
+use dioxus::prelude::*;
+use dioxus_liveview::LiveViewPool;
+use salvo::extra::affix;
+use salvo::extra::ws::WsHandler;
+use salvo::prelude::*;
+use std::net::SocketAddr;
+use std::sync::Arc;
+
+fn app(cx: Scope) -> Element {
+    let mut num = use_state(cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            "hello salvo! {num}"
+            button { onclick: move |_| num += 1, "Increment" }
+        }
+    })
+}
 
-#[cfg(feature = "salvo")]
 #[tokio::main]
 async fn main() {
-    use std::sync::Arc;
-
-    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::*;
-
-    fn app(cx: Scope) -> Element {
-        cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
-    }
-
     pretty_env_logger::init();
 
-    let addr = ([127, 0, 0, 1], 3030);
+    let addr: SocketAddr = ([127, 0, 0, 1], 3030).into();
+
+    let view = LiveViewPool::new();
 
-    // 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("app").get(connect));
+        .push(Router::with_path("ws").get(connect));
+
+    println!("Listening on http://{}", addr);
+
     Server::new(TcpListener::bind(addr)).serve(router).await;
+}
 
-    #[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]
+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<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(())
-    }
+#[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(())
 }

packages/liveview/examples/warp.rs

@@ -1,35 +1,56 @@
-#[cfg(not(feature = "warp"))]
-fn main() {}
+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(feature = "warp")]
 #[tokio::main]
 async fn main() {
-    use dioxus_core::{Element, LazyNodes, Scope};
-    use dioxus_liveview as liveview;
-    use warp::ws::Ws;
-    use warp::Filter;
-
-    fn app(cx: Scope) -> Element {
-        cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
-    }
-
     pretty_env_logger::init();
 
-    let addr = ([127, 0, 0, 1], 3030);
+    let addr: SocketAddr = ([127, 0, 0, 1], 3030).into();
 
-    // todo: compactify this routing under one liveview::app method
-    let view = liveview::new(addr);
-    let body = view.body("<title>Dioxus LiveView</title>");
+    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 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;
+    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);
+
+    warp::serve(index.or(ws)).run(addr).await;
 }