@webjsdev/server 0.8.91 → 0.10.0

package/src/dev-reload-hold.js

@@ -6,9 +6,9 @@
  * intermediate save, and releases it when the build is done. The embed bridge
  * (`dev-embed-client.js`) owns the switch, the `__webjsEmbedHold` page global,
  * set from the host's `{ type: 'hold', enabled }` command. The reload client
- * routes every reload signal through this module: while held it keeps only the
- * STRONGEST verdict seen, and on release it applies that one reload, or nothing
- * when nothing changed.
+ * routes every reload signal through this module: while held it merges every
+ * verdict it sees, and on release it applies that one reload, or nothing when
+ * nothing changed.
  *
  * Import-free and inlined verbatim (`export` stripped) into the served reload
  * client by `reloadClientJs` in `dev/helpers.js`, the same shared-source rule as
@@ -19,42 +19,71 @@
  * Verdict strength, strongest first. Restated rather than imported from
  * `dev-reload-worker.js` because this file is inlined on its own.
  */
-var HOLD_STRENGTH = ['reload', 'shell', 'page'];
+var HOLD_STRENGTH = ['reload', 'shell', 'page', 'component', 'css'];
 
 /**
- * The stronger of two verdicts. Anything that is not a known verdict is a full
- * `reload`, the fail-safe every other reload path uses.
+ * Read one held signal into the verdict object shape. A bare string (a relay
+ * older than #1689 posts the name alone) becomes `{ v }`, and anything that
+ * is not a known verdict is a full `reload`, the fail-safe every other reload
+ * path uses.
  *
- * @param {string | null} a  the verdict held so far (null = none)
- * @param {unknown} b  the incoming verdict
- * @returns {string}
+ * @param {unknown} raw
+ * @returns {{ v: string, by: string, why: string, modules: string[], css: boolean }}
  */
