@webjsdev/server 0.8.91 → 0.10.0

package/src/ssr/responses.js

@@ -1,4 +1,5 @@
-import { cspNonce, renderToString } from '@webjsdev/core';
+import { cspNonce, renderToString, isRedirect } from '@webjsdev/core';
+import { headerSafeLocation } from '../redirect-location.js';
 import { BUFFERED_MARKER, STREAM_MARKER } from '../conditional-get.js';
 import { publishedBuildId, appSourceId } from '../importmap.js';
 import { escapeAttr, escapeHtml } from './escape.js';
@@ -82,7 +83,22 @@ export function htmlResponse(html, status, req, url, metadata) {
   // which is what keeps the router's partial responses cheap (#1140).
   // See conditional-get.js.
   headers.set(BUFFERED_MARKER, '1');
-  return new Response(html, { status, headers });
+  return new Response(noindexErrorPage(html, status), { status, headers });
+}
+
+/**
+ * A 404, 403 or 401 page is not something to index, so, as Next.js does for
+ * every not-found page (#1686), it carries `<meta name="robots"
+ * content="noindex">` unless the app set robots metadata itself. Inserted
+ * before `</head>`, so a boundary inside the layouts and a `global-not-found`
+ * that writes its own document are covered alike.
+ * @param {string} html @param {number} status
+ */
+export function noindexErrorPage(html, status) {
+  if (status !== 404 && status !== 403 && status !== 401) return html;
+  if (typeof html !== 'string' || /<meta\s[^>]*name=["']?robots/i.test(html)) return html;
+  const at = html.indexOf('</head>');
+  return at < 0 ? html : html.slice(0, at) + '<meta name="robots" content="noindex">' + html.slice(at);
 }
 
 /**
@@ -99,8 +115,10 @@ export function htmlResponse(html, status, req, url, metadata) {
  * @param {Record<string, any>} [metadata]
  * @param {string} [nonce]
  * @param {boolean} [dev]  dev surfaces a streamed-boundary error message; prod stays silent
+ * @param {(e: unknown) => Promise<string | null>} [accessFallback] the markup of the
+ *   nearest not-found / forbidden / unauthorized boundary for such a throw, else null
  */
-export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url, metadata, nonce, dev) {
+export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url, metadata, nonce, dev, accessFallback) {
   const encoder = new TextEncoder();
   const headers = new Headers({ 'content-type': 'text/html; charset=utf-8' });
   // Default: no caching. Pages are dynamic by default: the developer
@@ -137,6 +155,7 @@ export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req
       // still arriving" and would block its progressive swap until the slow
       // boundary (#473). The comment is inert for the native initial-load parse.
       controller.enqueue(encoder.encode(prefix + bodyHtml + '<!--wj-stream-shell-->'));
+      let noindexSent = /<meta\s[^>]*name=["']?robots/i.test(prefix);
       try {
         // Loop: resolve all currently-pending promises in parallel; nested
         // Suspense inside resolved content adds more pending entries.
@@ -160,6 +179,22 @@ export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req
                 for (const n of sub.pending) ctx.pending.push(n);
                 return { id: p.id, html };
               } catch (e) {
+                // A redirect() thrown inside a streamed boundary arrives after
+                // the 200 is sent, so it becomes a client redirect, as Next.js
+                // does (#1686): a marker the soft-navigation path follows, plus
+                // a refresh and a script for a first load (below).
+                if (isRedirect(e)) {
+                  const to = headerSafeLocation(/** @type {any} */ (e).url);
+                  return { id: p.id, html: `<meta data-webjs-redirect="${escapeAttr(to)}">`, redirect: to };
+                }
+                // notFound() / forbidden() / unauthorized() after the 200 went
+                // out: the nearest boundary renders in place of the streamed
+                // content and the page is marked noindex, as Next.js documents
+                // ("keeps its 200 status. Next.js adds a noindex tag", #1686).
+                if (accessFallback) {
+                  const fb = await accessFallback(e);
+                  if (fb !== null) return { id: p.id, html: fb, noindex: true };
+                }
                 // Match the SSR error-isolation policy (render-server.js's
                 // defaultSSRErrorTemplate): dev surfaces the message so the
                 // failure is obvious, prod stays SILENT so no internal detail
@@ -171,6 +206,14 @@ export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req
             })
           );
           for (const r of settled) {
+            if (r.noindex && !noindexSent) {
+              noindexSent = true;
+              const n = nonce ? ` nonce="${escapeAttr(nonce)}"` : '';
+              controller.enqueue(encoder.encode(
+                `<meta name="robots" content="noindex">` +
+                `<script${n}>document.head.insertAdjacentHTML('beforeend','<meta name="robots" content="noindex">')</script>`,
+              ));
+            }
             // Emit just the <template>: the MutationObserver-based resolver
             // in the boot script detects it and swaps it into the placeholder.
             // Falls back to the __webjsResolve global for browsers without MO.
@@ -181,9 +224,13 @@ export function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req
             // <script> is here for legacy / extremely-restrictive
             // environments. Either way it must be nonce-signed.
             const scriptNonce = nonce ? ` nonce="${escapeAttr(nonce)}"` : '';
+            const go = r.redirect
+              ? `<meta http-equiv="refresh" content="0;url=${escapeAttr(r.redirect)}">`
+                + `<script${scriptNonce}>location.replace(${JSON.stringify(r.redirect).replace(/</g, '\\u003c')})</script>`
+              : '';
             const chunk =
               `<template data-webjs-resolve="${r.id}">${r.html}</template>` +
-              `<script${scriptNonce}>window.__webjsResolve&&__webjsResolve("${r.id}")</script>`;
+              `<script${scriptNonce}>window.__webjsResolve&&__webjsResolve("${r.id}")</script>` + go;
             controller.enqueue(encoder.encode(chunk));
           }
         }

