@eighty4/dank 0.0.2 → 0.0.4-0

package/lib/serve.ts

@@ -1,55 +1,95 @@
-import { mkdir, readFile, rm, watch as _watch } from 'node:fs/promises'
+import {
+    mkdir,
+    readFile,
+    rm,
+    watch as _watch,
+    writeFile,
+} 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'
-import { isPreviewBuild } from './flags.ts'
+import { esbuildDevContext, type EntryPoint } from './esbuild.ts'
+import { resolveServeFlags, type DankServe } from './flags.ts'
 import { HtmlEntrypoint } from './html.ts'
 import {
     createBuiltDistFilesFetcher,
     createDevServeFilesFetcher,
-    createWebServer,
+    startWebServer,
+    type PageRouteState,
+    type UrlRewrite,
 } from './http.ts'
+import { WebsiteRegistry } from './metadata.ts'
 import { startDevServices, updateDevServices } from './services.ts'
 
-const isPreview = isPreviewBuild()
-
-// alternate port for --preview bc of service worker
-const PORT = isPreview ? 4000 : 3000
-
-// port for esbuild.serve
-const ESBUILD_PORT = 2999
-
 export async function serveWebsite(c: DankConfig): Promise<never> {
-    await rm('build', { force: true, recursive: true })
-    if (isPreview) {
-        await startPreviewMode(c)
+    const serve = resolveServeFlags(c)
+    await rm(serve.dirs.buildRoot, { force: true, recursive: true })
+    const abortController = new AbortController()
+    process.once('exit', () => abortController.abort())
+    if (serve.preview) {
+        await startPreviewMode(c, serve, abortController.signal)
     } else {
-        const abortController = new AbortController()
-        await startDevMode(c, abortController.signal)
+        await startDevMode(c, serve, abortController.signal)
     }
     return new Promise(() => {})
 }
 
-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}`)
+async function startPreviewMode(
+    c: DankConfig,
+    serve: DankServe,
+    signal: AbortSignal,
+) {
+    const manifest = await buildWebsite(c, serve)
+    const frontend = createBuiltDistFilesFetcher(serve.dirs.buildDist, manifest)
+    const devServices = startDevServices(c, signal)
+    startWebServer(serve, frontend, devServices.http, {
+        urls: Object.keys(c.pages),
+        urlRewrites: collectUrlRewrites(c),
+    })
+}
+
+function collectUrlRewrites(c: DankConfig): Array<UrlRewrite> {
+    return Object.keys(c.pages)
+        .sort()
+        .map(url => {
+            const mapping = c.pages[url as `/${string}`]
+            return typeof mapping !== 'object' || !mapping.pattern
+                ? null
+                : { url, pattern: mapping.pattern }
+        })
+        .filter(mapping => mapping !== null)
+}
+
+type BuildContextState =
+    | BuildContext
+    | 'starting'
+    | 'dirty'
+    | 'disposing'
+    | null
+
+type EntrypointsState = {
+    entrypoints: Array<EntryPoint>
+    pathsIn: Set<string>
 }
 
 // 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 })
-    const clientJS = await loadClientJS()
-    const pagesByUrlPath: Record<string, WebpageMetadata> = {}
-    const entryPointsByUrlPath: Record<string, Set<string>> = {}
-    let buildContext: BuildContext | 'starting' | 'dirty' | 'disposing' | null =
-        null
+async function startDevMode(
+    c: DankConfig,
+    serve: DankServe,
+    signal: AbortSignal,
+) {
+    await mkdir(serve.dirs.buildWatch, { recursive: true })
+    const registry = new WebsiteRegistry(serve)
+    const clientJS = await loadClientJS(serve.esbuildPort)
+    const pagesByUrlPath: Record<string, HtmlEntrypoint> = {}
+    const partialsByUrlPath: Record<string, Array<string>> = {}
+    const entryPointsByUrlPath: Record<string, EntrypointsState> = {}
+    let buildContext: BuildContextState = null
+
+    registry.on('workers', resetBuildContext)
 
     watch('dank.config.ts', signal, async () => {
         let updated: DankConfig
@@ -60,15 +100,17 @@ async function startDevMode(c: DankConfig, signal: AbortSignal) {
         }
         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]) {
+            Object.entries(updated.pages).map(async ([urlPath, mapping]) => {
+                c.pages[urlPath as `/${string}`] = mapping
+                const srcPath =
+                    typeof mapping === 'string' ? mapping : mapping.webpage
+                if (!pagesByUrlPath[urlPath]) {
+                    await addPage(urlPath, srcPath)
+                } else {
                     prevPages.delete(urlPath)
-                    if (pagesByUrlPath[urlPath].srcPath !== srcPath) {
+                    if (pagesByUrlPath[urlPath].fsPath !== srcPath) {
                         await updatePage(urlPath)
                     }
-                } else {
-                    await addPage(urlPath, srcPath)
                 }
             }),
         )
@@ -79,114 +121,164 @@ async function startDevMode(c: DankConfig, signal: AbortSignal) {
         updateDevServices(updated)
     })
 
-    watch('pages', signal, filename => {
+    watch(serve.dirs.pages, signal, filename => {
         if (extname(filename) === '.html') {
             for (const [urlPath, srcPath] of Object.entries(c.pages)) {
                 if (srcPath === filename) {
                     updatePage(urlPath)
                 }
             }
+            for (const [urlPath, partials] of Object.entries(
+                partialsByUrlPath,
+            )) {
+                if (partials.includes(filename)) {
+                    updatePage(urlPath, filename)
+                }
+            }
         }
     })
 
     await Promise.all(
-        Object.entries(c.pages).map(([urlPath, srcPath]) =>
-            addPage(urlPath, srcPath),
-        ),
+        Object.entries(c.pages).map(async ([urlPath, mapping]) => {
+            const srcPath =
+                typeof mapping === 'string' ? mapping : mapping.webpage
+            await addPage(urlPath, srcPath)
+            return new Promise(res =>
+                pagesByUrlPath[urlPath].once('entrypoints', res),
+            )
+        }),
     )
 
     async function addPage(urlPath: string, srcPath: string) {
-        const metadata = await processWebpage({
-            clientJS,
-            outDir: watchDir,
-            pagesDir: 'pages',
-            srcPath,
+        await mkdir(join(serve.dirs.buildWatch, urlPath), { recursive: true })
+        const htmlEntrypoint = (pagesByUrlPath[urlPath] = new HtmlEntrypoint(
+            serve,
             urlPath,
+            srcPath,
+            [{ type: 'script', js: clientJS }],
+        ))
+        htmlEntrypoint.on('entrypoints', entrypoints => {
+            const pathsIn = new Set(entrypoints.map(e => e.in))
+            if (
+                !entryPointsByUrlPath[urlPath] ||
+                !matchingEntrypoints(
+                    entryPointsByUrlPath[urlPath].pathsIn,
+                    pathsIn,
+                )
+            ) {
+                entryPointsByUrlPath[urlPath] = { entrypoints, pathsIn }
+                resetBuildContext()
+            }
+        })
+        htmlEntrypoint.on('partial', partial => {
+            if (!partialsByUrlPath[urlPath]) {
+                partialsByUrlPath[urlPath] = []
+            }
+            partialsByUrlPath[urlPath].push(partial)
         })
-        pagesByUrlPath[urlPath] = metadata
-        entryPointsByUrlPath[urlPath] = new Set(
-            metadata.entryPoints.map(e => e.in),
+        htmlEntrypoint.on(
+            'partials',
+            partials => (partialsByUrlPath[urlPath] = partials),
+        )
+        htmlEntrypoint.on('output', html =>
+            writeFile(join(serve.dirs.buildWatch, urlPath, 'index.html'), html),
         )
-        if (buildContext !== null) {
-            resetBuildContext()
-        }
     }
 
     function deletePage(urlPath: string) {
+        pagesByUrlPath[urlPath].removeAllListeners()
         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()
-        }
+    async function updatePage(urlPath: string, partial?: string) {
+        pagesByUrlPath[urlPath].emit('change', partial)
     }
 
-    function collectEntrypoints(): Array<{ in: string; out: string }> {
-        const sources: Set<string> = new Set()
-        return Object.values(pagesByUrlPath)
-            .flatMap(({ entryPoints }) => entryPoints)
+    function collectEntrypoints(): Array<EntryPoint> {
+        const unique: Set<string> = new Set()
+        const pageBundles = Object.values(entryPointsByUrlPath)
+            .flatMap(entrypointState => entrypointState.entrypoints)
             .filter(entryPoint => {
-                if (sources.has(entryPoint.in)) {
+                if (unique.has(entryPoint.in)) {
                     return false
                 } else {
-                    sources.add(entryPoint.in)
+                    unique.add(entryPoint.in)
                     return true
                 }
             })
+        const workerBundles = registry.workerEntryPoints()
+        if (workerBundles) {
+            return [...pageBundles, ...workerBundles]
+        } else {
+            return pageBundles
+        }
     }
 
     function resetBuildContext() {
-        if (buildContext === 'starting' || buildContext === 'dirty') {
-            buildContext = 'dirty'
-            return
-        }
-        if (buildContext === 'disposing') {
-            return
+        switch (buildContext) {
+            case 'starting':
+                buildContext = 'dirty'
+                return
+            case 'dirty':
+            case 'disposing':
+                return
         }
         if (buildContext !== null) {
-            const prev = buildContext
+            const disposing = buildContext.dispose()
             buildContext = 'disposing'
-            prev.dispose().then(() => {
+            disposing.then(() => {
                 buildContext = null
                 resetBuildContext()
             })
         } else {
-            startEsbuildWatch(collectEntrypoints()).then(ctx => {
-                if (buildContext === 'dirty') {
-                    buildContext = null
-                    resetBuildContext()
-                } else {
-                    buildContext = ctx
-                }
-            })
+            buildContext = 'starting'
+            startEsbuildWatch(c, registry, serve, collectEntrypoints()).then(
+                ctx => {
+                    if (buildContext === 'dirty') {
+                        buildContext = 'disposing'
+                        ctx.dispose().then(() => {
+                            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 removePartialFromPage(partial: string, urlPath: string) {
+    //     const deleteIndex = urlPathsByPartials[partial].indexOf(urlPath)
+    //     if (deleteIndex !== -1) {
+    //         if (urlPathsByPartials[partial].length === 1) {
+    //             delete urlPathsByPartials[partial]
+    //         } else {
+    //             urlPathsByPartials[partial].splice(deleteIndex, 1)
+    //         }
+    //     }
+    // }
+
+    // inital start of esbuild ctx
+    resetBuildContext()
+
+    // todo this page route state could be built on change and reused
+    const pageRoutes: PageRouteState = {
+        get urls(): Array<string> {
+            return Object.keys(c.pages)
+        },
+        get urlRewrites(): Array<UrlRewrite> {
+            return collectUrlRewrites(c)
+        },
+    }
+    const frontend = createDevServeFilesFetcher(pageRoutes, serve)
+    const devServices = startDevServices(c, signal)
+    startWebServer(serve, frontend, devServices.http, pageRoutes)
 }
 
-function hasSameValues(a: Set<string>, b: Set<string>): boolean {
+function matchingEntrypoints(a: Set<string>, b: Set<string>): boolean {
     if (a.size !== b.size) {
         return false
     }
@@ -198,73 +290,41 @@ function hasSameValues(a: Set<string>, b: Set<string>): boolean {
     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 }>,
+    c: DankConfig,
+    registry: WebsiteRegistry,
+    serve: DankServe,
+    entryPoints: Array<EntryPoint>,
 ): Promise<BuildContext> {
     const ctx = await esbuildDevContext(
-        createGlobalDefinitions(),
+        serve,
+        registry,
+        createGlobalDefinitions(serve),
         entryPoints,
-        'build/watch',
+        c.esbuild,
     )
 
     await ctx.watch()
 
     await ctx.serve({
         host: '127.0.0.1',
-        port: ESBUILD_PORT,
+        port: serve.esbuildPort,
         cors: {
-            origin: 'http://127.0.0.1:' + PORT,
+            origin: ['127.0.0.1', 'localhost'].map(
+                hostname => `http://${hostname}:${serve.dankPort}`,
+            ),
         },
     })
 
     return ctx
 }
 
