@webjsdev/core 0.7.33 → 0.7.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.33",
+  "version": "0.7.35",
   "type": "module",
   "description": "webjs core runtime - html/css tags, WebComponent base, isomorphic renderers",
   "types": "./index.d.ts",

package/src/router-client.js

@@ -14,6 +14,12 @@ import './webjs-suspense.js';
 // Ingest SSR action seeds (#472) from an incoming soft-nav document before its
 // components hydrate, so a navigated async component resolves from the seed.
 import { scanSeeds } from './action-seed-client.js';
+// Slot-runtime constants for re-projecting page-authored slotted content of a
+// reused hydrated light-DOM component across a soft nav (#908).
+import {
+  SLOT_STATE, LIGHT_SLOT_ATTR, PROJECTION_ATTR, PROJECTION_ACTUAL,
+  applyActualAssignment, applyFallback, fireSlotChange,
+} from './slot.js';
 
 /** The content type a content-negotiated stream-action response carries (#248). */
 const STREAM_MIME = 'text/vnd.webjs-stream.html';
@@ -2666,12 +2672,206 @@ function diffElementInPlace(dst, src) {
   // The attribute version is skipped above; we deliberately do nothing
   // here so the user's typing / checking is never blown away.
 
+  // A hydrated component OWNS its rendered subtree. The client renderer
+  // stashes the live template instance (lit-html parts holding DIRECT
+  // references to the rendered nodes) on the host under
+  // `Symbol.for('webjs.instance')`. Recursing into those children would
+  // import/remove/reorder the very nodes the parts still point at, so the
+  // component's next reactive update would write into detached nodes and
+  // silently do nothing (a dead click after a soft nav, #906). Treat the
+  // component as opaque: the attribute sync above already drove any reactive
+  // property change through `attributeChangedCallback`, so the component
+  // re-renders ITSELF; the router must not touch its internals. This mirrors
+  // Turbo/morphdom, which leave custom elements alone by default.
+  //
+  // One carve-out (#908): a light-DOM component's projected <slot> content is
+  // page-authored (moved into the slot by the slot runtime), NOT render-owned,
+  // so a reused component would otherwise keep showing STALE slotted content
+  // when the nav supplies different content. Re-project ONLY those slot
+  // children; the render-owned nodes stay untouched, so #906 does not regress.
+  if (isHydratedComponent(dst)) {
+    reprojectSlottedContent(dst, src);
+    return;
+  }
+
   // Recurse into children: collect both sides, run reconcileSiblings on
   // them with synthetic boundary markers. Cheap implementation: use
   // virtual ranges instead of inserting real comment markers.
   reconcileChildren(dst, src);
 }
 