-export function strongerHeldVerdict(a, b) {
-  var ib = HOLD_STRENGTH.indexOf(/** @type {string} */ (b));
-  if (ib === -1) ib = 0;
-  if (a === null) return HOLD_STRENGTH[ib];
-  var ia = HOLD_STRENGTH.indexOf(a);
-  if (ia === -1) ia = 0;
-  return HOLD_STRENGTH[Math.min(ia, ib)];
+function readHeldVerdict(raw) {
+  var o = typeof raw === 'string' ? { v: raw } : raw;
+  if (!o || typeof o !== 'object' || HOLD_STRENGTH.indexOf(/** @type {any} */ (o).v) === -1) {
+    return { v: 'reload', by: '', why: 'unreadable-frame', modules: [], css: false };
+  }
+  var a = /** @type {any} */ (o);
+  return {
+    v: a.v,
+    by: typeof a.by === 'string' ? a.by : '',
+    why: typeof a.why === 'string' ? a.why : '',
+    modules: Array.isArray(a.modules) ? a.modules.slice() : [],
+    css: a.css === true,
+  };
+}
+
+/**
+ * Merge an incoming verdict into the one held so far: the stronger `v` wins
+ * with its `by` / `why` (the held one on a tie), `modules` unions and `css`
+ * ORs, the same rule as the server's `mergeVerdicts`.
+ *
+ * @param {{ v: string, by: string, why: string, modules: string[], css: boolean } | null} a  held so far (null = none)
+ * @param {unknown} b  the incoming verdict, an object or a legacy string
+ * @returns {{ v: string, by: string, why: string, modules: string[], css: boolean }}
+ */
+export function mergeHeldVerdict(a, b) {
+  var next = readHeldVerdict(b);
+  if (a === null) return next;
+  var top = HOLD_STRENGTH.indexOf(a.v) <= HOLD_STRENGTH.indexOf(next.v) ? a : next;
+  var modules = a.modules.slice();
+  for (var i = 0; i < next.modules.length; i++) {
+    if (modules.indexOf(next.modules[i]) === -1) modules.push(next.modules[i]);
+  }
+  modules.sort();
+  return { v: top.v, by: top.by, why: top.why, modules: modules, css: a.css || next.css };
 }
 
 /**
  * Build the hold gate for one page.
  *
- * @param {(verdict: string) => void} apply  applies a reload (the client's own apply)
+ * @param {(verdict: { v: string, by: string, why: string, modules: string[], css: boolean }) => void} apply
+ *   applies a reload (the client's own apply)
  * @param {() => boolean} isHeld  whether the host currently holds reloads
- * @returns {{ offer: (verdict: unknown) => boolean, release: () => void, pending: () => string | null }}
+ * @returns {{ offer: (verdict: unknown) => boolean, release: () => void, pending: () => ({ v: string, by: string, why: string, modules: string[], css: boolean } | null) }}
  *   `offer` returns true when it kept the signal (held), false when the caller
  *   should apply it now; `release` applies the one pending reload once the hold
  *   is off.
  */
 export function createReloadHold(apply, isHeld) {
-  /** @type {string | null} */
+  /** @type {{ v: string, by: string, why: string, modules: string[], css: boolean } | null} */
   var held = null;
   return {
     offer: function (verdict) {
       if (!isHeld()) return false;
-      held = strongerHeldVerdict(held, verdict);
+      held = mergeHeldVerdict(held, verdict);
       return true;
     },
     release: function () {

package/src/dev-reload-reason.js

@@ -0,0 +1,61 @@
+/**
+ * Why the dev server reloaded the page, printed AFTER the reload (#1689), the
+ * BROWSER half. Browser-safe and import-free: `reloadClientJs` (`dev/helpers.js`)
+ * inlines it after an `export` strip, so the unit test drives the exact code
+ * that ships.
+ *
+ * A reload replaces the document, and with it the console of the page that
+ * decided to reload, so a reason logged before `location.reload()` is gone by
+ * the time anyone looks (Next prints its `REACT_REFRESH_FULL_RELOAD` reason for
+ * the same reason). `reloadWithReason` stores `{ why, by }` in
+ * `sessionStorage`, which survives a same-tab reload, and the reloaded page's
+ * client prints it once with `printPendingReason`:
+ * `[webjs] full reload: <why> (<by>)`. Where storage is unavailable (a
+ * sandboxed frame, storage disabled) the reason is logged before the reload
+ * instead, which is the best that can be done.
+ */
+
+const RELOAD_REASON_KEY = 'webjs:dev-reload-reason';
+
+/**
+ * @param {{ why?: string, by?: string }} r
+ * @returns {string}
+ */
+function reloadReasonLine(r) {
+  return '[webjs] full reload: ' + (r.why || 'reload') + (r.by ? ' (' + r.by + ')' : '');
+}
+
+/**
+ * Remember why, then reload.
+ * @param {{ v?: string, why?: string, by?: string }} verdict
+ * @param {{ reload: () => void }} loc
+ * @param {Storage | null | undefined} store
+ * @param {(msg: string) => void} log
+ */
+export function reloadWithReason(verdict, loc, store, log) {
+  const r = { why: (verdict && (verdict.why || verdict.v)) || 'reload', by: (verdict && verdict.by) || '' };
+  let kept = false;
+  try {
+    if (store) { store.setItem(RELOAD_REASON_KEY, JSON.stringify(r)); kept = true; }
+  } catch (_) { /* storage disabled or full: log it now instead */ }
+  if (!kept) log(reloadReasonLine(r));
+  loc.reload();
+}
+
+/**
+ * Print the reason a previous page stored before it reloaded, once.
+ * @param {Storage | null | undefined} store
+ * @param {(msg: string) => void} log
+ */
+export function printPendingReason(store, log) {
+  let raw = null;
+  try {
+    if (!store) return;
+    raw = store.getItem(RELOAD_REASON_KEY);
+    if (raw !== null) store.removeItem(RELOAD_REASON_KEY);
+  } catch (_) { return; }
+  if (!raw) return;
+  let r;
+  try { r = JSON.parse(raw); } catch (_) { return; }
+  if (r && typeof r === 'object') log(reloadReasonLine(r));
+}

package/src/dev-reload-worker.js

@@ -67,13 +67,13 @@ export const RELOAD_MAX_HOLD_MS = 5000;
  * component edit is a component edit, and morphing it would leave the old
  * component class running against fresh markup.
  */
-export const VERDICT_STRENGTH = ['reload', 'shell', 'page'];
+export const VERDICT_STRENGTH = ['reload', 'shell', 'page', 'component', 'css'];
 
 /**
  * Resolve an SSE `reload` frame's `data` to a verdict name.
  *
  * ANY failure resolves to `reload`: an absent payload, malformed JSON, a
- * non-object, a `v` outside the three literals, or the legacy bare `data: now`.
+ * non-object, a `v` outside the known names, or the legacy bare `data: now`.
  * That is what makes the wire-format change safe in both directions between a
  * long-running browser tab and a restarted server, since the worst a skew can
  * produce is the full reload that was the behaviour before this existed.
@@ -89,6 +89,32 @@ export function parseVerdict(data) {
   return 'reload';
 }
 
+/**
+ * Resolve an SSE `reload` frame's `data` to the whole verdict the relay posts
+ * to a tab (#1689): `{ v, by, why, modules, css }`, every field always present
+ * so a tab never has to guess. The same fail-safe as `parseVerdict`: anything
+ * it cannot read is `{ v: 'reload', why: 'unreadable-frame' }`, and a field of
+ * the wrong type falls back to its empty value rather than failing the frame.
+ *
+ * @param {string} data
+ * @returns {{ v: string, by: string, why: string, modules: string[], css: boolean }}
+ */
+export function parseReloadFrame(data) {
+  try {
+    const o = JSON.parse(data);
+    if (o && typeof o === 'object' && VERDICT_STRENGTH.indexOf(o.v) !== -1) {
+      return {
+        v: o.v,
+        by: typeof o.by === 'string' ? o.by : '',
+        why: typeof o.why === 'string' ? o.why : '',
+        modules: Array.isArray(o.modules) ? o.modules.filter((m) => typeof m === 'string') : [],
+        css: o.css === true,
+      };
+    }
+  } catch (_) { /* fall through to the fail-safe */ }
+  return { v: 'reload', by: '', why: 'unreadable-frame', modules: [], css: false };
+}
+
 /** First reconnect wait after the stream drops (#1507), doubled per failure. */
 export const RECONNECT_BASE_MS = 300;
 /** The longest wait between reconnect attempts (#1507). */
@@ -209,8 +235,13 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
   /** @type {any} */ let quietTimer = null;
   /** @type {any} */ let capTimer = null;
 
-  /** @type {string} the strongest verdict seen in the CURRENT batch (#1398) */
-  let batchVerdict = 'page';
+  /**
+   * The CURRENT batch's merged verdict (#1398, #1689): the strongest `v` with
+   * its `by` / `why`, the union of every `modules` list and whether any frame
+   * set `css`. Null between batches.
+   * @type {{ v: string, by: string, why: string, modules: Set<string>, css: boolean } | null}
+   */
+  let batch = null;
   /** 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 */
@@ -221,9 +252,9 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
   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
-    const msg = { type: 'reload', verdict: v };
+    const b = batch || { v: 'reload', by: '', why: 'no-verdict', modules: new Set(), css: false };
+    batch = null;   // a fresh batch starts from nothing
+    const msg = { type: 'reload', verdict: { v: b.v, by: b.by, why: b.why, modules: Array.from(b.modules).sort(), css: b.css } };
     const targets = batchAll ? Array.from(ports.keys()) : Array.from(batchPorts).filter((p) => ports.has(p));
     batchAll = false;
     batchPorts.clear();
@@ -236,6 +267,9 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
     }
   }
 
+  /** The reload a tab gets when its page is behind the server (#1516). */
+  const PAGE_BEHIND = { v: 'reload', by: '', why: 'page-behind' };
+
   /** Strength rank; an unrecognised name ranks strongest, so it can only ever
    * over-reload. @param {string} v */
   function rank(v) {
@@ -244,12 +278,27 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
   }
 
   /**
-   * @param {string} verdict
+   * Fold one signal into the batch: the strongest `v` wins with its `by` /
+   * `why` (the earlier one on a tie), `modules` unions and `css` ORs, the same
+   * rule as `mergeVerdicts` on the server.
+   * @param {{ v: string, by?: string, why?: string, modules?: string[], css?: boolean }} verdict
+   */
+  function mergeIntoBatch(verdict) {
+    const v = VERDICT_STRENGTH[rank(verdict.v)];
+    if (batch === null) batch = { v, by: verdict.by || '', why: verdict.why || '', modules: new Set(), css: false };
+    else if (rank(v) < rank(batch.v)) { batch.v = v; batch.by = verdict.by || ''; batch.why = verdict.why || ''; }
+    if (verdict.modules) for (const m of verdict.modules) batch.modules.add(m);
+    if (verdict.css) batch.css = true;
+  }
+
+  /**
+   * @param {{ v: string, by?: string, why?: string, modules?: string[], css?: boolean }} verdict
    * @param {any} [port]  reload only this tab (its page fell behind); omitted, every tab
+   * @param {boolean} [inPlace]  the signal came from a server that reloads in place
    */
   function requestReload(verdict, port, inPlace) {
     if (port === undefined) batchAll = true; else batchPorts.add(port);
-    if (rank(verdict) < rank(batchVerdict)) batchVerdict = VERDICT_STRENGTH[rank(verdict)];
+    mergeIntoBatch(verdict);
     // One restart signal anywhere in the batch keeps the long window (#1575).
     if (!inPlace) batchRestart = true;
     if (quietTimer !== null) timers.clearTimeout(quietTimer);
@@ -278,7 +327,7 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
   // 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);
+      if (pageIsStale(page, lastBoot, lastSeq)) requestReload(PAGE_BEHIND, p);
     }
   }
 
@@ -297,7 +346,7 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
       touch();
       const h = parseHello(e.data);
       if (lastBoot !== null && (h.boot !== lastBoot || (h.seq !== null && lastSeq !== null && h.seq !== lastSeq))) {
-        requestReload('reload');
+        requestReload({ v: 'reload', by: '', why: h.boot !== lastBoot ? 'server-restarted' : 'missed-update' });
       }
       lastBoot = h.boot;
       lastSeq = h.seq;
@@ -308,7 +357,7 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
       lastError = null;
       const n = reloadSeq(e.data);
       if (n !== null) lastSeq = n;
-      requestReload(parseVerdict(e.data), undefined, frameInPlace(e.data));
+      requestReload(parseReloadFrame(e.data), undefined, frameInPlace(e.data));
     });
     es.addEventListener('webjs-error', (e) => { lastError = e.data; fanout({ type: 'webjs-error', data: e.data }); });
     // The stream dropped (a restarting server, a network blip, a host that
