tutuca 0.9.26 → 0.9.28

package/README.md

@@ -7,7 +7,7 @@ Zero-dependency batteries included SPA framework.
 - **Fits in your head** (and the context window)
 - **View source friendly** — step through the whole stack
 - **As much HTML as possible, as little JS as needed**
-- ~107KB minified, ~29KB brotli compressed
+- ~169KB minified, ~37KB brotli compressed
 
 ## Quick Start
 
@@ -64,17 +64,17 @@ Zero-dependency batteries included SPA framework.
 Tutuca ships a single-file CLI (`dist/tutuca-cli.js`) for inspecting, linting,
 documenting, and rendering components defined in an ES module. The module just
 needs to export `getComponents()` and, for render-time commands, `getExamples()`
-in the storybook shape `{ title, description?, groups?, items: [{ title, description?, value, view? }] }`.
+in the storybook shape `{ title, description?, items: [{ title, description?, value, view? }] }` (a single section, or an array of sections).
 
 ### Setup
 
 ```sh
-npm install --save-dev tutuca jsdom
+npm install --save-dev tutuca
 # prettier is optional, only needed for --pretty
 npm install --save-dev prettier
 ```
 
-The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca jsdom`) just works. `jsdom` is a peer dep because it's only needed for `render`, `lint`, and `doctor`.
+The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca`) just works. `jsdom` ships as a regular dependency (it's needed by `render`, `lint`, and `doctor`) and is installed automatically.
 
 ### Commands
 

package/dist/tutuca-cli.js

@@ -221,15 +221,11 @@ function normalizeModule(mod, { path = null } = {}) {
     "getMacros",
     "getRequestHandlers",
     "getExamples",
-    "getStoryBookSection",
     "getRoot"
   ]) {
     if (typeof mod[key] === "function")
       present.add(key);
   }
-  if (present.has("getStoryBookSection") && !present.has("getExamples")) {
-    throw shapeError("module exports getStoryBookSection; rename it to getExamples.", "module");
-  }
   const components = present.has("getComponents") ? mod.getComponents() : [];
   const macros = present.has("getMacros") ? mod.getMacros() : null;
   const requestHandlers = present.has("getRequestHandlers") ? mod.getRequestHandlers() : null;
@@ -739,13 +735,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 +851,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 +859,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 +893,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 +1327,8 @@ function optimizeChilds(childs) {
   }
 }
 function optimizeNode(node) {
-  if (node.isConstant()) {
+  if (node.isConstant())
     return new RenderOnceNode(node);
-  }
   node.optimize();
   return node;
 }
