Support for automatically refreshing CSS
This commit is contained in:
parent
6e634e5d64
commit
c4fee4b0cf
29
package-lock.json
generated
29
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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>`;
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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: () => ``,
|
||||
});
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user