Implement LiveView Router Integration (#1505)

* Fix GoForwardButton calling can_go_back instead of can_go_forward

* Add first draft of LiveviewHistory

* Add external URL redirect

* Lock evaluator channel outside loop

* Add liveview to router examples

* fixup! Add liveview to router examples

* Communicate with liveview server on page load

* Add PopState event to Liveview routing

* Call updater callback from liveview history

* Add rudimentary PopState functionality to liveview router.

* Fix linter errors

* Refactor

* Fix navigator external redirection not working.

* Add go back and go forward buttons to router examples

* Finish functionality for timeline stack in liveview router

* Add docs to LiveviewHistory

* Replace Liveview history context attachment with constructor that takes context

* Fix go forward/backward history/future shuffle

* Support history across entire liveview session, if contiguous page jumps.

* Remove unnecessary bounds

* Add query and hash to location string

* Run rustfmt

* fix: Update server function docs link (#1489)

* liveview: Add `interpreter_glue_relative_uri (#1481)

* liveview: Add `interpreter_glue_relative_uri`

By utilizing `window.location.host` in the client-side JavaScript, we can easily derive the WebSocket URI from a relative path URI. This approach obviates the need for host address retrieval on the server side, unlike the method of serving glue code in liveview using `interpreter_glue`.

* liveview: Merge `.._relative_url` functionality

- Merged `.._relative_url` to current API `interpreter_glue`.
- Edit axum example to work with new feature.

* liveview: Fix clippy warning

* Rename modules to use snake_case (#1498)

* Change Scope into &ScopeState

* Move synchronization of state into router and make it opt-in

---------

Co-authored-by: Marc Espín <mespinsanz@gmail.com>
Co-authored-by: Seungwoo Kang <ki6080@gmail.com>
Co-authored-by: Leonard <tigerros.gh@gmail.com>
Co-authored-by: Evan Almloff <evanalmloff@gmail.com>

packages/router/examples/simple_routes.rs

@@ -2,6 +2,47 @@ use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 use std::str::FromStr;
 
+#[cfg(feature = "liveview")]
+#[tokio::main]
+async fn main() {
+    use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
+
+    let listen_address: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
+    let view = dioxus_liveview::LiveViewPool::new();
+    let app = Router::new()
+        .fallback(get(move || async move {
+            Html(format!(
+                r#"
+                    <!DOCTYPE html>
+                    <html>
+                        <head></head>
+                        <body><div id="main"></div></body>
+                        {glue}
+                    </html>
+                "#,
+                glue = dioxus_liveview::interpreter_glue(&format!("ws://{listen_address}/ws"))
+            ))
+        }))
+        .route(
+            "/ws",
+            get(move |ws: WebSocketUpgrade| async move {
+                ws.on_upgrade(move |socket| async move {
+                    _ = view
+                        .launch(dioxus_liveview::axum_socket(socket), Root)
+                        .await;
+                })
+            }),
+        );
+
+    println!("Listening on http://{listen_address}");
+
+    axum::Server::bind(&listen_address.to_string().parse().unwrap())
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+#[cfg(not(feature = "liveview"))]
 fn main() {
     #[cfg(not(target_arch = "wasm32"))]
     dioxus_desktop::launch(Root);
@@ -10,21 +51,26 @@ fn main() {
     dioxus_web::launch(root);
 }
 
+#[cfg(feature = "liveview")]
 #[component]
 fn Root(cx: Scope) -> Element {
-    render! {
-        Router::<Route> {}
-    }
+    let history = LiveviewHistory::new(cx);
+    render! { Router::<Route> {
+        config: || RouterConfig::default().history(history),
+    } }
+}
+
+#[cfg(not(feature = "liveview"))]
+#[component]
+fn Root(cx: Scope) -> Element {
+    render! { Router::<Route> {} }
 }
 
 #[component]
 fn UserFrame(cx: Scope, user_id: usize) -> Element {
     render! {
-        pre {
-            "UserFrame{{\n\tuser_id:{user_id}\n}}"
-        }
-        div {
-            background_color: "rgba(0,0,0,50%)",
+        pre { "UserFrame{{\n\tuser_id:{user_id}\n}}" }
+        div { background_color: "rgba(0,0,0,50%)",
             "children:"
             Outlet::<Route> {}
         }
@@ -88,6 +134,16 @@ fn Route3(cx: Scope, dynamic: String) -> Element {
             to: Route::Route2 { user_id: 8888 },
             "hello world link"
         }
+        button {
+            disabled: !navigator.can_go_back(),
+            onclick: move |_| { navigator.go_back(); },
+            "go back"
+        }
+        button {
+            disabled: !navigator.can_go_forward(),
+            onclick: move |_| { navigator.go_forward(); },
+            "go forward"
+        }
         button {
             onclick: move |_| { navigator.push("https://www.google.com"); },
             "google link"