glashjs 0.3.0 → 0.5.0

package/README.md

@@ -77,6 +77,19 @@ glash dev      # dev server: routing + SSR + API, live route reload
 glash serve    # production server over routes/ + built assets (Brotli-negotiated)
 ```
 
+**`<Image>`** (better than `next/image` — no runtime image server, uses the build's AVIF/WebP):
+```jsx
+import { Image } from 'glashjs/image';
+<Image src="/hero.png" alt="Hero" width={1200} height={630} />
+// -> <picture><source …avif><source …webp><img loading=lazy decoding=async></picture>
+```
+
+**File-based middleware** (`_middleware.mjs`, runs root→leaf before the route):
+```js
+import { redirect } from 'glashjs';
+export default (ctx) => { if (!ctx.headers.authorization) return redirect('/login'); };
+```
+
 Every response carries the secure-by-default headers; static files are served from the build with Brotli negotiation.
 
 ### JSX components + client hydration (new in 0.2)
@@ -148,7 +161,11 @@ animatedFavicon: true,                         // bundled animated glash mark (d
 - [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)
-- [ ] State-preserving fast-refresh (HMR), Suspense streaming, `<Image>`/`<Video>` components
+- [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`)
+- [ ] State-preserving fast-refresh, Suspense streaming, `glash deploy` → glashdb
 - [ ] `<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.3.0",
+  "version": "0.5.0",
   "description": "glashjs — a web framework with file-based routing, SSR, API routes, a best-in-class asset optimizer, offline PWA layer, animated favicon, and secure-by-default headers. Zero dependencies.",
   "type": "module",
   "bin": {
@@ -9,7 +9,10 @@
   "exports": {
     ".": "./src/index.mjs",
     "./config": "./src/config.mjs",
-    "./security": "./src/security/headers.mjs"
+    "./security": "./src/security/headers.mjs",
+    "./image": "./src/components/image.mjs",
+    "./video": "./src/components/video.mjs",
+    "./package.json": "./package.json"
   },
   "files": [
     "bin",

package/src/build.mjs

@@ -2,7 +2,7 @@
 // Ties the pieces together: optimize assets -> derive a content version ->
 // generate the offline Service Worker + PWA manifest -> emit security headers
 // + a deploy manifest the glashdb edge (or any server) can consume.
-import { promises as fs } from 'node:fs';
+import { promises as fs, existsSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createHash } from 'node:crypto';
@@ -10,8 +10,32 @@ import { optimizeAssets } from './assets/optimize.mjs';
 import { generateAnimatedFavicon } from './assets/animated-favicon.mjs';
 import { generateServiceWorker } from './offline/generate-sw.mjs';
 import { securityHeaders } from './security/headers.mjs';
+import { discoverRoutes } from './server/router.mjs';
+import { isComponentRoute, findLayouts, loadComponentRoute, clientBundle, routeId } from './server/jsx.mjs';
 import { loadConfig } from './config.mjs';
 
+// Precompile JSX routes: server modules (-> .glash/server) + minified client
+// hydration bundles (-> outDir/_glash/<id>.js). Production `glash serve` then
+// serves bundles statically and imports prebuilt server modules — no esbuild
+// on the serving host's hot path.
+async function buildRoutes(root, cfg, outDir, log) {
+  const routesDir = path.resolve(root, cfg.routesDir || 'routes');
+  if (!existsSync(routesDir)) return { compiled: 0 };
+  const routes = await discoverRoutes(routesDir);
+  const comp = routes.filter((r) => isComponentRoute(r.file));
+  if (!comp.length) return { compiled: 0 };
+  const bundleDir = path.join(outDir, '_glash');
+  await fs.mkdir(bundleDir, { recursive: true });
+  for (const r of comp) {
+    const layouts = findLayouts(routesDir, r.file);
+    await loadComponentRoute(r.file, layouts, root, false, true);
+    const js = await clientBundle(r.file, layouts, false);
+    await fs.writeFile(path.join(bundleDir, routeId(r.file) + '.js'), js);
+    log(`  route  ${r.pattern}  ->  _glash/${routeId(r.file)}.js`);
+  }
+  return { compiled: comp.length };
+}
+
 function deriveVersion(manifest) {
   const h = createHash('sha256');
   for (const [rel, entry] of Object.entries(manifest.assets)) h.update(rel + ':' + entry.hash);
@@ -47,6 +71,16 @@ export async function build({ root = process.cwd(), log = console.log } = {}) {
 
   await fs.mkdir(outDir, { recursive: true });
 
+  // Precompile JSX routes (server modules + client bundles) for production.
+  let routesBuilt = { compiled: 0 };
+  try {
+    log('\nCompiling routes:');
+    routesBuilt = await buildRoutes(root, cfg, outDir, log);
+    if (!routesBuilt.compiled) log('  (no JSX routes)');
+  } catch (error) {
+    log(`  ! route compile skipped: ${(error instanceof Error ? error.message : error)}`);
+  }
+
   // Offline Service Worker + registration helper.
   const offline = cfg.offline
     ? await generateServiceWorker(outDir, manifest, { dataPrefixes: cfg.dataPrefixes })
@@ -67,6 +101,7 @@ export async function build({ root = process.cwd(), log = console.log } = {}) {
   log(`  original      ${kb(t.originalBytes)}`);
   log(`  optimized     ${kb(t.optimizedBytes)}`);
   log(`  saved         ${t.savedPercent}%  (${kb(t.originalBytes - t.optimizedBytes)})`);
+  log(`  routes        ${routesBuilt.compiled} JSX route(s) precompiled (no runtime esbuild in prod)`);
   log(`  offline       ${cfg.offline ? `${offline.precached} files precached (works offline after first visit)` : 'disabled'}`);
   log(`  favicon       static glashdb logo${animated.enabled ? ' + animated (glash-favicon.mjs)' : ''}`);
   log(`  version       ${version}`);

package/src/components/image.mjs

@@ -0,0 +1,42 @@
+// glashjs <Image> — a zero-config image component that's better than next/image
+// out of the box: it emits a <picture> that prefers the AVIF/WebP variants the
+// glashjs asset optimizer already produced at build time, with no runtime image
+// server, no signed URLs, and no config. Width/height are required-by-habit to
+// prevent layout shift (CLS), and images lazy-load + async-decode by default.
+//
+//   import { Image } from 'glashjs/image';
+//   <Image src="/hero.png" alt="Hero" width={1200} height={630} />
+//
+// After `glash build`, /hero.avif and /hero.webp exist next to /hero.png, so
+// the browser downloads the smallest format it supports. Deterministic output
+// (same on server + during hydration), so it never causes a hydration mismatch.
+import { h } from 'preact';
+
+const RASTER = /\.(png|jpe?g|webp|avif)$/i;
+
+export function Image({ src, alt = '', width, height, sizes, loading = 'lazy', fetchpriority, class: className, style, ...rest }) {
+  if (!src || !RASTER.test(src)) {
+    // SVG/unknown: render a plain <img>, nothing to transcode.
+    return h('img', { src, alt, width, height, loading, decoding: 'async', class: className, style, ...rest });
+  }
+  const base = src.replace(RASTER, '');
+  return h(
+    'picture',
+    { class: className, style },
+    h('source', { srcset: `${base}.avif`, type: 'image/avif', sizes }),
+    h('source', { srcset: `${base}.webp`, type: 'image/webp', sizes }),
+    h('img', {
+      src,
+      alt,
+      width,
+      height,
+      sizes,
+      loading,
+      fetchpriority,
+      decoding: 'async',
+      ...rest,
+    }),
+  );
+}
+
+export default Image;

package/src/components/video.mjs

@@ -0,0 +1,27 @@
+// glashjs <Video> — zero-config video that prefers the AV1/WebM the glashjs
+// optimizer produced at build time, with the original as fallback and an
+// auto-derived poster frame. Deterministic output (SSR + hydration match).
+//
+//   import { Video } from 'glashjs/video';
+//   <Video src="/clip.mp4" width={1280} height={720} />
+//
+// After `glash build`, /clip.glash.webm (AV1) and /clip.poster.jpg exist, so
+// browsers stream the far-smaller AV1 and fall back to the mp4 otherwise.
+import { h } from 'preact';
+
+const VID = /\.(mp4|mov|webm|m4v)$/i;
+
+export function Video({ src, poster, width, height, controls = true, autoplay, loop, muted, playsinline, preload = 'metadata', class: className, style, ...rest }) {
+  if (!src || !VID.test(src)) {
+    return h('video', { src, poster, width, height, controls, preload, class: className, style, ...rest });
+  }
+  const base = src.replace(VID, '');
+  return h(
+    'video',
+    { width, height, controls, autoplay, loop, muted, playsinline, preload, poster: poster || `${base}.poster.jpg`, class: className, style, ...rest },
+    h('source', { src: `${base}.glash.webm`, type: 'video/webm' }),
+    h('source', { src, type: 'video/mp4' }),
+  );
+}
+
+export default Video;

package/src/index.mjs

@@ -5,6 +5,8 @@ export { optimizeAssets } from './assets/optimize.mjs';
 export { generateAnimatedFavicon } from './assets/animated-favicon.mjs';
 export { generateServiceWorker } from './offline/generate-sw.mjs';
 export { securityHeaders, buildCsp, sri, glashSecurity } from './security/headers.mjs';
-export { createGlashServer, json } from './server/server.mjs';
-export { discoverRoutes, matchRoute } from './server/router.mjs';
+export { createGlashServer, json, redirect } from './server/server.mjs';
+export { discoverRoutes, matchRoute, findMiddleware } from './server/router.mjs';
 export { html, raw, escapeHtml, renderDocument } from './server/html.mjs';
+export { Image } from './components/image.mjs';
+export { Video } from './components/video.mjs';

package/src/server/jsx.mjs

@@ -101,12 +101,19 @@ if (el) hydrate(tree, el);`;
 }
 
 /** Compile page + its layout chain into a server module ({ Page, layouts, getServerData, title }). */
