tutuca 0.9.45 → 0.9.47

package/dist/tutuca-extra.js

@@ -1,4 +1,6 @@
 // src/path.js
+var NONE = Symbol("NONE");
+
 class Step {
   lookup(_v, dval = null) {
     return dval;
@@ -6,8 +8,9 @@ class Step {
   setValue(root, _v) {
     return root;
   }
-  updateBinds(_v, _o) {}
-  isFrame = true;
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, {}, true);
+  }
 }
 
 class BindStep extends Step {
@@ -21,16 +24,15 @@ class BindStep extends Step {
   setValue(_root, v) {
     return v;
   }
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { ...this.binds }, false);
+  }
   withIndex(i) {
     return new BindStep({ ...this.binds, key: i });
   }
   withKey(key) {
     return new BindStep({ ...this.binds, key });
   }
-  updateBinds(_v, o) {
-    Object.assign(o, this.binds);
-  }
-  isFrame = false;
 }
 
 class FieldStep extends Step {
@@ -65,8 +67,8 @@ class FieldSeqStep extends Step {
   setValue(root, v) {
     return root.set(this.field, root.get(this.field).set(this.key, v));
   }
-  updateBinds(_v, o) {
-    o.key = this.key;
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { key: this.key }, true);
   }
 }
 
