kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix old styles being visible, remove flash of unstyled content

Browse Source
This commit is contained in:
Kuba Orlik 2024-02-11 14:11:14 +01:00
parent b46f59be2e
commit 1b7e114460
1 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/back/html.ts
View File

@ -4,12 +4,24 @@ import { BaseContext } from "koa";
import { default as default_navbar } from "./routes/common/navbar.js"; import { default as default_navbar } from "./routes/common/navbar.js";
import { toKebabCase } from "js-convert-case"; import { toKebabCase } from "js-convert-case";
export const defaultHead = (ctx: BaseContext, title: string) => /* HTML */ `<title> export const defaultHead = (
${title} · ${ctx.$app.manifest.name} ctx: BaseContext,
</title> title: string,
options: HTMLOptions
) => /* HTML */ `<title>${title} · ${ctx.$app.manifest.name}</title>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<script async src="/dist/bundle.js"></script> <script async src="/dist/bundle.js"></script>
<link href="/dist/main.css" rel="stylesheet" type="text/css" />`; <link
href="/dist/main.css${options.autoRefreshCSS
? `?${Math.random()}${Math.random()}`
: ""}"
rel="stylesheet"
type="text/css"
/>
${options.morphing ? `<meta name="turbo-refresh-method" content="morph" />` : ""}
${options.preserveScroll
? `<meta name="turbo-refresh-scroll" content="preserve">`
: ""}`;
export type HTMLOptions = { export type HTMLOptions = {
preserveScroll?: boolean; preserveScroll?: boolean;
@ -22,22 +34,22 @@ export default function html(
ctx: BaseContext, ctx: BaseContext,
title: string, title: string,
body: Templatable, body: Templatable,
{ preserveScroll, morphing, navbar, autoRefreshCSS }: HTMLOptions = {}, htmlOptions: HTMLOptions = {},
makeHead: (ctx: BaseContext, title: string) => Templatable = defaultHead makeHead: (
ctx: BaseContext,
title: string,
options: HTMLOptions
) => Templatable = defaultHead
): Readable { ): Readable {
ctx.set("content-type", "text/html;charset=utf-8"); ctx.set("content-type", "text/html;charset=utf-8");
return tempstream/* HTML */ ` <!DOCTYPE html> return tempstream/* HTML */ ` <!DOCTYPE html>
<html lang="pl" class="title--${toKebabCase(title)}"> <html lang="pl" class="title--${toKebabCase(title)}">
<head> <head>
${makeHead(ctx, title)} ${makeHead(ctx, title, htmlOptions)}
${morphing ? `<meta name="turbo-refresh-method" content="morph" />` : ""}
${preserveScroll
? `<meta name="turbo-refresh-scroll" content="preserve">`
: ""}
</head> </head>
<body> <body>
${(navbar || default_navbar)(ctx)} ${body} ${(htmlOptions.navbar || default_navbar)(ctx)} ${body}
${autoRefreshCSS ${htmlOptions.autoRefreshCSS
? /* HTML */ `<script> ? /* HTML */ `<script>
function make_new_link() { function make_new_link() {
const new_link = document.createElement("link"); const new_link = document.createElement("link");
@ -55,30 +67,24 @@ export default function html(
); );
} }
function refresh_css() { function cleanup_css() {
const new_link = make_new_link(); console.log("clearing styles");
getStyles()
//only remove old css once the new one is loaded to prevent blink of unstyled content .slice(0, -1)
new_link.onload = () => { .forEach((style) => {
console.log("clearing styles"); style.parentElement.removeChild(style);
getStyles() });
.slice(0, -1)
.forEach((style) => {
console.log({ style, new_link });
if (style !== new_link) {
style.parentElement.removeChild(style);
}
});
};
document.querySelector("head").appendChild(new_link);
} }
document.documentElement.addEventListener( document.documentElement.addEventListener(
"turbo:morph", "turbo:morph",
refresh_css cleanup_css
); );
const socket = new WebSocket("ws://localhost:60808"); const socket = new WebSocket("ws://localhost:60808");
socket.onmessage = refresh_css; socket.onmessage = () => {
const new_link = make_new_link();
new_link.onload = cleanup_css;
document.querySelector("head").appendChild(new_link);
};
</script>` </script>`
: ""} : ""}
</body> </body>