@eighty4/dank 0.0.3 → 0.0.4-0

package/client/esbuild.js

@@ -1,6 +1,9 @@
-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'));
+new EventSource('http://127.0.0.1:3995/esbuild').addEventListener('change', (e) => {
+    const { updated } = JSON.parse(e.data);
+    const changes = new Set();
+    for (const c of updated)
+        changes.add(c);
+    const cssUpdates = Array.from(changes).filter(p => p.endsWith('.css'));
     if (cssUpdates.length) {
         console.log('esbuild css updates', cssUpdates);
         const cssLinks = {};
@@ -27,8 +30,8 @@ new EventSource('http://127.0.0.1:2999/esbuild').addEventListener('change', (e)
             addCssUpdateIndicator();
         }
     }
-    if (cssUpdates.length < change.updated.length) {
-        const jsUpdates = change.updated.filter(p => !p.endsWith('.css'));
+    if (cssUpdates.length < changes.size) {
+        const jsUpdates = Array.from(changes).filter(p => !p.endsWith('.css'));
         const jsScripts = new Set();
         for (const elem of document.getElementsByTagName('script')) {
             if (elem.src.length) {

package/lib/build.ts

@@ -1,26 +1,22 @@
-import { mkdir, rm } from 'node:fs/promises'
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
+import { createBuildTag } from './build_tag.ts'
 import type { DankConfig } from './dank.ts'
-import { isProductionBuild, willMinify } from './flags.ts'
-import { copyAssets } from './public.ts'
-import { createBuildTag } from './tag.ts'
-import { writeBuildManifest, writeMetafile } from './manifest.ts'
 import { type DefineDankGlobal, createGlobalDefinitions } from './define.ts'
+import { esbuildWebpages, esbuildWorkers, type EntryPoint } from './esbuild.ts'
+import { resolveBuildFlags, type DankBuild } from './flags.ts'
 import { HtmlEntrypoint } from './html.ts'
-import { esbuildWebpages } from './esbuild.ts'
-
-export type DankBuild = {
-    dir: string
-    files: Set<string>
-}
+import { type WebsiteManifest, WebsiteRegistry } from './metadata.ts'
+import { copyAssets } from './public.ts'
 
-export async function buildWebsite(c: DankConfig): Promise<DankBuild> {
-    const buildDir = 'build'
-    const distDir = join(buildDir, 'dist')
-    const buildTag = await createBuildTag()
+export async function buildWebsite(
+    c: DankConfig,
+    build: DankBuild = resolveBuildFlags(),
+): Promise<WebsiteManifest> {
+    const buildTag = await createBuildTag(build)
     console.log(
-        willMinify()
-            ? isProductionBuild()
+        build.minify
+            ? build.production
                 ? 'minified production'
                 : 'minified'
             : 'unminified',
@@ -28,71 +24,131 @@ export async function buildWebsite(c: DankConfig): Promise<DankBuild> {
         buildTag,
         'building in ./build/dist',
     )
-    await rm(buildDir, { recursive: true, force: true })
-    await mkdir(distDir, { recursive: true })
-    await mkdir(join(buildDir, 'metafiles'), { recursive: true })
-    const staticAssets = await copyAssets(distDir)
-    const buildUrls: Array<string> = []
-    buildUrls.push(
-        ...(await buildWebpages(distDir, createGlobalDefinitions(), c.pages)),
-    )
-    if (staticAssets) {
-        buildUrls.push(...staticAssets)
-    }
-    const result = new Set(buildUrls)
-    await writeBuildManifest(buildTag, result)
-    return {
-        dir: distDir,
-        files: result,
+    await rm(build.dirs.buildRoot, { recursive: true, force: true })
+    await mkdir(build.dirs.buildDist, { recursive: true })
+    for (const subdir of Object.keys(c.pages).filter(url => url !== '/')) {
+        await mkdir(join(build.dirs.buildDist, subdir), { recursive: true })
     }
+    await mkdir(join(build.dirs.buildRoot, 'metafiles'), { recursive: true })
+    const registry = new WebsiteRegistry(build)
+    registry.pageUrls = Object.keys(c.pages)
+    registry.copiedAssets = await copyAssets(build)
+    await buildWebpages(c, registry, build, createGlobalDefinitions(build))
+    return await registry.writeManifest(buildTag)
 }
 
+// builds all webpage entrypoints in one esbuild.build context
+// to support code splitting
+// returns all built assets URLs and webpage URLs from DankConfig.pages
 async function buildWebpages(
-    distDir: string,
+    c: DankConfig,
+    registry: WebsiteRegistry,
+    build: DankBuild,
     define: DefineDankGlobal,
-    pages: Record<string, string>,
-): Promise<Array<string>> {
-    const entryPointUrls: Set<string> = new Set()
-    const entryPoints: Array<{ in: string; out: string }> = []
-    const htmlEntrypoints: Array<HtmlEntrypoint> = await Promise.all(
-        Object.entries(pages).map(async ([urlPath, fsPath]) => {
-            const html = await HtmlEntrypoint.readFrom(
-                urlPath,
-                join('pages', fsPath),
-            )
-            await html.injectPartials()
-            if (urlPath !== '/') {
-                await mkdir(join(distDir, urlPath), { recursive: true })
+) {
+    // create HtmlEntrypoint for each webpage and collect awaitable esbuild entrypoints
+    const loadingEntryPoints: Array<Promise<Array<EntryPoint>>> = []
+    const htmlEntrypoints: Array<HtmlEntrypoint> = []
+    for (const [urlPath, mapping] of Object.entries(c.pages)) {
+        const fsPath = typeof mapping === 'string' ? mapping : mapping.webpage
+        const html = new HtmlEntrypoint(build, urlPath, fsPath)
+        loadingEntryPoints.push(new Promise(res => html.on('entrypoints', res)))
+        htmlEntrypoints.push(html)
+    }
+
+    // collect esbuild entrypoints from every HtmlEntrypoint
+    const uniqueEntryPoints: Set<string> = new Set()
+    const buildEntryPoints: Array<EntryPoint> = []
+    for (const pageEntryPoints of await Promise.all(loadingEntryPoints)) {
+        for (const entryPoint of pageEntryPoints) {
+            if (!uniqueEntryPoints.has(entryPoint.in)) {
+                buildEntryPoints.push(entryPoint)
             }
-            html.collectScripts()
-                .filter(scriptImport => !entryPointUrls.has(scriptImport.in))
-                .forEach(scriptImport => {
-                    entryPointUrls.add(scriptImport.in)
-                    entryPoints.push({
-                        in: scriptImport.in,
-                        out: scriptImport.out,
-                    })
-                })
-            return html
+        }
+    }
+
+    await esbuildWebpages(build, registry, define, buildEntryPoints, c.esbuild)
+
+    // todo recursively build workers on building workers that create workers
+    const workerEntryPoints = registry.workerEntryPoints()
+    if (workerEntryPoints?.length) {
+        await esbuildWorkers(
+            build,
+            registry,
+            define,
+            workerEntryPoints,
+            c.esbuild,
+        )
+    }
+    await rewriteWorkerUrls(build, registry)
+
+    // write out html output with rewritten hrefs
+    await Promise.all(
+        htmlEntrypoints.map(async html => {
+            await writeFile(
+                join(build.dirs.buildDist, html.url, 'index.html'),
+                html.output(registry),
+            )
         }),
     )
-    const metafile = await esbuildWebpages(define, entryPoints, distDir)
-    await writeMetafile(`pages.json`, metafile)
-    // todo these hrefs would have \ path separators on windows
-    const buildUrls = [...Object.keys(pages)]
-    const mapInToOutHrefs: Record<string, string> = {}
-    for (const [outputFile, { entryPoint }] of Object.entries(
-        metafile.outputs,
-    )) {
-        const outputUrl = outputFile.replace(/^build\/dist/, '')
-        buildUrls.push(outputUrl)
-        mapInToOutHrefs[entryPoint!] = outputUrl
+}
+
+export async function rewriteWorkerUrls(
+    build: DankBuild,
+    registry: WebsiteRegistry,
+) {
+    const workers = registry.workers()
+    if (!workers) {
+        return
+    }
+    const dependentBundlePaths = workers.map(w =>
+        registry.mappedHref(w.dependentEntryPoint),
+    )
+    const bundleOutputs: Record<string, string> = {}
+
+    // collect all js file contents concurrently
+    const readingFiles = Promise.all(
+        dependentBundlePaths.map(async p => {
+            bundleOutputs[p] = await readFile(
+                join(build.dirs.projectRootAbs, build.dirs.buildDist, p),
+                'utf8',
+            )
+        }),
+    )
+
+    // build regex replacements during file reads
+    const rewriteChains: Record<string, Array<(s: string) => string>> = {}
+    for (const p of dependentBundlePaths) rewriteChains[p] = []
+    for (const w of workers) {
+        rewriteChains[registry.mappedHref(w.dependentEntryPoint)].push(s =>
+            s.replace(
+                createWorkerRegex(w.workerUrlPlaceholder),
+                `new Worker('${registry.mappedHref(w.workerEntryPoint)}')`,
+            ),
+        )
     }
+
+    // wait for file reads
+    await readingFiles
+
+    // run rewrite regex chain and write back to dist
     await Promise.all(
-        htmlEntrypoints.map(async html => {
-            html.rewriteHrefs(mapInToOutHrefs)
-            await html.writeTo(distDir)
+        Object.entries(bundleOutputs).map(async ([p, content]) => {
+            let result = content
+            for (const rewriteFn of rewriteChains[p]) {
+                result = rewriteFn(result)
+            }
+            await writeFile(
+                join(build.dirs.projectRootAbs, build.dirs.buildDist, p),
+                result,
+            )
         }),
     )
-    return buildUrls
+}
+
+export function createWorkerRegex(workerUrl: string): RegExp {
+    return new RegExp(
+        `new(?:\\s|\\r?\\n)+Worker(?:\\s|\\r?\\n)*\\((?:\\s|\\r?\\n)*['"]${workerUrl}['"](?:\\s|\\r?\\n)*\\)`,
+        'g',
+    )
 }

package/lib/{tag.ts → build_tag.ts}

@@ -1,7 +1,7 @@
 import { exec } from 'node:child_process'
-import { isProductionBuild } from './flags.ts'
+import type { DankBuild } from './flags.ts'
 
-export async function createBuildTag(): Promise<string> {
+export async function createBuildTag(build: DankBuild): Promise<string> {
     const now = new Date()
     const ms =
         now.getUTCMilliseconds() +
@@ -11,7 +11,7 @@ export async function createBuildTag(): Promise<string> {
     const date = now.toISOString().substring(0, 10)
     const time = String(ms).padStart(8, '0')
     const when = `${date}-${time}`
-    if (isProductionBuild()) {
+    if (build.production) {
         const gitHash = await new Promise((res, rej) =>
             exec('git rev-parse --short HEAD', (err, stdout) => {
                 if (err) rej(err)

package/lib/dank.ts

@@ -1,27 +1,121 @@
+import type { Plugin as EsbuildPlugin } from 'esbuild'
+
 export type DankConfig = {
     // used for releases and service worker caching
     // buildTag?:  (() => Promise<string> | string) | string
-    // mapping url to fs paths of webpages to build
-    pages: Record<`/${string}`, `${string}.html`>
 
+    // customize esbuild configs
+    esbuild?: EsbuildConfig
+
+    // mapping url to html files in the project pages dir
+    // page url (map key) represents html output path in build dir
+    // regardless of the html path in the pages dir
+    // cdn url rewriting can be simulated with PageMapping
+    pages: Record<`/${string}`, `${string}.html` | PageMapping>
+
+    // port of `dank serve` frontend dev server
+    // used for `dan serve --preview` if previewPort not specified
+    port?: number
+
+    // port used for `dank serve --preview` frontend dev server
+    previewPort?: number
+
+    // dev services launched during `dank serve`
     services?: Array<DevService>
 }
 
+// extend an html entrypoint with url rewriting similar to cdn configurations
+// after trying all webpage, bundle and asset paths, mapping patterns
+// will be tested in the alphabetical order of the webpage paths
+export type PageMapping = {
+    pattern?: RegExp
+    webpage: `${string}.html`
+}
+
 export type DevService = {
     command: string
     cwd?: string
     env?: Record<string, string>
+    http?: {
+        port: number
+    }
 }
 
+export type EsbuildConfig = {
+    // mapping of extensions to loaders
+    // if not specified, defaults to support WOFF/WOFF2 fonts
+    // with `{'.woff': 'file', '.woff2': 'file'}`
+    loaders?: Record<`.${string}`, EsbuildLoader>
+
+    // documented on https://esbuild.github.io/plugins
+    plugins?: Array<EsbuildPlugin>
+
+    // port used by esbuild.context() during `dank serve`
+    // defaults to 3995
+    port?: number
+}
+
+// documented on https://esbuild.github.io/content-types
+export type EsbuildLoader =
+    | 'base64'
+    | 'binary'
+    | 'copy'
+    | 'dataurl'
+    | 'empty'
+    | 'file'
+    | 'json'
+    | 'text'
+
 export async function defineConfig(
     c: Partial<DankConfig>,
 ): Promise<DankConfig> {
+    if (c.port !== null && typeof c.port !== 'undefined') {
+        if (typeof c.port !== 'number') {
+            throw Error('DankConfig.port must be a number')
+        }
+    }
+    if (c.previewPort !== null && typeof c.previewPort !== 'undefined') {
+        if (typeof c.previewPort !== 'number') {
+            throw Error('DankConfig.previewPort must be a number')
+        }
+    }
     validatePages(c.pages)
     validateDevServices(c.services)
-    normalizePagePaths(c.pages)
+    validateEsbuildConfig(c.esbuild)
+    normalizePagePaths(c.pages!)
     return c as DankConfig
 }
 
+function validateEsbuildConfig(esbuild?: EsbuildConfig) {
+    if (esbuild?.loaders !== null && typeof esbuild?.loaders !== 'undefined') {
+        if (typeof esbuild.loaders !== 'object') {
+            throw Error(
+                'DankConfig.esbuild.loaders must be a map of extensions to esbuild loaders',
+            )
+        } else {
+            for (const [ext, loader] of Object.entries(esbuild.loaders)) {
+                if (typeof loader !== 'string') {
+                    throw Error(
+                        `DankConfig.esbuild.loaders['${ext}'] must be a string of a loader name`,
+                    )
+                }
+            }
+        }
+    }
+    if (esbuild?.plugins !== null && typeof esbuild?.plugins !== 'undefined') {
+        if (!Array.isArray(esbuild.plugins)) {
+            throw Error(
+                'DankConfig.esbuild.plugins must be an array of esbuild plugins',
+            )
+        }
+    }
+    if (esbuild?.port !== null && typeof esbuild?.port !== 'undefined') {
+        if (typeof esbuild.port !== 'number') {
+            throw Error('DankConfig.esbuild.port must be a number')
+        }
+    }
+}
+
 function validatePages(pages?: DankConfig['pages']) {
     if (
         pages === null ||
@@ -30,15 +124,42 @@ function validatePages(pages?: DankConfig['pages']) {
     ) {
         throw Error('DankConfig.pages is required')
     }
-    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`,
-            )
+    for (const [urlPath, mapping] of Object.entries(pages)) {
+        if (typeof mapping === 'string' && mapping.endsWith('.html')) {
+            continue
+        }
+        if (typeof mapping === 'object') {
+            validatePageMapping(urlPath, mapping)
+            continue
         }
+        throw Error(
+            `DankConfig.pages['${urlPath}'] must configure an html file`,
+        )
     }
 }
 
+function validatePageMapping(urlPath: string, mapping: PageMapping) {
+    if (
+        mapping.webpage === null ||
+        typeof mapping.webpage !== 'string' ||
+        !mapping.webpage.endsWith('.html')
+    ) {
+        throw Error(
+            `DankConfig.pages['${urlPath}'].webpage must configure an html file`,
+        )
+    }
+    if (mapping.pattern === null || typeof mapping.pattern === 'undefined') {
+        return
+    }
+    if (
+        typeof mapping.pattern === 'object' &&
+        mapping.pattern.constructor.name === 'RegExp'
+    ) {
+        return
+    }
+    throw Error(`DankConfig.pages['${urlPath}'].pattern must be a RegExp`)
+}
+
 function validateDevServices(services: DankConfig['services']) {
     if (services === null || typeof services === 'undefined') {
         return
@@ -76,11 +197,26 @@ function validateDevServices(services: DankConfig['services']) {
                 }
             }
         }
+        if (s.http !== null && typeof s.http !== 'undefined') {
+            if (typeof s.http.port !== 'number') {
+                throw Error(
+                    `DankConfig.services[${i}].http.port must be a number`,
+                )
+            }
+        }
     }
 }
 
-function normalizePagePaths(pages: any) {
-    for (const urlPath of Object.keys(pages)) {
-        pages[urlPath] = pages[urlPath].replace(/^\.\//, '')
+function normalizePagePaths(pages: DankConfig['pages']) {
+    for (const [pageUrl, mapping] of Object.entries(pages)) {
+        if (typeof mapping === 'string') {
+            pages[pageUrl as `/${string}`] = normalizePagePath(mapping)
+        } else {
+            mapping.webpage = normalizePagePath(mapping.webpage)
+        }
     }
 }
+
+function normalizePagePath(p: `${string}.html`): `${string}.html` {
+    return p.replace(/^\.\//, '') as `${string}.html`
+}

package/lib/define.ts

@@ -1,4 +1,4 @@
-import { isProductionBuild } from './flags.ts'
+import type { DankBuild } from './flags.ts'
 
 export type DankGlobal = {
     IS_DEV: boolean
@@ -9,10 +9,9 @@ type DefineDankGlobalKey = 'dank.IS_DEV' | 'dank.IS_PROD'
 
 export type DefineDankGlobal = Record<DefineDankGlobalKey, string>
 
-export function createGlobalDefinitions(): DefineDankGlobal {
-    const isProduction = isProductionBuild()
+export function createGlobalDefinitions(build: DankBuild): DefineDankGlobal {
     return {
-        'dank.IS_DEV': JSON.stringify(!isProduction),
-        'dank.IS_PROD': JSON.stringify(isProduction),
+        'dank.IS_DEV': JSON.stringify(!build.production),
+        'dank.IS_PROD': JSON.stringify(build.production),
     }
 }