@eighty4/dank 0.0.1-1 → 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/dank.ts

@@ -3,20 +3,77 @@ export type DankConfig = {
     // buildTag?:  (() => Promise<string> | string) | string
     // mapping url to fs paths of webpages to build
     pages: Record<`/${string}`, `./${string}.html`>
+
+    services?: Array<DevService>
+}
+
+export type DevService = {
+    command: string
+    cwd?: string
+    env?: Record<string, string>
 }
 
 export async function defineConfig(
     c: Partial<DankConfig>,
 ): Promise<DankConfig> {
-    if (typeof c.pages === 'undefined' || Object.keys(c.pages).length === 0) {
+    validatePages(c.pages)
+    validateDevServices(c.services)
+    return c as DankConfig
+}
+
+function validatePages(pages?: DankConfig['pages']) {
+    if (
+        pages === null ||
+        typeof pages === 'undefined' ||
+        Object.keys(pages).length === 0
+    ) {
         throw Error('DankConfig.pages is required')
     }
-    for (const [urlPath, htmlPath] of Object.entries(c.pages)) {
+    for (const [urlPath, htmlPath] of Object.entries(pages)) {
         if (typeof htmlPath !== 'string' || !htmlPath.endsWith('.html')) {
             throw Error(
                 `DankConfig.pages['${urlPath}'] must configure an html file`,
             )
         }
     }
-    return c as DankConfig
+}
+
+function validateDevServices(services: DankConfig['services']) {
+    if (services === null || typeof services === 'undefined') {
+        return
+    }
+    if (!Array.isArray(services)) {
+        throw Error(`DankConfig.services must be an array`)
+    }
+    for (let i = 0; i < services.length; i++) {
+        const s = services[i]
+        if (s.command === null || typeof s.command === 'undefined') {
+            throw Error(`DankConfig.services[${i}].command is required`)
+        } else if (typeof s.command !== 'string' || s.command.length === 0) {
+            throw Error(
+                `DankConfig.services[${i}].command must be a non-empty string`,
+            )
+        }
+        if (s.cwd !== null && typeof s.cwd !== 'undefined') {
+            if (typeof s.cwd !== 'string' || s.cwd.trim().length === 0) {
+                throw Error(
+                    `DankConfig.services[${i}].cwd must be a non-empty string`,
+                )
+            }
+        }
+        if (s.env !== null && typeof s.env !== 'undefined') {
+            if (typeof s.env !== 'object') {
+                throw Error(
+                    `DankConfig.services[${i}].env must be an env variable map`,
+                )
+            }
+            for (const [k, v] of Object.entries(s.env)) {
+                if (typeof v !== 'string') {
+                    throw Error(
+                        `DankConfig.services[${i}].env[${k}] must be a string`,
+                    )
+                }
+            }
+        }
+    }
 }

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'
@@ -13,6 +13,7 @@ import {
     type FrontendFetcher,
 } from './http.ts'
 import { copyAssets } from './public.ts'
+import { startDevServices } from './services.ts'
 
 const isPreview = isPreviewBuild()
 
@@ -37,6 +38,7 @@ export async function serveWebsite(c: DankConfig): Promise<never> {
         isPreview ? 'preview' : 'dev server',
         `is live at http://127.0.0.1:${PORT}`,
     )
+    startDevServices(c)
     return new Promise(() => {})
 }
 
@@ -45,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 }> = []
 
@@ -68,13 +75,12 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
                     })
                 })
             html.rewriteHrefs()
+            html.appendScript(clientJS)
             await html.writeTo(watchDir)
             return html
         }),
     )
 
