wip: add html event type

packages/liveview/examples/salvo.rs

@@ -8,7 +8,7 @@ async fn main() {
 
     use dioxus_core::{Element, LazyNodes, Scope};
     use dioxus_liveview as liveview;
-    use dioxus_liveview::Liveview;
+    use dioxus_liveview::LiveView;
     use salvo::extra::affix;
     use salvo::extra::ws::WsHandler;
     use salvo::prelude::*;

packages/liveview/examples/warp.rs

@@ -1,35 +1,50 @@
-#[cfg(not(feature = "warp"))]
-fn main() {}
+use dioxus::prelude::*;
+use dioxus_liveview::LiveView;
+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 world! {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> {glue} </body>
+            </html>
+            "#,
+            glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws/app"))
+        ))
+    });
 
-    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 view = LiveView::new(addr);
+
+    let ws = warp::path("ws")
+        .and(warp::ws())
+        .and(warp::any().map(move || view.clone()))
+        .map(move |ws: Ws, view: LiveView| ws.on_upgrade(|ws| view.upgrade_warp(ws, app)));
+
+    println!("Listening on http://{}", addr);
+
+    warp::serve(index.or(ws)).run(addr).await;
 }