@eighty4/dank 0.0.1-0

package/lib/bin.ts

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import { buildWebsite } from './build.ts'
+import { loadConfig } from './config.ts'
+import { serveWebsite } from './serve.ts'
+
+function printHelp(task?: 'build' | 'serve'): never {
+    if (!task || task === 'build') {
+        console.log('dank build [--minify] [--production]')
+    }
+    if (!task || task === 'serve') {
+        console.log(
+            // 'dank serve [--minify] [--preview] [--production]',
+            'dank serve [--minify] [--production]',
+        )
+    }
+    console.log('\nOPTIONS:')
+    console.log('  --minify       minify sources')
+    // if (!task || task === 'serve') {
+    // console.log('  --preview      pre-bundle and build ServiceWorker')
+    // }
+    console.log('  --production   build for production release')
+    if (task) {
+        console.log()
+        console.log('use `dank -h` for details on all commands')
+    }
+    process.exit(1)
+}
+
+const args = (function collectProgramArgs(): Array<string> {
+    const programNames: Array<string> = ['dank', 'bin.js', 'bin.ts']
+    let args = [...process.argv]
+    while (true) {
+        const shifted = args.shift()
+        if (!shifted || programNames.some(name => shifted.endsWith(name))) {
+            return args
+        }
+    }
+})()
+
+const task: 'build' | 'serve' = (function resolveTask() {
+    const showHelp = args.some(arg => arg === '-h' || arg === '--help')
+    const task = (() => {
+        while (true) {
+            const shifted = args.shift()
+            switch (shifted) {
+                case '-h':
+                case '--help':
+                    break
+                case 'build':
+                    return 'build'
+                case 'dev':
+                case 'serve':
+                    return 'serve'
+                default:
+                    if (showHelp) {
+                        printHelp()
+                    } else if (typeof shifted === 'undefined') {
+                        printError('missing command')
+                        printHelp()
+                    } else {
+                        printError(shifted + " isn't a command")
+                        printHelp()
+                    }
+            }
+        }
+    })()
+    if (showHelp) {
+        printHelp(task)
+    }
+    return task
+})()
+
+const c = await loadConfig()
+
+try {
+    switch (task) {
+        case 'build':
+            await buildWebsite(c)
+            console.log(green('done'))
+            process.exit(0)
+        case 'serve':
+            await serveWebsite(c)
+    }
+} catch (e: unknown) {
+    errorExit(e)
+}
+
+function printError(e: unknown) {
+    if (e !== null) {
+        if (typeof e === 'string') {
+            console.error(red('error:'), e)
+        } else if (e instanceof Error) {
+            console.error(red('error:'), e.message)
+            if (e.stack) {
+                console.error(e.stack)
+            }
+        }
+    }
+}
+
+function green(s: string): string {
+    return `\u001b[32m${s}\u001b[0m`
+}
+
+function red(s: string): string {
+    return `\u001b[31m${s}\u001b[0m`
+}
+
+function errorExit(e?: unknown): never {
+    printError(e)
+    process.exit(1)
+}

package/lib/build.ts

@@ -0,0 +1,98 @@
+import { mkdir, rm } from 'node:fs/promises'
+import { join } from 'node:path'
+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 { HtmlEntrypoint } from './html.ts'
+import { esbuildWebpages } from './esbuild.ts'
+
+export type DankBuild = {
+    dir: string
+    files: Set<string>
+}
+
+export async function buildWebsite(c: DankConfig): Promise<DankBuild> {
+    const buildDir = 'build'
+    const distDir = join(buildDir, 'dist')
+    const buildTag = await createBuildTag()
+    console.log(
+        willMinify()
+            ? isProductionBuild()
+                ? 'minified production'
+                : 'minified'
+            : 'unminified',
+        'build',
+        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: buildDir,
+        files: result,
+    }
+}
+
+async function buildWebpages(
+    distDir: string,
+    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 })
+            }
+            html.collectScripts()
+                .filter(scriptImport => !entryPointUrls.has(scriptImport.in))
+                .forEach(scriptImport => {
+                    entryPointUrls.add(scriptImport.in)
+                    entryPoints.push({
+                        in: scriptImport.in,
+                        out: scriptImport.out,
+                    })
+                })
+            return html
+        }),
+    )
+    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
+    }
+    await Promise.all(
+        htmlEntrypoints.map(async html => {
+            html.rewriteHrefs(mapInToOutHrefs)
+            await html.writeTo(distDir)
+        }),
+    )
+    return buildUrls
+}

package/lib/config.ts

