Support for automatically refreshing CSS

3 months ago · c4fee4b0cf
parent 6e634e5d64
commit c4fee4b0cf
5 changed files with 51 additions and 6 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,7 +15,7 @@
 				"@koa/router": "^12.0.1",
 				"@playwright/test": "^1.36.1",
 				"@sealcode/jdd": "^0.2.10",
-				"@sealcode/sealgen": "^0.11.6",
+				"@sealcode/sealgen": "^0.11.7",
 				"@sealcode/ts-predicates": "^0.4.3",
 				"@types/kill-port": "^2.0.0",
 				"get-port": "^7.0.0",
@ -1304,9 +1304,9 @@
 			}
 		},
 		"node_modules/@sealcode/sealgen": {
-			"version": "0.11.6",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.11.6.tgz",
-			"integrity": "sha512-6GGZi59aia7ou2bDmejQedDNLyzfoo05bFnGVlsWXuCOMCUhBXuWGlFe3wqkSr+340iyvZiXJvBSfXg3DatX2Q==",
+			"version": "0.11.7",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.11.7.tgz",
+			"integrity": "sha512-JpvVkBCaO2eNTvdRB3J6gs6enYCzMWByaDAj+KmLSifOUqcN1M4DQ5nzF6mAA8q0Aabwe7KDxSHb3b9rPMtYnw==",
 			"dependencies": {
 				"@koa/router": "^12.0.1",
 				"@sealcode/ts-predicates": "^0.4.3",
@ -1322,6 +1322,7 @@
 				"recursive-readdir": "^2.2.3",
 				"tempstream": "^0.3.0",
 				"tiny-glob": "^0.2.9",
+				"ws": "^8.16.0",
 				"yargs": "^17.6.2"
 			},
 			"bin": {
@ -11504,6 +11505,26 @@
 				"typedarray-to-buffer": "^3.1.5"
 			}
 		},
+		"node_modules/ws": {
+			"version": "8.16.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/package.json
+++ b/package.json
@ -36,7 +36,7 @@
 		"@koa/router": "^12.0.1",
 		"@playwright/test": "^1.36.1",
 		"@sealcode/jdd": "^0.2.10",
-		"@sealcode/sealgen": "^0.11.6",
+		"@sealcode/sealgen": "^0.11.7",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"@types/kill-port": "^2.0.0",
 		"get-port": "^7.0.0",
--- a/src/back/html.ts
+++ b/src/back/html.ts
@ -15,13 +15,14 @@ export type HTMLOptions = {
 	preserveScroll?: boolean;
 	morphing?: boolean;
 	navbar?: (ctx: BaseContext) => FlatTemplatable;
+	autoRefreshCSS?: boolean;
 };

 export default function html(
 	ctx: BaseContext,
 	title: string,
 	body: Templatable,
-	{ preserveScroll, morphing, navbar }: HTMLOptions = {},
+	{ preserveScroll, morphing, navbar, autoRefreshCSS }: HTMLOptions = {},
 	makeHead: (ctx: BaseContext, title: string) => Templatable = defaultHead
 ): Readable {
 	ctx.set("content-type", "text/html;charset=utf-8");
@ -36,6 +37,25 @@ export default function html(
 			</head>
 			<body>
 				${(navbar || default_navbar)(ctx)} ${body}
+				${autoRefreshCSS
+					? /* HTML */ `<script>
+							function refresh_css() {
+								Array.from(document.querySelectorAll("link"))
+									.filter(
+										(e) =>
+											new URL(e.href).pathname == "/dist/main.css"
+									)
+									.forEach((e) => {
+										const url = new URL(e.href);
+										url.search =
+											"?" + Math.random() + "" + Math.random();
+										e.href = url.toString();
+									});
+							}
+							const socket = new WebSocket("ws://localhost:60808");
+							socket.onmessage = refresh_css;
+					  </script>`
+					: ""}
 			</body>
 		</html>`;
 }
--- a/src/back/jdd-components/components.ts
+++ b/src/back/jdd-components/components.ts
@ -5,3 +5,6 @@ export const registry = new Registry();

 import { NiceBox } from "./nice-box/nice-box.jdd.js";
 registry.add("nice-box", NiceBox);
+
+import { MyAwesomeComponent } from "./my-awesome-component/my-awesome-component.jdd.js";
+registry.add("my-awesome-component", MyAwesomeComponent);
--- a/src/back/routes/components.sreact.tsx
+++ b/src/back/routes/components.sreact.tsx
@ -65,6 +65,7 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
 		return html(ctx, "Components", content, {
 			morphing: true,
 			preserveScroll: true,
+			autoRefreshCSS: true,
 			navbar: () => ``,
 		});
 	}