glashjs 0.9.0 → 0.11.0

package/README.md

@@ -75,8 +75,12 @@ export const POST = (ctx) => json({ created: ctx.body }, { status: 201 });
 ```
 
 ```bash
-glash dev      # dev server: routing + SSR + API, live route reload
+glash dev      # dev server (live reload) — prints a Local + Network (LAN IP) URL
+               #   ➜ Local:    http://localhost:3000
+               #   ➜ Network:  http://192.168.1.57:3000   (open from your phone/other devices)
 glash serve    # production server over routes/ + built assets (Brotli-negotiated)
+glash update   # update glashjs to the latest published version
+glash deploy   # build, then deploy to glashdb
 ```
 
 **`<Image>`** (better than `next/image` — no runtime image server, uses the build's AVIF/WebP):
@@ -116,7 +120,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 +182,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/bin/glash.mjs

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 // glashjs CLI
 import { readFileSync } from 'node:fs';
+import os from 'node:os';
 import { build } from '../src/build.mjs';
 import { optimizeAssets } from '../src/assets/optimize.mjs';
 import { createGlashServer } from '../src/server/server.mjs';
 import { deploy } from '../src/deploy.mjs';
+import { update } from '../src/update.mjs';
 
 const VERSION = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version;
 const [, , cmd, ...rest] = process.argv;
@@ -14,17 +16,34 @@ function arg(name, fallback) {
   return i >= 0 && rest[i + 1] ? rest[i + 1] : fallback;
 }
 
+// LAN IPv4 addresses, so the dev server prints a Network URL you can open from
+// your phone or another device on the same network.
+function lanAddresses() {
+  const out = [];
+  const ifaces = os.networkInterfaces();
+  for (const name of Object.keys(ifaces)) {
+    for (const i of ifaces[name] || []) {
+      if (i.family === 'IPv4' && !i.internal) out.push(i.address);
+    }
+  }
+  return out;
+}
+
 async function serve(dev) {
   const root = arg('--root', process.cwd());
   const { listen, cfg, routes } = await createGlashServer({ root, dev });
   const port = Number(arg('--port', cfg.port || 3000));
-  const { host } = await listen(port);
+  await listen(port);
   const pages = routes.filter((r) => !r.isApi).length;
   const apis = routes.filter((r) => r.isApi).length;
   console.log(`\nglashjs ${dev ? 'dev' : 'serve'} — "${cfg.name}"`);
   console.log(`  ${pages} page route(s), ${apis} api route(s)`);
   routes.forEach((r) => console.log(`    ${r.isApi ? 'api ' : 'page'}  ${r.pattern}`));
-  console.log(`\n  ▶ http://localhost:${port}${dev ? '   (live route reload)' : ''}\n`);
+  console.log('');
+  console.log(`  ➜ Local:    http://localhost:${port}`);
+  for (const ip of lanAddresses()) console.log(`  ➜ Network:  http://${ip}:${port}   (preview on other devices)`);
+  if (dev) console.log('\n  live reload on save · ctrl-c to stop');
+  console.log('');
 }
 
 async function main() {
@@ -38,6 +57,10 @@ async function main() {
       await deploy({ root: arg('--root', process.cwd()), dryRun: rest.includes('--dry-run'), args: passthrough });
       break;
     }
+    case 'update':
+    case 'upgrade':
+      await update({ root: arg('--root', process.cwd()) });
+      break;
     case 'dev':
       await serve(true);
       break;
@@ -66,6 +89,7 @@ Usage:
   glash serve [--port 3000]     Run the production server over routes/ + built assets
   glash build [--root <dir>]    Optimize assets, generate offline SW + PWA + security manifests
   glash deploy [--dry-run]      Build, then deploy to glashdb (hands off to the glashdb CLI)
+  glash update                  Update glashjs to the latest published version
   glash optimize [<dir>]        Just run the asset optimizer over a directory
   glash version                 Print version
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glashjs",
-  "version": "0.9.0",
+  "version": "0.11.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/index.mjs

@@ -1,6 +1,8 @@
 // glashjs public API
 export { defineConfig, loadConfig, DEFAULT_CONFIG } from './config.mjs';
 export { build } from './build.mjs';
+export { deploy } from './deploy.mjs';
+export { update } from './update.mjs';
 export { optimizeAssets } from './assets/optimize.mjs';
 export { generateAnimatedFavicon } from './assets/animated-favicon.mjs';
 export { generateServiceWorker } from './offline/generate-sw.mjs';

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}`);
   }
 }
 

package/src/update.mjs

@@ -0,0 +1,39 @@
+// glashjs update — bump the installed glashjs to the latest published version,
+// using whichever package manager the project uses (npm/pnpm/yarn/bun).
+import { spawn } from 'node:child_process';
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'node:path';
+
+function installedVersion(root) {
+  try {
+    return JSON.parse(readFileSync(path.join(root, 'node_modules/glashjs/package.json'), 'utf8')).version;
+  } catch {
+    return null;
+  }
+}
+
+function packageManager(root) {
+  if (existsSync(path.join(root, 'pnpm-lock.yaml'))) return { cmd: 'pnpm', args: ['add', 'glashjs@latest'] };
+  if (existsSync(path.join(root, 'yarn.lock'))) return { cmd: 'yarn', args: ['add', 'glashjs@latest'] };
+  if (existsSync(path.join(root, 'bun.lockb'))) return { cmd: 'bun', args: ['add', 'glashjs@latest'] };
+  return { cmd: 'npm', args: ['install', 'glashjs@latest'] };
+}
+
+function run(cmd, args, root) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { cwd: root, stdio: 'inherit', shell: process.platform === 'win32' });
+    child.on('error', reject);
+    child.on('exit', (code) => (code === 0 ? resolve() : reject(new Error(`${cmd} exited with code ${code}`))));
+  });
+}
+
+export async function update({ root = process.cwd(), log = console.log } = {}) {
+  const current = installedVersion(root);
+  const { cmd, args } = packageManager(root);
+  log(`glashjs update — current: ${current ?? 'not installed'}\n  $ ${cmd} ${args.join(' ')}\n`);
+  await run(cmd, args, root);
+  const next = installedVersion(root);
+  if (next && next === current) log(`\n✓ already on the latest version (${next})`);
+  else log(`\n✓ glashjs is now ${next ?? 'installed'}${current ? ` (was ${current})` : ''}`);
+  return { from: current, to: next };
+}