@eighty4/dank 0.0.1-3 → 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Build DANK webpages
+
+### Get developing right away:
+
+```shell
+bun create dank --out-dir www
+
+npm create dank -- --out-dir www
+
+pnpm create dank --out-dir www
+```
+
+### DANK has some perks:
+
+- Webpage-first development for multi-page websites
+- TypeScript supported with `<script src="./dank.ts">`
+- Code splitting via `esbuild` bundler across all webpages
+- Hashes added to all bundled assets for efficient cache utilization
+- `dank serve` updates CSS in real-time (hot-reloading)
+- `dank serve` launches development processes and merges their stdio
+- `dank serve --preview` builds the website and serves the output from `dist`
+- `dank build --production` optimizes with `esbuild` minifying and tree-shaking
+- DANK's codebase is so tiny you can read it all in 20 minutes
+
+### DANK isn't for every use case!
+
+[Vite](https://vite.dev) is the right move for building a Single-Page Application.
+
+Dynamic content with Static-Site Generation or Server-Side Rendering should use
+[Astro](https://astro.build), [Next.js](https://nextjs.org) or [SvelteKit](https://svelte.dev).
+
+#### DANK is an ideal choice for multi-page websites deployed to a CDN that integrate with serverless components and APIs.
+
+## `dank.config.ts` examples
+
+Webpages and their URLs are configured explicitly to keep your URLs
+and workspace organized independently:
+
+```typescript
+import { defineConfig } from '@eighty4/dank'
+
+export default defineConfig({
+    pages: {
+        '/': './home.html',
+    },
+})
+```
+
+Streamline development with `dank serve` launching APIs and databases when starting your website's dev server:
+
+```typescript
+import { defineConfig } from '@eighty4/dank'
+
+export default defineConfig({
+    pages: {
+        '/': './home.html',
+    },
+    services: [
+        {
+            command: 'node --watch --env-file-if-exists=.env.dev server.ts',
+            cwd: './api',
+        },
+    ],
+})
+```

package/client/esbuild.js

@@ -44,25 +44,37 @@ new EventSource('http://127.0.0.1:2999/esbuild').addEventListener('change', (e)
         }
     }
 });
-function addCssUpdateIndicator() {
+export 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;
-        }
-    };
+    indicator.animate([
+        { opacity: 0 },
+        { opacity: 1 },
+        { opacity: 1 },
+        { opacity: 1 },
+        { opacity: 0.75 },
+        { opacity: 0.5 },
+        { opacity: 0.25 },
+        { opacity: 0 },
+    ], {
+        duration: 400,
+        iterations: 1,
+        direction: 'normal',
+        easing: 'linear',
+    });
     document.body.appendChild(indicator);
-    setTimeout(() => (indicator.style.opacity = '1'), 0);
+    Promise.all(indicator.getAnimations().map(a => a.finished)).then(() => indicator.remove());
 }
 function addJsReloadIndicator() {
-    document.body.appendChild(createUpdateIndicator('orange', '9000'));
+    const indicator = createUpdateIndicator('orange', '9000');
+    indicator.style.opacity = '0';
+    indicator.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 400,
+        iterations: 1,
+        direction: 'normal',
+        easing: 'ease-in',
+    });
+    document.body.appendChild(indicator);
 }
 function createUpdateIndicator(color, zIndex) {
     const indicator = document.createElement('div');
@@ -74,4 +86,3 @@ function createUpdateIndicator(color, zIndex) {
     indicator.style.boxSizing = 'border-box';
     return indicator;
 }
-export {};

package/lib/build.ts

@@ -42,7 +42,7 @@ export async function buildWebsite(c: DankConfig): Promise<DankBuild> {
     const result = new Set(buildUrls)
     await writeBuildManifest(buildTag, result)
     return {
-        dir: buildDir,
+        dir: distDir,
         files: result,
     }
 }

package/lib/config.ts

@@ -4,7 +4,8 @@ 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))
+    const modulePath = `${resolveConfigPath(path)}?${Date.now()}`
+    const module = await import(modulePath)
     return await module.default
 }
 

