spark-ssr 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spark-ssr",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Zero-config SSR for spark-html on Bun. The HTML template infers everything: filesystem routing, layouts, <spark-ssr> declarative data (SQL, URLs, globs, modules), auto CRUD with validation, guards, no-JS forms, schema + seeds, live updates, SEO. No build step.",
   "homepage": "https://wilkinnovo.github.io/spark-html",
   "type": "module",

package/src/hydrate.js

@@ -155,9 +155,20 @@ export function clientScript({ analysis, plan, table, cols, key, live }) {
   // live (§9): every write the server sees on this table pings the channel;
   // every open tab refetches through its own session. Realtime as one
   // attribute — no socket code, no pub/sub setup.
+  // Close on pagehide so the channel's HTTP/1.1 socket frees the instant we
+  // navigate away — a live EventSource that outlives its page eats one of the
+  // browser's ~6 per-host connections, and enough of them (rapid navigation
+  // across live pages) starve the next page's own request until the tab hangs.
+  // Reopen and refetch on a back/forward-cache restore.
   if (live && listVar) {
-    L.push(`const __live = new EventSource('/__spark/live');`);
-    L.push(`__live.onmessage = (e) => { if (e.data === '${table}') __refresh(); };`);
+    L.push(`let __live;`);
+    L.push(`function __openLive() {`);
+    L.push(`  __live = new EventSource('/__spark/live');`);
+    L.push(`  __live.onmessage = (e) => { if (e.data === '${table}') __refresh(); };`);
+    L.push(`}`);
+    L.push(`__openLive();`);
+    L.push(`addEventListener('pagehide', () => { if (__live) __live.close(); });`);
+    L.push(`addEventListener('pageshow', (e) => { if (e.persisted) { __openLive(); __refresh(); } });`);
   }
   return L.join('\n') + '\n';
 }

package/src/server.js

@@ -297,8 +297,29 @@ export async function serve(options = {}) {
   }
   // Reconnect-then-reload: after a server restart the EventSource reconnects,
   // and a fresh open following an error means "the server came back" — reload.
-  const RELOAD_CLIENT = '<script>(()=>{const e=new EventSource("/__spark/reload");let d=0;'
-    + 'e.onmessage=()=>location.reload();e.onerror=()=>{d=1};e.onopen=()=>{if(d)location.reload()}})()</script>';
+  // Close on pagehide: a live EventSource holds one of the browser's ~6
+  // per-host HTTP/1.1 sockets, and one that outlives its page starves the
+  // next navigation — rapid link-clicking (or a service worker that keeps a
+  // controlled client's sockets around) piles them up until the tab hangs
+  // loading. Freeing the socket the instant we leave keeps the pool clear;
+  // reopen if the page is restored from the back/forward cache.
+  const RELOAD_CLIENT = '<script>(()=>{let e,d=0;const open=()=>{e=new EventSource("/__spark/reload");'
+    + 'e.onmessage=()=>location.reload();e.onerror=()=>{d=1};e.onopen=()=>{if(d)location.reload()}};open();'
+    + 'addEventListener("pagehide",()=>{if(e)e.close()});'
+    + 'addEventListener("pageshow",v=>{if(v.persisted)open()})})()</script>';
+
+  // Heartbeats keep every SSE socket outside Bun's idleTimeout (the default
+  // would kill them at 10 s — and a killed reload socket reconnects, which
+  // the client reads as "the server came back": a spurious reload). The ping
+  // also flushes dead clients (enqueue throws → drop).
+  const heartbeat = setInterval(() => {
+    for (const set of [sseClients, liveClients]) {
+      for (const c of set) {
+        try { c.enqueue(sseEnc.encode(': ping\n\n')); } catch { set.delete(c); }
+      }
+    }
+  }, 25000);
+  heartbeat.unref?.();
 
   // ── live data channel (§9) — a production feature, unlike dev reload ──
   // Any write through the server pings /__spark/live with the table name;
@@ -1007,7 +1028,9 @@ export async function serve(options = {}) {
   }
 
   async function buildScope(pd, req) {
-    const scope = { ...req.query, ...req.params, session: req.session };
+    // `path` is ambient like `session` — the layout's nav highlights the
+    // current page with it. Query/params may shadow it deliberately.
+    const scope = { path: req.path, ...req.query, ...req.params, session: req.session };
     if (pd.code) Object.assign(scope, await runPageScript(pd.code, req));
     for (const p of pd.plan) {
       if (scope[p.var] !== undefined) continue; // the page <script> won
@@ -1216,6 +1239,9 @@ code{color:#fdba74}em{color:#a8a29e}</style></head><body>
   // ── the server ──
   const server = Bun.serve({
     port: options.port ?? 3000,
+    // SSE channels idle between events (heartbeat every 25 s keeps them
+    // alive); slow queries and big uploads get headroom too.
+    idleTimeout: 60,
     async fetch(request, srv) {
       const url = new URL(request.url);
       let pathname;
@@ -1417,6 +1443,7 @@ code{color:#fdba74}em{color:#a8a29e}</style></head><body>
     db,
     stop(force) {
       if (watchTimer) clearInterval(watchTimer);
+      clearInterval(heartbeat);
       for (const c of sseClients) { try { c.close(); } catch { /* gone */ } }
       sseClients.clear();
       for (const c of liveClients) { try { c.close(); } catch { /* gone */ } }