@webjsdev/core 0.7.65 → 0.8.0

package/src/component/reactive.js

@@ -1,13 +1,13 @@
 import { tagOf } from '../registry.js';
 
 /**
- * Default change detection: strict inequality.
+ * Default change detection: Object.is inequality (NaN is stable; signed zero changes).
  * @param {unknown} a
  * @param {unknown} b
  * @returns {boolean}
  */
 export function defaultHasChanged(a, b) {
-  return a !== b;
+  return !Object.is(a, b);
 }
 
 /**
@@ -108,8 +108,9 @@ export function warnUnserializableReflection(host, propName, attrName, detail) {
  * while staying JSDoc-only and no-build.
  *
  * Subclasses declare:
- *  - `static properties`: attribute/property declarations with type info,
- *    reflection, custom converters, and internal-state mode
+ *  - reactive properties, through the `WebComponent({ ... })` factory:
+ *    attribute/property declarations with type info, reflection and custom
+ *    converters (internal state is an instance signal, not a property)
  *  - `static styles`: CSSResult or array thereof (only meaningful with
  *    `static shadow = true`; light-DOM components inherit global CSS)
  *  - `static shadow`: set `true` to opt in to shadow DOM (default: `false`

package/src/component.d.ts

@@ -85,11 +85,11 @@ interface WebComponentBase extends HTMLElement {
    * Schedule a re-render. Optionally record a property change so lifecycle
    * hooks can branch on what changed via `changedProperties`.
    *
-   * For instance-local state, prefer a reactive property (`WebComponent({
-   * foo: prop({ state: true }) })`) or a signal from
-   * `@webjsdev/core`'s `signal()`. The framework's built-in
-   * SignalWatcher wires every signal read in `render()` to a re-render
-   * automatically; explicit `requestUpdate()` is rarely needed.
+   * For instance-local state, use a reactive property (`WebComponent({
+   * open: prop<boolean>({ state: true }) })`) or a signal from
+   * `@webjsdev/core`'s `signal()`. The framework's built-in SignalWatcher
+   * wires every signal the update cycle reads to a re-render automatically;
+   * explicit `requestUpdate()` is rarely needed.
    */
   requestUpdate(name?: string, oldValue?: unknown): void;
   /** A Promise that resolves after the next render commit. */
@@ -210,6 +210,12 @@ export declare function prop<T>(
   opts?: Omit<PropertyDeclaration<T>, 'type'>
 ): PropertyDeclaration<T>;
 
+// No type constructor and no attribute: nothing says what the value is, so it
+// is `unknown` until narrowed (`prop<boolean>({ state: true })`).
+export declare function prop<T = unknown>(
+  opts: PropertyDeclaration<T> & ({ state: true } | { attribute: false })
+): PropertyDeclaration<T>;
+
 export declare function prop<T = string>(
   opts?: PropertyDeclaration<T>
 ): PropertyDeclaration<T>;

package/src/directives.d.ts