+/**
+ * True when `el` carries a live client-side render instance, i.e. a webjs
+ * component whose `render()` produced the current children and owns them via
+ * lit-html parts. The router must not reconcile INTO such an element (#906).
+ *
+ * Detected via the render-client instance symbol rather than a `customElements`
+ * lookup so it fires only for elements that have actually rendered client-side:
+ * a not-yet-upgraded or purely display-only custom element (no client render,
+ * no parts to corrupt) stays fully reconcilable.
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+function isHydratedComponent(el) {
+  return /** @type {any} */ (el)[Symbol.for('webjs.instance')] != null;
+}
+
+/**
+ * True when `slot` belongs directly to `host`, i.e. no OTHER custom element
+ * sits between them. A slot nested inside a child custom element belongs to
+ * THAT component (its own slot state owns it), so the host must not touch it.
+ *
+ * @param {Element} slot
+ * @param {Element} host
+ * @returns {boolean}
+ */
+function isOwnLightSlot(slot, host) {
+  for (let p = slot.parentElement; p && p !== host; p = p.parentElement) {
+    if (p.tagName.includes('-')) return false;
+  }
+  return true;
+}
+
+/**
+ * Group a component's own `data-projection="actual"` light slots by name,
+ * first-wins (mirroring the slot runtime + SSR first-wins rule). Slots nested
+ * inside a child custom element are excluded (they belong to that child).
+ *
+ * @param {Element} host
+ * @returns {Map<string|null, HTMLSlotElement>}
+ */
+function ownActualLightSlots(host) {
+  /** @type {Map<string|null, HTMLSlotElement>} */
+  const byName = new Map();
+  const sel = `slot[${LIGHT_SLOT_ATTR}][${PROJECTION_ATTR}="${PROJECTION_ACTUAL}"]`;
+  for (const slot of host.querySelectorAll(sel)) {
+    const s = /** @type {HTMLSlotElement} */ (slot);
+    if (!isOwnLightSlot(s, host)) continue;
+    const name = s.getAttribute('name') || null;
+    if (!byName.has(name)) byName.set(name, s);
+  }
+  return byName;
+}
+
+/**
+ * The component's own light slot for `name`, whatever its projection state
+ * (first-wins by document order). Used to resolve the slot to fill on a
+ * fallback->actual transition, where the target slot is currently `fallback`
+ * so it is absent from `ownActualLightSlots`. Nested-child slots are excluded.
+ *
+ * @param {Element} host
+ * @param {string|null} name
+ * @returns {HTMLSlotElement | null}
+ */
+function ownLightSlotForName(host, name) {
+  for (const slot of host.querySelectorAll(`slot[${LIGHT_SLOT_ATTR}]`)) {
+    const s = /** @type {HTMLSlotElement} */ (slot);
+    if (!isOwnLightSlot(s, host)) continue;
+    if ((s.getAttribute('name') || null) === name) return s;
+  }
+  return null;
+}
+
+/**
+ * Per-index node-identity equality of two node lists. Used to decide whether a
+ * slot's assigned-node SET actually changed (so `slotchange` should fire); an
+ * in-place text edit that reuses the same node is NOT a set change.
+ *
+ * @param {ArrayLike<Node>} a
+ * @param {ArrayLike<Node>} b
+ * @returns {boolean}
+ */
+function sameNodeList(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
+/**
+ * Re-project the page-authored slotted content of a REUSED hydrated light-DOM
+ * component across a soft nav (#908), without touching its render-owned
+ * subtree.
+ *
+ * The #906 guard treats a hydrated component as opaque so the router never
+ * corrupts its lit-html-owned nodes. But the projected children inside a
+ * light-DOM `<slot data-webjs-light data-projection="actual">` are
+ * page-authored (moved there by the slot runtime), NOT held by lit-html parts,
+ * so reconciling ONLY those children is safe and cannot reintroduce #906. Both
+ * the live DOM and the incoming SSR HTML carry the same slot markers
+ * (render-server emits them), so slots pair up by name + document order.
+ *
+ * Three cases, by how a slot's projection state changes across the nav:
+ *   - actual->actual (content changed): identity-preserving `reconcileChildren`
+ *     on the page-authored slot children, exactly as #908 shipped.
+ *   - actual->fallback (content REMOVED) and fallback->actual (content ADDED):
+ *     a slot's fallback is RENDER-OWNED (the compiled fallback template held by
+ *     the slot-part), so these are NOT a raw reconcile. Drive them through the
+ *     slot runtime's own primitives (`applyFallback` / `applyActualAssignment`)
+ *     on the ONE resolved own slot, which restore or swap the render-owned
+ *     fallback without reconciling any lit-html part (#912). This is applied
+ *     surgically to the target slot, NOT via a whole-host `projectChildren`
+ *     pass: `projectChildren` selects EVERY `data-webjs-light` slot in the
+ *     subtree (including a nested child component's), so running it here would
+ *     let this component's assignment reach into a nested child's same-named
+ *     slot and clobber its render-owned nodes (the #906 hazard, one level down).
+ *
+ * @param {Element} dst  Live hydrated component host.
+ * @param {Element} src  Incoming SSR copy of the same component.
+ */
+function reprojectSlottedContent(dst, src) {
+  // Only a light-DOM component that tracks slot assignments has projected
+  // page-authored content to update. No slot state (no <slot>, or a shadow-DOM
+  // component whose slotted nodes are ordinary light children) means nothing
+  // to re-project here.
+  const state = /** @type {any} */ (dst)[SLOT_STATE];
+  if (!state) return;
+
+  const liveSlots = ownActualLightSlots(dst);
+  const incSlots = ownActualLightSlots(src);
+  if (liveSlots.size === 0 && incSlots.size === 0) return;
+
+  // A slot name is `actual` on the live side, the incoming side, or both. Walk
+  // the union so a boundary transition (present on only one side) is handled.
+  const names = new Set([...liveSlots.keys(), ...incSlots.keys()]);
+  for (const name of names) {
+    const liveSlot = liveSlots.get(name);
+    const incSlot = incSlots.get(name);
+    if (liveSlot && incSlot) {
+      // actual->actual: the slot's children are page-authored, so
+      // reconcileChildren is safe: it preserves node identity where it can and
+      // never touches lit-html parts. Keep the slot runtime's assignment
+      // bookkeeping in sync so a later re-render materialises THESE nodes.
+      const prevAssigned = state.lastSnapshot.get(liveSlot) || [];
+      reconcileChildren(liveSlot, incSlot);
+      const children = [...liveSlot.childNodes];
+      state.assignedByName.set(name, children);
+      state.lastSnapshot.set(liveSlot, children.slice());
+      // Fire slotchange on an assigned-node-SET change (add / remove / reorder),
+      // not an in-place text edit that reuses the same node: that matches the
+      // spec and keeps this branch uniform with the boundary branches below.
+      if (!sameNodeList(prevAssigned, children)) fireSlotChange(liveSlot);
+    } else if (liveSlot && !incSlot) {
+      // actual->fallback: incoming REMOVED this slot's content. Clear the
+      // assignment and flip THIS slot to fallback; applyFallback restores the
+      // render-owned fallback from the slot-part holding fragment.
+      state.assignedByName.delete(name);
+      if (applyFallback(state, liveSlot)) fireSlotChange(liveSlot);
+    } else {
+      // fallback->actual: incoming ADDED content where the live slot shows
+      // fallback. The target slot is currently fallback, so resolve it directly
+      // (it is absent from the actual-only map) and fill it with the imported
+      // page-authored nodes; applyActualAssignment tucks the render-owned
+      // fallback into the holding fragment first.
+      const targetSlot = ownLightSlotForName(dst, name);
+      if (!targetSlot) continue;
+      const nodes = [...incSlot.childNodes].map((n) => document.importNode(n, true));
+      state.assignedByName.set(name, nodes);
+      if (applyActualAssignment(state, targetSlot, nodes)) fireSlotChange(targetSlot);
+    }
+  }
+}
+
 /**
  * Reconcile dst's children to match src's children, in-place.
  *

package/src/slot.js

@@ -709,7 +709,7 @@ function handleSlotRemoved(state, slot) {
  * @returns {boolean} True if the slot's assignment changed compared to
  *   its last snapshot (so slotchange should fire).
  */
-function applyActualAssignment(state, slot, assigned) {
+export function applyActualAssignment(state, slot, assigned) {
   const wasFallback = slot.getAttribute(PROJECTION_ATTR) !== PROJECTION_ACTUAL;
   const prev = state.lastSnapshot.get(slot) || [];
   const equal = !wasFallback && arraysEqual(prev, assigned);
@@ -747,7 +747,7 @@ function applyActualAssignment(state, slot, assigned) {
  * @returns {boolean} True if the slot transitioned from actual to
  *   fallback this pass.
  */
-function applyFallback(state, slot) {
+export function applyFallback(state, slot) {
   const wasActual = slot.getAttribute(PROJECTION_ATTR) === PROJECTION_ACTUAL;
   slot.setAttribute(PROJECTION_ATTR, PROJECTION_FALLBACK);
   if (!wasActual) {
@@ -841,7 +841,7 @@ export function moveSlotChildrenToPending(host, slot) {
 // ---------------------------------------------------------------------------
 
 /** Fire a `slotchange` event on the slot (bubbles, not composed; per spec). */
-function fireSlotChange(slot) {
+export function fireSlotChange(slot) {
   slot.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false }));
 }