tutuca 0.9.26 → 0.9.28

package/dist/tutuca-extra.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++) {
@@ -920,8 +918,8 @@ class TextNode extends BaseNode {
     }
     return false;
   }
-  condenseWhiteSpace() {
-    this.val = "";
+  condenseWhiteSpace(replacement = "") {
+    this.val = replacement;
   }
   isConstant() {
     return true;
@@ -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);
@@ -1061,7 +1058,7 @@ class ANode extends BaseNode {
       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}`);
   }
@@ -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)
@@ -1377,29 +1365,35 @@ class ParseContext {
   }
   onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall) {}
 }
-var isTextNodeAllBlanks = (n) => n instanceof TextNode && n.isWhiteSpace();
-var isFirstDomNode = (n) => n instanceof DomNode || n instanceof FragmentNode && n.childs[0] instanceof DomNode;
+var _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";
+var HTML_BLOCK_TAGS = new Set(_htmlBlockTags.split(","));
+var isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+};
 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 View {
@@ -1438,12 +1432,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;
   }
 }
@@ -1497,10 +1490,8 @@ function compileModifiers(eventName, names) {
 
 // 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 };
   }
@@ -1509,7 +1500,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)
@@ -1518,41 +1509,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 };
   }
 }
@@ -1774,8 +1775,8 @@ class Component {
 `);
   }
 }
-function defaultOnStackEnter(stack) {
-  return stack;
+function defaultOnStackEnter() {
+  return null;
 }
 
 // src/stack.js
@@ -1836,7 +1837,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;
@@ -1851,7 +1852,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;
@@ -1859,17 +1861,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);
@@ -2374,10 +2385,13 @@ class VNode extends VBase {
   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) {
@@ -2452,23 +2466,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) {
@@ -2547,24 +2558,20 @@ function morphChildren(parentDom, oldChilds, newChilds, opts) {
     if (!used[i] && domNodes[i].parentNode === parentDom)
       parentDom.removeChild(domNodes[i]);
 }
-var renderCache = new WeakMap;
-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) {
@@ -2615,6 +2622,7 @@ class App {
     };
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
+    this._renderState = null;
   }
   get state() {
     return this.transactor.state;
@@ -2721,7 +2729,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);
@@ -7700,7 +7711,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) {
@@ -7724,13 +7735,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) {
@@ -7742,8 +7755,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);
       }
     });
@@ -7756,25 +7768,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;