glashjs 0.4.0 → 0.5.1

package/README.md

@@ -162,8 +162,10 @@ animatedFavicon: true,                         // bundled animated glash mark (d
 - [x] Streaming SSR (shell flushed before the component renders)
 - [x] Dev live-reload over SSE (auto-refresh on save)
 - [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
-- [ ] State-preserving fast-refresh, Suspense streaming, `<Video>`, `glash deploy`
+- [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.4.0",
+  "version": "0.5.1",
   "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": {
@@ -11,6 +11,7 @@
     "./config": "./src/config.mjs",
     "./security": "./src/security/headers.mjs",
     "./image": "./src/components/image.mjs",
+    "./video": "./src/components/video.mjs",
     "./package.json": "./package.json"
   },
   "files": [

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);
@@ -39,14 +63,31 @@ export async function build({ root = process.cwd(), log = console.log } = {}) {
   log(`\nglashjs build — "${cfg.name}"`);
   log(`  public: ${path.relative(root, publicDir)}  ->  out: ${path.relative(root, outDir)}\n`);
 
-  log('Optimizing assets:');
-  const manifest = await optimizeAssets(publicDir, { log });
+  // A routes-only app may have no public/ dir — that's fine, just skip assets.
+  let manifest;
+  if (existsSync(publicDir)) {
+    log('Optimizing assets:');
+    manifest = await optimizeAssets(publicDir, { log });
+  } else {
+    log(`(no ${cfg.publicDir}/ dir — skipping asset optimization)`);
+    manifest = { totals: { assets: 0, originalBytes: 0, optimizedBytes: 0, savedPercent: 0 }, assets: {} };
+  }
   const version = deriveVersion(manifest);
   manifest.version = version;
   manifest.generatedAt = new Date().toISOString();
 
   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 +108,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/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

@@ -9,3 +9,4 @@ 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/server.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,7 +72,6 @@ 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, res, url, match.params);