fix: hotreloading files with multiple templates, asset hotreloading

packages/web/Cargo.toml

@@ -24,7 +24,11 @@ wasm-bindgen-futures = "0.4.29"
 tracing = { workspace = true }
 rustc-hash = { workspace = true }
 console_error_panic_hook = { version = "0.1.7", optional = true }
-futures-util = { workspace = true, features = ["std", "async-await", "async-await-macro"] }
+futures-util = { workspace = true, features = [
+    "std",
+    "async-await",
+    "async-await-macro",
+] }
 futures-channel = { workspace = true }
 serde_json = { version = "1.0" }
 serde = { version = "1.0" }
@@ -43,35 +47,23 @@ features = [
     "Text",
     "Window",
     "DataTransfer",
-    "console"
+    "console",
+    "NodeList",
 ]
 
 [features]
 default = ["panic_hook", "mounted", "file_engine", "hot_reload", "eval"]
 panic_hook = ["console_error_panic_hook"]
-hydrate = [
-    "web-sys/Comment",
-]
-mounted = [
-    "web-sys/Element",
-    "dioxus-html/mounted"
-]
+hydrate = ["web-sys/Comment"]
+mounted = ["web-sys/Element", "dioxus-html/mounted"]
 file_engine = [
     "web-sys/File",
     "web-sys/FileList",
     "web-sys/FileReader",
-    "async-trait"
-]
-hot_reload = [
-    "web-sys/MessageEvent",
-    "web-sys/WebSocket",
-    "web-sys/Location",
-]
-eval = [
-    "dioxus-html/eval",
-    "serde-wasm-bindgen",
-    "async-trait"
+    "async-trait",
 ]
+hot_reload = ["web-sys/MessageEvent", "web-sys/WebSocket", "web-sys/Location"]
+eval = ["dioxus-html/eval", "serde-wasm-bindgen", "async-trait"]
 
 [dev-dependencies]
 dioxus = { workspace = true }

packages/web/src/hot_reload.rs

@@ -3,6 +3,7 @@
 use futures_channel::mpsc::UnboundedReceiver;
 
 use dioxus_core::Template;
+use web_sys::{console, Element};
 
 pub(crate) fn init() -> UnboundedReceiver<Template> {
     use wasm_bindgen::closure::Closure;
@@ -29,13 +30,38 @@ pub(crate) fn init() -> UnboundedReceiver<Template> {
 
     // change the rsx when new data is received
     let cl = Closure::wrap(Box::new(move |e: MessageEvent| {
+        console::log_1(&e.clone().into());
+
         if let Ok(text) = e.data().dyn_into::<js_sys::JsString>() {
             let string: String = text.into();
-            let val = serde_json::from_str::<serde_json::Value>(&string).unwrap();
-            // leak the value
-            let val: &'static serde_json::Value = Box::leak(Box::new(val));
-            let template: Template = Template::deserialize(val).unwrap();
-            tx.unbounded_send(template).unwrap();
+
+            if let Ok(val) = serde_json::from_str::<serde_json::Value>(&string) {
+                // leak the value
+                let val: &'static serde_json::Value = Box::leak(Box::new(val));
+                let template: Template = Template::deserialize(val).unwrap();
+                tx.unbounded_send(template).unwrap();
+            }
+        }
+
+        // it might be triggering a reload of assets
+        // invalidate all the stylesheets on the page
+        let links = web_sys::window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .query_selector_all("link[rel=stylesheet]")
+            .unwrap();
+
+        console::log_1(&links.clone().into());
+
+        for x in 0..links.length() {
+            use wasm_bindgen::JsCast;
+            use web_sys::Element;
+            console::log_1(&x.clone().into());
+
+            let link: Element = links.get(x).unwrap().unchecked_into();
+            let href = link.get_attribute("href").unwrap();
+            link.set_attribute("href", &format!("{}?{}", href, js_sys::Math::random()));
         }
     }) as Box<dyn FnMut(MessageEvent)>);