tutuca 0.9.2 → 0.9.4

package/dist/tutuca.js

@@ -1,1215 +1,648 @@
-// deps/vdom.js
-function isHtmlAttribute(propName) {
-  return propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
-}
-function getDomProp(node, propName) {
-  return node[propName];
-}
-function setDomProp(node, propName, value) {
-  node[propName] = value;
-}
-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 (typeof propValue === "object" && propValue !== null) {
-        patchObject(node, previous, propName, propValue);
-      } else {
-        setDomProp(node, propName, propValue);
-      }
-    }
-  }
-}
-function removeProperty(node, propName, previous) {
-  const previousValue = previous[propName];
-  if (isHtmlAttribute(propName)) {
-    node.removeAttribute(propName);
-  } else if (typeof previousValue === "string") {
-    setDomProp(node, propName, "");
-    const attrName = propName === "className" ? "class" : propName === "htmlFor" ? "for" : propName;
-    node.removeAttribute(attrName);
-  } else {
-    setDomProp(node, propName, null);
-  }
-}
-function patchObject(node, previous, propName, propValue) {
-  const previousValue = previous?.[propName];
-  if (previousValue && typeof previousValue === "object" && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
-    setDomProp(node, propName, propValue);
-    return;
-  }
-  let current = getDomProp(node, propName);
-  if (typeof current !== "object" || current === null) {
-    setDomProp(node, propName, {});
-    current = getDomProp(node, propName);
+// src/path.js
+class Step {
+  lookup(_v, dval = null) {
+    return dval;
   }
-  const target = current;
-  for (const k in propValue) {
-    target[k] = propValue[k];
+  setValue(root, _v) {
+    return root;
   }
+  updateBindings(_v, _o) {}
+  isFrame = true;
 }
 
-class Warning {
-  type;
-  message;
-  constructor(type, message) {
-    this.type = type;
-    this.message = message;
+class BindStep extends Step {
+  constructor(binds) {
+    super();
+    this.binds = binds;
   }
-}
-
-class DuplicatedKeysWarning extends Warning {
-  duplicatedKeys;
-  parentTag;
-  parentIndex;
-  constructor(duplicatedKeys, parentTag, parentIndex) {
-    const keys = [...duplicatedKeys].join(", ");
-    super("DuplicatedKeys", `Duplicate keys found: [${keys}] in ${parentTag || "fragment"} at index ${parentIndex}. Nodes with duplicated keys are matched positionally.`);
-    this.duplicatedKeys = duplicatedKeys;
-    this.parentTag = parentTag;
-    this.parentIndex = parentIndex;
+  lookup(v, _dval) {
+    return v;
   }
-}
-
-class VBase {
-  isEqualTo(other) {
-    return this === other;
+  setValue(_root, v) {
+    return v;
   }
-  toDom(_opts) {
-    return null;
+  withIndex(i) {
+    return new BindStep({ ...this.binds, key: i });
   }
-}
-function getKey(node) {
-  return node instanceof VNode ? node.key : undefined;
-}
-function effectiveKey(node, duplicatedKeys) {
-  const key = getKey(node);
-  return key && duplicatedKeys?.has(key) ? undefined : key;
-}
-function isIterable(obj) {
-  return obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
-}
-function addChild(normalizedChildren, child) {
-  if (child == null) {
-    return;
+  withKey(key) {
+    return new BindStep({ ...this.binds, key });
   }
-  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));
+  updateBindings(_v, o) {
+    Object.assign(o, this.binds);
   }
+  isFrame = false;
 }
 
-class VText extends VBase {
-  text;
-  constructor(text) {
+class FieldStep extends Step {
+  constructor(field) {
     super();
-    this.text = String(text);
+    this.field = field;
   }
-  get nodeType() {
-    return 3;
+  lookup(v, dval = null) {
+    return v?.get ? v.get(this.field, dval) : dval;
   }
-  isEqualTo(other) {
-    return other instanceof VText && this.text === other.text;
+  setValue(root, v) {
+    return root.set(this.field, v);
   }
-  toDom(opts) {
-    return opts.document.createTextNode(this.text);
+  withIndex(i) {
+    return new SeqIndexStep(this.field, i);
+  }
+  withKey(k) {
+    return new SeqKeyStep(this.field, k);
   }
 }
 
-class VComment extends VBase {
-  text;
-  constructor(text) {
+class FieldSeqStep extends Step {
+  constructor(field, key) {
     super();
-    this.text = text;
+    this.field = field;
+    this.key = key;
   }
-  get nodeType() {
-    return 8;
+  lookup(v, dval = null) {
+    const o = v?.get(this.field, null);
+    return o?.get ? o.get(this.key, dval) : dval;
   }
-  isEqualTo(other) {
-    return other instanceof VComment && this.text === other.text;
+  setValue(root, v) {
+    return root.set(this.field, root.get(this.field).set(this.key, v));
   }
-  toDom(opts) {
-    return opts.document.createComment(this.text);
+  updateBindings(_v, o) {
+    o.key = this.key;
   }
 }
 
-class VFragment extends VBase {
-  childs;
-  constructor(childs) {
+class SeqKeyStep extends FieldSeqStep {
+}
+
+class SeqIndexStep extends FieldSeqStep {
+}
+var NONE = Symbol("NONE");
+
+class SeqAccessStep extends Step {
+  constructor(seqField, keyField) {
     super();
-    const normalized = [];
-    addChild(normalized, childs);
-    this.childs = normalized;
+    this.seqField = seqField;
+    this.keyField = keyField;
   }
-  get nodeType() {
-    return 11;
+  lookup(v, dval = null) {
+    const seq = v?.get(this.seqField, NONE);
+    const key = v?.get(this.keyField, NONE);
+    return key !== NONE && seq?.get ? seq.get(key, dval) : dval;
   }
-  isEqualTo(other) {
-    if (!(other instanceof VFragment) || this.childs.length !== other.childs.length) {
-      return false;
-    }
-    for (let i = 0;i < this.childs.length; i++) {
-      if (!this.childs[i].isEqualTo(other.childs[i])) {
-        return false;
-      }
-    }
-    return true;
+  setValue(root, v) {
+    const seq = root?.get(this.seqField, NONE);
+    const key = root?.get(this.keyField, NONE);
+    return seq === NONE || key === NONE ? root : root.set(this.seqField, seq.set(key, v));
   }
-  toDom(opts) {
-    const fragment = opts.document.createDocumentFragment();
-    for (const child of this.childs) {
-      const childNode = child.toDom(opts);
-      if (childNode) {
-        fragment.appendChild(childNode);
-      }
-    }
-    return fragment;
+  updateBindings(v, o) {
+    o.key = v?.get(this.keyField, null);
   }
 }
 
-class VNode extends VBase {
-  tag;
-  attrs;
-  childs;
-  key;
-  namespace;
-  attrCount;
-  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;
-    this.attrCount = Object.keys(this.attrs).length;
+class Path {
+  constructor(steps = []) {
+    this.steps = steps;
   }
-  get nodeType() {
-    return 1;
+  concat(steps) {
+    return new Path(this.steps.concat(steps));
   }
-  isEqualTo(other) {
-    if (!(other instanceof VNode) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.attrCount !== other.attrCount || this.childs.length !== other.childs.length) {
-      return false;
-    }
-    for (const key in this.attrs) {
-      if (this.attrs[key] !== other.attrs[key]) {
-        return false;
+  popStep() {
+    return new Path(this.steps.slice(0, -1));
+  }
+  lookup(v, dval = null) {
+    let curVal = v;
+    for (const step of this.steps) {
+      curVal = step.lookup(curVal, NONE);
+      if (curVal === NONE) {
+        return dval;
       }
     }
-    for (let i = 0;i < this.childs.length; i++) {
-      if (!this.childs[i].isEqualTo(other.childs[i])) {
-        return false;
+    return curVal;
+  }
+  setValue(root, v) {
+    const intermediates = new Array(this.steps.length);
+    let curVal = root;
+    for (let i = 0;i < this.steps.length; i++) {
+      intermediates[i] = curVal;
+      curVal = this.steps[i].lookup(curVal, NONE);
+      if (curVal === NONE) {
+        return root;
       }
     }
-    return true;
+    let newVal = v;
+    for (let i = this.steps.length - 1;i >= 0; i--) {
+      newVal = this.steps[i].setValue(intermediates[i], newVal);
+      intermediates[i] = newVal;
+    }
+    return newVal;
   }
-  toDom(opts) {
-    const doc = opts.document;
-    const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
-    applyProperties(node, this.attrs, {});
-    for (const child of this.childs) {
-      const childNode = child.toDom(opts);
-      if (childNode) {
-        node.appendChild(childNode);
+  buildStack(stack) {
+    const root = stack.it;
+    let curVal = root;
+    for (const step of this.steps) {
+      curVal = step.lookup(curVal, NONE);
+      if (curVal === NONE) {
+        console.warn(`bad PathItem`, { root, curVal, step, path: this });
+        return null;
       }
+      step.updateBindings(curVal, stack.binds.head.bindings);
+      stack = stack.enter(curVal, {}, step.isFrame);
     }
-    return node;
+    return stack;
   }
-}
-function diffProps(a, b) {
-  let diff = null;
-  for (const aKey in a) {
-    if (!Object.hasOwn(b, aKey)) {
-      diff ??= {};
-      diff[aKey] = undefined;
-      continue;
-    }
-    const aValue = a[aKey];
-    const bValue = b[aKey];
-    if (aValue === bValue) {} else if (typeof aValue === "object" && aValue !== null && typeof bValue === "object" && bValue !== null) {
-      if (Object.getPrototypeOf(bValue) !== Object.getPrototypeOf(aValue)) {
-        diff ??= {};
-        diff[aKey] = bValue;
-      } else {
-        const objectDiff = diffProps(aValue, bValue);
-        if (objectDiff) {
-          diff ??= {};
-          diff[aKey] = objectDiff;
+  static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
+    const pathSteps = [];
+    let depth = 0;
+    let eventIds = [];
+    let handlers = null;
+    let nodeIds = [];
+    let isLeafComponent = true;
+    while (node && node !== rootNode && depth < maxDepth) {
+      if (node?.dataset) {
+        const { nid, si, sk } = parseMetaComment(node.previousSibling);
+        const { eid, cid, vid } = node.dataset;
+        if (eid !== undefined)
+          eventIds.push(eid);
+        if (cid !== undefined) {
+          const comp = comps.getComponentForId(+cid, vid);
+          if (isLeafComponent) {
+            handlers = findHandlers(comp, eventIds, vid, eventName);
+            if (handlers === null && stopOnNoEvent)
+              return NO_EVENT_INFO;
+            isLeafComponent = false;
+          }
+          const step = resolvePathStep(comp, nodeIds, vid);
+          if (step)
+            pathSteps.push(step);
+          eventIds = [];
+          nodeIds = [];
         }
+        if (nid !== undefined)
+          nodeIds.push({ nid, si, sk });
       }
-    } else {
-      diff ??= {};
-      diff[aKey] = bValue;
+      depth += 1;
+      node = node.parentNode;
     }
+    return [new Path(pathSteps.reverse()), handlers];
   }
-  for (const bKey in b) {
-    if (!Object.hasOwn(a, bKey)) {
-      diff ??= {};
-      diff[bKey] = b[bKey];
-    }
+  static fromEvent(e, rNode, maxDepth, comps, stopOnNoEvent = true) {
+    const { type, target } = e;
+    return Path.fromNodeAndEventName(target, type, rNode, maxDepth, comps, stopOnNoEvent);
   }
-  return diff;
 }
-function reorder(oldChildren, newChildren) {
-  const rawNew = keyIndex(newChildren);
-  if (rawNew.free.length === newChildren.length) {
-    return {
-      children: newChildren,
-      moves: null,
-      duplicatedKeys: rawNew.duplicatedKeys
-    };
-  }
-  const rawOld = keyIndex(oldChildren);
-  const duplicatedKeys = rawNew.duplicatedKeys || rawOld.duplicatedKeys ? new Set([...rawNew.duplicatedKeys || [], ...rawOld.duplicatedKeys || []]) : null;
-  if (rawOld.free.length === oldChildren.length) {
-    return {
-      children: newChildren,
-      moves: null,
-      duplicatedKeys
-    };
-  }
-  let newKeys;
-  let newFree;
-  let oldKeys;
-  if (duplicatedKeys) {
-    const updatedNew = keyIndex(newChildren, duplicatedKeys);
-    newKeys = updatedNew.keys;
-    newFree = updatedNew.free;
-    oldKeys = keyIndex(oldChildren, duplicatedKeys).keys;
-  } else {
-    newKeys = rawNew.keys;
-    newFree = rawNew.free;
-    oldKeys = rawOld.keys;
-  }
-  const reordered = [];
-  let freeIndex = 0;
-  const freeCount = newFree.length;
-  let deletedItems = 0;
-  for (let i = 0;i < oldChildren.length; i++) {
-    const oldItem = oldChildren[i];
-    const oldKey = effectiveKey(oldItem, duplicatedKeys);
-    if (oldKey) {
-      if (Object.hasOwn(newKeys, oldKey)) {
-        const itemIndex = newKeys[oldKey];
-        reordered.push(newChildren[itemIndex]);
-      } else {
-        deletedItems++;
-        reordered.push(null);
-      }
-    } else {
-      if (freeIndex < freeCount) {
-        const itemIndex = newFree[freeIndex++];
-        reordered.push(newChildren[itemIndex]);
-      } else {
-        deletedItems++;
-        reordered.push(null);
-      }
-    }
-  }
-  const lastFreeIndex = freeIndex >= newFree.length ? newChildren.length : newFree[freeIndex];
-  for (let j = 0;j < newChildren.length; j++) {
-    const newItem = newChildren[j];
-    const newKey = effectiveKey(newItem, duplicatedKeys);
-    if (newKey) {
-      if (!Object.hasOwn(oldKeys, newKey)) {
-        reordered.push(newItem);
-      }
-    } else if (j >= lastFreeIndex) {
-      reordered.push(newItem);
-    }
-  }
-  const moves = computeMoves(reordered, newChildren, newKeys, duplicatedKeys, deletedItems);
-  return { children: reordered, moves, duplicatedKeys };
-}
-function computeMoves(reordered, newChildren, newKeys, duplicatedKeys, deletedItems) {
-  const simulate = reordered.slice();
-  let simulateIndex = 0;
-  const removes = [];
-  const inserts = [];
-  const wantedKeys = new Array(newChildren.length);
-  for (let i = 0;i < newChildren.length; i++) {
-    wantedKeys[i] = effectiveKey(newChildren[i], duplicatedKeys);
-  }
-  for (let k = 0;k < newChildren.length; ) {
-    const wantedKey = wantedKeys[k];
-    let simulateItem = simulate[simulateIndex];
-    let simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-    while (simulateItem === null && simulate.length) {
-      simulate.splice(simulateIndex, 1);
-      removes.push({ from: simulateIndex, key: null });
-      simulateItem = simulate[simulateIndex];
-      simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-    }
-    if (simulateItem && simulateKey === wantedKey) {
-      simulateIndex++;
-      k++;
-      continue;
-    }
-    if (wantedKey) {
-      if (simulateKey && newKeys[simulateKey] !== k + 1) {
-        simulate.splice(simulateIndex, 1);
-        removes.push({ from: simulateIndex, key: simulateKey });
-        simulateItem = simulate[simulateIndex];
-        simulateKey = effectiveKey(simulateItem, duplicatedKeys);
-        if (simulateItem && simulateKey === wantedKey) {
-          simulateIndex++;
-          k++;
-          continue;
-        }
-      }
-      inserts.push({ key: wantedKey, to: k });
-      k++;
-      continue;
+var EMPTY_META = {};
+function parseMetaComment(n) {
+  if (n?.nodeType === 8 && n.textContent[0] === "§") {
+    const m = parseMetaComment(n.previousSibling);
+    if (m !== EMPTY_META) {
+      return m;
     }
-    if (simulateKey) {
-      simulate.splice(simulateIndex, 1);
-      removes.push({ from: simulateIndex, key: simulateKey });
-      continue;
+    try {
+      return JSON.parse(n.textContent.slice(1, -1));
+    } catch (err) {
+      console.warn(err, n);
     }
-    k++;
   }
-  while (simulateIndex < simulate.length) {
-    const simulateItem = simulate[simulateIndex];
-    simulate.splice(simulateIndex, 1);
-    removes.push({
-      from: simulateIndex,
-      key: effectiveKey(simulateItem, duplicatedKeys)
-    });
-  }
-  if (removes.length === deletedItems && !inserts.length) {
-    return null;
+  return EMPTY_META;
+}
+function findHandlers(comp, eventIds, vid, eventName) {
+  for (const eid of eventIds) {
+    const handlers = comp.getEventForId(+eid, vid).getHandlersFor(eventName);
+    if (handlers !== null)
+      return handlers;
   }
-  return { removes, inserts };
+  return null;
 }
-function keyIndex(children, excludeKeys) {
-  const keys = {};
-  const free = [];
-  let duplicatedKeys = null;
-  for (let i = 0;i < children.length; i++) {
-    const key = getKey(children[i]);
-    if (key && !excludeKeys?.has(key)) {
-      if (key in keys) {
-        duplicatedKeys ??= new Set;
-        duplicatedKeys.add(key);
-      }
-      keys[key] = i;
-    } else {
-      free.push(i);
+function resolvePathStep(comp, nodeIds, vid) {
+  for (let i = 0;i < nodeIds.length; i++) {
+    const node = comp.getNodeForId(+nodeIds[i].nid, vid);
+    const j = node.pathInNext ? i + 1 : i;
+    const { si, sk, nid: nodeId } = nodeIds[j];
+    const pi = node.pathInNext ? comp.getNodeForId(+nodeId, vid).val.toPathItem() : node.toPathItem();
+    if (pi !== null) {
+      return si !== undefined ? pi.withIndex(+si) : sk ? pi.withKey(sk) : pi;
     }
   }
-  return { keys, free, duplicatedKeys };
+  return null;
 }
-function replaceNode(domNode, vnode, options) {
-  const parentNode = domNode.parentNode;
-  const newNode = vnode.toDom(options);
-  if (parentNode && newNode && newNode !== domNode) {
-    parentNode.replaceChild(newNode, domNode);
+var NO_EVENT_INFO = [null, null];
+
+class PathBuilder {
+  constructor() {
+    this.pathChanges = [];
   }
-  return newNode || domNode;
-}
-function morphNode(domNode, source, target, opts) {
-  if (source === target || source.isEqualTo(target))
-    return domNode;
-  if (source instanceof VText && target instanceof VText || source instanceof VComment && target instanceof VComment) {
-    domNode.data = target.text;
-    return domNode;
+  add(pathChange) {
+    this.pathChanges.push(pathChange);
+    return this;
   }
-  if (source instanceof VNode && target instanceof VNode && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
-    const propsDiff = diffProps(source.attrs, target.attrs);
-    if (propsDiff) {
-      applyProperties(domNode, propsDiff, source.attrs);
-    }
-    morphChildren(domNode, source.childs, target.childs, source.tag, opts);
-    return domNode;
+  field(name) {
+    return this.add(new FieldStep(name));
   }
-  if (source instanceof VFragment && target instanceof VFragment) {
-    morphChildren(domNode, source.childs, target.childs, null, opts);
-    return domNode;
+  index(name, index) {
+    return this.add(new SeqIndexStep(name, index));
+  }
+  key(name, key) {
+    return this.add(new SeqKeyStep(name, key));
   }
-  return replaceNode(domNode, target, opts);
 }
-function morphChildren(parentDom, oldChilds, newChilds, parentTag, opts) {
-  if (oldChilds.length === 0) {
-    for (const child of newChilds) {
-      const node = child.toDom(opts);
-      if (node)
-        parentDom.appendChild(node);
-    }
-    return;
+
+// src/value.js
+var VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*$/;
+var isValidValId = (name) => VALID_VAL_ID_RE.test(name);
+var VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
+var parseStrTemplate = (v, px) => StrTplVal.parse(v, px);
+var parseConst = (v, _) => new ConstVal(v);
+var parseName = (v, _) => isValidValId(v) ? new NameVal(v) : null;
+var parseType = (v, _) => isValidValId(v) ? new TypeVal(v) : null;
+var parseBind = (v, _) => isValidValId(v) ? new BindVal(v) : null;
+var parseDyn = (v, _) => isValidValId(v) ? new DynVal(v) : null;
+var parseField = (v, _) => isValidValId(v) ? new FieldVal(v) : null;
+var parseComp = (v, _) => isValidValId(v) ? new ComputedVal(v) : null;
+var parseReq = (v, _) => isValidValId(v) ? new RequestVal(v) : null;
+
+class ValParser {
+  constructor() {
+    this.allowFieldOnly();
+    this.bindValIt = new BindVal("it");
+    this.nullConstVal = new ConstVal(null);
   }
-  if (newChilds.length === 0) {
-    while (parentDom.firstChild) {
-      parentDom.removeChild(parentDom.firstChild);
-    }
-    return;
+  const(v) {
+    return new ConstVal(v);
   }
-  const orderedSet = reorder(oldChilds, newChilds);
-  const reorderedChilds = orderedSet.children;
-  if (orderedSet.duplicatedKeys && opts.onWarning) {
-    opts.onWarning(new DuplicatedKeysWarning(orderedSet.duplicatedKeys, parentTag, 0));
+  allowFieldOnly() {
+    this.okField = true;
+    this.okBind = false;
+    this.okComputed = false;
+    this.okDyn = false;
+    this.okType = false;
+    this.okRequest = false;
+    this.okName = false;
+    this.okConst = false;
+    this.okStrTpl = false;
+    this.okSeqAccess = false;
   }
-  const domChildren = Array.from(parentDom.childNodes);
-  const oldLen = oldChilds.length;
-  const reorderedLen = reorderedChilds.length;
-  const len = Math.max(oldLen, reorderedLen);
-  const toRemove = [];
-  for (let i = 0;i < len; i++) {
-    const leftNode = oldChilds[i];
-    const rightNode = reorderedChilds[i];
-    if (!leftNode && rightNode) {
-      const newNode = rightNode.toDom(opts);
-      if (newNode)
-        parentDom.appendChild(newNode);
-    } else if (leftNode && rightNode) {
-      const domChild = domChildren[i];
-      if (domChild) {
-        morphNode(domChild, leftNode, rightNode, opts);
-      }
-    } else if (leftNode && !rightNode) {
-      if (!orderedSet.moves && domChildren[i]) {
-        toRemove.push(domChildren[i]);
-      }
-    }
+  parseIfOk(s, px, isOk, parseFn) {
+    return isOk ? parseFn(s, px) : null;
   }
-  for (const node of toRemove) {
-    if (node.parentNode === parentDom) {
-      parentDom.removeChild(node);
+  _parseSeqAccess(s, px) {
+    if (!this.okSeqAccess) {
+      return null;
     }
+    const openSquareBracketIndex = s.indexOf("[");
+    this.allowFieldOnly();
+    const left = this.parse(s.slice(0, openSquareBracketIndex), px);
+    const right = this.parse(s.slice(openSquareBracketIndex + 1, -1), px);
+    return left && right ? new SeqAccessVal(left, right) : null;
   }
-  if (orderedSet.moves) {
-    applyMoves(parentDom, orderedSet.moves);
+  parse(s, px) {
+    switch (getValSubType(s)) {
+      case VAL_SUB_TYPE_STRING_TEMPLATE:
+        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
+      case VAL_SUB_TYPE_CONST_STRING:
+        return this.parseIfOk(s, px, this.okStrTpl, parseConst);
+      case VAL_SUB_TYPE_SEQ_ACCESS:
+        return this._parseSeqAccess(s, px);
+      case VAL_SUB_TYPE_INVALID:
+        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
+    }
+    const charCode = s.charCodeAt(0);
+    switch (charCode) {
+      case 94: {
+        const newS = px.frame.macroVars?.[s.slice(1)];
+        if (newS !== undefined) {
+          return this.parse(newS, px);
+        }
+        return null;
+      }
+      case 126:
+        return this.parseIfOk(s.slice(1), px, this.okStrTpl, parseConst);
+      case 39:
+        return this.parseIfOk(s.slice(1, -1), px, this.okStrTpl, parseConst);
+      case 64:
+        return this.parseIfOk(s.slice(1), px, this.okBind, parseBind);
+      case 42:
+        return this.parseIfOk(s.slice(1), px, this.okDyn, parseDyn);
+      case 46:
+        return this.parseIfOk(s.slice(1), px, this.okField, parseField);
+      case 36:
+        return this.parseIfOk(s.slice(1), px, this.okComputed, parseComp);
+      case 33:
+        return this.parseIfOk(s.slice(1), px, this.okRequest, parseReq);
+    }
+    const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
+    if (Number.isFinite(num)) {
+      return this.parseIfOk(num, px, this.okConst, parseConst);
+    } else if (s === "true" || s === "false") {
+      return this.parseIfOk(s === "true", px, this.okConst, parseConst);
+    } else if (charCode >= 97 && charCode <= 122) {
+      return this.parseIfOk(s, px, this.okName, parseName);
+    } else if (charCode >= 65 && charCode <= 90) {
+      return this.parseIfOk(s, px, this.okType, parseType);
+    }
+    return null;
   }
-}
-function applyMoves(domNode, moves) {
-  const childNodes = domNode.childNodes;
-  const keyMap = {};
-  for (const remove of moves.removes) {
-    const node = childNodes[remove.from];
-    if (remove.key)
-      keyMap[remove.key] = node;
-    domNode.removeChild(node);
+  parseDynamic(s, px) {
+    this.allowFieldOnly();
+    this.okComputed = true;
+    return this.parse(s, px);
   }
-  let length = childNodes.length;
-  for (let j = 0;j < moves.inserts.length; j++) {
-    const insert = moves.inserts[j];
-    const node = keyMap[insert.key];
-    if (node) {
-      domNode.insertBefore(node, insert.to >= length++ ? null : childNodes[insert.to]);
-    }
+  parseEach(s, px) {
+    this.allowFieldOnly();
+    this.okComputed = true;
+    this.okDyn = true;
+    return this.parse(s, px);
   }
-}
-var renderCache = new WeakMap;
-function render(vnode, container, options) {
-  const cached = renderCache.get(container);
-  const isFragment = vnode instanceof VFragment;
-  if (cached) {
-    const wasFragment = cached.vnode instanceof VFragment;
-    if (wasFragment === isFragment) {
-      const rootNode = wasFragment ? container : cached.dom;
-      const newDom = morphNode(rootNode, cached.vnode, vnode, options);
-      renderCache.set(container, {
-        vnode,
-        dom: isFragment ? container : newDom
-      });
-      return newDom;
-    }
-    renderCache.delete(container);
+  allowHandlerArg() {
+    this.allowFieldOnly();
+    this.okBind = true;
+    this.okComputed = true;
+    this.okDyn = true;
+    this.okType = true;
+    this.okRequest = true;
+    this.okName = true;
+    this.okConst = true;
   }
-  const domNode = vnode.toDom(options);
-  if (domNode) {
-    container.innerHTML = "";
-    container.appendChild(domNode);
-    renderCache.set(container, {
-      vnode,
-      dom: isFragment ? container : domNode
-    });
+  parseHandlerArg(s, px) {
+    this.allowHandlerArg();
+    return this.parse(s, px);
   }
-  return domNode;
-}
-function h(tagName, properties, children) {
-  const tag = tagName.toUpperCase();
-  const props = {};
-  let key;
-  let namespace;
-  if (properties) {
-    for (const propName in properties) {
-      if (propName === "key") {
-        key = properties[propName];
-      } else if (propName === "namespace") {
-        namespace = properties[propName];
-      } else if (propName === "class") {
-        props.className = properties[propName];
-      } else if (propName === "for") {
-        props.htmlFor = properties[propName];
-      } else if (isHtmlAttribute(propName)) {
-        props[propName] = String(properties[propName]);
-      } else {
-        props[propName] = properties[propName];
-      }
-    }
+  _parseHandler(s, px, HandlerClass) {
+    this.allowFieldOnly();
+    this.okName = true;
+    const val = this.parse(s, px);
+    return val.toRawFieldVal ? val.toRawFieldVal() : new HandlerClass(val.name);
+  }
+  parseHandlerName(s, px) {
+    return this._parseHandler(s, px, InputHandlerNameVal);
+  }
+  parseAlter(s, px) {
+    return this._parseHandler(s, px, AlterHandlerNameVal);
+  }
+  parseAttr(s, px) {
+    return this.parseText(s, px);
+  }
+  parseAll(s, px) {
+    this.allowHandlerArg();
+    this.okStrTpl = true;
+    this.okSeqAccess = true;
+    return this.parse(s, px);
+  }
+  parseCondValue(s, px) {
+    this.allowFieldOnly();
+    this.okBind = true;
+    this.okComputed = true;
+    this.okDyn = true;
+    this.okConst = true;
+    return this.parse(s, px);
+  }
+  parseText(s, px) {
+    this.allowFieldOnly();
+    this.okBind = true;
+    this.okComputed = true;
+    this.okDyn = true;
+    this.okConst = true;
+    this.okStrTpl = true;
+    return this.parse(s, px);
+  }
+  parseRender(s, px) {
+    this.allowFieldOnly();
+    this.okSeqAccess = true;
+    return this.parse(s, px);
   }
-  const normalizedChildren = [];
-  addChild(normalizedChildren, children);
-  return new VNode(tag, props, normalizedChildren, key, namespace);
 }
 
-// src/path.js
-class Step {
-  lookup(_v, dval = null) {
-    return dval;
-  }
-  setValue(root, _v) {
-    return root;
+class BaseVal {
+  render(_stack, _rx) {}
+  eval(_stack) {}
+  toPathItem() {
+    return null;
   }
-  updateBindings(_v, _o) {}
-  isFrame = true;
 }
 
-class BindStep extends Step {
-  constructor(binds) {
+class ConstVal extends BaseVal {
+  constructor(value) {
     super();
-    this.binds = binds;
-  }
-  lookup(v, _dval) {
-    return v;
-  }
-  setValue(_root, v) {
-    return v;
+    this.value = value;
   }
-  withIndex(i) {
-    return new BindStep({ ...this.binds, key: i });
+  render(_stack, _rx) {
+    return this.value;
   }
-  withKey(key) {
-    return new BindStep({ ...this.binds, key });
+  eval(_stack) {
+    return this.value;
   }
-  updateBindings(_v, o) {
-    Object.assign(o, this.binds);
+  toString() {
+    const v = this.value;
+    return typeof v === "string" ? `'${v}'` : `${v}`;
   }
-  isFrame = false;
 }
 
-class FieldStep extends Step {
-  constructor(field) {
+class VarVal extends BaseVal {
+}
+
+class StrTplVal extends VarVal {
+  constructor(vals) {
     super();
-    this.field = field;
-  }
-  lookup(v, dval = null) {
-    return v?.get ? v.get(this.field, dval) : dval;
+    this.vals = vals;
   }
-  setValue(root, v) {
-    return root.set(this.field, v);
+  render(stack, _rx) {
+    return this.eval(stack);
   }
-  withIndex(i) {
-    return new SeqIndexStep(this.field, i);
+  eval(stack) {
+    const strs = new Array(this.vals.length);
+    for (let i = 0;i < this.vals.length; i++) {
+      strs[i] = this.vals[i]?.eval(stack, "");
+    }
+    return strs.join("");
   }
-  withKey(k) {
-    return new SeqKeyStep(this.field, k);
+  static parse(s, px) {
+    const parts = s.split(/(\{[^}]+\})/g);
+    const vals = new Array(parts.length);
+    let allConsts = true;
+    for (let i = 0;i < parts.length; i++) {
+      const s2 = parts[i];
+      const isExpr = s2[0] === "{" && s2.at(-1) === "}";
+      const val = isExpr ? vp.parseText(s2.slice(1, -1), px) : new ConstVal(s2);
+      vals[i] = val;
+      allConsts &&= val instanceof ConstVal;
+    }
+    return allConsts ? new ConstVal(vals.map((v) => v.value).join("")) : new StrTplVal(vals);
   }
 }
 
-class FieldSeqStep extends Step {
-  constructor(field, key) {
+class NameVal extends VarVal {
+  constructor(name) {
     super();
-    this.field = field;
-    this.key = key;
+    this.name = name;
   }
-  lookup(v, dval = null) {
-    const o = v?.get(this.field, null);
-    return o?.get ? o.get(this.key, dval) : dval;
+  eval(stack) {
+    return stack.lookupName(this.name);
   }
-  setValue(root, v) {
-    return root.set(this.field, root.get(this.field).set(this.key, v));
+  toString() {
+    return this.name;
   }
-  updateBindings(_v, o) {
-    o.key = this.key;
+}
+
+class InputHandlerNameVal extends NameVal {
+  eval(stack) {
+    return stack.getInputHandler(this.name) ?? mk404Handler("input", this.name);
   }
 }
 
-class SeqKeyStep extends FieldSeqStep {
+class AlterHandlerNameVal extends NameVal {
+  eval(stack) {
+    return stack.getAlterHandler(this.name) ?? mk404Handler("alter", this.name);
+  }
 }
+var mk404Handler = (type, name) => function(...args) {
+  console.warn("handler not found", { type, name, args }, this);
+  return this;
+};
 
-class SeqIndexStep extends FieldSeqStep {
+class TypeVal extends NameVal {
+  eval(stack) {
+    return stack.lookupType(this.name);
+  }
 }
-var NONE = Symbol("NONE");
 
-class SeqAccessStep extends Step {
-  constructor(seqField, keyField) {
-    super();
-    this.seqField = seqField;
-    this.keyField = keyField;
+class RequestVal extends NameVal {
+  eval(stack) {
+    return stack.lookupRequest(this.name);
   }
-  lookup(v, dval = null) {
-    const seq = v?.get(this.seqField, NONE);
-    const key = v?.get(this.keyField, NONE);
-    return key !== NONE && seq?.get ? seq.get(key, dval) : dval;
+  toString() {
+    return `!${this.name}`;
   }
-  setValue(root, v) {
-    const seq = root?.get(this.seqField, NONE);
-    const key = root?.get(this.keyField, NONE);
-    return seq === NONE || key === NONE ? root : root.set(this.seqField, seq.set(key, v));
+}
+
+class RawFieldVal extends NameVal {
+  eval(stack) {
+    return stack.lookupFieldRaw(this.name);
   }
-  updateBindings(v, o) {
-    o.key = v?.get(this.keyField, null);
+  toString() {
+    return `.${this.name}`;
   }
 }
 
-class Path {
-  constructor(steps = []) {
-    this.steps = steps;
-  }
-  concat(steps) {
-    return new Path(this.steps.concat(steps));
+class RenderVal extends BaseVal {
+  render(stack, _rx) {
+    return this.eval(stack);
   }
-  popStep() {
-    return new Path(this.steps.slice(0, -1));
+}
+
+class RenderNameVal extends RenderVal {
+  constructor(name) {
+    super();
+    this.name = name;
   }
-  lookup(v, dval = null) {
-    let curVal = v;
-    for (const step of this.steps) {
-      curVal = step.lookup(curVal, NONE);
-      if (curVal === NONE) {
-        return dval;
-      }
-    }
-    return curVal;
+}
+
+class BindVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupBind(this.name);
   }
-  setValue(root, v) {
-    const intermediates = new Array(this.steps.length);
-    let curVal = root;
-    for (let i = 0;i < this.steps.length; i++) {
-      intermediates[i] = curVal;
-      curVal = this.steps[i].lookup(curVal, NONE);
-      if (curVal === NONE) {
-        return root;
-      }
-    }
-    let newVal = v;
-    for (let i = this.steps.length - 1;i >= 0; i--) {
-      newVal = this.steps[i].setValue(intermediates[i], newVal);
-      intermediates[i] = newVal;
-    }
-    return newVal;
+  toString() {
+    return `@${this.name}`;
   }
-  buildStack(stack) {
-    const root = stack.it;
-    let curVal = root;
-    for (const step of this.steps) {
-      curVal = step.lookup(curVal, NONE);
-      if (curVal === NONE) {
-        console.warn(`bad PathItem`, { root, curVal, step, path: this });
-        return null;
-      }
-      step.updateBindings(curVal, stack.binds.head.bindings);
-      stack = stack.enter(curVal, {}, step.isFrame);
-    }
-    return stack;
+}
+
+class DynVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupDynamic(this.name);
   }
-  static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
-    const pathSteps = [];
-    let depth = 0;
-    let eventIds = [];
-    let handlers = null;
-    let nodeIds = [];
-    let isLeafComponent = true;
-    while (node && node !== rootNode && depth < maxDepth) {
-      if (node?.dataset) {
-        const { nid, si, sk } = parseMetaComment(node.previousSibling);
-        const { eid, cid, vid } = node.dataset;
-        if (eid !== undefined)
-          eventIds.push(eid);
-        if (cid !== undefined) {
-          const comp = comps.getComponentForId(+cid, vid);
-          if (isLeafComponent) {
-            handlers = findHandlers(comp, eventIds, vid, eventName);
-            if (handlers === null && stopOnNoEvent)
-              return NO_EVENT_INFO;
-            isLeafComponent = false;
-          }
-          const step = resolvePathStep(comp, nodeIds, vid);
-          if (step)
-            pathSteps.push(step);
-          eventIds = [];
-          nodeIds = [];
-        }
-        if (nid !== undefined)
-          nodeIds.push({ nid, si, sk });
-      }
-      depth += 1;
-      node = node.parentNode;
-    }
-    return [new Path(pathSteps.reverse()), handlers];
+  toPathItem() {
+    return null;
   }
-  static fromEvent(e, rNode, maxDepth, comps, stopOnNoEvent = true) {
-    const { type, target } = e;
-    return Path.fromNodeAndEventName(target, type, rNode, maxDepth, comps, stopOnNoEvent);
+  toString() {
+    return `*${this.name}`;
   }
 }
-var EMPTY_META = {};
-function parseMetaComment(n) {
-  if (n?.nodeType === 8 && n.textContent[0] === "§") {
-    const m = parseMetaComment(n.previousSibling);
-    if (m !== EMPTY_META) {
-      return m;
-    }
-    try {
-      return JSON.parse(n.textContent.slice(1, -1));
-    } catch (err) {
-      console.warn(err, n);
-    }
+
+class FieldVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupField(this.name);
   }
-  return EMPTY_META;
-}
-function findHandlers(comp, eventIds, vid, eventName) {
-  for (const eid of eventIds) {
-    const handlers = comp.getEventForId(+eid, vid).getHandlersFor(eventName);
-    if (handlers !== null)
-      return handlers;
+  toPathItem() {
+    return new FieldStep(this.name);
+  }
+  toRawFieldVal() {
+    return new RawFieldVal(this.name);
+  }
+  toString() {
+    return `.${this.name}`;
   }
-  return null;
 }
-function resolvePathStep(comp, nodeIds, vid) {
-  for (let i = 0;i < nodeIds.length; i++) {
-    const node = comp.getNodeForId(+nodeIds[i].nid, vid);
-    const j = node.pathInNext ? i + 1 : i;
-    const { si, sk, nid: nodeId } = nodeIds[j];
-    const pi = node.pathInNext ? comp.getNodeForId(+nodeId, vid).val.toPathItem() : node.toPathItem();
-    if (pi !== null) {
-      return si !== undefined ? pi.withIndex(+si) : sk ? pi.withKey(sk) : pi;
-    }
+
+class ComputedVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupComputed(this.name);
+  }
+  toString() {
+    return `$${this.name}`;
   }
-  return null;
 }
-var NO_EVENT_INFO = [null, null];
 
-class PathBuilder {
-  constructor() {
-    this.pathChanges = [];
+class SeqAccessVal extends RenderVal {
+  constructor(seqVal, keyVal) {
+    super();
+    this.seqVal = seqVal;
+    this.keyVal = keyVal;
   }
-  add(pathChange) {
-    this.pathChanges.push(pathChange);
-    return this;
+  toPathItem() {
+    return new SeqAccessStep(this.seqVal.name, this.keyVal.name);
   }
-  field(name) {
-    return this.add(new FieldStep(name));
+  eval(stack) {
+    const key = this.keyVal.eval(stack);
+    return this.seqVal.eval(stack).get(key, null);
   }
-  index(name, index) {
-    return this.add(new SeqIndexStep(name, index));
+  toString() {
+    return `${this.seqVal}[${this.keyVal}]`;
   }
-  key(name, key) {
-    return this.add(new SeqKeyStep(name, key));
+}
+var VAL_SUB_TYPE_STRING_TEMPLATE = 0;
+var VAL_SUB_TYPE_SEQ_ACCESS = 1;
+var VAL_SUB_TYPE_INVALID = 2;
+var VAL_SUB_TYPE_CONST_STRING = 3;
+function getValSubType(s) {
+  let open = 0;
+  let close = 0;
+  for (let i = 0;i < s.length; i++) {
+    switch (s.charCodeAt(i)) {
+      case 91:
+        if (open > 0) {
+          return VAL_SUB_TYPE_INVALID;
+        }
+        open += 1;
+        break;
+      case 93:
+        if (close > 0 || open === 0) {
+          return VAL_SUB_TYPE_INVALID;
+        }
+        close += 1;
+        break;
+      case 123:
+        return VAL_SUB_TYPE_STRING_TEMPLATE;
+      case 125:
+        return VAL_SUB_TYPE_CONST_STRING;
+    }
+  }
+  if (open > 0 || close > 0) {
+    return open === 1 && close === 1 ? VAL_SUB_TYPE_SEQ_ACCESS : VAL_SUB_TYPE_INVALID;
   }
+  return -1;
 }
+var vp = new ValParser;
 
-// src/value.js
-var VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*$/;
-var isValidValId = (name) => VALID_VAL_ID_RE.test(name);
-var VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
-var parseStrTemplate = (v, px) => StrTplVal.parse(v, px);
-var parseConst = (v, _) => new ConstVal(v);
-var parseName = (v, _) => isValidValId(v) ? new NameVal(v) : null;
-var parseType = (v, _) => isValidValId(v) ? new TypeVal(v) : null;
-var parseBind = (v, _) => isValidValId(v) ? new BindVal(v) : null;
-var parseDyn = (v, _) => isValidValId(v) ? new DynVal(v) : null;
-var parseField = (v, _) => isValidValId(v) ? new FieldVal(v) : null;
-var parseComp = (v, _) => isValidValId(v) ? new ComputedVal(v) : null;
-var parseReq = (v, _) => isValidValId(v) ? new RequestVal(v) : null;
-
-class ValParser {
-  constructor() {
-    this.allowFieldOnly();
-    this.bindValIt = new BindVal("it");
-    this.nullConstVal = new ConstVal(null);
+// src/attribute.js
+class Attributes {
+  constructor(items) {
+    this.items = items;
   }
-  const(v) {
-    return new ConstVal(v);
+  eval(_stack) {
+    return {};
   }
-  allowFieldOnly() {
-    this.okField = true;
-    this.okBind = false;
-    this.okComputed = false;
-    this.okDyn = false;
-    this.okType = false;
-    this.okRequest = false;
-    this.okName = false;
-    this.okConst = false;
-    this.okStrTpl = false;
-    this.okSeqAccess = false;
+  static parse(attributes, px, parseAll = false) {
+    return getAttrParser(px).parse(attributes, parseAll);
   }
-  parseIfOk(s, px, isOk, parseFn) {
-    return isOk ? parseFn(s, px) : null;
-  }
-  _parseSeqAccess(s, px) {
-    if (!this.okSeqAccess) {
-      return null;
-    }
-    const openSquareBracketIndex = s.indexOf("[");
-    this.allowFieldOnly();
-    const left = this.parse(s.slice(0, openSquareBracketIndex), px);
-    const right = this.parse(s.slice(openSquareBracketIndex + 1, -1), px);
-    return left && right ? new SeqAccessVal(left, right) : null;
-  }
-  parse(s, px) {
-    switch (getValSubType(s)) {
-      case VAL_SUB_TYPE_STRING_TEMPLATE:
-        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
-      case VAL_SUB_TYPE_CONST_STRING:
-        return this.parseIfOk(s, px, this.okStrTpl, parseConst);
-      case VAL_SUB_TYPE_SEQ_ACCESS:
-        return this._parseSeqAccess(s, px);
-      case VAL_SUB_TYPE_INVALID:
-        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
-    }
-    const charCode = s.charCodeAt(0);
-    switch (charCode) {
-      case 94: {
-        const newS = px.frame.macroVars?.[s.slice(1)];
-        if (newS !== undefined) {
-          return this.parse(newS, px);
-        }
-        return null;
-      }
-      case 126:
-        return this.parseIfOk(s.slice(1), px, this.okStrTpl, parseConst);
-      case 39:
-        return this.parseIfOk(s.slice(1, -1), px, this.okStrTpl, parseConst);
-      case 64:
-        return this.parseIfOk(s.slice(1), px, this.okBind, parseBind);
-      case 42:
-        return this.parseIfOk(s.slice(1), px, this.okDyn, parseDyn);
-      case 46:
-        return this.parseIfOk(s.slice(1), px, this.okField, parseField);
-      case 36:
-        return this.parseIfOk(s.slice(1), px, this.okComputed, parseComp);
-      case 33:
-        return this.parseIfOk(s.slice(1), px, this.okRequest, parseReq);
-    }
-    const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
-    if (Number.isFinite(num)) {
-      return this.parseIfOk(num, px, this.okConst, parseConst);
-    } else if (s === "true" || s === "false") {
-      return this.parseIfOk(s === "true", px, this.okConst, parseConst);
-    } else if (charCode >= 97 && charCode <= 122) {
-      return this.parseIfOk(s, px, this.okName, parseName);
-    } else if (charCode >= 65 && charCode <= 90) {
-      return this.parseIfOk(s, px, this.okType, parseType);
-    }
-    return null;
-  }
-  parseDynamic(s, px) {
-    this.allowFieldOnly();
-    this.okComputed = true;
-    return this.parse(s, px);
-  }
-  parseEach(s, px) {
-    this.allowFieldOnly();
-    this.okComputed = true;
-    this.okDyn = true;
-    return this.parse(s, px);
-  }
-  allowHandlerArg() {
-    this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okType = true;
-    this.okRequest = true;
-    this.okName = true;
-    this.okConst = true;
-  }
-  parseHandlerArg(s, px) {
-    this.allowHandlerArg();
-    return this.parse(s, px);
-  }
-  _parseHandler(s, px, HandlerClass) {
-    this.allowFieldOnly();
-    this.okName = true;
-    const val = this.parse(s, px);
-    return val.toRawFieldVal ? val.toRawFieldVal() : new HandlerClass(val.name);
-  }
-  parseHandlerName(s, px) {
-    return this._parseHandler(s, px, InputHandlerNameVal);
-  }
-  parseAlter(s, px) {
-    return this._parseHandler(s, px, AlterHandlerNameVal);
-  }
-  parseAttr(s, px) {
-    return this.parseText(s, px);
-  }
-  parseAll(s, px) {
-    this.allowHandlerArg();
-    this.okStrTpl = true;
-    this.okSeqAccess = true;
-    return this.parse(s, px);
-  }
-  parseCondValue(s, px) {
-    this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okConst = true;
-    return this.parse(s, px);
-  }
-  parseText(s, px) {
-    this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okConst = true;
-    this.okStrTpl = true;
-    return this.parse(s, px);
-  }
-  parseRender(s, px) {
-    this.allowFieldOnly();
-    this.okSeqAccess = true;
-    return this.parse(s, px);
-  }
-}
-
-class BaseVal {
-  render(_stack, _rx) {}
-  eval(_stack) {}
-  toPathItem() {
-    return null;
-  }
-}
-
-class ConstVal extends BaseVal {
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-  render(_stack, _rx) {
-    return this.value;
-  }
-  eval(_stack) {
-    return this.value;
-  }
-  toString() {
-    const v = this.value;
-    return typeof v === "string" ? `'${v}'` : `${v}`;
-  }
-}
-
-class VarVal extends BaseVal {
-}
-
-class StrTplVal extends VarVal {
-  constructor(vals) {
-    super();
-    this.vals = vals;
-  }
-  render(stack, _rx) {
-    return this.eval(stack);
-  }
-  eval(stack) {
-    const strs = new Array(this.vals.length);
-    for (let i = 0;i < this.vals.length; i++) {
-      strs[i] = this.vals[i]?.eval(stack, "");
-    }
-    return strs.join("");
-  }
-  static parse(s, px) {
-    const parts = s.split(/(\{[^}]+\})/g);
-    const vals = new Array(parts.length);
-    let allConsts = true;
-    for (let i = 0;i < parts.length; i++) {
-      const s2 = parts[i];
-      const isExpr = s2[0] === "{" && s2.at(-1) === "}";
-      const val = isExpr ? vp.parseText(s2.slice(1, -1), px) : new ConstVal(s2);
-      vals[i] = val;
-      allConsts &&= val instanceof ConstVal;
-    }
-    return allConsts ? new ConstVal(vals.map((v) => v.value).join("")) : new StrTplVal(vals);
-  }
-}
-
-class NameVal extends VarVal {
-  constructor(name) {
-    super();
-    this.name = name;
-  }
-  eval(stack) {
-    return stack.lookupName(this.name);
-  }
-  toString() {
-    return this.name;
-  }
-}
-
-class InputHandlerNameVal extends NameVal {
-  eval(stack) {
-    return stack.getInputHandler(this.name) ?? mk404Handler("input", this.name);
-  }
-}
-
-class AlterHandlerNameVal extends NameVal {
-  eval(stack) {
-    return stack.getAlterHandler(this.name) ?? mk404Handler("alter", this.name);
-  }
-}
-var mk404Handler = (type, name) => function(...args) {
-  console.warn("handler not found", { type, name, args }, this);
-  return this;
-};
-
-class TypeVal extends NameVal {
-  eval(stack) {
-    return stack.lookupType(this.name);
-  }
-}
-
-class RequestVal extends NameVal {
-  eval(stack) {
-    return stack.lookupRequest(this.name);
-  }
-  toString() {
-    return `!${this.name}`;
-  }
-}
-
-class RawFieldVal extends NameVal {
-  eval(stack) {
-    return stack.lookupFieldRaw(this.name);
-  }
-  toString() {
-    return `.${this.name}`;
-  }
-}
-
-class RenderVal extends BaseVal {
-  render(stack, _rx) {
-    return this.eval(stack);
-  }
-}
-
-class RenderNameVal extends RenderVal {
-  constructor(name) {
-    super();
-    this.name = name;
-  }
-}
-
-class BindVal extends RenderNameVal {
-  eval(stack) {
-    return stack.lookupBind(this.name);
-  }
-  toString() {
-    return `@${this.name}`;
-  }
-}
-
-class DynVal extends RenderNameVal {
-  eval(stack) {
-    return stack.lookupDynamic(this.name);
-  }
-  toPathItem() {
-    return null;
-  }
-  toString() {
-    return `*${this.name}`;
-  }
-}
-
-class FieldVal extends RenderNameVal {
-  eval(stack) {
-    return stack.lookupField(this.name);
-  }
-  toPathItem() {
-    return new FieldStep(this.name);
-  }
-  toRawFieldVal() {
-    return new RawFieldVal(this.name);
-  }
-  toString() {
-    return `.${this.name}`;
-  }
-}
-
-class ComputedVal extends RenderNameVal {
-  eval(stack) {
-    return stack.lookupComputed(this.name);
-  }
-  toString() {
-    return `$${this.name}`;
-  }
-}
-
-class SeqAccessVal extends RenderVal {
-  constructor(seqVal, keyVal) {
-    super();
-    this.seqVal = seqVal;
-    this.keyVal = keyVal;
-  }
-  toPathItem() {
-    return new SeqAccessStep(this.seqVal.name, this.keyVal.name);
-  }
-  eval(stack) {
-    const key = this.keyVal.eval(stack);
-    return this.seqVal.eval(stack).get(key, null);
-  }
-  toString() {
-    return `${this.seqVal}[${this.keyVal}]`;
-  }
-}
-var VAL_SUB_TYPE_STRING_TEMPLATE = 0;
-var VAL_SUB_TYPE_SEQ_ACCESS = 1;
-var VAL_SUB_TYPE_INVALID = 2;
-var VAL_SUB_TYPE_CONST_STRING = 3;
-function getValSubType(s) {
-  let open = 0;
-  let close = 0;
-  for (let i = 0;i < s.length; i++) {
-    switch (s.charCodeAt(i)) {
-      case 91:
-        if (open > 0) {
-          return VAL_SUB_TYPE_INVALID;
-        }
-        open += 1;
-        break;
-      case 93:
-        if (close > 0 || open === 0) {
-          return VAL_SUB_TYPE_INVALID;
-        }
-        close += 1;
-        break;
-      case 123:
-        return VAL_SUB_TYPE_STRING_TEMPLATE;
-      case 125:
-        return VAL_SUB_TYPE_CONST_STRING;
-    }
-  }
-  if (open > 0 || close > 0) {
-    return open === 1 && close === 1 ? VAL_SUB_TYPE_SEQ_ACCESS : VAL_SUB_TYPE_INVALID;
-  }
-  return -1;
-}
-var vp = new ValParser;
-
-// src/attribute.js
-class Attributes {
-  constructor(items) {
-    this.items = items;
-  }
-  eval(_stack) {
-    return {};
-  }
-  static parse(attributes, px, parseAll = false) {
-    return getAttrParser(px).parse(attributes, parseAll);
-  }
-  isConstant() {
-    return false;
+  isConstant() {
+    return false;
   }
 }
 var booleanAttrsRaw = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected";
@@ -2956,7 +2389,7 @@ class App {
         this.render();
       }
     });
-    injectCss("tutuca-app", this.comps.compileStyles());
+    injectCss("tutuca-app", this.comps.compileStyles(), opts?.head ?? document.head);
     if (opts?.noCache) {
       this.renderer.setNullCache();
       this.comps.setNullComputedCache();
@@ -3001,15 +2434,15 @@ class App {
     this._evictCacheId = null;
   }
 }
-function injectCss(nodeId, style) {
+function injectCss(nodeId, style, styleTarget = document.head) {
   const styleNode = document.createElement("style");
-  const currentNodeWithId = document.head.querySelector(`#${nodeId}`);
+  const currentNodeWithId = styleTarget.querySelector(`#${nodeId}`);
   if (currentNodeWithId) {
-    document.head.removeChild(currentNodeWithId);
+    styleTarget.removeChild(currentNodeWithId);
   }
   styleNode.id = nodeId;
   styleNode.innerHTML = style;
-  document.head.appendChild(styleNode);
+  styleTarget.appendChild(styleNode);
 }
 function getClosestDropTarget(target, rootNode, count) {
   let node = target;
@@ -3701,28 +3134,28 @@ function hashCollection(collection) {
   }
   const ordered = isOrdered(collection);
   const keyed = isKeyed(collection);
-  let h2 = ordered ? 1 : 0;
+  let h = ordered ? 1 : 0;
   collection.__iterate(keyed ? ordered ? (v, k) => {
-    h2 = 31 * h2 + hashMerge(hash(v), hash(k)) | 0;
+    h = 31 * h + hashMerge(hash(v), hash(k)) | 0;
   } : (v, k) => {
-    h2 = h2 + hashMerge(hash(v), hash(k)) | 0;
+    h = h + hashMerge(hash(v), hash(k)) | 0;
   } : ordered ? (v) => {
-    h2 = 31 * h2 + hash(v) | 0;
+    h = 31 * h + hash(v) | 0;
   } : (v) => {
-    h2 = h2 + hash(v) | 0;
+    h = h + hash(v) | 0;
   });
-  return murmurHashOfSize(collection.size, h2);
+  return murmurHashOfSize(collection.size, h);
 }
 var hashMerge = (a, b) => a ^ b + 2654435769 + (a << 6) + (a >> 2) | 0;
-function murmurHashOfSize(size, h2) {
-  h2 = Math.imul(h2, 3432918353);
-  h2 = Math.imul(h2 << 15 | h2 >>> -15, 461845907);
-  h2 = Math.imul(h2 << 13 | h2 >>> -13, 5);
-  h2 = (h2 + 3864292196 | 0) ^ size;
-  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
-  h2 = Math.imul(h2 ^ h2 >>> 13, 3266489909);
-  h2 = smi(h2 ^ h2 >>> 16);
-  return h2;
+function murmurHashOfSize(size, h) {
+  h = Math.imul(h, 3432918353);
+  h = Math.imul(h << 15 | h >>> -15, 461845907);
+  h = Math.imul(h << 13 | h >>> -13, 5);
+  h = (h + 3864292196 | 0) ^ size;
+  h = Math.imul(h ^ h >>> 16, 2246822507);
+  h = Math.imul(h ^ h >>> 13, 3266489909);
+  h = smi(h ^ h >>> 16);
+  return h;
 }
 function quoteString(value) {
   try {
@@ -5831,7 +5264,7 @@ var List = (value) => {
   }
   assertNotInfinite(size);
   if (size > 0 && size < SIZE) {
-    return makeList(0, size, SHIFT, null, new VNode2(iter.toArray()));
+    return makeList(0, size, SHIFT, null, new VNode(iter.toArray()));
   }
   return empty.withMutations((list) => {
     list.setSize(size);
@@ -6022,7 +5455,7 @@ class ListImpl extends IndexedCollectionImpl {
 }
 List.isList = isList;
 
-class VNode2 {
+class VNode {
   constructor(array, ownerID) {
     this.array = array;
     this.ownerID = ownerID;
@@ -6033,7 +5466,7 @@ class VNode2 {
     }
     const originIndex = index >>> level & MASK;
     if (originIndex >= this.array.length) {
-      return new VNode2([], ownerID);
+      return new VNode([], ownerID);
     }
     const removingFirst = originIndex === 0;
     let newChild;
@@ -6259,7 +5692,7 @@ function editableVNode(node, ownerID) {
   if (ownerID && ownerID === node?.ownerID) {
     return node;
   }
-  return new VNode2(node?.array.slice() ?? [], ownerID);
+  return new VNode(node?.array.slice() ?? [], ownerID);
 }
 function listNodeFor(list, rawIndex) {
   if (rawIndex >= getTailOffset(list._capacity)) {
@@ -6297,7 +5730,7 @@ function setListBounds(list, begin, end) {
   let newRoot = list._root;
   let offsetShift = 0;
   while (newOrigin + offsetShift < 0) {
-    newRoot = new VNode2(newRoot?.array.length ? [undefined, newRoot] : [], owner);
+    newRoot = new VNode(newRoot?.array.length ? [undefined, newRoot] : [], owner);
     newLevel += SHIFT;
     offsetShift += 1 << newLevel;
   }
@@ -6310,11 +5743,11 @@ function setListBounds(list, begin, end) {
   const oldTailOffset = getTailOffset(oldCapacity);
   const newTailOffset = getTailOffset(newCapacity);
   while (newTailOffset >= 1 << newLevel + SHIFT) {
-    newRoot = new VNode2(newRoot?.array.length ? [newRoot] : [], owner);
+    newRoot = new VNode(newRoot?.array.length ? [newRoot] : [], owner);
     newLevel += SHIFT;
   }
   const oldTail = list._tail;
-  let newTail = newTailOffset < oldTailOffset ? listNodeFor(list, newCapacity - 1) : newTailOffset > oldTailOffset ? new VNode2([], owner) : oldTail;
+  let newTail = newTailOffset < oldTailOffset ? listNodeFor(list, newCapacity - 1) : newTailOffset > oldTailOffset ? new VNode([], owner) : oldTail;
   if (oldTail && newTailOffset > oldTailOffset && newOrigin < oldCapacity && oldTail.array.length) {
     newRoot = editableVNode(newRoot, owner);
     let node = newRoot;
@@ -7323,9 +6756,9 @@ class RepeatImpl extends IndexedSeqImpl {
 var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk"];
 
 class Renderer {
-  constructor(comps, h2, fragment, comment, renderFn, getSeqInfo, cache) {
+  constructor(comps, h, fragment, comment, renderFn, getSeqInfo, cache) {
     this.comps = comps;
-    this.h = h2;
+    this.h = h;
     this.fragment = fragment;
     this.comment = comment;
     this.renderFn = renderFn;
@@ -7350,114 +6783,494 @@ class Renderer {
         }
       }
     }
-    return dom.innerHTML;
+    return dom.innerHTML;
+  }
+  renderRoot(stack, val, viewName = null) {
+    const c = this.comps.getCompFor(val);
+    const nid = c.getView(viewName).anode.nodeId ?? null;
+    return c ? this._rValComp(stack, val, c, nid, "ROOT", viewName) : null;
+  }
+  renderIt(stack, nodeId, key, viewName) {
+    const c = this.comps.getCompFor(stack.it);
+    return c ? this._rValComp(stack, stack.it, c, nodeId, key, viewName) : null;
+  }
+  _rValComp(stack, val, comp, nid, key, viewName) {
+    const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
+    const cachedNode = this.cache.get(val, cacheKey);
+    if (cachedNode) {
+      return cachedNode;
+    }
+    const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
+    const meta = this.renderMetadata("Comp", { nid });
+    const dom = this.renderFragment([meta, view.render(stack, this)]);
+    this.cache.set(val, cacheKey, dom);
+    return dom;
+  }
+  renderEach(stack, iterInfo, nodeId, viewName) {
+    const { seq, filter, loopWith } = iterInfo.eval(stack);
+    const [attrName, gen] = this.getSeqInfo(seq);
+    const r = [];
+    const iterData = loopWith.call(stack.it, seq);
+    for (const [key, value] of gen(seq)) {
+      if (filter.call(stack.it, key, value, iterData)) {
+        const newStack = stack.enter(value, { key }, true);
+        const dom = this.renderIt(newStack, nodeId, key, viewName);
+        r.push(this.renderMetadata("Each", { nid: nodeId, [attrName]: key }));
+        r.push(dom);
+      }
+    }
+    return r;
+  }
+  renderEachWhen(stack, iterInfo, node, nid) {
+    const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
+    const [attrName, gen] = this.getSeqInfo(seq);
+    const hasEnricher = !!enricher;
+    const r = [];
+    const iterData = loopWith.call(stack.it, seq);
+    for (const [key, value] of gen(seq)) {
+      if (filter.call(stack.it, key, value, iterData)) {
+        const bindings = { key, value };
+        const cacheKey = `${nid}-${key}`;
+        let cachedNode;
+        if (hasEnricher) {
+          enricher.call(stack.it, bindings, key, value, iterData);
+          cachedNode = this.cache.get2(stack.it, value, cacheKey);
+        } else {
+          cachedNode = this.cache.get(value, cacheKey);
+        }
+        if (cachedNode) {
+          r.push(this.renderMetadata("Each", { nid, [attrName]: key }));
+          r.push(cachedNode);
+          continue;
+        }
+        const newStack = stack.enter(value, bindings, false);
+        const dom = node.render(newStack, this);
+        r.push(this.renderMetadata("Each", { nid, [attrName]: key }));
+        if (hasEnricher) {
+          this.cache.set2(stack.it, value, cacheKey, dom);
+        } else {
+          this.cache.set(value, cacheKey, dom);
+        }
+        r.push(dom);
+      }
+    }
+    return r;
+  }
+  renderText(text) {
+    return text;
+  }
+  renderMetadata(type, info) {
+    info.$ = type;
+    return this.renderComment(`§${JSON.stringify(info)}§`);
+  }
+  renderComment(text) {
+    return this.comment(text);
+  }
+  renderEmpty(_text) {
+    return null;
+  }
+  renderTag(tagName, attrs, childs) {
+    return this.h(tagName, attrs, childs);
+  }
+  renderFragment(childs) {
+    return this.fragment(childs);
+  }
+}
+function* imIndexedEntries(seq) {
+  let i = 0;
+  for (const v of seq)
+    yield [i++, v];
+}
+function* imKeyedEntries(obj) {
+  for (const [key, value] of obj.toSeq().entries())
+    yield [key, value];
+}
+var seqInfoByClass = new Map;
+var idxInfo = ["si", imIndexedEntries];
+var keyInfo = ["sk", imKeyedEntries];
+var unkInfo = ["si", function* nullEntries(_obj) {}];
+function basicGetSeqInfo(seq) {
+  return isIndexed(seq) ? idxInfo : isKeyed(seq) ? keyInfo : seqInfoByClass.get(seq?.constructor) ?? unkInfo;
+}
+
+// src/vdom.js
+function isHtmlAttribute(propName) {
+  return 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 (typeof propValue === "object" && propValue !== null) {
+      patchObject(node, previous, propName, propValue);
+    } 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.innerHTML = "";
+  } else if (isHtmlAttribute(propName)) {
+    node.removeAttribute(propName);
+  } else if (typeof previousValue === "string") {
+    if (propName !== "className")
+      node[propName] = "";
+    const attrName = propName === "className" ? "class" : propName === "htmlFor" ? "for" : propName;
+    node.removeAttribute(attrName);
+  } else {
+    node[propName] = null;
+  }
+}
+function patchObject(node, previous, propName, propValue) {
+  const previousValue = previous?.[propName];
+  if (previousValue && typeof previousValue === "object" && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
+    node[propName] = propValue;
+    return;
+  }
+  let current = node[propName];
+  if (typeof current !== "object" || current === null) {
+    node[propName] = {};
+    current = node[propName];
+  }
+  const target = current;
+  for (const k in propValue) {
+    target[k] = propValue[k];
+  }
+}
+
+class VBase {
+  isEqualTo(other) {
+    return this === other;
+  }
+  toDom(_opts) {
+    return null;
+  }
+}
+function getKey(child) {
+  return child instanceof VNode2 ? child.key : undefined;
+}
+function isIterable(obj) {
+  return obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
+}
+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();
+    const normalized = [];
+    addChild(normalized, childs);
+    this.childs = normalized;
+  }
+  get nodeType() {
+    return 11;
+  }
+  isEqualTo(other) {
+    if (!(other instanceof VFragment) || this.childs.length !== other.childs.length) {
+      return false;
+    }
+    for (let i = 0;i < this.childs.length; i++) {
+      if (!this.childs[i].isEqualTo(other.childs[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  toDom(opts) {
+    const fragment = opts.document.createDocumentFragment();
+    for (const child of this.childs) {
+      const childNode = child.toDom(opts);
+      if (childNode) {
+        fragment.appendChild(childNode);
+      }
+    }
+    return fragment;
   }
-  renderRoot(stack, val, viewName = null) {
-    const c = this.comps.getCompFor(val);
-    const nid = c.getView(viewName).anode.nodeId ?? null;
-    return c ? this._rValComp(stack, val, c, nid, "ROOT", viewName) : null;
+}
+
+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;
   }
-  renderIt(stack, nodeId, key, viewName) {
-    const c = this.comps.getCompFor(stack.it);
-    return c ? this._rValComp(stack, stack.it, c, nodeId, key, viewName) : null;
+  get nodeType() {
+    return 1;
   }
-  _rValComp(stack, val, comp, nid, key, viewName) {
-    const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
-    const cachedNode = this.cache.get(val, cacheKey);
-    if (cachedNode) {
-      return cachedNode;
+  isEqualTo(other) {
+    if (!(other instanceof VNode2) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
+      return false;
     }
-    const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
-    const meta = this.renderMetadata("Comp", { nid });
-    const dom = this.renderFragment([meta, view.render(stack, this)]);
-    this.cache.set(val, cacheKey, dom);
-    return dom;
+    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;
+      }
+    }
+    for (let i = 0;i < this.childs.length; i++) {
+      if (!this.childs[i].isEqualTo(other.childs[i])) {
+        return false;
+      }
+    }
+    return true;
   }
-  renderEach(stack, iterInfo, nodeId, viewName) {
-    const { seq, filter, loopWith } = iterInfo.eval(stack);
-    const [attrName, gen] = this.getSeqInfo(seq);
-    const r = [];
-    const iterData = loopWith.call(stack.it, seq);
-    for (const [key, value] of gen(seq)) {
-      if (filter.call(stack.it, key, value, iterData)) {
-        const newStack = stack.enter(value, { key }, true);
-        const dom = this.renderIt(newStack, nodeId, key, viewName);
-        r.push(this.renderMetadata("Each", { nid: nodeId, [attrName]: key }));
-        r.push(dom);
+  toDom(opts) {
+    const doc = opts.document;
+    const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
+    applyProperties(node, this.attrs, {});
+    for (const child of this.childs) {
+      const childNode = child.toDom(opts);
+      if (childNode) {
+        node.appendChild(childNode);
       }
     }
-    return r;
+    return node;
   }
-  renderEachWhen(stack, iterInfo, node, nid) {
-    const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
-    const [attrName, gen] = this.getSeqInfo(seq);
-    const hasEnricher = !!enricher;
-    const r = [];
-    const iterData = loopWith.call(stack.it, seq);
-    for (const [key, value] of gen(seq)) {
-      if (filter.call(stack.it, key, value, iterData)) {
-        const bindings = { key, value };
-        const cacheKey = `${nid}-${key}`;
-        let cachedNode;
-        if (hasEnricher) {
-          enricher.call(stack.it, bindings, key, value, iterData);
-          cachedNode = this.cache.get2(stack.it, value, cacheKey);
-        } else {
-          cachedNode = this.cache.get(value, cacheKey);
-        }
-        if (cachedNode) {
-          r.push(this.renderMetadata("Each", { nid, [attrName]: key }));
-          r.push(cachedNode);
-          continue;
-        }
-        const newStack = stack.enter(value, bindings, false);
-        const dom = node.render(newStack, this);
-        r.push(this.renderMetadata("Each", { nid, [attrName]: key }));
-        if (hasEnricher) {
-          this.cache.set2(stack.it, value, cacheKey, dom);
-        } else {
-          this.cache.set(value, cacheKey, dom);
+}
+function diffProps(a, b) {
+  let diff = null;
+  for (const aKey in a) {
+    if (!Object.hasOwn(b, aKey)) {
+      diff ??= {};
+      diff[aKey] = undefined;
+      continue;
+    }
+    const aValue = a[aKey];
+    const bValue = b[aKey];
+    if (aValue === bValue) {} else if (typeof aValue === "object" && aValue !== null && typeof bValue === "object" && bValue !== null) {
+      if (Object.getPrototypeOf(bValue) !== Object.getPrototypeOf(aValue)) {
+        diff ??= {};
+        diff[aKey] = bValue;
+      } else {
+        const objectDiff = diffProps(aValue, bValue);
+        if (objectDiff) {
+          diff ??= {};
+          diff[aKey] = objectDiff;
         }
-        r.push(dom);
       }
+    } else {
+      diff ??= {};
+      diff[aKey] = bValue;
     }
-    return r;
-  }
-  renderText(text) {
-    return text;
   }
-  renderMetadata(type, info) {
-    info.$ = type;
-    return this.renderComment(`§${JSON.stringify(info)}§`);
+  for (const bKey in b) {
+    if (!Object.hasOwn(a, bKey)) {
+      diff ??= {};
+      diff[bKey] = b[bKey];
+    }
   }
-  renderComment(text) {
-    return this.comment(text);
+  return diff;
+}
+function replaceNode(domNode, vnode, options) {
+  const parentNode = domNode.parentNode;
+  const newNode = vnode.toDom(options);
+  if (parentNode && newNode && newNode !== domNode) {
+    parentNode.replaceChild(newNode, domNode);
   }
-  renderEmpty(_text) {
-    return null;
+  return newNode || domNode;
+}
+function morphNode(domNode, source, target, opts) {
+  if (source === target || source.isEqualTo(target))
+    return domNode;
+  if (source instanceof VText && target instanceof VText || source instanceof VComment && target instanceof VComment) {
+    domNode.data = target.text;
+    return domNode;
   }
-  renderTag(tagName, attrs, childs) {
-    return this.h(tagName, attrs, childs);
+  if (source instanceof VNode2 && target instanceof VNode2 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+    const propsDiff = diffProps(source.attrs, target.attrs);
+    if (propsDiff) {
+      applyProperties(domNode, propsDiff, source.attrs);
+    }
+    if (!target.attrs.dangerouslySetInnerHTML) {
+      morphChildren(domNode, source.childs, target.childs, source.tag, opts);
+    }
+    return domNode;
   }
-  renderFragment(childs) {
-    return this.fragment(childs);
+  if (source instanceof VFragment && target instanceof VFragment) {
+    morphChildren(domNode, source.childs, target.childs, null, opts);
+    return domNode;
   }
+  return replaceNode(domNode, target, opts);
 }
-function* imIndexedEntries(seq) {
-  let i = 0;
-  for (const v of seq)
-    yield [i++, v];
+function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
+  if (oldChilds.length === 0) {
+    for (const child of newChilds) {
+      const node = child.toDom(opts);
+      if (node)
+        parentDom.appendChild(node);
+    }
+    return;
+  }
+  if (newChilds.length === 0) {
+    while (parentDom.firstChild) {
+      parentDom.removeChild(parentDom.firstChild);
+    }
+    return;
+  }
+  const domNodes = Array.from(parentDom.childNodes);
+  const oldKeyMap = {};
+  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 dom = domNodes[oldIdx];
+      const newDom = morphNode(dom, oldChilds[oldIdx], newChild, opts);
+      const ref = parentDom.childNodes[j] ?? null;
+      if (newDom !== ref)
+        parentDom.insertBefore(newDom, ref);
+    } else {
+      const dom = newChild.toDom(opts);
+      if (dom) {
+        const ref = parentDom.childNodes[j] ?? null;
+        parentDom.insertBefore(dom, ref);
+      }
+    }
+  }
+  for (let i = oldChilds.length - 1;i >= 0; i--) {
+    if (!used[i] && domNodes[i].parentNode === parentDom) {
+      parentDom.removeChild(domNodes[i]);
+    }
+  }
 }
-function* imKeyedEntries(obj) {
-  for (const [key, value] of obj.toSeq().entries())
-    yield [key, value];
+var renderCache = new WeakMap;
+function render(vnode, container, options) {
+  const cached = renderCache.get(container);
+  const isFragment = vnode instanceof VFragment;
+  if (cached) {
+    const wasFragment = cached.vnode instanceof VFragment;
+    if (wasFragment === isFragment) {
+      const rootNode = wasFragment ? container : cached.dom;
+      const newDom = morphNode(rootNode, cached.vnode, vnode, options);
+      renderCache.set(container, {
+        vnode,
+        dom: isFragment ? container : newDom
+      });
+      return newDom;
+    }
+    renderCache.delete(container);
+  }
+  const domNode = vnode.toDom(options);
+  if (domNode) {
+    container.innerHTML = "";
+    container.appendChild(domNode);
+    renderCache.set(container, {
+      vnode,
+      dom: isFragment ? container : domNode
+    });
+  }
+  return domNode;
 }
-var seqInfoByClass = new Map;
-var idxInfo = ["si", imIndexedEntries];
-var keyInfo = ["sk", imKeyedEntries];
-var unkInfo = ["si", function* nullEntries(_obj) {}];
-function basicGetSeqInfo(seq) {
-  return isIndexed(seq) ? idxInfo : isKeyed(seq) ? keyInfo : seqInfoByClass.get(seq?.constructor) ?? unkInfo;
+function h(tagName, properties, children) {
+  const tag = tagName.toUpperCase();
+  const props = {};
+  let key;
+  let namespace;
+  if (properties) {
+    for (const propName in properties) {
+      if (propName === "key") {
+        key = properties[propName];
+      } else if (propName === "namespace") {
+        namespace = properties[propName];
+      } else if (propName === "class") {
+        props.className = properties[propName];
+      } else if (propName === "for") {
+        props.htmlFor = properties[propName];
+      } else if (isHtmlAttribute(propName)) {
+        props[propName] = String(properties[propName]);
+      } else {
+        props[propName] = properties[propName];
+      }
+    }
+  }
+  const normalizedChildren = [];
+  addChild(normalizedChildren, children);
+  return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
 // src/oo.js
 var BAD_VALUE = Symbol("BadValue");
@@ -7899,6 +7712,7 @@ export {
   isKeyed,
   isIndexed,
   isMap as isIMap,
+  injectCss,
   html,
   fieldsByClass,
   css,