@@ -1401,12 +1394,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 +1412,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)
@@ -1454,26 +1438,28 @@ class ParseContext {
   onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall) {}
 }
 function condenseChildsWhites(childs) {
-  let end = childs.length;
-  if (end === 0)
+  if (childs.length === 0)
     return childs;
-  let start = 0;
   let changed = false;
-  if (isTextNodeAllBlanks(childs[0])) {
-    start = 1;
+  if (childs[0].isWhiteSpace?.()) {
+    childs[0].condenseWhiteSpace();
     changed = true;
   }
-  if (end > 1 && isTextNodeAllBlanks(childs[end - 1])) {
-    end -= 1;
+  const last = childs.length - 1;
+  if (last > 0 && childs[last].isWhiteSpace?.()) {
+    childs[last].condenseWhiteSpace();
     changed = true;
   }
-  for (let i = 1;i < end - 1; i++) {
+  for (let i = 1;i < last; i++) {
     const cur = childs[i];
-    if (isTextNodeAllBlanks(cur) && isFirstDomNode(childs[i - 1]) && isFirstDomNode(childs[i + 1]) && cur.hasNewLine()) {
-      cur.condenseWhiteSpace();
+    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
+      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+      cur.condenseWhiteSpace(bothBlock ? "" : " ");
+      if (bothBlock)
+        changed = true;
     }
   }
-  return changed ? childs.slice(start, end) : childs;
+  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
 }
 
 class NodeEvents {
@@ -1490,12 +1476,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;
   }
 }
@@ -1530,7 +1515,10 @@ function compileModifiers(eventName, names) {
     return w(this, f, args, ctx);
   };
 }
-var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, _parser = null, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ seq }), WRAPPER_NODES, isTextNodeAllBlanks = (n) => n instanceof TextNode && n.isWhiteSpace(), isFirstDomNode = (n) => n instanceof DomNode || n instanceof FragmentNode && n.childs[0] instanceof DomNode, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
+var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, _parser = null, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ seq }), WRAPPER_NODES, _htmlBlockTags = "ADDRESS,ARTICLE,ASIDE,BLOCKQUOTE,CAPTION,COL,COLGROUP,DETAILS,DIALOG,DIV,DD,DL,DT,FIELDSET,FIGCAPTION,FIGURE,FOOTER,FORM,H1,H2,H3,H4,H5,H6,HEADER,HGROUP,HR,LEGEND,LI,MAIN,MENU,NAV,OL,P,PRE,SECTION,SUMMARY,TABLE,TBODY,TD,TFOOT,TH,THEAD,TR,UL", HTML_BLOCK_TAGS, isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+}, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
 var init_anode = __esm(() => {
   init_attribute();
   init_path();
@@ -1559,8 +1547,8 @@ var init_anode = __esm(() => {
       }
       return false;
     }
-    condenseWhiteSpace() {
-      this.val = "";
+    condenseWhiteSpace(replacement = "") {
+      this.val = replacement;
     }
     isConstant() {
       return true;
@@ -1629,9 +1617,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);
@@ -1677,7 +1665,7 @@ var init_anode = __esm(() => {
         if (textChild)
           childs.unshift(new RenderTextNode(null, textChild));
         const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-        return wrap(new DomNode(tag.toLowerCase(), nAttrs, domChilds), px, wrappers);
+        return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
       }
       return new CommentNode(`Error: InvalidTagName ${tag}`);
     }
@@ -1697,9 +1685,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)
@@ -1853,6 +1841,7 @@ var init_anode = __esm(() => {
     scope: ScopeNode,
     "push-view": PushViewNameNode
   };
+  HTML_BLOCK_TAGS = new Set(_htmlBlockTags.split(","));
   isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
   fwdCtrl = fwdIfCtxPred(({ e }) => isMac && e.metaKey || e.ctrlKey);
   fwdMeta = fwdIfCtxPred(({ e }) => e.metaKey);
@@ -1870,10 +1859,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 +1869,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 +1878,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 +2044,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 +2463,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 +2478,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 +2487,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);
@@ -2982,23 +2989,20 @@ function morphNode(domNode, source, target, opts) {
       domNode.data = target.text;
       return domNode;
     }
-    if (type === 1 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+    if (type === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
       const isSelect = source.tag === "SELECT";
       if (propsDiff) {
         if (isSelect && "value" in propsDiff) {
           const { value: _v, ...rest } = propsDiff;
           applyProperties(domNode, rest, source.attrs);
-        } else {
+        } else
           applyProperties(domNode, propsDiff, source.attrs);
-        }
       }
-      if (!target.attrs.dangerouslySetInnerHTML) {
+      if (!target.attrs.dangerouslySetInnerHTML)
         morphChildren(domNode, source.childs, target.childs, opts);
-      }
-      if (isSelect && target.attrs.value !== undefined) {
+      if (isSelect && target.attrs.value !== undefined)
         applyProperties(domNode, { value: target.attrs.value }, source.attrs);
-      }
       return domNode;
     }
     if (type === 11) {
@@ -3077,23 +3081,20 @@ function morphChildren(parentDom, oldChilds, newChilds, opts) {
     if (!used[i] && domNodes[i].parentNode === parentDom)
       parentDom.removeChild(domNodes[i]);
 }
-function render(vnode, container, options) {
-  const cached = renderCache.get(container);
+function render(vnode, container, options, prev) {
   const isFragment = vnode instanceof VFragment;
-  if (cached && cached.vnode instanceof VFragment === isFragment) {
-    const oldDom = isFragment ? container : cached.dom;
-    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
-    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
-    return newDom;
+  if (prev && prev.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : prev.dom;
+    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
+    return { vnode, dom: isFragment ? container : newDom };
   }
-  renderCache.delete(container);
   const domNode = vnode.toDom(options);
   container.replaceChildren(domNode);
-  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
-  return domNode;
+  return { vnode, dom: isFragment ? container : domNode };
 }
 function h(tagName, properties, children) {
-  const tag = tagName.toUpperCase();
+  const c = tagName.charCodeAt(0);
+  const tag = c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
   const props = {};
   let key, namespace;
   if (properties) {
@@ -3121,7 +3122,7 @@ function h(tagName, properties, children) {
   addChild(normalizedChildren, children);
   return new VNode(tag, props, normalizedChildren, key, namespace);
 }
-var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), isObject = (v) => v !== null && typeof v === "object", prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b), getKey = (child) => child instanceof VNode ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode, renderCache;
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), isObject = (v) => v !== null && typeof v === "object", prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b), getKey = (child) => child instanceof VNode ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode;
 var init_vdom = __esm(() => {
   VText = class VText extends VBase {
     constructor(text) {
@@ -3185,10 +3186,13 @@ var init_vdom = __esm(() => {
     get nodeType() {
       return 1;
     }
+    isSameKind(other) {
+      return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+    }
     isEqualTo(other) {
       if (this === other)
         return true;
-      if (!(other instanceof VNode) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
+      if (!(other instanceof VNode) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
         return false;
       }
       if (this.attrs !== other.attrs) {
@@ -3216,7 +3220,6 @@ var init_vdom = __esm(() => {
       return node;
     }
   };
-  renderCache = new WeakMap;
 });
 
 // src/app.js
@@ -3239,6 +3242,7 @@ class App {
     };
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
+    this._renderState = null;
   }
   get state() {
     return this.transactor.state;
@@ -3345,7 +3349,10 @@ class App {
   render() {
     const root = this.state.val;
     const stack = this.makeStack(root);
-    return render(this.renderer.renderRoot(stack, root), this.rootNode, this._renderOpts);
+    const { renderer, rootNode, _renderOpts, _renderState } = this;
+    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    this._renderState = newState;
+    return newState.dom;
   }
   onChange(callback) {
     this.transactor.state.onChange(callback);
@@ -7716,7 +7723,7 @@ class Renderer {
   renderToDOM(stack, val) {
     const rootNode = document.createElement("div");
     const rOpts = { document };
-    render(h("div", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
+    render(h("DIV", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
     return rootNode.childNodes[0];
   }
   renderToString(stack, val, cleanAttrs = true) {
@@ -7740,13 +7747,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 +7767,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 +7780,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;
@@ -8069,9 +8071,6 @@ MODULE CONVENTION
 
     export function getRoot()             // optional; returned by info
 
-  The legacy \`getStoryBookSection()\` name fails fast with
-  EXAMPLES_SHAPE_MISMATCH — rename it to \`getExamples\`.
-
 COMMANDS (require <module-path>)
   info
       Summarize which getX() exports are present and count components,