glashjs 0.8.0 → 0.9.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. **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
 
@@ -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,7 @@ 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
+- [ ] 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.8.0",
+  "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) {} }
+  }
+};
 `;