-async function loadClientJS() {
-    return await readFile(
+async function loadClientJS(esbuildPort: number) {
+    const clientJS = await readFile(
         resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')),
         'utf-8',
     )
+    return clientJS.replace('3995', `${esbuildPort}`)
 }
 
 async function watch(

package/lib/services.ts

@@ -2,6 +2,16 @@ import { type ChildProcess, spawn } from 'node:child_process'
 import { basename, isAbsolute, resolve } from 'node:path'
 import type { DankConfig, DevService } from './dank.ts'
 
+export type DevServices = {
+    http: HttpServices
+}
+
+export type HttpServices = {
+    running: Array<HttpService>
+}
+
+export type HttpService = NonNullable<DevService['http']>
+
 // up to date representation of dank.config.ts services
 const running: Array<{ s: DevService; process: ChildProcess | null }> = []
 
@@ -13,13 +23,23 @@ let updating: null | {
     starting: Array<DevService>
 } = null
 
-export function startDevServices(c: DankConfig, _signal: AbortSignal) {
+export function startDevServices(
+    c: DankConfig,
+    _signal: AbortSignal,
+): DevServices {
     signal = _signal
     if (c.services?.length) {
         for (const s of c.services) {
             running.push({ s, process: startService(s) })
         }
     }
+    return {
+        http: {
+            get running(): Array<NonNullable<DevService['http']>> {
+                return running.map(({ s }) => s.http).filter(http => !!http)
+            },
+        },
+    }
 }
 
 export function updateDevServices(c: DankConfig) {
@@ -138,9 +158,13 @@ function startService(s: DevService): ChildProcess {
     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)
+        if (e.name !== 'AbortError') {
+            const cause =
+                'code' in e && e.code === 'ENOENT'
+                    ? 'program not found'
+                    : e.message
+            opPrint(s, 'error: ' + cause)
+        }
         removeFromRunning(s)
     })
 

package/lib_js/bin.js

@@ -12,10 +12,10 @@ function printHelp(task) {
         'dank serve [--minify] [--production]');
     }
     console.log('\nOPTIONS:');
+    if (!task || task === 'serve')
+        console.log('  --log-http     print access logs');
     console.log('  --minify       minify sources');
-    // if (!task || task === 'serve') {
-    // console.log('  --preview      pre-bundle and build ServiceWorker')
-    // }
+    // if (!task || task === 'serve') console.log('  --preview      pre-bundle and build ServiceWorker')
     console.log('  --production   build for production release');
     if (task) {
         console.log();