Minify and Highlight client-side JavaScript code The size of JSONCanvas related code became unexpectedly big. The overall minification shrinks around 4kB (28.17kB -> 24.47kB). This `javascript` tagged template literal function also enables my Neovim tree-sitter to highlight the template string as a JavaScript code.

Changes

6 changed files (+418/-351)

• deno.lock
  • @@ -193,9 +193,16 @@ "https://deno.land/x/zstd_wasm@0.0.21/deno/zstd.deno.js": "189187a43a4bdc8d695ff2f6525c8d3461cbd715333123e502a6a3bd84c272b4",
    "https://deno.land/x/zstd_wasm@0.0.21/deno/zstd.encoded.wasm.ts": "87e04064657bf5082b47a709931f8eb3f0d2fe537a8c650cfb5c997b7b460d07", "https://deno.land/x/zstd_wasm@0.0.21/deno/zstd.ts": "ba3889ee2b11f73ae7c6192da2851ec5f037b5ae7e3afa4c9129f33e856616ec", "https://esm.sh/refractor@4.8.1/lib/all.js": "32aa6a41e8fe3e9688c2baa35e89e8bf9e048615264efc0eef03be269ed45a86", + "https://esm.sh/v135/@jridgewell/gen-mapping@0.3.5/denonext/gen-mapping.mjs": "e9040f0749f8adb05ee2c743cbd992aa5ba80d55198a573cfded20202c00182f", + "https://esm.sh/v135/@jridgewell/resolve-uri@3.1.2/denonext/resolve-uri.mjs": "6efe3879e3fe78cb5bc8f72cf14d0a3d1f57a02261ac9b35159b813a90cad08c", + "https://esm.sh/v135/@jridgewell/set-array@1.2.1/denonext/set-array.mjs": "3267aabe6f860f4ddd92e88c5a2e84231f30ce46fa51211bcdaf089ce84976ff", + "https://esm.sh/v135/@jridgewell/source-map@0.3.6/denonext/source-map.mjs": "32233cc47f7faec54413b956bfcfa7f72d93220c23516afdc5842c7bc9947e62", + "https://esm.sh/v135/@jridgewell/sourcemap-codec@1.4.15/denonext/sourcemap-codec.mjs": "29073b55440930edcd5fcdd6cb59ed0f72772f8387bb7b5ee3763fb3d6db81ae", + "https://esm.sh/v135/@jridgewell/trace-mapping@0.3.25/denonext/trace-mapping.mjs": "874302e64079c985afcb28413c4d9067cd274be32af4e2daa47fccea531f6e5e", "https://esm.sh/v135/@shelf/fast-uslug@1.0.0": "46107bc12821cd3fd8605a1a837fc9288a254d8e4e406126059b5a6031695ad0", "https://esm.sh/v135/@shelf/fast-uslug@1.0.0/denonext/fast-uslug.mjs": "d140f64633d7ede6e407d8b9ea3236b6c614da96c5fce03297f353e735106cf0", "https://esm.sh/v135/@ungap/structured-clone@1.2.0/denonext/structured-clone.mjs": "e683ab48ef7a3afd3bce9d1589d14177ddbdbf76fa1483524dddbeb6b142469f", + "https://esm.sh/v135/acorn@8.11.3/denonext/acorn.mjs": "4bbd9807b0344b668da891947367e36ee3b11af74f72cc1497c72c5c52fbf8b3", "https://esm.sh/v135/ccount@2.0.1/denonext/ccount.mjs": "7b32092651a866fcc992c028982ce5e911356da7653baa3febb1a8ccb93e30f8", "https://esm.sh/v135/character-entities-html4@2.1.0/denonext/character-entities-html4.mjs": "0b4e64d1b0152acbeec6d854eadce6ceb2de05b0f459ad47485afa206f745f10", "https://esm.sh/v135/character-entities-legacy@3.0.0/denonext/character-entities-legacy.mjs": "5da76ada1554e4956dc6b702ba92b56a3faf158b24bf45279c522e85f5d9cd21",
  • @@ -609,6 +616,8 @@ "https://esm.sh/v135/temml@0.10.24": "94a01db5da23c881c2c54f9bf112d319c68d7ec3cc23fe1ffc980bacb2a7c466",
    "https://esm.sh/v135/temml@0.10.24/denonext/dist/temml.js": "afbf78726dea9ca3a016f1fa69db100535f4ad819bc2c637be4f304d9ffb6551", "https://esm.sh/v135/temml@0.10.24/denonext/temml.mjs": "bfe9e77bf34fe3ed54c31e2662e632c54f53b576a53efc9b60d57bbe9ccd830b", "https://esm.sh/v135/temml@0.10.24/dist/temml.mjs": "ee16ff1f4c69b9df8ada84d5800536f3ab620098918b8100262df773f248b509", + "https://esm.sh/v135/terser@5.31.0": "d93fafea5f2c7e50c427e4633ef78e84e4c84967358e162da9ea437fe3620a74", + "https://esm.sh/v135/terser@5.31.0/denonext/terser.mjs": "4e1b4ef2962b8ffb25f45b2dfeec05a18dee0e45843bcbf1d3b7c06bff4bc62c", "https://esm.sh/v135/trim-lines@3.0.1/denonext/trim-lines.mjs": "f01a20253341eb2554f307ab05bc9cd93d6f33bcbb24fde2fc9fcd857564283e", "https://esm.sh/v135/unist-util-find@3.0.0": "6dca4026bd2aaeb2cf49846a5e6a39b37308e8d7a132b1aef128b6fe6d827f9f", "https://esm.sh/v135/unist-util-find@3.0.0/denonext/unist-util-find.mjs": "90382cb0c4e4dfde6f1d4b03574ad4a23e7fe5863980edbd0aa44a8c5c1d5d2e",
