@eighty4/dank 0.0.1-4 → 0.0.1

package/lib/serve.ts

@@ -1,6 +1,8 @@
-import { mkdir, readFile, rm } from 'node:fs/promises'
-import { join, resolve } from 'node:path'
+import { mkdir, readFile, rm, watch as _watch } from 'node:fs/promises'
+import { extname, join, resolve } from 'node:path'
+import type { BuildContext } from 'esbuild'
 import { buildWebsite } from './build.ts'
+import { loadConfig } from './config.ts'
 import type { DankConfig } from './dank.ts'
 import { createGlobalDefinitions } from './define.ts'
 import { esbuildDevContext } from './esbuild.ts'
@@ -8,12 +10,10 @@ import { isPreviewBuild } from './flags.ts'
 import { HtmlEntrypoint } from './html.ts'
 import {
     createBuiltDistFilesFetcher,
-    createLocalProxyFilesFetcher,
+    createDevServeFilesFetcher,
     createWebServer,
-    type FrontendFetcher,
 } from './http.ts'
-import { copyAssets } from './public.ts'
-import { startDevServices } from './services.ts'
+import { startDevServices, updateDevServices } from './services.ts'
 
 const isPreview = isPreviewBuild()
 
@@ -25,66 +25,226 @@ const ESBUILD_PORT = 2999
 
 export async function serveWebsite(c: DankConfig): Promise<never> {
     await rm('build', { force: true, recursive: true })
-    let frontend: FrontendFetcher
     if (isPreview) {
-        const { dir, files } = await buildWebsite(c)
-        frontend = createBuiltDistFilesFetcher(dir, files)
+        await startPreviewMode(c)
     } else {
-        const { port } = await startEsbuildWatch(c)
-        frontend = createLocalProxyFilesFetcher(port)
+        const abortController = new AbortController()
+        await startDevMode(c, abortController.signal)
     }
-    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: DankConfig): Promise<{ port: number }> {
+async function startPreviewMode(c: DankConfig) {
+    const { dir, files } = await buildWebsite(c)
+    const frontend = createBuiltDistFilesFetcher(dir, files)
+    createWebServer(PORT, frontend).listen(PORT)
+    console.log(`preview is live at http://127.0.0.1:${PORT}`)
+}
+
+// todo changing partials triggers update on html pages
+async function startDevMode(c: DankConfig, signal: AbortSignal) {
     const watchDir = join('build', 'watch')
     await mkdir(watchDir, { recursive: true })
-    await copyAssets(watchDir)
+    const clientJS = await loadClientJS()
+    const pagesByUrlPath: Record<string, WebpageMetadata> = {}
+    const entryPointsByUrlPath: Record<string, Set<string>> = {}
+    let buildContext: BuildContext | 'starting' | 'dirty' | 'disposing' | null =
+        null
 
-    const clientJS = await readFile(
-        resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')),
-        'utf-8',
-    )
+    watch('dank.config.ts', signal, async () => {
+        let updated: DankConfig
+        try {
+            updated = await loadConfig()
+        } catch (ignore) {
+            return
+        }
+        const prevPages = new Set(Object.keys(pagesByUrlPath))
+        await Promise.all(
+            Object.entries(updated.pages).map(async ([urlPath, srcPath]) => {
+                c.pages[urlPath as `/${string}`] = srcPath
+                if (pagesByUrlPath[urlPath]) {
+                    prevPages.delete(urlPath)
+                    if (pagesByUrlPath[urlPath].srcPath !== srcPath) {
+                        await updatePage(urlPath)
+                    }
+                } else {
+                    await addPage(urlPath, srcPath)
+                }
+            }),
+        )
+        for (const prevPage of Array.from(prevPages)) {
+            delete c.pages[prevPage as `/${string}`]
+            deletePage(prevPage)
+        }
+        updateDevServices(updated)
+    })
 
-    const entryPointUrls: Set<string> = new Set()
-    const entryPoints: Array<{ in: string; out: string }> = []
+    watch('pages', signal, filename => {
+        if (extname(filename) === '.html') {
+            for (const [urlPath, srcPath] of Object.entries(c.pages)) {
+                if (srcPath === filename) {
+                    updatePage(urlPath)
+                }
+            }
+        }
+    })
 
     await Promise.all(
-        Object.entries(c.pages).map(async ([url, srcPath]) => {
-            const html = await HtmlEntrypoint.readFrom(
-                url,
-                join('pages', srcPath),
-            )
-            await html.injectPartials()
-            if (url !== '/') {
-                await mkdir(join(watchDir, url), { recursive: true })
-            }
-            html.collectScripts()
-                .filter(scriptImport => !entryPointUrls.has(scriptImport.in))
-                .forEach(scriptImport => {
-                    entryPointUrls.add(scriptImport.in)
-                    entryPoints.push({
-                        in: scriptImport.in,
-                        out: scriptImport.out,
-                    })
-                })
-            html.rewriteHrefs()
-            html.appendScript(clientJS)
-            await html.writeTo(watchDir)
-            return html
-        }),
+        Object.entries(c.pages).map(([urlPath, srcPath]) =>
+            addPage(urlPath, srcPath),
+        ),
+    )
+
+    async function addPage(urlPath: string, srcPath: string) {
+        const metadata = await processWebpage({
+            clientJS,
+            outDir: watchDir,
+            pagesDir: 'pages',
+            srcPath,
+            urlPath,
+        })
+        pagesByUrlPath[urlPath] = metadata
+        entryPointsByUrlPath[urlPath] = new Set(
+            metadata.entryPoints.map(e => e.in),
+        )
+        if (buildContext !== null) {
+            resetBuildContext()
+        }
+    }
+
+    function deletePage(urlPath: string) {
+        delete pagesByUrlPath[urlPath]
+        delete entryPointsByUrlPath[urlPath]
+        resetBuildContext()
+    }
+
+    async function updatePage(urlPath: string) {
+        const update = await processWebpage({
+            clientJS,
+            outDir: watchDir,
+            pagesDir: 'pages',
+            srcPath: c.pages[urlPath as `/${string}`],
+            urlPath,
+        })
+        const entryPointUrls = new Set(update.entryPoints.map(e => e.in))
+        if (!hasSameValues(entryPointUrls, entryPointsByUrlPath[urlPath])) {
+            entryPointsByUrlPath[urlPath] = entryPointUrls
+            resetBuildContext()
+        }
+    }
+
+    function collectEntrypoints(): Array<{ in: string; out: string }> {
+        const sources: Set<string> = new Set()
+        return Object.values(pagesByUrlPath)
+            .flatMap(({ entryPoints }) => entryPoints)
+            .filter(entryPoint => {
+                if (sources.has(entryPoint.in)) {
+                    return false
+                } else {
+                    sources.add(entryPoint.in)
+                    return true
+                }
+            })
+    }
+
+    function resetBuildContext() {
+        if (buildContext === 'starting' || buildContext === 'dirty') {
+            buildContext = 'dirty'
+            return
+        }
+        if (buildContext === 'disposing') {
+            return
+        }
+        if (buildContext !== null) {
+            const prev = buildContext
+            buildContext = 'disposing'
+            prev.dispose().then(() => {
+                buildContext = null
+                resetBuildContext()
+            })
+        } else {
+            startEsbuildWatch(collectEntrypoints()).then(ctx => {
+                if (buildContext === 'dirty') {
+                    buildContext = null
+                    resetBuildContext()
+                } else {
+                    buildContext = ctx
+                }
+            })
+        }
+    }
+
+    buildContext = await startEsbuildWatch(collectEntrypoints())
+    const frontend = createDevServeFilesFetcher({
+        pages: c.pages,
+        pagesDir: watchDir,
+        proxyPort: ESBUILD_PORT,
+        publicDir: 'public',
+    })
+    createWebServer(PORT, frontend).listen(PORT)
+    console.log(`dev server is live at http://127.0.0.1:${PORT}`)
+    startDevServices(c, signal)
+}
+
+function hasSameValues(a: Set<string>, b: Set<string>): boolean {
+    if (a.size !== b.size) {
+        return false
+    }
+    for (const v in a) {
+        if (!b.has(v)) {
+            return false
+        }
+    }
+    return true
+}
+
+type WebpageInputs = {
+    clientJS: string
+    outDir: string
+    pagesDir: string
+    srcPath: string
+    urlPath: string
+}
+
+type WebpageMetadata = {
+    entryPoints: Array<{ in: string; out: string }>
+    srcPath: string
+    urlPath: string
+}
+
+async function processWebpage(inputs: WebpageInputs): Promise<WebpageMetadata> {
+    const html = await HtmlEntrypoint.readFrom(
+        inputs.urlPath,
+        join(inputs.pagesDir, inputs.srcPath),
     )
+    await html.injectPartials()
+    if (inputs.urlPath !== '/') {
+        await mkdir(join(inputs.outDir, inputs.urlPath), { recursive: true })
+    }
+    const entryPoints: Array<{ in: string; out: string }> = []
+    html.collectScripts().forEach(scriptImport => {
+        entryPoints.push({
+            in: scriptImport.in,
+            out: scriptImport.out,
+        })
+    })
+    html.rewriteHrefs()
+    html.appendScript(inputs.clientJS)
+    await html.writeTo(inputs.outDir)
+    return {
+        entryPoints,
+        srcPath: inputs.srcPath,
+        urlPath: inputs.urlPath,
+    }
+}
 
+async function startEsbuildWatch(
+    entryPoints: Array<{ in: string; out: string }>,
+): Promise<BuildContext> {
     const ctx = await esbuildDevContext(
         createGlobalDefinitions(),
         entryPoints,
-        watchDir,
+        'build/watch',
     )
 
     await ctx.watch()
@@ -92,11 +252,55 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
     await ctx.serve({
         host: '127.0.0.1',
         port: ESBUILD_PORT,
-        servedir: watchDir,
         cors: {
             origin: 'http://127.0.0.1:' + PORT,
         },
     })
 
-    return { port: ESBUILD_PORT }
+    return ctx
+}
+
+async function loadClientJS() {
+    return await readFile(
+        resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')),
+        'utf-8',
+    )
+}
+
+async function watch(
+    p: string,
+    signal: AbortSignal,
+    fire: (filename: string) => void,
+) {
+    const delayFire = 90
+    const timeout = 100
+    let changes: Record<string, number> = {}
+    try {
+        for await (const { filename } of _watch(p, {
+            recursive: true,
+            signal,
+        })) {
+            if (filename) {
+                if (!changes[filename]) {
+                    const now = Date.now()
+                    changes[filename] = now + delayFire
+                    setTimeout(() => {
+                        const now = Date.now()
+                        for (const [filename, then] of Object.entries(
+                            changes,
+                        )) {
+                            if (then <= now) {
+                                fire(filename)
+                                delete changes[filename]
+                            }
+                        }
+                    }, timeout)
+                }
+            }
+        }
+    } catch (e: any) {
+        if (e.name !== 'AbortError') {
+            throw e
+        }
+    }
 }

package/lib/services.ts

@@ -1,22 +1,125 @@
-import { spawn } from 'node:child_process'
+import { type ChildProcess, spawn } from 'node:child_process'
 import { basename, isAbsolute, resolve } from 'node:path'
 import type { DankConfig, DevService } from './dank.ts'
 
-export function startDevServices(c: DankConfig) {
+// up to date representation of dank.config.ts services
+const running: Array<{ s: DevService; process: ChildProcess | null }> = []
+
+let signal: AbortSignal
+
+// batch of services that must be stopped before starting new services
+let updating: null | {
+    stopping: Array<DevService>
+    starting: Array<DevService>
+} = null
+
+export function startDevServices(c: DankConfig, _signal: AbortSignal) {
+    signal = _signal
     if (c.services?.length) {
-        const ac = new AbortController()
-        try {
-            for (const s of c.services) {
-                startService(s, ac.signal)
+        for (const s of c.services) {
+            running.push({ s, process: startService(s) })
+        }
+    }
+}
+
+export function updateDevServices(c: DankConfig) {
+    if (!c.services?.length) {
+        if (running.length) {
+            if (updating === null) {
+                updating = { stopping: [], starting: [] }
+            }
+            running.forEach(({ s, process }) => {
+                if (process) {
+                    stopService(s, process)
+                } else {
+                    removeFromUpdating(s)
+                }
+            })
+            running.length = 0
+        }
+    } else {
+        if (updating === null) {
+            updating = { stopping: [], starting: [] }
+        }
+        const keep = []
+        const next: Array<DevService> = []
+        for (const s of c.services) {
+            let found = false
+            for (let i = 0; i < running.length; i++) {
+                const p = running[i].s
+                if (matchingConfig(s, p)) {
+                    found = true
+                    keep.push(i)
+                    break
+                }
+            }
+            if (!found) {
+                next.push(s)
+            }
+        }
+        for (let i = running.length - 1; i >= 0; i--) {
+            if (!keep.includes(i)) {
+                const { s, process } = running[i]
+                if (process) {
+                    stopService(s, process)
+                } else {
+                    removeFromUpdating(s)
+                }
+                running.splice(i, 1)
+            }
+        }
+        if (updating.stopping.length) {
+            for (const s of next) {
+                if (
+                    !updating.starting.find(queued => matchingConfig(queued, s))
+                ) {
+                    updating.starting.push(s)
+                }
+            }
+        } else {
+            updating = null
+            for (const s of next) {
+                running.push({ s, process: startService(s) })
+            }
+        }
+    }
+}
+
+function stopService(s: DevService, process: ChildProcess) {
+    opPrint(s, 'stopping')
+    updating!.stopping.push(s)
+    process.kill()
+}
+
+function matchingConfig(a: DevService, b: DevService): boolean {
+    if (a.command !== b.command) {
+        return false
+    }
+    if (a.cwd !== b.cwd) {
+        return false
+    }
+    if (!a.env && !b.env) {
+        return true
+    } else if (a.env && !b.env) {
+        return false
+    } else if (!a.env && b.env) {
+        return false
+    } else if (Object.keys(a.env!).length !== Object.keys(b.env!).length) {
+        return false
+    } else {
+        for (const k of Object.keys(a.env!)) {
+            if (!b.env![k]) {
+                return false
+            } else if (a.env![k] !== b.env![k]) {
+                return false
             }
-        } catch (e) {
-            ac.abort()
-            throw e
         }
     }
+    return true
 }
 
-function startService(s: DevService, signal: AbortSignal) {
+function startService(s: DevService): ChildProcess {
+    opPrint(s, 'starting')
     const splitCmdAndArgs = s.command.split(/\s+/)
     const cmd = splitCmdAndArgs[0]
     const args = splitCmdAndArgs.length === 1 ? [] : splitCmdAndArgs.slice(1)
@@ -34,9 +137,43 @@ function startService(s: DevService, signal: AbortSignal) {
     const stderrLabel = logLabel(s.cwd, cmd, args, 31)
     spawned.stderr.on('data', chunk => printChunk(stderrLabel, chunk))
 
+    spawned.on('error', e => {
+        const cause =
+            'code' in e && e.code === 'ENOENT' ? 'program not found' : e.message
+        opPrint(s, 'error: ' + cause)
+        removeFromRunning(s)
+    })
+
     spawned.on('exit', () => {
-        console.log(`[${s.command}]`, 'exit')
+        opPrint(s, 'exited')
+        removeFromRunning(s)
+        removeFromUpdating(s)
     })
+    return spawned
+}
+
+function removeFromRunning(s: DevService) {
+    for (let i = 0; i < running.length; i++) {
+        if (matchingConfig(running[i].s, s)) {
+            running.splice(i, 1)
+            return
+        }
+    }
+}
+
+function removeFromUpdating(s: DevService) {
+    if (updating !== null) {
+        for (let i = 0; i < updating.stopping.length; i++) {
+            if (matchingConfig(updating.stopping[i], s)) {
+                updating.stopping.splice(i, 1)
+                if (!updating.stopping.length) {
+                    updating.starting.forEach(startService)
+                    updating = null
+                    return
+                }
+            }
+        }
+    }
 }
 
 function printChunk(label: string, c: Buffer) {
@@ -58,6 +195,14 @@ function resolveCwd(p?: string): string | undefined {
     }
 }
 
+function opPrint(s: DevService, msg: string) {
+    console.log(opLabel(s), msg)
+}
+
+function opLabel(s: DevService) {
+    return `\`${s.cwd ? s.cwd + ' ' : ''}${s.command}\``
+}
+
 function logLabel(
     cwd: string | undefined,
     cmd: string,

package/lib_js/config.js

@@ -9,7 +9,8 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
 import { isAbsolute, resolve } from 'node:path';
 const CFG_P = './dank.config.ts';
 export async function loadConfig(path = CFG_P) {
-    const module = await import(__rewriteRelativeImportExtension(resolveConfigPath(path)));
+    const modulePath = `${resolveConfigPath(path)}?${Date.now()}`;
+    const module = await import(__rewriteRelativeImportExtension(modulePath));
     return await module.default;
 }
 export function resolveConfigPath(path) {

package/lib_js/dank.js

@@ -1,6 +1,7 @@
 export async function defineConfig(c) {
     validatePages(c.pages);
     validateDevServices(c.services);
+    normalizePagePaths(c.pages);
     return c;
 }
 function validatePages(pages) {
@@ -47,3 +48,8 @@ function validateDevServices(services) {
         }
     }
 }
+function normalizePagePaths(pages) {
+    for (const urlPath of Object.keys(pages)) {
+        pages[urlPath] = pages[urlPath].replace(/^\.\//, '');
+    }
+}

package/lib_js/esbuild.js

@@ -26,6 +26,8 @@ export async function esbuildDevContext(define, entryPoints, outdir) {
         entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
+        metafile: false,
+        write: false,
     });
 }
 export async function esbuildWebpages(define, entryPoints, outdir) {