tutuca 0.9.63 → 0.9.65

package/dist/tutuca.js

@@ -5528,6 +5528,337 @@ class RequestHandler {
   }
 }
 
+// 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;
+  }
+}
+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 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;
+  }
+}
+
+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;
+  }
+  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 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);
+  }
+  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 type = source.nodeType;
+  if (type === target.nodeType) {
+    if (type === 3 || type === 8) {
+      domNode.data = target.text;
+      return domNode;
+    }
+    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
+          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 (type === 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 used = 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 && !used[oldKeyMap[newKey]])
+        oldIdx = oldKeyMap[newKey];
+    } else {
+      while (unkeyedCursor < oldChilds.length) {
+        if (!used[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
+          oldIdx = unkeyedCursor++;
+          break;
+        }
+        unkeyedCursor++;
+      }
+    }
+    if (oldIdx >= 0) {
+      used[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 (!used[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];
@@ -5628,16 +5959,17 @@ class ChildsNode extends BaseNode {
 }
 
 class DomNode extends ChildsNode {
-  constructor(tagName, attrs, childs) {
+  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);
+    return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes, this.namespace);
   }
   setDataAttr(key, val) {
     this.attrs.setDataAttr(key, val);
@@ -5718,7 +6050,9 @@ class ANode extends BaseNode {
         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 {
@@ -6049,7 +6383,7 @@ class IterInfo {
   }
 }
 var filterAlwaysTrue = (_v, _k, _seq) => true;
-var nullLoopWith = (seq) => ({ seq });
+var nullLoopWith = (seq) => ({ iterData: { seq } });
 var X_OP_CONSUMED = {
   slot: new Set,
   text: new Set,
@@ -6856,403 +7190,78 @@ class Task {
     });
     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);
+  addDep(task) {
+    console.assert(!this.isCompleted, "addDep for completed task", this, task);
+    this.deps.push(task);
+    task.promise.then((_) => this._check());
   }
-  toDom(opts) {
-    const fragment = opts.document.createDocumentFragment();
-    appendChildNodes(fragment, this.childs, opts);
-    return fragment;
+  complete(val) {
+    this.val = val;
+    this._check();
+  }
+  _check() {
+    if (this.deps.every((task) => task.isCompleted)) {
+      this.isCompleted = true;
+      this.resolve(this);
+    }
   }
 }
 
-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;
+class Dispatcher {
+  constructor(path, transactor, parentTransaction) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parent = parentTransaction;
   }
-  get nodeType() {
-    return 1;
+  get at() {
+    return new PathChanges(this);
   }
-  isSameKind(other) {
-    return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+  send(name, args, opts) {
+    return this.sendAtPath(this.path, name, args, opts);
   }
-  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);
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
   }
-  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;
+  sendAtPath(path, name, args, opts) {
+    return this.transactor.pushSend(path, name, args, opts, this.parent);
   }
-}
-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];
-    }
+  request(name, args, opts) {
+    return this.requestAtPath(this.path, name, args, opts);
   }
-  for (const bKey in b) {
-    if (!Object.hasOwn(a, bKey)) {
-      diff ??= {};
-      diff[bKey] = b[bKey];
-    }
+  requestAtPath(path, name, args, opts) {
+    return this.transactor.pushRequest(path, name, args, opts, this.parent);
   }
-  return diff;
-}
-function morphNode(domNode, source, target, opts) {
-  if (source === target || source.isEqualTo(target))
-    return domNode;
-  const type = source.nodeType;
-  if (type === target.nodeType) {
-    if (type === 3 || type === 8) {
-      domNode.data = target.text;
-      return domNode;
-    }
-    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
-          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 (type === 11) {
-      morphChildren(domNode, source.childs, target.childs, opts);
-      return domNode;
-    }
+  lookupTypeFor(name, inst) {
+    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
   }
-  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;
+
+class EventContext extends Dispatcher {
+  get name() {
+    return this.parent?.name ?? null;
   }
-  if (newChilds.length === 0) {
-    parentDom.replaceChildren();
-    return;
+  get targetPath() {
+    return this.parent.targetPath;
   }
-  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;
-    }
+  stopPropagation() {
+    return this.parent.stopPropagation();
   }
-  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;
+}
+
+class PathChanges extends PathBuilder {
+  constructor(dispatcher) {
+    super();
+    this.dispatcher = dispatcher;
   }
-  const used = 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 && !used[oldKeyMap[newKey]])
-        oldIdx = oldKeyMap[newKey];
-    } else {
-      while (unkeyedCursor < oldChilds.length) {
-        if (!used[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
-          oldIdx = unkeyedCursor++;
-          break;
-        }
-        unkeyedCursor++;
-      }
-    }
-    if (oldIdx >= 0) {
-      used[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);
-    }
+  send(name, args, opts) {
+    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
   }
-  for (let i = oldChilds.length - 1;i >= 0; i--)
-    if (!used[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 };
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
   }
-  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;
-      }
-    }
+  buildPath() {
+    return this.dispatcher.path.concat(this.pathChanges);
   }
-  const normalizedChildren = [];
-  addChild(normalizedChildren, children);
-  return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
 
 // src/app.js
@@ -7651,20 +7660,20 @@ class Renderer {
   renderEach(stack, iterInfo, node, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
     const r = [];
-    const iterData = loopWith.call(stack.it, seq);
+    const { iterData, start, end } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
     getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(stack.it, key, value, iterData)) {
         const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
         this.pushEachEntry(r, node.nodeId, attrName, key, dom);
       }
-    });
+    }, start, end);
     return r;
   }
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
     const r = [];
     const it = stack.it;
-    const iterData = loopWith.call(it, seq);
+    const { iterData, start, end } = unpackLoopResult(loopWith.call(it, seq), seq);
     getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(it, key, value, iterData)) {
         const cachePath = enricher ? [view, it, value] : [view, value];
@@ -7681,7 +7690,7 @@ class Renderer {
           this.cache.set(cachePath, cacheKey, dom);
         }
       }
-    });
+    }, start, end);
     return r;
   }
   renderView(view, stack) {
@@ -7703,14 +7712,32 @@ class Renderer {
   }
 }
 var getSeqInfo = (seq) => isIndexed(seq) ? imIndexedIter : isKeyed(seq) ? imKeyedIter : seq?.[SEQ_INFO] ?? unkIter;
-var imIndexedIter = (seq, visit) => {
-  let i = 0;
-  for (const v of seq)
-    visit(i++, v, "si");
+var normalizeRange = (start, end, size) => {
+  let s = start == null ? 0 : start < 0 ? size + start : start;
+  let e = end == null ? size : end < 0 ? size + end : end;
+  s = s < 0 ? 0 : s > size ? size : s;
+  e = e < 0 ? 0 : e > size ? size : e;
+  return [s, e < s ? s : e];
+};
+var unpackLoopResult = (result, seq) => {
+  const r = result ?? {};
+  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end };
 };
-var imKeyedIter = (seq, visit) => {
-  for (const [k, v] of seq.toSeq().entries())
-    visit(k, v, "sk");
+var imIndexedIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
+  for (let i = s;i < e; i++)
+    visit(i, seq.get(i), "si");
+};
+var imKeyedIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
+  let i = 0;
+  for (const [k, v] of seq.toSeq().entries()) {
+    if (i >= e)
+      break;
+    if (i >= s)
+      visit(k, v, "sk");
+    i++;
+  }
 };
 var unkIter = () => {};
 var SEQ_INFO = Symbol.for("tutuca.seqInfo");