@eighty4/dank 0.0.1-2 → 0.0.1-4

package/README.md

@@ -0,0 +1,61 @@
+# Build DANK webpages
+
+DANK has some perks:
+
+- Webpage-first development for multi-page websites
+- Code splitting via `esbuild` bundler across all webpages
+- `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 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
+
+```shell
+bun create dank --out-dir www
+
+npm create dank -- --out-dir www
+
+pnpm create dank --out-dir www
+```
+
+## `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 API when starting your 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

@@ -0,0 +1,77 @@
+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'));
+    if (cssUpdates.length) {
+        console.log('esbuild css updates', cssUpdates);
+        const cssLinks = {};
+        for (const elem of document.getElementsByTagName('link')) {
+            if (elem.getAttribute('rel') === 'stylesheet') {
+                const url = new URL(elem.href);
+                if ((url.host = location.host)) {
+                    cssLinks[url.pathname] = elem;
+                }
+            }
+        }
+        let swappedCss = false;
+        for (const cssUpdate of cssUpdates) {
+            const cssLink = cssLinks[cssUpdate];
+            if (cssLink) {
+                const next = cssLink.cloneNode();
+                next.href = `${cssUpdate}?${Math.random().toString(36).slice(2)}`;
+                next.onload = () => cssLink.remove();
+                cssLink.parentNode.insertBefore(next, cssLink.nextSibling);
+                swappedCss = true;
+            }
+        }
+        if (swappedCss) {
+            addCssUpdateIndicator();
+        }
+    }
+    if (cssUpdates.length < change.updated.length) {
+        const jsUpdates = change.updated.filter(p => !p.endsWith('.css'));
+        const jsScripts = new Set();
+        for (const elem of document.getElementsByTagName('script')) {
+            if (elem.src.length) {
+                const url = new URL(elem.src);
+                if ((url.host = location.host)) {
+                    jsScripts.add(url.pathname);
+                }
+            }
+        }
+        if (jsUpdates.some(jsUpdate => jsScripts.has(jsUpdate))) {
+            console.log('esbuild js updates require reload');
+            addJsReloadIndicator();
+        }
+    }
+});
+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;
+        }
+    };
+    document.body.appendChild(indicator);
+    setTimeout(() => (indicator.style.opacity = '1'), 0);
+}
+function addJsReloadIndicator() {
+    document.body.appendChild(createUpdateIndicator('orange', '9000'));
+}
+function createUpdateIndicator(color, zIndex) {
+    const indicator = document.createElement('div');
+    indicator.style.border = '6px dashed ' + color;
+    indicator.style.zIndex = zIndex;
+    indicator.style.position = 'fixed';
+    indicator.style.top = indicator.style.left = '1px';
+    indicator.style.height = indicator.style.width = 'calc(100% - 2px)';
+    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/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,
 }
 
