glashjs 0.9.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 **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.
+**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
 
@@ -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
-- [ ] React-Fast-Refresh (`useState` preservation via `@prefresh`), 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.9.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/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/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}`);
   }
 }