marko 6.0.0-next.3.36 → 6.0.0-next.3.38

package/dist/common/types.d.ts

@@ -25,6 +25,7 @@ export declare enum ResumeSymbol {
     BranchStart = "[",
     BranchEnd = "]",
     BranchSingleNode = "|",
+    BranchSingleNodeOnlyChildInParent = "=",
     ClosestBranch = "$"
 }
 export declare enum AccessorChar {

package/dist/debug/dom.js

@@ -29,7 +29,6 @@ __export(dom_exports, {
   compat: () => compat,
   conditional: () => conditional,
   conditionalClosure: () => conditionalClosure,
-  conditionalOnlyChild: () => conditionalOnlyChild,
   controllable_detailsOrDialog_open: () => controllable_detailsOrDialog_open,
   controllable_detailsOrDialog_open_effect: () => controllable_detailsOrDialog_open_effect,
   controllable_input_checked: () => controllable_input_checked,
@@ -47,6 +46,7 @@ __export(dom_exports, {
   createTemplate: () => createTemplate,
   data: () => data,
   dynamicClosure: () => dynamicClosure,
+  dynamicTag: () => dynamicTag,
   dynamicTagAttrs: () => dynamicTagAttrs,
   effect: () => effect,
   forIn: () => forIn,
@@ -239,20 +239,13 @@ function on(element, type, handler) {
   if (!handlersByElement.has(element)) {
     defaultDelegator(element, type, handleDelegated);
   }
-  handlersByElement.set(element, handler || void 0);
+  handlersByElement.set(element, handler || null);
 }
 function createDelegator() {
-  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  const kEvents = Symbol();
   return function ensureDelegated(node, type, handler) {
     const root = node.getRootNode();
-    let delegatedEvents = delegatedEventsByRoot.get(root);
-    if (!delegatedEvents) {
-      delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set());
-    }
-    if (!delegatedEvents.has(type)) {
-      delegatedEvents.add(type);
-      root.addEventListener(type, handler, true);
-    }
+    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, true), 1);
   };
 }
 function handleDelegated(ev) {
@@ -386,9 +379,10 @@ var Render = class {
             curParent.prepend(startNode);
           }
           this.___currentScopeId = this.___scopeStack.pop();
-        } else if (token === "|" /* BranchSingleNode */) {
+        } else if (token === "|" /* BranchSingleNode */ || token === "=" /* BranchSingleNodeOnlyChildInParent */) {
           let next = data3.indexOf(" ");
-          let curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
+          let curNode = visit;
+          scope[~next ? data3.slice(0, next) : data3] = token === "=" /* BranchSingleNodeOnlyChildInParent */ ? visit.parentNode : visit;
           while (~next) {
             const start = next + 1;
             next = data3.indexOf(" ", start);
@@ -627,7 +621,7 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
-  syncControllable(el, "input", hasSelectChanged, () => {
+  const onChange = () => {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
@@ -643,7 +637,19 @@ function controllable_select_value_effect(scope, nodeAccessor) {
         );
       }
     }
-  });
+  };
+  if (!controllableHandlers.has(el)) {
+    new MutationObserver(() => {
+      const value2 = scope[nodeAccessor + ":" /* ControlledValue */];
+      if (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) {
+        onChange();
+      }
+    }).observe(el, {
+      childList: true,
+      subtree: true
+    });
+  }
+  syncControllable(el, "input", hasSelectChanged, onChange);
 }
 function setSelectOptions(el, value2, valueChange) {
   if (Array.isArray(value2)) {
@@ -726,25 +732,27 @@ function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
     scope[nodeAccessor].defaultChecked = checked;
   }
 }
-var delegateFormControl = createDelegator();
-var formChangeHandlers = /* @__PURE__ */ new WeakMap();
+var controllableDelegate = createDelegator();
+var controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  formChangeHandlers.set(el, onChange);
-  delegateFormControl(el, event, onFormChange);
-  if (el.form) {
-    delegateFormControl(el.form, "reset", onFormReset);
-  }
-  if (isResuming && hasChanged(el)) {
-    queueMicrotask(onChange);
+  if (!controllableHandlers.has(el)) {
+    controllableDelegate(el, event, handleChange);
+    if (el.form) {
+      controllableDelegate(el.form, "reset", handleFormReset);
+    }
+    if (isResuming && hasChanged(el)) {
+      queueMicrotask(onChange);
+    }
   }
+  controllableHandlers.set(el, onChange);
 }
-function onFormChange(ev) {
-  formChangeHandlers.get(ev.target)?.(ev);
+function handleChange(ev) {
+  controllableHandlers.get(ev.target)?.(ev);
 }
-function onFormReset(ev) {
+function handleFormReset(ev) {
   const handlers = [];
   for (const el of ev.target.elements) {
-    const handler = formChangeHandlers.get(el);
+    const handler = controllableHandlers.get(el);
     if (handler && hasFormElementChanged(el)) {
       handlers.push(handler);
     }
@@ -1407,7 +1415,12 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
           "A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead."
         );
       }
-      setConditionalRendererOnlyChild(childScope, nodeAccessor2, content);
+      setConditionalRendererOnlyChild(
+        childScope,
+        nodeAccessor2,
+        content,
+        createBranchScopeWithTagNameOrRenderer
+      );
       attrs(childScope, nodeAccessor2, attrsOrOp());
     } else if (renderer.___args) {
       const attributes = attrsOrOp();
@@ -1435,7 +1448,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
       }
@@ -1460,11 +1472,23 @@ function createCloneableHTML(html2, ns) {
 }
 
 // src/dom/control-flow.ts
-function patchConditionals(fn) {
-  conditional = fn(conditional);
-  conditionalOnlyChild = fn(conditionalOnlyChild);
+function conditional(nodeAccessor, ...branches) {
+  const branchAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
+  return (scope, newBranchIndexOrOp) => {
+    if (newBranchIndexOrOp !== scope[branchAccessor] && newBranchIndexOrOp !== DIRTY && newBranchIndexOrOp !== MARK && newBranchIndexOrOp !== CLEAN) {
+      (scope[nodeAccessor].nodeType > 1 /* Element */ ? setConditionalRenderer : setConditionalRendererOnlyChild)(
+        scope,
+        nodeAccessor,
+        branches[scope[branchAccessor] = newBranchIndexOrOp],
+        createBranchScopeWithRenderer
+      );
+    }
+  };
+}
+function patchDynamicTag(fn) {
+  dynamicTag = fn(dynamicTag);
 }
-var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
+var dynamicTag = function dynamicTag2(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
@@ -1475,7 +1499,12 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
       const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
         scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
+        setConditionalRenderer(
+          scope,
+          nodeAccessor,
+          normalizedRenderer,
+          createBranchScopeWithTagNameOrRenderer
+        );
         fn && fn(scope);
         op = DIRTY;
       } else {
@@ -1485,56 +1514,28 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
     intersection2?.(scope, op);
   };
 };
-function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
+function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch2) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]);
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  const newBranch = newRenderer ? createBranch2(
     newRenderer,
     scope.$global,
     scope,
     prevBranch.___endNode.parentNode
   ) : getEmptyBranch(scope[nodeAccessor]);
