tutuca 0.9.62 → 0.9.64

package/dist/tutuca-dev.js

@@ -8155,7 +8155,12 @@ class ValParser {
         const newS = px.frame.macroVars?.[name];
         if (newS !== undefined) {
           const tokens = tokenizeValue(newS.trim());
-          return tokens.length === 1 ? this.parseToken(tokens[0], px) : null;
+          if (tokens.length !== 1)
+            return null;
+          const val = this.parseToken(tokens[0], px);
+          if (val instanceof ConstVal)
+            val.fromMacroVar = true;
+          return val;
         }
         px.onParseIssue("bad-value", { role: "macro-var", name, value: s });
         return null;
@@ -8379,7 +8384,7 @@ class StrTplVal extends VarVal {
   toLiteralSource() {
     let out = "";
     for (const v of this.vals) {
-      if (!(v instanceof ConstVal))
+      if (!(v instanceof ConstVal) || v.fromMacroVar)
         return null;
       out += v.val;
     }
@@ -8395,9 +8400,10 @@ class StrTplVal extends VarVal {
     }
     let lo = 0;
     let hi = vals.length;
-    while (lo < hi && vals[lo] instanceof ConstVal && vals[lo].val === "")
+    const isTrimmable = (v) => v instanceof ConstVal && v.val === "" && !v.fromMacroVar;
+    while (lo < hi && isTrimmable(vals[lo]))
       lo++;
-    while (hi > lo && vals[hi - 1] instanceof ConstVal && vals[hi - 1].val === "")
+    while (hi > lo && isTrimmable(vals[hi - 1]))
       hi--;
     return new StrTplVal(lo === 0 && hi === vals.length ? vals : vals.slice(lo, hi));
   }
@@ -8817,197 +8823,531 @@ class RequestHandler {
   }
 }
 
-// src/anode.js
-function resolveDynProducer(comp, dynName) {
-  const dyn = comp?.dynamic?.[dynName];
-  if (dyn == null)
-    return null;
-  let producerComp, producerDyn;
-  if (dyn.compName != null) {
-    producerComp = comp.scope?.lookupComponent(dyn.compName);
-    producerDyn = producerComp?.dynamic?.[dyn.dynName];
-  } else {
-    producerComp = comp;
-    producerDyn = dyn;
+// src/vdom.js
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+var isNamespaced = (node) => {
+  const ns = node.namespaceURI;
+  return ns !== null && ns !== HTML_NS;
+};
+function applyProperties(node, props, previous) {
+  const namespaced = isNamespaced(node);
+  for (const propName in props) {
+    const propValue = props[propName];
+    if (propValue === undefined)
+      removeProperty(node, propName, previous);
+    else if (propName === "dangerouslySetInnerHTML")
+      node.innerHTML = propValue.__html ?? "";
+    else if (propName === "className")
+      node.setAttribute("class", propValue);
+    else if (namespaced || isHtmlAttribute(propName))
+      node.setAttribute(propName, propValue);
+    else
+      node[propName] = propValue;
   }
-  if (producerComp == null || producerDyn == null)
-    return null;
-  const pi = producerDyn.val?.toPathItem?.() ?? null;
-  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
 }
-
-class BaseNode {
-  render(_stack, _rx) {
-    return null;
-  }
-  setDataAttr(key, val) {
-    console.warn("setDataAttr not implemented for", this, { key, val });
-  }
-  isConstant() {
-    return false;
-  }
-  optimize() {}
+function removeProperty(node, propName, previous) {
+  const previousValue = previous[propName];
+  if (propName === "dangerouslySetInnerHTML")
+    node.replaceChildren();
+  else if (propName === "className")
+    node.removeAttribute("class");
+  else if (propName === "htmlFor")
+    node.removeAttribute("for");
+  else if (isNamespaced(node) || typeof previousValue === "string" || isHtmlAttribute(propName))
+    node.removeAttribute(propName);
+  else
+    node[propName] = null;
 }
 
-class TextNode extends BaseNode {
-  constructor(val) {
-    super();
-    this.val = val;
-  }
-  render(_stack, _rx) {
-    return this.val;
-  }
-  isWhiteSpace() {
-    for (let i = 0;i < this.val.length; i++) {
-      const c = this.val.charCodeAt(i);
-      if (!(c === 32 || c === 10 || c === 9 || c === 13))
-        return false;
-    }
-    return true;
-  }
-  hasNewLine() {
-    for (let i = 0;i < this.val.length; i++) {
-      const c = this.val.charCodeAt(i);
-      if (c === 10 || c === 13)
-        return true;
-    }
-    return false;
-  }
-  condenseWhiteSpace(replacement = "") {
-    this.val = replacement;
-  }
-  isConstant() {
+class VBase {
+}
+var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
+var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
+function childsEqual(a, b) {
+  if (a === b)
     return true;
-  }
-  setDataAttr(_key, _val) {}
+  for (let i = 0;i < a.length; i++)
+    if (!a[i].isEqualTo(b[i]))
+      return false;
+  return true;
 }
-
-class CommentNode extends TextNode {
-  render(_stack, rx) {
-    return rx.renderComment(this.val);
-  }
+function appendChildNodes(parent, childs, opts) {
+  for (const child of childs)
+    parent.appendChild(child.toDom(opts));
 }
-function optimizeChilds(childs) {
-  for (let i = 0;i < childs.length; i++) {
-    const child = childs[i];
-    if (child.isConstant())
-      childs[i] = new RenderOnceNode(child);
+function addChild(normalizedChildren, child) {
+  if (child == null)
+    return;
+  if (isIterable(child)) {
+    for (const c of child)
+      addChild(normalizedChildren, c);
+  } else if (child instanceof VBase) {
+    if (child instanceof VFragment)
+      normalizedChildren.push(...child.childs);
     else
-      child.optimize();
-  }
-}
-function optimizeNode(node) {
-  if (node.isConstant())
-    return new RenderOnceNode(node);
-  node.optimize();
-  return node;
+      normalizedChildren.push(child);
+  } else
+    normalizedChildren.push(new VText(child));
 }
 
-class ChildsNode extends BaseNode {
-  constructor(childs) {
+class VText extends VBase {
+  constructor(text) {
     super();
-    this.childs = childs;
+    this.text = String(text);
   }
-  isConstant() {
-    return this.childs.every((v) => v.isConstant());
+  get nodeType() {
+    return 3;
   }
-  optimize() {
-    optimizeChilds(this.childs);
+  isEqualTo(other) {
+    return other instanceof VText && this.text === other.text;
+  }
+  toDom(opts) {
+    return opts.document.createTextNode(this.text);
   }
 }
 
-class DomNode extends ChildsNode {
-  constructor(tagName, attrs, childs) {
-    super(childs);
-    this.tagName = tagName;
-    this.attrs = attrs;
+class VComment extends VBase {
+  constructor(text) {
+    super();
+    this.text = text;
   }
-  render(stack, rx) {
-    const childNodes = new Array(this.childs.length);
-    for (let i = 0;i < childNodes.length; i++)
-      childNodes[i] = this.childs[i]?.render?.(stack, rx) ?? null;
-    return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes);
+  get nodeType() {
+    return 8;
   }
-  setDataAttr(key, val) {
-    this.attrs.setDataAttr(key, val);
+  isEqualTo(other) {
+    return other instanceof VComment && this.text === other.text;
   }
-  isConstant() {
-    return this.attrs.isConstant() && super.isConstant();
+  toDom(opts) {
+    return opts.document.createComment(this.text);
   }
 }
 
-class FragmentNode extends ChildsNode {
-  render(stack, rx) {
-    return rx.renderFragment(this.childs.map((c) => c?.render(stack, rx)));
+class VFragment extends VBase {
+  constructor(childs) {
+    super();
+    this.childs = [];
+    addChild(this.childs, childs);
   }
-  setDataAttr(key, val) {
-    for (const child of this.childs)
-      child.setDataAttr(key, val);
+  get nodeType() {
+    return 11;
+  }
+  isEqualTo(other) {
+    if (!(other instanceof VFragment) || this.childs.length !== other.childs.length)
+      return false;
+    return childsEqual(this.childs, other.childs);
+  }
+  toDom(opts) {
+    const fragment = opts.document.createDocumentFragment();
+    appendChildNodes(fragment, this.childs, opts);
+    return fragment;
   }
 }
-var maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs);
-var VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
 
-class ANode extends BaseNode {
-  constructor(nodeId, val) {
+class VNode2 extends VBase {
+  constructor(tag, attrs, childs, key, namespace) {
     super();
-    this.nodeId = nodeId;
-    this.val = val;
+    this.tag = tag;
+    this.attrs = attrs ?? {};
+    this.childs = childs ?? [];
+    this.key = key != null ? String(key) : undefined;
+    this.namespace = typeof namespace === "string" ? namespace : null;
   }
-  toPathStep(ctx) {
-    return ctx.applyKey(this.val?.toPathItem?.() ?? null);
+  get nodeType() {
+    return 1;
   }
-  static parse(html, px) {
-    const nodes = px.parseHTML(html);
-    if (nodes.length === 0)
-      return new CommentNode("Empty View in ANode.parse");
-    if (nodes.length === 1)
-      return ANode.fromDOM(nodes[0], px);
-    const childs = [];
-    for (let i = 0;i < nodes.length; i++) {
-      const child = ANode.fromDOM(nodes[i], px);
-      if (child !== null)
-        childs.push(child);
-    }
-    const trimmed = condenseChildsWhites(childs);
-    if (trimmed.length === 0)
-      return new CommentNode("Empty View in ANode.parse");
-    return maybeFragment(trimmed);
+  isSameKind(other) {
+    return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
   }
-  static fromDOM(node, px) {
-    if (node instanceof px.Text)
-      return new TextNode(node.textContent);
-    else if (node instanceof px.Comment)
-      return new CommentNode(node.textContent);
-    const { childNodes, attributes: attrs, tagName: tag } = node;
-    const childs = [];
-    for (let i = 0;i < childNodes.length; i++) {
-      const child = ANode.fromDOM(childNodes[i], px);
-      if (child !== null)
-        childs.push(child);
+  isEqualTo(other) {
+    if (this === other)
+      return true;
+    if (!(other instanceof VNode2) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
+      return false;
     }
-    const prevTag = px.currentTag;
-    px.currentTag = tag;
-    try {
-      const isPseudoX = attrs[0]?.name === "@x";
-      if (tag === "X" || isPseudoX)
-        return parseXOp(attrs, childs, isPseudoX ? 1 : 0, px);
-      else if (tag.charCodeAt(1) === 58 && tag.charCodeAt(0) === 88) {
-        const macroName = tag.slice(2).toLowerCase();
-        if (macroName === "slot") {
-          const slotName = attrs.getNamedItem("name")?.value ?? "_";
-          return px.frame.macroSlots[slotName] ?? maybeFragment(childs);
-        }
-        const [nAttrs, wrappers] = Attributes.parse(attrs, px, true);
-        px.onAttributes(nAttrs, wrappers, null, true, tag);
-        return wrap(px.newMacroNode(macroName, nAttrs.toMacroVars(), childs), px, wrappers);
-      } else if (VALID_NODE_RE.test(tag)) {
+    if (this.attrs !== other.attrs) {
+      for (const key in this.attrs)
+        if (this.attrs[key] !== other.attrs[key])
+          return false;
+      for (const key in other.attrs)
+        if (!Object.hasOwn(this.attrs, key))
+          return false;
+    }
+    return childsEqual(this.childs, other.childs);
+  }
+  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 }, {});
+    } else {
+      applyProperties(node, this.attrs, {});
+      appendChildNodes(node, this.childs, opts);
+    }
+    return node;
+  }
+}
+function diffProps(a, b) {
+  if (a === b)
+    return null;
+  let diff = null;
+  for (const aKey in a) {
+    if (!Object.hasOwn(b, aKey)) {
+      diff ??= {};
+      diff[aKey] = undefined;
+    } else if (a[aKey] !== b[aKey]) {
+      diff ??= {};
+      diff[aKey] = b[aKey];
+    }
+  }
+  for (const bKey in b) {
+    if (!Object.hasOwn(a, bKey)) {
+      diff ??= {};
+      diff[bKey] = b[bKey];
+    }
+  }
+  return diff;
+}
+function morphNode(domNode, source, target, opts) {
+  if (source === target || source.isEqualTo(target))
+    return domNode;
+  const type3 = source.nodeType;
+  if (type3 === target.nodeType) {
+    if (type3 === 3 || type3 === 8) {
+      domNode.data = target.text;
+      return domNode;
+    }
+    if (type3 === 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
+          applyProperties(domNode, propsDiff, source.attrs);
+      }
+      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);
+      return domNode;
+    }
+    if (type3 === 11) {
+      morphChildren(domNode, source.childs, target.childs, opts);
+      return domNode;
+    }
+  }
+  const newNode = target.toDom(opts);
+  domNode.parentNode?.replaceChild(newNode, domNode);
+  return newNode;
+}
+function morphChildren(parentDom, oldChilds, newChilds, opts) {
+  if (oldChilds.length === 0) {
+    appendChildNodes(parentDom, newChilds, opts);
+    return;
+  }
+  if (newChilds.length === 0) {
+    parentDom.replaceChildren();
+    return;
+  }
+  if (oldChilds.length === newChilds.length) {
+    let hasKey = false;
+    for (let i = 0;i < oldChilds.length; i++) {
+      if (getKey(oldChilds[i]) != null || getKey(newChilds[i]) != null) {
+        hasKey = true;
+        break;
+      }
+    }
+    if (!hasKey) {
+      let dom = parentDom.firstChild;
+      for (let i = 0;i < oldChilds.length; i++) {
+        const next = dom.nextSibling;
+        morphNode(dom, oldChilds[i], newChilds[i], opts);
+        dom = next;
+      }
+      return;
+    }
+  }
+  const domNodes = Array.from(parentDom.childNodes);
+  const oldKeyMap = Object.create(null);
+  for (let i = 0;i < oldChilds.length; i++) {
+    const key = getKey(oldChilds[i]);
+    if (key != null)
+      oldKeyMap[key] = i;
+  }
+  const used2 = new Uint8Array(oldChilds.length);
+  let unkeyedCursor = 0;
+  for (let j = 0;j < newChilds.length; j++) {
+    const newChild = newChilds[j];
+    const newKey = getKey(newChild);
+    let oldIdx = -1;
+    if (newKey != null) {
+      if (newKey in oldKeyMap && !used2[oldKeyMap[newKey]])
+        oldIdx = oldKeyMap[newKey];
+    } else {
+      while (unkeyedCursor < oldChilds.length) {
+        if (!used2[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
+          oldIdx = unkeyedCursor++;
+          break;
+        }
+        unkeyedCursor++;
+      }
+    }
+    if (oldIdx >= 0) {
+      used2[oldIdx] = 1;
+      const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
+      const ref = parentDom.childNodes[j] ?? null;
+      if (newDom !== ref)
+        parentDom.insertBefore(newDom, ref);
+    } else {
+      const ref = parentDom.childNodes[j] ?? null;
+      parentDom.insertBefore(newChild.toDom(opts), ref);
+    }
+  }
+  for (let i = oldChilds.length - 1;i >= 0; i--)
+    if (!used2[i] && domNodes[i].parentNode === parentDom)
+      parentDom.removeChild(domNodes[i]);
+}
+function render(vnode, container, options, prev) {
+  const isFragment = vnode instanceof VFragment;
+  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 };
+  }
+  const domNode = vnode.toDom(options);
+  container.replaceChildren(domNode);
+  return { vnode, dom: isFragment ? container : domNode };
+}
+function h(tagName, properties, children, namespace) {
+  const props = {};
+  let key;
+  if (properties) {
+    for (const propName in properties) {
+      const propVal = properties[propName];
+      switch (propName) {
+        case "key":
+          key = propVal;
+          break;
+        case "namespace":
+          namespace = namespace ?? propVal;
+          break;
+        case "class":
+          props.className = propVal;
+          break;
+        case "for":
+          props.htmlFor = propVal;
+          break;
+        default:
+          props[propName] = isHtmlAttribute(propName) ? String(propVal) : propVal;
+      }
+    }
+  }
+  const c = tagName.charCodeAt(0);
+  const tag = namespace == null && c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
+  const normalizedChildren = [];
+  addChild(normalizedChildren, children);
+  return new VNode2(tag, props, normalizedChildren, key, namespace);
+}
+
+// src/anode.js
+function resolveDynProducer(comp, dynName) {
+  const dyn = comp?.dynamic?.[dynName];
+  if (dyn == null)
+    return null;
+  let producerComp, producerDyn;
+  if (dyn.compName != null) {
+    producerComp = comp.scope?.lookupComponent(dyn.compName);
+    producerDyn = producerComp?.dynamic?.[dyn.dynName];
+  } else {
+    producerComp = comp;
+    producerDyn = dyn;
+  }
+  if (producerComp == null || producerDyn == null)
+    return null;
+  const pi = producerDyn.val?.toPathItem?.() ?? null;
+  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
+}
+
+class BaseNode {
+  render(_stack, _rx) {
+    return null;
+  }
+  setDataAttr(key, val) {
+    console.warn("setDataAttr not implemented for", this, { key, val });
+  }
+  isConstant() {
+    return false;
+  }
+  optimize() {}
+}
+
+class TextNode extends BaseNode {
+  constructor(val) {
+    super();
+    this.val = val;
+  }
+  render(_stack, _rx) {
+    return this.val;
+  }
+  isWhiteSpace() {
+    for (let i = 0;i < this.val.length; i++) {
+      const c = this.val.charCodeAt(i);
+      if (!(c === 32 || c === 10 || c === 9 || c === 13))
+        return false;
+    }
+    return true;
+  }
+  hasNewLine() {
+    for (let i = 0;i < this.val.length; i++) {
+      const c = this.val.charCodeAt(i);
+      if (c === 10 || c === 13)
+        return true;
+    }
+    return false;
+  }
+  condenseWhiteSpace(replacement = "") {
+    this.val = replacement;
+  }
+  isConstant() {
+    return true;
+  }
+  setDataAttr(_key, _val) {}
+}
+
+class CommentNode extends TextNode {
+  render(_stack, rx) {
+    return rx.renderComment(this.val);
+  }
+}
+function optimizeChilds(childs) {
+  for (let i = 0;i < childs.length; i++) {
+    const child = childs[i];
+    if (child.isConstant())
+      childs[i] = new RenderOnceNode(child);
+    else
+      child.optimize();
+  }
+}
+function optimizeNode(node) {
+  if (node.isConstant())
+    return new RenderOnceNode(node);
+  node.optimize();
+  return node;
+}
+
+class ChildsNode extends BaseNode {
+  constructor(childs) {
+    super();
+    this.childs = childs;
+  }
+  isConstant() {
+    return this.childs.every((v) => v.isConstant());
+  }
+  optimize() {
+    optimizeChilds(this.childs);
+  }
+}
+
+class DomNode extends ChildsNode {
+  constructor(tagName, attrs, childs, namespace = null) {
+    super(childs);
+    this.tagName = tagName;
+    this.attrs = attrs;
+    this.namespace = namespace;
+  }
+  render(stack, rx) {
+    const childNodes = new Array(this.childs.length);
+    for (let i = 0;i < childNodes.length; i++)
+      childNodes[i] = this.childs[i]?.render?.(stack, rx) ?? null;
+    return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes, this.namespace);
+  }
+  setDataAttr(key, val) {
+    this.attrs.setDataAttr(key, val);
+  }
+  isConstant() {
+    return this.attrs.isConstant() && super.isConstant();
+  }
+}
+
+class FragmentNode extends ChildsNode {
+  render(stack, rx) {
+    return rx.renderFragment(this.childs.map((c) => c?.render(stack, rx)));
+  }
+  setDataAttr(key, val) {
+    for (const child of this.childs)
+      child.setDataAttr(key, val);
+  }
+}
+var maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs);
+var VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+
+class ANode extends BaseNode {
+  constructor(nodeId, val) {
+    super();
+    this.nodeId = nodeId;
+    this.val = val;
+  }
+  toPathStep(ctx) {
+    return ctx.applyKey(this.val?.toPathItem?.() ?? null);
+  }
+  static parse(html, px) {
+    const nodes = px.parseHTML(html);
+    if (nodes.length === 0)
+      return new CommentNode("Empty View in ANode.parse");
+    if (nodes.length === 1)
+      return ANode.fromDOM(nodes[0], px);
+    const childs = [];
+    for (let i = 0;i < nodes.length; i++) {
+      const child = ANode.fromDOM(nodes[i], px);
+      if (child !== null)
+        childs.push(child);
+    }
+    const trimmed = condenseChildsWhites(childs);
+    if (trimmed.length === 0)
+      return new CommentNode("Empty View in ANode.parse");
+    return maybeFragment(trimmed);
+  }
+  static fromDOM(node, px) {
+    if (node instanceof px.Text)
+      return new TextNode(node.textContent);
+    else if (node instanceof px.Comment)
+      return new CommentNode(node.textContent);
+    const { childNodes, attributes: attrs, tagName: tag } = node;
+    const childs = [];
+    for (let i = 0;i < childNodes.length; i++) {
+      const child = ANode.fromDOM(childNodes[i], px);
+      if (child !== null)
+        childs.push(child);
+    }
+    const prevTag = px.currentTag;
+    px.currentTag = tag;
+    try {
+      const isPseudoX = attrs[0]?.name === "@x";
+      if (tag === "X" || isPseudoX)
+        return parseXOp(attrs, childs, isPseudoX ? 1 : 0, px);
+      else if (tag.charCodeAt(1) === 58 && tag.charCodeAt(0) === 88) {
+        const macroName = tag.slice(2).toLowerCase();
+        if (macroName === "slot") {
+          const slotName = attrs.getNamedItem("name")?.value ?? "_";
+          return px.frame.macroSlots[slotName] ?? maybeFragment(childs);
+        }
+        const [nAttrs, wrappers] = Attributes.parse(attrs, px, true);
+        px.onAttributes(nAttrs, wrappers, null, true, tag);
+        return wrap(px.newMacroNode(macroName, nAttrs.toMacroVars(), childs), px, wrappers);
+      } else if (VALID_NODE_RE.test(tag)) {
         const [nAttrs, wrappers, textChild] = Attributes.parse(attrs, px);
         px.onAttributes(nAttrs, wrappers, textChild, false, tag);
         if (textChild)
           childs.unshift(new RenderTextNode(null, textChild));
         const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-        return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
+        const ns = node.namespaceURI;
+        const namespace = ns && ns !== HTML_NS ? ns : null;
+        return wrap(new DomNode(tag, nAttrs, domChilds, namespace), px, wrappers);
       }
       return new CommentNode(`Error: InvalidTagName ${tag}`);
     } finally {
@@ -13734,418 +14074,93 @@ class BubbleEvent extends SendEvent {
     super(path, transactor, name, args, parent, opts);
     this.targetPath = targetPath ?? path;
   }
-  stopPropagation() {
-    this.opts.bubbles = false;
-  }
-}
-
-class Task {
-  constructor() {
-    this.deps = [];
-    this.val = this.resolve = this.reject = null;
-    this.promise = new Promise((res, rej) => {
-      this.resolve = res;
-      this.reject = rej;
-    });
-    this.isCompleted = false;
-  }
-  addDep(task) {
-    console.assert(!this.isCompleted, "addDep for completed task", this, task);
-    this.deps.push(task);
-    task.promise.then((_) => this._check());
-  }
-  complete(val) {
-    this.val = val;
-    this._check();
-  }
-  _check() {
-    if (this.deps.every((task) => task.isCompleted)) {
-      this.isCompleted = true;
-      this.resolve(this);
-    }
-  }
-}
-
-class Dispatcher {
-  constructor(path, transactor, parentTransaction) {
-    this.path = path;
-    this.transactor = transactor;
-    this.parent = parentTransaction;
-  }
-  get at() {
-    return new PathChanges(this);
-  }
-  send(name, args, opts) {
-    return this.sendAtPath(this.path, name, args, opts);
-  }
-  bubble(name, args, opts) {
-    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
-  }
-  sendAtPath(path, name, args, opts) {
-    return this.transactor.pushSend(path, name, args, opts, this.parent);
-  }
-  request(name, args, opts) {
-    return this.requestAtPath(this.path, name, args, opts);
-  }
-  requestAtPath(path, name, args, opts) {
-    return this.transactor.pushRequest(path, name, args, opts, this.parent);
-  }
-  lookupTypeFor(name, inst) {
-    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
-  }
-}
-
-class EventContext extends Dispatcher {
-  get name() {
-    return this.parent?.name ?? null;
-  }
-  get targetPath() {
-    return this.parent.targetPath;
-  }
-  stopPropagation() {
-    return this.parent.stopPropagation();
-  }
-}
-
-class PathChanges extends PathBuilder {
-  constructor(dispatcher) {
-    super();
-    this.dispatcher = dispatcher;
-  }
-  send(name, args, opts) {
-    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
-  }
-  bubble(name, args, opts) {
-    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
-  }
-  buildPath() {
-    return this.dispatcher.path.concat(this.pathChanges);
-  }
-}
-
-// src/vdom.js
-var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
-function applyProperties(node, props, previous) {
-  for (const propName in props) {
-    const propValue = props[propName];
-    if (propValue === undefined)
-      removeProperty(node, propName, previous);
-    else if (isHtmlAttribute(propName))
-      node.setAttribute(propName, propValue);
-    else if (propName === "dangerouslySetInnerHTML")
-      node.innerHTML = propValue.__html ?? "";
-    else if (propName === "className")
-      node.setAttribute("class", propValue);
-    else
-      node[propName] = propValue;
-  }
-}
-function removeProperty(node, propName, previous) {
-  const previousValue = previous[propName];
-  if (propName === "dangerouslySetInnerHTML")
-    node.replaceChildren();
-  else if (propName === "className")
-    node.removeAttribute("class");
-  else if (propName === "htmlFor")
-    node.removeAttribute("for");
-  else if (typeof previousValue === "string" || isHtmlAttribute(propName))
-    node.removeAttribute(propName);
-  else
-    node[propName] = null;
-}
-
-class VBase {
-}
-var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
-var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
-function childsEqual(a, b) {
-  if (a === b)
-    return true;
-  for (let i = 0;i < a.length; i++)
-    if (!a[i].isEqualTo(b[i]))
-      return false;
-  return true;
-}
-function appendChildNodes(parent, childs, opts) {
-  for (const child of childs)
-    parent.appendChild(child.toDom(opts));
-}
-function addChild(normalizedChildren, child) {
-  if (child == null)
-    return;
-  if (isIterable(child)) {
-    for (const c of child)
-      addChild(normalizedChildren, c);
-  } else if (child instanceof VBase) {
-    if (child instanceof VFragment)
-      normalizedChildren.push(...child.childs);
-    else
-      normalizedChildren.push(child);
-  } else
-    normalizedChildren.push(new VText(child));
-}
-
-class VText extends VBase {
-  constructor(text) {
-    super();
-    this.text = String(text);
-  }
-  get nodeType() {
-    return 3;
-  }
-  isEqualTo(other) {
-    return other instanceof VText && this.text === other.text;
-  }
-  toDom(opts) {
-    return opts.document.createTextNode(this.text);
-  }
-}
-
-class VComment extends VBase {
-  constructor(text) {
-    super();
-    this.text = text;
-  }
-  get nodeType() {
-    return 8;
-  }
-  isEqualTo(other) {
-    return other instanceof VComment && this.text === other.text;
-  }
-  toDom(opts) {
-    return opts.document.createComment(this.text);
-  }
-}
-
-class VFragment extends VBase {
-  constructor(childs) {
-    super();
-    this.childs = [];
-    addChild(this.childs, childs);
-  }
-  get nodeType() {
-    return 11;
-  }
-  isEqualTo(other) {
-    if (!(other instanceof VFragment) || this.childs.length !== other.childs.length)
-      return false;
-    return childsEqual(this.childs, other.childs);
-  }
-  toDom(opts) {
-    const fragment = opts.document.createDocumentFragment();
-    appendChildNodes(fragment, this.childs, opts);
-    return fragment;
+  stopPropagation() {
+    this.opts.bubbles = false;
   }
 }
 
-class VNode2 extends VBase {
-  constructor(tag, attrs, childs, key, namespace) {
-    super();
-    this.tag = tag;
-    this.attrs = attrs ?? {};
-    this.childs = childs ?? [];
-    this.key = key != null ? String(key) : undefined;
-    this.namespace = typeof namespace === "string" ? namespace : null;
-  }
-  get nodeType() {
-    return 1;
+class Task {
+  constructor() {
+    this.deps = [];
+    this.val = this.resolve = this.reject = null;
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+    this.isCompleted = false;
   }
-  isSameKind(other) {
-    return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+  addDep(task) {
+    console.assert(!this.isCompleted, "addDep for completed task", this, task);
+    this.deps.push(task);
+    task.promise.then((_) => this._check());
   }
-  isEqualTo(other) {
-    if (this === other)
-      return true;
-    if (!(other instanceof VNode2) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
-      return false;
-    }
-    if (this.attrs !== other.attrs) {
-      for (const key in this.attrs)
-        if (this.attrs[key] !== other.attrs[key])
-          return false;
-      for (const key in other.attrs)
-        if (!Object.hasOwn(this.attrs, key))
-          return false;
-    }
-    return childsEqual(this.childs, other.childs);
+  complete(val) {
+    this.val = val;
+    this._check();
   }
-  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 }, {});
-    } else {
-      applyProperties(node, this.attrs, {});
-      appendChildNodes(node, this.childs, opts);
+  _check() {
+    if (this.deps.every((task) => task.isCompleted)) {
+      this.isCompleted = true;
+      this.resolve(this);
     }
-    return node;
   }
 }
-function diffProps(a, b) {
-  if (a === b)
-    return null;
-  let diff = null;
-  for (const aKey in a) {
-    if (!Object.hasOwn(b, aKey)) {
-      diff ??= {};
-      diff[aKey] = undefined;
-    } else if (a[aKey] !== b[aKey]) {
-      diff ??= {};
-      diff[aKey] = b[aKey];
-    }
+
+class Dispatcher {
+  constructor(path, transactor, parentTransaction) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parent = parentTransaction;
   }
-  for (const bKey in b) {
-    if (!Object.hasOwn(a, bKey)) {
-      diff ??= {};
-      diff[bKey] = b[bKey];
-    }
+  get at() {
+    return new PathChanges(this);
   }
-  return diff;
-}
-function morphNode(domNode, source, target, opts) {
-  if (source === target || source.isEqualTo(target))
-    return domNode;
-  const type3 = source.nodeType;
-  if (type3 === target.nodeType) {
-    if (type3 === 3 || type3 === 8) {
-      domNode.data = target.text;
-      return domNode;
-    }
-    if (type3 === 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
-          applyProperties(domNode, propsDiff, source.attrs);
-      }
-      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);
-      return domNode;
-    }
-    if (type3 === 11) {
-      morphChildren(domNode, source.childs, target.childs, opts);
-      return domNode;
-    }
+  send(name, args, opts) {
+    return this.sendAtPath(this.path, name, args, opts);
   }
-  const newNode = target.toDom(opts);
-  domNode.parentNode?.replaceChild(newNode, domNode);
-  return newNode;
-}
-function morphChildren(parentDom, oldChilds, newChilds, opts) {
-  if (oldChilds.length === 0) {
-    appendChildNodes(parentDom, newChilds, opts);
-    return;
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
   }
-  if (newChilds.length === 0) {
-    parentDom.replaceChildren();
-    return;
+  sendAtPath(path, name, args, opts) {
+    return this.transactor.pushSend(path, name, args, opts, this.parent);
   }
-  if (oldChilds.length === newChilds.length) {
-    let hasKey = false;
-    for (let i = 0;i < oldChilds.length; i++) {
-      if (getKey(oldChilds[i]) != null || getKey(newChilds[i]) != null) {
-        hasKey = true;
-        break;
-      }
-    }
-    if (!hasKey) {
-      let dom = parentDom.firstChild;
-      for (let i = 0;i < oldChilds.length; i++) {
-        const next = dom.nextSibling;
-        morphNode(dom, oldChilds[i], newChilds[i], opts);
-        dom = next;
-      }
-      return;
-    }
+  request(name, args, opts) {
+    return this.requestAtPath(this.path, name, args, opts);
   }
-  const domNodes = Array.from(parentDom.childNodes);
-  const oldKeyMap = Object.create(null);
-  for (let i = 0;i < oldChilds.length; i++) {
-    const key = getKey(oldChilds[i]);
-    if (key != null)
-      oldKeyMap[key] = i;
+  requestAtPath(path, name, args, opts) {
+    return this.transactor.pushRequest(path, name, args, opts, this.parent);
   }
-  const used2 = new Uint8Array(oldChilds.length);
-  let unkeyedCursor = 0;
-  for (let j = 0;j < newChilds.length; j++) {
-    const newChild = newChilds[j];
-    const newKey = getKey(newChild);
-    let oldIdx = -1;
-    if (newKey != null) {
-      if (newKey in oldKeyMap && !used2[oldKeyMap[newKey]])
-        oldIdx = oldKeyMap[newKey];
-    } else {
-      while (unkeyedCursor < oldChilds.length) {
-        if (!used2[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
-          oldIdx = unkeyedCursor++;
-          break;
-        }
-        unkeyedCursor++;
-      }
-    }
-    if (oldIdx >= 0) {
-      used2[oldIdx] = 1;
-      const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
-      const ref = parentDom.childNodes[j] ?? null;
-      if (newDom !== ref)
-        parentDom.insertBefore(newDom, ref);
-    } else {
-      const ref = parentDom.childNodes[j] ?? null;
-      parentDom.insertBefore(newChild.toDom(opts), ref);
-    }
+  lookupTypeFor(name, inst) {
+    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
   }
-  for (let i = oldChilds.length - 1;i >= 0; i--)
-    if (!used2[i] && domNodes[i].parentNode === parentDom)
-      parentDom.removeChild(domNodes[i]);
 }
-function render(vnode, container, options, prev) {
-  const isFragment = vnode instanceof VFragment;
-  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 };
+
+class EventContext extends Dispatcher {
+  get name() {
+    return this.parent?.name ?? null;
+  }
+  get targetPath() {
+    return this.parent.targetPath;
+  }
+  stopPropagation() {
+    return this.parent.stopPropagation();
   }
-  const domNode = vnode.toDom(options);
-  container.replaceChildren(domNode);
-  return { vnode, dom: isFragment ? container : domNode };
 }
-function h(tagName, properties, children) {
-  const c = tagName.charCodeAt(0);
-  const tag = c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
-  const props = {};
-  let key, namespace;
-  if (properties) {
-    for (const propName in properties) {
-      const propVal = properties[propName];
-      switch (propName) {
-        case "key":
-          key = propVal;
-          break;
-        case "namespace":
-          namespace = propVal;
-          break;
-        case "class":
-          props.className = propVal;
-          break;
-        case "for":
-          props.htmlFor = propVal;
-          break;
-        default:
-          props[propName] = isHtmlAttribute(propName) ? String(propVal) : propVal;
-      }
-    }
+
+class PathChanges extends PathBuilder {
+  constructor(dispatcher) {
+    super();
+    this.dispatcher = dispatcher;
+  }
+  send(name, args, opts) {
+    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
+  }
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+  }
+  buildPath() {
+    return this.dispatcher.path.concat(this.pathChanges);
   }
-  const normalizedChildren = [];
-  addChild(normalizedChildren, children);
-  return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
 
 // src/app.js
@@ -14256,7 +14271,7 @@ class App {
       const txnPath = path.compact().toTransactionPath();
       const value = txnPath.lookup(rootValue);
       const dragType = e.target.dataset.dragtype ?? "?";
-      const stack = txnPath.buildStack(this.makeStack(rootValue));
+      const stack = path.toTransactionPath().buildStack(this.makeStack(rootValue));
       this.dragInfo = new DragInfo(txnPath, stack, e, value, dragType, e.target);
     } else if (type3 === "drop") {
       e.preventDefault();