@@ -75,7 +77,6 @@ class SeqKeyStep extends FieldSeqStep {
 
 class SeqIndexStep extends FieldSeqStep {
 }
-var NONE = Symbol("NONE");
 
 class SeqAccessStep extends Step {
   constructor(seqField, keyField) {
@@ -93,8 +94,42 @@ class SeqAccessStep extends Step {
     const key = root?.get(this.keyField, NONE);
     return seq === NONE || key === NONE ? root : root.set(this.seqField, seq.set(key, v));
   }
-  updateBinds(v, o) {
-    o.key = v?.get(this.keyField, null);
+}
+
+class EachBindStep extends Step {
+  constructor(seqVal, key) {
+    super();
+    this.seqVal = seqVal;
+    this.key = key;
+  }
+  lookup(v, _dval) {
+    return v;
+  }
+  setValue(_root, v) {
+    return v;
+  }
+  enterFrame(stack, _prev, next) {
+    const item = this.seqVal.eval(stack)?.get(this.key, null);
+    return stack.enter(next, { key: this.key, value: item }, false);
+  }
+}
+
+class EachRenderItStep extends Step {
+  constructor(seqField, key) {
+    super();
+    this.seqField = seqField;
+    this.key = key;
+  }
+  lookup(v, dval = null) {
+    const seq = v?.get(this.seqField, null);
+    return seq?.get ? seq.get(this.key, dval) : dval;
+  }
+  setValue(root, v) {
+    const seq = root?.get(this.seqField, null);
+    return seq ? root.set(this.seqField, seq.set(this.key, v)) : root;
+  }
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { key: this.key, value: next }, false).enter(next, {}, true);
   }
 }
 
@@ -134,16 +169,15 @@ class Path {
     return newVal;
   }
   buildStack(stack) {
-    const root = stack.it;
-    let curVal = root;
+    let prev = stack.it;
     for (const step of this.steps) {
-      curVal = step.lookup(curVal, NONE);
-      if (curVal === NONE) {
-        console.warn(`bad PathItem`, { root, curVal, step, path: this });
+      const next = step.lookup(prev, NONE);
+      if (next === NONE) {
+        console.warn("bad PathItem", { root: stack.it, step, path: this });
         return null;
       }
-      step.updateBinds(curVal, stack.binds[0].binds);
-      stack = stack.enter(curVal, {}, step.isFrame);
+      stack = step.enterFrame(stack, prev, next);
+      prev = next;
     }
     return stack;
   }
@@ -209,14 +243,48 @@ function findHandlers(comp, eventIds, vid, eventName) {
   }
   return null;
 }
+
+class StepCtx {
+  constructor(comp, nodeIds, idx, vid) {
+    this.comp = comp;
+    this.nodeIds = nodeIds;
+    this.idx = idx;
+    this.vid = vid;
+  }
+  get meta() {
+    return this.nodeIds[this.idx];
+  }
+  get key() {
+    const m = this.meta;
+    return m.si !== undefined ? +m.si : m.sk;
+  }
+  get hasKey() {
+    const m = this.meta;
+    return m.si !== undefined || m.sk !== undefined;
+  }
+  next() {
+    return this.idx + 1 < this.nodeIds.length ? new StepCtx(this.comp, this.nodeIds, this.idx + 1, this.vid) : null;
+  }
+  resolveNode() {
+    return this.comp.getNodeForId(+this.meta.nid, this.vid);
+  }
+  applyKey(pi) {
+    if (pi === null)
+      return null;
+    const m = this.meta;
+    if (m.si !== undefined)
+      return pi.withIndex(+m.si);
+    if (m.sk !== undefined)
+      return pi.withKey(m.sk);
+    return pi;
+  }
+}
 function resolvePathStep(comp, nodeIds, vid) {
   for (let i = 0;i < nodeIds.length; i++) {
-    const node = comp.getNodeForId(+nodeIds[i].nid, vid);
-    const j = node.pathInNext ? i + 1 : i;
-    const { si, sk, nid: nodeId } = nodeIds[j];
-    const pi = node.pathInNext ? comp.getNodeForId(+nodeId, vid).val.toPathItem() : node.toPathItem();
-    if (pi !== null)
-      return si !== undefined ? pi.withIndex(+si) : sk ? pi.withKey(sk) : pi;
+    const ctx = new StepCtx(comp, nodeIds, i, vid);
+    const step = ctx.resolveNode().toPathStep(ctx);
+    if (step !== null)
+      return step;
   }
   return null;
 }
@@ -1016,8 +1084,8 @@ class ANode extends BaseNode {
     this.nodeId = nodeId;
     this.val = val;
   }
-  toPathItem() {
-    return this.val.toPathItem();
+  toPathStep(ctx) {
+    return ctx.applyKey(this.val?.toPathItem?.() ?? null);
   }
   static parse(html, px) {
     const nodes = px.parseHTML(html);
@@ -1235,7 +1303,15 @@ class RenderItNode extends RenderViewId {
     const newStack = stack.enter(stack.it, {}, true);
     return rx.renderIt(newStack, this.nodeId, "", this.viewId);
   }
-  pathInNext = true;
+  toPathStep(ctx) {
+    const next = ctx.next();
+    if (next === null)
+      return null;
+    const nextNode = next.resolveNode();
+    if (nextNode instanceof EachNode && next.hasKey)
+      return new EachRenderItStep(nextNode.val.name, next.key);
+    return null;
+  }
 }
 
 class RenderEachNode extends RenderViewId {
@@ -1331,7 +1407,7 @@ class ScopeNode extends WrapperNode {
     const binds = this.val.eval(stack)?.call(stack.it) ?? {};
     return this.node.render(stack.enter(stack.it, binds, false), rx);
   }
-  toPathItem() {
+  toPathStep(_ctx) {
     return new BindStep({});
   }
   wrapNode(node) {
@@ -1349,8 +1425,8 @@ class EachNode extends WrapperNode {
   render(stack, rx) {
     return rx.renderEachWhen(stack, this.iterInfo, this.node, this.nodeId);
   }
-  toPathItem() {
-    return new BindStep({});
+  toPathStep(ctx) {
+    return ctx.hasKey ? new EachBindStep(this.val, ctx.key) : null;
   }
   static register = true;
 }
@@ -1837,11 +1913,6 @@ class Stack {
   _enrichOnEnter() {
     return this.withDynamicBinds(this.comps.getOnEnterFor(this.it).call(this.it));
   }
-  upToFrameBinds() {
-    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
-    const [head, tail] = binds;
-    return head.isFrame ? this : new Stack(comps, tail[0].it, tail, dynBinds, views, viewsId, ctx);
-  }
   static root(comps, it, ctx) {
     const binds = [new BindFrame(it, { it }, true), null];
     const dynBinds = [new ObjectFrame({}), null];
@@ -2026,8 +2097,7 @@ class Transaction {
     return Stack.root(comps, root);
   }
   buildStack(root, comps) {
-    const stack = this.path.buildStack(this.buildRootStack(root, comps));
-    return stack ? stack.upToFrameBinds() : null;
+    return this.path.buildStack(this.buildRootStack(root, comps));
   }
   callHandler(root, instance, comps) {
     const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
@@ -7822,8 +7892,8 @@ class Renderer {
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
     const r = [];
-    const iterData = loopWith.call(stack.it, seq);
     const it = stack.it;
+    const iterData = loopWith.call(it, seq);
     this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(it, key, value, iterData)) {
         const cachePath = enricher ? [it, value] : [value];
@@ -7993,10 +8063,10 @@ async function compileClassesToStyle(app, compileClasses, styleId = "margaui-css
   injectCss(styleId, css2);
   return t2 - t1;
 }
-async function compileClassesToStyleText(app, compileClasses, extraCSSClasses, Ctx = ParseCtxClassSetCollector) {
+async function compileClassesToStyleText(app, compileClasses, Ctx = ParseCtxClassSetCollector) {
   app.ParseContext = Ctx;
   app.compile();
-  const classes = new Set(extraCSSClasses ?? []);
+  const classes = new Set;
   for (const Comp of app.comps.byId.values()) {
     for (const key in Comp.views) {
       const view = Comp.views[key];