@@ -32,7 +37,7 @@ export async function esbuildDevContext(
     return await esbuild.context({
         define,
         entryNames: '[dir]/[name]',
-        entryPoints,
+        entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
     })
@@ -54,6 +59,9 @@ export async function esbuildWebpages(
     return buildResult.metafile
 }
 
+// esbuild will append the .js or .css to output filenames
+// keeping extension on entryPoints data for consistency
+// and removing and mapping entryPoints to pass to esbuild
 function removeEntryPointOutExt(
     entryPoints: Array<{ in: string; out: string }>,
 ) {

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,16 +76,29 @@ 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}`
             }
         }
     }
 
+    appendScript(clientJS: string) {
+        const scriptNode = parseFragment(
+            `<script type="module">${clientJS}</script>`,
+        ).childNodes[0]
+        const htmlNode = this.#document.childNodes.find(
+            node => node.nodeName === 'html',
+        ) as ParentNode
+        const headNode = htmlNode.childNodes.find(
+            node => node.nodeName === 'head',
+        ) as ParentNode | undefined
+        defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode)
+    }
+
     async writeTo(buildDir: string): Promise<void> {
         await writeFile(
             join(buildDir, this.#url, 'index.html'),
@@ -169,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

@@ -90,6 +90,12 @@ 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)
             if (!isProductionBuild()) process.exit(1)

package/lib/serve.ts

@@ -1,5 +1,5 @@
-import { mkdir, rm } from 'node:fs/promises'
-import { join } from 'node:path'
+import { mkdir, readFile, rm } from 'node:fs/promises'
+import { join, resolve } from 'node:path'
 import { buildWebsite } from './build.ts'
 import type { DankConfig } from './dank.ts'
 import { createGlobalDefinitions } from './define.ts'
@@ -47,6 +47,11 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
     await mkdir(watchDir, { recursive: true })
     await copyAssets(watchDir)
 
+    const clientJS = await readFile(
+        resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')),
+        'utf-8',
+    )
+
     const entryPointUrls: Set<string> = new Set()
     const entryPoints: Array<{ in: string; out: string }> = []
 
@@ -70,6 +75,7 @@ async function startEsbuildWatch(c: DankConfig): Promise<{ port: number }> {
                     })
                 })
             html.rewriteHrefs()
+            html.appendScript(clientJS)
             await html.writeTo(watchDir)
             return html
         }),

package/lib_js/build.js

@@ -28,7 +28,7 @@ export async function buildWebsite(c) {
     const result = new Set(buildUrls);
     await writeBuildManifest(buildTag, result);
     return {
-        dir: buildDir,
+        dir: distDir,
         files: result,
     };
 }

package/lib_js/esbuild.js

@@ -12,13 +12,18 @@ const jsBuildOptions = {
 const webpageBuildOptions = {
     assetNames: 'assets/[name]-[hash]',
     format: 'esm',
+    loader: {
+        '.tff': 'file',
+        '.woff': 'file',
+        '.woff2': 'file',
+    },
     ...jsBuildOptions,
 };
 export async function esbuildDevContext(define, entryPoints, outdir) {
     return await esbuild.context({
         define,
         entryNames: '[dir]/[name]',
-        entryPoints,
+        entryPoints: removeEntryPointOutExt(entryPoints),
         outdir,
         ...webpageBuildOptions,
     });
@@ -34,6 +39,9 @@ export async function esbuildWebpages(define, entryPoints, outdir) {
     esbuildResultChecks(buildResult);
     return buildResult.metafile;
 }
+// esbuild will append the .js or .css to output filenames
+// keeping extension on entryPoints data for consistency
+// and removing and mapping entryPoints to pass to esbuild
 function removeEntryPointOutExt(entryPoints) {
     return entryPoints.map(entryPoint => {
         return {

package/lib_js/html.js

@@ -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, parse, parseFragment, serialize, } from 'parse5';
 // unenforced but necessary sequence:
 //  injectPartials
@@ -44,14 +45,20 @@ export class HtmlEntrypoint {
             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`;
+                    importScript.elem.attrs.find(attr => attr.name === 'src').value = rewriteTo || `/${importScript.out}`;
                 }
             }
             else if (importScript.type === 'style') {
-                importScript.elem.attrs.find(attr => attr.name === 'href').value = rewriteTo || `/${importScript.out}.css`;
+                importScript.elem.attrs.find(attr => attr.name === 'href').value = rewriteTo || `/${importScript.out}`;
             }
         }
     }
+    appendScript(clientJS) {
+        const scriptNode = parseFragment(`<script type="module">${clientJS}</script>`).childNodes[0];
+        const htmlNode = this.#document.childNodes.find(node => node.nodeName === 'html');
+        const headNode = htmlNode.childNodes.find(node => node.nodeName === 'head');
+        defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode);
+    }
     async writeTo(buildDir) {
         await writeFile(join(buildDir, this.#url, 'index.html'), serialize(this.#document));
     }
@@ -115,12 +122,16 @@ export class HtmlEntrypoint {
     }
     #addScript(type, href, elem) {
         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_js/http.js

@@ -64,6 +64,12 @@ function resolveMimeType(url) {
             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())

package/lib_js/serve.js

@@ -1,5 +1,5 @@
-import { mkdir, rm } from 'node:fs/promises';
-import { join } from 'node:path';
+import { mkdir, readFile, rm } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
 import { buildWebsite } from "./build.js";
 import { createGlobalDefinitions } from "./define.js";
 import { esbuildDevContext } from "./esbuild.js";
@@ -33,6 +33,7 @@ async function startEsbuildWatch(c) {
     const watchDir = join('build', 'watch');
     await mkdir(watchDir, { recursive: true });
     await copyAssets(watchDir);
+    const clientJS = await readFile(resolve(import.meta.dirname, join('..', 'client', 'esbuild.js')), 'utf-8');
     const entryPointUrls = new Set();
     const entryPoints = [];
     await Promise.all(Object.entries(c.pages).map(async ([url, srcPath]) => {
@@ -51,6 +52,7 @@ async function startEsbuildWatch(c) {
             });
         });
         html.rewriteHrefs();
+        html.appendScript(clientJS);
         await html.writeTo(watchDir);
         return html;
     }));

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@eighty4/dank",
-  "version": "0.0.1-2",
+  "version": "0.0.1-4",
   "type": "module",
+  "description": "Multi-page development system for CDN-deployed websites",
+  "keywords": [
+    "frontend",
+    "bundler",
+    "esbuild",
+    "dank"
+  ],
   "bin": "./lib_js/bin.js",
   "exports": {
     ".": {
@@ -20,12 +27,13 @@
     "typescript": "^5.9.2"
   },
   "files": [
+    "client/esbuild.js",
     "lib/*.ts",
     "lib_js/*.js",
     "lib_types/*.d.ts"
   ],
   "scripts": {
-    "build": "tsc && tsc -p tsconfig.exports.json",
+    "build": "tsc && tsc -p tsconfig.client.json && tsc -p tsconfig.exports.json",
     "fmt": "prettier --write .",
     "fmtcheck": "prettier --check .",
     "typecheck": "tsc --noEmit"