@eighty4/dank 0.0.1-4 → 0.0.2

package/README.md

@@ -1,31 +1,35 @@
 # Build DANK webpages
 
-DANK has some perks:
+### 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 mins
+- 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.
-For SEO optimizing dynamic content with Server-Side Rendering,
-check out [Next.js](https://nextjs.org) or [Astro](https://astro.build).
-
-DANK is an ideal choice for building multi-page websites deployed to a CDN.
-
-## Getting started
+### DANK isn't for every use case!
 
-```shell
-bun create dank --out-dir www
+[Vite](https://vite.dev) is the right move for building a Single-Page Application.
 
-npm create dank -- --out-dir www
+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).
 
-pnpm create dank --out-dir www
-```
+#### DANK is an ideal choice for multi-page websites deployed to a CDN that integrate with serverless components and APIs.
 
 ## `dank.config.ts` examples
 
@@ -42,7 +46,7 @@ export default defineConfig({
 })
 ```
 
-Streamline development with `dank serve` launching API when starting your dev server:
+Streamline development with `dank serve` launching APIs and databases when starting your website's dev server:
 
 ```typescript
 import { defineConfig } from '@eighty4/dank'

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/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

@@ -40,6 +40,8 @@ export async function esbuildDevContext(
         entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
+        metafile: false,
+        write: false,
     })
 }
 

package/lib/http.ts

@@ -1,4 +1,5 @@
 import { createReadStream } from 'node:fs'
+import { stat } from 'node:fs/promises'
 import {
     createServer,
     type IncomingHttpHeaders,
@@ -6,8 +7,8 @@ import {
     type OutgoingHttpHeaders,
     type ServerResponse,
 } from 'node:http'
-import { extname, join as fsJoin } from 'node:path'
-import { isProductionBuild } from './flags.ts'
+import { extname, join } from 'node:path'
+import mime from 'mime'
 
 export type FrontendFetcher = (
     url: URL,
@@ -44,65 +45,118 @@ 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()
+                        })
+                }
+            })
+        }
+    }
+}
+
+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 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'
-        case '.ttf':
-            return 'font/ttf'
-        case '.woff':
-            return 'font/woff'
-        case '.woff2':
-            return 'font/woff2'
-        default:
-            console.warn('? mime type for', url.pathname)
-            if (!isProductionBuild()) process.exit(1)
-            return 'application/octet-stream'
+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) {
+    res.setHeader('Content-Type', mime.getType(p) || 'application/octet-stream')
+    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 convertHeadersFromFetch(from: Headers): OutgoingHttpHeaders {
     const to: OutgoingHttpHeaders = {}
     for (const name of from.keys()) {