@webjsdev/core 0.7.39 → 0.7.40

package/package.json

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

package/src/component.js

@@ -7,10 +7,11 @@ import { Signal } from './signal.js';
 import {
   captureAuthoredChildren,
   adoptSSRAssignments,
-  attachSlotObservers,
-  detachSlotObservers,
   ensureSlotState,
   hasSlotState,
+  slotsView,
+  hasSlotContent,
+  setSlotContent,
 } from './slot.js';
 
 const isBrowser = typeof window !== 'undefined' && typeof HTMLElement !== 'undefined';
@@ -818,29 +819,35 @@ class WebComponentBase extends Base {
           `For light DOM, use global CSS or <style> in render().`
         );
       }
-      // Light-DOM slot lifecycle phase one. Three sub-paths:
+      // Light-DOM slot capture: ONCE per host lifetime (#1015). Three
+      // sub-paths, all of which resolve to "the record is populated
+      // exactly once and never re-captured":
       //
-      // a. Reconnection. Slot state already exists from a prior mount.
+      // a. Reconnection. The record already exists from a prior mount.
       //    The host still carries the rendered template DOM (plus
-      //    projected children) from before the disconnect. Skip
+      //    placed slot children) from before the disconnect. Skip
       //    capture (would wrongly hoover up rendered nodes) and skip
       //    SSR adoption. clientRender will see the existing INSTANCE
       //    and updateInstance instead of recreating; the DOM stays.
       //
       // b. SSR hydration (first mount, <!--webjs-hydrate--> marker
-      //    present). Children are already projected into
+      //    present). Children are already inside their
       //    <slot data-webjs-light data-projection="actual"> elements
-      //    by injectDSD. Adopt those assignments BEFORE _performRender
-      //    so we retain references to the SSR'd nodes; the renderer's
-      //    createInstance().replaceChildren() will detach them, but
-      //    projection re-attaches by moving the same Node refs into
-      //    the freshly-cloned slot. DOM identity preserved through the
-      //    hydration round-trip.
+      //    (injectDSD placed them). Adopt those assignments BEFORE
+      //    _performRender so we retain references to the SSR'd nodes;
+      //    the renderer's createInstance().replaceChildren() will
+      //    detach them, but the slot-apply step re-attaches the same
+      //    Node refs into the freshly-cloned slot. DOM identity
+      //    preserved through the hydration round-trip.
       //
-      // c. First mount, no SSR. Move authored children into the
-      //    assignment table before _performRender wipes the host.
+      // c. First mount, no SSR. Partition authored children into the
+      //    record before _performRender wipes the host.
+      //
+      // There are NO mutation observers: an external appendChild or a
+      // slot=""-attribute flip after mount is inert by design, and the
+      // dynamic path is setSlotContent() (children as values).
       if (hasSlotState(this)) {
-        // (a) Reconnection. State already populated; nothing to do here.
+        // (a) Reconnection. Record already populated; nothing to do here.
       } else if (this.__isHydrating()) {
         ensureSlotState(this);
         adoptSSRAssignments(this);
@@ -881,17 +888,50 @@ class WebComponentBase extends Base {
       } catch (err) {
         console.error(`[webjs] lifecycle hook threw during initial render:`, err);
       }
-      // Light-DOM slot lifecycle phase two: after the first render
-      // commits, the live <slot> elements exist. Attach mutation
-      // observers so authored-child + slot-name changes drive
-      // incremental projection. (Shadow DOM uses native slot
-      // projection; nothing to attach.)
-      if (this._renderRoot === this) {
-        attachSlotObservers(this);
-      }
+      // No slot observers to attach (#1015): the renderer's slot parts
+      // place the record content as part of the commit, and the only
+      // dynamic path is setSlotContent().
     });
   }
 