-    console.log(entryPoints)
-
     const ctx = await esbuildDevContext(
         createGlobalDefinitions(),
         entryPoints,

package/lib/services.ts

@@ -0,0 +1,75 @@
+import { spawn } from 'node:child_process'
+import { basename, isAbsolute, resolve } from 'node:path'
+import type { DankConfig, DevService } from './dank.ts'
+
+export function startDevServices(c: DankConfig) {
+    if (c.services?.length) {
+        const ac = new AbortController()
+        try {
+            for (const s of c.services) {
+                startService(s, ac.signal)
+            }
+        } catch (e) {
+            ac.abort()
+            throw e
+        }
+    }
+}
+
+function startService(s: DevService, signal: AbortSignal) {
+    const splitCmdAndArgs = s.command.split(/\s+/)
+    const cmd = splitCmdAndArgs[0]
+    const args = splitCmdAndArgs.length === 1 ? [] : splitCmdAndArgs.slice(1)
+    const spawned = spawn(cmd, args, {
+        cwd: resolveCwd(s.cwd),
+        env: s.env,
+        signal,
+        detached: false,
+        shell: false,
+    })
+
+    const stdoutLabel = logLabel(s.cwd, cmd, args, 32)
+    spawned.stdout.on('data', chunk => printChunk(stdoutLabel, chunk))
+
+    const stderrLabel = logLabel(s.cwd, cmd, args, 31)
+    spawned.stderr.on('data', chunk => printChunk(stderrLabel, chunk))
+
+    spawned.on('exit', () => {
+        console.log(`[${s.command}]`, 'exit')
+    })
+}
+
+function printChunk(label: string, c: Buffer) {
+    for (const l of parseChunk(c)) console.log(label, l)
+}
+
+function parseChunk(c: Buffer): Array<string> {
+    return c
+        .toString()
+        .replace(/\r?\n$/, '')
+        .split(/\r?\n/)
+}
+
+function resolveCwd(p?: string): string | undefined {
+    if (!p || isAbsolute(p)) {
+        return p
+    } else {
+        return resolve(process.cwd(), p)
+    }
+}
+
+function logLabel(
+    cwd: string | undefined,
+    cmd: string,
+    args: Array<string>,
+    ansiColor: number,
+): string {
+    cwd = !cwd
+        ? './'
+        : cwd.startsWith('/')
+          ? `/.../${basename(cwd)}`
+          : cwd.startsWith('.')
+            ? cwd
+            : `./${cwd}`
+    return `\u001b[${ansiColor}m[\u001b[1m${cmd}\u001b[22m ${args.join(' ')} \u001b[2;3m${cwd}\u001b[22;23m]\u001b[0m`
+}

package/lib_js/dank.js

@@ -1,11 +1,49 @@
 export async function defineConfig(c) {
-    if (typeof c.pages === 'undefined' || Object.keys(c.pages).length === 0) {
+    validatePages(c.pages);
+    validateDevServices(c.services);
+    return c;
+}
+function validatePages(pages) {
+    if (pages === null ||
+        typeof pages === 'undefined' ||
+        Object.keys(pages).length === 0) {
         throw Error('DankConfig.pages is required');
     }
-    for (const [urlPath, htmlPath] of Object.entries(c.pages)) {
+    for (const [urlPath, htmlPath] of Object.entries(pages)) {
         if (typeof htmlPath !== 'string' || !htmlPath.endsWith('.html')) {
             throw Error(`DankConfig.pages['${urlPath}'] must configure an html file`);
         }
     }
-    return c;
+}
+function validateDevServices(services) {
+    if (services === null || typeof services === 'undefined') {
+        return;
+    }
+    if (!Array.isArray(services)) {
+        throw Error(`DankConfig.services must be an array`);
+    }
+    for (let i = 0; i < services.length; i++) {
+        const s = services[i];
+        if (s.command === null || typeof s.command === 'undefined') {
+            throw Error(`DankConfig.services[${i}].command is required`);
+        }
+        else if (typeof s.command !== 'string' || s.command.length === 0) {
+            throw Error(`DankConfig.services[${i}].command must be a non-empty string`);
+        }
+        if (s.cwd !== null && typeof s.cwd !== 'undefined') {
+            if (typeof s.cwd !== 'string' || s.cwd.trim().length === 0) {
+                throw Error(`DankConfig.services[${i}].cwd must be a non-empty string`);
+            }
+        }
+        if (s.env !== null && typeof s.env !== 'undefined') {
+            if (typeof s.env !== 'object') {
+                throw Error(`DankConfig.services[${i}].env must be an env variable map`);
+            }
+            for (const [k, v] of Object.entries(s.env)) {
+                if (typeof v !== 'string') {
+                    throw Error(`DankConfig.services[${i}].env[${k}] must be a string`);
+                }
+            }
+        }
+    }
 }

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";
@@ -7,6 +7,7 @@ import { isPreviewBuild } from "./flags.js";
 import { HtmlEntrypoint } from "./html.js";
 import { createBuiltDistFilesFetcher, createLocalProxyFilesFetcher, createWebServer, } from "./http.js";
 import { copyAssets } from "./public.js";
+import { startDevServices } from "./services.js";
 const isPreview = isPreviewBuild();
 // alternate port for --preview bc of service worker
 const PORT = isPreview ? 4000 : 3000;
@@ -25,12 +26,14 @@ export async function serveWebsite(c) {
     }
     createWebServer(PORT, frontend).listen(PORT);
     console.log(isPreview ? 'preview' : 'dev server', `is live at http://127.0.0.1:${PORT}`);
+    startDevServices(c);
     return new Promise(() => { });
 }
 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]) => {
@@ -49,10 +52,10 @@ async function startEsbuildWatch(c) {
             });
         });
         html.rewriteHrefs();
