glashjs 0.7.2 → 0.9.0

package/README.md

@@ -59,6 +59,8 @@ routes/
   blog/[slug].mjs    ->  /blog/:slug       (dynamic segment -> ctx.params.slug)
   docs/[...path].mjs ->  /docs/*           (catch-all)
   api/hello.mjs      ->  /api/hello        (API: export GET/POST/…)
+  404.jsx            ->  custom not-found page (any unmatched path -> 404)
+  500.jsx            ->  custom error page (rendered in production on a throw)
 ```
 
 ```js
@@ -114,7 +116,7 @@ export default function Counter({ start = 0 }) {
 
 Hydration is **CSP-safe**: server props ride in a non-executed `<script type="application/json">` and the hydration bundle is an external `'self'` module with a per-request **nonce** — so the strict CSP stays intact (no `'unsafe-inline'`).
 
-**Nested layouts** (`_layout.jsx` in any routes dir wrap pages root→leaf, server + hydration), **streaming SSR** (the shell flushes before the component renders — `Transfer-Encoding: chunked`), and **dev live-reload** (`glash dev` auto-refreshes on save over SSE) are all in. **Honest scope:** uses Preact (React-compatible via `preact/compat`), not React; live-reload is auto-refresh, not yet state-preserving fast-refresh; streaming is shell-flush, not Suspense-chunked.
+**Nested layouts** (`_layout.jsx` in any routes dir wrap pages root→leaf, server + hydration), **streaming SSR** (the shell flushes before the component renders — `Transfer-Encoding: chunked`), and **instant HMR** (`glash dev` does an in-place soft re-render on save over SSE — no full reload, no flash, and scroll/focus/form-input are preserved across the swap) are all in. **Honest scope:** uses Preact (React-compatible via `preact/compat`), not React; HMR preserves DOM/scroll/input state but **not** component `useState` (that's React-Fast-Refresh via `@prefresh`, still ahead); streaming is shell-flush, not Suspense-chunked.
 
 ## Usage
 
@@ -167,14 +169,16 @@ animatedFavicon: true,                         // bundled animated glash mark (d
 - [x] Client-JS bundling (esbuild) per route
 - [x] Nested layouts (`_layout.jsx` composing root→leaf, server + hydration)
 - [x] Streaming SSR (shell flushed before the component renders)
-- [x] Dev live-reload over SSE (auto-refresh on save)
+- [x] Instant HMR — in-place soft re-render on save (no full reload, no flash; preserves scroll, focus, and form input)
 - [x] `<Image>` — zero-config `<picture>` with AVIF/WebP from the optimizer (beats next/image: no runtime image server)
 - [x] `<Video>` — `<video>` with AV1/WebM + mp4 fallback + auto poster
 - [x] File-based middleware (`_middleware.mjs`, root→leaf) — auth, redirects, headers
 - [x] Production route precompile (`glash build` bakes server modules + minified client bundles → no runtime esbuild on `glash serve`)
 - [x] SEO metadata API (`export const metadata` → title, description, Open Graph, Twitter cards)
 - [x] `<Link>` client-side navigation (SPA swap of `#glash-root` + re-hydrate; progressive-enhancement `<a>`)
-- [ ] State-preserving fast-refresh, Suspense streaming, `glash deploy` → glashdb
+- [x] `glash deploy` → glashdb (builds, then hands off to the `glashdb` CLI)
+- [x] Production-grade runtime — custom `404`/`500` routes, dev error overlay, HEAD support, Range requests + streamed static (video seeking), graceful mid-stream error handling
+- [ ] React-Fast-Refresh (`useState` preservation via `@prefresh`), Suspense streaming, edge adapter
 - [ ] `<Image>` / `<Video>` components that emit `<picture>`/`<source>` from the manifest
 - [ ] Edge adapter for the glashdb Worker (serve `.br`/`.avif` by `Accept`)
 - [ ] `glash deploy` → glashdb hosting in one command

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glashjs",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "glashjs — a web framework built on top of Next.js: file-based routing, SSR, API routes, JSX components with client hydration, nested layouts, streaming SSR, a best-in-class build-time asset optimizer, offline PWA layer, animated favicon, and secure-by-default headers. Zero mandatory dependencies.",
   "type": "module",
   "bin": {

package/src/server/html.mjs

@@ -57,9 +57,11 @@ function shellTail({ offline = true, animatedFavicon = true, dev = false, nonce
   const off = offline
     ? `<script type="module"${n}>try{const m=await import("/glash-offline.mjs");m.registerGlashOffline&&m.registerGlashOffline();}catch{}</script>`
     : '';
-  // Dev live-reload: a nonce'd inline script (CSP-safe) that reloads on change.
+  // Dev HMR: a nonce'd inline script (CSP-safe). On a change event it does an
+  // in-place soft refresh (no full reload, keeps scroll/focus/inputs), falling
+  // back to a full reload if the nav runtime hasn't loaded yet.
   const hmr = dev
-    ? `<script${n}>try{new EventSource("/_glash/hmr").onmessage=function(e){if(e.data==="reload")location.reload();};}catch(e){}</script>`
+    ? `<script${n}>try{new EventSource("/_glash/hmr").onmessage=function(e){if(e.data==="reload"){if(window.__glashSoftRefresh){window.__glashSoftRefresh();}else{location.reload();}}};}catch(e){}</script>`
     : '';
   // Client-side navigation runtime (external 'self' module, CSP-safe).
   const nav = '<script type="module" src="/_glash/nav.js"></script>';

package/src/server/nav-client.mjs

@@ -1,35 +1,72 @@
-// Source for /_glash/nav.js — the client-side navigation runtime.
-// Intercepts clicks on <a data-glash-link>, fetches the route as a partial
-// (X-Glash-Nav: 1 -> JSON { title, html, props, bundle }), swaps #glash-root,
-// updates the props block + <title>, pushes history, and re-hydrates by
-// importing the new route's bundle. Falls back to a full navigation on any error.
-export const NAV_CLIENT = `// glashjs client navigation
-async function navigate(href, push) {
-  let data;
+// Source for /_glash/nav.js — the client-side navigation + dev HMR runtime.
+//
+// Navigation: intercepts <a data-glash-link> clicks, fetches the route as a
+// partial (X-Glash-Nav: 1 -> JSON { title, html, props, bundle }), swaps
+// #glash-root, updates <title> + history, and re-hydrates by importing the
+// route's bundle. Falls back to a full navigation on any error.
+//
+// Dev HMR (window.__glashSoftRefresh): on a file change the dev server pushes
+// a reload over SSE; instead of a full page reload, we re-render the current
+// route in place — no white flash — and restore scroll, focus, and form input
+// across the swap. (Note: component useState resets on re-render; preserving
+// that is React-Fast-Refresh territory, which needs @prefresh.)
+export const NAV_CLIENT = `// glashjs client navigation + dev HMR
+async function navigate(href, push, keepScroll) {
+  var data;
   try {
-    const res = await fetch(href, { headers: { 'X-Glash-Nav': '1' }, credentials: 'same-origin' });
+    var res = await fetch(href, { headers: { 'X-Glash-Nav': '1' }, credentials: 'same-origin' });
     if (!res.ok) throw 0;
     data = await res.json();
-  } catch { location.href = href; return; }
-  const root = document.getElementById('glash-root');
+  } catch (e) { location.href = href; return; }
+  var root = document.getElementById('glash-root');
   if (!root || !data || typeof data.html !== 'string') { location.href = href; return; }
   if (data.title) document.title = data.title;
-  let pe = document.getElementById('glash-props');
+  var pe = document.getElementById('glash-props');
   if (!pe) { pe = document.createElement('script'); pe.type = 'application/json'; pe.id = 'glash-props'; document.head.appendChild(pe); }
   pe.textContent = JSON.stringify(data.props || {});
   root.innerHTML = data.html;
   if (push) history.pushState({ glash: 1 }, '', href);
-  window.scrollTo(0, 0);
-  if (data.bundle) { try { await import(data.bundle); } catch {} }
+  if (!keepScroll) window.scrollTo(0, 0);
+  if (data.bundle) { try { await import(data.bundle + '?v=' + Date.now()); } catch (e) {} }
 }
-document.addEventListener('click', (e) => {
+
+document.addEventListener('click', function (e) {
   if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-  const a = e.target.closest && e.target.closest('a[data-glash-link]');
+  var a = e.target.closest && e.target.closest('a[data-glash-link]');
   if (!a) return;
-  const href = a.getAttribute('href');
+  var href = a.getAttribute('href');
   if (!href || a.target || /^([a-z]+:)?\\/\\//i.test(href) || href.startsWith('#') || href.startsWith('mailto:')) return;
   e.preventDefault();
   if (href !== location.pathname + location.search) navigate(href, true);
 });
-window.addEventListener('popstate', () => navigate(location.pathname + location.search, false));
+window.addEventListener('popstate', function () { navigate(location.pathname + location.search, false); });
+
+window.__glashNavigate = navigate;
+
+// Dev HMR: re-render the current route in place, preserving scroll/focus/inputs.
+window.__glashSoftRefresh = async function () {
+  var root = document.getElementById('glash-root');
+  if (!root) { location.reload(); return; }
+  var sx = window.scrollX, sy = window.scrollY;
+  var active = document.activeElement;
+  var focusName = active && active.getAttribute && active.getAttribute('name');
+  var selStart = active && active.selectionStart;
+  var selEnd = active && active.selectionEnd;
+  var values = {};
+  root.querySelectorAll('input[name],textarea[name],select[name]').forEach(function (el) {
+    values[el.name] = (el.type === 'checkbox' || el.type === 'radio') ? el.checked : el.value;
+  });
+  await navigate(location.pathname + location.search, false, true);
+  root.querySelectorAll('input[name],textarea[name],select[name]').forEach(function (el) {
+    if (Object.prototype.hasOwnProperty.call(values, el.name)) {
+      if (el.type === 'checkbox' || el.type === 'radio') el.checked = values[el.name];
+      else el.value = values[el.name];
+    }
+  });
+  window.scrollTo(sx, sy);
+  if (focusName) {
+    var el = root.querySelector('[name="' + focusName + '"]');
+    if (el) { el.focus(); try { el.selectionStart = selStart; el.selectionEnd = selEnd; } catch (e) {} }
+  }
+};
 `;

package/src/server/server.mjs

@@ -6,12 +6,12 @@
 //                 service worker, favicons) with Brotli negotiation.
 // Every response carries the secure-by-default headers.
 import http from 'node:http';
-import { promises as fs, existsSync, statSync, watch } from 'node:fs';
+import { promises as fs, existsSync, statSync, watch, createReadStream } from 'node:fs';
 import { randomBytes } from 'node:crypto';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { discoverRoutes, matchRoute, findMiddleware } from './router.mjs';
-import { renderDocument, documentParts, renderMeta } from './html.mjs';
+import { renderDocument, documentParts, renderMeta, escapeHtml } from './html.mjs';
 import { NAV_CLIENT } from './nav-client.mjs';
 import { isComponentRoute, loadComponentRoute, clientBundle, renderComponent, routeId, findLayouts, clearJsxCaches } from './jsx.mjs';
 import { securityHeaders } from '../security/headers.mjs';
@@ -78,7 +78,7 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
         return send(res, 200, 'text/javascript; charset=utf-8', js, { ...secHeaders, 'cache-control': dev ? 'no-store' : 'public, max-age=31536000, immutable' });
       }
       const match = matchRoute(routes, pathname);
-      if (!match) return send(res, 404, 'text/plain; charset=utf-8', 'Not found', secHeaders);
+      if (!match) return await handleNotFound(res, routes, req, url, cfg, secHeaders, root, routesDir, dev);
       const ctx = makeCtx(req, res, url, match.params);
       // Run the middleware chain (root -> leaf). Any return value short-circuits.
       for (const mwFile of findMiddleware(routesDir, match.route.file)) {
@@ -88,6 +88,10 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
         const result = await mw(ctx);
         if (result) return sendMiddlewareResult(res, result, secHeaders);
       }
+      // HEAD: same status/headers as GET, no body (cheap — skip rendering).
+      if (req.method === 'HEAD') {
+        return send(res, 200, match.route.isApi ? 'application/json' : 'text/html; charset=utf-8', '', secHeaders);
+      }
       if (match.route.isApi) {
         const mod = await importRoute(match.route.file);
         return await handleApi(res, mod, req, ctx, secHeaders);
@@ -98,8 +102,17 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
       const mod = await importRoute(match.route.file);
       return await handlePage(res, mod, ctx, cfg, secHeaders, dev);
     } catch (err) {
-      const msg = dev ? `glashjs error:\n${err?.stack || err}` : 'Internal Server Error';
-      send(res, 500, 'text/plain; charset=utf-8', msg, secHeaders);
+      if (res.headersSent) return res.end(); // error mid-stream — can't replace headers
+      if (dev) return send(res, 500, 'text/html; charset=utf-8', devErrorOverlay(err), secHeaders);
+      try {
+        const r500 = routes.find((r) => r.pattern === '/500');
+        if (r500) {
+          const ctx = makeCtx(req, res, url, {});
+          const { html, nonce } = await renderStandalone(r500, ctx, cfg, root, routesDir, dev);
+          return send(res, 500, 'text/html; charset=utf-8', html, pageHeaders(cfg, secHeaders, nonce));
+        }
+      } catch { /* fall back to the default page */ }
+      send(res, 500, 'text/html; charset=utf-8', defaultErrorHtml(500, 'Something went wrong'), secHeaders);
     }
   });
 
