watch mode and readme

alshdavid · alshdavid · commit ccb18abfdebc · 2024-11-28T04:02:31.000Z
diff --git a/README.md b/README.md
@@ -26,12 +26,13 @@ Arguments:
 Options:
   -a, --address <ADDRESS>        [default: 0.0.0.0]
   -p, --port <PORT>              [default: 8080]
-      --spa                      
+      --spa                      Redirect requests to /index.html for Single Page Applications
   -c, --cache-time <CACHE_TIME>  Cache control time [default: 0]
   -H, --header <HEADERS>         Custom headers (Format "key:value")
       --cors                     Enable CORS header
       --no-cache                 Disable cache control header
   -Q, --quiet                    Don't print any logs to terminal
+  -w, --watch                    Watch folder for changes and trigger a browser reload
   -h, --help                     Print help
 ```
 
diff --git a/dist/home.html b/dist/home.html
@@ -1,21 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-
-<body>
-  <script type="module" src="./index.js"></script>
-  <!-- <script src=".http-server-rs/reload" type="application/javascript"></script> -->
-  <script>
-    new EventSource(".http-server-rs/reload").onmessage = (event) => {
-      console.log('update')
-    };
-  </script>
-</body>
-
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    hello worldddd
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/dist/index.js b/dist/index.js
@@ -1 +1 @@
-console.log('hi')
+console.log("foobar");
diff --git a/src/cli.rs b/src/cli.rs
@@ -14,6 +14,7 @@ pub struct CliCommand {
   #[arg(short = 'p', long = "port", default_value = "8080")]
   pub port: usize,
 
+  /// Redirect requests to /index.html for Single Page Applications
   #[arg(long = "spa")]
   pub spa: bool,
 
@@ -37,7 +38,7 @@ pub struct CliCommand {
   #[arg(short = 'Q', long = "quiet")]
   pub quiet: bool,
 
-  /// Watch folder and trigger a browser reload
+  /// Watch folder for changes and trigger a browser reload
   #[arg(short = 'w', long = "watch")]
   pub watch: bool,
 }
diff --git a/src/explorer/mod.rs b/src/explorer/mod.rs
@@ -25,6 +25,11 @@ use self::windows::get_meta_size;
 use crate::config::Config;
 
 const DIR_PAGE: &str = include_str!("./dir.hbs");
+const RELOAD_SCRIPT: &str = include_str!("./reload.mjs");
+
+pub fn reload_script() -> &'static str {
+  RELOAD_SCRIPT
+}
 
 pub fn render_directory_explorer(
   config: &Config,
diff --git a/src/explorer/reload.mjs b/src/explorer/reload.mjs
@@ -1,9 +1,5 @@
-const evtSource = new EventSource(".reload");
+const sse = new EventSource("/.http-server-rs/reload");
 
-evtSource.onmessage = (event) => {
-  const newElement = document.createElement("li");
-  const eventList = document.getElementById("list");
-
-  newElement.textContent = `message: ${event.data}`;
-  eventList.appendChild(newElement);
-};
+sse.onmessage = () => {
+  window.location.reload();
+};
diff --git a/src/main.rs b/src/main.rs
@@ -13,6 +13,7 @@ use std::path::PathBuf;
 use std::sync::Arc;
 
 use colored::Colorize;
+use explorer::reload_script;
 use explorer::render_directory_explorer;
 use fmt::Logger;
 use futures::TryStreamExt;
@@ -111,6 +112,15 @@ async fn main_async() -> anyhow::Result<()> {
         let mut file_path = config.serve_dir_abs.join(req_path.clone());
 
         // If the watcher is enabled, return an event stream to the client to notify changes
+        if req_path == ".http-server-rs/reload.js" {
+          return Ok(
+            res
+              .header("Content-Type", "application/javascript")
+              .status(200)
+              .body(Bytes::from(reload_script()).into())?,
+          );
+        }
+
         if req_path == ".http-server-rs/reload" {
           let trx_watch = trx_watch.clone();
 
@@ -127,7 +137,7 @@ async fn main_async() -> anyhow::Result<()> {
             let mut rx = trx_watch.subscribe();
             while let Some(changes) = rx.recv().await {
               let msg = format!(
-                "event:changed\ndata:{}\n\n",
+                "data:{}\n\n",
                 changes
                   .into_iter()
                   .map(|v| v.to_str().unwrap().to_string())
@@ -147,8 +157,7 @@ async fn main_async() -> anyhow::Result<()> {
               .header("Cache-Control", "no-cache")
               .header("Connection", "keep-alive")
               .status(hyper::StatusCode::OK)
-              .body(boxed_body)
-              .expect("not to fail"),
+              .body(boxed_body)?,
           );
         }
 
@@ -205,7 +214,7 @@ async fn main_async() -> anyhow::Result<()> {
 
         // Read file
         // TODO not sure why tokio file read doesn't work here
-        let Ok(contents) = fs::read(&file_path) else {
+        let Ok(mut contents) = fs::read(&file_path) else {
           return Ok(
             res
               .status(500)
@@ -214,6 +223,17 @@ async fn main_async() -> anyhow::Result<()> {
         };
 
         logger.println(format!("{} {}", "[200]".green().bold(), req.uri()));
+
+        if config.watch
+          && res
+            .headers_ref()
+            .unwrap()
+            .get("Content-Type")
+            .is_some_and(|h| h == "text/html")
+        {
+          contents.extend(format!("<script>{}</script>", reload_script()).as_bytes());
+        }
+
         Ok(res.status(200).body(Bytes::from(contents).into())?)
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-console.log('hi')`
	`1`	`+console.log("foobar");`