+        html.appendScript(clientJS);
         await html.writeTo(watchDir);
         return html;
     }));
-    console.log(entryPoints);
     const ctx = await esbuildDevContext(createGlobalDefinitions(), entryPoints, watchDir);
     await ctx.watch();
     await ctx.serve({

package/lib_js/services.js

@@ -0,0 +1,63 @@
+import { spawn } from 'node:child_process';
+import { basename, isAbsolute, resolve } from 'node:path';
+export function startDevServices(c) {
+    if (c.services?.length) {
+        const ac = new AbortController();
+        try {
+            for (const s of c.services) {
+                startService(s, ac.signal);
+            }
+        }
+        catch (e) {
+            ac.abort();
+            throw e;
+        }
+    }
+}
+function startService(s, signal) {
+    const splitCmdAndArgs = s.command.split(/\s+/);
+    const cmd = splitCmdAndArgs[0];
+    const args = splitCmdAndArgs.length === 1 ? [] : splitCmdAndArgs.slice(1);
+    const spawned = spawn(cmd, args, {
+        cwd: resolveCwd(s.cwd),
+        env: s.env,
+        signal,
+        detached: false,
+        shell: false,
+    });
+    const stdoutLabel = logLabel(s.cwd, cmd, args, 32);
+    spawned.stdout.on('data', chunk => printChunk(stdoutLabel, chunk));
+    const stderrLabel = logLabel(s.cwd, cmd, args, 31);
+    spawned.stderr.on('data', chunk => printChunk(stderrLabel, chunk));
+    spawned.on('exit', () => {
+        console.log(`[${s.command}]`, 'exit');
+    });
+}
+function printChunk(label, c) {
+    for (const l of parseChunk(c))
+        console.log(label, l);
+}
+function parseChunk(c) {
+    return c
+        .toString()
+        .replace(/\r?\n$/, '')
+        .split(/\r?\n/);
+}
+function resolveCwd(p) {
+    if (!p || isAbsolute(p)) {
+        return p;
+    }
+    else {
+        return resolve(process.cwd(), p);
+    }
+}
+function logLabel(cwd, cmd, args, ansiColor) {
+    cwd = !cwd
+        ? './'
+        : cwd.startsWith('/')
+            ? `/.../${basename(cwd)}`
+            : cwd.startsWith('.')
+                ? cwd
+                : `./${cwd}`;
+    return `\u001b[${ansiColor}m[\u001b[1m${cmd}\u001b[22m ${args.join(' ')} \u001b[2;3m${cwd}\u001b[22;23m]\u001b[0m`;
+}

package/lib_types/dank.d.ts

@@ -1,4 +1,10 @@
 export type DankConfig = {
     pages: Record<`/${string}`, `./${string}.html`>;
+    services?: Array<DevService>;
+};
+export type DevService = {
+    command: string;
+    cwd?: string;
+    env?: Record<string, string>;
 };
 export declare function defineConfig(c: Partial<DankConfig>): Promise<DankConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eighty4/dank",
-  "version": "0.0.1-1",
+  "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"