@webjsdev/core 0.7.64 → 0.8.0

package/src/render-client/parts.js

@@ -1,3 +1,5 @@
+import { isAttributeMap, applyAttributeMap } from '../attribute-directives.js';
+import { nothing, noChange } from '../sentinels.js';
 import { isTemplate, MARKER } from '../html.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp, isBoundFormAction,
@@ -11,6 +13,7 @@ import {
   SLOT_FALLBACK_FRAG, SLOT_STATE, SLOT_OWNER, applySlotAssignments, withRendererWrites,
 } from '../slot.js';
 import { compile, templateCache } from './template-compiler.js';
+import { adoptedSlots } from './adopt-slots.js';
 import { attrHoleValue } from '../binding-prefixes.js';
 
 /**
@@ -23,6 +26,8 @@ import { attrHoleValue } from '../binding-prefixes.js';
  * first. Same reason `SLOT_OWNER` exists.
  * @type {any}
  */
+export let currentRenderHost;
+export function setCurrentRenderHost(host) { currentRenderHost = host; }
 export let currentRenderRoot = null;
 
 export function setCurrentRenderRoot(root) {
@@ -132,6 +137,8 @@ export function boundaryOwnerOf(root) {
 export function commitOutOfBand(part, fn) {
   const owner = /** @type any */ (part).__commitOwner;
   const prev = currentRenderRoot;
+  const prevHost = currentRenderHost;
+  currentRenderHost = part.__eventHost;
   if (owner) currentRenderRoot = owner;
   try {
     fn();
@@ -150,7 +157,7 @@ export function bindPart(p, root) {
   let node = /** @type Node */ (root);
   for (const i of p.path) node = node.childNodes[i];
   if (p.kind === 'child') {
-    return { kind: 'child', marker: /** @type Comment */ (node) };
+    return { kind: 'child', marker: /** @type Comment */ (node), __eventHost: currentRenderHost };
   }
   const el = /** @type Element */ (node);
   if (p.kind === 'event') {
@@ -160,10 +167,13 @@ export function bindPart(p, root) {
       el,
       name: p.name || '',
       handler: null,
+      eventHost: currentRenderHost,
       // The dispatcher is the registered listener; handler swaps behind it.
-      dispatcher(ev) { part.handler?.(ev); },
+      dispatcher(ev) {
+        if (typeof part.handler === 'function') part.handler.call(part.eventHost ?? part.el, ev);
+        else part.handler?.handleEvent(ev);
+      },
     };
-    el.addEventListener(part.name, part.dispatcher);
     return part;
   }
   if (p.kind === 'attr') return { kind: 'attr', el, name: p.name || '' };
@@ -189,6 +199,9 @@ export function bindPart(p, root) {
  * @param {unknown} _prev
  */
 export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb) {
+  if (value === noChange) return;
+  if (isAttributeMap(value)) { applyAttributeMap(part, value); return; }
+  part.__mapKind = undefined;
   // Unwrap live() to dirty-check against the live DOM value, not the
   // last rendered value. Essential for <input> two-way binding.
   if (isLive(value)) {
@@ -247,21 +260,28 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
       // first and is left alone, so it still writes whatever the author
       // returns for a function.
       assertNotFunctionReflectedActionProp(value, part.name, part.el.localName);
-      /** @type any */ (part.el)[part.name] = value;
+      /** @type any */ (part.el)[part.name] = value === nothing ? undefined : value;
       break;
     case 'bool':
       // #1154: never leaked (a boolean binding stringifies nothing), but
       // `?action=${fn}` is meaningless in every case, and refusing it keeps
       // this renderer agreeing with both SSR machines.
       assertNotFunctionActionAttr(value, part.name, part.el.localName);
-      if (value) part.el.setAttribute(part.name, '');
+      if (value && value !== nothing) part.el.setAttribute(part.name, '');
       else part.el.removeAttribute(part.name);
       break;
     case 'event':
       // NOT guarded, deliberately. An event binding never stringifies its
       // value, and a function is the legitimate thing to pass one, so
       // `<my-el @action=${handler}>` has to keep working.
-      part.handler = typeof value === 'function' ? /** @type any */ (value) : null;
+      {
+        const old = part.handler;
+        const next = value == null || value === nothing ? null : value;
+        const changed = old?.capture !== next?.capture || old?.once !== next?.once || old?.passive !== next?.passive;
+        if (old && (!next || changed)) part.el.removeEventListener(part.name, part.dispatcher, old);
+        if (next && (!old || changed)) part.el.addEventListener(part.name, part.dispatcher, next);
+        part.handler = next;
+      }
       break;
     case 'element':
       applyElement(part, value);
@@ -282,6 +302,7 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
         if (isLive(piece)) piece = /** @type any */ (piece).value;
         // #1154: same function guard for each piece of a mixed attribute.
         assertNotFunctionActionAttr(piece, part.name, part.el.localName);
+        if (piece === nothing) { part.el.removeAttribute(part.name); return; }
         val += String(piece ?? '');
         val += mp.statics[j + 1] || '';
       }
@@ -333,9 +354,16 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
         // 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;
+        // A slot a hydration render ADOPTED (#1666) is the live SSR slot: its
+        // children are the projected nodes, left in place, and its holding
+        // fragment already carries the fresh clone's fallback.
+        if (adoptedSlots.has(slotEl)) {
+          adoptedSlots.delete(slotEl);
+        } else {
+          const frag = document.createDocumentFragment();
+          while (slotEl.firstChild) frag.appendChild(slotEl.firstChild);
+          /** @type {any} */ (slotEl)[SLOT_FALLBACK_FRAG] = frag;
+        }
         queueMicrotask(() => applySlotAssignments(host));
       };
       const directHost = findSlotHost(slotEl);
@@ -453,8 +481,8 @@ export function applyElement(part, value) {
       }
     }
     partAny.__refElement = part.el;
-    // Keep the legacy `lastTarget` field in sync for clearInstance /
-    // disposeInstance which read it for template-disposal cleanup.
+    // Keep `lastTarget` in sync for clearInstance / disposeInstance, which
+    // read it for template-disposal cleanup.
     part.lastTarget = nextTarget;
   }
 }
@@ -466,6 +494,7 @@ export function applyChild(part, value, reconcileFormActionsCb) {
   // short-circuit, etc. Done once per outermost applyChild call; the
   // directive handlers recurse via applyChildInner (no re-clear) so
   // their own state survives the recursion.
+  if (value === noChange) return;
   clearStaleDirectiveState(part, value);
   return applyChildInner(part, value, reconcileFormActionsCb);
 }
@@ -487,9 +516,13 @@ export function applyChildInner(part, value, reconcileFormActionsCb) {
   // asyncReplace, streaming) re-enter here from a promise / microtask OUTSIDE
   // any render() window, so this is where those commits into a light host are
   // marked as renderer writes rather than authored content.
-  return commitInto(part.marker && part.marker.parentNode, () =>
-    applyChildInnerRaw(part, value, reconcileFormActionsCb),
-  );
+  const previousHost = currentRenderHost;
+  currentRenderHost = part.__eventHost;
+  try {
+    return commitInto(part.marker && part.marker.parentNode, () =>
+      applyChildInnerRaw(part, value, reconcileFormActionsCb),
+    );
+  } finally { currentRenderHost = previousHost; }
 }
 
 /**
@@ -698,7 +731,7 @@ export function applyChildInnerRaw(part, value, reconcileFormActionsCb) {
     }
   }
 
-  if (value == null || value === false || value === true) return;
+  if (value == null || value === nothing || value === noChange) return;
 
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);
@@ -733,6 +766,7 @@ export function applyChildInnerRaw(part, value, reconcileFormActionsCb) {
 }
 
 export function updateInstance(inst, values, reconcileFormActionsCb) {
+  values = values.map((value, i) => value === noChange ? (inst.lastValues[i] ?? nothing) : value);
   for (let i = 0; i < values.length; i++) {
     const next = values[i];
     if (Object.is(next, inst.lastValues[i])) continue;
@@ -875,7 +909,7 @@ export function buildDetached(tr, reconcileFormActionsCb) {
 /** @param {TemplateInstance} inst */
 export function disposeInstance(inst) {
   for (const p of inst.bound) {
-    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher);
+    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher, p.handler);
     if (p.kind === 'element') {
       // Unbind any active ref so the user observes the element being
       // removed (callback receives undefined / Ref.value cleared).
@@ -1129,7 +1163,7 @@ function buildArrayItem(v, reconcileFormActionsCb) {
     const { inst, frag } = buildDetached(/** @type any */ (v), reconcileFormActionsCb);
     return { item: { type: 'tpl', inst }, frag };
   }
-  if (v != null && v !== false && v !== true) {
+  if (v != null && v !== nothing && v !== noChange) {
     const node = document.createTextNode(String(v));
     return { item: { type: 'text', node }, frag: node };
   }
@@ -1196,7 +1230,7 @@ function reconcileArray(part, value, reconcileFormActionsCb) {
           consumed = i + 1;
           continue;
         }
-      } else if (v != null && v !== false && v !== true) {
+      } else if (v != null && v !== nothing && v !== noChange) {
         if (o && o.type === 'text') {
           const str = String(v);
           if (o.node.data !== str) o.node.data = str;
@@ -1991,7 +2025,7 @@ function renderToNodes(value, reconcileFormActionsCb) {
   // #1443: the streamed / detached counterpart of the per-item unwrap above.
   // Recursion covers a nested array, since each level re-enters here.
   if (isLive(value)) value = /** @type any */ (value).value;
-  if (value == null || value === false || value === true) return [];
+  if (value == null || value === nothing || value === noChange) return [];
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);
     const { templateEl, parts, formActions } = compile(tr);

package/src/render-client/reconciler.js

@@ -1,3 +1,4 @@
+import { nothing, noChange } from '../sentinels.js';
 import { isTemplate, MARKER } from '../html.js';
 import {
   reconcileFormAction, isBoundFormAction, ABSENT, assertSubmitterHasNoName, assertSubmitterType,
@@ -10,8 +11,9 @@ import { isLive } from '../directives.js';
 import { attrHoleValue } from '../binding-prefixes.js';
 import { RENDERING, SLOT_OWNER, SLOT_STATE, drainRendererBackstop, rescueAssignedNodes } from '../slot.js';
 import { compile, submitterActionBindings, INSTANCE } from './template-compiler.js';
+import { commitAdoption, planSlotAdoption, retargetParts } from './adopt-slots.js';
 import {
-  applyPart, bindPart, currentRenderRoot, findSlotHost, setCurrentRenderRoot, updateInstance,
+  applyPart, bindPart, currentRenderHost, setCurrentRenderHost, currentRenderRoot, findSlotHost, setCurrentRenderRoot, updateInstance,
 } from './parts.js';
 
 /**
@@ -19,8 +21,10 @@ import {
  *
  * @param {unknown} value
  * @param {Element | DocumentFragment | ShadowRoot} container
+ * @param {{host?: object}} [options]
  */
-export function render(value, container) {
+export function render(value, container, options = {}) {
+  if (value === noChange) return;
   const host = /** @type any */ (container);
   // Open the renderer-write window for the whole commit: every host-receiver
   // write below (and in createInstance / updateInstance / clearInstance / all
@@ -29,6 +33,8 @@ export function render(value, container) {
   // between a renderer commit and an author write.
   const prevRendering = host[RENDERING];
   host[RENDERING] = true;
+  const prevHost = currentRenderHost;
+  setCurrentRenderHost(options.host);
   const prevRenderRoot = currentRenderRoot;
   setCurrentRenderRoot(container);
   try {
@@ -44,12 +50,12 @@ export function render(value, container) {
 
       // Light DOM hydration: if container has SSR content (marked by
       // <!--webjs-hydrate-->), remove the marker and proceed with normal
-      // rendering. The content will be replaced with identical output -
-      // no visible flash because SSR and client render produce the same HTML.
+      // rendering. The content is replaced with identical output, so nothing
+      // flashes, except that the SSR slots holding projected children stay in
+      // place (createInstance, #1666), so those children never leave the page.
       const firstChild = container.firstChild;
-      if (firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate') {
-        firstChild.remove();
-      }
+      const hydrating = !!firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate';
+      if (hydrating) firstChild.remove();
 
       // Pre-set the symbol to an explicit null BEFORE the commit,
       // UNCONDITIONALLY: if createInstance throws after its replaceChildren
@@ -59,7 +65,7 @@ export function render(value, container) {
       // instance on the template-swap path (whose bookends would misclassify
       // the half-committed new roots as unowned and fold them).
       host[INSTANCE] = null;
-      const inst = createInstance(tr, container);
+      const inst = createInstance(tr, container, hydrating);
       host[INSTANCE] = inst;
       return;
     }
@@ -68,7 +74,7 @@ export function render(value, container) {
     if (prev) clearInstance(prev, container);
     host[INSTANCE] = null;
     container.replaceChildren();
-    if (value == null || value === false || value === true) return;
+    if (value == null || value === nothing) return;
     if (Array.isArray(value)) {
       for (const v of value) {
         const text = document.createTextNode(String(v ?? ''));
@@ -79,6 +85,7 @@ export function render(value, container) {
     container.appendChild(document.createTextNode(String(value)));
   } finally {
     setCurrentRenderRoot(prevRenderRoot);
+    setCurrentRenderHost(prevHost);
     host[RENDERING] = prevRendering;
     // Outermost window closing: drain this commit's childList records off the
     // slot backstop (drainRendererBackstop processes them with a renderer-output
@@ -307,7 +314,7 @@ function resolveHoleValue(v) {
  * @param {import('../html.js').TemplateResult} tr
  * @param {Element | DocumentFragment | ShadowRoot} container
  */
-function createInstance(tr, container) {
+function createInstance(tr, container, hydrating = false) {
   const { templateEl, parts, formActions } = compile(tr);
   const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
   // Bookend markers bound the instance so we can tear it down cleanly.
@@ -315,6 +322,11 @@ function createInstance(tr, container) {
   const endNode = document.createComment(`${MARKER}e`);
 
   const bound = parts.map((p) => bindPart(p, frag));
+  // Hydration keeps the SSR slots that hold projected children, and their
+  // ancestors, in the document (#1666): the parts targeting them are pointed at
+  // the live elements now, before any applies.
+  const adoption = hydrating ? planSlotAdoption(container, frag, bound) : null;
+  if (adoption) retargetParts(adoption, bound);
   const lastValues = [];
   for (let i = 0; i < tr.values.length; i++) {
     applyPart(bound[i], tr.values[i], undefined, tr.values, reconcileFormActions);
@@ -322,7 +334,11 @@ function createInstance(tr, container) {
   }
   reconcileFormActions(formActions, bound, tr.values);
 
-  /** @type any */ (container).replaceChildren(startNode, ...frag.childNodes, endNode);
+  if (adoption) {
+    commitAdoption(adoption, /** @type {Element} */ (container), [startNode, ...frag.childNodes, endNode]);
+  } else {
+    /** @type any */ (container).replaceChildren(startNode, ...frag.childNodes, endNode);
+  }
 
   // Slot parts have no value-hole to drive applyPart from the loop above.
   // Apply them once now that the fragment is inserted into the live
@@ -363,7 +379,7 @@ function clearInstance(inst, container) {
   // slot parts so they survive teardown of a collapsing conditional
   // fragment.
   for (const p of inst.bound) {
-    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher);
+    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher, p.handler);
     if (p.kind === 'element') {
       // Guarded for the same reason as the sibling in `disposeInstance`, and
       // the stakes are higher here: this is the container-level teardown

package/src/render-client/template-compiler.js

@@ -31,10 +31,10 @@ export const INSTANCE = Symbol.for('webjs.instance');
  * }} TemplateInstance
  *
  * @typedef {
- *   | { kind: 'child', marker: Comment, child?: TemplateInstance | ChildNode[] }
+ *   | { kind: 'child', marker: Comment, __eventHost?: object, child?: TemplateInstance | ChildNode[] }
  *   | { kind: 'attr', el: Element, name: string }
  *   | { kind: 'attr-mixed', el: Element, name: string, statics: string[], group: number[] }
- *   | { kind: 'event', el: Element, name: string, handler: ((e: Event) => void) | null, dispatcher: (e: Event) => void }
+ *   | { kind: 'event', el: Element, name: string, handler: (EventListenerOrEventListenerObject & AddEventListenerOptions) | null, eventHost?: object, dispatcher: (e: Event) => void }
  *   | { kind: 'prop', el: Element, name: string }
  *   | { kind: 'bool', el: Element, name: string }
  *   | { kind: 'element', el: Element, lastTarget?: any }
@@ -169,10 +169,14 @@ export function compile(tr) {
               const eq = sLast.indexOf(attrQuote);
               statics.push(eq >= 0 ? sLast.slice(0, eq) : sLast);
 
+              const specialized = isBindingPrefix(mixedAttr.name[0]);
+              if (specialized && (group.length !== 1 || statics.some((piece) => piece !== ''))) {
+                throw new Error('Event, property and boolean bindings require exactly one expression with no surrounding text.');
+              }
               parts[idx0] = {
-                kind: 'attr-mixed',
+                kind: specialized ? BINDING_PREFIXES[mixedAttr.name[0]] : 'attr-mixed',
                 path: [],
-                name: mixedAttr.name,
+                name: specialized ? mixedAttr.name.slice(1) : mixedAttr.name,
                 statics,
                 group,
               };
@@ -262,7 +266,17 @@ export function compile(tr) {
   }
 
   const templateEl = document.createElement('template');
-  templateEl.innerHTML = html;
+  if (tr.svg) {
+    // An svg`` fragment is parsed inside an <svg> wrapper so its elements
+    // land in the SVG namespace, then the wrapper is unwrapped BEFORE the
+    // slot and path walks, so every recorded path is relative to the
+    // fragment's own root, as it is for an html`` template (lit does the same).
+    templateEl.innerHTML = `<svg>${html}</svg>`;
+    const wrapper = /** @type {Element} */ (templateEl.content.firstChild);
+    wrapper.replaceWith(...wrapper.childNodes);
+  } else {
+    templateEl.innerHTML = html;
+  }
 
   // Mark every <slot> in the template for framework projection and
   // register a SLOT part for each so the slot-apply step can find them on

package/src/render-client.d.ts

@@ -1 +1,2 @@
-export function render(value: unknown, container: Element | DocumentFragment | ShadowRoot): void;
+export interface RenderOptions { host?: object; }
+export function render(value: unknown, container: Element | DocumentFragment | ShadowRoot, options?: RenderOptions): void;

package/src/render-server/attrs.js

@@ -42,8 +42,8 @@ export function parseAttrs(attrStr) {
  */
 export function seedServerAttrs(instance, attrs) {
   if (!instance || typeof instance.setAttribute !== 'function') return;
-  for (const [name, raw] of Object.entries(attrs)) {
-    instance.setAttribute(name, decodeAttrEntities(raw));
+  for (const name in attrs) {
+    instance.setAttribute(name, decodeAttrEntities(attrs[name]));
   }
 }
 
@@ -55,7 +55,7 @@ export function seedServerAttrs(instance, attrs) {
  * @returns {string}
  */
 export function withHostMarker(opening) {
-  if (/\sdata-wj-host(?=[\s>=])/i.test(opening)) return opening;
+  if (opening.includes('data-wj-host') && /\sdata-wj-host(?=[\s>=])/i.test(opening)) return opening;
   return `${opening.slice(0, -1)} data-wj-host>`;
 }
 
@@ -94,7 +94,8 @@ export function appendReflectedAttrs(opening, instance, presentAttrNames) {
  * based on its static `properties` declaration.
  */
 export function applyAttrsToInstance(instance, attrs, Cls) {
-  for (const [sourceName, sourceValue] of Object.entries(attrs)) {
+  for (const sourceName in attrs) {
+    const sourceValue = attrs[sourceName];
     // The browser LOWERCASES every attribute name while parsing an HTML
     // document, so `cfgData="x"` reaches the client reader as `cfgdata` and a
     // camelCase name can never match anything in `observedAttributes`.