@@ -348,7 +397,7 @@ export function startReloadWorker(scope, EventSourceCtor, eventsUrl, opts) {
         // 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);
+          if (pageIsStale(pages.get(port), lastBoot, lastSeq)) requestReload(PAGE_BEHIND, port);
         }
         return;
       }

package/src/dev-secret.js

@@ -0,0 +1,73 @@
+/**
+ * A signing secret for development and tests when the app sets none (#1686),
+ * the way Rails keeps `tmp/local_secret.txt` and NextAuth v4 fell back to a
+ * generated secret outside production. `.env` is gitignored, so a fresh clone
+ * or a git worktree had no `AUTH_SECRET` / `SESSION_SECRET` and every page
+ * behind `session()` or `createAuth()` answered 500 until someone wrote one.
+ *
+ * The secret is generated once and kept in `.webjs/dev-secret` under the
+ * current directory (the app root for `webjs dev` and `webjs test`), which the
+ * scaffold's `.gitignore` already excludes, so sessions survive a restart.
+ *
+ * It is OPT-IN, and `NODE_ENV` alone decides ({@link devSecretApplies}): only
+ * `NODE_ENV=development` or `NODE_ENV=test` gets one (`webjs dev` and
+ * `webjs test` set them when unset). A process a test spawns inherits
+ * `NODE_ENV=test`, as under Jest, so it gets one too unless the test sets
+ * `NODE_ENV=production` on it.
+ * Anything else, a production `NODE_ENV` or none at all (an embedded host, a
+ * container running `node server.js`), gets undefined and the caller throws,
+ * so a production cookie is never signed with a key from disk because an env
+ * var was missing. It is read per call, never latched for the process, so a
+ * development handler created earlier in the same process opts nothing in.
+ *
+ * @module
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { randomBytes } from 'node:crypto';
+import { join } from 'node:path';
+
+const warned = new Set();
+
+/**
+ * Whether this process may use the generated development secret, decided
+ * from `NODE_ENV` alone on every call: `development` or `test`.
+ * @param {Record<string, string | undefined>} [env]
+ * @returns {boolean}
+ */
+export function devSecretApplies(env = process.env) {
+  return env.NODE_ENV === 'development' || env.NODE_ENV === 'test';
+}
+
+/**
+ * The development secret, created on first use, or undefined unless this is a
+ * development or test process.
+ * @param {string} name the variable the app left unset, named in the warning
+ * @param {{ dir?: string, env?: Record<string, string | undefined>, warn?: (msg: string) => void }} [opts]
+ * @returns {string | undefined}
+ */
+export function devSecret(name, opts = {}) {
+  const env = opts.env || process.env;
+  if (!devSecretApplies(env)) return undefined;
+  const file = join(opts.dir || process.cwd(), '.webjs', 'dev-secret');
+  let secret = '';
+  try {
+    if (existsSync(file)) secret = readFileSync(file, 'utf8').trim();
+  } catch {}
+  if (!secret) {
+    secret = randomBytes(32).toString('hex');
+    try {
+      mkdirSync(join(file, '..'), { recursive: true });
+      writeFileSync(file, secret + '\n', { mode: 0o600 });
+    } catch {
+      // A read-only directory still gets a secret, just one per process.
+    }
+  }
+  if (!warned.has(name)) {
+    warned.add(name);
+    (opts.warn || ((m) => console.warn(m)))(
+      `[webjs] ${name} is not set, so a generated development secret in .webjs/dev-secret signs the cookie. `
+      + `Set ${name} in .env for production, where it is required.`,
+    );
+  }
+  return secret;
+}