• deps/esm.sh/terser/mod.ts (new)
  • @@ -0,0 +1,5 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + export * from "https://esm.sh/v135/terser@5.31.0";
• page_builder/default_theme/pages/json_canvas.tsx
  • @@ -11,6 +11,7 @@ import type { JSONCanvas } from "../../../content_parser/json_canvas/types.ts";
    import type { BuildContext } from "../context.ts"; import { buildClasses, css, join } from "../css.ts"; + import { javascript } from "../script.ts"; import { lucideIconStyles, zoomIn, zoomOut } from "../icons/lucide.tsx"; import { layout, layoutScript, layoutStyles } from "../widgets/layout.tsx";
  • @@ -158,362 +159,366 @@ jsonCanvasStyles,
    ownStyles, ); - const ownScript = ` - let scale = 1.0; - const SCALE_MIN = 0.3; - const SCALE_MAX = 2.0; - let tx = 0.0; - let ty = 0.0; - const DRAG_NONE = 0; - const DRAG_IDLE = 1; - const DRAG_DRAGGING = 2; - let dragState = DRAG_NONE; - let vx = 0; - let vy = 0; - let vw = 0; - let vh = 0; - const TOUCH_NONE = 0; - const TOUCH_PAN = 1; - const TOUCH_ZOOM = 2; - let touchState = { type: TOUCH_NONE }; + const ownScript = javascript` + function enchanceJSONCanvas() { + let scale = 1.0; + const SCALE_MIN = 0.3; + const SCALE_MAX = 2.0; + let tx = 0.0; + let ty = 0.0; + const DRAG_NONE = 0; + const DRAG_IDLE = 1; + const DRAG_DRAGGING = 2; + let dragState = DRAG_NONE; + let vx = 0; + let vy = 0; + let vw = 0; + let vh = 0; + const TOUCH_NONE = 0; + const TOUCH_PAN = 1; + const TOUCH_ZOOM = 2; + let touchState = { type: TOUCH_NONE }; - const scaleLabel = document.getElementById("__macana_jc_scale"); + const scaleLabel = document.getElementById("__macana_jc_scale"); - function setScale(v) { - scale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, v)); + function setScale(v) { + scale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, v)); - if (scaleLabel) { - scaleLabel.textContent = Math.round(scale * 100) + "%"; - } - } + if (scaleLabel) { + scaleLabel.textContent = Math.round(scale * 100) + "%"; + } + } - for (const child of document.getElementsByClassName("${c.scrollableChild}")) { - if (child.scrollHeight !== child.clientHeight) { - child.addEventListener("wheel", ev => { - if (!ev.ctrlKey) { - ev.stopPropagation(); + for (const child of document.getElementsByClassName("${c.scrollableChild}")) { + if (child.scrollHeight !== child.clientHeight) { + child.addEventListener("wheel", ev => { + if (!ev.ctrlKey) { + ev.stopPropagation(); + } + }); + child.addEventListener("touchstart", ev => { + ev.stopPropagation(); + }); + child.addEventListener("touchmove", ev => { + ev.stopPropagation(); + }); + child.addEventListener("touchend", ev => { + ev.stopPropagation(); + }); + } else { + child.style.touchAction = "none"; } - }); - child.addEventListener("touchstart", ev => { - ev.stopPropagation(); - }); - child.addEventListener("touchmove", ev => { - ev.stopPropagation(); - }); - child.addEventListener("touchend", ev => { - ev.stopPropagation(); - }); - } else { - child.style.touchAction = "none"; - } - } + } - const container = document.getElementById("__macana_jc_c"); - if (container) { - container.classList.add("${c.gestureEnabledContainer}"); + const container = document.getElementById("__macana_jc_c"); + if (container) { + container.classList.add("${c.gestureEnabledContainer}"); - const rect = container.getBoundingClientRect(); - vx = rect.x; - vy = rect.y; - vw = rect.width; - vh = rect.height; + const rect = container.getBoundingClientRect(); + vx = rect.x; + vy = rect.y; + vw = rect.width; + vh = rect.height; - const ro = new ResizeObserver(entries => { - const rect = container.getBoundingClientRect(); - vx = rect.x; - vy = rect.y; - vw = rect.width; - vh = rect.height; - }); - ro.observe(container); + const ro = new ResizeObserver(entries => { + const rect = container.getBoundingClientRect(); + vx = rect.x; + vy = rect.y; + vw = rect.width; + vh = rect.height; + }); + ro.observe(container); - container.style.overflow = "hidden"; + container.style.overflow = "hidden"; - container.addEventListener("keydown", ev => { - if (ev.target !== ev.currentTarget) { - return; - } + container.addEventListener("keydown", ev => { + if (ev.target !== ev.currentTarget) { + return; + } - switch (ev.key) { - case "-": - setScale(scale - 0.05); - break; - case "+": - setScale(scale + 0.05); - break; - case "ArrowLeft": - tx += 10 / scale; - break; - case "ArrowRight": - tx -= 10 / scale; - break; - case "ArrowUp": - ty += 10 / scale; - break; - case "ArrowDown": - ty -= 10 / scale; - break; - default: - return; - } + switch (ev.key) { + case "-": + setScale(scale - 0.05); + break; + case "+": + setScale(scale + 0.05); + break; + case "ArrowLeft": + tx += 10 / scale; + break; + case "ArrowRight": + tx -= 10 / scale; + break; + case "ArrowUp": + ty += 10 / scale; + break; + case "ArrowDown": + ty -= 10 / scale; + break; + default: + return; + } - ev.preventDefault(); - ev.stopPropagation(); - applyTransformToCanvas(); - }); + ev.preventDefault(); + ev.stopPropagation(); + applyTransformToCanvas(); + }); - container.addEventListener("pointermove", ev => { - if (!(ev.buttons & 4 || dragState === DRAG_DRAGGING)) { - return; - } + container.addEventListener("pointermove", ev => { + if (!(ev.buttons & 4 || dragState === DRAG_DRAGGING)) { + return; + } - ev.preventDefault(); - ev.stopPropagation(); + ev.preventDefault(); + ev.stopPropagation(); - tx += ev.movementX / scale; - ty += ev.movementY / scale; - applyTransformToCanvas(); - }); + tx += ev.movementX / scale; + ty += ev.movementY / scale; + applyTransformToCanvas(); + }); - container.addEventListener("pointerdown", ev => { - if (dragState === DRAG_IDLE) { - ev.preventDefault(); - ev.stopPropagation(); - dragState = DRAG_DRAGGING; - syncCursor(); - } - }); + container.addEventListener("pointerdown", ev => { + if (dragState === DRAG_IDLE) { + ev.preventDefault(); + ev.stopPropagation(); + dragState = DRAG_DRAGGING; + syncCursor(); + } + }); - container.addEventListener("pointerup", ev => { - if (dragState === DRAG_DRAGGING) { - ev.preventDefault(); - ev.stopPropagation(); - dragState = DRAG_IDLE; - syncCursor(); - } - }); + container.addEventListener("pointerup", ev => { + if (dragState === DRAG_DRAGGING) { + ev.preventDefault(); + ev.stopPropagation(); + dragState = DRAG_IDLE; + syncCursor(); + } + }); - container.addEventListener("wheel", ev => { - ev.preventDefault(); - if (ev.ctrlKey) { - let deltaY = ev.deltaY; - switch (ev.deltaMode) { - case 1: - deltaY *= 15; - break; - case 2: - deltaY *= 100; - break; - } + container.addEventListener("wheel", ev => { + ev.preventDefault(); + if (ev.ctrlKey) { + let deltaY = ev.deltaY; + switch (ev.deltaMode) { + case 1: + deltaY *= 15; + break; + case 2: + deltaY *= 100; + break; + } - const prevScale = scale; - setScale(scale * (1 - deltaY * 0.01)); + const prevScale = scale; + setScale(scale * (1 - deltaY * 0.01)); - if (vw > 0 && vh > 0) { - let offsetX = ev.offsetX; - let offsetY = ev.offsetY; - if (ev.target !== ev.currentTarget) { - offsetX = ev.clientX - vx; - offsetY = ev.clientY - vy; + if (vw > 0 && vh > 0) { + let offsetX = ev.offsetX; + let offsetY = ev.offsetY; + if (ev.target !== ev.currentTarget) { + offsetX = ev.clientX - vx; + offsetY = ev.clientY - vy; + } + const px = offsetX - vw * 0.5; + const py = offsetY - vh * 0.5; + tx += px / scale - px / prevScale; + ty += py / scale - py / prevScale; + } + } else { + tx -= ev.deltaX / scale; + ty -= ev.deltaY / scale; } - const px = offsetX - vw * 0.5; - const py = offsetY - vh * 0.5; - tx += px / scale - px / prevScale; - ty += py / scale - py / prevScale; - } - } else { - tx -= ev.deltaX / scale; - ty -= ev.deltaY / scale; - } - applyTransformToCanvas(); - }, { passive: false }); + applyTransformToCanvas(); + }, { passive: false }); - container.addEventListener("touchstart", ev => { - const firstTouch = ev.touches.item(0); - if (!firstTouch) { - return; - } - - if (ev.touches.length >= 2) { - const dist = getAvgTouchDist(ev.touches); - if (dist === null) { - return; - } - touchState = { - type: TOUCH_ZOOM, - initialScale: scale, - initialDist: dist, - }; - return; - } + container.addEventListener("touchstart", ev => { + const firstTouch = ev.touches.item(0); + if (!firstTouch) { + return; + } - touchState = { - type: TOUCH_PAN, - initialTouch: firstTouch, - initialX: tx, - initialY: ty, - }; - }); + if (ev.touches.length >= 2) { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + touchState = { + type: TOUCH_ZOOM, + initialScale: scale, + initialDist: dist, + }; + return; + } - container.addEventListener("touchend", ev => { - switch (ev.touches.length) { - case 0: - touchState = { type: TOUCH_NONE }; - return; - case 1: touchState = { type: TOUCH_PAN, - initialTouch: ev.touches.item(0), + initialTouch: firstTouch, initialX: tx, initialY: ty, }; - return; - case 2: { - const dist = getAvgTouchDist(ev.touches); - if (dist === null) { - return; + }); + + container.addEventListener("touchend", ev => { + switch (ev.touches.length) { + case 0: + touchState = { type: TOUCH_NONE }; + return; + case 1: + touchState = { + type: TOUCH_PAN, + initialTouch: ev.touches.item(0), + initialX: tx, + initialY: ty, + }; + return; + case 2: { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + + touchState = { + type: TOUCH_ZOOM, + initialScale: scale, + initialDist: dist, + }; + return; + } } + }); - touchState = { - type: TOUCH_ZOOM, - initialScale: scale, - initialDist: dist, - }; - return; - } + container.addEventListener("touchcancel", ev => { + touchState = { type: TOUCH_NONE }; + }); + + container.addEventListener("touchmove", ev => { + switch (touchState.type) { + case TOUCH_PAN: { + const touch = ev.touches.item(0); + tx = touchState.initialX + (touch.clientX - touchState.initialTouch.clientX) / scale; + ty = touchState.initialY + (touch.clientY - touchState.initialTouch.clientY) / scale; + applyTransformToCanvas(); + return; + } + case TOUCH_ZOOM: { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + + setScale(touchState.initialScale * (dist / touchState.initialDist)); + applyTransformToCanvas(); + return; + } + } + }); } - }); - container.addEventListener("touchcancel", ev => { - touchState = { type: TOUCH_NONE }; - }); + function getAvgTouchDist(touches) { + let px = null; + let py = null; + let tx = 0; + let ty = 0; - container.addEventListener("touchmove", ev => { - switch (touchState.type) { - case TOUCH_PAN: { - const touch = ev.touches.item(0); - tx = touchState.initialX + (touch.clientX - touchState.initialTouch.clientX) / scale; - ty = touchState.initialY + (touch.clientY - touchState.initialTouch.clientY) / scale; - applyTransformToCanvas(); - return; - } - case TOUCH_ZOOM: { - const dist = getAvgTouchDist(ev.touches); - if (dist === null) { - return; + for (let i = 0, touch; touch = touches.item(i); i++) { + if (px === null || py === null) { + px = touch.clientX; + py = touch.clientY; } - setScale(touchState.initialScale * (dist / touchState.initialDist)); - applyTransformToCanvas(); - return; + tx += touch.clientX; + ty += touch.clientY; } - } - }); - } - function getAvgTouchDist(touches) { - let px = null; - let py = null; - let tx = 0; - let ty = 0; + const l = touches.length; + if (px === null || py === null || !l) { + return null; + } - for (let i = 0, touch; touch = touches.item(i); i++) { - if (px === null || py === null) { - px = touch.clientX; - py = touch.clientY; + return Math.sqrt(Math.pow(px - tx / l, 2) + Math.pow(py - ty / l, 2)); } - tx += touch.clientX; - ty += touch.clientY; - } + function syncCursor() { + const style = dragState === DRAG_IDLE ? "grab" + : dragState === DRAG_DRAGGING ? "grabbing" + : "auto"; - const l = touches.length; - if (px === null || py === null || !l) { - return null; - } + document.body.style.cursor = style; + } - return Math.sqrt(Math.pow(px - tx / l, 2) + Math.pow(py - ty / l, 2)); - } + const canvas = document.getElementById("__macana_jc_t"); + if (canvas) { + if (vw > 0 && vh > 0) { + const rect = canvas.getBoundingClientRect(); - function syncCursor() { - const style = dragState === DRAG_IDLE ? "grab" - : dragState === DRAG_DRAGGING ? "grabbing" - : "auto"; + setScale(Math.min(vw / rect.width, vh / rect.height)); + } - document.body.style.cursor = style; - } + canvas.style.position = "absolute"; + canvas.style.top = "50%"; + canvas.style.left = "50%"; + } - const canvas = document.getElementById("__macana_jc_t"); - if (canvas) { - if (vw > 0 && vh > 0) { - const rect = canvas.getBoundingClientRect(); + function applyTransformToCanvas() { + if (!canvas) { + return; + } - setScale(Math.min(vw / rect.width, vh / rect.height)); - } + canvas.style.transform = "translate(-50%, -50%)" + + \` scale(\${scale.toFixed(8)})\` + + \` translate(\${tx}px,\${ty}px)\`; + } - canvas.style.position = "absolute"; - canvas.style.top = "50%"; - canvas.style.left = "50%"; - } + const controls = document.getElementById("__macana_jc_cs"); + if (controls) { + controls.style.display = ""; + } - function applyTransformToCanvas() { - if (!canvas) { - return; - } + const zoomInButton = document.getElementById("__macana_jc_in"); + if (zoomInButton) { + zoomInButton.addEventListener("click", ev => { + ev.preventDefault(); + setScale(scale + 0.1); + applyTransformToCanvas(); + }); + } - canvas.style.transform = "translate(-50%, -50%)" - + \` scale(\${scale.toFixed(8)})\` - + \` translate(\${tx}px,\${ty}px)\`; - } + const zoomOutButton = document.getElementById("__macana_jc_out"); + if (zoomOutButton) { + zoomOutButton.addEventListener("click", ev => { + ev.preventDefault(); + setScale(scale - 0.1); + applyTransformToCanvas(); + }); + } - const controls = document.getElementById("__macana_jc_cs"); - if (controls) { - controls.style.display = ""; - } + document.addEventListener("keydown", ev => { + if (ev.key !== " ") { + return; + } + ev.preventDefault(); + if (dragState === DRAG_NONE) { + dragState = DRAG_IDLE; + syncCursor(); + } + }, { passive: false }); - const zoomInButton = document.getElementById("__macana_jc_in"); - if (zoomInButton) { - zoomInButton.addEventListener("click", ev => { - ev.preventDefault(); - setScale(scale + 0.1); - applyTransformToCanvas(); - }); - } + document.addEventListener("keyup", ev => { + if (ev.key !== " ") { + return; + } + ev.preventDefault(); + if (dragState !== DRAG_NONE) { + dragState = DRAG_NONE; + syncCursor(); + } + }, { passive: false }); - const zoomOutButton = document.getElementById("__macana_jc_out"); - if (zoomOutButton) { - zoomOutButton.addEventListener("click", ev => { - ev.preventDefault(); - setScale(scale - 0.1); applyTransformToCanvas(); - }); - } - - document.addEventListener("keydown", ev => { - if (ev.key !== " ") { - return; } - ev.preventDefault(); - if (dragState === DRAG_NONE) { - dragState = DRAG_IDLE; - syncCursor(); - } - }, { passive: false }); - document.addEventListener("keyup", ev => { - if (ev.key !== " ") { - return; - } - ev.preventDefault(); - if (dragState !== DRAG_NONE) { - dragState = DRAG_NONE; - syncCursor(); - } - }, { passive: false }); - - applyTransformToCanvas(); - `.trim(); + enchanceJSONCanvas(); + `; export interface JsonCanvasPageProps { context: Readonly<BuildContext>;
• page_builder/default_theme/script.ts (new)
  • @@ -0,0 +1,42 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + import { minify_sync } from "../../deps/esm.sh/terser/mod.ts"; + + /** + * Tagged template literal function for JavaScript code. + * + * This function returns minified code. + */ + export function javascript( + tmpl: readonly string[], + ...params: readonly string[] + ): string { + const result = minify_sync(tmplBuilder(tmpl, params)); + if (!result.code) { + throw new Error( + "Failed to minify JavaScript code: Terser returned an empty code", + ); + } + + return result.code; + } + + function tmplBuilder( + tmpl: readonly string[], + params: readonly string[], + ): string { + if (!tmpl.length) { + return ""; + } + + const [thead, ...trest] = tmpl; + if (!params.length || trest.length === 0) { + return thead; + } + + const [phead, ...prest] = params; + + return thead + phead + tmplBuilder(trest, prest); + }
• page_builder/default_theme/widgets/document_tree.tsx
  • @@ -10,6 +10,7 @@ import type { Document, DocumentDirectory } from "../../../types.ts";
    import { buildClasses, css, join } from "../css.ts"; import type { BuildContext } from "../context.ts"; + import { javascript } from "../script.ts"; import * as icons from "../icons/lucide.tsx"; const c = buildClasses("w-dt", [
  • @@ -90,52 +91,56 @@ const enum StorageKey {
    OpenedPaths = "__macana_doctree_0", } - export const documentTreeScript = ` - function loadSavedTreeState() { - const data = window.sessionStorage.getItem("${StorageKey.OpenedPaths}"); - if (!data) { - return [] - } + export const documentTreeScript = javascript` + function enchanceDocumentTree() { + function loadSavedTreeState() { + const data = window.sessionStorage.getItem("${StorageKey.OpenedPaths}"); + if (!data) { + return [] + } - const parsed = JSON.parse(data) - if (!Array.isArray(parsed)) { - return [] - } + const parsed = JSON.parse(data) + if (!Array.isArray(parsed)) { + return [] + } - return parsed.filter(path => typeof path === "string"); - } + return parsed.filter(path => typeof path === "string"); + } - let saved = new Set(); - try { - saved = new Set(loadSavedTreeState()); - } catch (error) { - console.warn("Failed to restore tree state", { error }); - } + let saved = new Set(); + try { + saved = new Set(loadSavedTreeState()); + } catch (error) { + console.warn("Failed to restore tree state", { error }); + } - for (const dir of Array.from(document.getElementsByClassName("${c.directory}"))) { - const path = dir.dataset.macanaPath; - if (typeof path !== "string") { - continue; - } + for (const dir of Array.from(document.getElementsByClassName("${c.directory}"))) { + const path = dir.dataset.macanaPath; + if (typeof path !== "string") { + continue; + } - if (saved.has(path)) { - dir.open = true; - } + if (saved.has(path)) { + dir.open = true; + } - dir.addEventListener("toggle", () => { - if (dir.open) { - saved.add(path); - } else { - saved.delete(path); + dir.addEventListener("toggle", () => { + if (dir.open) { + saved.add(path); + } else { + saved.delete(path); + } + + window.sessionStorage.setItem( + "${StorageKey.OpenedPaths}", + JSON.stringify(Array.from(saved.values())) + ); + }); } + } - window.sessionStorage.setItem( - "${StorageKey.OpenedPaths}", - JSON.stringify(Array.from(saved.values())) - ); - }); - } - `.trim(); + enchanceDocumentTree(); + `; export interface DocumentTreeProps { context: Readonly<BuildContext>;
• page_builder/default_theme/widgets/layout.tsx
  • @@ -8,6 +8,7 @@ import { h, type Result } from "../../../deps/esm.sh/hastscript/mod.ts";
    import type { BuildContext } from "../context.ts"; import { buildClasses, css, join } from "../css.ts"; + import { javascript } from "../script.ts"; import * as lucide from "../icons/lucide.tsx";
  • @@ -28,22 +29,22 @@ "paddingAppbarBorder",
    "fullscreenLayout", ]); - export const layoutScript = ` - window.addEventListener("pageshow", (ev) => { - const check = document.getElementById("__macana_menu_open"); - if (!check) { - return; - } + export const layoutScript = javascript` + window.addEventListener("pageshow", (ev) => { + const check = document.getElementById("__macana_menu_open"); + if (!check) { + return; + } - if (ev.persisted) { - const isMenuLayout = getComputedStyle(check).getPropertyValue("--_layout-menu"); - if (isMenuLayout) { - document.documentElement.focus(); - check.checked = false; + if (ev.persisted) { + const isMenuLayout = getComputedStyle(check).getPropertyValue("--_layout-menu"); + if (isMenuLayout) { + document.documentElement.focus(); + check.checked = false; + } } - } - }); - `.trim(); + }); + `; export const layoutStyles = join( lucide.lucideIconStyles,