build: minify html, default to esm cdn.

Author: knightedcodemonkey

.github/workflows/deploy.yml

@@ -32,7 +32,7 @@ jobs:
         run: npm ci
 
       - name: Build Production Site
-        run: npm run build:esm
+        run: npm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5.0.0

docs/build-and-deploy.md

@@ -3,7 +3,7 @@
 This project uses two runtime modes:
 
 - Local development mode: dynamic CDN resolution from `src/modules/cdn.js` with esm.sh as default.
-- Production mode: CDN-first build artifacts in `dist`, with `build:esm` as the current preferred deploy build.
+- Production mode: CDN-first build artifacts in `dist`, with `npm run build` defaulting to ESM unless `KNIGHTED_PRIMARY_CDN` is set.
 
 ## Local Development
 
@@ -29,6 +29,7 @@ Select a different production primary CDN at build time:
 ```sh
 KNIGHTED_PRIMARY_CDN=esm npm run build
 KNIGHTED_PRIMARY_CDN=jspmGa npm run build
+KNIGHTED_PRIMARY_CDN=importMap npm run build
 ```
 
 Convenience scripts are also available:
@@ -44,25 +45,29 @@ npm run build:importmap-mode
 <!-- prettier-ignore-start -->
 | Mode | Resolver | Import map step | JSPM index needed | Typical use |
 | --- | --- | --- | --- | --- |
-| `importMap` | Import map in `dist/index.html` | Yes | Yes | Default production mode |
-| `esm` | `src/modules/cdn.js` (`esm.sh` primary) | No | No | Stable fallback mode |
+| `importMap` | Import map in `dist/index.html` | Yes | Yes | JSPM-indexed release builds |
+| `esm` | `src/modules/cdn.js` (`esm.sh` primary) | No | No | Current default and deploy mode |
 | `jspmGa` | `src/modules/cdn.js` (`ga.jspm.io` primary) | No | No | Direct ga.jspm.io testing |
 <!-- prettier-ignore-end -->
 
 Mode notes:
 
 - `importMap`: Import-map mode when JSPM has indexed the required graph.
-- `esm`: Current preferred deploy build mode.
+- `esm`: Current default `build` mode and preferred deploy build mode.
 - `jspmGa`: Direct ga.jspm.io URL mode without import-map generation.
 
-This runs two steps:
+`npm run build` runs four steps:
 
 1. `npm run build:prepare`
 
 - Copies `src` to `dist`
 - Injects `window.__KNIGHTED_PRIMARY_CDN__` into `dist/index.html`
 
-2. `npm run build:importmap`
+2. `npm run build:css`
+
+- Bundles and minifies `dist/styles.css` with Lightning CSS
+
+3. `npm run build:importmap`
 
 - Runs only when `KNIGHTED_PRIMARY_CDN=importMap`
 - Runs `jspm link` with `--provider jspm.io`
@@ -74,6 +79,10 @@ This runs two steps:
 - Traces generated `dist/prod-imports.js`
 - Import specifiers come from `importMap` entries in `src/modules/cdn.js` (`cdnImportSpecs`)
 
+4. `npm run build:html`
+
+- Minifies `dist/index.html` with `html-minifier-terser`
+
 Preview the built site locally:
 
 ```sh
@@ -86,11 +95,13 @@ End-to-end tests run against a preview build by default:
 npm run test:e2e
 ```
 
-This command builds with `build:esm` first, then runs Playwright against the preview server.
+This command forces `KNIGHTED_PRIMARY_CDN=esm` and runs `npm run build` first, then runs Playwright against the preview server.
+
+`preview` also forces an ESM build (`KNIGHTED_PRIMARY_CDN=esm npm run build`) before serving `dist`.
 
 ## CI And Deployment
 
-- CI workflow (`.github/workflows/ci.yml`) installs dependencies, runs lint, and runs `npm run build`.
+- CI workflow (`.github/workflows/ci.yml`) installs dependencies, runs lint, and runs `npm run build:esm`.
 - Deploy workflow (`.github/workflows/deploy.yml`) builds the production site and publishes `dist` to GitHub Pages.
 
 ## Notes

package-lock.json

@@ -26,16 +26,17 @@
     "build:prepare": "node scripts/build-prepare.js",
     "build:css": "node scripts/build-css.js",
     "build:importmap": "node scripts/build-importmap.js",
-    "build": "npm run build:prepare && npm run build:css && npm run build:importmap",
+    "build:html": "node scripts/build-html.js",
+    "build": "node scripts/build.js",
     "build:esm": "KNIGHTED_PRIMARY_CDN=esm npm run build",
     "build:jspm": "KNIGHTED_PRIMARY_CDN=jspmGa npm run build",
     "build:importmap-mode": "KNIGHTED_PRIMARY_CDN=importMap npm run build",
-    "preview": "http-server dist -a localhost -p 8081 -c-1 -o index.html",
+    "preview": "KNIGHTED_PRIMARY_CDN=esm npm run build && http-server dist -a localhost -p 8081 -c-1 -o index.html",
     "check-types": "tsc -p tsconfig.json",
     "lint:playwright": "eslint playwright playwright.config.ts",
-    "test:e2e": "npm run build:esm && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test",
+    "test:e2e": "KNIGHTED_PRIMARY_CDN=esm npm run build && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test",
     "test:e2e:dev": "playwright test",
-    "test:e2e:headed": "npm run build:esm && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test --headed",
+    "test:e2e:headed": "KNIGHTED_PRIMARY_CDN=esm npm run build && PLAYWRIGHT_WEB_SERVER_MODE=preview PLAYWRIGHT_PORT=8081 playwright test --headed",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prettier": "prettier --write .",
     "lint": "oxlint src scripts && npm run lint:playwright"
@@ -46,6 +47,7 @@
     "@typescript-eslint/parser": "^8.57.1",
     "eslint": "^10.0.3",
     "eslint-plugin-playwright": "^2.10.0",
+    "html-minifier-terser": "^7.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "jspm": "^4.4.0",

package.json

@@ -0,0 +1,23 @@
+import { access, readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { minify } from 'html-minifier-terser'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const projectRoot = resolve(__dirname, '..')
+const distIndexHtml = resolve(projectRoot, 'dist', 'index.html')
+
+await access(distIndexHtml)
+
+const html = await readFile(distIndexHtml, 'utf8')
+
+const minifiedHtml = await minify(html, {
+  collapseWhitespace: true,
+  conservativeCollapse: true,
+  removeComments: true,
+  removeRedundantAttributes: true,
+  removeEmptyAttributes: false,
+  minifyCSS: true,
+})
+
+await writeFile(distIndexHtml, minifiedHtml)

scripts/build-html.js

@@ -0,0 +1,26 @@
+import { spawnSync } from 'node:child_process'
+
+const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+const env = {
+  ...process.env,
+  KNIGHTED_PRIMARY_CDN: process.env.KNIGHTED_PRIMARY_CDN ?? 'esm',
+}
+const run = script => {
+  const result = spawnSync(npmCommand, ['run', script], {
+    stdio: 'inherit',
+    env,
+  })
+
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1)
+  }
+}
+
+/*
+ * Order matters: prepare/create dist first, then mutate assets,
+ * and run HTML minification last after any index.html injection.
+ */
+run('build:prepare')
+run('build:css')
+run('build:importmap')
+run('build:html')