preact-buildless-frontendlisted

# Build-less ESM Frontend Create frontends that run directly in the browser using ES modules—no bundler, no build step. ## Starter Template Copy from `assets/starter/` for a working baseline: - `index.html` — import map + module entry - `app.js` — Preact + signals + hash routing - `index.css` — CSS variables, dark mode Run locally: ```bash npx serve assets/starter # or python3 -m http.server 3000 ``` ## Core Patterns ### 1. Import Maps Use `<script type="importmap">` to: - Map bare specifiers (`preact`) to CDN URLs - Map directory aliases (`@utils/`) to local folders - Attach `?v=<version>` for cache-busting ```html <script type="importmap"> { "imports": { "preact": "https://cdn.jsdelivr.net/npm/preact@10.24.3/dist/preact.module.js", "@utils/": "./utils/", "./app.js": "./app.js?v=1.0.0" } } </script> ``` Generate this map dynamically (server middleware) or commit a static version. ### 2. CDN Imports Import third-party ESM directly from CDN. Pin versions: ```js import { signal } from 'https://cdn.jsdelivr.net/npm/@preact/signals@1.3.0/dist/signals.module.js'; ``` Prefer mapping through import map to keep source clean: ```js import { signal } from '@preact/signals'; // resolved via import map ``` ### 3. Cache-Busting Two approaches: **A) Versioned URLs (recommended):** - Append `?v=<git-sha|version|timestamp>` to local `.js` and `.css` - Set `Cache-Control: immutable` headers **B) ETag/Last-Modified:** - Keep stable URLs, let browser revalida