@webjsdev/core 0.7.59 → 0.7.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.59",
+  "version": "0.7.61",
   "type": "module",
   "description": "The runtime for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Ships the html and css template tags, the WebComponent base class, signals, directives, and the isomorphic renderers.",
   "types": "./index.d.ts",

package/src/lazy-loader.js

@@ -22,6 +22,17 @@
  *     // ...
  *   }
  *   MyWidget.register('my-lazy-widget');
+ *
+ * A component that another shipping module imports for registration
+ * (`import './my-lazy-widget.ts'`) stays lazy too (#1524): the server keeps
+ * that import for SSR, and the browser copy of the importer is served with
+ * the line rewritten to an `observeLazy({...})` call, so the module loads
+ * when an element with the tag is first visible: a hidden tab panel when it
+ * shows, a dialog's content when it opens, an element added later by a
+ * client render (the MutationObserver below catches it).
+ *
+ * The scan reads the light DOM (`document.querySelectorAll`), so a lazy tag
+ * rendered inside another component's shadow root is not found.
  */
 
 /** @type {Map<string, string>} tag → module URL */
@@ -30,6 +41,14 @@ const pending = new Map();
 /** @type {IntersectionObserver | null} */
 let observer = null;
 
+/**
+ * ONE MutationObserver for the whole page, however often `observeLazy` runs
+ * (#1524): the boot script calls it, and so does every served module whose
+ * side-effect import of a `static lazy` component was deferred to it.
+ * @type {MutationObserver | null}
+ */
+let mutations = null;
+
 /** @type {Map<string, Promise<unknown>>} in-flight module loads, keyed by URL */
 const inflight = new Map();
 
@@ -78,15 +97,18 @@ export function observeLazy(entries) {
   scan();
 
   // Also watch for dynamically added elements via MutationObserver.
-  if (typeof MutationObserver !== 'undefined') {
-    const mo = new MutationObserver(() => scan());
-    mo.observe(document.body, { childList: true, subtree: true });
+  if (!mutations && typeof MutationObserver !== 'undefined') {
+    mutations = new MutationObserver(() => scan());
+    mutations.observe(document.body, { childList: true, subtree: true });
   }
 }
 
 function scan() {
   if (!observer || !pending.size) return;
   for (const tag of pending.keys()) {
+    // Already defined some other way (an eager import elsewhere): nothing
+    // left to load for this tag.
+    if (customElements.get(tag)) { pending.delete(tag); continue; }
     for (const el of document.querySelectorAll(tag)) {
       observer.observe(el);
     }

package/src/router-client/dom-differ.js

@@ -289,7 +289,7 @@ export function diffElementInPlace(dst, src) {
  * @param {Element} el
  * @returns {boolean}
  */
-function isHydratedComponent(el) {
+export function isHydratedComponent(el) {
   // Opaque to the router when it has rendered (INSTANCE) OR merely has slot
   // state installed but has not yet run its deferred first render (SLOT_STATE):
   // in that window a same-task morph would otherwise reconcile INTO the host

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

@@ -75,6 +75,10 @@ import { _swapCommit, applySwap } from './swap.js';
 export async function fetchAndApply(href, frameId, recordHistory, optimisticState, method, body, signal, token, revalidating, opts) {
   method = method || 'GET';
   const refresh = (opts && opts.refresh) || undefined;
+  // A write submitted to the PAGE (#1557): its response re-renders the layouts
+  // and the swap refreshes their chrome too. A frame-targeted submission swaps
+  // one region by contract and keeps its own path.
+  const mutation = body != null && method !== 'GET' && method !== 'HEAD' && !frameId;
   const noPrefetch = !!(opts && opts.noPrefetch);
   const preserveScroll = !!(opts && opts.preserveScroll);
   const myToken = typeof token === 'number' ? token : currentNavigationToken;
@@ -143,7 +147,13 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
     // matches every one of them, so the response would omit the layouts and a
     // layout edit would be invisible. Sending nothing forces the full chain to
     // render.
-    const have = refresh ? '' : buildHaveHeader();
+    //
+    // A mutating submission sends none either (#1557), for the same reason
+    // reached differently: the action may have changed what a layout renders
+    // (a sign-in sets the cookie the header reads), and `fetch` follows the
+    // redirect carrying this header, so the server would short-circuit the
+    // very layouts that need to re-run.
+    const have = refresh || mutation ? '' : buildHaveHeader();
     if (have) headers['x-webjs-have'] = have;
     if (frameId) headers['x-webjs-frame'] = frameId;
     // Content-negotiate a stream-action response on a write submission (a
@@ -325,7 +335,7 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
     }
     : null;
 
-  const disposition = applySwap(doc, frameId, !!revalidating, finalUrl, incomingBuild, incomingSrc, refresh, recordHistoryNow);
+  const disposition = applySwap(doc, frameId, !!revalidating, finalUrl, incomingBuild, incomingSrc, refresh || (mutation ? 'layouts' : undefined), recordHistoryNow);
   // `'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

package/src/router-client/layout-chrome.js

@@ -0,0 +1,271 @@
+/**
+ * Client router: refreshing the layout chrome after a mutation (#1557).
+ *
+ * A boundary swap rewrites what sits INSIDE one `<!--wj:children:...-->` range.
+ * A layout's own markup (the header, nav, footer it renders around
+ * `${children}`) sits OUTSIDE every range it owns, so no boundary tier can
+ * reach it. That is right for a link click, where the layout is identical by
+ * construction, and wrong after a form submission: the action may have set or
+ * cleared a cookie the layout reads (a sign-in that should flip "Sign in" to
+ * "Sign out"), and the layout markup on screen predates it.
+ *
+ * So a mutating submission is applied in two steps. The boundary plan runs
+ * exactly as it does for any navigation (its remount-vs-morph rules are
+ * unchanged), and then this module MORPHS the chrome: every node outside the
+ * plan's anchor range, walked level by level from `<body>` down to the range.
+ * The morph is the same keyed + positional reconcile the boundary tier uses,
+ * so a hydrated component in the layout keeps its instance unless its own
+ * markup changed, and a form control keeps what the reader typed.
+ *
+ * It is split into a PLAN and an APPLY so the caller can decide before
+ * touching the DOM. The plan refuses (returns null) whenever the walk cannot be
+ * proven safe, and the caller then takes the full-body tier instead, which is
+ * always correct and only loses component state:
+ *   - the live and incoming ancestor chains of the range differ in depth or in
+ *     tag at any level, so there is no level-by-level pairing to trust;
+ *   - a hydrated component sits on the chain (a layout whose `${children}`
+ *     renders inside a slotted shell component). Its subtree is render-owned,
+ *     and reconciling into it would corrupt its template parts (#906).
+ *
+ * Nodes appended to `<body>` at runtime (a dev overlay, a dialog portal, a
+ * toast region) have no server-rendered counterpart. They always sit AFTER the
+ * server-rendered content, so at the body level a live node with no incoming
+ * peer is kept when it trails the last matched node, and removed only when it
+ * sits among the server-rendered nodes. Below `<body>` every node is layout
+ * output, so an unmatched live node there is removed like in any morph.
+ *
+ * @module
+ */
+import { LIVE_ATTRS } from './constants.js';
+import { diffElementInPlace, isHydratedComponent, keyOf } from './dom-differ.js';
+import { reactivateScripts, upgradeCustomElements } from './upgrade.js';
+import { regraftPermanentInSlice } from './view-transition.js';
+
+/**
+ * @typedef {{ live: Element[], incoming: Element[],
+ *   liveRange: { start: Comment, end: Comment },
+ *   incomingRange: { start: Comment, end: Comment } }} ChromePlan
+ */
+
+/**
+ * The ancestor chain of `node` from `root` down to its parent, `root` first.
+ * Null when `node` is not inside `root`.
+ *
+ * @param {Node} node
+ * @param {Element} root
+ * @returns {Element[] | null}
+ */
+function chainTo(node, root) {
+  /** @type {Element[]} */
+  const chain = [];
+  for (let el = node.parentNode; el; el = el.parentNode) {
+    chain.unshift(/** @type {Element} */ (el));
+    if (el === root) return chain;
+  }
+  return null;
+}
+
+/**
+ * Decide whether the chrome around a boundary range can be morphed level by
+ * level, before anything is written.
+ *
+ * @param {{ start: Comment, end: Comment }} liveRange  The plan's live anchor.
+ * @param {{ start: Comment, end: Comment }} incomingRange  Its incoming peer.
+ * @param {Element} liveBody
+ * @param {Element} incomingBody
+ * @returns {ChromePlan | null}  Null when the walk is not provably safe.
+ */
+export function planLayoutChrome(liveRange, incomingRange, liveBody, incomingBody) {
+  const live = chainTo(liveRange.start, liveBody);
+  const incoming = chainTo(incomingRange.start, incomingBody);
+  if (!live || !incoming || live.length !== incoming.length) return null;
+  for (let i = 1; i < live.length; i++) {
+    if (live[i].tagName !== incoming[i].tagName) return null;
+    if (isHydratedComponent(live[i])) return null;
+  }
+  return { live, incoming, liveRange, incomingRange };
+}
+
+/**
+ * The child nodes of `parent` strictly before `from` and strictly after `to`.
+ *
+ * @param {Element} parent
+ * @param {Node} from
+ * @param {Node} to
+ * @returns {{ before: Node[], after: Node[] }}
+ */
+function sidesOf(parent, from, to) {
+  /** @type {Node[]} */
+  const before = [];
+  /** @type {Node[]} */
+  const after = [];
+  let side = before;
+  for (let n = parent.firstChild; n; n = n.nextSibling) {
+    if (n === from) { side = null; }
+    if (side) side.push(n);
+    if (n === to) side = after;
+  }
+  return { before, after };
+}
+
+/**
+ * The attribute half of `diffElementInPlace`, for an element ON the chain: its
+ * children are split around the chain and morphed run by run, so the recursion
+ * that function would do is exactly what must not happen here.
+ *
+ * @param {Element} dst
+ * @param {Element} src
+ */
+function syncAttributes(dst, src) {
+  for (const attr of src.attributes) {
+    if (LIVE_ATTRS.has(attr.name) || attr.name === 'data-wj-serialized') continue;
+    if (dst.getAttribute(attr.name) !== attr.value) dst.setAttribute(attr.name, attr.value);
+  }
+  for (const attr of [...dst.attributes]) {
+    if (LIVE_ATTRS.has(attr.name)) continue;
+    if (!src.hasAttribute(attr.name)) dst.removeAttribute(attr.name);
+  }
+}
+
+/**
+ * Pair a run of live siblings with its incoming run, in order. An element
+ * matches by `keyOf` first, then the NEXT unkeyed live element of the same tag
+ * at or after the last match; a text or comment node matches the next live
+ * node of its type the same way. Each match is diffed in place.
+ *
+ * A forward scan rather than the same-index pairing `reconcileChildren` uses,
+ * because chrome changes by INSERTING or REMOVING a sibling (a banner shown
+ * only when signed in), and same-index pairing shifts every node after the
+ * change onto the wrong peer: the header would no longer match the header, and
+ * the body-level rule below would then keep the old one beside the new one.
+ *
+ * @param {Node[]} live
+ * @param {Node[]} incoming  Already imported into the live document.
+ * @returns {Node[]}  The final ordered list: reused live nodes and fresh ones.
+ */
+function matchRun(live, incoming) {
+  /** @type {Map<string, Element>} */
+  const keyed = new Map();
+  for (const n of live) {
+    if (n.nodeType !== 1) continue;
+    const k = keyOf(/** @type {Element} */ (n));
+    if (k) keyed.set(k, /** @type {Element} */ (n));
+  }
+  const used = new Set();
+  let cursor = 0;
+  /** @type {Node[]} */
+  const out = [];
+  for (const inc of incoming) {
+    if (inc.nodeType === 1) {
+      const k = keyOf(/** @type {Element} */ (inc));
+      const hit = k ? keyed.get(k) : null;
+      if (hit && !used.has(hit)) {
+        used.add(hit);
+        diffElementInPlace(hit, /** @type {Element} */ (inc));
+        out.push(hit);
+        cursor = Math.max(cursor, live.indexOf(hit) + 1);
+        continue;
+      }
+    }
+    let j = cursor;
+    for (; j < live.length; j++) {
+      const n = live[j];
+      if (used.has(n) || n.nodeType !== inc.nodeType) continue;
+      if (n.nodeType !== 1) break;
+      const el = /** @type {Element} */ (n);
+      if (!keyOf(el) && el.tagName === /** @type {Element} */ (inc).tagName) break;
+    }
+    if (j < live.length && (inc.nodeType === 1 || inc.nodeType === 3 || inc.nodeType === 8)) {
+      const n = live[j];
+      used.add(n);
+      if (n.nodeType === 1) diffElementInPlace(/** @type {Element} */ (n), /** @type {Element} */ (inc));
+      else if (n.nodeValue !== inc.nodeValue) n.nodeValue = inc.nodeValue;
+      out.push(n);
+      cursor = j + 1;
+      continue;
+    }
+    out.push(inc);
+  }
+  return out;
+}
+
+/**
+ * Morph one run of siblings (the nodes on one side of the chain at one level)
+ * into place before `ref`, and return the nodes it inserted fresh.
+ *
+ * Placement walks back to front and skips a node already sitting before its
+ * successor, so a reused node is never moved. Moving a connected custom
+ * element fires `disconnectedCallback` and `connectedCallback`, which a
+ * component can reasonably treat as an unmount.
+ *
+ * @param {Element} parent
+ * @param {Node[]} live
+ * @param {Node[]} incomingRaw  Incoming nodes, still in the parsed document.
+ * @param {Node | null} ref  Insert before this node (null appends). Never a
+ *   node of `live`, which this run may remove.
+ * @param {boolean} keepTrailing  Keep unmatched live nodes after the last
+ *   matched one (the body level, where they are runtime additions).
+ * @returns {Node[]}
+ */
+function morphRun(parent, live, incomingRaw, ref, keepTrailing) {
+  const incoming = incomingRaw.map((n) => document.importNode(n, true));
+  regraftPermanentInSlice(live, incoming);
+  const finalNodes = matchRun(live, incoming);
+  const finalSet = new Set(finalNodes);
+  let anchor = ref;
+  if (keepTrailing) {
+    let last = -1;
+    for (let i = 0; i < live.length; i++) if (finalSet.has(live[i])) last = i;
+    const trailing = live.slice(last + 1);
+    if (trailing.length) {
+      for (const n of trailing) finalSet.add(n);
+      anchor = trailing[0];
+    }
+  }
+  for (const n of live) {
+    if (!finalSet.has(n) && n.parentNode === parent) parent.removeChild(n);
+  }
+  for (let i = finalNodes.length - 1; i >= 0; i--) {
+    const n = finalNodes[i];
+    if (n.parentNode !== parent || n.nextSibling !== anchor) parent.insertBefore(n, anchor);
+    anchor = n;
+  }
+  const reused = new Set(live);
+  return finalNodes.filter((n) => !reused.has(n));
+}
+
+/**
+ * Morph the chrome a `planLayoutChrome` plan describes. Runs AFTER the
+ * boundary plan has written the range, and never touches the range itself.
+ *
+ * @param {ChromePlan} plan
+ */
+export function morphLayoutChrome(plan) {
+  const { live, incoming, liveRange, incomingRange } = plan;
+  /** @type {Node[]} */
+  const touched = [];
+  for (let i = 0; i < live.length; i++) {
+    const L = live[i];
+    const I = incoming[i];
+    // `<body>` attributes are left alone: a dialog or a scroll lock writes
+    // them at runtime, and no layout renders the body tag itself.
+    if (i > 0) syncAttributes(L, I);
+    const last = i === live.length - 1;
+    const liveFrom = last ? liveRange.start : live[i + 1];
+    const liveTo = last ? liveRange.end : live[i + 1];
+    const incFrom = last ? incomingRange.start : incoming[i + 1];
+    const incTo = last ? incomingRange.end : incoming[i + 1];
+    const l = sidesOf(L, liveFrom, liveTo);
+    const n = sidesOf(I, incFrom, incTo);
+    const fresh = [
+      ...morphRun(L, l.before, n.before, liveFrom, false),
+      // The after-run owns every node to the end of the parent, so it appends.
+      ...morphRun(L, l.after, n.after, null, i === 0),
+    ];
+    for (const node of fresh) if (node.nodeType === 1) touched.push(reactivateScripts(/** @type {Element} */ (node)));
+    for (const side of [l.before, l.after]) {
+      for (const node of side) if (node.nodeType === 1 && node.isConnected) touched.push(/** @type {Element} */ (node));
+    }
+  }
+  for (const el of touched) if (el.isConnected) upgradeCustomElements(/** @type {Element} */ (el));
+}

package/src/router-client/swap.js

@@ -12,6 +12,7 @@ import { reportFallback } from './diagnostics.js';
 import { blurOutgoingFocus, diffChildren, replaceBoundaryRange, resyncEnclosingHostSlots, swapMarkerRange } from './dom-differ.js';
 import { trackedReloadSignature } from './frames.js';
 import { addNewHeadElements, mergeHead } from './head-merge.js';
+import { morphLayoutChrome, planLayoutChrome } from './layout-chrome.js';
 import { clearPrefetchRefused, prefetchClearAll } from './prefetch.js';
 import { snapshotCache } from './snapshot-cache.js';
 import { hardNavigate } from './state.js';
@@ -41,11 +42,16 @@ export let _swapCommit = Promise.resolve();
  *   anything (a missing frame, or a degradation to a hard navigation), and
  *   `undefined` when a swap committed. `fetchAndApply` maps the first two to
  *   `applied: false`.
- * @param {'page' | 'shell' | undefined} [refresh]  same-URL in-place refresh
- *   mode (#1398). `'shell'` takes the full-body tier directly, because the
+ * @param {'page' | 'shell' | 'layouts' | undefined} [refresh]  The swap tier
+ *   override. `'shell'` and `'page'` are the same-URL in-place refresh modes
+ *   (#1398). `'shell'` takes the full-body tier directly, because the
  *   layout's OWN markup changed and that lives outside every children range.
  *   `'page'` falls through to the normal two-tier logic, which morphs the
  *   deepest shared boundary and so preserves outer-layout component state.
+ *   `'layouts'` is the response to a mutating form submission (#1557): the
+ *   normal two-tier logic, followed by a morph of the layout chrome outside
+ *   the plan's range (`morphLayoutChrome`), or the full-body tier when that
+ *   chrome cannot be walked safely.
  * @param {(() => void) | null} [recordHistoryNow]  Record this navigation's
  *   history entry (#1406). Called at each COMMIT point, immediately BEFORE the
  *   DOM mutation, for the same reason `ingestSeeds` is: this function can still
@@ -343,6 +349,22 @@ export function applySwap(doc, frameId, revalidating, href, incomingBuild, incom
   const there = collectBoundaries(doc.body);
   const plan = here && there ? planBoundarySwap(here, there) : null;
 
+  // After a mutating submission (#1557) the layouts were re-rendered with
+  // whatever the action changed (a cookie a header reads), and their own markup
+  // sits outside the plan's range. Decide BEFORE writing anything whether that
+  // chrome can be morphed level by level; when it cannot, the full-body tier is
+  // the correct answer, since applying the range alone would leave the stale
+  // header on screen, which is the bug.
+  const chrome = plan && refresh === 'layouts'
+    ? planLayoutChrome(plan.live, plan.incoming, document.body, doc.body)
+    : null;
+  if (plan && refresh === 'layouts' && !chrome) {
+    ingestSeeds();
+    if (recordHistoryNow) recordHistoryNow();
+    swapFullBody(doc);
+    return;
+  }
+
   if (plan) {
     // Committed: this response is being applied, so its seeds are the ones the
     // user is about to look at.
@@ -372,6 +394,9 @@ export function applySwap(doc, frameId, revalidating, href, incomingBuild, incom
       // applySlotAssignments would wipe the freshly swapped content and
       // restore the stale list.
       resyncEnclosingHostSlots(live.start, incoming.start);
+      // The range is final, so the chrome around it can be morphed now
+      // without ever touching it.
+      if (chrome) morphLayoutChrome(chrome);
       // Resolve buffered Suspense boundaries INSIDE the swap so the placeholder
       // exists first. Doing this after `runWithTransition` returned raced the
       // async view-transition swap and stuck the skeleton (#1048).