-  insertBranchBefore(
-    newBranch,
-    prevBranch.___endNode.parentNode,
-    prevBranch.___endNode.nextSibling
-  );
-  removeAndDestroyBranch(prevBranch);
-  scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
+  if (prevBranch !== newBranch) {
+    insertBranchBefore(
+      newBranch,
+      prevBranch.___endNode.parentNode,
+      prevBranch.___endNode.nextSibling
+    );
+    removeAndDestroyBranch(prevBranch);
+    scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
+  }
 }
-var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersection) {
-  const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, newRendererOrOp) => {
-    if (newRendererOrOp === DIRTY) return;
-    let currentRenderer = scope[rendererAccessor];
-    let op = newRendererOrOp;
-    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
-      const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
-      if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
-        currentRenderer = scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRendererOnlyChild(
-          scope,
-          nodeAccessor,
-          normalizedRenderer
-        );
-        fn && fn(scope);
-        op = DIRTY;
-      } else {
-        op = CLEAN;
-      }
-    }
-    intersection2?.(scope, op);
-  };
-};
-function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
+function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer, createBranch2) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
-    newRenderer,
-    scope.$global,
-    scope,
-    referenceNode
-  ) : void 0;
+  const newBranch = newRenderer && createBranch2(newRenderer, scope.$global, scope, referenceNode);
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1543,10 +1544,10 @@ function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), getEmptyBranch(void 0)]
+  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
 ]);
 var emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(void 0)