package/src/dev-source-locations-hook.js

@@ -28,6 +28,7 @@ import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { relative, isAbsolute } from 'node:path';
 import { serverRuntime } from './listener-core.js';
+import { rewriteAppSource } from './dev/bun-app-source.js';
 import {
   annotateSourceLocations,
   isSourceLocationCandidate,
@@ -128,7 +129,9 @@ export function registerSourceLocationHook(appDir) {
           try {
             contents = transformForSsr(abs, src) ?? src;
           } catch { /* fail open: the raw module */ }
-          return { contents, loader };
+          // The same alias rewrite and module versions the app-source plugin
+          // applies (#1689), which this plugin wins over while it is on.
+          return { contents: rewriteAppSource(contents, abs), loader };
         });
       },
     });

package/src/dev-source-locations.js

@@ -141,14 +141,33 @@ export function annotateSourceLocations(source, file) {
   }
 }
 
+/**
+ * The static strings of every `html` template in `src`, with the 1-based line
+ * each template starts on, for a check rule that inspects template markup
+ * (`no-jsx-attributes`). The strings are the raw source text between holes.
+ * Returns [] when the source cannot be lexed.
+ *
+ * @param {string} src
+ * @returns {{ strings: string[], line: number }[]}
+ */
+export function htmlTemplateStrings(src) {
+  if (typeof src !== 'string' || !src.includes('html')) return [];
+  /** @type {{ strings: string[], line: number }[]} */
+  const templates = [];
+  try { collectInserts(src, '', templates); } catch { return []; }
+  return templates;
+}
+
 /**
  * Lex `src` and return `[offset, text]` insertions, in ascending order.
  *
  * @param {string} src
  * @param {string} file
+ * @param {{ strings: string[], line: number }[]} [templates] when given,
+ *   each `html` template's static strings are collected here
  * @returns {Array<[number, string]>}
  */
