Fix caching problem when loading CSS

hotwired · Dec 5, 2024 · 8360939 · 8360939
1 parent 16a9d02
commit 8360939
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/app/assets/javascripts/hotwire_spark.js b/app/assets/javascripts/hotwire_spark.js
@@ -531,9 +531,9 @@ var HotwireSpark = (function () {
     });
   }
   async function reloadHtmlDocument() {
-    let currentUrl = urlWithParams(window.location.href, {
+    let currentUrl = cacheBustedUrl(urlWithParams(window.location.href, {
       hotwire_spark: "true"
-    });
+    }));
     const response = await fetch(currentUrl);
     const fetchedHTML = await response.text();
     const parser = new DOMParser();
@@ -3626,7 +3626,7 @@ var HotwireSpark = (function () {
       return new Promise(resolve => {
         const href = link.getAttribute("href");
         const newLink = this.#findNewLinkFor(link);
-        newLink.href = cacheBustedUrl(newLink.href);
+        newLink.setAttribute("href", cacheBustedUrl(newLink.getAttribute("href")));
         newLink.onload = () => {
           log(`\t${href}`);
           resolve();
@@ -3640,7 +3640,7 @@ var HotwireSpark = (function () {
       });
     }
     #withoutAssetDigest(url) {
-      return url.replace(/-[^-]+\.css$/, ".css");
+      return url.replace(/-[^-]+\.css.*$/, ".css");
     }
   }
 

diff --git a/app/assets/javascripts/hotwire_spark.min.js b/app/assets/javascripts/hotwire_spark.min.js
diff --git a/app/assets/javascripts/hotwire_spark.min.js.map b/app/assets/javascripts/hotwire_spark.min.js.map
diff --git a/app/javascript/hotwire_spark/helpers.js b/app/javascript/hotwire_spark/helpers.js
@@ -15,7 +15,7 @@ export function cacheBustedUrl(urlString) {
 }
 
 export async function reloadHtmlDocument() {
-  let currentUrl = urlWithParams(window.location.href, { hotwire_spark: "true" })
+  let currentUrl = cacheBustedUrl(urlWithParams(window.location.href, { hotwire_spark: "true" }))
   const response = await fetch(currentUrl)
   const fetchedHTML = await response.text()
   const parser = new DOMParser()

diff --git a/app/javascript/hotwire_spark/reloaders/css_reloader.js b/app/javascript/hotwire_spark/reloaders/css_reloader.js
@@ -45,8 +45,7 @@ export class CssReloader {
     return new Promise(resolve => {
       const href = link.getAttribute("href")
       const newLink = this.#findNewLinkFor(link)
-
-      newLink.href = cacheBustedUrl(newLink.href)
+      newLink.setAttribute("href", cacheBustedUrl(newLink.getAttribute("href")))
       newLink.onload = () => {
         log(`\t${href}`)
         resolve()
@@ -62,6 +61,6 @@ export class CssReloader {
   }
 
   #withoutAssetDigest(url) {
-    return url.replace(/-[^-]+\.css$/, ".css")
+    return url.replace(/-[^-]+\.css.*$/, ".css")
   }
 }