@source-crafter/xzor-runtime 0.1.16 → 0.1.18

package/model.js

@@ -8,8 +8,9 @@ import {
   disposeIsland,
   patchIsland,
   setFineHooks,
-  setRenderObserver
-} from "./index-w2yxrgd1.js";
+  setRenderObserver,
+  setTracking
+} from "./index-nxzr7r51.js";
 
 // runtime/entity-set.ts
 class EntitySet extends Array {
@@ -238,6 +239,10 @@ var LOOSE = 64;
 var ITEM = 128;
 var OWNED = 256;
 var FRESH = 512;
+var SHOW = 1024;
+var PAUSE = 2048;
+var PAUSED = 4096;
+var STALE = 8192;
 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");
@@ -363,7 +368,7 @@ class Binding {
     }
   }
   #loose() {
-    if ((this.flags & (LOOSE | DEAD)) !== 0 || (this.flags & KIND) >= EFFECT || holder === undefined)
+    if ((this.flags & (LOOSE | DEAD | PAUSE)) !== 0 || (this.flags & KIND) >= EFFECT || holder === undefined)
       return;
     this.flags |= LOOSE;
     holder.ctx.loose.push(this);
@@ -384,8 +389,13 @@ class Binding {
   }
   stateHasChanged() {
     const flags = this.flags;
-    if ((flags & DEAD) !== 0)
+    if ((flags & (DEAD | PAUSED)) !== 0) {
+      if ((flags & DEAD) === 0)
+        this.flags |= STALE;
       return;
+    }
+    if ((flags & SHOW) !== 0)
+      return this.#show();
     switch (flags & KIND) {
       case TEXT: {
         const value = this.#run();
@@ -403,6 +413,13 @@ class Binding {
         return setAttr(this.node, (flags & ITEM) !== 0 ? this.read.$n : this.data, this.#run());
       case REGION: {
         const region = this.data;
+        const branch = region.branch;
+        if (branch !== undefined) {
+          const index = this.#run();
+          if (index === region.index)
+            return;
+          region.index = index;
+        }
         disposeAll(region);
         const end = this.node;
         const parent = end.parentNode;
@@ -412,7 +429,7 @@ class Binding {
           node = next;
         }
         const frag = document.createDocumentFragment();
-        within(region, () => this.#run(frag));
+        within(region, () => branch !== undefined ? untracked(() => branch(frag)) : this.#run(frag));
         parent.insertBefore(frag, end);
         return;
       }
@@ -431,6 +448,36 @@ class Binding {
         return;
     }
   }
+  #show() {
+    const show = this.data;
+    const index = this.#run();
+    if (index === show.index)
+      return;
+    const shown = show.branches[show.index];
+    if (shown !== undefined)
+      hideBranch(shown);
+    show.index = index;
+    let branch = show.branches[index];
+    if (branch !== undefined)
+      return showBranch(branch);
+    branch = { bindings: undefined, ctx: show.ctx, start: show.start, item: undefined, branch: undefined, index: -1, first: null, els: [], display: [] };
+    show.branches[index] = branch;
+    const frag = document.createDocumentFragment();
+    within(branch, () => untracked(() => show.build(frag)));
+    branch.first = frag.firstChild;
+    for (let node = frag.firstChild;node !== null; node = node.nextSibling)
+      if (node.nodeType === 1)
+        branch.els.push(node);
+    let before = this.node;
+    for (let i = index + 1;i < show.branches.length; i++) {
+      const next = show.branches[i]?.first;
+      if (next) {
+        before = next;
+        break;
+      }
+    }
+    before.parentNode.insertBefore(frag, before);
+  }
   #becomeIsland() {
     const read = this.read;
     const h = this.data;
@@ -453,7 +500,10 @@ class Binding {
     if ((this.flags & DEAD) !== 0)
       return;
     const kind = this.flags & KIND;
-    if (kind === REGION)
+    if ((this.flags & SHOW) !== 0)
+      for (const branch of this.data.branches)
+        branch !== undefined && disposeAll(branch);
+    else if (kind === REGION)
       disposeAll(this.data);
     else if (kind === LIST || kind === KEYED)
       for (const row of this.data.order)
@@ -523,19 +573,92 @@ function track(b) {
   b.stateHasChanged();
 }
 function disposeAll(h) {
-  for (let b = h.bindings;b !== undefined; b = b.next)
+  let loose = false;
+  for (let b = h.bindings;b !== undefined; b = b.next) {
+    if ((b.flags & LOOSE) !== 0)
+      loose = true;
     b.dispose();
+  }
   h.bindings = undefined;
+  if (loose)
+    sweepLoose(h.ctx);
+}
+function sweepLoose(ctx) {
+  if (ctx.sweep)
+    return;
+  ctx.sweep = true;
+  queueMicrotask(() => {
+    ctx.sweep = false;
+    const loose = ctx.loose;
+    let kept = 0;
+    for (const b of loose)
+      if ((b.flags & DEAD) === 0)
+        loose[kept++] = b;
+    loose.length = kept;
+  });
 }
 function refreshAll(h) {
   for (let b = h.bindings;b !== undefined; b = b.next) {
-    b.stateHasChanged();
     const kind = b.flags & KIND;
-    if (kind === LIST || kind === KEYED)
+    const kept = kind === REGION ? b.data.index : -1;
+    b.stateHasChanged();
+    if ((b.flags & SHOW) !== 0)
+      for (const branch of b.data.branches)
+        branch !== undefined && refreshAll(branch);
+    else if (kind === LIST || kind === KEYED)
       for (const row of b.data.order)
         refreshAll(row);
+    else if (kept !== -1 && kept === b.data.index)
+      refreshAll(b.data);
   }
 }
+function under(b, f) {
+  const kind = b.flags & KIND;
+  if ((b.flags & SHOW) !== 0)
+    for (const branch of b.data.branches)
+      branch !== undefined && f(branch);
+  else if (kind === REGION)
+    f(b.data);
+  else if (kind === LIST || kind === KEYED)
+    for (const row of b.data.order)
+      f(row);
+}
+function pauseIn(h) {
+  for (let b = h.bindings;b !== undefined; b = b.next) {
+    if ((b.flags & PAUSE) !== 0)
+      under(b, freeze);
+    else
+      under(b, pauseIn);
+  }
+}
+function freeze(h) {
+  for (let b = h.bindings;b !== undefined; b = b.next) {
+    b.flags |= PAUSED;
+    under(b, freeze);
+  }
+}
+function thaw(h) {
+  for (let b = h.bindings;b !== undefined; b = b.next) {
+    const stale = (b.flags & STALE) !== 0;
+    b.flags &= ~(PAUSED | STALE);
+    if (stale)
+      b.stateHasChanged();
+    under(b, thaw);
+  }
+}
+function hideBranch(branch) {
+  for (let i = 0;i < branch.els.length; i++) {
+    const style = branch.els[i].style;
+    branch.display[i] = style.display;
+    style.display = "none";
+  }
+  pauseIn(branch);
+}
+function showBranch(branch) {
+  for (let i = 0;i < branch.els.length; i++)
+    branch.els[i].style.display = branch.display[i] ?? "";
+  thaw(branch);
+}
 var textOf = (value) => value === null || value === undefined || value === false ? "" : String(value);
 function setAttr(el, name, value) {
   if (typeof value === "boolean" && name.startsWith("aria-"))
@@ -666,11 +789,21 @@ function reconcile(list, items) {
         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) {
+    for (const [key, row] of rows) {
+      if (!at.has(key)) {
         dropRow(row);
         rows.delete(key);
+        continue;
       }
+      const item = at.get(key);
+      if (item === row.item)
+        continue;
+      if (state.build.length > 1) {
+        dropRow(row);
+        rows.delete(key);
+      } else
+        retake(row, item);
+    }
   }
   const order = [];
   for (let i = 0;i < next.length; i++) {
@@ -685,6 +818,16 @@ function reconcile(list, items) {
   place(list.node, state.order, order);
   state.order = order;
 }
+function retake(row, item) {
+  row.item = item;
+  for (let b = row.bindings;b !== undefined; b = b.next) {
+    if ((b.flags & ITEM) === 0)
+      continue;
+    if ((b.flags & KIND) === REGION)
+      b.data.item = item;
+    b.stateHasChanged();
+  }
+}
 function sameValues(a, b) {
   if (a.length !== b.length)
     return false;
@@ -800,8 +943,8 @@ function on(el, event, handler, h) {
   } else
     el.addEventListener(event, (e) => afterHandler(h.ctx, handler(e)));
 }
-function region(start, end, build, item, flags) {
-  const region2 = { bindings: undefined, ctx: holder.ctx, start, item };
+function region(start, end, build, item, flags, branch) {
+  const region2 = { bindings: undefined, ctx: holder.ctx, start, item, branch, index: -1 };
   track(new Binding(REGION | flags, end, build, region2));
 }
 function list(end, items, reads, build, empty, key) {
@@ -809,6 +952,41 @@ function list(end, items, reads, build, empty, key) {
   track(new Binding(LIST, end, items, state));
 }
 var anchor = (parent) => parent.appendChild(document.createComment(""));
+function awaiting(end, 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, branch: undefined, index: -1 });
+  const show = (phase, value) => {
+    if ((view.flags & DEAD) !== 0)
+      return;
+    state.phase = phase;
+    state.value = value;
+    view.stateHasChanged();
+  };
+  track(view);
+  return (result) => {
+    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;
+        });
+    });
+  };
+}
 var fine = {
   template(specs) {
     let node;
@@ -879,6 +1057,16 @@ var fine = {
   regionAt(end, build) {
     region(end.previousSibling, end, build, undefined, 0);
   },
+  branchAt(end, run) {
+    region(end.previousSibling, end, run, undefined, 0, run);
+  },
+  showAt(end, run) {
+    const show = { ctx: holder.ctx, start: end.previousSibling, index: -1, build: run, branches: [] };
+    track(new Binding(REGION | SHOW, end, run, show));
+  },
+  pauseAt(end, build) {
+    region(end.previousSibling, end, () => 0, undefined, PAUSE, build);
+  },
   textOnce(node, read) {
     node.data = textOf(untracked(read));
   },
@@ -925,40 +1113,23 @@ var fine = {
     });
   },
   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);
+    const show = awaiting(end, pending, then, fail);
+    track(new Binding(EFFECT, end, () => show(read()), undefined));
+  },
+  awaitCallAt(end, args, call, pending, then, fail) {
+    const show = awaiting(end, pending, then, fail);
+    let last;
+    const request = new Binding(EFFECT, end, () => show(call(...last)), undefined);
     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;
-          });
-      });
+      const next = args();
+      if (last !== undefined && next.every((v, i) => Object.is(v, last[i])))
+        return;
+      const first = last === undefined;
+      last = next;
+      if (!first)
+        request.stateHasChanged();
     }, undefined));