-function collectInserts(src, file) {
+function collectInserts(src, file, templates) {
   /** @type {Array<[number, string]>} */
   const inserts = [];
   const n = src.length;
@@ -184,13 +203,19 @@ function collectInserts(src, file) {
       const c = src[i];
       if (c === '\\') {
         // An escape is static text the html machine sees as an opaque char.
+        if (html && html.record) html.record.strings[html.record.strings.length - 1] += src.slice(i, i + 2);
         if (html) html.feed(src, i, line);
         if (src[i + 1] === '\n') line++;
         i += 2;
         continue;
       }
       if (c === '`') { i++; return 'end'; }
-      if (c === '$' && src[i + 1] === '{') { i += 2; return 'hole'; }
+      if (c === '$' && src[i + 1] === '{') {
+        i += 2;
+        if (html && html.record) html.record.strings.push('');
+        return 'hole';
+      }
+      if (html && html.record) html.record.strings[html.record.strings.length - 1] += c;
       if (html) {
         const ins = html.feed(src, i, line);
         if (ins !== -1) inserts.push([ins, ` data-webjs-src="${file}:${line}"`]);
@@ -208,6 +233,10 @@ function collectInserts(src, file) {
   const enterTemplate = (isHtml) => {
     i++; // the backtick
     const html = isHtml ? new HtmlState() : null;
+    if (html && templates) {
+      html.record = { strings: [''], line };
+      templates.push(html.record);
+    }
     const r = scanTemplateText(html);
     if (r === 'hole') { stack.push({ kind: 'tpl', html }); prev = 'punct'; }
     else prev = 'str';
@@ -320,6 +349,8 @@ function collectInserts(src, file) {
  */
 class HtmlState {
   constructor() {
+    /** @type {{ strings: string[], line: number } | null} the template's static strings, when collected */
+    this.record = null;
     /** @type {'text' | 'tag' | 'dq' | 'sq' | 'comment' | 'raw'} */
     this.mode = 'text';
     /** Tag name of the tag being read (lowercased), '' for a close / bang tag. */

package/src/dev-styles.js

@@ -61,17 +61,28 @@ export function preloadStyles(root, now, timeoutMs) {
     kept[key] = { el, url };
   }
   let committed = false;
-  /** @type {Array<{ key: string, old: Element, next: Element, state: string }>} */
+  /** @type {Array<{ key: string, file: string, old: Element, next: Element, state: string }>} */
   const pairs = [];
   // Drop every other copy of this sheet (the old link, a copy the head merge
-  // re-appended) so exactly the replacement is left.
+  // re-appended, the client router's temporary preload copy) so exactly the
+  // replacement is left. The router marks its copy `data-webjs-preload-style`
+  // and gives it only the fetch attributes, so it never shares the identity
+  // key. Left in place it waits for a twin link this function has just
+  // removed, and lingers until the router's timeout. So a copy goes too when
+  // it is the same file (the same URL once the dev cache-buster is ignored,
+  // so `?theme=dark` stays when `?theme=light` is rebuilt) AND has already
+  // loaded: an unloaded copy is one a navigation is still waiting on, and
+  // removing it would stall that navigation for the whole timeout.
   const settleLoaded = function (pair) {
+    if (pair.old.parentNode) pair.old.parentNode.removeChild(pair.old);
     const links = [].slice.call(scope.querySelectorAll('link[rel~="stylesheet"][href]'));
     for (const el of links) {
       if (el === pair.next) continue;
       let url;
       try { url = new URL(el.getAttribute('href'), location.href); } catch (_) { continue; }
-      if (url.origin === location.origin && identityKey(el, url) === pair.key && el.parentNode) el.parentNode.removeChild(el);
+      if (url.origin !== location.origin || !el.parentNode) continue;
+      const routerCopy = el.hasAttribute(ROUTER_PRELOAD_ATTR) && !!el.sheet && withoutBuster(url) === pair.file;
+      if (routerCopy || identityKey(el, url) === pair.key) el.parentNode.removeChild(el);
     }
   };
   const waits = [];
@@ -79,13 +90,30 @@ export function preloadStyles(root, now, timeoutMs) {
     const old = kept[key].el;
     const url = kept[key].url;
     if (!old.parentNode) continue;
+    const file = withoutBuster(url);
     url.searchParams.set('__webjs_dev', String(stamp()));
     const next = /** @type {Element} */ (old.cloneNode(false));
     next.setAttribute('href', url.pathname + url.search);
-    const pair = { key, old, next, state: 'pending' };
+    // The copy loads under a media query that matches nothing, so it never
+    // applies before its load handler has decided whether it should: the
+    // client router can switch the link off or on (#1669) while this refresh
+    // waits, so that state is read at load, not now.
+    const media = authoredMedia(old);
+    next.removeAttribute('data-wj-style-media');
+    next.setAttribute('media', 'not all');
+    const pair = { key, file, old, next, state: 'pending' };
     pairs.push(pair);
     waits.push(new Promise(function (resolve) {
       next.addEventListener('load', function () {
+        // A section sheet the router switched off is refreshed too, so going
+        // back to the section switches on the edited file, but the copy stays
+        // off until then, like the link it replaces. Media first: Firefox and
+        // WebKit give the link a new sheet object when its media changes, so
+        // disabling before would be lost.
+        const off = old.parentNode ? old.hasAttribute('data-wj-style-off') : next.hasAttribute('data-wj-style-off');
+        if (off) next.setAttribute('data-wj-style-off', ''); else next.removeAttribute('data-wj-style-off');
+        if (media) next.setAttribute('media', media); else next.removeAttribute('media');
+        if (next.sheet) next.sheet.disabled = off;
         pair.state = 'load';
         if (committed) settleLoaded(pair);
         resolve(undefined);
@@ -112,6 +140,24 @@ export function preloadStyles(root, now, timeoutMs) {
   });
 }
 
+/**
+ * The attribute the client router marks its temporary stylesheet copies with
+ * (`PRELOAD_ATTR` in core's `router-client/stylesheets.js`). Duplicated rather
+ * than imported, since this module is inlined into the reload client as source.
+ */
+const ROUTER_PRELOAD_ATTR = 'data-webjs-preload-style';
+
+/**
+ * A stylesheet URL with the dev cache-buster removed, which is what names the
+ * file: two links that differ only by `__webjs_dev` load the same rules.
+ * @param {URL} url
+ */
+function withoutBuster(url) {
+  const u = new URL(url.href);
+  u.searchParams.delete('__webjs_dev');
+  return u.pathname + u.search;
+}
+
 /**
  * A link's identity for de-duping: its path plus every attribute except `href`.
  * JSON-encoded over a sorted list so no separator can collide with an attribute
@@ -123,9 +169,21 @@ function identityKey(el, url) {
   const parts = [];
   const attrs = el.attributes;
   for (let a = 0; a < attrs.length; a++) {
-    if (attrs[a].name === 'href') continue;
-    parts.push([attrs[a].name, attrs[a].value]);
+    const name = attrs[a].name;
+    // The client router's switch-off state (#1669) is not part of which sheet
+    // a link is, and neither is a held `not all` media: the author's is.
+    if (name === 'href' || name === 'data-wj-style-off' || name === 'data-wj-style-media') continue;
+    parts.push([name, name === 'media' ? authoredMedia(el) : attrs[a].value]);
   }
   parts.sort((x, y) => (x[0] < y[0] ? -1 : x[0] > y[0] ? 1 : 0));
   return JSON.stringify([url.pathname, parts]);
 }
+
+/**
+ * The media a link applies under: the author's, also while the client router
+ * holds it under `not all` (`data-wj-style-media`, owned-styles.js).
+ * @param {Element} el
+ */
+function authoredMedia(el) {
+  return el.hasAttribute('data-wj-style-media') ? el.getAttribute('data-wj-style-media') : el.getAttribute('media');
+}

package/src/dev.js

@@ -4,7 +4,6 @@
  */
 
 export {
-  readElideEnabled,
   readSeedEnabled,
   readClientRouterEnabled,
   readHeaderRules,