tutuca 0.9.26 → 0.9.27

package/dist/tutuca-cli.js

@@ -739,13 +739,10 @@ class ValParser {
     switch (charCode) {
       case 94: {
         const newS = px.frame.macroVars?.[s.slice(1)];
-        if (newS !== undefined) {
+        if (newS !== undefined)
           return this.parse(newS, px);
-        }
         return null;
       }
-      case 126:
-        return this.okStrTpl ? parseConst(s.slice(1), px) : null;
       case 39:
         return this.okStrTpl ? parseConst(s.slice(1, -1), px) : null;
       case 64:
@@ -858,7 +855,7 @@ function getValSubType(s) {
     return open === 1 && close === 1 ? VAL_SUB_TYPE_SEQ_ACCESS : VAL_SUB_TYPE_INVALID;
   return -1;
 }
-var VALID_VAL_ID_RE, isValidValId = (name) => VALID_VAL_ID_RE.test(name), VALID_FLOAT_RE, parseStrTemplate = (v, px) => StrTplVal.parse(v, px), parseConst = (v, _) => new ConstVal(v), parseName = (v, _) => isValidValId(v) ? new NameVal(v) : null, parseType = (v, _) => isValidValId(v) ? new TypeVal(v) : null, parseBind = (v, _) => isValidValId(v) ? new BindVal(v) : null, parseDyn = (v, _) => isValidValId(v) ? new DynVal(v) : null, parseField = (v, _) => isValidValId(v) ? new FieldVal(v) : null, parseComp = (v, _) => isValidValId(v) ? new ComputedVal(v) : null, parseReq = (v, _) => isValidValId(v) ? new RequestVal(v) : null, ConstVal, VarVal, StrTplVal, NameVal, InputHandlerNameVal, AlterHandlerNameVal, mk404Handler = (type, name) => function(...args) {
+var VALID_VAL_ID_RE, isValidValId = (name) => VALID_VAL_ID_RE.test(name), VALID_FLOAT_RE, STR_TPL_SPLIT_RE, parseStrTemplate = (v, px) => StrTplVal.parse(v, px), parseConst = (v, _) => new ConstVal(v), parseName = (v, _) => isValidValId(v) ? new NameVal(v) : null, parseType = (v, _) => isValidValId(v) ? new TypeVal(v) : null, parseBind = (v, _) => isValidValId(v) ? new BindVal(v) : null, parseDyn = (v, _) => isValidValId(v) ? new DynVal(v) : null, parseField = (v, _) => isValidValId(v) ? new FieldVal(v) : null, parseComp = (v, _) => isValidValId(v) ? new ComputedVal(v) : null, parseReq = (v, _) => isValidValId(v) ? new RequestVal(v) : null, ConstVal, VarVal, StrTplVal, NameVal, InputHandlerNameVal, AlterHandlerNameVal, mk404Handler = (type, name) => function(...args) {
   console.warn("handler not found", { type, name, args }, this);
   return this;
 }, TypeVal, RequestVal, RawFieldVal, RenderVal, RenderNameVal, BindVal, DynVal, FieldVal, ComputedVal, SeqAccessVal, VAL_SUB_TYPE_STRING_TEMPLATE = 0, VAL_SUB_TYPE_SEQ_ACCESS = 1, VAL_SUB_TYPE_INVALID = 2, VAL_SUB_TYPE_CONST_STRING = 3, vp;
@@ -866,6 +863,7 @@ var init_value = __esm(() => {
   init_path();
   VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*$/;
   VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
+  STR_TPL_SPLIT_RE = /(\{[^}]+\})/g;
   ConstVal = class ConstVal extends BaseVal {
     constructor(val) {
       super();
@@ -899,7 +897,7 @@ var init_value = __esm(() => {
       return strs.join("");
     }
     static parse(s, px) {
-      const parts = s.split(/(\{[^}]+\})/g);
+      const parts = s.split(STR_TPL_SPLIT_RE);
       const vals = new Array(parts.length);
       let allConsts = true;
       for (let i = 0;i < parts.length; i++) {
@@ -1333,9 +1331,8 @@ function optimizeChilds(childs) {
   }
 }
 function optimizeNode(node) {
-  if (node.isConstant()) {
+  if (node.isConstant())
     return new RenderOnceNode(node);
-  }
   node.optimize();
   return node;
 }
@@ -1401,12 +1398,6 @@ class ParseContext {
   newDOMParser() {
     return new this.DOMParser;
   }
-  isTextNode(v) {
-    return v instanceof this.Text;
-  }
-  isCommentNode(v) {
-    return v instanceof this.Comment;
-  }
   addNodeIf(Class, val, extra) {
     if (val !== null) {
       const nodeId = this.nodes.length;
@@ -1425,21 +1416,18 @@ class ParseContext {
   newMacroNode(macroName, mAttrs, childs) {
     const anySlot = [];
     const slots = { _: new FragmentNode(anySlot) };
-    for (const child of childs) {
-      if (child instanceof SlotNode) {
+    for (const child of childs)
+      if (child instanceof SlotNode)
         slots[child.val.val] = child.node;
-      } else if (!(child instanceof TextNode) || !child.isWhiteSpace()) {
+      else if (!(child instanceof TextNode) || !child.isWhiteSpace())
         anySlot.push(child);
-      }
-    }
     const node = new MacroNode(macroName, mAttrs, slots, this);
     this.macroNodes.push(node);
     return node;
   }
   compile(scope) {
-    for (let i = 0;i < this.macroNodes.length; i++) {
+    for (let i = 0;i < this.macroNodes.length; i++)
       this.macroNodes[i].compile(scope);
-    }
   }
   *genEventNames() {
     for (const event of this.events)
@@ -1490,12 +1478,11 @@ class NodeEvents {
   }
   getHandlersFor(eventName) {
     let r = null;
-    for (const handler of this.handlers) {
+    for (const handler of this.handlers)
       if (handler.handlesEventName(eventName)) {
         r ??= [];
         r.push(handler);
       }
-    }
     return r;
   }
 }
@@ -1629,9 +1616,9 @@ var init_anode = __esm(() => {
       return ANode.fromDOM(nodes[0] ?? new px.Text(""), px);
     }
     static fromDOM(node, px) {
-      if (px.isTextNode(node))
+      if (node instanceof px.Text)
         return new TextNode(node.textContent);
-      else if (px.isCommentNode(node))
+      else if (node instanceof px.Comment)
         return new CommentNode(node.textContent);
       const { childNodes, attributes: attrs, tagName: tag } = node;
       const childs = new Array(childNodes.length);
@@ -1697,9 +1684,9 @@ var init_anode = __esm(() => {
       if (this.px.isInsideMacro(name))
         throw new Error(`Recursive macro expansion: ${name}`);
       const macro = scope.lookupMacro(name);
-      if (macro === null) {
+      if (macro === null)
         this.node = new CommentNode(`bad macro: ${name}`);
-      } else {
+      else {
         const vars = { ...macro.defaults, ...attrs };
         this.node = macro.expand(this.px.enterMacro(name, vars, slots));
         for (const key in this.dataAttrs)
@@ -1870,10 +1857,8 @@ var init_anode = __esm(() => {
 
 // src/cache.js
 class NullDomCache {
-  get(_k, _cacheKey) {}
-  set(_k, _cacheKey, _v) {}
-  get2(_k1, _k2, _cacheKey) {}
-  set2(_k1, _k2, _cacheKey, _v) {}
+  get(_keys, _cacheKey) {}
+  set(_keys, _cacheKey, _v) {}
   evict() {
     return { hit: 0, miss: 0, badKey: 0 };
   }
@@ -1882,7 +1867,7 @@ class NullDomCache {
 class WeakMapDomCache {
   constructor() {
     this.hit = this.miss = this.badKey = 0;
-    this.map = new WeakMap;
+    this.keysByLen = new Map;
   }
   _returnValue(r) {
     if (r === undefined)
@@ -1891,41 +1876,51 @@ class WeakMapDomCache {
       this.hit += 1;
     return r;
   }
-  get(k, cacheKey) {
-    return this._returnValue(this.map.get(k)?.[cacheKey]);
-  }
-  set(k, cacheKey, v) {
-    const cur = this.map.get(k);
-    if (cur)
-      cur[cacheKey] = v;
-    else if (typeof k === "object")
-      this.map.set(k, { [cacheKey]: v });
+  get(keys, cacheKey) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur)
+      return this._returnValue(undefined);
+    for (let i = 0;i < len - 1; i++) {
+      cur = cur.get(keys[i]);
+      if (!cur)
+        return this._returnValue(undefined);
+    }
+    return this._returnValue(cur.get(keys[len - 1])?.[cacheKey]);
+  }
+  set(keys, cacheKey, v) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur) {
+      cur = new WeakMap;
+      this.keysByLen.set(len, cur);
+    }
+    for (let i = 0;i < len - 1; i++) {
+      const key = keys[i];
+      let next = cur.get(key);
+      if (!next) {
+        if (typeof key !== "object") {
+          this.badKey += 1;
+          return;
+        }
+        next = new WeakMap;
+        cur.set(key, next);
+      }
+      cur = next;
+    }
+    const lastKey = keys[len - 1];
+    const leaf = cur.get(lastKey);
+    if (leaf)
+      leaf[cacheKey] = v;
+    else if (typeof lastKey === "object")
+      cur.set(lastKey, { [cacheKey]: v });
     else
       this.badKey += 1;
   }
-  get2(k1, k2, cacheKey) {
-    return this._returnValue(this.map.get(k1)?.get?.(k2)?.[cacheKey]);
-  }
-  set2(k1, k2, cacheKey, v) {
-    const cur1 = this.map.get(k1);
-    if (cur1) {
-      const cur = cur1.get(k2);
-      if (cur)
-        cur[cacheKey] = v;
-      else
-        cur1.set(k2, { [cacheKey]: v });
-    } else if (typeof k1 === "object" && typeof k2 === "object") {
-      const cur = new WeakMap;
-      cur.set(k2, { [cacheKey]: v });
-      this.map.set(k1, cur);
-    } else {
-      this.badKey += 1;
-    }
-  }
   evict() {
     const { hit, miss, badKey } = this;
     this.hit = this.miss = this.badKey = 0;
-    this.map = new WeakMap;
+    this.keysByLen = new Map;
     return { hit, miss, badKey };
   }
 }
@@ -2047,8 +2042,8 @@ class ComponentStack {
     return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
   }
 }
-function defaultOnStackEnter(stack) {
-  return stack;
+function defaultOnStackEnter() {
+  return null;
 }
 var init_components = __esm(() => {
   init_attribute();
@@ -2466,7 +2461,7 @@ class Stack {
     this.ctx = ctx;
   }
   _enrichOnEnter() {
-    return this.comps.getOnEnterFor(this.it).call(this.it, this) ?? this;
+    return this.withDynamicBindings(this.comps.getOnEnterFor(this.it).call(this.it));
   }
   upToFrameBinds() {
     const { comps, binds, dynBinds, views, viewsId, ctx } = this;
@@ -2481,7 +2476,8 @@ class Stack {
   enter(it, bindings = {}, isFrame = true) {
     const { comps, binds, dynBinds, views, viewsId, ctx } = this;
     const newBinds = [new BindFrame(it, bindings, isFrame), binds];
-    return new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx)._enrichOnEnter();
+    const stack = new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
+    return isFrame ? stack._enrichOnEnter() : stack;
   }
   pushViewName(name) {
     const { comps, it, binds, dynBinds, views, ctx } = this;
@@ -2489,17 +2485,26 @@ class Stack {
     return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
   }
   withDynamicBindings(dynamics) {
+    if (dynamics == null || dynamics.length === 0)
+      return this;
     const dynObj = {};
     const comp = this.comps.getCompFor(this.it);
     for (const dynName of dynamics)
       comp.dynamic[dynName].evalAndBind(this, dynObj);
-    const { comps, it, binds, views, viewsId, ctx } = this;
     const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
+    const { comps, it, binds, views, viewsId, ctx } = this;
     return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
+  _pushDynBindValuesToArray(arr, dyns) {
+    for (const k in dyns)
+      arr.push(this._lookupDynamicWithDynVal(dyns[k]));
+  }
+  _lookupDynamicWithDynVal(d) {
+    return lookup(this.dynBinds, d.getSymbol(this)) ?? d.val.eval(this);
+  }
   lookupDynamic(name) {
     const d = this.comps.getCompFor(this.it)?.dynamic[name];
-    return d ? lookup(this.dynBinds, d.getSymbol(this)) ?? d.val.eval(this) : null;
+    return d ? this._lookupDynamicWithDynVal(d) : null;
   }
   lookupBind(name) {
     return lookup(this.binds, name);
@@ -7740,13 +7745,15 @@ class Renderer {
   }
   _rValComp(stack, val, comp, nid, key, viewName) {
     const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
-    const cachedNode = this.cache.get(val, cacheKey);
+    const cachePath = [val];
+    stack._pushDynBindValuesToArray(cachePath, comp.dynamic);
+    const cachedNode = this.cache.get(cachePath, cacheKey);
     if (cachedNode)
       return cachedNode;
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
     const meta = this._renderMetadata({ $: "Comp", nid });
     const dom = new VFragment([meta, this.renderView(view, stack)]);
-    this.cache.set(val, cacheKey, dom);
+    this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
   pushEachEntry(r, nid, attrName, key, dom) {
@@ -7758,8 +7765,7 @@ class Renderer {
     const iterData = loopWith.call(stack.it, seq);
     this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(stack.it, key, value, iterData)) {
-        const newStack = stack.enter(value, { key }, true);
-        const dom = this.renderIt(newStack, nodeId, key, viewName);
+        const dom = this.renderIt(stack.enter(value, { key }, true), nodeId, key, viewName);
         this.pushEachEntry(r, nodeId, attrName, key, dom);
       }
     });
@@ -7772,25 +7778,19 @@ class Renderer {
     const it = stack.it;
     this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(it, key, value, iterData)) {
+        const cachePath = enricher ? [it, value] : [value];
         const bindings = { key, value };
         const cacheKey = `${nid}-${key}`;
-        let cachedNode;
-        if (enricher) {
+        if (enricher)
           enricher.call(it, bindings, key, value, iterData);
-          cachedNode = this.cache.get2(it, value, cacheKey);
-        } else
-          cachedNode = this.cache.get(value, cacheKey);
-        if (cachedNode) {
+        const cachedNode = this.cache.get(cachePath, cacheKey);
+        if (cachedNode)
           this.pushEachEntry(r, nid, attrName, key, cachedNode);
-          return;
+        else {
+          const dom = this.renderView(view, stack.enter(value, bindings, false));
+          this.pushEachEntry(r, nid, attrName, key, dom);
+          this.cache.set(cachePath, cacheKey, dom);
         }
-        const newStack = stack.enter(value, bindings, false);
-        const dom = this.renderView(view, newStack);
-        this.pushEachEntry(r, nid, attrName, key, dom);
-        if (enricher)
-          this.cache.set2(it, value, cacheKey, dom);
-        else
-          this.cache.set(value, cacheKey, dom);
       }
     });
     return r;

package/dist/tutuca-dev.js

@@ -245,6 +245,7 @@ class PathBuilder {
 var VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*$/;
 var isValidValId = (name) => VALID_VAL_ID_RE.test(name);
 var VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
+var STR_TPL_SPLIT_RE = /(\{[^}]+\})/g;
 var parseStrTemplate = (v, px) => StrTplVal.parse(v, px);
 var parseConst = (v, _) => new ConstVal(v);
 var parseName = (v, _) => isValidValId(v) ? new NameVal(v) : null;
@@ -293,13 +294,10 @@ class ValParser {
     switch (charCode) {
       case 94: {
         const newS = px.frame.macroVars?.[s.slice(1)];
-        if (newS !== undefined) {
+        if (newS !== undefined)
           return this.parse(newS, px);
-        }
         return null;
       }
-      case 126:
-        return this.okStrTpl ? parseConst(s.slice(1), px) : null;
       case 39:
         return this.okStrTpl ? parseConst(s.slice(1, -1), px) : null;
       case 64:
@@ -423,7 +421,7 @@ class StrTplVal extends VarVal {
     return strs.join("");
   }
   static parse(s, px) {
-    const parts = s.split(/(\{[^}]+\})/g);
+    const parts = s.split(STR_TPL_SPLIT_RE);
     const vals = new Array(parts.length);
     let allConsts = true;
     for (let i = 0;i < parts.length; i++) {
@@ -944,9 +942,8 @@ function optimizeChilds(childs) {
   }
 }
 function optimizeNode(node) {
-  if (node.isConstant()) {
+  if (node.isConstant())
     return new RenderOnceNode(node);
-  }
   node.optimize();
   return node;
 }
@@ -1013,9 +1010,9 @@ class ANode extends BaseNode {
     return ANode.fromDOM(nodes[0] ?? new px.Text(""), px);
   }
   static fromDOM(node, px) {
-    if (px.isTextNode(node))
+    if (node instanceof px.Text)
       return new TextNode(node.textContent);
-    else if (px.isCommentNode(node))
+    else if (node instanceof px.Comment)
       return new CommentNode(node.textContent);
     const { childNodes, attributes: attrs, tagName: tag } = node;
     const childs = new Array(childNodes.length);
@@ -1104,9 +1101,9 @@ class MacroNode extends BaseNode {
     if (this.px.isInsideMacro(name))
       throw new Error(`Recursive macro expansion: ${name}`);
     const macro = scope.lookupMacro(name);
-    if (macro === null) {
+    if (macro === null)
       this.node = new CommentNode(`bad macro: ${name}`);
-    } else {
+    else {
       const vars = { ...macro.defaults, ...attrs };
       this.node = macro.expand(this.px.enterMacro(name, vars, slots));
       for (const key in this.dataAttrs)
@@ -1325,12 +1322,6 @@ class ParseContext {
   newDOMParser() {
     return new this.DOMParser;
   }
-  isTextNode(v) {
-    return v instanceof this.Text;
-  }
-  isCommentNode(v) {
-    return v instanceof this.Comment;
-  }
   addNodeIf(Class, val, extra) {
     if (val !== null) {
       const nodeId = this.nodes.length;
@@ -1349,21 +1340,18 @@ class ParseContext {
   newMacroNode(macroName, mAttrs, childs) {
     const anySlot = [];
     const slots = { _: new FragmentNode(anySlot) };
-    for (const child of childs) {
-      if (child instanceof SlotNode) {
+    for (const child of childs)
+      if (child instanceof SlotNode)
         slots[child.val.val] = child.node;
-      } else if (!(child instanceof TextNode) || !child.isWhiteSpace()) {
+      else if (!(child instanceof TextNode) || !child.isWhiteSpace())
         anySlot.push(child);
-      }
-    }
     const node = new MacroNode(macroName, mAttrs, slots, this);
     this.macroNodes.push(node);
     return node;
   }
   compile(scope) {
-    for (let i = 0;i < this.macroNodes.length; i++) {
+    for (let i = 0;i < this.macroNodes.length; i++)
       this.macroNodes[i].compile(scope);
-    }
   }
   *genEventNames() {
     for (const event of this.events)
@@ -1438,12 +1426,11 @@ class NodeEvents {
   }
   getHandlersFor(eventName) {
     let r = null;
-    for (const handler of this.handlers) {
+    for (const handler of this.handlers)
       if (handler.handlesEventName(eventName)) {
         r ??= [];
         r.push(handler);
       }
-    }
     return r;
   }
 }
@@ -1942,10 +1929,8 @@ function lintIdToMessage(id, info) {
 
 // src/cache.js
 class NullDomCache {
-  get(_k, _cacheKey) {}
-  set(_k, _cacheKey, _v) {}
-  get2(_k1, _k2, _cacheKey) {}
-  set2(_k1, _k2, _cacheKey, _v) {}
+  get(_keys, _cacheKey) {}
+  set(_keys, _cacheKey, _v) {}
   evict() {
     return { hit: 0, miss: 0, badKey: 0 };
   }
@@ -1954,7 +1939,7 @@ class NullDomCache {
 class WeakMapDomCache {
   constructor() {
     this.hit = this.miss = this.badKey = 0;
-    this.map = new WeakMap;
+    this.keysByLen = new Map;
   }
   _returnValue(r) {
     if (r === undefined)
@@ -1963,41 +1948,51 @@ class WeakMapDomCache {
       this.hit += 1;
     return r;
   }
-  get(k, cacheKey) {
-    return this._returnValue(this.map.get(k)?.[cacheKey]);
-  }
-  set(k, cacheKey, v) {
-    const cur = this.map.get(k);
-    if (cur)
-      cur[cacheKey] = v;
-    else if (typeof k === "object")
-      this.map.set(k, { [cacheKey]: v });
+  get(keys, cacheKey) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur)
+      return this._returnValue(undefined);
+    for (let i = 0;i < len - 1; i++) {
+      cur = cur.get(keys[i]);
+      if (!cur)
+        return this._returnValue(undefined);
+    }
+    return this._returnValue(cur.get(keys[len - 1])?.[cacheKey]);
+  }
+  set(keys, cacheKey, v) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur) {
+      cur = new WeakMap;
+      this.keysByLen.set(len, cur);
+    }
+    for (let i = 0;i < len - 1; i++) {
+      const key = keys[i];
+      let next = cur.get(key);
+      if (!next) {
+        if (typeof key !== "object") {
+          this.badKey += 1;
+          return;
+        }
+        next = new WeakMap;
+        cur.set(key, next);
+      }
+      cur = next;
+    }
+    const lastKey = keys[len - 1];
+    const leaf = cur.get(lastKey);
+    if (leaf)
+      leaf[cacheKey] = v;
+    else if (typeof lastKey === "object")
+      cur.set(lastKey, { [cacheKey]: v });
     else
       this.badKey += 1;
   }
-  get2(k1, k2, cacheKey) {
-    return this._returnValue(this.map.get(k1)?.get?.(k2)?.[cacheKey]);
-  }
-  set2(k1, k2, cacheKey, v) {
-    const cur1 = this.map.get(k1);
-    if (cur1) {
-      const cur = cur1.get(k2);
-      if (cur)
-        cur[cacheKey] = v;
-      else
-        cur1.set(k2, { [cacheKey]: v });
-    } else if (typeof k1 === "object" && typeof k2 === "object") {
-      const cur = new WeakMap;
-      cur.set(k2, { [cacheKey]: v });
-      this.map.set(k1, cur);
-    } else {
-      this.badKey += 1;
-    }
-  }
   evict() {
     const { hit, miss, badKey } = this;
     this.hit = this.miss = this.badKey = 0;
-    this.map = new WeakMap;
+    this.keysByLen = new Map;
     return { hit, miss, badKey };
   }
 }
@@ -2219,8 +2214,8 @@ class Component {
 `);
   }
 }
-function defaultOnStackEnter(stack) {
-  return stack;
+function defaultOnStackEnter() {
+  return null;
 }
 
 // src/stack.js
@@ -2281,7 +2276,7 @@ class Stack {
     this.ctx = ctx;
   }
   _enrichOnEnter() {
-    return this.comps.getOnEnterFor(this.it).call(this.it, this) ?? this;
+    return this.withDynamicBindings(this.comps.getOnEnterFor(this.it).call(this.it));
   }
   upToFrameBinds() {
     const { comps, binds, dynBinds, views, viewsId, ctx } = this;
@@ -2296,7 +2291,8 @@ class Stack {
   enter(it, bindings = {}, isFrame = true) {
     const { comps, binds, dynBinds, views, viewsId, ctx } = this;
     const newBinds = [new BindFrame(it, bindings, isFrame), binds];
-    return new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx)._enrichOnEnter();
+    const stack = new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
+    return isFrame ? stack._enrichOnEnter() : stack;
   }
   pushViewName(name) {
     const { comps, it, binds, dynBinds, views, ctx } = this;
@@ -2304,17 +2300,26 @@ class Stack {
     return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
   }
   withDynamicBindings(dynamics) {
+    if (dynamics == null || dynamics.length === 0)
+      return this;
     const dynObj = {};
     const comp = this.comps.getCompFor(this.it);
     for (const dynName of dynamics)
       comp.dynamic[dynName].evalAndBind(this, dynObj);
-    const { comps, it, binds, views, viewsId, ctx } = this;
     const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
+    const { comps, it, binds, views, viewsId, ctx } = this;
     return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
+  _pushDynBindValuesToArray(arr, dyns) {
+    for (const k in dyns)
+      arr.push(this._lookupDynamicWithDynVal(dyns[k]));
+  }
+  _lookupDynamicWithDynVal(d) {
+    return lookup(this.dynBinds, d.getSymbol(this)) ?? d.val.eval(this);
+  }
   lookupDynamic(name) {
     const d = this.comps.getCompFor(this.it)?.dynamic[name];
-    return d ? lookup(this.dynBinds, d.getSymbol(this)) ?? d.val.eval(this) : null;
+    return d ? this._lookupDynamicWithDynVal(d) : null;
   }
   lookupBind(name) {
     return lookup(this.binds, name);
@@ -8112,13 +8117,15 @@ class Renderer {
   }
   _rValComp(stack, val, comp, nid, key, viewName) {
     const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
-    const cachedNode = this.cache.get(val, cacheKey);
+    const cachePath = [val];
+    stack._pushDynBindValuesToArray(cachePath, comp.dynamic);
+    const cachedNode = this.cache.get(cachePath, cacheKey);
     if (cachedNode)
       return cachedNode;
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
     const meta = this._renderMetadata({ $: "Comp", nid });
     const dom = new VFragment([meta, this.renderView(view, stack)]);
-    this.cache.set(val, cacheKey, dom);
+    this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
   pushEachEntry(r, nid, attrName, key, dom) {
@@ -8130,8 +8137,7 @@ class Renderer {
     const iterData = loopWith.call(stack.it, seq);
     this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(stack.it, key, value, iterData)) {
-        const newStack = stack.enter(value, { key }, true);
-        const dom = this.renderIt(newStack, nodeId, key, viewName);
+        const dom = this.renderIt(stack.enter(value, { key }, true), nodeId, key, viewName);
         this.pushEachEntry(r, nodeId, attrName, key, dom);
       }
     });
@@ -8144,25 +8150,19 @@ class Renderer {
     const it = stack.it;
     this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(it, key, value, iterData)) {
+        const cachePath = enricher ? [it, value] : [value];
         const bindings = { key, value };
         const cacheKey = `${nid}-${key}`;
-        let cachedNode;
-        if (enricher) {
+        if (enricher)
           enricher.call(it, bindings, key, value, iterData);
-          cachedNode = this.cache.get2(it, value, cacheKey);
-        } else
-          cachedNode = this.cache.get(value, cacheKey);
-        if (cachedNode) {
+        const cachedNode = this.cache.get(cachePath, cacheKey);
+        if (cachedNode)
           this.pushEachEntry(r, nid, attrName, key, cachedNode);
-          return;
+        else {
+          const dom = this.renderView(view, stack.enter(value, bindings, false));
+          this.pushEachEntry(r, nid, attrName, key, dom);
+          this.cache.set(cachePath, cacheKey, dom);
         }
-        const newStack = stack.enter(value, bindings, false);
-        const dom = this.renderView(view, newStack);
-        this.pushEachEntry(r, nid, attrName, key, dom);
-        if (enricher)
-          this.cache.set2(it, value, cacheKey, dom);
-        else
-          this.cache.set(value, cacheKey, dom);
       }
     });
     return r;