add axum live-reload example (dev-only)

Author: GlenDC

Cargo.toml

@@ -103,6 +103,14 @@ lto = "thin"
 name = "axum-hello"
 required-features = ["axum", "tracing"]
 
+[[example]]
+name = "axum-live-reload"
+required-features = ["axum", "tracing"]
+
+[[example]]
+name = "axum-activity-feed"
+required-features = ["axum", "tracing"]
+
 [[example]]
 name = "axum-test-suite"
 required-features = ["axum", "tracing"]

Makefile

@@ -62,6 +62,12 @@ update-deps:
 hello-axum:
 	cargo run --example axum-hello --features axum,tracing
 
+live-reload-axum:
+	cargo run --example axum-live-reload --features axum,tracing
+
+watch-live-reload-axum:
+	 RUST_LOG=debug cargo watch -x 'run --example axum-live-reload --features axum,tracing'
+
 activity-feed-axum:
 	cargo run --example axum-activity-feed --features axum,tracing
 

examples/axum-live-reload.rs

@@ -0,0 +1,107 @@
+use {
+    async_stream::stream,
+    axum::{
+        Router,
+        response::{Html, IntoResponse, Sse},
+        routing::get,
+    },
+    core::{convert::Infallible, error::Error, time::Duration},
+    datastar::{axum::ReadSignals, prelude::PatchElements},
+    serde::Deserialize,
+    tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt},
+};
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn Error>> {
+    tracing_subscriber::registry()
+        .with(
+            tracing_subscriber::EnvFilter::try_from_default_env().unwrap_or_else(|_| {
+                format!("{}=debug,tower_http=debug", env!("CARGO_CRATE_NAME")).into()
+            }),
+        )
+        .with(tracing_subscriber::fmt::layer())
+        .init();
+
+    let app = Router::new()
+        .route("/", get(index))
+        .route("/hello-world", get(hello_world));
+
+    #[cfg(debug_assertions)]
+    let app = app.route("/hotreload", get(hotreload));
+
+    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000")
+        .await
+        .unwrap();
+
+    tracing::debug!("listening on {}", listener.local_addr().unwrap());
+
+    axum::serve(listener, app).await.unwrap();
+
+    Ok(())
+}
+
+const INDEX_HTML: &str = include_str!("hello-world.html");
+
+#[cfg(not(debug_assertions))]
+async fn index() -> Html<&'static str> {
+    Html(INDEX_HTML)
+}
+
+#[cfg(debug_assertions)]
+async fn index() -> Html<&'static str> {
+    static MOD_INDEX_HTML: std::sync::LazyLock<&'static str> = std::sync::LazyLock::new(|| {
+        Box::new(INDEX_HTML.replace(
+            r##"<!-- hot reload -->"##,
+            r##"
+    <div id="hotreload" data-on-load="@get('/hotreload', {retryMaxCount: 1000,retryInterval:20, retryMaxWaitMs:200})" class="text-yellow-500">
+        <p>a minimal implementation of dev-only live reload added into axum hello example</p>
+    </div>"##
+        )).leak()
+    });
+    Html(&MOD_INDEX_HTML)
+}
+
+#[cfg(debug_assertions)]
+async fn hotreload() -> impl IntoResponse {
+    use std::sync::atomic;
+
+    // NOTE
+    // This only works if you develop with a single tab open only,
+    // in case you are testing with multiple UA's / Tabs at once
+    // you will need to expand this implementation by for example
+    // tracking against a date or version stored in a cookie
+    // or by some other means.
+
+    use datastar::prelude::ExecuteScript;
+    static ONCE: atomic::AtomicBool = atomic::AtomicBool::new(false);
+
+    Sse::new(stream! {
+        if !ONCE.swap(true, atomic::Ordering::SeqCst) {
+            let script = ExecuteScript::new("window.location.reload()");
+            let sse_event = script.write_as_axum_sse_event();
+            yield Ok::<_, Infallible>(sse_event);
+        }
+        std::future::pending().await
+    })
+}
+
+const MESSAGE: &str = "Hello, world!";
+
+#[derive(Deserialize)]
+pub struct Signals {
+    pub delay: u64,
+}
+
+async fn hello_world(ReadSignals(signals): ReadSignals<Signals>) -> impl IntoResponse {
+    Sse::new(stream! {
+        for i in 0..MESSAGE.len() {
+            let elements = format!("<div id='message'>{}</div>", &MESSAGE[0..i + 1]);
+            let patch = PatchElements::new(elements);
+            let sse_event = patch.write_as_axum_sse_event();
+
+            yield Ok::<_, Infallible>(sse_event);
+
+            tokio::time::sleep(Duration::from_millis(signals.delay)).await;
+        }
+    })
+}

examples/hello-world.html

@@ -8,6 +8,7 @@
     <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"></script>
 </head>
 <body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
+    <!-- hot reload -->
     <div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
         <div class="flex justify-between items-center">
             <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">