@source-crafter/xzor-runtime 0.1.15 → 0.1.16

package/model.js

@@ -1,6 +1,7 @@
 import {
   $inSvg,
   $isFragment,
+  $leave,
   ComponentBase,
   FINE,
   SVG,
@@ -8,7 +9,7 @@ import {
   patchIsland,
   setFineHooks,
   setRenderObserver
-} from "./index-k290gfdd.js";
+} from "./index-w2yxrgd1.js";
 
 // runtime/entity-set.ts
 class EntitySet extends Array {
@@ -226,18 +227,27 @@ var ATTR = 1;
 var REGION = 2;
 var LIST = 3;
 var ISLAND = 4;
+var KEYED = 5;
+var EFFECT = 6;
+var MEMO = 7;
 var KIND = 7;
 var QUEUED = 8;
 var MANY = 16;
 var DEAD = 32;
 var LOOSE = 64;
 var ITEM = 128;
+var OWNED = 256;
+var FRESH = 512;
 var bitOf = (index) => index === -1 ? 1 << 31 : index < 30 ? 1 << index : 1 << 30;
+var MEMOS = Symbol("xzor.fine.memos");
+var EMPTY = Symbol("xzor.fine.empty");
 var collecting;
 var holder;
 function collect(source, index) {
+  collectBits(source, bitOf(index));
+}
+function collectBits(source, bit) {
   const b = collecting;
-  const bit = bitOf(index);
   const own = b.model;
   if (own === source) {
     b.mask |= bit;
@@ -296,8 +306,31 @@ class Binding {
     return (this.flags & (QUEUED | DEAD)) !== 0 ? 0 : -1;
   }
   set at(value) {
-    if ((this.flags & DEAD) === 0)
-      this.flags = value < 0 ? this.flags & ~QUEUED : this.flags | QUEUED;
+    if ((this.flags & DEAD) !== 0)
+      return;
+    if ((this.flags & KIND) === MEMO) {
+      if (value >= 0)
+        this.flags &= ~FRESH;
+      return;
+    }
+    this.flags = value < 0 ? this.flags & ~QUEUED : this.flags | QUEUED;
+  }
+  $memo() {
+    if ((this.flags & FRESH) === 0) {
+      this.data = this.#run();
+      if (this.model !== undefined && (this.flags & DEAD) === 0)
+        this.flags |= FRESH;
+    }
+    if (collecting !== undefined) {
+      const own = this.model;
+      if ((this.flags & MANY) === 0) {
+        if (own !== undefined)
+          collectBits(own, this.mask);
+      } else
+        for (const dep of own.values())
+          collectBits(dep.model, dep.mask);
+    }
+    return this.data;
   }
   #reset() {
     this.mask = 0;
@@ -330,7 +363,7 @@ class Binding {
     }
   }
   #loose() {
-    if ((this.flags & (LOOSE | DEAD)) !== 0 || holder === undefined)
+    if ((this.flags & (LOOSE | DEAD)) !== 0 || (this.flags & KIND) >= EFFECT || holder === undefined)
       return;
     this.flags |= LOOSE;
     holder.ctx.loose.push(this);
@@ -365,14 +398,19 @@ class Binding {
         return;
       }
       case ATTR:
+        if ((flags & OWNED) !== 0)
+          return ownAttr(this.node, this.data, this.#run());
         return setAttr(this.node, (flags & ITEM) !== 0 ? this.read.$n : this.data, this.#run());
       case REGION: {
         const region = this.data;
         disposeAll(region);
         const end = this.node;
         const parent = end.parentNode;
-        while (region.start.nextSibling !== end)
-          parent.removeChild(region.start.nextSibling);
+        for (let node = region.start.nextSibling;node !== end; ) {
+          const next = node.nextSibling;
+          $leave(node);
+          node = next;
+        }
         const frag = document.createDocumentFragment();
         within(region, () => this.#run(frag));
         parent.insertBefore(frag, end);
@@ -380,9 +418,17 @@ class Binding {
       }
       case LIST:
         return reconcile(this, this.#run());
+      case KEYED: {
+        const keyed = this.data;
+        keyed.order = this.#run();
+        return;
+      }
       case ISLAND:
+      case EFFECT:
         this.#run();
         return;
+      case MEMO:
+        return;
     }
   }
   #becomeIsland() {
@@ -409,13 +455,14 @@ class Binding {
     const kind = this.flags & KIND;
     if (kind === REGION)
       disposeAll(this.data);
-    else if (kind === LIST)
+    else if (kind === LIST || kind === KEYED)
       for (const row of this.data.order)
         disposeAll(row);
     else if (kind === ISLAND) {
       disposeIsland(this.data.tree);
       this.data.tree = [];
-    }
+    } else if ((this.flags & OWNED) !== 0)
+      undoAttr(this.node, this.data);
     this.#reset();
     this.#sweep();
     this.flags = DEAD;
@@ -448,6 +495,18 @@ function afterHandler(ctx, result) {
   if (result instanceof Promise)
     result.then(() => refreshLoose(ctx));
 }
+function untracked(run) {
+  const prev = collecting;
+  const reader = Model.$reader;
+  collecting = undefined;
+  Model.$reader = undefined;
+  try {
+    return run();
+  } finally {
+    collecting = prev;
+    Model.$reader = reader;
+  }
+}
 function within(h, run) {
   const prev = holder;
   holder = h;
@@ -471,13 +530,18 @@ function disposeAll(h) {
 function refreshAll(h) {
   for (let b = h.bindings;b !== undefined; b = b.next) {
     b.stateHasChanged();
-    if ((b.flags & KIND) === LIST)
+    const kind = b.flags & KIND;
+    if (kind === LIST || kind === KEYED)
       for (const row of b.data.order)
         refreshAll(row);
   }
 }
 var textOf = (value) => value === null || value === undefined || value === false ? "" : String(value);
 function setAttr(el, name, value) {
+  if (typeof value === "boolean" && name.startsWith("aria-"))
+    value = String(value);
+  if (name.startsWith("class:"))
+    return void el.classList.toggle(name.slice(6), !!value);
   if (name.charCodeAt(0) === 45 && name.charCodeAt(1) === 45) {
     const style = el.style;
     const text2 = value === null || value === undefined || value === false ? "" : String(value);
@@ -504,48 +568,68 @@ function setAttr(el, name, value) {
   else if (name === "checked" && "checked" in el)
     el.checked = true;
 }
+function ownAttr(el, s, value) {
+  if (s.name !== "class") {
+    if (s.prev === undefined)
+      s.prev = el.getAttribute(s.name);
+    return setAttr(el, s.name, value);
+  }
+  const text = value === null || value === undefined || value === false || value === true ? "" : String(value);
+  if (text === s.text)
+    return;
+  s.text = text;
+  for (const t of s.added)
+    el.classList.remove(t);
+  s.added = [];
+  for (const t of text.split(/\s+/))
+    if (t !== "" && !el.classList.contains(t)) {
+      el.classList.add(t);
+      s.added.push(t);
+    }
+}
+function undoAttr(el, s) {
+  if (s.name === "class")
+    for (const t of s.added)
+      el.classList.remove(t);
+  else if (s.prev !== undefined)
+    setAttr(el, s.name, s.prev);
+}
 function removeRange(head, tail) {
-  const parent = head.parentNode;
   for (let node = head;; ) {
     const next = node.nextSibling;
-    parent.removeChild(node);
+    $leave(node);
     if (node === tail)
       return;
     node = next;
   }
 }
-function reconcile(list, items) {
-  const state = list.data;
-  const end = list.node;
+function newRow(ctx, item, reads, build) {
+  const frag = document.createDocumentFragment();
+  const row = { bindings: undefined, ctx, head: frag, tail: frag, item, reads };
+  within(row, () => build(frag, item));
+  seal(row, frag);
+  return row;
+}
+function seal(row, frag) {
+  if (frag.firstChild === null)
+    frag.appendChild(document.createComment(""));
+  row.head = frag.firstChild;
+  row.tail = frag.lastChild;
+}
+function dropRow(row) {
+  disposeAll(row);
+  removeRange(row.head, row.tail);
+}
+function place(end, old, order) {
   const parent = end.parentNode;
-  const next = Array.isArray(items) ? items : [...items];
-  const keep = new Set(next);
-  for (const [item, row] of state.rows)
-    if (!keep.has(item)) {
-      disposeAll(row);
-      removeRange(row.head, row.tail);
-      state.rows.delete(item);
-    }
   let cursor = end;
-  for (const row of state.order)
+  for (const row of old)
     if (row.head.parentNode === parent) {
       cursor = row.head;
       break;
     }
-  const order = [];
-  for (const item of next) {
-    let row = state.rows.get(item);
-    if (row === undefined) {
-      const frag = document.createDocumentFragment();
-      const made = { bindings: undefined, ctx: state.ctx, head: frag, tail: frag, item, reads: state.reads };
-      within(made, () => state.build(frag, item));
-      if (frag.firstChild === null)
-        frag.appendChild(document.createComment(""));
-      made.head = frag.firstChild;
-      made.tail = frag.lastChild;
-      parent.insertBefore(frag, cursor);
-      state.rows.set(item, row = made);
-    } else if (row.head !== cursor) {
+  for (const row of order) {
+    if (row.head !== cursor) {
       for (let node = row.head;; ) {
         const after = node.nextSibling;
         parent.insertBefore(node, cursor);
@@ -555,10 +639,114 @@ function reconcile(list, items) {
       }
     } else
       cursor = row.tail.nextSibling;
+  }
+}
+var duplicate = (key) => new Error(`xzor: duplicate @key ${String(key)}`);
+function reconcile(list, items) {
+  const state = list.data;
+  const rows = state.rows;
+  let next = Array.isArray(items) ? items : [...items];
+  if (next.length === 0 && state.empty !== undefined)
+    next = [EMPTY];
+  const named = state.key === undefined ? $keyName(next[0]) : undefined;
+  const keyOf = state.key ?? (named === undefined ? undefined : (item) => item[named]);
+  let keys = next;
+  if (keyOf === undefined) {
+    const keep = new Set(next);
+    for (const [item, row] of rows)
+      if (!keep.has(item)) {
+        dropRow(row);
+        rows.delete(item);
+      }
+  } else {
+    const at = new Map;
+    keys = next.map((item) => item === EMPTY ? EMPTY : keyOf(item));
+    for (let i = 0;i < next.length; i++) {
+      if (at.has(keys[i]))
+        throw duplicate(keys[i]);
+      at.set(keys[i], next[i]);
+    }
+    for (const [key, row] of rows)
+      if (!at.has(key) || at.get(key) !== row.item) {
+        dropRow(row);
+        rows.delete(key);
+      }
+  }
+  const order = [];
+  for (let i = 0;i < next.length; i++) {
+    const item = next[i];
+    let row = rows.get(keys[i]);
+    if (row === undefined) {
+      row = item === EMPTY ? newRow(state.ctx, item, undefined, state.empty) : newRow(state.ctx, item, state.reads, state.build);
+      rows.set(keys[i], row);
+    }
     order.push(row);
   }
+  place(list.node, state.order, order);
   state.order = order;
 }
+function sameValues(a, b) {
+  if (a.length !== b.length)
+    return false;
+  for (let i = 0;i < a.length; i++)
+    if (!Object.is(a[i], b[i]))
+      return false;
+  return true;
+}
+function runKeyed(s, end, run) {
+  const order = [];
+  const seen = new Set;
+  const outer = holder;
+  let building;
+  const finish = () => {
+    if (building === undefined)
+      return;
+    seal(building, building.head);
+    building = undefined;
+    holder = outer;
+  };
+  try {
+    run((key, values) => {
+      finish();
+      if (seen.has(key))
+        throw duplicate(key);
+      seen.add(key);
+      let row = s.rows.get(key);
+      if (row !== undefined && !sameValues(row.item, values)) {
+        dropRow(row);
+        row = undefined;
+      }
+      if (row !== undefined) {
+        order.push(row);
+        return;
+      }
+      const frag = document.createDocumentFragment();
+      row = { bindings: undefined, ctx: s.ctx, head: frag, tail: frag, item: values, reads: undefined };
+      s.rows.set(key, row);
+      order.push(row);
+      building = row;
+      holder = row;
+      return frag;
+    });
+    finish();
+  } finally {
+    holder = outer;
+  }
+  if (order.length === 0 && s.empty !== undefined) {
+    let row = s.rows.get(EMPTY);
+    if (row === undefined)
+      s.rows.set(EMPTY, row = newRow(s.ctx, EMPTY, undefined, s.empty));
+    order.push(row);
+    seen.add(EMPTY);
+  }
+  for (const [key, row] of s.rows)
+    if (!seen.has(key)) {
+      dropRow(row);
+      s.rows.delete(key);
+    }
+  place(end, s.order, order);
+  return order;
+}
 function make(spec, svg = false) {
   if (spec === null)
     return document.createComment("");
@@ -616,8 +804,8 @@ function region(start, end, build, item, flags) {
   const region2 = { bindings: undefined, ctx: holder.ctx, start, item };
   track(new Binding(REGION | flags, end, build, region2));
 }
-function list(end, items, reads, build) {
-  const state = { build, ctx: holder.ctx, rows: new Map, order: [], reads };
+function list(end, items, reads, build, empty, key) {
+  const state = { build, ctx: holder.ctx, rows: new Map, order: [], reads, empty, key };
   track(new Binding(LIST, end, items, state));
 }
 var anchor = (parent) => parent.appendChild(document.createComment(""));
@@ -682,12 +870,100 @@ var fine = {
     read.$n = name;
     track(new Binding(ATTR | ITEM, el, read, row));
   },
+  attrOf(el, name, read) {
+    track(new Binding(ATTR | OWNED, el, read, { name, text: undefined, prev: undefined, added: [] }));
+  },
   region(parent, build) {
     region(anchor(parent), anchor(parent), build, undefined, 0);
   },
   regionAt(end, build) {
     region(end.previousSibling, end, build, undefined, 0);
   },
+  textOnce(node, read) {
+    node.data = textOf(untracked(read));
+  },
+  onceAt(end, build) {
+    const frag = document.createDocumentFragment();
+    untracked(() => build(frag));
+    end.parentNode.insertBefore(frag, end);
+  },
+  set(el, name, value) {
+    setAttr(el, name, value);
+  },
+  setText(node, value) {
+    node.data = textOf(value);
+  },
+  anchor,
+  memo(cls, names) {
+    const proto = cls.prototype;
+    names.forEach((name, i) => {
+      const desc = Object.getOwnPropertyDescriptor(proto, name);
+      const get = desc?.get;
+      if (get === undefined)
+        return;
+      const reader = Symbol(name);
+      Object.defineProperty(proto, name, {
+        ...desc,
+        get() {
+          const memo = this[MEMOS]?.[i];
+          if (memo !== undefined)
+            return memo.$memo();
+          const by = collecting;
+          if (by === undefined)
+            return get.call(this);
+          const first = this[reader];
+          if (first === undefined || first === by || (first.flags & DEAD) !== 0) {
+            this[reader] = by;
+            return get.call(this);
+          }
+          this[reader] = undefined;
+          const b = new Binding(MEMO | QUEUED, null, () => get.call(this), undefined);
+          (this[MEMOS] ??= [])[i] = b;
+          return b.$memo();
+        }
+      });
+    });
+  },
+  awaitAt(end, read, pending, then, fail) {
+    const state = { phase: 0, value: undefined, seq: 0 };
+    const view = new Binding(REGION, end, (p) => {
+      if (state.phase === 0)
+        pending?.(p);
+      else if (state.phase === 1)
+        then?.(p, state.value);
+      else
+        fail?.(p, state.value);
+    }, { bindings: undefined, ctx: holder.ctx, start: end.previousSibling, item: undefined });
+    const show = (phase, value) => {
+      if ((view.flags & DEAD) !== 0)
+        return;
+      state.phase = phase;
+      state.value = value;
+      view.stateHasChanged();
+    };
+    track(view);
+    track(new Binding(EFFECT, end, () => {
+      const result = read();
+      const seq = ++state.seq;
+      if (typeof result?.then !== "function")
+        return show(1, result);
+      if (state.phase !== 0)
+        show(0, undefined);
+      result.then((value) => seq === state.seq && show(1, value), (error) => {
+        if (seq !== state.seq)
+          return;
+        show(2, error);
+        if (fail === undefined)
+          queueMicrotask(() => {
+            throw error;
+          });
+      });
+    }, undefined));
+  },
+  anchors(parent) {
+    anchor(parent);
+    return anchor(parent);
+  },
   regionItem(end, i) {
     const row = holder;
     region(end.previousSibling, end, row.reads[i], row.item, ITEM);
@@ -695,8 +971,12 @@ var fine = {
   list(parent, items, build) {
     list(anchor(parent), items, undefined, build);
   },
-  listAt(end, items, reads, build) {
-    list(end, items, reads, build);
+  listAt(end, items, reads, build, empty, key) {
+    list(end, items, reads, build, empty, key);
+  },
+  keyedAt(end, run, empty) {
+    const state = { ctx: holder.ctx, rows: new Map, order: [], empty };
+    track(new Binding(KEYED, end, () => runKeyed(state, end, run), state));
   },
   island(parent, build) {
     fine.islandAt(anchor(parent), build);
@@ -765,8 +1045,22 @@ setFineHooks({
     root.end = frag.appendChild(document.createComment(""));
     return root;
   },
-  refresh: (root) => refreshAll(root),
-  dispose: (root) => disposeAll(root),
+  refresh(root) {
+    const memos = root.ctx.owner[MEMOS];
+    if (memos !== undefined) {
+      for (const m of memos)
+        if (m !== undefined)
+          m.flags &= ~FRESH;
+    }
+    refreshAll(root);
+  },
+  dispose(root) {
+    const memos = root.ctx.owner[MEMOS];
+    if (memos !== undefined)
+      for (const m of memos)
+        m?.dispose();
+    disposeAll(root);
+  },
   handled(owner, result) {
     const ctx = owner[CTX];
     if (ctx !== undefined)
@@ -804,6 +1098,7 @@ var meta = Symbol("xzor.model.meta");
 var empty = { names: [], tracked: new Set, persisted: [], ignored: new Set, validators: [], serialized: [] };
 var pendingPersist;
 var pendingIgnored;
+var pendingKey;
 var pendingValidators;
 var silent = 0;
 function metaOf(model) {
@@ -835,8 +1130,10 @@ class Model extends EventTarget {
       tracked: new Set(all),
       persisted: base ? base.persisted.slice() : [],
       ignored: new Set(base?.ignored),
-      validators: base ? base.validators.map(([name, list2]) => [name, list2.slice()]) : []
+      validators: base ? base.validators.map(([name, list2]) => [name, list2.slice()]) : [],
+      key: pendingKey ?? base?.key
     };
+    pendingKey = undefined;
     if (pendingValidators) {
       for (const [name, list2] of pendingValidators) {
         const known = own.validators.find((entry) => entry[0] === name);
@@ -1230,6 +1527,12 @@ function Ignore(_member, context) {
   (pendingIgnored ??= []).push(context.name);
 }
 function Untracked(_value, _context) {}
+function Key(_member, context) {
+  pendingKey = context.name;
+}
+function $keyName(item) {
+  return item instanceof Model ? metaOf(item).key : undefined;
+}
 function isLike(a, b) {
   return Model.same(a, b);
 }
@@ -1440,10 +1743,12 @@ setRenderObserver({
 });
 export {
   $flush,
+  $keyName,
   $notify,
   EntitySet,
   FineComponent,
   Ignore,
+  Key,
   Model,
   ModelChangeEvent,
   Persist,
@@ -1465,5 +1770,5 @@ export {
   requiredIdValue
 };
 
-//# debugId=1D6B4E24F03EAD3F64756E2164756E21
+//# debugId=55A54F7D726CA15364756E2164756E21
 //# sourceMappingURL=model.js.map