@firsthandjs/dom 0.8.0 → 0.9.1

package/dist/{dev-chunk-2CKM3OGC.js → dev-chunk-MKONDKMD.js}

@@ -1,3 +1,18 @@
+import {
+  FLAT,
+  PENDING,
+  applyChild,
+  bindPart,
+  devComponent,
+  devPart,
+  devWarn,
+  devWarnOnce,
+  discard,
+  hydration,
+  isDynamicChild,
+  part
+} from "./dev-chunk-ADHDPKZW.js";
+
 // packages/dom/src/adapter.ts
 var adapter = null;
 var adapted = /* @__PURE__ */ new WeakMap();
@@ -27,398 +42,16 @@ function adapt(target) {
   return component_;
 }
 
-// packages/dom/src/dev.ts
-function devWarn(message) {
-  console.warn(`[firsthand] ${message}`);
-}
-var seen = /* @__PURE__ */ new Set();
-function devWarnOnce(key2, message) {
-  if (!seen.has(key2)) {
-    seen.add(key2);
-    devWarn(message);
-  }
-}
-function devWarnRenderedObject(value) {
-  const cellish = "peek" in value && typeof value.peek === "function" && "value" in value;
-  devWarnOnce(
-    cellish ? "rendered-cell" : "rendered-object",
-    cellish ? 'A signal or computed was rendered directly, so the page shows "[object Object]". Read it instead: {count.value} rather than {count}.' : `An object was rendered as text, so the page shows "${String(value)}". Render a string, a number or a node.`
-  );
-}
-function hook() {
-  const installed2 = globalThis.__FIRSTHAND_DEVTOOLS__;
-  return installed2 !== void 0 && installed2.attached ? installed2 : void 0;
-}
-function devPart(node, property) {
-  hook()?.part(node, property);
-}
-function devComponent(owner, name) {
-  hook()?.component(owner, name);
-}
-function label(value, kind, name) {
-  if (typeof value === "object" && value !== null) {
-    hook()?.label(value, kind, name);
-  }
-  return value;
-}
-var QUIET = 20;
-function devRan(store2) {
-  if (store2.busy === true) {
-    store2.busy = false;
-    store2.quiet = 0;
-    return;
-  }
-  const quiet = (store2.quiet ?? 0) + 1;
-  store2.quiet = quiet;
-  if (quiet !== QUIET) {
-    return;
-  }
-  devWarnOnce(
-    `quiet-run:${store2.name}`,
-    `<${store2.name}> ran ${String(QUIET)} times and wrote nothing.
-Something it reads in a statement changes more often than what it shows. Move that read into the markup, where it is a part of its own, or move the derivation into a computed in the setup.`
-  );
-}
-function devHandedNewFunction(store2, value) {
-  if (typeof value !== "function") {
-    return;
-  }
-  devWarnOnce(
-    `new-function:${store2.name}`,
-    `<${store2.name}> hands a child a new function on every run, so that child runs again whenever this one does.
-If the handler does not depend on the run, define it in the setup.`
-  );
-}
-
-// packages/dom/src/insert.ts
-import {
-  bind,
-  createOwner,
-  signal,
-  disposeOwner,
-  getOwner,
-  onCleanup,
-  runWithOwner,
-  setOwner
-} from "@firsthandjs/core";
-var TEXT_NODE = 3;
-function isNode(value) {
-  return typeof value.nodeType === "number";
-}
-var PART = /* @__PURE__ */ Symbol("firsthand.part");
-function part(thunk) {
-  return { [PART]: true, anchor: document.createTextNode(""), thunk, owner: getOwner() };
-}
-function isDynamicChild(value) {
-  return PART in value;
-}
-function store(name = "") {
-  return { slots: [], owner: getOwner(), generation: 0, name };
-}
-function wrote(store2) {
-  store2.busy = true;
-}
-function site(store2, index) {
-  const existing = store2.slots[index];
-  if (existing !== void 0) {
-    existing.seen = store2.generation;
-    return existing;
-  }
-  const slot = { seen: store2.generation };
-  store2.slots[index] = slot;
-  return slot;
-}
-function open(store2, slot) {
-  const owner = createOwner(store2.owner);
-  slot.owner = owner;
-  return setOwner(owner);
-}
-function close(previous) {
-  setOwner(previous);
-}
-function ran(store2, value) {
-  devRan(store2);
-  const generation = store2.generation;
-  const slots = store2.slots;
-  for (let i = 0; i < slots.length; i++) {
-    const slot = slots[i];
-    if (slot === void 0 || slot.seen === generation) {
-      continue;
-    }
-    if (slot.owner !== void 0) {
-      disposeOwner(slot.owner);
-    }
-    slots[i] = void 0;
-  }
-  store2.generation = generation + 1;
-  return value;
-}
-function cell(store2, index, value) {
-  const slot = site(store2, index);
-  const existing = slot.cell;
-  if (existing === void 0) {
-    const made = signal(value);
-    slot.cell = made;
-    return made;
-  }
-  if (existing.peek() !== value) {
-    devHandedNewFunction(store2, value);
-    wrote(store2);
-    existing.value = value;
-  }
-  return existing;
-}
-function writeChild(store2, index, parent, marker, value) {
-  const slot = site(store2, index);
-  const type = typeof value;
-  if (type === "string" || type === "number") {
-    const text = String(value);
-    if (text === slot.text) {
-      return;
-    }
-    wrote(store2);
-    slot.text = text;
-    slot.node = applyChild(parent, marker, slot.node ?? null, text);
-    return;
-  }
-  slot.text = void 0;
-  if (value === slot.last) {
-    return;
-  }
-  wrote(store2);
-  slot.last = value;
-  slot.node = applyChild(parent, marker, slot.node ?? null, value);
-}
-function insert(parent, value, marker = null) {
-  if (typeof value !== "function") {
-    applyChild(parent, marker, null, value);
-    return;
-  }
-  let current = null;
-  let written;
-  bind(() => {
-    const next = value();
-    const type = typeof next;
-    if (type === "string" || type === "number") {
-      const text = String(next);
-      if (text !== written) {
-        written = text;
-        current = applyChild(parent, marker, current, text);
-      }
-      return;
-    }
-    written = void 0;
-    if (type === "function") {
-      current = clear(current);
-      insert(parent, next, marker);
-      return;
-    }
-    current = applyChild(parent, marker, current, next);
-  });
-  onCleanup(() => {
-    current = clear(current);
-  });
-}
-function applyChild(parent, marker, current, value) {
-  const type = typeof value;
-  if (value == null || type === "boolean") {
-    devPart(parent, "text");
-    return clear(current);
-  }
-  if (type === "string" || type === "number") {
-    devPart(parent, "text");
-    const text = String(value);
-    if (current !== null && !Array.isArray(current) && current.nodeType === TEXT_NODE) {
-      current.data = text;
-      return current;
-    }
-    return single(parent, marker, current, document.createTextNode(text));
-  }
-  if (type === "function") {
-    return applyChild(parent, marker, current, value());
-  }
-  if (Array.isArray(value)) {
-    const next = [];
-    const dynamic = [];
-    flatten(value, next, dynamic);
-    if (next.length === 0) {
-      return clear(current);
-    }
-    reconcile(
-      parent,
-      marker,
-      current === null ? [] : Array.isArray(current) ? current : [current],
-      next
-    );
-    for (let i = 0; i < dynamic.length; i++) {
-      const child = dynamic[i];
-      runWithOwner(child.owner ?? getOwner(), () => {
-        insert(parent, child.thunk, child.anchor);
-      });
-    }
-    return next;
-  }
-  if (isDynamicChild(value)) {
-    return applyChild(parent, marker, current, [value]);
-  }
-  if (isNode(value)) {
-    return single(parent, marker, current, value);
-  }
-  devWarnRenderedObject(value);
-  return applyChild(parent, marker, current, String(value));
-}
-function flatten(value, out, dynamic) {
-  for (let i = 0; i < value.length; i++) {
-    let item = value[i];
-    if (typeof item === "object" && item !== null && isDynamicChild(item)) {
-      out.push(item.anchor);
-      dynamic.push(item);
-      continue;
-    }
-    while (typeof item === "function") {
-      item = item();
-    }
-    if (item == null || typeof item === "boolean") {
-      continue;
-    }
-    if (Array.isArray(item)) {
-      flatten(item, out, dynamic);
-    } else if (typeof item === "object" && isNode(item)) {
-      out.push(item);
-    } else {
-      out.push(document.createTextNode(String(item)));
-    }
-  }
-}
-function detach(node) {
-  const owner = node.parentNode;
-  if (owner !== null) {
-    owner.removeChild(node);
-  }
-}
-function clear(current) {
-  if (current !== null) {
-    if (Array.isArray(current)) {
-      for (let i = 0; i < current.length; i++) {
-        detach(current[i]);
-      }
-    } else {
-      detach(current);
-    }
-  }
-  return null;
-}
-function single(parent, marker, current, node) {
-  if (current === node) {
-    return node;
-  }
-  if (current !== null && !Array.isArray(current)) {
-    parent.replaceChild(node, current);
-    return node;
-  }
-  clear(current);
-  parent.insertBefore(node, marker);
-  return node;
-}
-function reconcile(parent, marker, a, b) {
-  let aStart = 0;
-  let bStart = 0;
-  let aEnd = a.length - 1;
-  let bEnd = b.length - 1;
-  while (aStart <= aEnd && bStart <= bEnd && a[aStart] === b[bStart]) {
-    aStart++;
-    bStart++;
-  }
-  while (aStart <= aEnd && bStart <= bEnd && a[aEnd] === b[bEnd]) {
-    aEnd--;
-    bEnd--;
-  }
-  const after = bEnd + 1 < b.length ? b[bEnd + 1] : marker;
-  if (aStart > aEnd) {
-    for (let i = bStart; i <= bEnd; i++) {
-      parent.insertBefore(b[i], after);
-    }
-    return;
-  }
-  if (bStart > bEnd) {
-    for (let i = aStart; i <= aEnd; i++) {
-      parent.removeChild(a[i]);
-    }
-    return;
-  }
-  const oldIndex = /* @__PURE__ */ new Map();
-  for (let i = aStart; i <= aEnd; i++) {
-    oldIndex.set(a[i], i);
-  }
-  const middle = bEnd - bStart + 1;
-  const sources = new Int32Array(middle).fill(-1);
-  for (let j = 0; j < middle; j++) {
-    const node = b[bStart + j];
-    const found = oldIndex.get(node);
-    if (found !== void 0) {
-      sources[j] = found;
-      oldIndex.delete(node);
-    }
-  }
-  for (const node of oldIndex.keys()) {
-    parent.removeChild(node);
-  }
-  const keep = longestIncreasing(sources);
-  let k = keep.length - 1;
-  let anchor = after;
-  for (let j = middle - 1; j >= 0; j--) {
-    const node = b[bStart + j];
-    if (k >= 0 && keep[k] === j) {
-      k--;
-    } else {
-      parent.insertBefore(node, anchor);
-    }
-    anchor = node;
-  }
-}
-function longestIncreasing(sources) {
-  const length = sources.length;
-  const predecessor = new Int32Array(length).fill(-1);
-  const tails = [];
-  for (let i = 0; i < length; i++) {
-    const value = sources[i];
-    if (value === -1) {
-      continue;
-    }
-    let low = 0;
-    let high = tails.length;
-    while (low < high) {
-      const mid = low + high >> 1;
-      if (sources[tails[mid]] < value) {
-        low = mid + 1;
-      } else {
-        high = mid;
-      }
-    }
-    if (low > 0) {
-      predecessor[i] = tails[low - 1];
-    }
-    tails[low] = i;
-  }
-  const result = [];
-  let cursor = tails.length > 0 ? tails[tails.length - 1] : -1;
-  while (cursor !== -1) {
-    result.push(cursor);
-    cursor = predecessor[cursor];
-  }
-  return result.reverse();
-}
-
 // packages/dom/src/component.ts
 import {
-  signal as signal2,
-  createOwner as createOwner2,
+  signal,
+  createOwner,
   devEnterSetup,
   devExitSetup,
-  disposeOwner as disposeOwner2,
-  getOwner as getOwner2,
+  disposeOwner,
+  getOwner,
   handleError,
-  setOwner as setOwner2,
+  setOwner,
   untrack
 } from "@firsthandjs/core";
 var COMPONENT = /* @__PURE__ */ Symbol.for("firsthand.component");