+  /**
+   * Read view of this host's slot record (#1015): captured (or
+   * programmatically set) children per slot name, e.g.
+   * `this.slots.default` / `this.slots.header`. Fresh arrays each read.
+   * Enables conditional-on-slot rendering:
+   * `this.slots.header ? html\`...\` : ''`.
+   *
+   * @returns {Record<string, Node[]>}
+   */
+  get slots() {
+    return slotsView(this);
+  }
+
+  /**
+   * Does this host's slot record carry content for `name` (#1015)?
+   * `hasSlot()` / `hasSlot('default')` query the default slot.
+   *
+   * @param {string | null} [name]
+   * @returns {boolean}
+   */
+  hasSlot(name) {
+    return hasSlotContent(this, name);
+  }
+
+  /**
+   * Replace a slot's content (#1015): the ONE dynamic path for slotted
+   * children (external appendChild / slot="" flips after mount are inert
+   * by design). Accepts a Node, Node[], a string, or null to reset the
+   * slot to its fallback content. Fires `slotchange` when the assignment
+   * changes.
+   *
+   * @param {string | null} name
+   * @param {Node | Node[] | string | null} value
+   */
+  setSlotContent(name, value) {
+    setSlotContent(this, name, value);
+  }
+
   /**
    * True when this host's first child is the framework's hydration
    * marker, meaning the SSR pipeline already rendered the template's
@@ -929,10 +969,8 @@ class WebComponentBase extends Base {
       this.__hydrationObserver.disconnect();
       this.__hydrationObserver = null;
     }
-    // Pause slot observers. The per-host state (assignment table,
-    // pending fragments, last snapshots) is preserved so a subsequent
-    // reconnection picks up where it left off.
-    if (this._renderRoot === this) detachSlotObservers(this);
+    // No slot observers to detach (#1015). The per-host slot record is
+    // preserved so a subsequent reconnection picks up where it left off.
     // Dispose the signal watcher so dependency edges drop. Without
     // this the element holds references to module-scope signals
     // (and vice versa) forever.

package/src/render-client.js

@@ -10,8 +10,8 @@ import {
   PROJECTION_FALLBACK,
   SLOT_FALLBACK_FRAG,
   SLOT_STATE,
-  scheduleProjection,
-  moveSlotChildrenToPending,
+  applySlotAssignments,
+  rescueAssignedNodes,
   ensureSlotState,
 } from './slot.js';
 
@@ -353,7 +353,7 @@ function compile(tr) {
   templateEl.innerHTML = html;
 
   // Mark every <slot> in the template for framework projection and
-  // register a SLOT part for each so projectChildren can find them on
+  // register a SLOT part for each so the slot-apply step can find them on
   // clones. This runs BEFORE assignPaths so the sentinel attributes the
   // discovery step adds are picked up in the same path-recording walk.
   discoverSlots(templateEl.content, parts);
@@ -582,8 +582,11 @@ function clearInstance(inst, container) {
       }
     }
     if (p.kind === 'slot') {
+      // Detach record-owned children before the teardown disposes the
+      // slot subtree; the record keeps the refs, so a re-created slot
+      // re-places the SAME nodes (children are values, #1015).
       const host = findSlotHost(p.slotEl);
-      if (host) moveSlotChildrenToPending(host, p.slotEl);
+      if (host) rescueAssignedNodes(host, p.slotEl);
     }
   }
   /** @type any */ (container).replaceChildren();
