@webjsdev/server 0.8.70 → 0.8.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/server",
-  "version": "0.8.70",
+  "version": "0.8.71",
   "type": "module",
   "description": "The server for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Provides the file-based router, SSR, server actions, route handlers, middleware, and live reload on Node 24+ or Bun.",
   "main": "index.js",

package/src/dev/handler.js

@@ -816,7 +816,7 @@ export async function createRequestHandler(opts) {
           // path skipped it. This runs on the first warm AND after every rebuild,
           // so the pruned map is the single source of truth.
           const reachable = await scan();
-          ({ imports, integrity } = prunePinToReachable(imports, integrity, reachable));
+          ({ imports, integrity } = prunePinToReachable(imports, integrity, reachable, { appDir }));
         }
         await setVendorEntries(imports, integrity);
         return v.ok;

package/src/dev/helpers.js

@@ -531,12 +531,27 @@ function __webjsDirectEvents() {
 // and its hello says whether an edit landed meanwhile. \`bye\` on pagehide
 // drops the tab outright, and a bfcache restore reports in again.
 function __webjsReportVisibility(send) {
+  // The state this page was rendered at (#1516). The relay compares it with
+  // the server's on connect and on every reconnect, so an edit whose reload
+  // frame was lost (a stream replaced at a host's wake, a fresh relay, a tab
+  // that connected after the fanout) still reloads this page.
+  // Sent again on a bfcache restore, since \`bye\` dropped this tab's entry.
+  function sendPage() {
+    try {
+      var metas = document.querySelectorAll('meta[name="webjs-dev-reload"]');
+      var meta = metas.length ? metas[metas.length - 1] : null;
+      if (!meta) return;
+      var page = JSON.parse(meta.getAttribute('content') || 'null');
+      if (page && typeof page.boot === 'string') send({ type: 'page', boot: page.boot, seq: typeof page.seq === 'number' ? page.seq : null });
+    } catch (_) { /* no usable state: the relay's own hello check still runs */ }
+  }
+  sendPage();
   function report() {
     try { send({ type: 'visibility', visible: document.visibilityState !== 'hidden' }); } catch (_) { /* relay gone */ }
   }
   document.addEventListener('visibilitychange', report);
   addEventListener('pagehide', function () { try { send({ type: 'bye' }); } catch (_) { /* relay gone */ } });
-  addEventListener('pageshow', function (e) { if (e.persisted) report(); });
+  addEventListener('pageshow', function (e) { if (e.persisted) { sendPage(); report(); } });
   report();
   // Interaction keeps an idle-closing stream (webjs.dev.reloadIdle) open and
   // reopens a closed one, at most once a second. The dev embed bridge calls

package/src/dev/server.js

@@ -6,7 +6,8 @@ import { createServer as createHttp1Server } from 'node:http';
 import { createRequestHandler } from './handler.js';
 import { readServerTimeoutsFromApp, readDevWatchPathsFromApp } from './config.js';
 import { defaultLogger } from '../logger.js';
-import { SseHub, makeShutdown, installProcessHandlers, serverRuntime } from '../listener-core.js';
+import { SseHub, makeShutdown, installProcessHandlers, serverRuntime, DEV_BOOT_ID } from '../listener-core.js';
+import { setDevReloadState } from '../dev-reload-state.js';
 import { urlFromRequest } from '../forwarded.js';
 import { stripBasePath } from '../base-path.js';
 import { basePath } from '../importmap.js';
@@ -229,6 +230,9 @@ export async function startServer(opts) {
   // identically on both). Built before the handler so its onReload / onDevError
   // callbacks can fan out through it.
   const hub = new SseHub();
+  // Pages render the stream's state into a meta tag (#1516), so the relay can
+  // re-check a page against the server on every reconnect.
+  if (dev) setDevReloadState(() => ({ boot: DEV_BOOT_ID, seq: hub.seq }));
   let app;
   try {
     app = await createRequestHandler({

package/src/dev-reload-state.js

@@ -0,0 +1,31 @@
+/**
+ * The live-reload state a dev page was rendered at (#1516).
+ *
+ * `startServer` owns the reload stream's `SseHub`, which knows this process's
+ * boot id and how many reload frames it has sent. SSR renders that pair into a
+ * `webjs-dev-reload` meta tag, and the reload client hands it to the relay, so
+ * on every reconnect the relay can tell whether the page on screen is behind
+ * the server even when the reload frame that would have said so was lost.
+ *
+ * A module-level provider, the same shape as the base path and the embed
+ * origins, because the head is rendered far from the listener. An embedded
+ * `createRequestHandler` with no `startServer` has no reload stream, so no
+ * provider is set and no meta tag is rendered.
+ */
+
+/** @type {(() => { boot: string, seq: number }) | null} */
+let provider = null;
+
+/**
+ * Set (or clear with null) the function that reports the current state.
+ * @param {(() => { boot: string, seq: number }) | null} fn
+ */
+export function setDevReloadState(fn) {
+  provider = typeof fn === 'function' ? fn : null;
+}
+
+/** The current `{ boot, seq }`, or null when there is no reload stream. */
+export function devReloadState() {
+  if (!provider) return null;
+  try { return provider(); } catch { return null; }
+}

package/src/dev-reload-worker.js

@@ -98,6 +98,23 @@ export function parseHello(data) {
   return { boot: String(data), seq: null };
 }
 
+/**
+ * Whether a tab's page is behind the server (#1516). `page` is the
+ * `{ boot, seq }` the page was rendered at (the `webjs-dev-reload` meta tag),
+ * `boot` / `seq` what the server reports now. A different boot id is a
+ * restarted process; a different seq from the same process is an edit the page
+ * has not picked up. A missing seq on either side cannot say, so it is not
+ * stale (the boot id alone still decides).
+ * @param {{ boot: string, seq: number | null } | undefined} page
+ * @param {string | null} boot
+ * @param {number | null} seq
+ */
+export function pageIsStale(page, boot, seq) {
+  if (!page || boot === null) return false;
+  if (page.boot !== boot) return true;
+  return page.seq !== null && seq !== null && page.seq !== seq;
+}
+
 /** A reload frame's `seq` (#1507), or null when it carries none. @param {string} data */
 function reloadSeq(data) {
   try {
@@ -118,6 +135,16 @@ function reloadSeq(data) {
  * server's boot id and reload `seq`, and a difference from what this relay last
  * saw is a reload.
  *
+ * Every reconnect also re-checks each tab against the state its PAGE was
+ * rendered at (#1516). A tab sends `{ type: 'page', boot, seq }` from the
+ * page's `webjs-dev-reload` meta tag when it connects. A frame emitted while no
+ * stream was there to carry it is gone: a host that holds the quiet stream
+ * across a suspend and closes it at the next wake swallows the reload the wake
+ * itself caused, a fresh relay has no previous hello to compare with, and a tab
+ * that connects after a reload was fanned out never got it. In each case the
+ * next hello (or the tab's own connect) shows the page is behind, and that tab
+ * reloads.
+ *
  * The browser's own EventSource retry is replaced by an explicit one with
  * backoff (300ms doubling to 30s, reset by the next `hello`), so a server that
  * is gone for a while is probed less and less often instead of every 300ms.
@@ -137,6 +164,8 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
   const idleMs = opts && opts.idleMs > 0 ? opts.idleMs : 0;
   /** @type {Map<any, boolean>} each connected tab's port, and whether it is visible */
   const ports = new Map();
+  /** @type {Map<any, { boot: string, seq: number | null }>} the state each tab's page reflects (#1516) */
+  const pages = new Map();
   /** @type {string | null} the last error frame, cached for late-joining tabs */
   let lastError = null;
   /** @type {string | null} the last-seen per-process boot id (#893) */
@@ -157,13 +186,26 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
 
   /** @type {string} the strongest verdict seen in the CURRENT batch (#1398) */
   let batchVerdict = 'page';
+  /** Whether the batch reloads every tab, or only the stale ones in `batchPorts` (#1516). */
+  let batchAll = false;
+  /** @type {Set<any>} tabs whose page fell behind, reloaded on their own */
+  const batchPorts = new Set();
 
   function emitReload() {
     if (quietTimer !== null) { timers.clearTimeout(quietTimer); quietTimer = null; }
     if (capTimer !== null) { timers.clearTimeout(capTimer); capTimer = null; }
     const v = batchVerdict;
     batchVerdict = 'page';   // a fresh batch starts at the weakest verdict
-    fanout({ type: 'reload', verdict: v });
+    const msg = { type: 'reload', verdict: v };
+    const targets = batchAll ? Array.from(ports.keys()) : Array.from(batchPorts).filter((p) => ports.has(p));
+    batchAll = false;
+    batchPorts.clear();
+    for (const p of targets) {
+      // The tab applies this reload, so from here its page reflects the state
+      // the relay knows now; a later hello compares against that.
+      if (pages.has(p) && typeof lastBoot === 'string') pages.set(p, { boot: lastBoot, seq: lastSeq });
+      try { p.postMessage(msg); } catch (_) { ports.delete(p); pages.delete(p); }
+    }
   }
 
   /** Strength rank; an unrecognised name ranks strongest, so it can only ever
@@ -173,8 +215,12 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
     return i === -1 ? 0 : i;
   }
 
-  /** @param {string} verdict */
-  function requestReload(verdict) {
+  /**
+   * @param {string} verdict
+   * @param {any} [port]  reload only this tab (its page fell behind); omitted, every tab
+   */
+  function requestReload(verdict, port) {
+    if (port === undefined) batchAll = true; else batchPorts.add(port);
     if (rank(verdict) < rank(batchVerdict)) batchVerdict = VERDICT_STRENGTH[rank(verdict)];
     if (quietTimer !== null) timers.clearTimeout(quietTimer);
     quietTimer = timers.setTimeout(emitReload, RELOAD_QUIET_MS);
@@ -199,6 +245,13 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
     idleTimer = timers.setTimeout(() => { idleTimer = null; close(); }, idleMs);
   }
 
+  // Reload every tab whose page is behind what the server reports now (#1516).
+  function checkPages() {
+    for (const [p, page] of pages) {
+      if (pageIsStale(page, lastBoot, lastSeq)) requestReload('reload', p);
+    }
+  }
+
   function anyVisible() {
     for (const v of ports.values()) if (v) return true;
     return false;
@@ -218,6 +271,7 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
       }
       lastBoot = h.boot;
       lastSeq = h.seq;
+      checkPages();
     });
     es.addEventListener('reload', (e) => {
       touch();
@@ -258,8 +312,18 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
     ports.set(port, true);
     port.onmessage = (m) => {
       const d = (m && m.data) || {};
+      if (d.type === 'page') {
+        // The state this tab's page was rendered at (#1516). Checked now
+        // against what the relay already knows, so a tab that missed a fanned
+        // out reload catches up, and again on every hello.
+        if (typeof d.boot === 'string') {
+          pages.set(port, { boot: d.boot, seq: typeof d.seq === 'number' ? d.seq : null });
+          if (pageIsStale(pages.get(port), lastBoot, lastSeq)) requestReload('reload', port);
+        }
+        return;
+      }
       if (d.type === 'visibility') ports.set(port, d.visible !== false);
-      else if (d.type === 'bye') ports.delete(port);
+      else if (d.type === 'bye') { ports.delete(port); pages.delete(port); }
       else if (d.type === 'activity') { if (!ports.get(port)) return; touch(); }
       else return;
       sync();

package/src/ssr/head.js

@@ -7,6 +7,7 @@ import { vendorIntegrityFor } from '../importmap.js';
 import { publicEnvShim } from './env-shim.js';
 import { clientRouterEnabled } from './client-router-flag.js';
 import { embedScriptTag } from '../dev-embed.js';
+import { devReloadState } from '../dev-reload-state.js';
 
 // Which icon metadata ROUTES the app has (`app/icon.*`, `app/apple-icon.*`).
 // Set at boot and on each route rebuild from the route table, the same shape
@@ -315,8 +316,12 @@ export function wrapHead(opts) {
     : '';
 
   const boot = (imports || lazyBoot) ? `<script type="module"${n}>\n${imports}${lazyBoot}\n</script>` : '';
+  // The reload state this page is rendered at (#1516), so the reload client can
+  // tell on every reconnect whether the page fell behind the server.
+  const reloadState = opts.dev ? devReloadState() : null;
   const reload = opts.dev
-    ? `<script type="module"${n} src="${escapeAttr(withBasePath('/__webjs/reload.js', bp))}"></script>`
+    ? (reloadState ? `<meta name="webjs-dev-reload" content="${escapeAttr(JSON.stringify(reloadState))}">\n` : '') +
+      `<script type="module"${n} src="${escapeAttr(withBasePath('/__webjs/reload.js', bp))}"></script>`
     : '';
   const suspenseBoot = opts.streaming
     ? `<script${n}>(function(){` +

package/src/vendor/manifest.js

@@ -91,6 +91,33 @@ export function getPackageManifest(pkgName, appDir) {
   }
 }
 
+/**
+ * The names a package depends on at runtime (`dependencies`,
+ * `peerDependencies`, `optionalDependencies`) and its installed directory,
+ * resolved from `fromDir` (#1518). Resolving a dependency from its DEPENDENT's
+ * directory finds a nested install as well as a hoisted one, so the pin prune
+ * can walk the real installed graph. Null when the package is not installed.
+ *
+ * @param {string} pkgName
+ * @param {string} fromDir  a directory holding a package.json (the app, or a dependent package)
+ * @returns {{ dir: string, names: string[] } | null}
+ */
+export function getPackageDeps(pkgName, fromDir) {
+  const real = resolvePackageDir(pkgName, fromDir);
+  if (!real) return null;
+  try {
+    const pkg = JSON.parse(readFileSync(join(real, 'package.json'), 'utf8'));
+    const names = new Set([
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.optionalDependencies || {}),
+    ]);
+    return { dir: real, names: [...names] };
+  } catch {
+    return null;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // JSPM Generator API client
 // ---------------------------------------------------------------------------

package/src/vendor/pins.js

@@ -1,9 +1,9 @@
 import { readFile, writeFile, mkdir, unlink, stat, rename, readdir } from 'node:fs/promises';
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { spawnSync } from 'node:child_process';
 import { BUILTIN, FRAMEWORK_SERVER_ONLY, extractPackageName, scanBareImports } from './scanner.js';
-import { getPackageVersion } from './manifest.js';
+import { getPackageVersion, getPackageDeps } from './manifest.js';
 import { SUPPORTED_PROVIDERS } from './providers.js';
 import { PIN_BUNDLE_TIMEOUT_MS, fetchIntegrity, sha384Integrity } from './integrity.js';
 import { jspmGenerate } from './jspm.js';
@@ -506,17 +506,54 @@ export function basePackage(spec) {
  * when code imports `dayjs/plugin/utc`, and vice versa). Integrity hashes for
  * dropped URLs are pruned too.
  *
+ * With `opts.appDir` it also keeps the TRANSITIVE dependencies of every kept
+ * package (#1518). App code never imports a transitive (`@codemirror/view`
+ * imports `style-mod`, `@codemirror/language` imports `@lezer/lr`), so the
+ * filter above alone dropped every one of them and the browser failed to
+ * resolve the bare specifier. The closure walks each kept package's installed
+ * `package.json`, resolving each dependency from its dependent's directory, and
+ * keeps every pin entry whose base package it reaches, which is the set the
+ * live resolve serves (jspm flattens the transitives of the reachable
+ * installs). When a kept package is not on disk the graph cannot be walked, so
+ * every pin entry the app does not itself declare is kept instead: an unused
+ * entry costs nothing, a missing one breaks the page.
+ *
  * @param {Record<string, string>} imports  pin entries (specifier -> URL)
  * @param {Record<string, string>} integrity  SRI hashes keyed by URL
  * @param {Set<string>} reachable  bare specifiers used by non-elided modules
+ * @param {{ appDir?: string }} [opts]
  * @returns {{ imports: Record<string, string>, integrity: Record<string, string> }}
  */
-export function prunePinToReachable(imports, integrity, reachable) {
-  const reachableBases = new Set([...reachable].map(basePackage));
+export function prunePinToReachable(imports, integrity, reachable, opts = {}) {
+  const keepBases = new Set([...reachable].map(basePackage));
+  if (opts.appDir) {
+    const pinnedBases = new Set(Object.keys(imports || {}).map(basePackage));
+    let complete = true;
+    /** @type {Array<[string, string]>} base package, directory to resolve it from */
+    const queue = [...keepBases].filter((b) => pinnedBases.has(b)).map((b) => [b, opts.appDir]);
+    const walked = new Set();
+    while (queue.length) {
+      const [base, from] = /** @type {[string, string]} */ (queue.shift());
+      const key = `${base}\0${from}`;
+      if (walked.has(key)) continue;
+      walked.add(key);
+      const deps = getPackageDeps(base, from);
+      if (!deps) { complete = false; continue; }
+      for (const name of deps.names) {
+        if (!pinnedBases.has(name)) continue;
+        keepBases.add(name);
+        queue.push([name, deps.dir]);
+      }
+    }
+    if (!complete) {
+      const declared = declaredDeps(opts.appDir);
+      for (const b of pinnedBases) if (!declared.has(b)) keepBases.add(b);
+    }
+  }
   /** @type {Record<string, string>} */
   const keptImports = {};
   for (const [spec, url] of Object.entries(imports || {})) {
-    if (reachable.has(spec) || reachableBases.has(basePackage(spec))) {
+    if (reachable.has(spec) || keepBases.has(basePackage(spec))) {
       keptImports[spec] = url;
     }
   }
@@ -529,6 +566,25 @@ export function prunePinToReachable(imports, integrity, reachable) {
   return { imports: keptImports, integrity: keptIntegrity };
 }
 
+/**
+ * Every package the app's own package.json declares, in any dependency field.
+ * @param {string} appDir
+ * @returns {Set<string>}
+ */
+function declaredDeps(appDir) {
+  try {
+    const pkg = JSON.parse(readFileSync(join(appDir, 'package.json'), 'utf8'));
+    return new Set([
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.devDependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.optionalDependencies || {}),
+    ]);
+  } catch {
+    return new Set();
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Importmap coherence check (issue #450)
 // ---------------------------------------------------------------------------