@webjsdev/core 0.7.65 → 0.9.0

package/src/router-client/fetch-apply.js

@@ -15,10 +15,12 @@ import { restoreOptimistic } from './dom-differ.js';
 import { parseHTML } from './dom-parse.js';
 import { clearFrameBusy, markFrameBusy } from './frames.js';
 import { handleNavigationError } from './nav-error.js';
-import { navigate } from './navigator.js';
+import { navigate, revalidate } from './navigator.js';
+import { parseRefreshHeader } from '../refresh-header.js';
 import { prefetchTake } from './prefetch.js';
 import { currentNavigationToken } from './state.js';
 import { readStreamedShell, streamBoundariesProgressively } from './stream.js';
+import { loadIncomingStylesheets, releaseIncomingStylesheets } from './stylesheets.js';
 import { _swapCommit, applySwap } from './swap.js';
 
 /**
@@ -52,7 +54,7 @@ import { _swapCommit, applySwap } from './swap.js';
  *   top on a forward navigation (#1436), from `data-preserve-scroll` on the
  *   link or form, or from `navigate(url, { scroll: false })`. It suppresses only
  *   the scroll-to-top writes, never the hash-anchor scroll.
- * @returns {Promise<{ ok: boolean, status: number | null, aborted: boolean, applied: boolean }>}
+ * @returns {Promise<{ ok: boolean, status: number | null, aborted: boolean, applied: boolean, devError?: boolean }>}
  *   The fetch outcome, so a caller (the form-submission busy/event lifecycle)
  *   can report whether the submission settled as a success, an error, or an
  *   abort. `ok` mirrors `response.ok` for an HTTP response (a 422 validation
@@ -71,7 +73,62 @@ import { _swapCommit, applySwap } from './swap.js';
  *   degradation to a hard navigation from an importmap mismatch or a poisoned
  *   boundary scan). A caller deciding whether to fall back to a full page load
  *   wants `applied`; one reporting the submission's success wants `ok`.
+ *
+ *   `devError` is set for a `refresh` answered with `X-Webjs-Dev-Error: 1`
+ *   (#1689): the dev render failed, nothing was applied, and the page on
+ *   screen is meant to stay as it is under the dev overlay.
+ */
+/**
+ * Whether two urls name the same document (origin, path and query; the hash
+ * is a position within it).
+ * @param {string} a @param {string} b
  */