@@ -96,3 +96,5 @@ export function asyncReplace<T>(
 export function isAsyncReplace(x: unknown): x is AsyncReplaceDirective;
 export function watch<T>(sig: { get(): T; __isSignal: true }): WatchDirective<T>;
 export function isWatch(x: unknown): x is WatchDirective;
+
+export { classMap, styleMap, ifDefined } from './attribute-directives.js';

package/src/directives.js

@@ -458,3 +458,5 @@ export function watch(sig) {
 export function isWatch(x) {
   return !!x && typeof x === 'object' && /** @type {any} */ (x)._$webjs === 'watch';
 }
+
+export { classMap, styleMap, ifDefined } from './attribute-directives.js';

package/src/html.d.ts

@@ -2,8 +2,12 @@ export interface TemplateResult {
   _$webjs: 'template';
   strings: TemplateStringsArray | string[];
   values: unknown[];
+  /** Set by the `svg` tag: the client parses the strings inside an `<svg>` wrapper. */
+  svg?: boolean;
 }
 
 export function html(strings: TemplateStringsArray | string[], ...values: unknown[]): TemplateResult;
+/** lit's `svg` tag: a fragment parsed as SVG on the client, rendered like `html` on the server. */
+export function svg(strings: TemplateStringsArray | string[], ...values: unknown[]): TemplateResult;
 export function isTemplate(x: unknown): x is TemplateResult;
 export const MARKER: 'wjm-';

package/src/html.js

@@ -4,7 +4,7 @@
  * A TemplateResult is an isomorphic description of HTML: the static string
  * pieces plus the dynamic values. Server and client renderers both consume it.
  *
- * @typedef {{ _$webjs: 'template', strings: TemplateStringsArray | string[], values: unknown[] }} TemplateResult
+ * @typedef {{ _$webjs: 'template', strings: TemplateStringsArray | string[], values: unknown[], svg?: boolean }} TemplateResult
  *
  * @param {TemplateStringsArray | string[]} strings
  * @param {...unknown} values
@@ -14,6 +14,27 @@ export function html(strings, ...values) {
   return { _$webjs: 'template', strings, values };
 }
 
+/**
+ * Tagged template literal for an SVG FRAGMENT, lit's `svg` tag.
+ *
+ * Use it for markup that sits INSIDE an `<svg>` element but is built in its
+ * own template (a `<rect>` per data point, a `<path>` a helper returns).
+ * An `html` template is parsed as HTML on the client, so a `<rect>` there
+ * becomes an HTML element and never paints. An `svg` template is parsed
+ * inside an `<svg>` wrapper, so its elements are SVG elements. A whole
+ * `<svg>` element still belongs in `html`.
+ *
+ * The server renders it exactly like `html` (markup is text there), so the
+ * two differ only in how the client parses the static strings.
+ *
+ * @param {TemplateStringsArray | string[]} strings
+ * @param {...unknown} values
+ * @returns {TemplateResult}
+ */
+export function svg(strings, ...values) {
+  return { _$webjs: 'template', strings, values, svg: true };
+}
+
 /**
  * Identity check for TemplateResult.
  * @param {unknown} x

package/src/render-client/adopt-slots.js

@@ -0,0 +1,245 @@
+/**
+ * Hydration slot adoption: keep a light-DOM host's SSR-projected children in
+ * the document while its first client render replaces the SSR markup (#1666).
+ *
+ * Hydration renders the template from a fresh clone and swaps it in for the
+ * SSR markup. The projected children sit inside the SSR `<slot>`, so swapping
+ * the SSR tree out took them out of the document, and the first slot apply put
+ * them back a microtask later. A removal is not free: the HTML spec navigates
+ * a re-inserted iframe again (and `loading="lazy"` defers only the FIRST
+ * insertion, so a hidden lazy frame loads), and every nested custom element
+ * disconnects and reconnects.
+ *
+ * So for each of the template's own slots whose SSR counterpart holds exactly
+ * the nodes the host's record adopted, the SSR slot and its ancestor chain up
+ * to the host are KEPT: the parts that target a fresh element on that chain
+ * are pointed at its live twin, and the fresh siblings around the chain are
+ * inserted into the live elements instead of the live tree being replaced. No
+ * kept node moves, so the projected children never leave the document. The
+ * fresh slot's cloned fallback goes to the slot's holding fragment, where the
+ * slot part would have put it.
+ *
+ * Conservative by construction: a slot is adopted only when every link of
+ * both chains matches by tag, no link is a custom element (whose SSR markup is
+ * its own rendered template) or a `<form>` (form-action reconciliation inserts
+ * children into it), the slot's name is static, and the kept nodes sit in the
+ * same relative order on both sides. Anything else, a slot inside a
+ * conditional template among them, falls back to the plain swap.
+ *
+ * @module
+ */
+import {
+  PROJECTION_ACTUAL, PROJECTION_ATTR, SLOT_FALLBACK_FRAG, SLOT_OWNER_ATTR,
+  ensureSlotState, hasSlotState, keyOfName,
+} from '../slot.js';
+
+/**
+ * Live SSR slots a hydration render adopted. The slot part's finalize reads
+ * it to leave the slot's children (the projected nodes) in place instead of
+ * harvesting them as fallback, since the holding fragment is already set.
+ * @type {WeakSet<Element>}
+ */
+export const adoptedSlots = new WeakSet();
+
+/**
+ * @typedef {{ map: Map<Node, Element>, slots: [Element, Element][], chains: [Element, Element][] }} AdoptionPlan
+ */
+
+/**
+ * Plan the adoption for a hydration render, after the parts are bound and
+ * before any is applied. Returns null when no slot qualifies.
+ *
+ * @param {Element | DocumentFragment | ShadowRoot} container
+ * @param {DocumentFragment} frag the fresh clone
+ * @param {any[]} bound the template's bound parts
+ * @returns {AdoptionPlan | null}
+ */
+export function planSlotAdoption(container, frag, bound) {
+  if (/** @type {any} */ (container).nodeType !== 1 || !hasSlotState(/** @type {Element} */ (container))) return null;
+  const state = ensureSlotState(/** @type {Element} */ (container));
+  /** @type {Set<Element>} */
+  const dynamicName = new Set();
+  for (const p of bound) {
+    if ((p.kind === 'attr' || p.kind === 'attr-mixed' || p.kind === 'bool') && p.name === 'name') dynamicName.add(p.el);
+  }
+  /** @type {Map<Node, Element>} fresh element to its live twin */
+  const map = new Map();
+  /** @type {Set<Element>} */
+  const usedLive = new Set();
+  /** @type {[Element, Element][]} */
+  const slots = [];
+  /** @type {[Element, Element][]} */
+  const chains = [];
+  for (const p of bound) {
+    if (p.kind !== 'slot') continue;
+    const slotF = /** @type {Element} */ (p.slotEl);
+    if (dynamicName.has(slotF)) continue;
+    const assigned = state.assignedByName.get(keyOfName(slotF.getAttribute('name')));
+    if (!assigned || assigned.length === 0) continue;
+    const slotL = /** @type {Element | null} */ (assigned[0].parentNode);
+    if (!slotL || slotL.nodeType !== 1 || slotL.localName !== 'slot' || usedLive.has(slotL)) continue;
+    if (slotL.getAttribute(PROJECTION_ATTR) !== PROJECTION_ACTUAL) continue;
+    if (!sameNodes(slotL.childNodes, assigned)) continue;
+    const fChain = ancestorsUpTo(slotF, frag);
+    const lChain = ancestorsUpTo(slotL, container);
+    if (!fChain || !lChain || fChain.length !== lChain.length) continue;
+    let ok = true;
+    for (let i = 0; i < fChain.length && ok; i++) {
+      const f = fChain[i];
+      const l = lChain[i];
+      const name = f.localName;
+      if (name !== l.localName || name.includes('-') || name === 'form') ok = false;
+      else {
+        const prior = map.get(f);
+        if (prior ? prior !== l : usedLive.has(l)) ok = false;
+      }
+    }
+    if (!ok) continue;
+    map.set(slotF, slotL);
+    usedLive.add(slotL);
+    slots.push([slotF, slotL]);
+    for (let i = 0; i < fChain.length; i++) {
+      if (map.has(fChain[i])) continue;
+      map.set(fChain[i], lChain[i]);
+      usedLive.add(lChain[i]);
+      chains.push([fChain[i], lChain[i]]);
+    }
+  }
+  if (slots.length === 0) return null;
+  // No kept node may have to move: under each kept parent the kept children
+  // must already sit in the order the template puts them in.
+  for (const fParent of [frag, ...chains.map(([f]) => f)]) {
+    let last = null;
+    for (const child of fParent.childNodes) {
+      const live = map.get(child);
+      if (!live) continue;
+      if (last && !(last.compareDocumentPosition(live) & Node.DOCUMENT_POSITION_FOLLOWING)) return null;
+      last = live;
+    }
+  }
+  return { map, slots, chains };
+}
+
+/**
+ * Point every bound part that targets a kept fresh element at its live twin,
+ * and give each kept element the fresh one's static attributes. Runs before
+ * the parts apply, so every dynamic value lands on the live element directly.
+ *
+ * @param {AdoptionPlan} plan
+ * @param {any[]} bound
+ */
+export function retargetParts(plan, bound) {
+  /** @type {Map<Element, Set<string>>} attributes a part owns, per live element */
+  const owned = new Map();
+  for (const p of bound) {
+    if (p.kind === 'slot') {
+      const live = plan.map.get(p.slotEl);
+      if (live) p.slotEl = live;
+      continue;
+    }
+    if (!p.el) continue;
+    const live = plan.map.get(p.el);
+    if (!live) continue;
+    if (p.kind === 'event') {
+      p.el.removeEventListener(p.name, p.dispatcher);
+      live.addEventListener(p.name, p.dispatcher);
+    }
+    p.el = live;
+    if (p.kind === 'attr' || p.kind === 'attr-mixed' || p.kind === 'bool') {
+      let names = owned.get(live);
+      if (!names) owned.set(live, names = new Set());
+      names.add(p.name);
+    }
+  }
+  for (const [fresh, live] of [...plan.chains, ...plan.slots]) {
+    const isSlot = live.localName === 'slot';
+    const names = owned.get(live);
+    for (const a of Array.from(live.attributes)) {
+      if (fresh.hasAttribute(a.name) || names?.has(a.name)) continue;
+      // The SSR projection stamps stay: the slot IS projected, and the owner
+      // carrier is what isOwnSlot reads until the owner symbol is stamped.
+      if (isSlot && (a.name === PROJECTION_ATTR || a.name === SLOT_OWNER_ATTR)) continue;
+      live.removeAttribute(a.name);
+    }
+    for (const a of Array.from(fresh.attributes)) {
+      if (live.getAttribute(a.name) !== a.value) live.setAttribute(a.name, a.value);
+    }
+  }
+}
+
+/**
+ * Commit the fresh template into the container around the kept live nodes:
+ * every live child that is not kept is removed, every fresh node is inserted
+ * in template order, and no kept node moves. The fresh slots' cloned fallback
+ * goes to each kept slot's holding fragment.
+ *
+ * @param {AdoptionPlan} plan
+ * @param {Element} container
+ * @param {Node[]} top the container's new children, bookends included
+ */
+export function commitAdoption(plan, container, top) {
+  const mapped = (/** @type {Node} */ n) => plan.map.get(n) || n;
+  const state = ensureSlotState(container);
+  for (const [fresh, live] of plan.chains) mergeChildren(live, Array.from(fresh.childNodes, mapped));
+  mergeChildren(container, top.map(mapped));
+  for (const [fresh, live] of plan.slots) {
+    const fallback = document.createDocumentFragment();
+    while (fresh.firstChild) fallback.appendChild(fresh.firstChild);
+    /** @type {any} */ (live)[SLOT_FALLBACK_FRAG] = fallback;
+    adoptedSlots.add(live);
+    // Forget the adopted snapshot so the first apply reports the initial
+    // projection (one slotchange), exactly as the plain swap did.
+    state.lastSnapshot.delete(live);
+  }
+}
+
+/**
+ * Make `parent`'s children exactly `want`, removing what is not wanted and
+ * inserting the rest, without moving a node already in place in order.
+ *
+ * @param {Node} parent
+ * @param {Node[]} want
+ */
+function mergeChildren(parent, want) {
+  const keep = new Set(want);
+  for (const c of Array.from(parent.childNodes)) {
+    if (!keep.has(c)) parent.removeChild(c);
+  }
+  let cursor = parent.firstChild;
+  for (const node of want) {
+    if (node === cursor) {
+      cursor = cursor.nextSibling;
+      continue;
+    }
+    parent.insertBefore(node, cursor);
+  }
+}
+
+/**
+ * The element ancestors of `node` below `root`, nearest first, or null when
+ * `root` is not an ancestor.
+ *
+ * @param {Node} node
+ * @param {Node} root
+ * @returns {Element[] | null}
+ */
+function ancestorsUpTo(node, root) {
+  const out = [];
+  let p = node.parentNode;
+  while (p && p !== root) {
+    if (p.nodeType !== 1) return null;
+    out.push(/** @type {Element} */ (p));
+    p = p.parentNode;
+  }
+  return p === root ? out : null;
+}
+
+/**
+ * @param {NodeListOf<ChildNode>} list
+ * @param {Node[]} nodes
+ */
+function sameNodes(list, nodes) {
+  if (list.length !== nodes.length) return false;
+  for (let i = 0; i < nodes.length; i++) if (list[i] !== nodes[i]) return false;
+  return true;
+}

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);
@@ -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);