@@ -474,18 +107,18 @@ function createComponent(target, props) {
   if (target.tag !== void 0) {
     return createHost(target, props);
   }
-  const owner = createOwner2(getOwner2());
+  const owner = createOwner(getOwner());
   devComponent(owner, target.name);
-  const previous = setOwner2(owner);
+  const previous = setOwner(owner);
   try {
     devEnterSetup(target.id);
     const result = untrack(() => target.setup(props));
     devExitSetup();
-    setOwner2(previous);
+    setOwner(previous);
     return result;
   } catch (error) {
     devExitSetup();
-    setOwner2(previous);
+    setOwner(previous);
     handleError(error, owner);
     return null;
   }
@@ -533,13 +166,13 @@ function elementClass(target) {
       if (!this.$standalone || this.$owner === null) {
         return;
       }
-      disposeOwner2(this.$owner);
+      disposeOwner(this.$owner);
       this.$owner = null;
     }
     attributeChangedCallback(name, _old, value) {
-      const cell2 = this.$attrs?.[name];
-      if (cell2 !== void 0) {
-        cell2.value = codecs[name]?.(value);
+      const cell = this.$attrs?.[name];
+      if (cell !== void 0) {
+        cell.value = codecs[name]?.(value);
       }
     }
   };
@@ -549,21 +182,21 @@ function attributeProps(element, codecs, cells) {
   const props = {};
   if (codecs !== void 0) {
     for (const name in codecs) {
-      const cell2 = signal2(codecs[name](element.getAttribute(name)));
-      cells[name] = cell2;
+      const cell = signal(codecs[name](element.getAttribute(name)));
+      cells[name] = cell;
       Object.defineProperty(props, name, {
         enumerable: true,
-        get: () => cell2.value
+        get: () => cell.value
       });
     }
   }
   return Object.freeze(props);
 }
 function mountHost(element, target, shadow) {
-  const owner = createOwner2(getOwner2());
+  const owner = createOwner(getOwner());
   devComponent(owner, target.name);
   element.$owner = owner;
-  const previous = setOwner2(owner);
+  const previous = setOwner(owner);
   try {
     devEnterSetup(target.id);
     const root = shadow ? element.attachShadow({ mode: "open" }) : element;
@@ -574,7 +207,7 @@ function mountHost(element, target, shadow) {
     devExitSetup();
     handleError(error, owner);
   } finally {
-    setOwner2(previous);
+    setOwner(previous);
   }
 }
 function createHost(target, props) {
@@ -587,24 +220,52 @@ function createHost(target, props) {
 // packages/dom/src/list.ts
 import {
   batch,
-  createOwner as createOwner3,
-  disposeOwner as disposeOwner3,
-  getOwner as getOwner3,
-  setOwner as setOwner3,
-  signal as signal3,
+  createOwner as createOwner2,
+  disposeOwner as disposeOwner2,
+  getOwner as getOwner2,
+  setOwner as setOwner2,
+  signal as signal2,
   untrack as untrack2
 } from "@firsthandjs/core";
 function list(each, keyOf, render) {
-  const host = createOwner3(getOwner3());
+  const host = createOwner2(getOwner2());
   let rows = /* @__PURE__ */ new Map();
+  let placed;
+  let views = false;
   return () => {
     const items = each();
+    if (views && placed !== void 0) {
+      placed.length = 0;
+      for (const row of rows.values()) {
+        for (const node of row.pieces === void 0 ? row.nodes : nodesOf(row)) {
+          placed.push(node);
+        }
+      }
+    }
     const next = /* @__PURE__ */ new Map();
     const nodes = [];
-    batch(() => {
+    nodes[FLAT] = true;
+    let pending;
+    untrack2(() => {
+      batch(() => {
+        buildRows();
+      });
+    });
+    rows = next;
+    placed = nodes;
+    if (pending !== void 0) {
+      const made = pending;
+      nodes[PENDING] = (parent) => {
+        for (const row of made) {
+          bindRow(row, parent);
+        }
+      };
+    }
+    return nodes;
+    function buildRows() {
       for (let i = 0; i < items.length; i++) {
         const item = items[i];
-        const key2 = untrack2(() => keyOf(item, i));
+        const key2 = keyOf(item, i);
         if (next.has(key2)) {
           devWarn(
             `Duplicate list key ${String(key2)}. Keys must be unique, or rows will be dropped.`
@@ -614,56 +275,108 @@ function list(each, keyOf, render) {
         let row = rows.get(key2);
         if (row === void 0) {
           row = createRow(host, item, i, render);
+          if (row.pieces !== void 0) {
+            views = true;
+            if (!bindRow(row, null)) {
+              pending = pending === void 0 ? [row] : [...pending, row];
+            }
+          }
         } else {
           rows.delete(key2);
           row.item.value = item;
           row.index.value = i;
         }
         next.set(key2, row);
-        for (let n = 0; n < row.nodes.length; n++) {
-          nodes.push(row.nodes[n]);
+        const found = row.pieces === void 0 ? row.nodes : nodesOf(row);
+        for (let n = 0; n < found.length; n++) {
+          nodes.push(found[n]);
         }
       }
-      for (const row of rows.values()) {
-        disposeOwner3(row.owner);
-      }
-    });
-    rows = next;
-    return nodes;
+      discard(() => {
+        for (const row of rows.values()) {
+          disposeOwner2(row.owner);
+        }
+      });
+    }
   };
 }
+function isNode(piece) {
+  return typeof piece.nodeType === "number";
+}
+function bindRow(row, into) {
+  const pieces = row.pieces;
+  for (const piece of pieces) {
+    if (isNode(piece)) {
+      continue;
+    }
+    const parent = into ?? hydration.current?.place(piece.child.anchor) ?? null;
+    if (parent === null) {
+      return false;
+    }
+    bindPart(piece.child, parent, (found) => {
+      piece.nodes = found;
+    });
+  }
+  return true;
+}
+function nodesOf(row) {
+  const nodes = [];
+  for (const piece of row.pieces) {
+    if (isNode(piece)) {
+      nodes.push(piece);
+    } else {
+      for (const node of piece.nodes) {
+        nodes.push(node);
+      }
+    }
+  }
+  return nodes;
+}
 function createRow(host, item, index, render) {
-  const owner = createOwner3(host);
-  const itemCell = signal3(item);
-  const indexCell = signal3(index);
-  const previous = setOwner3(owner);
-  let result;
+  const owner = createOwner2(host);
+  const itemCell = signal2(item);
+  const indexCell = signal2(index);
+  const previous = setOwner2(owner);
+  const pieces = [];
+  let parts;
   try {
-    result = untrack2(() => render(itemCell, indexCell));
-    setOwner3(previous);
-  } catch (error) {
-    setOwner3(previous);
-    throw error;
+    parts = collect(
+      untrack2(() => render(itemCell, indexCell)),
+      pieces
+    );
+  } finally {
+    setOwner2(previous);
   }
-  const nodes = [];
-  collect(result, nodes);
-  return { owner, item: itemCell, index: indexCell, nodes };
+  return parts ? { owner, item: itemCell, index: indexCell, nodes: [], pieces } : { owner, item: itemCell, index: indexCell, nodes: pieces };
 }
 function collect(value, out) {
   if (value == null || typeof value === "boolean") {
-    return;
+    return false;
   }
   if (Array.isArray(value)) {
+    let parts = false;
     for (let i = 0; i < value.length; i++) {
-      collect(value[i], out);
+      parts = collect(value[i], out) || parts;
     }
-    return;
+    return parts;
   }
-  if (typeof value === "object" && typeof value.nodeType === "number") {
-    out.push(value);
-    return;
+  if (typeof value === "function") {
+    const child = part(value);
+    out.push({ child, nodes: [child.anchor] });
+    return true;
+  }
+  if (typeof value === "object") {
+    if (isDynamicChild(value)) {
+      out.push({ child: value, nodes: [value.anchor] });
+      return true;
+    }
+    if (typeof value.nodeType === "number") {
+      out.push(value);
+      return false;
+    }
   }
   out.push(document.createTextNode(String(value)));
+  return false;
 }
 
 // packages/dom/src/events.ts
@@ -835,7 +548,9 @@ function hyphenate(name) {
 // packages/dom/src/props.ts
 function applyProp(node, name, value) {
   if (name === "class" || name === "className") {
-    if (value !== null && typeof value === "object") {
+    if (Array.isArray(value)) {
+      setClass(node, value.filter(Boolean).join(" "));
+    } else if (value !== null && typeof value === "object") {
       setClassList(node, value, remember(node, "class", value));
     } else {
       setClass(node, value);
@@ -937,19 +652,6 @@ function remember(node, slot, value) {
 export {
   setComponentAdapter,
   FirsthandComponentError,
-  label,
-  part,
-  store,
-  wrote,
-  site,
-  open,
-  close,
-  ran,
-  cell,
-  writeChild,
-  insert,
-  applyChild,
-  reconcile,
   COMPONENT,
   VIEW,
   setElementPrefix,