refresh-styles.stimulus.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

refresh-styles.stimulus.ts
View Options

	import { Controller } from "stimulus";

	function make_new_link() {
	const new_link = document.createElement("link");
	new_link.rel = "stylesheet";
	new_link.href = `/dist/main.css?${Math.random()}+${Math.random()}`;
	new_link.type = "text/css";
	return new_link;
	}

	function getStyles() {
	return Array.from(document.querySelectorAll("head link")).filter(
	(e: HTMLLinkElement) => new URL(e.href).pathname == "/dist/main.css"
	);
	}

	function cleanup_css() {
	getStyles()
	.slice(0, -1)
	.forEach((style) => {
	style.parentElement.removeChild(style);
	});
	}

	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());
	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
	this.socket = new WebSocket(`ws://localhost:${port as number}`);
	this.socket.onmessage = async (message) => {
	if (message.data === "css") {
	const new_link = make_new_link();
	new_link.onload = cleanup_css;
	document.querySelector("head").appendChild(new_link);
	}
	};
	document.documentElement.addEventListener("turbo:morph", cleanup_css);
	}

	async disconnect() {
	this.socket.close();
	document.documentElement.removeEventListener("turbo:morph", cleanup_css);
	}
	}