@eighty4/dank 0.0.1-2 → 0.0.1-3

package/client/esbuild.js

@@ -0,0 +1,77 @@
+new EventSource('http://127.0.0.1:2999/esbuild').addEventListener('change', (e) => {
+    const change = JSON.parse(e.data);
+    const cssUpdates = change.updated.filter(p => p.endsWith('.css'));
+    if (cssUpdates.length) {
+        console.log('esbuild css updates', cssUpdates);
+        const cssLinks = {};
+        for (const elem of document.getElementsByTagName('link')) {
+            if (elem.getAttribute('rel') === 'stylesheet') {
+                const url = new URL(elem.href);
+                if ((url.host = location.host)) {
+                    cssLinks[url.pathname] = elem;
+                }
+            }
+        }
+        let swappedCss = false;
+        for (const cssUpdate of cssUpdates) {
+            const cssLink = cssLinks[cssUpdate];
+            if (cssLink) {
+                const next = cssLink.cloneNode();
+                next.href = `${cssUpdate}?${Math.random().toString(36).slice(2)}`;
+                next.onload = () => cssLink.remove();
+                cssLink.parentNode.insertBefore(next, cssLink.nextSibling);
+                swappedCss = true;
+            }
+        }
+        if (swappedCss) {
+            addCssUpdateIndicator();
+        }
+    }
+    if (cssUpdates.length < change.updated.length) {
+        const jsUpdates = change.updated.filter(p => !p.endsWith('.css'));
+        const jsScripts = new Set();
+        for (const elem of document.getElementsByTagName('script')) {
+            if (elem.src.length) {
+                const url = new URL(elem.src);
+                if ((url.host = location.host)) {
+                    jsScripts.add(url.pathname);
+                }
+            }
+        }
+        if (jsUpdates.some(jsUpdate => jsScripts.has(jsUpdate))) {
+            console.log('esbuild js updates require reload');
+            addJsReloadIndicator();
+        }
+    }
+});
+function addCssUpdateIndicator() {
+    const indicator = createUpdateIndicator('green', '9999');
+    indicator.style.transition = 'opacity ease-in-out .38s';
+    indicator.style.opacity = '0';
+    indicator.ontransitionend = () => {
+        if (indicator.style.opacity === '1') {
+            indicator.style.opacity = '0';
+        }
+        else {
+            indicator.remove();
+            indicator.onload = null;
+            indicator.ontransitionend = null;
+        }
+    };
+    document.body.appendChild(indicator);
+    setTimeout(() => (indicator.style.opacity = '1'), 0);
+}
+function addJsReloadIndicator() {
+    document.body.appendChild(createUpdateIndicator('orange', '9000'));
+}
+function createUpdateIndicator(color, zIndex) {
+    const indicator = document.createElement('div');
+    indicator.style.border = '6px dashed ' + color;
+    indicator.style.zIndex = zIndex;
+    indicator.style.position = 'fixed';
+    indicator.style.top = indicator.style.left = '1px';
+    indicator.style.height = indicator.style.width = 'calc(100% - 2px)';
+    indicator.style.boxSizing = 'border-box';
+    return indicator;
+}
+export {};

package/lib/esbuild.ts