+    track(request);
   },
   anchors(parent) {
     anchor(parent);
@@ -968,6 +1139,13 @@ var fine = {
     const row = holder;
     region(end.previousSibling, end, row.reads[i], row.item, ITEM);
   },
+  branchItem(end, i) {
+    const row = holder;
+    const read = row.reads[i];
+    const state = { bindings: undefined, ctx: row.ctx, start: end.previousSibling, item: row.item, branch: undefined, index: -1 };
+    state.branch = (p) => read(state.item, p);
+    track(new Binding(REGION | ITEM, end, read, state));
+  },
   list(parent, items, build) {
     list(anchor(parent), items, undefined, build);
   },
@@ -988,52 +1166,13 @@ var fine = {
   }
 };
 var noop = () => {};
-var FIELDS = Symbol("xzor.fine.fields");
-
-class FineComponent extends ComponentBase {
-  #subs;
-  static get $reader() {
-    return Model.$reader;
-  }
-  static same(a, b) {
-    return Model.same(a, b);
-  }
-  static $define(cls, names) {
-    const counts = cls;
-    const at = counts[FIELDS] ?? 0;
-    counts[FIELDS] = at + names.length;
-    return at;
-  }
-  $watch(dep) {
-    const subs = this.#subs ??= [];
-    dep.slot = subs.length;
-    subs.push(dep);
-  }
-  $unwatch(dep) {
-    const subs = this.#subs;
-    if (subs === undefined || subs.length === 0)
-      return;
-    const last = subs.pop();
-    if (last !== dep) {
-      subs[dep.slot] = last;
-      last.slot = dep.slot;
-    }
-  }
-  $changed(index, _previous) {
-    const subs = this.#subs;
-    if (subs !== undefined)
-      for (let i = 0;i < subs.length; i++)
-        $notify(subs[i], index);
-  }
-}
-FineComponent.prototype[FINE] = true;
-var CTX = Symbol("xzor.fine.ctx");
+var FineComponent = ComponentBase;
 setFineHooks({
   create(build, owner, app, scope) {
     const frag = document.createDocumentFragment();
     const start = frag.appendChild(document.createComment(""));
-    const ctx = { owner, app, scope, loose: [] };
-    owner[CTX] = ctx;
+    const ctx = { owner, app, scope, loose: [], sweep: false };
+    owner[FINE] = ctx;
     const root = { bindings: undefined, ctx, start, end: start };
     const reader = Model.$reader;
     Model.$reader = undefined;
@@ -1062,7 +1201,7 @@ setFineHooks({
     disposeAll(root);
   },
   handled(owner, result) {
-    const ctx = owner[CTX];
+    const ctx = owner[FINE];
     if (ctx !== undefined)
       afterHandler(ctx, result);
   }
@@ -1155,7 +1294,9 @@ class Model extends EventTarget {
       pendingIgnored = undefined;
     }
     Object.defineProperty(cls, meta, { value: own });
-    return base ? base.names.length : 0;
+    const at = base ? base.names.length : 0;
+    Object.defineProperty(cls, "$at", { value: at });
+    return at;
   }
   static same(a, b) {
     if (Object.is(a, b))
@@ -1676,6 +1817,7 @@ function flush() {
 }
 var $notify = changed;
 var $flush = flush;
+setTracking({ model: Model, notify: $notify });
 function sweep(own) {
   const more = own.more;
   if (more !== undefined) {
@@ -1770,5 +1912,5 @@ export {
   requiredIdValue
 };
 
-//# debugId=55A54F7D726CA15364756E2164756E21
+//# debugId=68EBAF2C0CCC917064756E2164756E21
 //# sourceMappingURL=model.js.map