@firsthandjs/dom 0.9.0 → 0.10.0

package/dist/{dev-chunk-HTXIHAW7.js → dev-chunk-U46CIJCO.js}

@@ -33,30 +33,30 @@ function label(value, kind, name) {
   return value;
 }
 var QUIET = 20;
-function devRan(store2) {
-  if (store2.busy === true) {
-    store2.busy = false;
-    store2.quiet = 0;
+function devRan(store) {
+  if (store.busy === true) {
+    store.busy = false;
+    store.quiet = 0;
     return;
   }
-  const quiet = (store2.quiet ?? 0) + 1;
-  store2.quiet = quiet;
+  const quiet = (store.quiet ?? 0) + 1;
+  store.quiet = quiet;
   if (quiet !== QUIET) {
     return;
   }
   devWarnOnce(
-    `quiet-run:${store2.name}`,
-    `<${store2.name}> ran ${String(QUIET)} times and wrote nothing.
+    `quiet-run:${store.name}`,
+    `<${store.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) {
+function devHandedNewFunction(store, 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.
+    `new-function:${store.name}`,
+    `<${store.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.`
   );
 }
@@ -91,17 +91,152 @@ function next(node) {
   return claimer === null ? sibling : claimer.step(sibling);
 }
 
+// packages/dom/src/reconcile.ts
+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;
+  }
+  reorder(parent, b, after, { a, aStart, aEnd, bStart, bEnd });
+}
+function reorder(parent, b, after, middle) {
+  const count = middle.bEnd - middle.bStart + 1;
+  const sources = sourcesOf(parent, b, middle);
+  const keep = longestIncreasing(sources);
+  let k = keep.length - 1;
+  let anchor = after;
+  for (let j = count - 1; j >= 0; j--) {
+    const node = b[middle.bStart + j];
+    if (k >= 0 && keep[k] === j) {
+      k--;
+    } else {
+      parent.insertBefore(node, anchor);
+    }
+    anchor = node;
+  }
+}
+function sourcesOf(parent, b, middle) {
+  const { a, aStart, aEnd, bStart, bEnd } = middle;
+  const oldIndex = /* @__PURE__ */ new Map();
+  for (let i = aStart; i <= aEnd; i++) {
+    oldIndex.set(a[i], i);
+  }
+  const count = bEnd - bStart + 1;
+  const sources = new Int32Array(count).fill(-1);
+  for (let j = 0; j < count; 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);
+  }
+  return sources;
+}
+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/insert.ts
+import { bind, getOwner, onCleanup, runWithOwner } from "@firsthandjs/core";
+
+// packages/dom/src/nodes.ts
+var TEXT_NODE = 3;
+function isNode(value) {
+  return typeof value.nodeType === "number";
+}
+function detach(node) {
+  const owner = node.parentNode;
+  if (owner !== null) {
+    owner.removeChild(node);
+  }
+}
+function clearIn(parent, marker, current) {
+  if (marker === null && Array.isArray(current) && current.length > 1 && parent.childNodes.length === current.length) {
+    parent.textContent = "";
+    return null;
+  }
+  return clear(current);
+}
+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;
+}
+
 // packages/dom/src/insert.ts
-import {
-  bind,
-  createOwner,
-  signal,
-  disposeOwner,
-  getOwner,
-  onCleanup,
-  runWithOwner,
-  setOwner
-} from "@firsthandjs/core";
 var discarding = 0;
 function discard(body) {
   discarding++;
@@ -111,124 +246,26 @@ function discard(body) {
     discarding--;
   }
 }
-var TEXT_NODE = 3;
-function isNode(value) {
-  return typeof value.nodeType === "number";
-}
 var PART = /* @__PURE__ */ Symbol("firsthand.part");
 var FLAT = /* @__PURE__ */ Symbol("firsthand.flat");
+var PENDING = /* @__PURE__ */ Symbol("firsthand.pending");
+var mounted = /* @__PURE__ */ new WeakSet();
 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);