@@ -668,11 +671,14 @@ function applyPart(part, value, _prev, allValues) {
         // Shadow DOM: native projection. Leave fallback in place.
         if (isInShadowRootEl(slotEl)) return;
         // Light DOM: harvest the cloned fallback into a holding
-        // fragment, then trigger projection.
+        // fragment, then place the host's slot record (#1015). The
+        // application is deferred one microtask so the documented
+        // lifecycle timing holds: firstUpdated() sees the <slot>
+        // element itself, the populated content lands right after.
         const frag = document.createDocumentFragment();
         while (slotEl.firstChild) frag.appendChild(slotEl.firstChild);
         /** @type {any} */ (slotEl)[SLOT_FALLBACK_FRAG] = frag;
-        scheduleProjection(host);
+        queueMicrotask(() => applySlotAssignments(host));
       };
       const directHost = findSlotHost(slotEl);
       if (directHost) {
@@ -719,7 +725,14 @@ function isInShadowRootEl(el) {
     const parent = n.parentNode;
     if (!parent) return false;
     if (parent === n) return false;
-    if (/** @type any */ (parent).host) return true;
+    // A real ShadowRoot is a DocumentFragment (nodeType 11) exposing its
+    // owner as `.host`. Checking `.host` truthiness ALONE misfires on
+    // ordinary elements: HTMLAnchorElement/HTMLAreaElement expose a
+    // URL-derived `.host` ('example.com'), so a slot nested inside an
+    // <a> card was misread as shadow DOM and its light-DOM application
+    // silently skipped (surfaced by #1015's removal of the redundant
+    // observer repair paths that used to mask it).
+    if (parent.nodeType === 11 && /** @type any */ (parent).host) return true;
     n = parent;
   }
   return false;

package/src/render-server.js

@@ -8,6 +8,7 @@ import { isSuspense } from './suspense.js';
 import { unsafeHTML, isUnsafeHTML, isLive, isKeyed, isGuard, isTemplateContent, isRef, isCache, isUntil, isAsyncAppend, isAsyncReplace, isWatch } from './directives.js';
 import { stringify, parse } from './serialize.js';
 import { cspNonce } from './csp-nonce.js';
+import { ensureSlotState } from './slot.js';
 
 /**
  * Render a TemplateResult (or any renderable value) to an HTML string.
@@ -486,6 +487,48 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       seedServerAttrs(instance, attrMap);
       applyAttrsToInstance(instance, attrMap, Cls);
       for (const [k, v] of Object.entries(propValues)) instance[k] = v;
+      // Extract the authored inner HTML BEFORE the render (#1015, the
+      // injectDSD reorder): the source scan needs no render output, and
+      // hoisting it lets the slot record be seeded so `this.hasSlot()` /
+      // `this.slots` inside render() see the authored children at SSR
+      // exactly as they will on the client (conditional-on-slot parity).
+      // The light-DOM branch below reuses these for the slot pipeline;
+      // the shadow branch is a read-only peek (its authored children stay
+      // in place for native projection, and its edit keeps the old end).
+      let authoredInner = '';
+      let closeEnd = m.index + match.length;
+      if (!selfClose) {
+        const innerStart = m.index + match.length;
+        const closeIdx = findClosingTagInString(html, innerStart, tag);
+        if (closeIdx !== -1) {
+          authoredInner = html.slice(innerStart, closeIdx);
+          const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
+          const tail = html.slice(closeIdx);
+          const closeMatch = closeRe.exec(tail);
+          const closeLen = closeMatch ? closeMatch[0].length : `</${tag}>`.length;
+          closeEnd = closeIdx + closeLen;
+        } else {
+          // Unclosed in source. Take rest of html as authored content
+          // and synthesize a closing tag on output.
+          authoredInner = html.slice(innerStart);
+          closeEnd = html.length;
+        }
+      }
+      const partitioned = partitionAuthoredBySlot(authoredInner);
+      // Seed the slot record for SSR-side reads: LIGHT DOM only, matching the
+      // client (which only creates slot state on the light-DOM path, since
+      // shadow slots are native browser projection). Seeding shadow here
+      // would make hasSlot() true at SSR and false after hydration, flipping
+      // conditional-on-slot markup on the first client render. At SSR the
+      // record value is the authored RAW HTML (one string per name; there is
+      // no DOM to hold Nodes), so PRESENCE and KEYS match the client record,
+      // which is the conditional-on-slot contract. Node access is client-side.
+      if (!isShadow) {
+        const slotState = ensureSlotState(instance);
+        for (const [name, htmlChunk] of partitioned) {
+          if (htmlChunk && htmlChunk.length) slotState.assignedByName.set(name, [htmlChunk]);
+        }
+      }
       // Run the pre-render lifecycle (willUpdate, controllers' hostUpdate,
       // then reflect reflect:true props) so derived state computed there is
       // correct in the SSR'd HTML, matching how lit runs the update cycle at
@@ -561,36 +604,15 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
           continue;
         }
         //
-        // 1. Find the matching closing tag in the source HTML (depth-
-        //    tracked for nested same-tag elements).
-        // 2. Extract authored inner HTML, partition by slot="" attr.
-        // 3. Substitute each <slot> in the rendered output with a
+        // The authored inner HTML + slot partition were extracted BEFORE
+        // the render (the #1015 reorder, see above), so here:
+        // 1. Substitute each <slot> in the rendered output with a
         //    framework-marked <slot data-webjs-light data-projection
         //    ="actual|fallback"> element carrying projection or
         //    fallback content per first-wins rule.
-        // 4. Recursively run injectDSD on the substituted output so
+        // 2. Recursively run injectDSD on the substituted output so
         //    nested custom elements (inside projected children) get
         //    their own DSD pass.
-        let authoredInner = '';
-        let closeEnd = m.index + match.length;
-        if (!selfClose) {
-          const innerStart = m.index + match.length;
-          const closeIdx = findClosingTagInString(html, innerStart, tag);
-          if (closeIdx !== -1) {
-            authoredInner = html.slice(innerStart, closeIdx);
-            const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
-            const tail = html.slice(closeIdx);
-            const closeMatch = closeRe.exec(tail);
-            const closeLen = closeMatch ? closeMatch[0].length : `</${tag}>`.length;
-            closeEnd = closeIdx + closeLen;
-          } else {
-            // Unclosed in source. Take rest of html as authored content
-            // and synthesize a closing tag on output.
-            authoredInner = html.slice(innerStart);
-            closeEnd = html.length;
-          }
-        }
-        const partitioned = partitionAuthoredBySlot(authoredInner);
         const innerWithSlots = substituteSlotsInRender(rawInner, partitioned);
         const innerProcessed = await injectDSD(innerWithSlots, ctx, [...ancestors, instance], dev);
         edits.push({
@@ -838,9 +860,11 @@ function extractSlotAttr(attrsRaw) {
   const m = /\bslot\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
   if (!m) return null;
   const value = m[1] ?? m[2] ?? m[3] ?? '';
-  // Per shadow DOM spec, slot="" (empty) and missing slot attribute
-  // both route to the default slot.
-  return value === '' ? null : value;
+  // Per shadow DOM spec, slot="" (empty) and missing slot attribute both
+  // route to the default slot. `default` is the framework's reserved alias
+  // for it (#1015: the client record normalizes it identically, so both
+  // sides agree end to end).
+  return value === '' || value === 'default' ? null : value;
 }
 
 /**
@@ -982,11 +1006,16 @@ function substituteSlotsInRender(rendered, partitioned) {
         totalEnd = closeIdx + closeLen;
       }
     }
-    const projected = partitioned.get(name);
+    // `default` and `''` are the reserved aliases for the default slot
+    // (#1015), matching the client's keyOfName exactly: the LOOKUP key
+    // normalizes, while the emitted name attribute stays as authored so the
+    // output bytes are unchanged for every other app.
+    const slotKey = name === 'default' || name === '' ? null : name;
+    const projected = partitioned.get(slotKey);
     const nameAttr = name !== null ? ` name="${escapeAttr(name)}"` : '';
     const extraAttrs = otherAttrs ? ` ${otherAttrs}` : '';
-    if (projected !== undefined && !consumedNames.has(name)) {
-      consumedNames.add(name);
+    if (projected !== undefined && !consumedNames.has(slotKey)) {
+      consumedNames.add(slotKey);
       result += `<slot data-webjs-light data-projection="actual"${nameAttr}${extraAttrs}>${projected}</slot>`;
     } else {
       result += `<slot data-webjs-light data-projection="fallback"${nameAttr}${extraAttrs}>${fallback}</slot>`;