@@ -166,9 +179,18 @@ async function handleComponentPage(res, route, ctx, cfg, secHeaders, root, route
   });
   res.writeHead(200, { ...pageHeaders(cfg, secHeaders, nonce), 'content-type': 'text/html; charset=utf-8' });
   res.write(open); // flush the shell first, before rendering the component
-  const rendered = await renderComponent(mod, props);
-  res.write(`<div id="glash-root">${rendered}</div><script type="module" src="/_glash/${id}.js"></script>`);
-  res.end(tail);
+  try {
+    const rendered = await renderComponent(mod, props);
+    res.write(`<div id="glash-root">${rendered}</div><script type="module" src="/_glash/${id}.js"></script>`);
+    res.end(tail);
+  } catch (err) {
+    // Shell is already on the wire, so we can't change the status — surface the
+    // error inside the stream (full overlay in dev, a clean message in prod).
+    res.write(dev
+      ? `<pre style="color:#ff6b6b;white-space:pre-wrap;font:13px ui-monospace,monospace;padding:1rem">${escapeHtml(String(err?.stack || err))}</pre>`
+      : '<p style="font:16px system-ui;color:#9aa0aa;padding:1rem">Something went wrong rendering this page.</p>');
+    res.end(tail);
+  }
 }
 
 // metadata export may be a plain object or a (ctx) => object function.