+  /* @__PURE__ */ getEmptyBranch(0)
 ];
 var emptyMap = /* @__PURE__ */ new Map();
 var emptyArray = [];
@@ -1764,14 +1765,14 @@ function loopClosure(ownerLoopNodeAccessor, fn, getIntersection) {
   helperSignal._ = signal;
   return helperSignal;
 }
-function conditionalClosure(ownerConditionalNodeAccessor, getRenderer, fn, getIntersection) {
+function conditionalClosure(ownerConditionalNodeAccessor, branch, fn, getIntersection) {
   const signal = closure(fn, getIntersection);
   const scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */;
-  const rendererAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
+  const branchAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
   const helperSignal = (scope, value2) => {
-    const conditionalScope = scope[scopeAccessor];
-    if (conditionalScope && !conditionalScope.___pending && scope[rendererAccessor]?.___id === getRenderer().___id) {
-      queueSource(conditionalScope, signal, value2);
+    const ifScope = scope[scopeAccessor];
+    if (ifScope && !ifScope.___pending && scope[branchAccessor] === branch) {
+      queueSource(ifScope, signal, value2);
     }
   };
   helperSignal._ = signal;
@@ -1973,7 +1974,7 @@ var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {
-  patchConditionals,
+  patchConditionals: patchDynamicTag,
   queueEffect,
   init(warp10Noop) {
     register(SET_SCOPE_REGISTER_ID, (branch) => {
@@ -1988,7 +1989,7 @@ var compat = {
     return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
   },
   isRenderer(renderer) {
-    return renderer.___clone !== void 0;
+    return renderer.___clone;
   },
   getStartNode(branch) {
     return branch.___startNode;
@@ -2018,7 +2019,7 @@ var compat = {
     return value2;
   },
   createRenderer(setup, clone, args) {
-    const renderer = createRenderer("", void 0, setup, args && (() => args));
+    const renderer = createRenderer("", 0, setup, args && (() => args));
     renderer.___clone = clone;
     return renderer;
   },

package/dist/debug/dom.mjs

@@ -153,20 +153,13 @@ function on(element, type, handler) {
   if (!handlersByElement.has(element)) {
     defaultDelegator(element, type, handleDelegated);
   }
-  handlersByElement.set(element, handler || void 0);
+  handlersByElement.set(element, handler || null);
 }
 function createDelegator() {
-  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  const kEvents = Symbol();
   return function ensureDelegated(node, type, handler) {
     const root = node.getRootNode();
-    let delegatedEvents = delegatedEventsByRoot.get(root);
-    if (!delegatedEvents) {
-      delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set());
-    }
-    if (!delegatedEvents.has(type)) {
-      delegatedEvents.add(type);
-      root.addEventListener(type, handler, true);
-    }
+    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, true), 1);
   };
 }
 function handleDelegated(ev) {
@@ -300,9 +293,10 @@ var Render = class {
             curParent.prepend(startNode);
           }
           this.___currentScopeId = this.___scopeStack.pop();
-        } else if (token === "|" /* BranchSingleNode */) {
+        } else if (token === "|" /* BranchSingleNode */ || token === "=" /* BranchSingleNodeOnlyChildInParent */) {
           let next = data3.indexOf(" ");
-          let curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
+          let curNode = visit;
+          scope[~next ? data3.slice(0, next) : data3] = token === "=" /* BranchSingleNodeOnlyChildInParent */ ? visit.parentNode : visit;
           while (~next) {
             const start = next + 1;
             next = data3.indexOf(" ", start);
@@ -541,7 +535,7 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
   const el = scope[nodeAccessor];
-  syncControllable(el, "input", hasSelectChanged, () => {
+  const onChange = () => {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
@@ -557,7 +551,19 @@ function controllable_select_value_effect(scope, nodeAccessor) {
         );
       }
     }
-  });
+  };
+  if (!controllableHandlers.has(el)) {
+    new MutationObserver(() => {
+      const value2 = scope[nodeAccessor + ":" /* ControlledValue */];
+      if (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) {
+        onChange();
+      }
+    }).observe(el, {
+      childList: true,
+      subtree: true
+    });
+  }
+  syncControllable(el, "input", hasSelectChanged, onChange);
 }
 function setSelectOptions(el, value2, valueChange) {
   if (Array.isArray(value2)) {
@@ -640,25 +646,27 @@ function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
     scope[nodeAccessor].defaultChecked = checked;
   }
 }
-var delegateFormControl = createDelegator();
-var formChangeHandlers = /* @__PURE__ */ new WeakMap();
+var controllableDelegate = createDelegator();
+var controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  formChangeHandlers.set(el, onChange);
-  delegateFormControl(el, event, onFormChange);
-  if (el.form) {
-    delegateFormControl(el.form, "reset", onFormReset);
-  }
-  if (isResuming && hasChanged(el)) {
-    queueMicrotask(onChange);
+  if (!controllableHandlers.has(el)) {
+    controllableDelegate(el, event, handleChange);
+    if (el.form) {
+      controllableDelegate(el.form, "reset", handleFormReset);
+    }
+    if (isResuming && hasChanged(el)) {
+      queueMicrotask(onChange);
+    }
   }
+  controllableHandlers.set(el, onChange);
 }
-function onFormChange(ev) {
-  formChangeHandlers.get(ev.target)?.(ev);
+function handleChange(ev) {
+  controllableHandlers.get(ev.target)?.(ev);
 }
-function onFormReset(ev) {
+function handleFormReset(ev) {
   const handlers = [];
   for (const el of ev.target.elements) {
-    const handler = formChangeHandlers.get(el);
+    const handler = controllableHandlers.get(el);
     if (handler && hasFormElementChanged(el)) {
       handlers.push(handler);
     }
@@ -1321,7 +1329,12 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
           "A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead."
         );
       }
-      setConditionalRendererOnlyChild(childScope, nodeAccessor2, content);
+      setConditionalRendererOnlyChild(
+        childScope,
+        nodeAccessor2,
+        content,
+        createBranchScopeWithTagNameOrRenderer
+      );
       attrs(childScope, nodeAccessor2, attrsOrOp());
     } else if (renderer.___args) {
       const attributes = attrsOrOp();
@@ -1349,7 +1362,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
       }
@@ -1374,11 +1386,23 @@ function createCloneableHTML(html2, ns) {
 }
 
 // src/dom/control-flow.ts
-function patchConditionals(fn) {
-  conditional = fn(conditional);
-  conditionalOnlyChild = fn(conditionalOnlyChild);
+function conditional(nodeAccessor, ...branches) {
+  const branchAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
+  return (scope, newBranchIndexOrOp) => {
+    if (newBranchIndexOrOp !== scope[branchAccessor] && newBranchIndexOrOp !== DIRTY && newBranchIndexOrOp !== MARK && newBranchIndexOrOp !== CLEAN) {
+      (scope[nodeAccessor].nodeType > 1 /* Element */ ? setConditionalRenderer : setConditionalRendererOnlyChild)(
+        scope,
+        nodeAccessor,
+        branches[scope[branchAccessor] = newBranchIndexOrOp],
+        createBranchScopeWithRenderer
+      );
+    }
+  };
+}
+function patchDynamicTag(fn) {
+  dynamicTag = fn(dynamicTag);
 }
-var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
+var dynamicTag = function dynamicTag2(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
@@ -1389,7 +1413,12 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
       const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
         scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
+        setConditionalRenderer(
+          scope,
+          nodeAccessor,
+          normalizedRenderer,
+          createBranchScopeWithTagNameOrRenderer
+        );
         fn && fn(scope);
         op = DIRTY;
       } else {
@@ -1399,56 +1428,28 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
     intersection2?.(scope, op);
   };
 };
-function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
+function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch2) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]);
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  const newBranch = newRenderer ? createBranch2(
     newRenderer,
     scope.$global,
     scope,
     prevBranch.___endNode.parentNode
   ) : getEmptyBranch(scope[nodeAccessor]);
-  insertBranchBefore(
-    newBranch,
-    prevBranch.___endNode.parentNode,
-    prevBranch.___endNode.nextSibling
-  );
-  removeAndDestroyBranch(prevBranch);
-  scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
+  if (prevBranch !== newBranch) {
+    insertBranchBefore(
+      newBranch,
+      prevBranch.___endNode.parentNode,
+      prevBranch.___endNode.nextSibling
+    );
+    removeAndDestroyBranch(prevBranch);
+    scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
+  }
 }
-var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersection) {
-  const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, newRendererOrOp) => {
-    if (newRendererOrOp === DIRTY) return;
-    let currentRenderer = scope[rendererAccessor];
-    let op = newRendererOrOp;
-    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
-      const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
-      if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
-        currentRenderer = scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRendererOnlyChild(
-          scope,
-          nodeAccessor,
-          normalizedRenderer
-        );
-        fn && fn(scope);
-        op = DIRTY;
-      } else {
-        op = CLEAN;
-      }
-    }
-    intersection2?.(scope, op);
-  };
-};
-function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
+function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer, createBranch2) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
-    newRenderer,
-    scope.$global,
-    scope,
-    referenceNode
-  ) : void 0;
+  const newBranch = newRenderer && createBranch2(newRenderer, scope.$global, scope, referenceNode);
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1457,10 +1458,10 @@ function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), getEmptyBranch(void 0)]
+  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
 ]);
 var emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(void 0)