-export async function loadComponentRoute(pageFile, layouts, root, dev) {
-  const eb = await esbuild();
-  if (!eb) throw new Error(MISSING);
+export async function loadComponentRoute(pageFile, layouts, root, dev, force = false) {
   const id = compId(pageFile, layouts);
   if (!dev && serverCache.has(id)) return serverCache.get(id);
   const out = path.join(root, '.glash', 'server', id + '.mjs');
+  // Production: if `glash build` already precompiled this module, import it
+  // directly — no esbuild needed on the serving host.
+  if (!dev && !force && existsSync(out)) {
+    const mod = await import(pathToFileURL(out).href);
+    serverCache.set(id, mod);
+    return mod;
+  }
+  const eb = await esbuild();
+  if (!eb) throw new Error(MISSING);
   await fs.mkdir(path.dirname(out), { recursive: true });
   await eb.build({
     stdin: { contents: serverEntry(pageFile, layouts), resolveDir: path.dirname(pageFile), loader: 'js', sourcefile: 'glash-server-entry.js' },

package/src/server/router.mjs

@@ -7,9 +7,32 @@
 //   routes/docs/[...path].mjs -> /docs/*path       (catch-all)
 //   routes/api/hello.mjs      -> /api/hello        (API route — exports GET/POST/…)
 // Anything under routes/api/ is an API route; everything else is a page (SSR).
-import { promises as fs } from 'node:fs';
+import { promises as fs, existsSync } from 'node:fs';
 import path from 'node:path';
 
+/**
+ * File-based middleware: `_middleware.{mjs,js}` in any routes dir runs before
+ * the route, root→leaf. Each default-exports `(ctx) => Response | void` — return
+ * a value to short-circuit (redirect/auth/json), or nothing to continue. The
+ * root middleware runs for every request; `dash/_middleware` only for /dash/*.
+ */
+export function findMiddleware(routesDir, routeFile) {
+  const root = path.resolve(routesDir);
+  const dir = path.dirname(path.resolve(routeFile));
+  const rel = path.relative(root, dir);
+  const dirs = [root];
+  let acc = root;
+  for (const part of rel ? rel.split(path.sep) : []) { acc = path.join(acc, part); dirs.push(acc); }
+  const files = [];
+  for (const d of dirs) {
+    for (const name of ['_middleware.mjs', '_middleware.js']) {
+      const f = path.join(d, name);
+      if (existsSync(f)) { files.push(f); break; }
+    }
+  }
+  return files;
+}
+
 export async function discoverRoutes(routesDir) {
   const root = path.resolve(routesDir);
   const files = [];

package/src/server/server.mjs

@@ -10,7 +10,7 @@ import { promises as fs, existsSync, statSync, watch } from 'node:fs';
 import { randomBytes } from 'node:crypto';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
-import { discoverRoutes, matchRoute } from './router.mjs';
+import { discoverRoutes, matchRoute, findMiddleware } from './router.mjs';
 import { renderDocument, documentParts } from './html.mjs';
 import { isComponentRoute, loadComponentRoute, clientBundle, renderComponent, routeId, findLayouts, clearJsxCaches } from './jsx.mjs';
 import { securityHeaders } from '../security/headers.mjs';
@@ -61,7 +61,10 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
         req.on('close', () => hmrClients.delete(res));
         return;
       }
-      // Client hydration bundles: /_glash/<routeId>.js
+      // Static first: in production this serves prebuilt /_glash/<id>.js bundles
+      // (written by `glash build`) — no runtime esbuild needed.
+      if (await serveStatic(res, outDir, pathname, req, secHeaders)) return;
+      // Dynamic hydration bundles (dev, or when not prebuilt): /_glash/<routeId>.js
       if (pathname.startsWith('/_glash/')) {
         const id = pathname.slice('/_glash/'.length).replace(/\.js$/, '');
         const comp = routes.find((r) => isComponentRoute(r.file) && routeId(r.file) === id);
@@ -69,10 +72,17 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
         const js = await clientBundle(comp.file, findLayouts(routesDir, comp.file), dev);
         return send(res, 200, 'text/javascript; charset=utf-8', js, { ...secHeaders, 'cache-control': dev ? 'no-store' : 'public, max-age=31536000, immutable' });
       }
-      if (await serveStatic(res, outDir, pathname, req, secHeaders)) return;
       const match = matchRoute(routes, pathname);
       if (!match) return send(res, 404, 'text/plain; charset=utf-8', 'Not found', secHeaders);
-      const ctx = makeCtx(req, url, match.params);
+      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)) {
+        const mwMod = await importRoute(mwFile);
+        const mw = mwMod.default || mwMod.middleware;
+        if (typeof mw !== 'function') continue;
+        const result = await mw(ctx);
+        if (result) return sendMiddlewareResult(res, result, secHeaders);
+      }
       if (match.route.isApi) {
         const mod = await importRoute(match.route.file);
         return await handleApi(res, mod, req, ctx, secHeaders);
@@ -178,9 +188,10 @@ async function serveStatic(res, outDir, pathname, req, secHeaders) {
   return false;
 }
 
-function makeCtx(req, url, params) {
+function makeCtx(req, res, url, params) {
   return {
     req,
+    res,
     method: req.method,
     url,
     path: url.pathname,
@@ -213,3 +224,22 @@ function safeDecode(p) {
 export function json(body, { status = 200, headers } = {}) {
   return { __response: true, status, contentType: 'application/json', body, headers };
 }
+
+/** Middleware/handler helper: redirect to another path. */
+export function redirect(location, { status = 302 } = {}) {
+  return { __redirect: location, status };
+}
+
+function sendMiddlewareResult(res, result, secHeaders) {
+  if (result.__redirect) {
+    res.writeHead(result.status || 302, { ...secHeaders, location: result.__redirect });
+    return res.end();
+  }
+  if (result.__response) {
+    return send(res, result.status || 200, result.contentType || 'application/json',
+      typeof result.body === 'string' ? result.body : JSON.stringify(result.body), { ...secHeaders, ...(result.headers || {}) });
+  }
+  // A bare object/string from middleware is treated as a JSON/text body.
+  if (typeof result === 'string') return send(res, 200, 'text/plain; charset=utf-8', result, secHeaders);
+  return send(res, 200, 'application/json', JSON.stringify(result), secHeaders);
+}