Move JS to individual files Inlining increases HTML file size, especially long-run due to files not being able to be cached.

Changes

7 changed files (+76/-30)

• deno.jsonc
  • @@ -3,7 +3,7 @@ //
    // SPDX-License-Identifier: CC0-1.0 { // Local $DENO_DIR on CI - "exclude": [".deno"], + "exclude": [".deno", "docs/.dist"], "compilerOptions": { "noUnusedLocals": true },
• deno.lock
  • @@ -4,6 +4,8 @@ "redirects": {
    "https://deno.land/std/encoding/base64.ts": "https://deno.land/std@0.221.0/encoding/base64.ts" }, "remote": { + "https://deno.land/std@0.119.0/encoding/hex.ts": "5bc7df19af498c315cdaba69e2fce1b2aef5fc57344e8c21c08991aa8505a260", + "https://deno.land/std@0.119.0/hash/md5.ts": "957791b9052b40cfa211eeb755a76ad6ad12177387ba84b47c4bc8be4edd60c8", "https://deno.land/std@0.159.0/encoding/ascii85.ts": "f2b9cb8da1a55b3f120d3de2e78ac993183a4fd00dfa9cb03b51cf3a75bc0baa", "https://deno.land/std@0.221.0/assert/_constants.ts": "a271e8ef5a573f1df8e822a6eb9d09df064ad66a4390f21b3e31f820a38e0975", "https://deno.land/std@0.221.0/assert/_diff.ts": "4bf42969aa8b1a33aaf23eb8e478b011bfaa31b82d85d2ff4b5c4662d8780d2b",
• deps/deno.land/std/hash/md5.ts (new)
  • @@ -0,0 +1,5 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + export * from "https://deno.land/std@0.119.0/hash/md5.ts";
• internal/page_builder/default_theme/context.ts
  • @@ -41,6 +41,11 @@ /**
    * Copy file to the output directory. */ copyFile(file: FileReader): void; + + /** + * Write file to the given path. + */ + writeFile(path: readonly string[], contents: Uint8Array): void; } export interface DocumentBuildContext extends BuildContext {
• internal/page_builder/default_theme/mod.ts
  • @@ -330,25 +330,32 @@ const resolveURL = this.#resolveURL;
    const writeTasks: Promise<unknown>[] = []; - const html = toHtml(notFoundPage({ - context: { - documentTree, - language: documentTree.defaultLanguage, - assets, - websiteTitle: this.#siteName, - copyright: this.#copyright, - resolveURL(to) { - return resolveURL(to, []); + const html = toHtml( + notFoundPage({ + context: { + documentTree, + language: documentTree.defaultLanguage, + assets, + websiteTitle: this.#siteName, + copyright: this.#copyright, + resolveURL(to) { + return resolveURL(to, []); + }, + copyFile(file) { + writeTasks.push( + file.read().then((bytes) => { + fileSystemWriter.write(file.path, bytes); + }), + ); + }, + writeFile(path, contents) { + writeTasks.push( + fileSystemWriter.write(path, contents), + ); + }, }, - copyFile(file) { - writeTasks.push( - file.read().then((bytes) => { - fileSystemWriter.write(file.path, bytes); - }), - ); - }, - }, - })); + }), + ); await Promise.all(writeTasks);
  • @@ -533,6 +540,11 @@ fileSystemWriter.write(file.path, bytes);
    }), ); }, + writeFile(path, contents) { + writeTasks.push( + fileSystemWriter.write(path, contents), + ); + }, }; if (isObsidianMarkdown(item) || isJSONCanvas(item)) {
  • @@ -602,10 +614,12 @@ }
    }, ); - const html = toHtml(jsonCanvasPage({ - content, - context, - })); + const html = toHtml( + jsonCanvasPage({ + content, + context, + }), + ); writeTasks.push( fileSystemWriter.write([
  • @@ -630,11 +644,13 @@ },
    }); const toc = tocMut(hast); - const html = toHtml(markdownPage({ - context, - content: styleMarkdownContent(hast), - tocItems: toc, - })); + const html = toHtml( + markdownPage({ + context, + content: styleMarkdownContent(hast), + tocItems: toc, + }), + ); writeTasks.push( fileSystemWriter.write([
• internal/page_builder/default_theme/pages/json_canvas.tsx
  • @@ -526,7 +526,9 @@
    content: JSONCanvas<Hast.Nodes>; } - export function jsonCanvasPage({ content, context }: JsonCanvasPageProps) { + export function jsonCanvasPage( + { content, context }: JsonCanvasPageProps, + ) { return h(null, [ { type: "doctype" }, template({
• internal/page_builder/default_theme/pages/template.tsx
  • @@ -5,6 +5,7 @@
    /** @jsx h */ import { type Child, h } from "../../../../deps/esm.sh/hastscript/mod.ts"; + import { Md5 } from "../../../../deps/deno.land/std/hash/md5.ts"; import type { BuildContext, DocumentBuildContext } from "../context.ts";
  • @@ -19,6 +20,21 @@
    export function template({ body, context, scripts = [] }: TemplateProps) { const { language, websiteTitle, assets, resolveURL } = context; const document = "document" in context ? context.document : null; + + const scriptHrefs = scripts.map((script) => { + const binary = new TextEncoder().encode(script); + + const md5 = new Md5(); + + md5.update(binary); + + const name = md5.toString("hex"); + const path = [".assets", `${name}.js`]; + + context.writeFile(path, binary); + + return context.resolveURL(path); + }); return ( <html lang={language}>
  • @@ -78,12 +94,12 @@ />
    ), ]) )} + {scriptHrefs.map((href) => <script src={href} type="module" defer />)} </head> {h( "body", {}, body, - ...scripts.map((script) => <script>{script}</script>), )} </html> );