@@ -32,7 +32,7 @@ export async function esbuildDevContext(
     return await esbuild.context({
         define,
         entryNames: '[dir]/[name]',
-        entryPoints,
+        entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
     })
@@ -54,6 +54,9 @@ export async function esbuildWebpages(
     return buildResult.metafile
 }
 
+// esbuild will append the .js or .css to output filenames
+// keeping extension on entryPoints data for consistency
+// and removing and mapping entryPoints to pass to esbuild
 function removeEntryPointOutExt(
     entryPoints: Array<{ in: string; out: string }>,
 ) {

package/lib/html.ts

@@ -85,6 +85,19 @@ export class HtmlEntrypoint {
         }
     }
 
+    appendScript(clientJS: string) {
+        const scriptNode = parseFragment(
+            `<script type="module">${clientJS}</script>`,
+        ).childNodes[0]
+        const htmlNode = this.#document.childNodes.find(
+            node => node.nodeName === 'html',
+        ) as ParentNode
+        const headNode = htmlNode.childNodes.find(
+            node => node.nodeName === 'head',
+        ) as ParentNode | undefined
+        defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode)
+    }
+
     async writeTo(buildDir: string): Promise<void> {
         await writeFile(
             join(buildDir, this.#url, 'index.html'),

package/lib/serve.ts

@@ -1,5 +1,5 @@
-import { mkdir, rm } from 'node:fs/promises'
-import { join } from 'node:path'
+import { mkdir, readFile, rm } from 'node:fs/promises'
+import { join, resolve } from 'node:path'
 import { buildWebsite } from './build.ts'
 import type { DankConfig } from './dank.ts'
 import { createGlobalDefinitions } from './define.ts'
@@ -47,6 +47,11 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
     await mkdir(watchDir, { recursive: true })
     await copyAssets(watchDir)
 
+    const clientJS = await readFile(
+        resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')),
+        'utf-8',
+    )
+
     const entryPointUrls: Set<string> = new Set()
     const entryPoints: Array<{ in: string; out: string }> = []
 
@@ -70,6 +75,7 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
                     })
                 })
             html.rewriteHrefs()
+            html.appendScript(clientJS)
             await html.writeTo(watchDir)
             return html
         }),

package/lib_js/esbuild.js

@@ -18,7 +18,7 @@ export async function esbuildDevContext(define, entryPoints, outdir) {
     return await esbuild.context({
         define,
         entryNames: '[dir]/[name]',
-        entryPoints,
+        entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
     });
@@ -34,6 +34,9 @@ export async function esbuildWebpages(define, entryPoints, outdir) {
     esbuildResultChecks(buildResult);
     return buildResult.metafile;
 }
+// esbuild will append the .js or .css to output filenames
+// keeping extension on entryPoints data for consistency
+// and removing and mapping entryPoints to pass to esbuild
 function removeEntryPointOutExt(entryPoints) {
     return entryPoints.map(entryPoint => {
         return {

package/lib_js/html.js

@@ -52,6 +52,12 @@ export class HtmlEntrypoint {
             }
         }
     }
+    appendScript(clientJS) {
+        const scriptNode = parseFragment(`<script type="module">${clientJS}</script>`).childNodes[0];
+        const htmlNode = this.#document.childNodes.find(node => node.nodeName === 'html');
+        const headNode = htmlNode.childNodes.find(node => node.nodeName === 'head');
+        defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode);
+    }
     async writeTo(buildDir) {
         await writeFile(join(buildDir, this.#url, 'index.html'), serialize(this.#document));
     }

package/lib_js/serve.js

@@ -1,5 +1,5 @@
-import { mkdir, rm } from 'node:fs/promises';
-import { join } from 'node:path';
+import { mkdir, readFile, rm } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
 import { buildWebsite } from "./build.js";
 import { createGlobalDefinitions } from "./define.js";
 import { esbuildDevContext } from "./esbuild.js";
@@ -33,6 +33,7 @@ async function startEsbuildWatch(c) {
     const watchDir = join('build', 'watch');
     await mkdir(watchDir, { recursive: true });
     await copyAssets(watchDir);
+    const clientJS = await readFile(resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')), 'utf-8');
     const entryPointUrls = new Set();
     const entryPoints = [];
     await Promise.all(Object.entries(c.pages).map(async ([url, srcPath]) => {
@@ -51,6 +52,7 @@ async function startEsbuildWatch(c) {
             });
         });
         html.rewriteHrefs();
+        html.appendScript(clientJS);
         await html.writeTo(watchDir);
         return html;
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eighty4/dank",
-  "version": "0.0.1-2",
+  "version": "0.0.1-3",
   "type": "module",
   "bin": "./lib_js/bin.js",
   "exports": {
@@ -20,12 +20,13 @@
     "typescript": "^5.9.2"
   },
   "files": [
+    "client/esbuild.js",
     "lib/*.ts",
     "lib_js/*.js",
     "lib_types/*.d.ts"
   ],
   "scripts": {
-    "build": "tsc && tsc -p tsconfig.exports.json",
+    "build": "tsc && tsc -p tsconfig.client.json && tsc -p tsconfig.exports.json",
     "fmt": "prettier --write .",
     "fmtcheck": "prettier --check .",
     "typecheck": "tsc --noEmit"