+  /* @__PURE__ */ getEmptyBranch(0)
 ];
 var emptyMap = /* @__PURE__ */ new Map();
 var emptyArray = [];
@@ -1678,14 +1679,14 @@ function loopClosure(ownerLoopNodeAccessor, fn, getIntersection) {
   helperSignal._ = signal;
   return helperSignal;
 }
-function conditionalClosure(ownerConditionalNodeAccessor, getRenderer, fn, getIntersection) {
+function conditionalClosure(ownerConditionalNodeAccessor, branch, fn, getIntersection) {
   const signal = closure(fn, getIntersection);
   const scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */;
-  const rendererAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
+  const branchAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
   const helperSignal = (scope, value2) => {
-    const conditionalScope = scope[scopeAccessor];
-    if (conditionalScope && !conditionalScope.___pending && scope[rendererAccessor]?.___id === getRenderer().___id) {
-      queueSource(conditionalScope, signal, value2);
+    const ifScope = scope[scopeAccessor];
+    if (ifScope && !ifScope.___pending && scope[branchAccessor] === branch) {
+      queueSource(ifScope, signal, value2);
     }
   };
   helperSignal._ = signal;
@@ -1887,7 +1888,7 @@ var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {
-  patchConditionals,
+  patchConditionals: patchDynamicTag,
   queueEffect,
   init(warp10Noop) {
     register(SET_SCOPE_REGISTER_ID, (branch) => {
@@ -1902,7 +1903,7 @@ var compat = {
     return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
   },
   isRenderer(renderer) {
-    return renderer.___clone !== void 0;
+    return renderer.___clone;
   },
   getStartNode(branch) {
     return branch.___startNode;
@@ -1932,7 +1933,7 @@ var compat = {
     return value2;
   },
   createRenderer(setup, clone, args) {
-    const renderer = createRenderer("", void 0, setup, args && (() => args));
+    const renderer = createRenderer("", 0, setup, args && (() => args));
     renderer.___clone = clone;
     return renderer;
   },
@@ -2057,7 +2058,6 @@ export {
   compat,
   conditional,
   conditionalClosure,
-  conditionalOnlyChild,
   controllable_detailsOrDialog_open,
   controllable_detailsOrDialog_open_effect,
   controllable_input_checked,
@@ -2075,6 +2075,7 @@ export {
   createTemplate,
   data,
   dynamicClosure,
+  dynamicTag,
   dynamicTagAttrs,
   effect,
   forIn,