Page MenuHomeSealhub
Files F7112938

refresh-styles.stimulus.ts
No OneTemporary
Actions

refresh-styles.stimulus.ts
View Options

import { Controller } from "stimulus";
function make_new_link(href: string) {
const new_link = document.createElement("link");
new_link.rel = "stylesheet";
new_link.href = href.split("?")[0] + `?${Math.random()}+${Math.random()}`;
new_link.type = "text/css";
return new_link;
}
function refresh_css() {
const actual_hrefs = new Set(
Array.from(document.querySelectorAll("head link[rel=stylesheet]")).map(
(e) => e?.getAttribute("href")?.split("?")[0]
)
);
return actual_hrefs.forEach((href: string) => {
const new_link = make_new_link(href);
const to_delete_after_load = Array.from(
document.querySelectorAll(
`head link[rel=stylesheet][href^="${href}"]`
)
);
new_link.onload = function () {
// delay to prevent flicker
setTimeout(() => {
to_delete_after_load.forEach((to_remove) => {
to_remove.remove();
});
}, 100);
};
document.querySelector("head")?.appendChild(new_link);
});
}
export default class RefreshStyles extends Controller {
socket: WebSocket;
async connect() {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const { port } = await fetch("/dist/notifier.json").then((r) =>
r.json()
);
try {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
this.socket = new WebSocket(`ws://localhost:${port as number}`);
} catch (e) {
console.error(e);
// eslint-disable-next-line no-console
console.warn(
"Not enabling auto style refresh due to the above error"
);
}
this.socket.onmessage = async (message) => {
if (message.data === "css") {
refresh_css();
}
};
document.documentElement.addEventListener("turbo:morph", refresh_css);
}
async disconnect() {
this.socket.close();
document.documentElement.removeEventListener(
"turbo:morph",
refresh_css
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Fri, Jul 4, 08:06 (5 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
798477
Default Alt Text
refresh-styles.stimulus.ts (1 KB)

Event Timeline