tutuca 0.9.67 → 0.9.69

package/dist/tutuca-cli.js

@@ -5367,7 +5367,11 @@ var init_attribute = __esm(() => {
 });
 
 // src/vdom.js
-function applyProperties(node, props, _previous) {
+function childOpts(vnode, ns, opts) {
+  const target = ns === SVG_NS && isForeignObject(vnode.tag) ? null : ns;
+  return target === (opts.namespace ?? null) ? opts : { ...opts, namespace: target };
+}
+function applyProperties(node, props) {
   const namespaced = isNamespaced(node);
   for (const name in props)
     setProp2(node, name, props[name], namespaced);
@@ -5376,8 +5380,11 @@ function setProp2(node, name, value, namespaced) {
   if (name === "dangerouslySetInnerHTML") {
     if (value === undefined)
       node.replaceChildren();
-    else
-      node.innerHTML = value.__html ?? "";
+    else {
+      const html = value.__html ?? "";
+      if (html !== node.innerHTML)
+        node.innerHTML = html;
+    }
     return;
   }
   if (typeof value === "function")
@@ -5393,6 +5400,13 @@ function setProp2(node, name, value, namespaced) {
   else
     node.setAttribute(name, value);
 }
+function applyValueLast(node, value) {
+  if (node.tagName === "PROGRESS" && (value == null || value === 0)) {
+    node.removeAttribute("value");
+  } else {
+    setProp2(node, "value", value, isNamespaced(node));
+  }
+}
 
 class VBase {
 }
@@ -5454,18 +5468,37 @@ function morphNode(domNode, source, target, opts) {
     }
     if (type === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
-      const isSelect = source.tag === "SELECT";
+      let pendingValue;
+      let pendingChecked;
+      let applyValue = false;
+      let applyChecked = false;
       if (propsDiff) {
-        if (isSelect && "value" in propsDiff) {
-          const { value: _v, ...rest } = propsDiff;
-          applyProperties(domNode, rest, source.attrs);
+        if ("value" in propsDiff || "checked" in propsDiff) {
+          const { value, checked, ...rest } = propsDiff;
+          applyProperties(domNode, rest);
+          if ("value" in propsDiff) {
+            pendingValue = value;
+            applyValue = true;
+          }
+          if ("checked" in propsDiff) {
+            pendingChecked = checked;
+            applyChecked = true;
+          }
         } else
-          applyProperties(domNode, propsDiff, source.attrs);
+          applyProperties(domNode, propsDiff);
+      }
+      if (!target.attrs.dangerouslySetInnerHTML) {
+        const ns = effectiveNs(target, opts);
+        morphChildren(domNode, source.childs, target.childs, childOpts(target, ns, opts));
+      }
+      if (!applyValue && source.tag === "SELECT" && target.attrs.value !== undefined) {
+        pendingValue = target.attrs.value;
+        applyValue = true;
       }
-      if (!target.attrs.dangerouslySetInnerHTML)
-        morphChildren(domNode, source.childs, target.childs, opts);
-      if (isSelect && target.attrs.value !== undefined)
-        applyProperties(domNode, { value: target.attrs.value }, source.attrs);
+      if (applyValue)
+        applyValueLast(domNode, pendingValue);
+      if (applyChecked)
+        setProp2(domNode, "checked", pendingChecked, false);
       return domNode;
     }
     if (type === 11) {
@@ -5569,16 +5602,26 @@ function h(tagName, properties, children, namespace) {
         props[propName] = propVal;
     }
   }
+  if (namespace == null) {
+    const lower = tagName.toLowerCase();
+    if (lower === "svg") {
+      namespace = SVG_NS;
+      tagName = "svg";
+    } else if (lower === "math") {
+      namespace = MATH_NS;
+      tagName = "math";
+    }
+  }
   const c = tagName.charCodeAt(0);
-  const tag = namespace == null && c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
+  const tag = namespace == null && c >= 97 && c <= 122 && tagName === tagName.toLowerCase() ? tagName.toUpperCase() : tagName;
   const normalizedChildren = [];
   addChild(normalizedChildren, children);
   return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
-var HTML_NS = "http://www.w3.org/1999/xhtml", isNamespaced = (node) => {
+var HTML_NS = "http://www.w3.org/1999/xhtml", SVG_NS = "http://www.w3.org/2000/svg", MATH_NS = "http://www.w3.org/1998/Math/MathML", isNamespaced = (node) => {
   const ns = node.namespaceURI;
   return ns !== null && ns !== HTML_NS;
-}, NEVER_ASSIGN, getKey = (child) => child instanceof VNode2 ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode2;
+}, isForeignObject = (tag) => tag.length === 13 && tag.toLowerCase() === "foreignobject", effectiveNs = (vnode, opts) => vnode.namespace ?? opts.namespace ?? null, NEVER_ASSIGN, getKey = (child) => child instanceof VNode2 ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode2;
 var init_vdom = __esm(() => {
   NEVER_ASSIGN = new Set([
     "width",
@@ -5676,15 +5719,23 @@ var init_vdom = __esm(() => {
     }
     toDom(opts) {
       const doc = opts.document;
-      const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
-      if (this.tag === "SELECT" && "value" in this.attrs) {
-        const { value, ...rest } = this.attrs;
-        applyProperties(node, rest, {});
-        appendChildNodes(node, this.childs, opts);
-        applyProperties(node, { value }, {});
+      const ns = effectiveNs(this, opts);
+      const tag = ns !== null && this.tag === this.tag.toUpperCase() ? this.tag.toLowerCase() : this.tag;
+      const attrs = this.attrs;
+      const createOpts = attrs.is != null ? { is: attrs.is } : undefined;
+      const node = ns === null ? doc.createElement(tag, createOpts) : doc.createElementNS(ns, tag, createOpts);
+      const cOpts = childOpts(this, ns, opts);
+      if ("value" in attrs || "checked" in attrs) {
+        const { value, checked, ...rest } = attrs;
+        applyProperties(node, rest);
+        appendChildNodes(node, this.childs, cOpts);
+        if (value !== undefined)
+          applyValueLast(node, value);
+        if (checked !== undefined)
+          setProp2(node, "checked", checked, false);
       } else {
-        applyProperties(node, this.attrs, {});
-        appendChildNodes(node, this.childs, opts);
+        applyProperties(node, attrs);
+        appendChildNodes(node, this.childs, cOpts);
       }
       return node;
     }
@@ -5782,16 +5833,16 @@ function parseXOpVal(opName, value, px, parserFn) {
   return val;
 }
 function processXExtras(node, attrs, opName, startIdx, px) {
-  const consumed = X_OP_CONSUMED[opName];
-  const wrappable = X_OP_WRAPPABLE.has(opName);
+  const { consumed, wrappable } = X_OPS[opName];
   const wrappers = [];
   for (let i = startIdx;i < attrs.length; i++) {
     const a = attrs[i];
     const aName = a.name;
     if (consumed.has(aName))
       continue;
-    if (wrappable && X_ATTR_WRAPPERS[aName]) {
-      wrappers.push([X_ATTR_WRAPPERS[aName], vp.parseBool(a.value, px)]);
+    const wrapper = wrappable ? X_OPS[aName]?.wrapper : null;
+    if (wrapper) {
+      wrappers.push([wrapper, vp.parseBool(a.value, px)]);
       continue;
     }
     const issueInfo = { op: opName, name: aName, value: a.value };
@@ -5827,6 +5878,12 @@ function makeWrapperNode(data, px) {
   }
   return node;
 }
+function dynRenderStep(comp, name, key) {
+  const p = resolveDynProducer(comp, name);
+  if (!p)
+    return null;
+  return key === undefined ? new DynStep(p.producerCompId, p.producerSteps) : new DynEachStep(p.producerCompId, p.producerSteps, key);
+}
 
 class IterInfo {
   constructor(val, whenVal, loopWithVal, enrichWithVal) {
@@ -5843,6 +5900,9 @@ class IterInfo {
     return { seq, filter, loopWith, enricher };
   }
 }
+function xOp(consumed = [], { wrappable = false, wrapper = null } = {}) {
+  return { consumed: new Set(consumed), wrappable, wrapper };
+}
 
 class ParseContext {
   constructor(document2, Text, Comment, nodes, events, macroNodes, frame, parent) {
@@ -5916,29 +5976,29 @@ class ParseContext {
     console.warn(`tutuca parse issue [${kind}]`, info);
   }
 }
+function trimEdgeWhite(node) {
+  if (!node.isWhiteSpace?.())
+    return false;
+  node.condenseWhiteSpace();
+  return true;
+}
 function condenseChildsWhites(childs) {
   if (childs.length === 0)
     return childs;
-  let changed = false;
-  if (childs[0].isWhiteSpace?.()) {
-    childs[0].condenseWhiteSpace();
-    changed = true;
-  }
   const last = childs.length - 1;
-  if (last > 0 && childs[last].isWhiteSpace?.()) {
-    childs[last].condenseWhiteSpace();
-    changed = true;
-  }
+  let emptied = trimEdgeWhite(childs[0]);
+  if (last > 0 && trimEdgeWhite(childs[last]))
+    emptied = true;
   for (let i = 1;i < last; i++) {
     const cur = childs[i];
-    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
-      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
-      cur.condenseWhiteSpace(bothBlock ? "" : " ");
-      if (bothBlock)
-        changed = true;
-    }
+    if (!(cur.isWhiteSpace?.() && cur.hasNewLine()))
+      continue;
+    const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+    cur.condenseWhiteSpace(bothBlock ? "" : " ");
+    if (bothBlock)
+      emptied = true;
   }
-  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
+  return emptied ? childs.filter((c) => !isEmptyText(c)) : childs;
 }
 
 class NodeEvents {
@@ -5994,10 +6054,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, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ iterData: { seq } }), X_OP_CONSUMED, X_OP_WRAPPABLE, X_ATTR_WRAPPERS, 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) => {
+var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ iterData: { seq } }), X_OPS, 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;
+}, isEmptyText = (c) => c instanceof TextNode && c.val === "", 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();
@@ -6201,10 +6261,8 @@ var init_anode = __esm(() => {
       return rx.renderIt(newStack, this, "", this.viewId);
     }
     toPathStep(ctx) {
-      if (this.val instanceof DynVal) {
-        const p = resolveDynProducer(ctx.comp, this.val.name);
-        return p ? new DynStep(p.producerCompId, p.producerSteps) : null;
-      }
+      if (this.val instanceof DynVal)
+        return dynRenderStep(ctx.comp, this.val.name);
       return super.toPathStep(ctx);
     }
   };
@@ -6219,10 +6277,8 @@ var init_anode = __esm(() => {
         return null;
       const nextNode = next.resolveNode();
       if (nextNode instanceof EachNode && next.hasKey) {
-        if (nextNode.val instanceof DynVal) {
-          const p = resolveDynProducer(ctx.comp, nextNode.val.name);
-          return p ? new DynEachStep(p.producerCompId, p.producerSteps, next.key) : null;
-        }
+        if (nextNode.val instanceof DynVal)
+          return dynRenderStep(ctx.comp, nextNode.val.name, next.key);
         return new EachRenderItStep(nextNode.val.name, next.key);
       }
       return null;
@@ -6237,12 +6293,8 @@ var init_anode = __esm(() => {
       return rx.renderEach(stack, this.iterInfo, this, this.viewId);
     }
     toPathStep(ctx) {
-      if (this.val instanceof DynVal) {
-        if (!ctx.hasKey)
-          return null;
-        const p = resolveDynProducer(ctx.comp, this.val.name);
-        return p ? new DynEachStep(p.producerCompId, p.producerSteps, ctx.key) : null;
-      }
+      if (this.val instanceof DynVal)
+        return ctx.hasKey ? dynRenderStep(ctx.comp, this.val.name, ctx.key) : null;
       return super.toPathStep(ctx);
     }
     static parse(px, vp2, s, as, attrs) {
@@ -6345,17 +6397,15 @@ var init_anode = __esm(() => {
     }
     static register = true;
   };
-  X_OP_CONSUMED = {
-    slot: new Set,
-    text: new Set,
-    render: new Set(["as"]),
-    "render-it": new Set(["as"]),
-    "render-each": new Set(["as", "when", "loop-with"]),
-    show: new Set,
-    hide: new Set
-  };
-  X_OP_WRAPPABLE = new Set(["text", "render", "render-it", "render-each"]);
-  X_ATTR_WRAPPERS = { show: ShowNode, hide: HideNode };
+  X_OPS = {
+    slot: xOp(),
+    text: xOp([], { wrappable: true }),
+    render: xOp(["as"], { wrappable: true }),
+    "render-it": xOp(["as"], { wrappable: true }),
+    "render-each": xOp(["as", "when", "loop-with"], { wrappable: true }),
+    show: xOp([], { wrapper: ShowNode }),
+    hide: xOp([], { wrapper: HideNode })
+  };
   WRAPPER_NODES = {
     slot: SlotNode,
     show: ShowNode,

package/dist/tutuca-dev.ext.js

@@ -4635,10 +4635,18 @@ class RequestHandler {
 
 // src/vdom.js
 var HTML_NS = "http://www.w3.org/1999/xhtml";
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATH_NS = "http://www.w3.org/1998/Math/MathML";
 var isNamespaced = (node) => {
   const ns = node.namespaceURI;
   return ns !== null && ns !== HTML_NS;
 };
+var isForeignObject = (tag) => tag.length === 13 && tag.toLowerCase() === "foreignobject";
+var effectiveNs = (vnode, opts) => vnode.namespace ?? opts.namespace ?? null;
+function childOpts(vnode, ns, opts) {
+  const target = ns === SVG_NS && isForeignObject(vnode.tag) ? null : ns;
+  return target === (opts.namespace ?? null) ? opts : { ...opts, namespace: target };
+}
 var NEVER_ASSIGN = new Set([
   "width",
   "height",
@@ -4652,7 +4660,7 @@ var NEVER_ASSIGN = new Set([
   "role",
   "popover"
 ]);
-function applyProperties(node, props, _previous) {
+function applyProperties(node, props) {
   const namespaced = isNamespaced(node);
   for (const name in props)
     setProp(node, name, props[name], namespaced);
@@ -4661,8 +4669,11 @@ function setProp(node, name, value, namespaced) {
   if (name === "dangerouslySetInnerHTML") {
     if (value === undefined)
       node.replaceChildren();
-    else
-      node.innerHTML = value.__html ?? "";
+    else {
+      const html = value.__html ?? "";
+      if (html !== node.innerHTML)
+        node.innerHTML = html;
+    }
     return;
   }
   if (typeof value === "function")
@@ -4678,6 +4689,13 @@ function setProp(node, name, value, namespaced) {
   else
     node.setAttribute(name, value);
 }
+function applyValueLast(node, value) {
+  if (node.tagName === "PROGRESS" && (value == null || value === 0)) {
+    node.removeAttribute("value");
+  } else {
+    setProp(node, "value", value, isNamespaced(node));
+  }
+}
 
 class VBase {
 }
@@ -4796,15 +4814,23 @@ class VNode extends VBase {
   }
   toDom(opts) {
     const doc = opts.document;
-    const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
-    if (this.tag === "SELECT" && "value" in this.attrs) {
-      const { value, ...rest } = this.attrs;
-      applyProperties(node, rest, {});
-      appendChildNodes(node, this.childs, opts);
-      applyProperties(node, { value }, {});
+    const ns = effectiveNs(this, opts);
+    const tag = ns !== null && this.tag === this.tag.toUpperCase() ? this.tag.toLowerCase() : this.tag;
+    const attrs = this.attrs;
+    const createOpts = attrs.is != null ? { is: attrs.is } : undefined;
+    const node = ns === null ? doc.createElement(tag, createOpts) : doc.createElementNS(ns, tag, createOpts);
+    const cOpts = childOpts(this, ns, opts);
+    if ("value" in attrs || "checked" in attrs) {
+      const { value, checked, ...rest } = attrs;
+      applyProperties(node, rest);
+      appendChildNodes(node, this.childs, cOpts);
+      if (value !== undefined)
+        applyValueLast(node, value);
+      if (checked !== undefined)
+        setProp(node, "checked", checked, false);
     } else {
-      applyProperties(node, this.attrs, {});
-      appendChildNodes(node, this.childs, opts);
+      applyProperties(node, attrs);
+      appendChildNodes(node, this.childs, cOpts);
     }
     return node;
   }
@@ -4841,18 +4867,37 @@ function morphNode(domNode, source, target, opts) {
     }
     if (type3 === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
-      const isSelect = source.tag === "SELECT";
+      let pendingValue;
+      let pendingChecked;
+      let applyValue = false;
+      let applyChecked = false;
       if (propsDiff) {
-        if (isSelect && "value" in propsDiff) {
-          const { value: _v, ...rest } = propsDiff;
-          applyProperties(domNode, rest, source.attrs);
+        if ("value" in propsDiff || "checked" in propsDiff) {
+          const { value, checked, ...rest } = propsDiff;
+          applyProperties(domNode, rest);
+          if ("value" in propsDiff) {
+            pendingValue = value;
+            applyValue = true;
+          }
+          if ("checked" in propsDiff) {
+            pendingChecked = checked;
+            applyChecked = true;
+          }
         } else
-          applyProperties(domNode, propsDiff, source.attrs);
+          applyProperties(domNode, propsDiff);
+      }
+      if (!target.attrs.dangerouslySetInnerHTML) {
+        const ns = effectiveNs(target, opts);
+        morphChildren(domNode, source.childs, target.childs, childOpts(target, ns, opts));
+      }
+      if (!applyValue && source.tag === "SELECT" && target.attrs.value !== undefined) {
+        pendingValue = target.attrs.value;
+        applyValue = true;
       }
-      if (!target.attrs.dangerouslySetInnerHTML)
-        morphChildren(domNode, source.childs, target.childs, opts);
-      if (isSelect && target.attrs.value !== undefined)
-        applyProperties(domNode, { value: target.attrs.value }, source.attrs);
+      if (applyValue)
+        applyValueLast(domNode, pendingValue);
+      if (applyChecked)
+        setProp(domNode, "checked", pendingChecked, false);
       return domNode;
     }
     if (type3 === 11) {
@@ -4956,8 +5001,18 @@ function h(tagName, properties, children, namespace) {
         props[propName] = propVal;
     }
   }
+  if (namespace == null) {
+    const lower = tagName.toLowerCase();
+    if (lower === "svg") {
+      namespace = SVG_NS;
+      tagName = "svg";
+    } else if (lower === "math") {
+      namespace = MATH_NS;
+      tagName = "math";
+    }
+  }
   const c = tagName.charCodeAt(0);
-  const tag = namespace == null && c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
+  const tag = namespace == null && c >= 97 && c <= 122 && tagName === tagName.toLowerCase() ? tagName.toUpperCase() : tagName;
   const normalizedChildren = [];
   addChild(normalizedChildren, children);
   return new VNode(tag, props, normalizedChildren, key, namespace);
@@ -5209,16 +5264,16 @@ function parseXOpVal(opName, value, px, parserFn) {
   return val;
 }
 function processXExtras(node, attrs, opName, startIdx, px) {
-  const consumed = X_OP_CONSUMED[opName];
-  const wrappable = X_OP_WRAPPABLE.has(opName);
+  const { consumed, wrappable } = X_OPS[opName];
   const wrappers = [];
   for (let i = startIdx;i < attrs.length; i++) {
     const a = attrs[i];
     const aName = a.name;
     if (consumed.has(aName))
       continue;
-    if (wrappable && X_ATTR_WRAPPERS[aName]) {
-      wrappers.push([X_ATTR_WRAPPERS[aName], vp.parseBool(a.value, px)]);
+    const wrapper = wrappable ? X_OPS[aName]?.wrapper : null;
+    if (wrapper) {
+      wrappers.push([wrapper, vp.parseBool(a.value, px)]);
       continue;
     }
     const issueInfo = { op: opName, name: aName, value: a.value };
@@ -5310,6 +5365,12 @@ class RenderViewId extends ANode {
   }
   setDataAttr(_key, _val) {}
 }
+function dynRenderStep(comp, name, key) {
+  const p = resolveDynProducer(comp, name);
+  if (!p)
+    return null;
+  return key === undefined ? new DynStep(p.producerCompId, p.producerSteps) : new DynEachStep(p.producerCompId, p.producerSteps, key);
+}
 
 class RenderNode extends RenderViewId {
   render(stack, rx) {
@@ -5317,10 +5378,8 @@ class RenderNode extends RenderViewId {
     return rx.renderIt(newStack, this, "", this.viewId);
   }
   toPathStep(ctx) {
-    if (this.val instanceof DynVal) {
-      const p = resolveDynProducer(ctx.comp, this.val.name);
-      return p ? new DynStep(p.producerCompId, p.producerSteps) : null;
-    }
+    if (this.val instanceof DynVal)
+      return dynRenderStep(ctx.comp, this.val.name);
     return super.toPathStep(ctx);
   }
 }
@@ -5336,10 +5395,8 @@ class RenderItNode extends RenderViewId {
       return null;
     const nextNode = next.resolveNode();
     if (nextNode instanceof EachNode && next.hasKey) {
-      if (nextNode.val instanceof DynVal) {
-        const p = resolveDynProducer(ctx.comp, nextNode.val.name);
-        return p ? new DynEachStep(p.producerCompId, p.producerSteps, next.key) : null;
-      }
+      if (nextNode.val instanceof DynVal)
+        return dynRenderStep(ctx.comp, nextNode.val.name, next.key);
       return new EachRenderItStep(nextNode.val.name, next.key);
     }
     return null;
@@ -5355,12 +5412,8 @@ class RenderEachNode extends RenderViewId {
     return rx.renderEach(stack, this.iterInfo, this, this.viewId);
   }
   toPathStep(ctx) {
-    if (this.val instanceof DynVal) {
-      if (!ctx.hasKey)
-        return null;
-      const p = resolveDynProducer(ctx.comp, this.val.name);
-      return p ? new DynEachStep(p.producerCompId, p.producerSteps, ctx.key) : null;
-    }
+    if (this.val instanceof DynVal)
+      return ctx.hasKey ? dynRenderStep(ctx.comp, this.val.name, ctx.key) : null;
     return super.toPathStep(ctx);
   }
   static parse(px, vp2, s, as, attrs) {
@@ -5490,17 +5543,18 @@ class IterInfo {
 }
 var filterAlwaysTrue = (_v, _k, _seq) => true;
 var nullLoopWith = (seq) => ({ iterData: { seq } });
-var X_OP_CONSUMED = {
-  slot: new Set,
-  text: new Set,
-  render: new Set(["as"]),
-  "render-it": new Set(["as"]),
-  "render-each": new Set(["as", "when", "loop-with"]),
-  show: new Set,
-  hide: new Set
-};
-var X_OP_WRAPPABLE = new Set(["text", "render", "render-it", "render-each"]);
-var X_ATTR_WRAPPERS = { show: ShowNode, hide: HideNode };
+function xOp(consumed = [], { wrappable = false, wrapper = null } = {}) {
+  return { consumed: new Set(consumed), wrappable, wrapper };
+}
+var X_OPS = {
+  slot: xOp(),
+  text: xOp([], { wrappable: true }),
+  render: xOp(["as"], { wrappable: true }),
+  "render-it": xOp(["as"], { wrappable: true }),
+  "render-each": xOp(["as", "when", "loop-with"], { wrappable: true }),
+  show: xOp([], { wrapper: ShowNode }),
+  hide: xOp([], { wrapper: HideNode })
+};
 var WRAPPER_NODES = {
   slot: SlotNode,
   show: ShowNode,
@@ -5588,29 +5642,30 @@ var isBlockDomNode = (n) => {
   const node = n instanceof FragmentNode ? n.childs[0] : n;
   return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
 };
+var isEmptyText = (c) => c instanceof TextNode && c.val === "";
+function trimEdgeWhite(node) {
+  if (!node.isWhiteSpace?.())
+    return false;
+  node.condenseWhiteSpace();
+  return true;
+}
 function condenseChildsWhites(childs) {
   if (childs.length === 0)
     return childs;
-  let changed = false;
-  if (childs[0].isWhiteSpace?.()) {
-    childs[0].condenseWhiteSpace();
-    changed = true;
-  }
   const last = childs.length - 1;
-  if (last > 0 && childs[last].isWhiteSpace?.()) {
-    childs[last].condenseWhiteSpace();
-    changed = true;
-  }
+  let emptied = trimEdgeWhite(childs[0]);
+  if (last > 0 && trimEdgeWhite(childs[last]))
+    emptied = true;
   for (let i = 1;i < last; i++) {
     const cur = childs[i];
-    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
-      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
-      cur.condenseWhiteSpace(bothBlock ? "" : " ");
-      if (bothBlock)
-        changed = true;
-    }
+    if (!(cur.isWhiteSpace?.() && cur.hasNewLine()))
+      continue;
+    const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+    cur.condenseWhiteSpace(bothBlock ? "" : " ");
+    if (bothBlock)
+      emptied = true;
   }
-  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
+  return emptied ? childs.filter((c) => !isEmptyText(c)) : childs;
 }
 
 class View {