@@ -194,20 +216,91 @@ async function serveStatic(res, outDir, pathname, req, secHeaders) {
   const rel = pathname.replace(/^\/+/, '');
   const file = path.join(outDir, rel);
   if (!file.startsWith(outDir + path.sep)) return false; // path traversal guard
+  const head = req.method === 'HEAD';
+  const range = req.headers.range;
   const ae = String(req.headers['accept-encoding'] || '');
-  if (ae.includes('br') && existsSync(file + '.br')) {
+
+  // Brotli precompressed sibling — only when the client isn't asking for a byte range.
+  if (!range && ae.includes('br') && existsSync(file + '.br')) {
     const buf = await fs.readFile(file + '.br');
-    res.writeHead(200, { ...secHeaders, 'content-type': mime(file), 'content-encoding': 'br', 'cache-control': 'public, max-age=31536000, immutable' });
-    res.end(buf);
+    res.writeHead(200, { ...secHeaders, 'content-type': mime(file), 'content-encoding': 'br', vary: 'Accept-Encoding', 'cache-control': 'public, max-age=31536000, immutable' });
+    res.end(head ? undefined : buf);
     return true;
   }
-  if (existsSync(file) && statSync(file).isFile()) {
-    const buf = await fs.readFile(file);
-    res.writeHead(200, { ...secHeaders, 'content-type': mime(file), 'cache-control': 'public, max-age=3600' });
-    res.end(buf);
+  if (!(existsSync(file) && statSync(file).isFile())) return false;
+
+  const stat = statSync(file);
+  const ct = mime(file);
+  // Range requests (video/audio seeking) -> 206 Partial Content.
+  if (range) {
+    const m = /bytes=(\d*)-(\d*)/.exec(range);
+    const start = m && m[1] ? parseInt(m[1], 10) : 0;
+    const end = m && m[2] ? parseInt(m[2], 10) : stat.size - 1;
+    if (Number.isNaN(start) || Number.isNaN(end) || start > end || end >= stat.size) {
+      res.writeHead(416, { ...secHeaders, 'content-range': `bytes */${stat.size}` });
+      res.end();
+      return true;
+    }
+    res.writeHead(206, { ...secHeaders, 'content-type': ct, 'accept-ranges': 'bytes', 'content-range': `bytes ${start}-${end}/${stat.size}`, 'content-length': end - start + 1, 'cache-control': 'public, max-age=3600' });
+    if (head) { res.end(); return true; }
+    createReadStream(file, { start, end }).pipe(res);
     return true;
   }
-  return false;
+  // Full file — streamed (handles large assets without buffering them in memory).
+  res.writeHead(200, { ...secHeaders, 'content-type': ct, 'accept-ranges': 'bytes', 'content-length': stat.size, 'cache-control': 'public, max-age=3600' });
+  if (head) { res.end(); return true; }
+  createReadStream(file).pipe(res);
+  return true;
+}
+
+/** Render a 404/500 route (or any route) to a full HTML document string. */
+async function renderStandalone(route, ctx, cfg, root, routesDir, dev) {
+  const nonce = randomBytes(16).toString('base64');
+  if (isComponentRoute(route.file)) {
+    const layouts = findLayouts(routesDir, route.file);
+    const mod = await loadComponentRoute(route.file, layouts, root, dev);
+    const props = (typeof mod.getServerData === 'function' ? await mod.getServerData(ctx) : {}) || {};
+    const meta = await resolveMeta(mod.metadata, ctx);
+    const rendered = await renderComponent(mod, props);
+    const head = renderMeta(meta) + `<script type="application/json" id="glash-props">${safeJson(props)}</script>`;
+    const body = `<div id="glash-root">${rendered}</div><script type="module" src="/_glash/${routeId(route.file)}.js"></script>`;
+    return { html: renderDocument({ title: meta.title || mod.title || cfg.name, head, body, offline: cfg.offline, animatedFavicon: !!cfg.animatedFavicon, nonce, dev }), nonce };
+  }
+  const mod = await import(pathToFileURL(route.file).href + (dev ? `?t=${Date.now()}` : ''));
+  const out = typeof mod.default === 'function' ? await mod.default(ctx) : '';
+  const page = typeof out === 'string' || (out && out.__raw) ? { body: out } : (out || {});
+  const meta = await resolveMeta(page.metadata || mod.metadata, ctx);
+  return { html: renderDocument({ title: meta.title || page.title || mod.title || cfg.name, head: renderMeta(meta) + (page.head ? (page.head.__raw || page.head) : ''), body: page.body ?? '', offline: cfg.offline, animatedFavicon: !!cfg.animatedFavicon, nonce, dev }), nonce };
+}
+
+/** 404: render a custom `404` route if present, else a clean default page. */
+async function handleNotFound(res, routes, req, url, cfg, secHeaders, root, routesDir, dev) {
+  const r404 = routes.find((r) => r.pattern === '/404');
+  if (r404) {
+    try {
+      const ctx = makeCtx(req, res, url, {});
+      const { html, nonce } = await renderStandalone(r404, ctx, cfg, root, routesDir, dev);
+      return send(res, 404, 'text/html; charset=utf-8', req.method === 'HEAD' ? '' : html, pageHeaders(cfg, secHeaders, nonce));
+    } catch { /* fall back to default */ }
+  }
+  send(res, 404, 'text/html; charset=utf-8', req.method === 'HEAD' ? '' : defaultErrorHtml(404, 'Page not found'), secHeaders);
+}
+
+function defaultErrorHtml(status, message) {
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${status}</title></head>
+<body style="font:16px/1.5 system-ui,sans-serif;margin:0;min-height:100vh;display:grid;place-items:center;background:#0b0d12;color:#e8eaed">
+<main style="text-align:center;padding:2rem"><h1 style="font-size:3rem;margin:0;color:#22c55e">${status}</h1><p style="color:#9aa0aa">${escapeHtml(message)}</p></main>
+</body></html>`;
+}
+
+function devErrorOverlay(err) {
+  const stack = escapeHtml(String(err?.stack || err));
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>glashjs — error</title></head>
+<body style="font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:#1a0f12;color:#ffd7d7;margin:0;padding:2rem">
+<h1 style="color:#ff6b6b;font-size:1.1rem">⚠ glashjs runtime error</h1>
+<pre style="white-space:pre-wrap;background:#0a0608;border:1px solid #3a1f25;border-radius:8px;padding:1rem;overflow:auto">${stack}</pre>
+<p style="color:#9aa0aa">This overlay shows only in dev. Production renders a clean 500 page (or your <code>routes/500.jsx</code>).</p>
+</body></html>`;
 }
 
 function makeCtx(req, res, url, params) {