package/src/ssr/shipped-modules.js

@@ -2,11 +2,11 @@
  * The boot's shipped-module assembly, shared by the SSR render and the 103
  * Early Hints (#1644).
  *
- * For a matched route the client boot imports the page and its layouts MINUS
- * the inert ones (a module that does no client work, #170), with an
- * IMPORT-ONLY module (#605) replaced by the component frontier it exists to
- * import, and a `static lazy` component in that frontier (#1524) diverted to
- * the lazy loader instead of imported. `ssr/render.js` derived that list per
+ * For a matched route the client boot imports the component FRONTIER of each
+ * of its route modules (layouts, loading templates, the page), never a route
+ * module itself (#1686, `route-frontier.js`), with a `static lazy` component
+ * in that frontier (#1524) diverted to the lazy loader instead of imported.
+ * `ssr/render.js` derived that list per
  * request, and the Node listener's `routeFor` (the 103 Early Hints) carried a
  * second copy of the same loop that had drifted: it knew nothing of lazy
  * files, so a lazy frontier component was early-hinted although the boot
@@ -15,8 +15,8 @@
  * One function now owns the assembly, memoized per ROUTE OBJECT in a WeakMap
  * (the route table is rebuilt per build, so a stale entry dies with its
  * route, and a dynamic route cannot grow the memo the way a pathname key
- * would) and validated against the build epoch (the inert / import-only /
- * lazy sets are per-build inputs). The hinted url list, the same modules
+ * would) and validated against the build epoch (the frontiers and the lazy
+ * set are per-build inputs). The hinted url list, the same modules
  * through `withBasePath` then `withAssetHash`, is memoized beside it so a
  * warm GET costs one WeakMap lookup.
  */
@@ -28,8 +28,7 @@ import { toUrlPath } from './preloads.js';
 /**
  * @typedef {object} ShippedDeps
  * @property {string} appDir
- * @property {Set<string> | undefined} inert  inert page / layout files (never shipped)
- * @property {Map<string, string[]> | undefined} importOnly  import-only module -> the component files emitted in its place
+ * @property {Map<string, string[]> | undefined} frontiers  route module -> the component files the boot imports in its place
  * @property {Map<string, string[]> | undefined} lazyFiles  lazy component file -> its tags
  * @property {string | undefined} instrumentationClient  `instrumentation-client.*`, imported first when present
  */
@@ -47,14 +46,20 @@ const MEMO = new WeakMap();
  * The modules the client boot imports for `route`, plus the lazy frontier it
  * registers instead. Same object back for the same route within a build.
  *
- * @param {{ file: string, layouts: string[] }} route  the matched route (its object identity is the memo key)
+ * @param {{ file: string, layouts: string[], loadings?: string[] }} route  the matched route (its object identity is the memo key)
  * @param {ShippedDeps} deps
  * @returns {ShippedModules}
  */
 export function shippedBootModules(route, deps) {
   const hit = MEMO.get(route);
   if (hit && hit.epoch === buildEpoch()) return hit.value;
-  const value = assembleBootModules([route.file, ...route.layouts], deps);
+  // Nesting order, outermost layout first and the page last, so an ancestor's
+  // elements are defined before a descendant's. A context provider in a layout
+  // then exists when a page component's context request fires on upgrade; with
+  // the page first, that one-shot request went unanswered and the consumer
+  // silently got no value. A loading template renders before the page streams
+  // in, so a component only it renders must register too.
+  const value = assembleBootModules([...route.layouts, ...(route.loadings || []), route.file], deps);
   MEMO.set(route, { epoch: buildEpoch(), value, hinted: null, hintedBasePath: '' });
   return value;
 }
@@ -72,7 +77,7 @@ export function shippedBootModules(route, deps) {
  * @returns {ShippedModules}
  */
 export function assembleBootModules(files, deps) {
-  const { appDir, inert, importOnly, lazyFiles, instrumentationClient } = deps;
+  const { appDir, frontiers, lazyFiles, instrumentationClient } = deps;
   /** @type {string[]} */
   const moduleUrls = [];
   /** @type {Record<string, string>} */
@@ -84,11 +89,12 @@ export function assembleBootModules(files, deps) {
     if (tags) { for (const t of tags) frontierLazy[t] = u; return; }
     if (!seen.has(u)) { seen.add(u); moduleUrls.push(u); }
   };
+  // A route module never ships: only its component frontier does. A file with
+  // no frontier entry (none computed yet, in the pre-warm window) emits
+  // nothing, never the file itself.
   for (const f of files) {
-    if (inert && inert.has(f)) continue;
-    const emit = importOnly && importOnly.get(f);
+    const emit = frontiers && frontiers.get(f);
     if (emit) emit.forEach(push);
-    else push(f);
   }
   // instrumentation-client.{js,ts} (#848): import it FIRST in the client boot
   // so it runs before app modules (Next's instrumentation-client ordering).
@@ -102,12 +108,42 @@ export function assembleBootModules(files, deps) {
   return { moduleUrls, frontierLazy };
 }
 
+/**
+ * The 103 Early Hints `Link` values for the boot's modules: a plain
+ * `rel=preload; as=script; crossorigin=anonymous` per url, NEVER
+ * `rel=modulepreload`.
+ *
+ * A module hint in a 103 arrives before the document, so it is processed
+ * before the page's `<script type="importmap">` can be parsed. Firefox treats
+ * a modulepreload as the start of module loading and then refuses the import
+ * map ("Import maps are not allowed after a module load or preload has
+ * started"), so every bare `@webjsdev/core` import failed and no script ran on
+ * a Node-served page. The HTML spec gives modulepreload no early-hint
+ * behaviour at all (its "process a link header" steps do nothing), and
+ * Chromium acts only on preload and preconnect there, so the modulepreload
+ * hint was a no-op in Chromium and fatal in Firefox.
+ *
+ * A plain preload only puts the bytes in the preload cache: it creates no
+ * module script, resolves no specifier and fetches no descendants, so it
+ * cannot run ahead of the import map on any engine. `as=script` with
+ * `crossorigin=anonymous` is a CORS fetch with same-origin credentials,
+ * which is exactly the request a module script makes, so the body's
+ * `<link rel="modulepreload">` and the boot's import reuse the response
+ * instead of fetching it again.
+ *
+ * @param {string[]} urls  the hinted boot module urls (`hintedBootModules`)
+ * @returns {string[]}
+ */
+export function earlyHintLinks(urls) {
+  return urls.map((u) => `<${u}>; rel=preload; as=script; crossorigin=anonymous`);
+}
+
 /**
  * The 103 Early Hints url list for `route`: the SAME modules the boot
  * imports, through `withBasePath` then `withAssetHash`, so the hint warms
  * exactly the url the body requests (#243). Memoized beside the assembly.
  *
- * @param {{ file: string, layouts: string[] }} route
+ * @param {{ file: string, layouts: string[], loadings?: string[] }} route
  * @param {ShippedDeps} deps
  * @param {string} basePath  the normalized `webjs.basePath` (`''` at a root mount)
  * @returns {string[]}

package/src/testing.d.ts

@@ -46,12 +46,22 @@ export declare function withSessionCookie(init: RequestInit | undefined, session
  * Submit a page's `<form action={action}>` the way a browser with JS OFF does:
  * render the page, reuse the identity the server put in its hidden
  * `__webjs_action` field, and POST it back with the given fields. A POST that
- * omits that field is not a form submission and is answered `405`.
+ * omits that field is not a form submission and is answered `405`. Without
+ * `match`, it picks among the forms bound to an action, skipping a layout's
+ * plain form. When several remain and no `index` is given, it posts the one
+ * whose inputs hold every submitted field name, and throws (listing each form
+ * and its fields) when none or more than one does. A `File` / `Blob` value
+ * posts the form multipart.
+ *
+ * @example
+ * // A layout's bound logout form and the page's task form: the fields pick.
+ * const res = await submitForm(app.handle, '/projects/1', { title: 'Ship it' }, { cookies });
+ * assert.equal(res.status, 303);
  */
 export declare function submitForm(
   handle: Handle,
   path: string,
-  fields?: Record<string, string> | URLSearchParams | FormData,
+  fields?: Record<string, string | string[] | Blob | Blob[]> | URLSearchParams | FormData,
   opts?: {
     index?: number;
     match?: string | RegExp;
@@ -91,6 +101,25 @@ export declare function actionEndpoint(
  * Round-trip an action through its REAL RPC endpoint (serializer + CSRF + prod
  * error sanitization) and return the parsed return value. Models a same-origin
  * browser POST, so it passes the Origin / Sec-Fetch-Site CSRF check.
+ *
+ * @example
+ * ```ts
+ * // test/tasks/add-task.test.ts, run with `webjs test`
+ * import { test } from 'node:test';
+ * import assert from 'node:assert/strict';
+ * import { createRequestHandler } from '@webjsdev/server';
+ * import { invokeActionForTest, submitForm } from '@webjsdev/server/testing';
+ *
+ * test('a blank title is refused', async () => {
+ *   const app = await createRequestHandler({ appDir: process.cwd() });
+ *   const result = await invokeActionForTest<{ success: boolean }>(
+ *     app, 'modules/tasks/actions/add-task.server.ts', 'addTask', [{ title: '' }]);
+ *   assert.equal(result.success, false);
+ *   // The no-JS form path: renders /tasks, posts its bound form, 422 on failure.
+ *   const res = await submitForm(app.handle, '/tasks', { title: '' });
+ *   assert.equal(res.status, 422);
+ * });
+ * ```
  */
 export declare function invokeActionForTest<T = unknown>(
   app: AppOrHandle,

package/src/testing.js

@@ -33,7 +33,7 @@
  */
 
 import { hashFile, RPC_CONTENT_TYPE } from './actions.js';
-import { FORM_ACTION_FIELD } from '@webjsdev/core';
+import { FORM_ACTION_FIELD, redirect } from '@webjsdev/core';
 import { getSerializer } from './serializer.js';
 import { join, sep } from 'node:path';
 
@@ -221,7 +221,7 @@ export async function loginAndGetCookies(handle, credentials, opts = {}) {
  *
  * @param {Handle} handle
  * @param {string} path the page to render AND, by default, to submit back to
- * @param {Record<string, string> | URLSearchParams | FormData} [fields]
+ * @param {Record<string, string | string[]> | URLSearchParams | FormData} [fields]
  * @param {{
  *   index?: number,
  *   match?: string | RegExp,
@@ -269,15 +269,56 @@ function findForms(html) {
   return out;
 }
 
+/**
+ * The submittable field names a form carries, `[]` suffixes dropped, the
+ * framework's own `__webjs_action` left out.
+ * @param {string} form
+ * @returns {string[]}
+ */
+function formFieldNames(form) {
+  const names = new Set();
+  for (const m of form.matchAll(/<(?:input|select|textarea|button)\b[^>]*?\bname\s*=\s*["']([^"']+)["']/gi)) {
+    if (m[1] !== '__webjs_action') names.add(m[1].replace(/\[\]$/, ''));
+  }
+  return [...names];
+}
+
 export async function submitForm(handle, path, fields = {}, opts = {}) {
   const getInit = opts.cookies ? withCookies({}, opts.cookies) : {};
   const page = await testRequest(handle, path, getInit);
   const html = await page.text();
 
   const forms = findForms(html);
-  const candidates = opts.match
+  // Without `match`, a bound form is the one a test means: a layout's plain
+  // form (a logout POST, a search GET) often comes first on the page, and
+  // picking it reported the page's real form as unbound.
+  const isBound = (/** @type {string} */ f) => /name="__webjs_action"/.test(f);
+  let candidates = opts.match
     ? forms.filter((f) => (opts.match instanceof RegExp ? opts.match.test(f) : f.includes(opts.match)))
-    : forms;
+    : (forms.some(isBound) ? forms.filter(isBound) : forms);
+  // Several candidates and no `index`: the form a test means is the one whose
+  // fields it is filling in (a layout's logout form beside a page's task form).
+  // When the field names do not single one out, refuse rather than post the
+  // first, which used to submit a logout silently and pass a later assertion.
+  if (candidates.length > 1 && opts.index === undefined) {
+    const keys = typeof fields.keys === 'function' ? [...new Set(fields.keys())] : Object.keys(fields);
+    const wanted = keys.map((k) => k.replace(/\[\]$/, ''));
+    const covering = candidates.filter((f) => {
+      const names = new Set(formFieldNames(f));
+      return wanted.every((k) => names.has(k));
+    });
+    if (covering.length !== 1) {
+      const list = candidates
+        .map((f) => `  ${f.slice(0, f.indexOf('>') + 1)} fields: ${formFieldNames(f).join(', ') || '(none)'}`)
+        .join('\n');
+      throw new Error(
+        `submitForm: ${candidates.length} ${opts.match ? 'matching' : 'bound'} forms on ${path}, and the submitted `
+        + `fields (${wanted.join(', ') || 'none'}) ${covering.length ? 'fit more than one' : 'fit none of them'}. `
+        + `Pick one with { match: 'name="title"' } or { index: N }:\n${list}`,
+      );
+    }
+    candidates = covering;
+  }
   const form = candidates[opts.index || 0];
   if (!form) {
     throw new Error(
@@ -287,25 +328,44 @@ export async function submitForm(handle, path, fields = {}, opts = {}) {
   }
   const id = form.match(/name="__webjs_action"\s+value="([^"]*)"/);
   if (!id) {
+    const openTag = form.slice(0, form.indexOf('>') + 1);
     throw new Error(
-      `submitForm: the <form> on ${path} carries no __webjs_action field, so it `
-      + 'is not bound to a server action. Write it as `<form action=${myAction}>` '
-      + 'with the action imported from a `use server` module.',
+      `submitForm: the <form> on ${path} it picked (${openTag}) carries no __webjs_action `
+      + 'field, so it is not bound to a server action. Write it as `<form action=${myAction}>` '
+      + 'with the action imported from a `use server` module, or pick another form with '
+      + '{ match } / { index }.',
     );
   }
 
-  const body = new URLSearchParams();
-  body.set(FORM_ACTION_FIELD, id[1]);
-  const entries = fields instanceof URLSearchParams || fields instanceof FormData
+  const entries = [...(fields instanceof URLSearchParams || fields instanceof FormData
     ? fields.entries()
-    : Object.entries(fields);
-  for (const [k, v] of entries) body.append(k, String(v));
-
-  const init = {
-    method: 'POST',
-    headers: { 'content-type': 'application/x-www-form-urlencoded', ...(opts.headers || {}) },
-    body: body.toString(),
+    : Object.entries(fields))];
+  // A File or Blob value posts multipart, the way a browser submits a file
+  // input; anything else posts URL-encoded.
+  const isBlob = (/** @type {unknown} */ v) => typeof Blob !== 'undefined' && v instanceof Blob;
+  const multipart = entries.some(([, v]) => isBlob(v) || (Array.isArray(v) && v.some(isBlob)));
+  const body = multipart ? new FormData() : new URLSearchParams();
+  body.set(FORM_ACTION_FIELD, id[1]);
+  /** @param {string} k @param {unknown} v */
+  const add = (k, v) => {
+    if (multipart && isBlob(v)) /** @type {FormData} */ (body).append(k, /** @type {Blob} */ (v));
+    else body.append(k, String(v));
   };
+  // An array value posts once per element, the way a checkbox group submits,
+  // so a test can exercise the `name[]` convention (#1664).
+  for (const [k, v] of entries) {
+    if (Array.isArray(v)) for (const item of v) add(k, item);
+    else add(k, v);
+  }
+
+  // A FormData body sets its own multipart content type with the boundary.
+  const init = multipart
+    ? { method: 'POST', headers: { ...(opts.headers || {}) }, body }
+    : {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded', ...(opts.headers || {}) },
+      body: body.toString(),
+    };
   return await testRequest(
     handle,
     opts.submitPath || path,
@@ -400,6 +460,14 @@ export async function invokeActionForTest(app, serverFilePath, fnName, args = []
   const res = await testRequest(handle, endpoint, { method: 'POST', headers, body });
 
   const text = await res.text();
+  // redirect() in the action: rethrow the sentinel, as the generated client
+  // stub rejects with it (the browser navigates instead of returning).
+  const rd = res.headers.get('x-webjs-redirect');
+  if (rd) {
+    const cut = rd.lastIndexOf(';');
+    const type = rd.slice(cut + 1) === 'replace' ? 'replace' : 'push';
+    redirect(cut === -1 ? rd : rd.slice(0, cut), type);
+  }
   const ct = res.headers.get('content-type') || '';
   let parsed;
   if (ct.includes(RPC_CONTENT_TYPE)) parsed = serializer.deserialize(text);

package/src/thenable-params.js

@@ -40,3 +40,29 @@ export function makeThenable(obj) {
   });
   return obj;
 }
+
+/**
+ * A page's `searchParams` the Next.js way (#1686): each key maps to its value,
+ * and a key that repeats (`?tag=a&tag=b`) maps to every value in order, as an
+ * array. `Object.fromEntries` kept only the last one, so a multi-select filter
+ * read one choice.
+ * @param {URLSearchParams} params
+ * @returns {Record<string, string | string[]>}
+ */
+export function searchParamsRecord(params) {
+  /** @type {Record<string, string | string[]>} */
+  const out = {};
+  for (const [k, v] of params) {
+    // Own keys only, and defined rather than assigned: `?constructor=x` must
+    // not read Object.prototype's member, and `?__proto__=x` must be a key,
+    // never the record's prototype.
+    if (!Object.hasOwn(out, k)) {
+      Object.defineProperty(out, k, { value: v, writable: true, enumerable: true, configurable: true });
+      continue;
+    }
+    const prev = out[k];
+    if (Array.isArray(prev)) prev.push(v);
+    else out[k] = [/** @type {string} */ (prev), v];
+  }
+  return out;
+}

package/src/vendor/jspm.js

@@ -1,4 +1,5 @@
 import { BUILTIN, FRAMEWORK_SERVER_ONLY, extractPackageName } from './scanner.js';
+import { foreignImport } from '../foreign-imports.js';
 import { getPackageVersion } from './manifest.js';
 import { normalizeProvider } from './providers.js';
 
@@ -325,7 +326,7 @@ export async function vendorImportMapEntries(bareImports, appDir) {
   for (const spec of bareImports) {
     if (BUILTIN.has(spec)) continue;
     const pkg = extractPackageName(spec);
-    if (!pkg || BUILTIN.has(pkg) || FRAMEWORK_SERVER_ONLY.has(pkg)) continue;
+    if (!pkg || BUILTIN.has(pkg) || FRAMEWORK_SERVER_ONLY.has(pkg) || foreignImport(spec)) continue;
     const version = getPackageVersion(pkg, appDir);
     if (!version) continue;
     // Splice the version into the specifier: 'dayjs/plugin/utc' with
@@ -346,3 +347,13 @@ export function clearJspmCache() {
   jspmCache.clear();
 }
 
+/**
+ * The number of cached jspm resolves. A test seam (#1689): the dev rebuild test
+ * reads it to prove an ordinary edit keeps the cache and a `package.json` edit
+ * clears it. Not re-exported from the package.
+ * @returns {number}
+ */
+export function _jspmCacheSize() {
+  return jspmCache.size;
+}
+

package/src/vendor/pins.js

@@ -3,6 +3,7 @@ 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 { foreignImport } from '../foreign-imports.js';
 import { getPackageVersion, getPackageDeps } from './manifest.js';
 import { SUPPORTED_PROVIDERS } from './providers.js';
 import { PIN_BUNDLE_TIMEOUT_MS, fetchIntegrity, sha384Integrity } from './integrity.js';
@@ -494,12 +495,12 @@ export function basePackage(spec) {
 
 /**
  * Prune a pinned import map to the vendor specifiers still reachable from
- * NON-elided modules. A committed pin is the whole map, but elision can make
- * a pinned package unreachable (its only importer is a display-only component
- * that ships no JS, e.g. dayjs via the blog's vendor-badge). The live-resolve
- * path prunes such a package by excluding elided components from the bare-
- * import scan; this brings the pinned path to the same result, so a pinned app
- * and an unpinned app serve the same import map (issue #197).
+ * modules the browser loads. A committed pin is the whole map, but a pinned
+ * package can be unreachable from the browser (its only importer is a route
+ * module, which runs only on the server). The live-resolve path prunes such a
+ * package by excluding the route-table files from the bare-import scan; this
+ * brings the pinned path to the same result, so a pinned app and an unpinned
+ * app serve the same import map (issue #197).
  *
  * Keeps an entry when its specifier is reachable, OR when its base package is
  * the base of any reachable specifier (so a pinned base entry `dayjs` survives
@@ -520,7 +521,7 @@ export function basePackage(spec) {
  *
  * @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 {Set<string>} reachable  bare specifiers used by modules the browser loads
  * @param {{ appDir?: string }} [opts]
  * @returns {{ imports: Record<string, string>, integrity: Record<string, string> }}
  */
@@ -699,7 +700,7 @@ export async function pinAll(appDir, opts = {}) {
   for (const spec of bare) {
     if (BUILTIN.has(spec)) continue;
     const pkg = extractPackageName(spec);
-    if (!pkg || BUILTIN.has(pkg) || FRAMEWORK_SERVER_ONLY.has(pkg)) continue;
+    if (!pkg || BUILTIN.has(pkg) || FRAMEWORK_SERVER_ONLY.has(pkg) || foreignImport(spec)) continue;
     const version = getPackageVersion(pkg, appDir);
     if (!version) {
       droppedUnresolvable.push(spec);

package/src/vendor/scanner.js

@@ -1,7 +1,9 @@
 import { buildModuleGraph, reachableBareSpecifiers } from '../module-graph.js';
 import { browserEntryFiles } from '../browser-entries.js';
+import { routeTableFiles } from '../route-frontier.js';
 import { scanComponents } from '../component-scanner.js';
 import { buildRouteTable } from '../router.js';
+import { foreignImport } from '../foreign-imports.js';
 
 /**
  * Set of package names whose importmap entries are populated by the
@@ -84,11 +86,10 @@ export function extractPackageName(spec) {
  *
  * This is the OUT-OF-PROCESS entry point (`pinAll`, `webjs doctor`). It builds
  * its own graph, route table and component scan, roughly 70-200ms on the
- * in-repo apps, and applies NO elision pruning, so the result is a SUPERSET of
- * what the running server serves. That superset relation is what lets
- * `prunePinToReachable` intersect a committed pin down to the runtime answer
- * (#197). The dev server calls `reachedBareImports` instead, with the graph it
- * already has and its elision skip set.
+ * in-repo apps, and skips the same route-table files the running server does,
+ * so the result is what that server serves. `prunePinToReachable` intersects a
+ * committed pin down to it (#197). The dev server calls `reachedBareImports`
+ * instead, with the graph it already has.
  *
  * @param {string} appDir
  * @returns {Promise<Set<string>>}
@@ -101,22 +102,22 @@ export async function scanBareImports(appDir) {
     routeTable = await buildRouteTable(appDir);
   } catch {
     // An app the analysis cannot process yields no vendor specifiers rather
-    // than a throw, matching how check.js and elision-report.js degrade. The
+    // than a throw, matching how check.js and route-report.js degrade. The
     // dev server surfaces the real problem.
     return new Set();
   }
-  return reachedBareImports(graph, [...browserEntryFiles(routeTable, components)], appDir);
+  return reachedBareImports(graph, [...browserEntryFiles(routeTable, components)], appDir, routeTableFiles(routeTable));
 }
 
 /**
  * The in-process form: the caller already has a module graph, the entry set,
- * and (on the runtime path) the elision skip set. Used by the dev server so a
+ * and the route-table skip set. Used by the dev server so a
  * vendor resolve does not rebuild analysis it just built.
  *
  * @param {import('../module-graph.js').ModuleGraph} graph
  * @param {string[]} entryFiles
  * @param {string} appDir
- * @param {Set<string>} [skip]  elided / inert / import-only modules
+ * @param {Set<string>} [skip]  files never loaded in the browser (the route-table files)
  * @returns {Set<string>}
  */
 export function reachedBareImports(graph, entryFiles, appDir, skip) {
@@ -127,6 +128,10 @@ export function reachedBareImports(graph, entryFiles, appDir, skip) {
   for (const spec of found) {
     const p = extractPackageName(spec);
     if (p && (BUILTIN.has(p) || FRAMEWORK_SERVER_ONLY.has(p))) found.delete(spec);
+    // A foreign framework (`lit`, `react`, `next/*`) is refused at check and
+    // at analysis time; it must never be resolved from jspm meanwhile, or a
+    // second component runtime would load from the CDN beside WebJs.
+    else if (foreignImport(spec)) found.delete(spec);
   }
   return found;
 }

package/src/vendor.js

@@ -52,9 +52,11 @@ import { clearJspmCache } from './vendor/jspm.js';
 import { clearLiveIntegrityCache } from './vendor/resolver.js';
 
 /**
- * Clear the resolved-importmap cache. Called on file-watcher rebuild
- * so newly-added bare imports trigger a fresh api.jspm.io/generate
- * call on the next request to populate the in-memory cache.
+ * Clear the resolved-importmap cache. A dev rebuild calls it only when the
+ * app's `package.json` changed, or when the caller named no changed files
+ * (#1689): the cache is keyed by the sorted install set and the SRI by url, so
+ * a newly-added bare import already misses it, and only a dependency version
+ * change can make a hit stale.
  */
 export function clearVendorCache() {
   clearJspmCache();