@@ -0,0 +1,17 @@
+import { isAbsolute, resolve } from 'node:path'
+import type { DankConfig } from './dank.ts'
+
+const CFG_P = './dank.config.ts'
+
+export async function loadConfig(path: string = CFG_P): Promise<DankConfig> {
+    const module = await import(resolveConfigPath(path))
+    return await module.default
+}
+
+export function resolveConfigPath(path: string): string {
+    if (isAbsolute(path)) {
+        return path
+    } else {
+        return resolve(process.cwd(), path)
+    }
+}

package/lib/dank.ts

@@ -0,0 +1,22 @@
+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`>
+}
+
+export async function defineConfig(
+    c: Partial<DankConfig>,
+): Promise<DankConfig> {
+    if (typeof c.pages === 'undefined' || Object.keys(c.pages).length === 0) {
+        throw Error('DankConfig.pages is required')
+    }
+    for (const [urlPath, htmlPath] of Object.entries(c.pages)) {
+        if (typeof htmlPath !== 'string' || !htmlPath.endsWith('.html')) {
+            throw Error(
+                `DankConfig.pages['${urlPath}'] must configure an html file`,
+            )
+        }
+    }
+    return c as DankConfig
+}

package/lib/define.ts

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

package/lib/esbuild.ts

@@ -0,0 +1,87 @@
+import esbuild, {
+    type BuildContext,
+    type BuildOptions,
+    type BuildResult,
+    type Message,
+    type Metafile,
+} from 'esbuild'
+import type { DefineDankGlobal } from './define.ts'
+import { willMinify } from './flags.ts'
+
+const jsBuildOptions: BuildOptions & { metafile: true; write: true } = {
+    bundle: true,
+    metafile: true,
+    minify: willMinify(),
+    platform: 'browser',
+    splitting: false,
+    treeShaking: true,
+    write: true,
+}
+
+const webpageBuildOptions: BuildOptions & { metafile: true; write: true } = {
+    assetNames: 'assets/[name]-[hash]',
+    format: 'esm',
+    ...jsBuildOptions,
+}
+
+export async function esbuildDevContext(
+    define: DefineDankGlobal,
+    entryPoints: Array<{ in: string; out: string }>,
+    outdir: string,
+): Promise<BuildContext> {
+    return await esbuild.context({
+        define,
+        entryNames: '[dir]/[name]',
+        entryPoints,
+        outdir,
+        ...webpageBuildOptions,
+    })
+}
+
+export async function esbuildWebpages(
+    define: DefineDankGlobal,
+    entryPoints: Array<{ in: string; out: string }>,
+    outdir: string,
+): Promise<Metafile> {
+    const buildResult = await esbuild.build({
+        define,
+        entryNames: '[dir]/[name]-[hash]',
+        entryPoints: removeEntryPointOutExt(entryPoints),
+        outdir,
+        ...webpageBuildOptions,
+    })
+    esbuildResultChecks(buildResult)
+    return buildResult.metafile
+}
+
+function removeEntryPointOutExt(
+    entryPoints: Array<{ in: string; out: string }>,
+) {
+    return entryPoints.map(entryPoint => {
+        return {
+            in: entryPoint.in,
+            out: entryPoint.out.replace(/\.(tsx?|jsx?|css)$/, ''),
+        }
+    })
+}
+
+function esbuildResultChecks(buildResult: BuildResult) {
+    if (buildResult.errors.length) {
+        buildResult.errors.forEach(msg => esbuildPrintMessage(msg, 'warning'))
+        process.exit(1)
+    }
+    if (buildResult.warnings.length) {
+        buildResult.warnings.forEach(msg => esbuildPrintMessage(msg, 'warning'))
+    }
+}
+
+function esbuildPrintMessage(msg: Message, category: 'error' | 'warning') {
+    const location = msg.location
+        ? ` (${msg.location.file}L${msg.location.line}:${msg.location.column})`
+        : ''
+    console.error(`esbuild ${category}${location}:`, msg.text)
+    msg.notes.forEach(note => {
+        console.error('  ', note.text)
+        if (note.location) console.error('   ', note.location)
+    })
+}

package/lib/flags.ts

@@ -0,0 +1,18 @@
+// `dank serve` will pre-bundle and use service worker
+export const isPreviewBuild = () =>
+    process.env.PREVIEW === 'true' || process.argv.includes('--preview')
+
+// `dank build` will minify sources and append git release tag to build tag
+// `dank serve` will pre-bundle with service worker and minify
+export const isProductionBuild = () =>
+    process.env.PRODUCTION === 'true' || process.argv.includes('--production')
+
+export const willMinify = () =>
+    isProductionBuild() ||
+    process.env.MINIFY === 'true' ||
+    process.argv.includes('--minify')
+
+export const willTsc = () =>
+    isProductionBuild() ||
+    process.env.TSC === 'true' ||
+    process.argv.includes('--tsc')

package/lib/html.ts

@@ -0,0 +1,188 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { dirname, join, relative } from 'node:path'
+import {
+    defaultTreeAdapter,
+    type DefaultTreeAdapterTypes,
+    parse,
+    parseFragment,
+    serialize,
+} from 'parse5'
+
+type CommentNode = DefaultTreeAdapterTypes.CommentNode
+type Document = DefaultTreeAdapterTypes.Document
+type Element = DefaultTreeAdapterTypes.Element
+type ParentNode = DefaultTreeAdapterTypes.ParentNode
+
+export type ImportedScript = {
+    type: 'script' | 'style'
+    href: string
+    elem: Element
+    in: string
+    out: string
+}
+
+// unenforced but necessary sequence:
+//  injectPartials
+//  collectScripts
+//  rewriteHrefs
+//  writeTo
+export class HtmlEntrypoint {
+    static async readFrom(
+        urlPath: string,
+        fsPath: string,
+    ): Promise<HtmlEntrypoint> {
+        let html: string
+        try {
+            html = await readFile(fsPath, 'utf-8')
+        } catch (e) {
+            console.log(`\u001b[31merror:\u001b[0m`, fsPath, 'does not exist')
+            process.exit(1)
+        }
+        return new HtmlEntrypoint(urlPath, html, fsPath)
+    }
+
+    #document: Document
+    #fsPath: string
+    #partials: Array<CommentNode> = []
+    #scripts: Array<ImportedScript> = []
+    #url: string
+
+    constructor(url: string, html: string, fsPath: string) {
+        this.#url = url
+        this.#document = parse(html)
+        this.#fsPath = fsPath
+    }
+
+    async injectPartials() {
+        this.#collectPartials(this.#document)
+        await this.#injectPartials()
+    }
+
+    collectScripts(): Array<ImportedScript> {
+        this.#collectScripts(this.#document)
+        return this.#scripts
+    }
+
+    // rewrites hrefs to content hashed urls
+    // call without hrefs to rewrite tsx? ext to js
+    rewriteHrefs(hrefs?: Record<string, string>) {
+        for (const importScript of this.#scripts) {
+            const rewriteTo = hrefs ? hrefs[importScript.in] : null
+            if (importScript.type === 'script') {
+                if (
+                    importScript.in.endsWith('.tsx') ||
+                    importScript.in.endsWith('.ts')
+                ) {
+                    importScript.elem.attrs.find(
+                        attr => attr.name === 'src',
+                    )!.value = rewriteTo || `/${importScript.out}.js`
+                }
+            } else if (importScript.type === 'style') {
+                importScript.elem.attrs.find(
+                    attr => attr.name === 'href',
+                )!.value = rewriteTo || `/${importScript.out}.css`
+            }
+        }
+    }
+
+    async writeTo(buildDir: string): Promise<void> {
+        await writeFile(
+            join(buildDir, this.#url, 'index.html'),
+            serialize(this.#document),
+        )
+    }
+
+    async #injectPartials() {
+        for (const commentNode of this.#partials) {
+            const pp = commentNode.data
+                .match(/\{\{(?<pp>.+)\}\}/)!
+                .groups!.pp.trim()
+            const fragment = parseFragment(await readFile(pp, 'utf-8'))
+            for (const node of fragment.childNodes) {
+                if (node.nodeName === 'script') {
+                    this.#rewritePathFromPartial(pp, node, 'src')
+                } else if (
+                    node.nodeName === 'link' &&
+                    hasAttr(node, 'rel', 'stylesheet')
+                ) {
+                    this.#rewritePathFromPartial(pp, node, 'href')
+                }
+                defaultTreeAdapter.insertBefore(
+                    commentNode.parentNode!,
+                    node,
+                    commentNode,
+                )
+            }
+            defaultTreeAdapter.detachNode(commentNode)
+        }
+    }
+
+    // rewrite a ts or css href relative to an html partial to be relative to the html entrypoint
+    #rewritePathFromPartial(
+        pp: string,
+        elem: Element,
+        attrName: 'href' | 'src',
+    ) {
+        const attr = getAttr(elem, attrName)
+        if (attr) {
+            attr.value = join(
+                relative(dirname(this.#fsPath), dirname(pp)),
+                attr.value,
+            )
+        }
+    }
+
+    #collectPartials(node: ParentNode) {
+        for (const childNode of node.childNodes) {
+            if (childNode.nodeName === '#comment' && 'data' in childNode) {
+                if (/\{\{.+\}\}/.test(childNode.data)) {
+                    this.#partials.push(childNode)
+                }
+            } else if ('childNodes' in childNode) {
+                this.#collectPartials(childNode)
+            }
+        }
+    }
+
+    #collectScripts(node: ParentNode) {
+        for (const childNode of node.childNodes) {
+            if (childNode.nodeName === 'script') {
+                const srcAttr = childNode.attrs.find(
+                    attr => attr.name === 'src',
+                )
+                if (srcAttr) {
+                    this.#addScript('script', srcAttr.value, childNode)
+                }
+            } else if (
+                childNode.nodeName === 'link' &&
+                hasAttr(childNode, 'rel', 'stylesheet')
+            ) {
+                const hrefAttr = getAttr(childNode, 'href')
+                if (hrefAttr) {
+                    this.#addScript('style', hrefAttr.value, childNode)
+                }
+            } else if ('childNodes' in childNode) {
+                this.#collectScripts(childNode)
+            }
+        }
+    }
+
+    #addScript(type: ImportedScript['type'], href: string, elem: Element) {
+        const inPath = join(dirname(this.#fsPath), href)
+        this.#scripts.push({
+            type,
+            href,
+            elem,
+            in: inPath,
+            out: inPath.replace(/^pages\//, ''),
+        })
+    }
+}
+
+function getAttr(elem: Element, name: string) {
+    return elem.attrs.find(attr => attr.name === name)
+}
+
+function hasAttr(elem: Element, name: string, value: string): boolean {
+    return elem.attrs.some(attr => attr.name === name && attr.value === value)
+}

package/lib/http.ts

@@ -0,0 +1,118 @@
+import { createReadStream } from 'node:fs'
+import {
+    createServer,
+    type IncomingHttpHeaders,
+    type IncomingMessage,
+    type OutgoingHttpHeaders,
+    type ServerResponse,
+} from 'node:http'
+import { extname, join as fsJoin } from 'node:path'
+import { isProductionBuild } from './flags.ts'
+
+export type FrontendFetcher = (
+    url: URL,
+    headers: Headers,
+    res: ServerResponse,
+) => void
+
+export function createWebServer(
+    port: number,
+    frontendFetcher: FrontendFetcher,
+): ReturnType<typeof createServer> {
+    const serverAddress = 'http://localhost:' + port
+    return createServer((req: IncomingMessage, res: ServerResponse) => {
+        if (!req.url || !req.method) {
+            res.end()
+        } else {
+            const url = new URL(serverAddress + req.url)
+            if (req.method !== 'GET') {
+                res.writeHead(405)
+                res.end()
+            } else {
+                frontendFetcher(url, convertHeadersToFetch(req.headers), res)
+            }
+        }
+    })
+}
+
+export function createBuiltDistFilesFetcher(
+    dir: string,
+    files: Set<string>,
+): FrontendFetcher {
+    return (url: URL, _headers: Headers, res: ServerResponse) => {
+        if (!files.has(url.pathname)) {
+            res.writeHead(404)
+            res.end()
+        } else {
+            const mimeType = resolveMimeType(url)
+            res.setHeader('Content-Type', mimeType)
+            const reading = createReadStream(
+                mimeType === 'text/html'
+                    ? fsJoin(dir, url.pathname, 'index.html')
+                    : fsJoin(dir, url.pathname),
+            )
+            reading.pipe(res)
+            reading.on('error', err => {
+                console.error(
+                    `${url.pathname} file read ${reading.path} error ${err.message}`,
+                )
+                res.statusCode = 500
+                res.end()
+            })
+        }
+    }
+}
+
+export function createLocalProxyFilesFetcher(port: number): FrontendFetcher {
+    const proxyAddress = 'http://127.0.0.1:' + port
+    return (url: URL, _headers: Headers, res: ServerResponse) => {
+        fetch(proxyAddress + url.pathname).then(fetchResponse => {
+            res.writeHead(
+                fetchResponse.status,
+                convertHeadersFromFetch(fetchResponse.headers),
+            )
+            fetchResponse.bytes().then(data => res.end(data))
+        })
+    }
+}
+
+function resolveMimeType(url: URL): string {
+    switch (extname(url.pathname)) {
+        case '':
+            return 'text/html'
+        case '.js':
+            return 'text/javascript'
+        case '.json':
+            return 'application/json'
+        case '.css':
+            return 'text/css'
+        case '.svg':
+            return 'image/svg+xml'
+        case '.png':
+            return 'image/png'
+        default:
+            console.warn('? mime type for', url.pathname)
+            if (!isProductionBuild()) process.exit(1)
+            return 'application/octet-stream'
+    }
+}
+
+function convertHeadersFromFetch(from: Headers): OutgoingHttpHeaders {
+    const to: OutgoingHttpHeaders = {}
+    for (const name of from.keys()) {
+        to[name] = from.get(name)!
+    }
+    return to
+}
+
+function convertHeadersToFetch(from: IncomingHttpHeaders): Headers {
+    const to = new Headers()
+    for (const [name, values] of Object.entries(from)) {
+        if (Array.isArray(values)) {
+            for (const value of values) to.append(name, value)
+        } else if (values) {
+            to.set(name, values)
+        }
+    }
+    return to
+}