glashjs 0.3.0 → 0.4.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,9 @@ 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] File-based middleware (`_middleware.mjs`, root→leaf) — auth, redirects, headers
+- [ ] State-preserving fast-refresh, Suspense streaming, `<Video>`, `glash deploy`
 - [ ] `<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.4.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,9 @@
   "exports": {
     ".": "./src/index.mjs",
     "./config": "./src/config.mjs",
-    "./security": "./src/security/headers.mjs"
+    "./security": "./src/security/headers.mjs",
+    "./image": "./src/components/image.mjs",
+    "./package.json": "./package.json"
   },
   "files": [
     "bin",

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/index.mjs

@@ -5,6 +5,7 @@ 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';

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';
@@ -72,7 +72,15 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
       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 +186,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 +222,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);
+}