-  if (slot.node === void 0 && hydration.current !== null) {
-    const claimed = hydration.current.claim(parent, marker);
-    if (claimed !== null) {
-      if (typeof value === "object" && value !== null && isDynamicChild(value)) {
-        slot.last = value;
-        hydration.current.keep(slot, parent, value.anchor, claimed);
-        runWithOwner(value.owner, () => {
-          insert(parent, value.thunk, value.anchor);
-        });
-        return;
-      }
-      slot.node = claimed.nodes;
-      slot.text = claimed.text;
-    }
-  }
-  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, seed) {
+function insert(parent, value, marker = null, options) {
   if (typeof value !== "function") {
     applyChild(parent, marker, null, value);
     return;
   }
-  let current = null;
-  let written;
-  const claimed = seed !== void 0 ? seed : hydration.current === null ? null : hydration.current.claim(parent, marker);
+  const claimed = claimFor(parent, marker, options?.seed);
+  let current = claimed === null ? null : claimed.nodes;
+  let written = claimed?.text;
   let adopting = claimed !== null;
-  if (claimed !== null) {
-    current = claimed.nodes;
-    written = claimed.text;
-  }
-  const body = () => {
+  const run = () => {
     const next2 = value();
     const type = typeof next2;
     if (type === "string" || type === "number") {
@@ -241,29 +278,45 @@ function insert(parent, value, marker = null, seed) {
     }
     written = void 0;
     if (type === "function") {
-      if (adopting) {
-        current = null;
-        insert(parent, next2, marker, claimed);
-        return;
-      }
-      current = clear(current);
-      insert(parent, next2, marker, null);
+      current = adopting ? null : clear(current);
+      insert(parent, next2, marker, { seed: adopting ? claimed : null });
       return;
     }
     current = applyChild(parent, marker, current, next2);
   };
-  if (claimed === null) {
-    bind(body);
-  } else {
-    hydration.current.within(claimed.region, () => {
-      bind(body);
-    });
-  }
+  const report = options?.report;
+  bindIn(
+    claimed,
+    report === void 0 ? run : () => {
+      run();
+      report(nodesOf(current, marker));
+    }
+  );
   adopting = false;
   onCleanup(() => {
     current = discarding > 0 ? null : clear(current);
   });
 }
+function nodesOf(current, anchor) {
+  const nodes = current === null ? [] : Array.isArray(current) ? [...current] : [current];
+  nodes.push(anchor);
+  return nodes;
+}
+function claimFor(parent, marker, seed) {
+  if (seed !== void 0) {
+    return seed;
+  }
+  return hydration.current === null ? null : hydration.current.claim(parent, marker);
+}
+function bindIn(claimed, body) {
+  if (claimed === null) {
+    bind(body);
+    return;
+  }
+  hydration.current.within(claimed.region, () => {
+    bind(body);
+  });
+}
 function applyChild(parent, marker, current, value) {
   const type = typeof value;
   if (value == null || type === "boolean") {
@@ -279,45 +332,17 @@ function applyChild(parent, marker, current, value) {
     }
     return single(parent, marker, current, document.createTextNode(text));
   }
-  if (type === "function") {
+  return applyOther(parent, marker, current, value);
+}
+function applyOther(parent, marker, current, value) {
+  if (typeof value === "function") {
     return applyChild(parent, marker, current, value());
   }
   if (Array.isArray(value)) {
-    if (FLAT in value) {
-      const rows = value;
-      if (rows.length === 0) {
-        return clearIn(parent, marker, current);
-      }
-      reconcile(
-        parent,
-        marker,
-        current === null ? [] : Array.isArray(current) ? current : [current],
-        rows
-      );
-      return rows;
-    }
-    const next2 = [];
-    const dynamic = [];
-    flatten(value, next2, dynamic);
-    if (next2.length === 0) {
-      return clearIn(parent, marker, current);
-    }
-    reconcile(
-      parent,
-      marker,
-      current === null ? [] : Array.isArray(current) ? current : [current],
-      next2
-    );
-    for (let i = 0; i < dynamic.length; i++) {
-      const child = dynamic[i];
-      runWithOwner(child.owner ?? getOwner(), () => {
-        insert(parent, child.thunk, child.anchor);
-      });
-    }
-    return next2;
+    return applyArray(parent, marker, current, value);
   }
   if (isDynamicChild(value)) {
-    return applyChild(parent, marker, current, [value]);
+    return applyArray(parent, marker, current, [value]);
   }
   if (isNode(value)) {
     return single(parent, marker, current, value);
@@ -325,6 +350,43 @@ function applyChild(parent, marker, current, value) {
   devWarnRenderedObject(value);
   return applyChild(parent, marker, current, String(value));
 }
+function asList(current) {
+  return current === null ? [] : Array.isArray(current) ? current : [current];
+}
+function applyArray(parent, marker, current, value) {
+  if (FLAT in value) {
+    const rows = value;
+    if (rows.length === 0) {
+      return clearIn(parent, marker, current);
+    }
+    reconcile(parent, marker, asList(current), rows);
+    value[PENDING]?.(parent);
+    return rows;
+  }
+  const next2 = [];
+  const dynamic = [];
+  flatten(value, next2, dynamic);
+  if (next2.length === 0) {
+    return clearIn(parent, marker, current);
+  }
+  reconcile(parent, marker, asList(current), next2);
+  for (let i = 0; i < dynamic.length; i++) {
+    bindPart(dynamic[i], parent);
+  }
+  return next2;
+}
+function bindPart(child, parent, report) {
+  if (mounted.has(child)) {
+    return;
+  }
+  mounted.add(child);
+  runWithOwner(child.owner ?? getOwner(), () => {
+    insert(parent, child.thunk, child.anchor, report === void 0 ? void 0 : { report });
+    onCleanup(() => {
+      mounted.delete(child);
+    });
+  });
+}
 function flatten(value, out, dynamic) {
   for (let i = 0; i < value.length; i++) {
     let item = value[i];
@@ -348,131 +410,6 @@ function flatten(value, out, dynamic) {
     }
   }
 }
-function detach(node) {
-  const owner = node.parentNode;
-  if (owner !== null) {
-    owner.removeChild(node);
-  }
-}
-function clearIn(parent, marker, current) {
-  if (marker === null && Array.isArray(current) && current.length > 1 && parent.childNodes.length === current.length) {
-    parent.textContent = "";
-    return null;
-  }
-  return clear(current);
-}
-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();
-}
 
 export {
   devWarn,
@@ -480,22 +417,19 @@ export {
   devPart,
   devComponent,
   label,
+  devRan,
+  devHandedNewFunction,
   devHydrationMismatch,
   hydration,
   first,
   next,
+  reconcile,
   discard,
   FLAT,
+  PENDING,
   part,
-  store,
-  wrote,
-  site,
-  open,
-  close,
-  ran,
-  cell,
-  writeChild,
+  isDynamicChild,
   insert,
   applyChild,
-  reconcile
+  bindPart
 };

package/dist/hydrate.d.ts

@@ -86,6 +86,17 @@ export declare function adopt(tag: string): Node | null;
  * and the caller renders it from nothing instead.
  */
 export declare function claimRegion(parent: Node, marker: Node | null): Claimed | null;
+/**
+ * Puts an anchor where hydration has got to, and hands back its parent.
+ *
+ * A keyed list's row that is a view is bound here rather than with the rest,
+ * because by then the reconciler would have put the list's anchors where the
+ * server's rows are and taken the rows out. The anchor goes in at the point
+ * the region has reached, and the row runs there — which adopts the nodes the
+ * server sent for it, in row order, because that is the order the markup is
+ * in.
+ */
+export declare function place(anchor: Node): Node | null;
 /** Makes `region` the one nodes are adopted from while `body` runs. */
 export declare function within<T>(region: Region, body: () => T): T;
 //# sourceMappingURL=hydrate.d.ts.map

package/dist/hydrate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAa,KAAK,OAAO,EAAe,KAAK,MAAM,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AA0B3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,SAAS,GAAE,UAA0B,GAAG,OAAO,CAIxF;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAgBhE;AAaD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAW9C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAqD7E;AAED,uEAAuE;AACvE,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAQ1D"}
+{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAa,KAAK,OAAO,EAAe,KAAK,MAAM,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AA0B3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,SAAS,GAAE,UAA0B,GAAG,OAAO,CAIxF;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAgBhE;AAaD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAW9C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAe7E;AA+DD;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAK/C;AAED,uEAAuE;AACvE,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAQ1D"}