@webjsdev/server 0.8.70 → 0.8.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/server",
-  "version": "0.8.70",
+  "version": "0.8.72",
   "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

@@ -1,12 +1,13 @@
 import { existsSync } from 'node:fs';
 import { strongerVerdict } from '../dev-classify.js';
-import { watch as fsWatch } from 'node:fs/promises';
+import { watchTree } from './watch-tree.js';
 import { relative } from 'node:path';
 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';
@@ -189,7 +190,7 @@ function startNodeListener(ctx) {
   // Catch-all process handlers: log, but don't tear the process down on a
   // single mishandled promise. Uncaught exceptions are different: state may be
   // corrupted, so log + start an orderly shutdown rather than continuing.
-  installProcessHandlers(logger, () => shutdown('uncaughtException', { fatal: true }));
+  installProcessHandlers(logger, () => shutdown('uncaughtException', { fatal: true }), { dev });
 
   return {
     server,
@@ -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({
@@ -248,11 +252,12 @@ export async function startServer(opts) {
   /** @type {AbortController | null} */
   let watcherAbort = null;
   if (dev) {
-    // Watch the app root recursively via Node's built-in
-    // `fs.promises.watch`. Stable on macOS, Windows, and Linux as of
-    // Node 24. No external dep needed.
+    // Watch the app tree with Node's built-in `fs.watch` (no external dep):
+    // `watchTree` (#1521) watches the root plus each non-ignored top-level dir,
+    // so `node_modules` is never walked, and handles a per-path watch error
+    // (EACCES, ENOENT) with a warning instead of an uncaughtException.
     //
-    // fs.watch returns relative paths in event.filename. `shouldIgnoreWatchPath`
+    // Paths are reported relative to the watched root. `shouldIgnoreWatchPath`
     // (module-level, exported for tests) skips node_modules, .git, .webjs/, and
     // the SQLite dev DB (db/dev.db) + db/migrations so a file the dev server itself writes never loops.
     // Live-reload classification (#1398). Several files can change inside one
@@ -269,26 +274,32 @@ export async function startServer(opts) {
       app.rebuild(v || undefined);
     }, 80);
     watcherAbort = new AbortController();
-    const watchRoot = async (root) => {
-      try {
-        const events = fsWatch(root, { recursive: true, signal: watcherAbort.signal });
-        for await (const event of events) {
-          const filename = event.filename || '';
-          if (shouldIgnoreWatchPath(filename)) continue;
+    // One warning per unwatchable path (#1521): an EACCES / ENOENT on a single
+    // file must never stop the dev server, and a burst of the same temp file
+    // must not flood the log either.
+    const warned = new Set();
+    const onWatchError = (err) => {
+      const key = `${err && err.code}:${err && err.path}`;
+      if (warned.has(key) || warned.size > 200) return;
+      warned.add(key);
+      logger.warn(`file watcher skipped ${err && err.path ? err.path : 'a path'} (${err && err.code ? err.code : String(err)})`);
+    };
+    const watchRoot = (root) => {
+      const close = watchTree(root, {
+        ignore: shouldIgnoreWatchPath,
+        onEvent: (filename) => {
           // A regenerate output (#967) is a build product the server itself
           // writes on request; ignoring it stops a spurious rebuild + reload
           // (and a reload -> refetch -> recompile -> reload cycle), same as the
           // db/dev.db carve-out above. `app` exposes the check because `state`
           // lives in createRequestHandler's scope, not here.
-          if (app.isRegenerateOutput(filename)) continue;
+          if (app.isRegenerateOutput(filename)) return;
           pendingVerdict = strongerVerdict(pendingVerdict, app.classifyWatchPath(filename, root));
           rebuild();
-        }
-      } catch (err) {
-        if (err && /** @type any */(err).name !== 'AbortError') {
-          logger.warn({ err }, `file watcher exited (${root})`);
-        }
-      }
+        },
+        onError: onWatchError,
+      });
+      watcherAbort.signal.addEventListener('abort', close, { once: true });
     };
     watchRoot(app.appDir);
     // Extra roots the app reads from OUTSIDE its appDir (#894): repo-root content

package/src/dev/watch-tree.js

@@ -0,0 +1,104 @@
+import { watch, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * The dev live-reload watcher over one root (#1521).
+ *
+ * Two problems with the plain `fs.promises.watch(root, { recursive: true })`
+ * this replaces, both on Node 24's JS-implemented recursive watcher on Linux
+ * (`internal/fs/recursive_watch`), which opens one `fs.watch` per FILE:
+ *
+ * 1. A per-file failure (EACCES on a `sed -i` temp file another user created
+ *    with mode 0600, ENOENT on a file that vanished between the directory event
+ *    and the watch call) is emitted as `'error'` on an internal watcher the
+ *    promise API never listens to, so it surfaces as an uncaughtException and
+ *    the dev server shuts down. The callback form takes an `'error'` listener,
+ *    and the watcher keeps delivering events for every other file after it.
+ * 2. Watching the app ROOT walks `node_modules` too: about 10k per-file watches
+ *    and roughly 275ms of synchronous work on every boot of a scaffolded app,
+ *    all for events the ignore filter then drops. So the root is watched
+ *    non-recursively and each top-level directory that is not ignored gets its
+ *    own recursive watcher.
+ *
+ * A top-level directory created or removed after start is picked up from the
+ * root watcher's events, so `mkdir lib` mid-session is watched like it was
+ * there at boot.
+ *
+ * @param {string} root  absolute directory to watch
+ * @param {{
+ *   ignore: (relPath: string) => boolean,
+ *   onEvent: (relPath: string) => void,
+ *   onError: (err: NodeJS.ErrnoException) => void,
+ * }} opts  `relPath` is relative to `root`, with OS separators.
+ * @returns {() => void} closes every watcher
+ */
+export function watchTree(root, { ignore, onEvent, onError }) {
+  /** @type {Map<string, import('node:fs').FSWatcher>} */
+  const dirs = new Map();
+  let closed = false;
+
+  const guard = (/** @type {import('node:fs').FSWatcher} */ w) => {
+    w.on('error', (err) => onError(/** @type {NodeJS.ErrnoException} */ (err)));
+    return w;
+  };
+
+  const isDir = (name) => {
+    try { return statSync(join(root, name)).isDirectory(); } catch { return false; }
+  };
+
+  const watchDir = (name) => {
+    if (closed || dirs.has(name) || ignore(name)) return;
+    try {
+      const w = guard(watch(join(root, name), { recursive: true }, (_type, filename) => {
+        const rel = filename ? join(name, String(filename)) : name;
+        if (!ignore(rel)) onEvent(rel);
+      }));
+      dirs.set(name, w);
+    } catch (err) {
+      onError(/** @type {NodeJS.ErrnoException} */ (err));
+    }
+  };
+
+  /** @type {import('node:fs').FSWatcher | null} */
+  let top = null;
+  try {
+    top = guard(watch(root, (_type, filename) => {
+      if (!filename) return;
+      const name = String(filename);
+      if (ignore(name)) return;
+      // A top-level entry changed: start or stop following it as a directory.
+      if (isDir(name)) watchDir(name);
+      else if (dirs.has(name)) { try { dirs.get(name)?.close(); } catch {} dirs.delete(name); }
+      onEvent(name);
+    }));
+  } catch (err) {
+    onError(/** @type {NodeJS.ErrnoException} */ (err));
+  }
+
+  let entries = [];
+  try { entries = readdirSync(root, { withFileTypes: true }); } catch {}
+  for (const e of entries) {
+    if (e.isDirectory() || (e.isSymbolicLink() && isDir(e.name))) watchDir(e.name);
+  }
+
+  return () => {
+    closed = true;
+    try { top?.close(); } catch {}
+    for (const w of dirs.values()) { try { w.close(); } catch {} }
+    dirs.clear();
+  };
+}
+
+/**
+ * Whether an error came from a file watcher (#1521). Node marks every
+ * `fs.watch` failure with `syscall: 'watch'` (EACCES, EPERM, ENOENT, ELOOP, and
+ * ENOSPC when the inotify limit is reached). One unwatchable path is never a
+ * reason to stop a dev server, so the dev process handlers log these and keep
+ * serving.
+ *
+ * @param {unknown} err
+ * @returns {boolean}
+ */
+export function isWatchError(err) {
+  return !!err && typeof err === 'object' && /** @type {any} */ (err).syscall === 'watch';
+}

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/listener-bun.js

@@ -157,7 +157,7 @@ export function startBunListener(ctx) {
   const shutdown = makeShutdown({ closeServer, hub, logger });
   process.once('SIGINT', () => shutdown('SIGINT'));
   process.once('SIGTERM', () => shutdown('SIGTERM'));
-  installProcessHandlers(logger, () => shutdown('uncaughtException', { fatal: true }));
+  installProcessHandlers(logger, () => shutdown('uncaughtException', { fatal: true }), { dev });
 
   return {
     server,

package/src/listener-core.js

@@ -23,6 +23,7 @@ import {
 } from 'node:zlib';
 import { stripBasePath } from './base-path.js';
 import { randomUUID } from 'node:crypto';
+import { isWatchError } from './dev/watch-tree.js';
 
 /** The dev live-reload SSE path (matched after base-path stripping). */
 export const EVENTS_PATH = '/__webjs/events';
@@ -416,10 +417,18 @@ export class SseHub {
 /**
  * Install once-only process error handlers. Idempotent across multiple
  * `startServer` calls in the same process. Runtime-neutral (plain `process.on`).
+ *
+ * In dev, an uncaught file-watcher error (`syscall: 'watch'`, #1521) is logged
+ * as a warning and NOT fatal: one unreadable or vanished file in a watched dir
+ * says nothing about the server's state, and shutting down over it is how a
+ * `sed -i` from another user took a whole dev preview down. Prod keeps the
+ * strict contract, every uncaught exception is fatal.
+ *
  * @param {import('./logger.js').Logger} logger
  * @param {() => void} onFatal Starts the FATAL shutdown, which exits non-zero.
+ * @param {{ dev?: boolean }} [opts]
  */
-export function installProcessHandlers(logger, onFatal) {
+export function installProcessHandlers(logger, onFatal, { dev = false } = {}) {
   if (/** @type any */ (globalThis).__webjsProcHandlers) return;
   /** @type any */ (globalThis).__webjsProcHandlers = true;
   process.on('unhandledRejection', (reason) => {
@@ -428,6 +437,10 @@ export function installProcessHandlers(logger, onFatal) {
     });
   });
   process.on('uncaughtException', (err) => {
+    if (dev && isWatchError(err)) {
+      logger.warn(`file watcher skipped ${/** @type any */ (err).path || 'a path'} (${/** @type any */ (err).code || err.message})`);
+      return;
+    }
     logger.error('uncaughtException', { err: err.stack || err.message });
     // Begin orderly shutdown; process state may be corrupt.
     try { onFatal(); } catch {}

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)
 // ---------------------------------------------------------------------------