tutuca 0.9.11 → 0.9.13

package/dist/tutuca.js

@@ -280,9 +280,6 @@ class ValParser {
     this.okStrTpl = false;
     this.okSeqAccess = false;
   }
-  parseIfOk(s, px, isOk, parseFn) {
-    return isOk ? parseFn(s, px) : null;
-  }
   _parseSeqAccess(s, px) {
     if (!this.okSeqAccess) {
       return null;
@@ -296,13 +293,13 @@ class ValParser {
   parse(s, px) {
     switch (getValSubType(s)) {
       case VAL_SUB_TYPE_STRING_TEMPLATE:
-        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
+        return this.okStrTpl ? parseStrTemplate(s, px) : null;
       case VAL_SUB_TYPE_CONST_STRING:
-        return this.parseIfOk(s, px, this.okStrTpl, parseConst);
+        return this.okStrTpl ? parseConst(s, px) : null;
       case VAL_SUB_TYPE_SEQ_ACCESS:
         return this._parseSeqAccess(s, px);
       case VAL_SUB_TYPE_INVALID:
-        return this.parseIfOk(s, px, this.okStrTpl, parseStrTemplate);
+        return this.okStrTpl ? parseStrTemplate(s, px) : null;
     }
     const charCode = s.charCodeAt(0);
     switch (charCode) {
@@ -314,29 +311,29 @@ class ValParser {
         return null;
       }
       case 126:
-        return this.parseIfOk(s.slice(1), px, this.okStrTpl, parseConst);
+        return this.okStrTpl ? parseConst(s.slice(1), px) : null;
       case 39:
-        return this.parseIfOk(s.slice(1, -1), px, this.okStrTpl, parseConst);
+        return this.okStrTpl ? parseConst(s.slice(1, -1), px) : null;
       case 64:
-        return this.parseIfOk(s.slice(1), px, this.okBind, parseBind);
+        return this.okBind ? parseBind(s.slice(1), px) : null;
       case 42:
-        return this.parseIfOk(s.slice(1), px, this.okDyn, parseDyn);
+        return this.okDyn ? parseDyn(s.slice(1), px) : null;
       case 46:
-        return this.parseIfOk(s.slice(1), px, this.okField, parseField);
+        return this.okField ? parseField(s.slice(1), px) : null;
       case 36:
-        return this.parseIfOk(s.slice(1), px, this.okComputed, parseComp);
+        return this.okComputed ? parseComp(s.slice(1), px) : null;
       case 33:
-        return this.parseIfOk(s.slice(1), px, this.okRequest, parseReq);
+        return this.okRequest ? parseReq(s.slice(1), px) : null;
     }
     const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
     if (Number.isFinite(num)) {
-      return this.parseIfOk(num, px, this.okConst, parseConst);
+      return this.okConst ? parseConst(num, px) : null;
     } else if (s === "true" || s === "false") {
-      return this.parseIfOk(s === "true", px, this.okConst, parseConst);
+      return this.okConst ? parseConst(s === "true", px) : null;
     } else if (charCode >= 97 && charCode <= 122) {
-      return this.parseIfOk(s, px, this.okName, parseName);
+      return this.okName ? parseName(s, px) : null;
     } else if (charCode >= 65 && charCode <= 90) {
-      return this.parseIfOk(s, px, this.okType, parseType);
+      return this.okType ? parseType(s, px) : null;
     }
     return null;
   }
@@ -419,18 +416,18 @@ class BaseVal {
 }
 
 class ConstVal extends BaseVal {
-  constructor(value) {
+  constructor(val) {
     super();
-    this.value = value;
+    this.val = val;
   }
   render(_stack, _rx) {
-    return this.value;
+    return this.val;
   }
   eval(_stack) {
-    return this.value;
+    return this.val;
   }
   toString() {
-    const v = this.value;
+    const v = this.val;
     return typeof v === "string" ? `'${v}'` : `${v}`;
   }
 }
@@ -464,7 +461,7 @@ class StrTplVal extends VarVal {
       vals[i] = val;
       allConsts &&= val instanceof ConstVal;
     }
-    return allConsts ? new ConstVal(vals.map((v) => v.value).join("")) : new StrTplVal(vals);
+    return allConsts ? new ConstVal(vals.map((v) => v.val).join("")) : new StrTplVal(vals);
   }
 }
 
@@ -483,13 +480,13 @@ class NameVal extends VarVal {
 
 class InputHandlerNameVal extends NameVal {
   eval(stack) {
-    return stack.getInputHandler(this.name) ?? mk404Handler("input", this.name);
+    return stack.getHandlerFor(this.name, "input") ?? mk404Handler("input", this.name);
   }
 }
 
 class AlterHandlerNameVal extends NameVal {
   eval(stack) {
-    return stack.getAlterHandler(this.name) ?? mk404Handler("alter", this.name);
+    return stack.getHandlerFor(this.name, "alter") ?? mk404Handler("alter", this.name);
   }
 }
 var mk404Handler = (type, name) => function(...args) {
@@ -798,7 +795,7 @@ class ConstAttrs extends Attributes {
   static fromAttrs(attrs) {
     const attrsObj = {};
     for (const attr of attrs) {
-      attrsObj[attr.name] = attr.value.eval(null);
+      attrsObj[attr.name] = attr.val.eval(null);
     }
     return new ConstAttrs(attrsObj);
   }
@@ -831,7 +828,7 @@ class DynAttrs extends Attributes {
   toMacroVars() {
     const r = {};
     for (const attr of this.items) {
-      r[attr.name] = attr.value.toString();
+      r[attr.name] = attr.val.toString();
     }
     return r;
   }
@@ -844,23 +841,23 @@ class BaseAttr {
 }
 
 class Attr extends BaseAttr {
-  constructor(name, value) {
+  constructor(name, val) {
     super(name);
-    this.value = value;
+    this.val = val;
   }
   eval(stack) {
-    return this.value.eval(stack);
+    return this.val.eval(stack);
   }
 }
 
 class ConstAttr extends Attr {
 }
 class RawHtmlAttr extends Attr {
-  constructor(value) {
-    super("dangerouslySetInnerHTML", value ?? vp.nullConstVal);
+  constructor(val) {
+    super("dangerouslySetInnerHTML", val ?? vp.nullConstVal);
   }
   eval(stack) {
-    return { __html: `${this.value.eval(stack)}` };
+    return { __html: `${this.val.eval(stack)}` };
   }
 }
 var NOT_SET_VAL = vp.nullConstVal;
@@ -940,16 +937,16 @@ class BaseNode {
 }
 
 class TextNode extends BaseNode {
-  constructor(v) {
+  constructor(val) {
     super();
-    this.v = v;
+    this.val = val;
   }
   render(_stack, rx) {
-    return rx.renderText(this.v);
+    return rx.renderText(this.val);
   }
   isWhiteSpace() {
-    for (let i = 0;i < this.v.length; i++) {
-      const c = this.v.charCodeAt(i);
+    for (let i = 0;i < this.val.length; i++) {
+      const c = this.val.charCodeAt(i);
       if (!(c === 32 || c === 10 || c === 9 || c === 13)) {
         return false;
       }
@@ -957,8 +954,8 @@ class TextNode extends BaseNode {
     return true;
   }
   hasNewLine() {
-    for (let i = 0;i < this.v.length; i++) {
-      const c = this.v.charCodeAt(i);
+    for (let i = 0;i < this.val.length; i++) {
+      const c = this.val.charCodeAt(i);
       if (c === 10 || c === 13) {
         return true;
       }
@@ -966,7 +963,7 @@ class TextNode extends BaseNode {
     return false;
   }
   condenseWhiteSpace() {
-    this.v = "";
+    this.val = "";
   }
   isConstant() {
     return true;
@@ -976,7 +973,7 @@ class TextNode extends BaseNode {
 
 class CommentNode extends TextNode {
   render(_stack, rx) {
-    return rx.renderComment(this.v);
+    return rx.renderComment(this.val);
   }
 }
 function optimizeChilds(childs) {
@@ -1205,7 +1202,8 @@ class RenderNode extends RenderViewId {
 
 class RenderItNode extends RenderViewId {
   render(stack, rx) {
-    return rx.renderIt(stack, this.nodeId, "", this.viewId);
+    const newStack = stack.enter(stack.it, {}, true);
+    return rx.renderIt(newStack, this.nodeId, "", this.viewId);
   }
   pathInNext = true;
 }
@@ -1400,7 +1398,7 @@ class ParseContext {
     const slots = { _: new FragmentNode(anySlot) };
     for (const child of childs) {
       if (child instanceof SlotNode) {
-        slots[child.val.value] = child.node;
+        slots[child.val.val] = child.node;
       } else if (!(child instanceof TextNode) || !child.isWhiteSpace()) {
         anySlot.push(child);
       }
@@ -1664,18 +1662,15 @@ class Components {
     const comp = this.getCompFor(v);
     return comp ? comp.on.stackEnter : defaultOnStackEnter;
   }
-  getInputHandlerFor(v, name) {
-    return this.getCompFor(v)?.input[name] ?? null;
-  }
-  getAlterHandlerFor(v, name) {
-    return this.getCompFor(v)?.alter[name] ?? null;
+  getHandlerFor(v, name, key) {
+    return this.getCompFor(v)?.[key][name] ?? null;
   }
   getRequestFor(v, name) {
     const comp = this.getCompFor(v);
     return comp ? comp.scope.lookupRequest(name) : null;
   }
   lookupComputed(v, name) {
-    const fn = this.getCompFor(v)?.computed[name];
+    const fn = this.getHandlerFor(v, name, "computed");
     return fn ? this.computedCache.getKey(v, name, fn) : null;
   }
   compileStyles() {
@@ -1954,11 +1949,8 @@ class Stack {
     const node = this.binds.head.isFrame ? this.binds.head : this.binds.tail.head;
     return this.comps.lookupComputed(node.it, name);
   }
-  getInputHandler(name) {
-    return this.comps.getInputHandlerFor(this.it, name);
-  }
-  getAlterHandler(name) {
-    return this.comps.getAlterHandlerFor(this.it, name);
+  getHandlerFor(name, key) {
+    return this.comps.getHandlerFor(this.it, name, key);
   }
   lookupRequest(name) {
     return this.comps.getRequestFor(this.it, name);
@@ -1976,22 +1968,22 @@ class Stack {
 
 // src/transactor.js
 class State {
-  constructor(value) {
-    this.value = value;
+  constructor(val) {
+    this.val = val;
     this.changeSubs = [];
   }
   onChange(cb) {
     this.changeSubs.push(cb);
   }
-  set(value, info) {
-    const old = this.value;
-    this.value = value;
+  set(val, info) {
+    const old = this.val;
+    this.val = val;
     for (const sub of this.changeSubs) {
-      sub({ value, old, info, timestamp: Date.now() });
+      sub({ val, old, info, timestamp: Date.now() });
     }
   }
   update(fn, info) {
-    return this.set(fn(this.value), info);
+    return this.set(fn(this.val), info);
   }
 }
 
@@ -2015,7 +2007,7 @@ class Transactor {
     return this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts));
   }
   async pushRequest(path, name, args = [], opts = {}, parent = null) {
-    const curRoot = this.state.value;
+    const curRoot = this.state.val;
     const curLeaf = path.lookup(curRoot);
     const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
     const resHandlerName = opts?.onResName ?? name;
@@ -2045,7 +2037,7 @@ class Transactor {
     }
   }
   transact(transaction) {
-    const curState = this.state.value;
+    const curState = this.state.val;
     const newState = transaction.run(curState, this.comps);
     if (newState !== undefined) {
       this.state.set(newState, { transaction });
@@ -2068,10 +2060,10 @@ function nullHandler() {
 }
 
 class Transaction {
-  constructor(path, transactor) {
+  constructor(path, transactor, parentTransaction = null) {
     this.path = path;
     this.transactor = transactor;
-    this.parentTransaction = null;
+    this.parentTransaction = parentTransaction;
     this._task = null;
   }
   get task() {
@@ -2229,7 +2221,7 @@ class Task {
   constructor(info) {
     this.info = info;
     this.deps = [];
-    this.value = this.resolve = this.reject = null;
+    this.val = this.resolve = this.reject = null;
     this.promise = new Promise((res, rej) => {
       this.resolve = res;
       this.reject = rej;
@@ -2241,8 +2233,8 @@ class Task {
     this.deps.push(task);
     task.promise.then((_) => this._check());
   }
-  complete(value) {
-    this.value = value;
+  complete(val) {
+    this.val = val;
     this._check();
   }
   _check() {
@@ -2345,7 +2337,7 @@ class App {
       }
     } else if (isDragStart) {
       e.target.dataset.dragging = 1;
-      const rootValue = this.state.value;
+      const rootValue = this.state.val;
       const value = path.lookup(rootValue);
       const type = e.target.dataset.dragtype ?? "?";
       const stack = path.buildStack(this.makeStack(rootValue));
@@ -2371,7 +2363,7 @@ class App {
     }
   }
   render() {
-    const root = this.state.value;
+    const root = this.state.val;
     const stack = this.makeStack(root);
     return this.renderFn(this.renderer.renderRoot(stack, root), this.rootNode);
   }
@@ -2397,7 +2389,7 @@ class App {
       this.rootNode.addEventListener(name, this);
     }
     this.onChange((info) => {
-      if (info.value !== info.old) {
+      if (info.val !== info.old) {
         this.render();
       }
     });
@@ -2468,11 +2460,11 @@ function getClosestDropTarget(target, rootNode, count) {
 }
 
 class DragInfo {
-  constructor(path, stack, e, value, type, node) {
+  constructor(path, stack, e, val, type, node) {
     this.path = path;
     this.stack = stack;
     this.e = e;
-    this.value = value;
+    this.val = val;
     this.type = type;
     this.node = node;
   }
@@ -6865,7 +6857,7 @@ class Renderer {
     this.comps = comps;
     this.h = h;
     this.fragment = fragment;
-    this.comment = comment;
+    this.renderComment = comment;
     this.renderFn = renderFn;
     this.getSeqInfo = getSeqInfo ?? basicGetSeqInfo;
     this.cache = cache ?? new WeakMapDomCache;
@@ -6891,13 +6883,13 @@ class Renderer {
     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;
+    const comp = this.comps.getCompFor(val);
+    const nid = comp.getView(viewName).anode.nodeId ?? null;
+    return comp ? this._rValComp(stack, val, comp, 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;
+    const comp = this.comps.getCompFor(stack.it);
+    return comp ? this._rValComp(stack, stack.it, comp, nodeId, key, viewName) : null;
   }
   _rValComp(stack, val, comp, nid, key, viewName) {
     const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
@@ -6907,10 +6899,13 @@ class Renderer {
     }
     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)]);
+    const dom = this.renderFragment([meta, this.renderView(view, stack)]);
     this.cache.set(val, cacheKey, dom);
     return dom;
   }
+  pushEachEntry(r, nid, attrName, key, dom) {
+    r.push(this.renderMetadata("Each", { nid, [attrName]: key }), dom);
+  }
   renderEach(stack, iterInfo, nodeId, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
     const [attrName, gen] = this.getSeqInfo(seq);
@@ -6920,16 +6915,14 @@ class Renderer {
       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);
+        this.pushEachEntry(r, nodeId, attrName, key, dom);
       }
     }
     return r;
   }
-  renderEachWhen(stack, iterInfo, node, nid) {
+  renderEachWhen(stack, iterInfo, view, 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)) {
@@ -6937,30 +6930,31 @@ class Renderer {
         const bindings = { key, value };
         const cacheKey = `${nid}-${key}`;
         let cachedNode;
-        if (hasEnricher) {
+        if (enricher) {
           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);
+          this.pushEachEntry(r, nid, attrName, key, 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) {
+        const dom = this.renderView(view, newStack);
+        this.pushEachEntry(r, nid, attrName, key, dom);
+        if (enricher) {
           this.cache.set2(stack.it, value, cacheKey, dom);
         } else {
           this.cache.set(value, cacheKey, dom);
         }
-        r.push(dom);
       }
     }
     return r;
   }
+  renderView(view, stack) {
+    return view.render(stack, this);
+  }
   renderText(text) {
     return text;
   }
@@ -6968,10 +6962,7 @@ class Renderer {
     info.$ = type;
     return this.renderComment(`§${JSON.stringify(info)}§`);
   }
-  renderComment(text) {
-    return this.comment(text);
-  }
-  renderEmpty(_text) {
+  renderEmpty() {
     return null;
   }
   renderTag(tagName, attrs, childs) {
@@ -7001,6 +6992,7 @@ function basicGetSeqInfo(seq) {
 // src/vdom.js
 var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
 var isObject = (v) => v !== null && typeof v === "object";
+var prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b);
 function applyProperties(node, props, previous) {
   for (const propName in props) {
     const propValue = props[propName];
@@ -7022,41 +7014,48 @@ function applyProperties(node, props, previous) {
 function removeProperty(node, propName, previous) {
   const previousValue = previous[propName];
   if (propName === "dangerouslySetInnerHTML") {
-    node.innerHTML = "";
+    node.replaceChildren();
+  } else if (propName === "className") {
+    node.removeAttribute("class");
+  } else if (propName === "htmlFor") {
+    node.removeAttribute("for");
   } else if (typeof previousValue === "string" || isHtmlAttribute(propName)) {
-    const attrName = propName === "className" ? "class" : propName === "htmlFor" ? "for" : propName;
-    node.removeAttribute(attrName);
+    node.removeAttribute(propName);
   } else {
     node[propName] = null;
   }
 }
 function patchObject(node, previous, propName, propValue) {
   const previousValue = previous?.[propName];
-  if (isObject(previousValue) && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
+  if (isObject(previousValue) && prototypesDiffer(previousValue, propValue)) {
     node[propName] = propValue;
     return;
   }
-  let current = node[propName];
-  if (!isObject(current)) {
+  if (!isObject(node[propName])) {
     node[propName] = {};
-    current = node[propName];
   }
-  const target = current;
+  const target = node[propName];
   for (const k in propValue) {
     target[k] = propValue[k];
   }
 }
 
 class VBase {
-  isEqualTo(other) {
-    return this === other;
-  }
-  toDom(_opts) {
-    return null;
-  }
 }
 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) {
+  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;
@@ -7120,21 +7119,11 @@ class VFragment extends VBase {
     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;
+    return childsEqual(this.childs, other.childs);
   }
   toDom(opts) {
     const fragment = opts.document.createDocumentFragment();
-    for (const child of this.childs) {
-      const childNode = child.toDom(opts);
-      if (childNode) {
-        fragment.appendChild(childNode);
-      }
-    }
+    appendChildNodes(fragment, this.childs, opts);
     return fragment;
   }
 }
@@ -7165,23 +7154,13 @@ class VNode2 extends VBase {
         return false;
       }
     }
-    for (let i = 0;i < this.childs.length; i++) {
-      if (!this.childs[i].isEqualTo(other.childs[i])) {
-        return false;
-      }
-    }
-    return true;
+    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);
     applyProperties(node, this.attrs, {});
-    for (const child of this.childs) {
-      const childNode = child.toDom(opts);
-      if (childNode) {
-        node.appendChild(childNode);
-      }
-    }
+    appendChildNodes(node, this.childs, opts);
     return node;
   }
 }
@@ -7195,8 +7174,10 @@ function diffProps(a, b) {
     }
     const aValue = a[aKey];
     const bValue = b[aKey];
-    if (aValue === bValue) {} else if (isObject(aValue) && isObject(bValue)) {
-      if (Object.getPrototypeOf(bValue) !== Object.getPrototypeOf(aValue)) {
+    if (aValue === bValue)
+      continue;
+    if (isObject(aValue) && isObject(bValue)) {
+      if (prototypesDiffer(bValue, aValue)) {
         diff ??= {};
         diff[aKey] = bValue;
       } else {
@@ -7219,55 +7200,44 @@ function diffProps(a, b) {
   }
   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);
-  }
-  return newNode || domNode;
-}
-var bothInstanceOf = (a, b, C) => a instanceof C && b instanceof C;
 function morphNode(domNode, source, target, opts) {
   if (source === target || source.isEqualTo(target))
     return domNode;
-  if (bothInstanceOf(source, target, VText) || bothInstanceOf(source, target, VComment)) {
-    domNode.data = target.text;
-    return domNode;
-  }
-  if (bothInstanceOf(source, target, 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);
+  const type = source.nodeType;
+  if (type === target.nodeType) {
+    if (type === 3 || type === 8) {
+      domNode.data = target.text;
+      return domNode;
     }
-    if (!target.attrs.dangerouslySetInnerHTML) {
-      morphChildren(domNode, source.childs, target.childs, source.tag, opts);
+    if (type === 1 && 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, opts);
+      }
+      return domNode;
+    }
+    if (type === 11) {
+      morphChildren(domNode, source.childs, target.childs, opts);
+      return domNode;
     }
-    return domNode;
-  }
-  if (bothInstanceOf(source, target, VFragment)) {
-    morphChildren(domNode, source.childs, target.childs, null, opts);
-    return domNode;
   }
-  return replaceNode(domNode, target, opts);
+  const newNode = target.toDom(opts);
+  domNode.parentNode?.replaceChild(newNode, domNode);
+  return newNode;
 }
-function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
+function morphChildren(parentDom, oldChilds, newChilds, opts) {
   if (oldChilds.length === 0) {
-    for (const child of newChilds) {
-      const node = child.toDom(opts);
-      if (node)
-        parentDom.appendChild(node);
-    }
+    appendChildNodes(parentDom, newChilds, opts);
     return;
   }
   if (newChilds.length === 0) {
-    while (parentDom.firstChild) {
-      parentDom.removeChild(parentDom.firstChild);
-    }
+    parentDom.replaceChildren();
     return;
   }
   const domNodes = Array.from(parentDom.childNodes);
-  const oldKeyMap = {};
+  const oldKeyMap = Object.create(null);
   for (let i = 0;i < oldChilds.length; i++) {
     const key = getKey(oldChilds[i]);
     if (key != null)
@@ -7294,17 +7264,13 @@ function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
     }
     if (oldIdx >= 0) {
       used[oldIdx] = 1;
-      const dom = domNodes[oldIdx];
-      const newDom = morphNode(dom, oldChilds[oldIdx], newChild, opts);
+      const newDom = morphNode(domNodes[oldIdx], 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);
-      }
+      const ref = parentDom.childNodes[j] ?? null;
+      parentDom.insertBefore(newChild.toDom(opts), ref);
     }
   }
   for (let i = oldChilds.length - 1;i >= 0; i--) {
@@ -7317,24 +7283,16 @@ 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);
-      const domToCache = isFragment ? container : newDom;
-      renderCache.set(container, { vnode, dom: domToCache });
-      return newDom;
-    }
-    renderCache.delete(container);
+  if (cached && cached.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : cached.dom;
+    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
+    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
+    return newDom;
   }
+  renderCache.delete(container);
   const domNode = vnode.toDom(options);
-  if (domNode) {
-    container.innerHTML = "";
-    container.appendChild(domNode);
-    const domToCache = isFragment ? container : domNode;
-    renderCache.set(container, { vnode, dom: domToCache });
-  }
+  container.replaceChildren(domNode);
+  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
   return domNode;
 }
 function h(tagName, properties, children) {