package/lib/dank.ts

@@ -2,7 +2,7 @@ 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`>
+    pages: Record<`/${string}`, `${string}.html`>
 
     services?: Array<DevService>
 }
@@ -18,6 +18,7 @@ export async function defineConfig(
 ): Promise<DankConfig> {
     validatePages(c.pages)
     validateDevServices(c.services)
+    normalizePagePaths(c.pages)
     return c as DankConfig
 }
 
@@ -77,3 +78,9 @@ function validateDevServices(services: DankConfig['services']) {
         }
     }
 }
+
+function normalizePagePaths(pages: any) {
+    for (const urlPath of Object.keys(pages)) {
+        pages[urlPath] = pages[urlPath].replace(/^\.\//, '')
+    }
+}

package/lib/esbuild.ts

@@ -21,6 +21,11 @@ const jsBuildOptions: BuildOptions & { metafile: true; write: true } = {
 const webpageBuildOptions: BuildOptions & { metafile: true; write: true } = {
     assetNames: 'assets/[name]-[hash]',
     format: 'esm',
+    loader: {
+        '.tff': 'file',
+        '.woff': 'file',
+        '.woff2': 'file',
+    },
     ...jsBuildOptions,
 }
 
@@ -35,6 +40,8 @@ export async function esbuildDevContext(
         entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
+        metafile: false,
+        write: false,
     })
 }
 

package/lib/html.ts

@@ -1,5 +1,6 @@
 import { readFile, writeFile } from 'node:fs/promises'
 import { dirname, join, relative } from 'node:path'
+import { extname } from 'node:path/posix'
 import {
     defaultTreeAdapter,
     type DefaultTreeAdapterTypes,
@@ -75,12 +76,12 @@ export class HtmlEntrypoint {
                 ) {
                     importScript.elem.attrs.find(
                         attr => attr.name === 'src',
-                    )!.value = rewriteTo || `/${importScript.out}.js`
+                    )!.value = rewriteTo || `/${importScript.out}`
                 }
             } else if (importScript.type === 'style') {
                 importScript.elem.attrs.find(
                     attr => attr.name === 'href',
-                )!.value = rewriteTo || `/${importScript.out}.css`
+                )!.value = rewriteTo || `/${importScript.out}`
             }
         }
     }
@@ -182,12 +183,19 @@ export class HtmlEntrypoint {
 
     #addScript(type: ImportedScript['type'], href: string, elem: Element) {
         const inPath = join(dirname(this.#fsPath), href)
+        let outPath = inPath.replace(/^pages\//, '')
+        if (type === 'script' && !outPath.endsWith('.js')) {
+            outPath = outPath.replace(
+                new RegExp(extname(outPath).substring(1) + '$'),
+                'js',
+            )
+        }
         this.#scripts.push({
             type,
             href,
             elem,
             in: inPath,
-            out: inPath.replace(/^pages\//, ''),
+            out: outPath,
         })
     }
 }

package/lib/http.ts

@@ -1,4 +1,5 @@
 import { createReadStream } from 'node:fs'
+import { stat } from 'node:fs/promises'
 import {
     createServer,
     type IncomingHttpHeaders,
@@ -6,7 +7,7 @@ import {
     type OutgoingHttpHeaders,
     type ServerResponse,
 } from 'node:http'
-import { extname, join as fsJoin } from 'node:path'
+import { extname, join } from 'node:path'
 import { isProductionBuild } from './flags.ts'
 
 export type FrontendFetcher = (
@@ -44,41 +45,122 @@ export function createBuiltDistFilesFetcher(
             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()
-            })
+            const p =
+                extname(url.pathname) === ''
+                    ? join(dir, url.pathname, 'index.html')
+                    : join(dir, url.pathname)
+            streamFile(p, res)
         }
     }
 }
 
-export function createLocalProxyFilesFetcher(port: number): FrontendFetcher {
-    const proxyAddress = 'http://127.0.0.1:' + port
+type DevServeOpts = {
+    // ref of original DankConfig['pages'] mapping
+    // updated incrementally instead of replacing
+    pages: Record<string, string>
+    // dir processed html files are written to
+    pagesDir: string
+    // port to esbuild dev server
+    proxyPort: number
+    // dir of public assets
+    publicDir: string
+}
+
+export function createDevServeFilesFetcher(
+    opts: DevServeOpts,
+): FrontendFetcher {
+    const proxyAddress = 'http://127.0.0.1:' + opts.proxyPort
     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))
-        })
+        if (opts.pages[url.pathname]) {
+            streamFile(join(opts.pagesDir, url.pathname + 'index.html'), res)
+        } else {
+            const maybePublicPath = join(opts.publicDir, url.pathname)
+            exists(join(opts.publicDir, url.pathname)).then(fromPublic => {
+                if (fromPublic) {
+                    streamFile(maybePublicPath, res)
+                } else {
+                    retryFetchWithTimeout(proxyAddress + url.pathname)
+                        .then(fetchResponse => {
+                            res.writeHead(
+                                fetchResponse.status,
+                                convertHeadersFromFetch(fetchResponse.headers),
+                            )
+                            fetchResponse.bytes().then(data => res.end(data))
+                        })
+                        .catch(e => {
+                            if (e === 'retrytimeout') {
+                                res.writeHead(504)
+                            } else {
+                                console.error(
+                                    'unknown frontend proxy fetch error:',
+                                    e,
+                                )
+                                res.writeHead(502)
+                            }
+                            res.end()
+                        })
+                }
+            })
+        }
     }
 }
 
-function resolveMimeType(url: URL): string {
-    switch (extname(url.pathname)) {
-        case '':
+const PROXY_FETCH_RETRY_INTERVAL = 27
+const PROXY_FETCH_RETRY_TIMEOUT = 1000
+
+async function retryFetchWithTimeout(url: string): Promise<Response> {
+    let timeout = Date.now() + PROXY_FETCH_RETRY_TIMEOUT
+    while (true) {
+        try {
+            return await fetch(url)
+        } catch (e: any) {
+            if (isNodeFailedFetch(e) || isBunFailedFetch(e)) {
+                if (timeout < Date.now()) {
+                    throw 'retrytimeout'
+                } else {
+                    await new Promise(res =>
+                        setTimeout(res, PROXY_FETCH_RETRY_INTERVAL),
+                    )
+                }
+            } else {
+                throw e
+            }
+        }
+    }
+}
+
+function isBunFailedFetch(e: any): boolean {
+    return e.code === 'ConnectionRefused'
+}
+
+function isNodeFailedFetch(e: any): boolean {
+    return e.message === 'fetch failed'
+}
+
+async function exists(p: string): Promise<boolean> {
+    try {
+        const maybe = stat(p)
+        return (await maybe).isFile()
+    } catch (ignore) {
+        return false
+    }
+}
+
+function streamFile(p: string, res: ServerResponse) {
+    const mimeType = resolveMimeType(p)
+    res.setHeader('Content-Type', mimeType)
+    const reading = createReadStream(p)
+    reading.pipe(res)
+    reading.on('error', err => {
+        console.error(`file read ${reading.path} error ${err.message}`)
+        res.statusCode = 500
+        res.end()
+    })
+}
+
+function resolveMimeType(p: string): string {
+    switch (extname(p)) {
+        case '.html':
             return 'text/html'
         case '.js':
             return 'text/javascript'
@@ -90,8 +172,14 @@ function resolveMimeType(url: URL): string {
             return 'image/svg+xml'
         case '.png':
             return 'image/png'
+        case '.ttf':
+            return 'font/ttf'
+        case '.woff':
+            return 'font/woff'
+        case '.woff2':
+            return 'font/woff2'
         default:
-            console.warn('? mime type for', url.pathname)
+            console.warn('? mime type for', p)
             if (!isProductionBuild()) process.exit(1)
             return 'application/octet-stream'
     }