fix: hotreloading files with multiple templates, asset hotreloading

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)>);