glashjs 0.8.0 → 0.10.0

package/README.md

@@ -116,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. **Suspense streaming** is in too — wrap a data-dependent subtree in `<Suspense fallback={…}>` (from `preact/compat`) and the shell + fallback flush immediately, then each boundary streams in as its data resolves (`renderToPipeableStream`), with preact's inline swap scripts nonce-injected so the strict CSP holds. **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).
 
 ## Usage
 
@@ -169,7 +169,7 @@ 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
@@ -178,7 +178,8 @@ animatedFavicon: true,                         // bundled animated glash mark (d
 - [x] `<Link>` client-side navigation (SPA swap of `#glash-root` + re-hydrate; progressive-enhancement `<a>`)
 - [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
-- [ ] State-preserving fast-refresh, Suspense streaming, edge adapter
+- [x] Suspense streaming (`renderToPipeableStream` — fallback in the shell, each boundary streams in as its data resolves; CSP-safe via per-request nonce injection)
+- [ ] React-Fast-Refresh (`useState` preservation via `@prefresh`; browser-verified), 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.8.0",
+  "version": "0.10.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/jsx.mjs

@@ -148,10 +148,26 @@ function compose(h, layouts, Page, props) {
   return tree;
 }
 
-/** Server-render page + layouts to an HTML string. */
+/** Server-render page + layouts to an HTML string (buffered). */
 export async function renderComponent(mod, props) {
   const rt = await preactRuntime();
   if (!rt) throw new Error(MISSING);
   if (typeof mod.Page !== 'function') throw new Error('JSX route must default-export a component');
   return rt.renderToString(compose(rt.h, mod.layouts || [], mod.Page, props));
 }
+
+/** Compose the page + layouts into a vnode (for streaming). */
+export async function composeVNode(mod, props) {
+  const rt = await preactRuntime();
+  if (!rt) throw new Error(MISSING);
+  if (typeof mod.Page !== 'function') throw new Error('JSX route must default-export a component');
+  return compose(rt.h, mod.layouts || [], mod.Page, props);
+}
+
+let _pipeable;
+/** The Node Suspense-streaming renderer, if the installed preact-render-to-string supports it. */
+export async function getPipeableRenderer() {
+  if (_pipeable !== undefined) return _pipeable;
+  try { _pipeable = (await import('preact-render-to-string/stream-node')).renderToPipeableStream; } catch { _pipeable = null; }
+  return _pipeable;
+}

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

@@ -7,13 +7,14 @@
 // Every response carries the secure-by-default headers.
 import http from 'node:http';
 import { promises as fs, existsSync, statSync, watch, createReadStream } from 'node:fs';
+import { Transform } from 'node:stream';
 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, escapeHtml } from './html.mjs';
 import { NAV_CLIENT } from './nav-client.mjs';
-import { isComponentRoute, loadComponentRoute, clientBundle, renderComponent, routeId, findLayouts, clearJsxCaches } from './jsx.mjs';
+import { isComponentRoute, loadComponentRoute, clientBundle, renderComponent, composeVNode, getPipeableRenderer, routeId, findLayouts, clearJsxCaches } from './jsx.mjs';
 import { securityHeaders } from '../security/headers.mjs';
 import { loadConfig } from '../config.mjs';
 
@@ -177,19 +178,41 @@ async function handleComponentPage(res, route, ctx, cfg, secHeaders, root, route
   const { open, tail } = documentParts({
     title, head, offline: cfg.offline, animatedFavicon: !!cfg.animatedFavicon, nonce, dev,
   });
+  const bundleTag = `</div><script type="module" src="/_glash/${id}.js"></script>`;
   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
+  res.write(open + '<div id="glash-root">'); // flush the shell before rendering
+
+  // True Suspense streaming: render the boundary's fallback into the shell now,
+  // then stream each boundary's real content as its data resolves. preact emits
+  // inline <script> swap tags, so we inject this request's nonce into the stream
+  // to keep the strict CSP intact.
+  const pipeable = await getPipeableRenderer();
+  if (pipeable) {
+    try {
+      const vnode = await composeVNode(mod, props);
+      const inject = new Transform({
+        transform(chunk, _enc, cb) {
+          cb(null, Buffer.from(chunk.toString('utf8').replace(/<script(?=[\s>])/g, `<script nonce="${nonce}"`)));
+        },
+      });
+      inject.pipe(res, { end: false });
+      inject.on('end', () => res.end(bundleTag + tail));
+      const stream = pipeable(vnode, { onError: () => { /* boundary error — keep the shell */ } });
+      stream.pipe(inject);
+      return;
+    } catch { /* fall through to buffered render */ }
+  }
+
+  // Fallback (no streaming renderer): buffered render.
   try {
     const rendered = await renderComponent(mod, props);
-    res.write(`<div id="glash-root">${rendered}</div><script type="module" src="/_glash/${id}.js"></script>`);
+    res.write(rendered + bundleTag);
     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);
+    res.end(`</div>${tail}`);
   }
 }