+function sameDocumentUrl(a, b) {
+  try {
+    const x = new URL(a, location.href);
+    const y = new URL(b, location.href);
+    return x.origin === y.origin && x.pathname === y.pathname && x.search === y.search;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The focused element and its text selection, for a same-page update.
+ * @returns {{ el: Element, start: number | null, end: number | null } | null}
+ */
+function captureFocus() {
+  const el = document.activeElement;
+  if (!el || el === document.body || el === document.documentElement) return null;
+  /** @type any */
+  const input = el;
+  let start = null;
+  let end = null;
+  try { start = input.selectionStart ?? null; end = input.selectionEnd ?? null; } catch { /* not a text control */ }
+  return { el, start, end };
+}
+
+/**
+ * Give focus back to the element that had it, when the morph kept the node.
+ * @param {{ el: Element, start: number | null, end: number | null }} state
+ */
+function restoreFocus(state) {
+  const { el, start, end } = state;
+  if (!el.isConnected || document.activeElement === el) return;
+  /** @type any */
+  const target = el;
+  if (typeof target.focus !== 'function') return;
+  // WebKit scrolls a text control into view on setSelectionRange even after a
+  // preventScroll focus, so the window offset is put back afterwards.
+  const x = window.scrollX;
+  const y = window.scrollY;
+  target.focus({ preventScroll: true });
+  if (start !== null && end !== null) {
+    try { target.setSelectionRange(start, end); } catch { /* not a text control */ }
+  }
+  if (window.scrollX !== x || window.scrollY !== y) window.scrollTo({ left: x, top: y, behavior: 'instant' });
+}
+
 export async function fetchAndApply(href, frameId, recordHistory, optimisticState, method, body, signal, token, revalidating, opts) {
   method = method || 'GET';
   const refresh = (opts && opts.refresh) || undefined;
@@ -175,11 +232,27 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
     const resp = await fetch(href, init);
     respStatus = resp.status;
     respOk = resp.ok;
+    // A dev render that reported an error (#1689). The server marks it, and
+    // the dev overlay is already up describing it. A refresh leaves the page
+    // that last rendered on screen under the overlay, as Next does, so the
+    // edit that fixes the error refreshes it in place; applying the error page
+    // would share no boundary with it and hard-navigate, and so would the fix.
+    // Only `webjs dev` sends the header.
+    if (refresh && resp.headers.get('x-webjs-dev-error') === '1') {
+      try { await resp.body?.cancel(); } catch (_) { /* already consumed */ }
+      return { ok: false, status: respStatus, aborted: false, applied: false, devError: true };
+    }
     // `fetch` follows a 303 transparently and its headers are then unreadable,
     // so this lands on a non-redirect response: the 422 failure re-render, or
     // any form response that answers in place.
     const invalidated = parseTagHeader(resp.headers.get('x-webjs-invalidate'));
     if (invalidated.length) markStale(invalidated);
+    // `revalidatePath()` in a form action (a 422 re-render, or any response
+    // answered in place): drop the router's cached copies of those paths.
+    for (const e of parseRefreshHeader(resp.headers.get('x-webjs-refresh'))) {
+      if (e.layout || e.path.includes('[')) revalidate();
+      else revalidate(e.path);
+    }
     const ctype = resp.headers.get('content-type') || '';
     const isHTML = /^text\/html\b/i.test(ctype);
     const isStream = ctype.toLowerCase().indexOf(STREAM_MIME) === 0;
@@ -295,6 +368,21 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // recover in place rather than a destructive full reload.
   if (!doc) { restoreOptimistic(optimisticState); handleNavigationError(href, null, new Error('navigation response did not parse as HTML')); return { ok: false, status: respStatus, aborted: false, applied: false }; }
 
+  // Load the stylesheets the incoming page brings before it is swapped in, so
+  // its first paint is styled (see stylesheets.js). Null when it brings none,
+  // and the swap then stays in this task. A newer navigation that started
+  // during the wait owns the page, exactly as after the body read above, and
+  // this one's temporary copies go with it.
+  const sheets = loadIncomingStylesheets(doc, finalUrl || href, frameId);
+  if (sheets) {
+    await sheets.ready;
+    if (myToken !== currentNavigationToken) {
+      releaseIncomingStylesheets(sheets);
+      if (streamCtx && streamCtx.reader) { try { streamCtx.reader.cancel(); } catch { /* ignore */ } }
+      return { ok: false, status: respStatus, aborted: true, applied: false };
+    }
+  }
+
   // #1406: recording the push after the swap finalizes the outgoing page's
   // entry against the DESTINATION document, at a scroll offset the browser has
   // already clamped to that document's height (measured on the gallery: 1600 to
@@ -326,16 +414,30 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // (see the `applied` comment below). Keeping the tail call preserves them byte
   // for byte, so this commit changes the ORDER on committing swaps and nothing
   // else.
+  // A write that lands back on the page it was submitted from (a validation
+  // re-render, or a PRG redirect to the same url) updates that page in place,
+  // the way a Next.js server action does after revalidatePath (#1686): the
+  // history entry is replaced rather than duplicated, the scroll position is
+  // kept, and the focused control keeps focus when it survives the morph.
+  const samePage = mutation && !refresh && sameDocumentUrl(finalUrl, location.href);
   let historyRecorded = false;
   const recordHistoryNow = recordHistory
     ? () => {
       if (historyRecorded) return;
       historyRecorded = true;
-      history.pushState(null, '', finalUrl);
+      if (samePage) history.replaceState(history.state, '', finalUrl);
+      else history.pushState(null, '', finalUrl);
     }
     : null;
+  const focusState = samePage ? captureFocus() : null;
 
   const disposition = applySwap(doc, frameId, !!revalidating, finalUrl, incomingBuild, incomingSrc, refresh || (mutation ? 'layouts' : undefined), recordHistoryNow);
+  // The temporary stylesheet copies are released once the swap has COMMITTED:
+  // under a view transition the new markup, and the page's own links with it,
+  // lands a frame later. A copy with no twin in the result (a discarded or
+  // uncommitted swap) goes as soon as the commit settles.
+  if (sheets) _swapCommit.then(() => releaseIncomingStylesheets(sheets), () => releaseIncomingStylesheets(sheets));
+  if (focusState) _swapCommit.then(() => { if (myToken === currentNavigationToken) restoreFocus(focusState); }, () => {});
   // `'none'` means applySwap returned WITHOUT committing anything: the frame the
   // response was for is missing, or it degraded to a hard navigation (an
   // importmap/build mismatch, a poisoned boundary scan). The page is not left
@@ -406,7 +508,7 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
       // `#section` link is exactly where an app's `scroll-behavior: smooth`
       // is wanted, and native browsers animate it too.
       target.scrollIntoView();
-    } else if (!preserveScroll) {
+    } else if (!preserveScroll && !samePage) {
       // Scroll-to-top on a forward nav. behavior:'instant' so an app-level
       // `scroll-behavior: smooth` does not animate it (match native nav).
       warnIfSmoothScrollOnHtml();
@@ -433,7 +535,7 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   }
 
   document.dispatchEvent(new CustomEvent('webjs:navigate', { detail: { url: finalUrl, frameId, from: 'navigate' } }));
-  return { ok: respOk, status: respStatus, aborted: false, applied };
+  return { ok: respOk, status: respStatus, aborted: false, applied, samePage };
   } finally {
     // Clear the frame's busy state on every exit path (the early returns
     // above all unwind through here). No-op when this was not a frame nav.

package/src/router-client/frames.js

@@ -24,10 +24,13 @@ export function activeFrameId(el) {
   while (cur) {
     const frame = cur.closest('webjs-frame');
     if (frame && frame.id) return frame.id;
-    // Cross shadow boundary upwards if necessary.
+    // Cross a shadow boundary upwards if necessary. Only a real ShadowRoot
+    // has a host to cross to: a DETACHED element's root is the top of its
+    // own subtree, and when that is an <a>, its `host` is the URL's host
+    // STRING, which the next closest() call threw on.
     const root = cur.getRootNode();
-    if (root && /** @type any */ (root).host) {
-      cur = /** @type any */ (root).host;
+    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+      cur = root.host;
     } else {
       break;
     }

package/src/router-client/head-merge.js

@@ -6,7 +6,8 @@
  *
  * @module
  */
-import { META_KEY_CSP_NONCE } from './constants.js';
+import { META_KEY_CSP_NONCE, relTokens } from './constants.js';
+import { isStylesheetLink, stylesheetMerge } from './owned-styles.js';
 
 /**
  * Read the CSP nonce that the original page load published via
@@ -214,7 +215,16 @@ function reconcileHeadMetas(newHead) {
   }
 }
 
-export function addNewHeadElements(newHead) {
+/**
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, frame?: boolean, segment?: string | null }} [opts]  `base` is the URL
+ *   the incoming page came from; `frame` marks a frame swap, which switches no
+ *   owned stylesheet on (owned-styles.js `stylesheetMerge`).
+ */
+export function addNewHeadElements(newHead, opts = {}) {
+  // `styles: false` leaves the stylesheet links to `mergeHeadStylesheets`,
+  // which the boundary swap calls inside its commit (#1669).
+  const mergeSheet = opts.styles === false ? null : stylesheetMerge(opts);
   const newTitle = newHead.querySelector('title');
   if (newTitle) document.title = newTitle.textContent || '';
 
@@ -236,6 +246,10 @@ export function addNewHeadElements(newHead) {
     // A keyed <meta> is add/update/remove reconciled below (#1046), so skip it
     // here to avoid appending a duplicate when its content changed.
     if (el.tagName === 'META' && metaIdentity(el)) continue;
+    // One link per stylesheet, and an owned one placed root to leaf (#1669).
+    if (isStylesheetLink(el)) {
+      if (!mergeSheet || mergeSheet(el, cloneElementWithCorrectNonce)) continue;
+    }
     if (!currentSet.has(outerHTMLForDiff(el))) {
       if (el.tagName === 'SCRIPT') {
         document.head.appendChild(
@@ -252,6 +266,26 @@ export function addNewHeadElements(newHead) {
   reconcileHeadMetas(newHead);
 }
 
+/**
+ * The stylesheet half of `addNewHeadElements`, for the boundary swap to run
+ * INSIDE its commit (#1669): adopting the router's loading copies, switching
+ * a sheet back on, and inserting an owned one all take effect with the swap,
+ * so the outgoing page, and a view transition's capture of it, never paint
+ * with the incoming page's CSS. A stylesheet the merge does not handle (an
+ * unowned one the head lacks) is appended, as the full merge does.
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, segment?: string | null, leaving?: (el: Element) => boolean }} [opts]
+ */
+export function mergeHeadStylesheets(newHead, opts = {}) {
+  const mergeSheet = stylesheetMerge(opts);
+  const currentSet = new Set();
+  for (const el of document.head.children) currentSet.add(outerHTMLForDiff(el));
+  for (const el of newHead.children) {
+    if (!isStylesheetLink(el) || mergeSheet(el, cloneElementWithCorrectNonce)) continue;
+    if (!currentSet.has(outerHTMLForDiff(el))) document.head.appendChild(cloneElementWithCorrectNonce(el));
+  }
+}
+
 /**
  * Is `el` a stylesheet the head merge must never remove: a `<style>` or a
  * `<link rel~="stylesheet">`. WebJs ALWAYS keeps these on a soft nav, with no
@@ -263,22 +297,32 @@ export function addNewHeadElements(newHead) {
  * head (the shared app stylesheet is omitted because the client already has it),
  * so "absent from the incoming head" means "optimized away", NOT "removed". A
  * dynamic-removal opt-out would therefore re-introduce #936 (it would strip a
- * still-needed sheet on any partial response), and WebJs is Tailwind-first (one
- * global sheet, no page-specific sheets to drop), so the knob would be unsafe
- * and unused. Keeping every stylesheet is correct here; a genuinely changed one
- * is dropped by the deploy-level hard reload (build-id mismatch), not a soft swap.
+ * still-needed sheet on any partial response). Keeping every stylesheet is
+ * correct HERE; a genuinely changed one is dropped by the deploy-level hard
+ * reload (build-id mismatch), not a soft swap. A section's own stylesheet is
+ * the one case that does leave, and it is decided elsewhere, by ownership
+ * rather than by head absence: `owned-styles.js` switches a sheet off when the
+ * boundary that owns it is swapped, a replace or a morph, or on a full-body
+ * swap whose response is complete (#1669). This merge itself never removes
+ * one.
  *
  * @param {Element} el
  * @returns {boolean}
  */
 function isPersistentHeadStyle(el) {
   if (el.tagName === 'STYLE') return true;
-  return el.tagName === 'LINK' &&
-    (el.getAttribute('rel') || '').toLowerCase().split(/\s+/).includes('stylesheet');
+  // Any stylesheet link, an alternate one included, so not `relIsStylesheet`.
+  return el.tagName === 'LINK' && relTokens(el).includes('stylesheet');
 }
 
-/** @param {HTMLHeadElement} newHead */
-export function mergeHead(newHead) {
+/**
+ * @param {HTMLHeadElement} newHead
+ * @param {{ base?: string | null, segment?: string | null }} [opts]  the URL the incoming page came from, and the range being replaced
+ */
+export function mergeHead(newHead, opts = {}) {
+  // `styles: false` leaves the stylesheet links to `mergeHeadStylesheets`,
+  // which the full-body swap calls inside its commit (#1669).
+  const mergeSheet = opts.styles === false ? null : stylesheetMerge(opts);
   const currentHead = document.head;
 
   const newTitle = newHead.querySelector('title');
@@ -327,6 +371,10 @@ export function mergeHead(newHead) {
     // kept above), or the head would carry two and `getCspNonce` could read the
     // wrong one (#1050).
     if (el.tagName === 'META' && metaIdentity(el) === META_KEY_CSP_NONCE) continue;
+    // A stylesheet the head already links is not appended twice, and an owned
+    // one is placed root to leaf (#1669). Nothing here REMOVES a sheet: this
+    // head can be a reduced one (#936).
+    if (isStylesheetLink(el) && (!mergeSheet || mergeSheet(el, cloneElementWithCorrectNonce))) continue;
     if (!currentSet.has(outerHTMLForDiff(el))) {
       if (el.tagName === 'SCRIPT') {
         currentHead.appendChild(

package/src/router-client/navigator.js

@@ -21,6 +21,7 @@ import { clearPrefetchHover, clearPrefetchRefused, clearPrefetchViewTimers, onPr
 import { afterTwoFrames, bumpRestoreGeneration, releaseHeightReservation, releaseScrollAnchor, reserveRestoredHeight, restoreGeneration, suppressScrollAnchoring } from './scroll.js';
 import { snapshotCache, snapshotCurrent, snapshotGet } from './snapshot-cache.js';
 import { _setEnabled, bumpNavToken, clearFragmentNav, consumeFragmentNav, currentNavigationToken, enabled, hardNavigate } from './state.js';
+import { primeLiveStylesheetKeys } from './owned-styles.js';
 import { _swapCommit, applySwap } from './swap.js';
 import { ensureUpgradeObserver } from './upgrade.js';
 import { viewTransitionsEnabled } from './view-transition.js';
@@ -143,6 +144,9 @@ let prevScrollRestoration = null;
 export function enableClientRouter() {
   if (enabled || typeof document === 'undefined') return;
   _setEnabled(true);
+  // Key the page's stylesheets against the URL they were served at, before
+  // any navigation moves it (#1669, owned-styles.js).
+  primeLiveStylesheetKeys();
   // Publish the in-place refresh entry on the global (#1398). The dev
   // live-reload client is a separate served script with no import of this
   // module, so a global is the only seam it has, and its PRESENCE is the
@@ -150,7 +154,9 @@ export function enableClientRouter() {
   // never calls this, and a page that ships no component never loads
   // @webjsdev/core at all, so both no-router cases resolve to a full reload
   // without either side assuming anything about the other.
-  /** @type any */ (globalThis).__webjsRefreshPage = refreshPage;
+  // It publishes the OUTCOME form (`refreshOutcome`), so the client can tell
+  // a refresh that applied from one that kept the page under a dev error.
+  /** @type any */ (globalThis).__webjsRefreshPage = refreshOutcome;
   // Both `click` and `submit` are BUBBLE phase, not capture. A component's
   // per-element `@click` / `@submit` handler (render-client.js) runs in the
   // at-target phase, BEFORE a document-level bubble listener. So onClick /
@@ -442,7 +448,24 @@ export function revalidate(url) {
  *   caller should fall back to a full load.
  */
 export async function refreshPage(mode) {
-  if (!enabled || typeof location === 'undefined') return false;
+  return (await refreshOutcome(mode)) !== 'failed';
+}
+
+/**
+ * What `refreshPage` did, for the dev live-reload client (#1689), which reads
+ * it through `globalThis.__webjsRefreshPage`: `'applied'` swapped the new
+ * render in, `'settled'` found the page already resolved (a hard navigation,
+ * a snapshot restore, or a newer navigation that owns it), `'dev-error'` kept
+ * the last good page because the dev server answered with a render error, and
+ * `'failed'` applied nothing, so the caller falls back to a full load. The dev
+ * client logs an in-place update only for `'applied'`, so the console never
+ * reports success for an edit that broke the page.
+ *
+ * @param {'page' | 'shell'} [mode]
+ * @returns {Promise<'applied' | 'settled' | 'dev-error' | 'failed'>}
+ */
+async function refreshOutcome(mode) {
+  if (!enabled || typeof location === 'undefined') return 'failed';
   // Every cached copy predates the change, so drop both caches before fetching.
   revalidate();
   // And the refusal memos (#1407), which `revalidate` deliberately leaves alone
@@ -452,9 +475,8 @@ export async function refreshPage(mode) {
   // browser does NOT download: a page gaining or losing a `Suspense(...)`
   // boundary is the plain case, since rendering one does not by itself make the
   // page client-effecting, so it classifies `page` rather than a reload. An edit
-  // to anything that SHIPS reloads instead and never arrives, which covers a
-  // `loading.{js,ts}` either direction (it can never be elided, so it is always
-  // shipped, and a brand-new one is in no graph at all).
+  // to anything that SHIPS reloads instead and never arrives, and so does a
+  // brand-new `loading.{js,ts}`, which is in no graph at all.
   clearPrefetchRefused();
   try {
     const res = await performNavigation(location.href, false, null, { refresh: mode === 'shell' ? 'shell' : 'page' });
@@ -478,10 +500,15 @@ export async function refreshPage(mode) {
     // superseded this one and owns the page now, and reloading would yank the
     // reader out of it; Turbo drops a refresh that lands mid-navigation for the
     // same reason.
-    if (!res || res.aborted) return true;
-    return res.applied;
+    //
+    // And a `devError` is not one (#1689): the dev server rendered an error for
+    // this page and the overlay shows it. The page stays as it was under the
+    // overlay, and the edit that fixes it refreshes in place.
+    if (!res || res.aborted) return 'settled';
+    if (res.devError) return 'dev-error';
+    return res.applied ? 'applied' : 'failed';
   } catch (_) {
-    return false;
+    return 'failed';
   }
 }
 
@@ -860,7 +887,12 @@ export async function performSubmission(href, method, body, frameId, form, opts)
     navigatingFlagTimer = null;
   }, 150);
 
-  const optimisticState = applyOptimisticLoading();
+  // A write keeps the page it was submitted from on screen while it runs, as a
+  // Next.js server-action form does (#1686): `loading.ts` is a navigation
+  // skeleton, and showing it for a write detached the very form being
+  // submitted, so a validation re-render lost what was typed. A safe-method
+  // submission (a search) is a navigation and keeps the skeleton.
+  const optimisticState = isSafe ? applyOptimisticLoading() : null;
 
   // Submission-state lifecycle: mark the form busy + announce the start, then
   // clear + announce the settle in the finally so EVERY exit (success,
@@ -896,6 +928,14 @@ export async function performSubmission(href, method, body, frameId, form, opts)
       await _swapCommit;
       if (myToken === currentNavigationToken) restoreFormState(typed);
     }
+    // A successful write that stayed on this page resets the form, as React
+    // does for a form whose action succeeded (#1686), so the next entry starts
+    // from the defaults the server just rendered. A redirect elsewhere leaves
+    // the page and needs nothing.
+    if (!isSafe && form && outcome && outcome.ok && outcome.applied && outcome.samePage && myToken === currentNavigationToken) {
+      await _swapCommit;
+      if (myToken === currentNavigationToken && form.isConnected && typeof form.reset === 'function') form.reset();
+    }
     // Mutating submissions invalidate cached versions of other URLs -
     // do this *after* the response applies so the new page itself is
     // snapshotted on the next nav, not pre-emptively wiped. Clear the