marko 6.0.0-next.3.36 → 6.0.0-next.3.37

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

@@ -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);
     }
@@ -1435,7 +1443,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
       }
@@ -1529,12 +1536,12 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  const newBranch = newRenderer && createBranchScopeWithTagNameOrRenderer(
     newRenderer,
     scope.$global,
     scope,
     referenceNode
-  ) : void 0;
+  );
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1543,10 +1550,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 = [];
@@ -1988,7 +1995,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 +2025,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);
     }
@@ -1349,7 +1357,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
       }
@@ -1443,12 +1450,12 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  const newBranch = newRenderer && createBranchScopeWithTagNameOrRenderer(
     newRenderer,
     scope.$global,
     scope,
     referenceNode
-  ) : void 0;
+  );
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1457,10 +1464,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 = [];
@@ -1902,7 +1909,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 +1939,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/html.js

@@ -1614,7 +1614,7 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     const branchId = peekNextScopeId();
@@ -1623,7 +1623,7 @@ function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1645,7 +1645,7 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     const branchId = peekNextScopeId();
@@ -1654,7 +1654,7 @@ function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1676,7 +1676,7 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     const branchId = peekNextScopeId();
@@ -1685,7 +1685,7 @@ function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1709,7 +1709,7 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   const branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   const rendered = peekNextScopeId() !== branchId;
@@ -1720,7 +1720,7 @@ function resumeSingleNodeConditional(cb, scopeId, accessor) {
   }
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/debug/html.mjs

@@ -1532,7 +1532,7 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     const branchId = peekNextScopeId();
@@ -1541,7 +1541,7 @@ function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1563,7 +1563,7 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     const branchId = peekNextScopeId();
@@ -1572,7 +1572,7 @@ function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1594,7 +1594,7 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     const branchId = peekNextScopeId();
@@ -1603,7 +1603,7 @@ function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
   });
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1627,7 +1627,7 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   const branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   const rendered = peekNextScopeId() !== branchId;
@@ -1638,7 +1638,7 @@ function resumeSingleNodeConditional(cb, scopeId, accessor) {
   }
   $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/dom/compat.d.ts

@@ -7,7 +7,7 @@ export declare const compat: {
     init(warp10Noop: any): void;
     registerRenderer(fn: any): void;
     isOp(value: any): boolean;
-    isRenderer(renderer: any): boolean;
+    isRenderer(renderer: any): any;
     getStartNode(branch: any): any;
     setScopeNodes(branch: any, startNode: Node, endNode: Node): void;
     runComponentEffects(this: any): void;

package/dist/dom/renderer.d.ts

@@ -4,9 +4,8 @@ export type Renderer = {
     ___id: symbol;
     ___template: string;
     ___walks: string;
-    ___setup: SetupFn | undefined;
+    ___setup: SetupFn | undefined | 0;
     ___clone: (ns: string) => ChildNode;
-    ___sourceNode: Node | undefined;
     ___args: Signal<unknown> | undefined;
     ___owner: Scope | undefined;
 };
@@ -15,6 +14,6 @@ export declare function createBranchScopeWithRenderer(renderer: Renderer, $globa
 export declare function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer: Renderer | string, $global: Scope["$global"], parentScope: Scope, parentNode: ParentNode): BranchScope;
 export declare function initBranch(renderer: Renderer, branch: BranchScope, parentNode: ParentNode): void;
 export declare function dynamicTagAttrs(nodeAccessor: Accessor, getContent?: (scope: Scope) => Renderer, inputIsArgs?: boolean): (scope: Scope, attrsOrOp: (() => Record<string, unknown>) | SignalOp) => void;
-export declare function createRendererWithOwner(template: string, rawWalks?: string, setup?: SetupFn, getArgs?: () => Signal<unknown>): (owner?: Scope) => Renderer;
-export declare function createRenderer(template: string, walks?: string, setup?: SetupFn, getArgs?: () => Signal<unknown>): Renderer;
+export declare function createRendererWithOwner(template: string, rawWalks?: string | 0, setup?: SetupFn | 0, getArgs?: () => Signal<unknown>): (owner?: Scope) => Renderer;
+export declare function createRenderer(template: string, walks?: string | 0, setup?: SetupFn | 0, getArgs?: () => Signal<unknown>): Renderer;
 export {};

package/dist/dom/template.d.ts

@@ -1,3 +1,3 @@
 import type { Template } from "../common/types";
 import { createRenderer } from "./renderer";
-export declare const createTemplate: (templateId: string, template: string, walks?: string | undefined, setup?: ((scope: import("../common/types").Scope) => void) | undefined, getArgs?: (() => import("./signals").Signal<unknown>) | undefined) => Template;
+export declare const createTemplate: (templateId: string, template: string, walks?: string | 0 | undefined, setup?: 0 | ((scope: import("../common/types").Scope) => void) | undefined, getArgs?: (() => import("./signals").Signal<unknown>) | undefined) => Template;

package/dist/dom.js

@@ -178,13 +178,13 @@ function normalizeDynamicRenderer(value2) {
 var elementHandlersByEvent = /* @__PURE__ */ new Map(), defaultDelegator = createDelegator();
 function on(element, type, handler) {
   let handlersByElement = elementHandlersByEvent.get(type);
-  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || void 0);
+  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || null);
 }
 function createDelegator() {
-  let delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  let kEvents = Symbol();
   return function(node, type, handler) {
-    let root = node.getRootNode(), delegatedEvents = delegatedEventsByRoot.get(root);
-    delegatedEvents || delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set()), delegatedEvents.has(type) || (delegatedEvents.add(type), root.addEventListener(type, handler, !0));
+    let root = node.getRootNode();
+    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, !0), 1);
   };
 }
 function handleDelegated(ev) {
@@ -267,9 +267,9 @@ var registeredValues = {}, Render = class {
             visit
           ).a;
           curParent !== startNode.parentNode && curParent.prepend(startNode), this.e = this.n.pop();
-        } else if (token === "|" /* BranchSingleNode */) {
-          let next = data3.indexOf(" "), curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
-          for (; ~next; ) {
+        } else if (token === "|" /* BranchSingleNode */ || token === "=" /* BranchSingleNodeOnlyChildInParent */) {
+          let next = data3.indexOf(" "), curNode = visit;
+          for (scope[~next ? data3.slice(0, next) : data3] = token === "=" /* BranchSingleNodeOnlyChildInParent */ ? visit.parentNode : visit; ~next; ) {
             let start = next + 1;
             next = data3.indexOf(" ", start);
             let childScopeId = data3.slice(start, ~next ? next : data3.length);
@@ -408,8 +408,7 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
   );
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
-  let el = scope[nodeAccessor];
-  syncControllable(el, "input", hasSelectChanged, () => {
+  let el = scope[nodeAccessor], onChange = () => {
     let valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, valueChange(
       Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
@@ -418,7 +417,14 @@ function controllable_select_value_effect(scope, nodeAccessor) {
       scope[nodeAccessor + ":" /* ControlledValue */],
       valueChange
     ));
-  });
+  };
+  controllableHandlers.has(el) || new MutationObserver(() => {
+    let value2 = scope[nodeAccessor + ":" /* ControlledValue */];
+    (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) && onChange();
+  }).observe(el, {
+    childList: !0,
+    subtree: !0
+  }), syncControllable(el, "input", hasSelectChanged, onChange);
 }
 function setSelectOptions(el, value2, valueChange) {
   if (Array.isArray(value2))
@@ -470,17 +476,17 @@ function setValueAndUpdateSelection(el, value2) {
 function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
   scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange, checkedChange ? (scope[nodeAccessor + "=" /* ControlledType */] = type, scope[nodeAccessor].checked = checked) : (scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */, scope[nodeAccessor].defaultChecked = checked);
 }
-var delegateFormControl = createDelegator(), formChangeHandlers = /* @__PURE__ */ new WeakMap();
+var controllableDelegate = createDelegator(), controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  formChangeHandlers.set(el, onChange), delegateFormControl(el, event, onFormChange), el.form && delegateFormControl(el.form, "reset", onFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
+  controllableHandlers.has(el) || (controllableDelegate(el, event, handleChange), el.form && controllableDelegate(el.form, "reset", handleFormReset), 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) {
   let handlers = [];
   for (let el of ev.target.elements) {
-    let handler = formChangeHandlers.get(el);
+    let handler = controllableHandlers.get(el);
     handler && hasFormElementChanged(el) && handlers.push(handler);
   }
   requestAnimationFrame(() => {
@@ -937,7 +943,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
     x: setup,
     l: _clone,
     u: owner,
-    J: void 0,
     get d() {
       return args ||= getArgs?.();
     }
@@ -1004,18 +1009,18 @@ var conditionalOnlyChild = function(nodeAccessor, fn, getIntersection) {
   };
 };
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer && createBranchScopeWithTagNameOrRenderer(
     newRenderer,
     scope.$global,
     scope,
     referenceNode
-  ) : void 0;
+  );
   referenceNode.textContent = "", newBranch && insertBranchBefore(newBranch, referenceNode, null), prevBranch && destroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), getEmptyBranch(void 0)]
+  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
 ]), emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(void 0)
+  /* @__PURE__ */ getEmptyBranch(0)
 ], emptyMap = /* @__PURE__ */ new Map(), emptyArray = [];
 function loopOf(nodeAccessor, renderer) {
   return loop(
@@ -1278,7 +1283,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
     return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
   },
   isRenderer(renderer) {
-    return renderer.l !== void 0;
+    return renderer.l;
   },
   getStartNode(branch) {
     return branch.a;
@@ -1302,7 +1307,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
     ) : value2;
   },
   createRenderer(setup, clone, args) {
-    let renderer = createRenderer("", void 0, setup, args && (() => args));
+    let renderer = createRenderer("", 0, setup, args && (() => args));
     return renderer.l = clone, renderer;
   },
   render(out, component, renderer, args) {

package/dist/dom.mjs

@@ -95,13 +95,13 @@ function normalizeDynamicRenderer(value2) {
 var elementHandlersByEvent = /* @__PURE__ */ new Map(), defaultDelegator = createDelegator();
 function on(element, type, handler) {
   let handlersByElement = elementHandlersByEvent.get(type);
-  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || void 0);
+  handlersByElement || elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap()), handlersByElement.has(element) || defaultDelegator(element, type, handleDelegated), handlersByElement.set(element, handler || null);
 }
 function createDelegator() {
-  let delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  let kEvents = Symbol();
   return function(node, type, handler) {
-    let root = node.getRootNode(), delegatedEvents = delegatedEventsByRoot.get(root);
-    delegatedEvents || delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set()), delegatedEvents.has(type) || (delegatedEvents.add(type), root.addEventListener(type, handler, !0));
+    let root = node.getRootNode();
+    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, !0), 1);
   };
 }
 function handleDelegated(ev) {
@@ -184,9 +184,9 @@ var registeredValues = {}, Render = class {
             visit
           ).a;
           curParent !== startNode.parentNode && curParent.prepend(startNode), this.e = this.n.pop();
-        } else if (token === "|" /* BranchSingleNode */) {
-          let next = data3.indexOf(" "), curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
-          for (; ~next; ) {
+        } else if (token === "|" /* BranchSingleNode */ || token === "=" /* BranchSingleNodeOnlyChildInParent */) {
+          let next = data3.indexOf(" "), curNode = visit;
+          for (scope[~next ? data3.slice(0, next) : data3] = token === "=" /* BranchSingleNodeOnlyChildInParent */ ? visit.parentNode : visit; ~next; ) {
             let start = next + 1;
             next = data3.indexOf(" ", start);
             let childScopeId = data3.slice(start, ~next ? next : data3.length);
@@ -325,8 +325,7 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
   );
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
-  let el = scope[nodeAccessor];
-  syncControllable(el, "input", hasSelectChanged, () => {
+  let el = scope[nodeAccessor], onChange = () => {
     let valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     valueChange && (scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */, valueChange(
       Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
@@ -335,7 +334,14 @@ function controllable_select_value_effect(scope, nodeAccessor) {
       scope[nodeAccessor + ":" /* ControlledValue */],
       valueChange
     ));
-  });
+  };
+  controllableHandlers.has(el) || new MutationObserver(() => {
+    let value2 = scope[nodeAccessor + ":" /* ControlledValue */];
+    (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) && onChange();
+  }).observe(el, {
+    childList: !0,
+    subtree: !0
+  }), syncControllable(el, "input", hasSelectChanged, onChange);
 }
 function setSelectOptions(el, value2, valueChange) {
   if (Array.isArray(value2))
@@ -387,17 +393,17 @@ function setValueAndUpdateSelection(el, value2) {
 function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
   scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange, checkedChange ? (scope[nodeAccessor + "=" /* ControlledType */] = type, scope[nodeAccessor].checked = checked) : (scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */, scope[nodeAccessor].defaultChecked = checked);
 }
-var delegateFormControl = createDelegator(), formChangeHandlers = /* @__PURE__ */ new WeakMap();
+var controllableDelegate = createDelegator(), controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  formChangeHandlers.set(el, onChange), delegateFormControl(el, event, onFormChange), el.form && delegateFormControl(el.form, "reset", onFormReset), isResuming && hasChanged(el) && queueMicrotask(onChange);
+  controllableHandlers.has(el) || (controllableDelegate(el, event, handleChange), el.form && controllableDelegate(el.form, "reset", handleFormReset), 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) {
   let handlers = [];
   for (let el of ev.target.elements) {
-    let handler = formChangeHandlers.get(el);
+    let handler = controllableHandlers.get(el);
     handler && hasFormElementChanged(el) && handlers.push(handler);
   }
   requestAnimationFrame(() => {
@@ -854,7 +860,6 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
     x: setup,
     l: _clone,
     u: owner,
-    J: void 0,
     get d() {
       return args ||= getArgs?.();
     }
@@ -921,18 +926,18 @@ var conditionalOnlyChild = function(nodeAccessor, fn, getIntersection) {
   };
 };
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer && createBranchScopeWithTagNameOrRenderer(
     newRenderer,
     scope.$global,
     scope,
     referenceNode
-  ) : void 0;
+  );
   referenceNode.textContent = "", newBranch && insertBranchBefore(newBranch, referenceNode, null), prevBranch && destroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), getEmptyBranch(void 0)]
+  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
 ]), emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(void 0)
+  /* @__PURE__ */ getEmptyBranch(0)
 ], emptyMap = /* @__PURE__ */ new Map(), emptyArray = [];
 function loopOf(nodeAccessor, renderer) {
   return loop(
@@ -1195,7 +1200,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
     return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
   },
   isRenderer(renderer) {
-    return renderer.l !== void 0;
+    return renderer.l;
   },
   getStartNode(branch) {
     return branch.a;
@@ -1219,7 +1224,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
     ) : value2;
   },
   createRenderer(setup, clone, args) {
-    let renderer = createRenderer("", void 0, setup, args && (() => args));
+    let renderer = createRenderer("", 0, setup, args && (() => args));
     return renderer.l = clone, renderer;
   },
   render(out, component, renderer, args) {

package/dist/html/writer.d.ts

@@ -27,13 +27,13 @@ export declare function markResumeNode(scopeId: number, accessor: Accessor): str
 export declare function nodeRef(scopeId: number, id?: string): () => void;
 export declare function resumeClosestBranch(scopeId: number): void;
 export declare function resumeForOf(list: Falsy | Iterable<unknown>, cb: (item: unknown, index: number) => void, scopeId: number, accessor: Accessor): void;
-export declare function resumeSingleNodeForOf(list: Falsy | Iterable<unknown>, cb: (item: unknown, index: number) => void, scopeId: number, accessor: Accessor): void;
+export declare function resumeSingleNodeForOf(list: Falsy | Iterable<unknown>, cb: (item: unknown, index: number) => void, scopeId: number, accessor: Accessor, onlyChildInParent?: 1): void;
 export declare function resumeForIn(obj: Falsy | {}, cb: (key: string, value: unknown) => void, scopeId: number, accessor: Accessor): void;
-export declare function resumeSingleNodeForIn(obj: Falsy | {}, cb: (key: string, value: unknown) => void, scopeId: number, accessor: Accessor): void;
+export declare function resumeSingleNodeForIn(obj: Falsy | {}, cb: (key: string, value: unknown) => void, scopeId: number, accessor: Accessor, onlyChild?: 1): void;
 export declare function resumeForTo(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, scopeId: number, accessor: Accessor): void;
-export declare function resumeSingleNodeForTo(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, scopeId: number, accessor: Accessor): void;
+export declare function resumeSingleNodeForTo(to: number, from: number | Falsy, step: number | Falsy, cb: (index: number) => void, scopeId: number, accessor: Accessor, onlyChild?: 1): void;
 export declare function resumeConditional(cb: () => void | number, scopeId: number, accessor: Accessor): void;
-export declare function resumeSingleNodeConditional(cb: () => void | number, scopeId: number, accessor: Accessor): void;
+export declare function resumeSingleNodeConditional(cb: () => void | number, scopeId: number, accessor: Accessor, onlyChild?: 1): void;
 export declare function writeScope(scopeId: number, partialScope: PartialScope): ScopeInternals;
 export declare function writeExistingScope(scope: ScopeInternals): ScopeInternals;
 export declare function ensureScopeWithId(scopeId: number): PartialScope;

package/dist/html.js

@@ -1066,14 +1066,14 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(item, index));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1092,14 +1092,14 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(key, value));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1118,14 +1118,14 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(index));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1141,13 +1141,13 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   let branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   let rendered = peekNextScopeId() !== branchId;
   rendered ? writeScope(branchId, {}) : nextScopeId(), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/html.mjs

@@ -987,14 +987,14 @@ function resumeForOf(list, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForOf(list, cb, scopeId, accessor) {
+function resumeSingleNodeForOf(list, cb, scopeId, accessor, onlyChildInParent) {
   let branchIds = "";
   forOf(list, (item, index) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(item, index));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChildInParent ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1013,14 +1013,14 @@ function resumeForIn(obj, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForIn(obj, cb, scopeId, accessor) {
+function resumeSingleNodeForIn(obj, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forIn(obj, (key, value) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(key, value));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1039,14 +1039,14 @@ function resumeForTo(to, from, step, cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor) {
+function resumeSingleNodeForTo(to, from, step, cb, scopeId, accessor, onlyChild) {
   let branchIds = "";
   forTo(to, from, step, (index) => {
     let branchId = peekNextScopeId();
     branchIds = " " + branchId + branchIds, withContext(branchIdKey, branchId, () => cb(index));
   }), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + branchIds
     )
   );
@@ -1062,13 +1062,13 @@ function resumeConditional(cb, scopeId, accessor) {
     )
   );
 }
-function resumeSingleNodeConditional(cb, scopeId, accessor) {
+function resumeSingleNodeConditional(cb, scopeId, accessor, onlyChild) {
   let branchId = peekNextScopeId();
   withContext(branchIdKey, branchId, cb);
   let rendered = peekNextScopeId() !== branchId;
   rendered ? writeScope(branchId, {}) : nextScopeId(), $chunk.writeHTML(
     $chunk.boundary.state.mark(
-      "|" /* BranchSingleNode */,
+      onlyChild ? "=" /* BranchSingleNodeOnlyChildInParent */ : "|" /* BranchSingleNode */,
       scopeId + " " + accessor + (rendered ? " " + branchId : "")
     )
   );

package/dist/translator/index.js

@@ -1990,6 +1990,10 @@ function setForceResumeScope(section) {
   _setForceResumeScope(section, true);
 }
 var [getSerializedScopeProperties] = createSectionState("serializedScopeProperties", () => /* @__PURE__ */ new Map());
+var [getHTMLSectionStatements] = createSectionState(
+  "htmlScopeStatements",
+  () => []
+);
 var unimplementedBuild = () => {
   return import_compiler17.types.stringLiteral("SIGNAL NOT INITIALIZED");
 };
@@ -2680,13 +2684,14 @@ function writeHTMLResumeStatements(path5) {
       )
     );
   }
-  if (path5.get("body").length) {
-    path5.unshiftContainer(
-      "body",
+  const additionalStatements = getHTMLSectionStatements(section);
+  if (path5.get("body").length || additionalStatements.length) {
+    path5.unshiftContainer("body", [
       import_compiler17.types.variableDeclaration("const", [
         import_compiler17.types.variableDeclarator(scopeIdIdentifier, callRuntime("nextScopeId"))
-      ])
-    );
+      ]),
+      ...additionalStatements
+    ]);
   }
   const returnIdentifier = getSectionReturnValueIdentifier(section);
   if (returnIdentifier !== void 0) {
@@ -4524,7 +4529,9 @@ var native_tag_default = {
         const tagName2 = node.name.type === "StringLiteral" ? node.name.value : import_compiler28.types.toIdentifier(tag.get("name"));
         const tagExtra = node.extra ??= {};
         const bindingName = "#" + tagName2;
-        tagExtra[kSerializeMarker] = hasEventHandlers || !!node.var;
+        if (hasEventHandlers || node.var) {
+          tagExtra[kSerializeMarker] = true;
+        }
         tagExtra[kNativeTagBinding] = createBinding(
           bindingName,
           0 /* dom */,
@@ -4905,9 +4912,9 @@ var native_tag_default = {
           import_compiler28.types.ifStatement(tag.node.name, consumeHTML(tag))
         )[0].skip();
       }
-      if (nodeRef2 && (extra[kSerializeMarker] || isStatefulReferences(extra.referencedBindings) || tag.node.attributes.some(
+      if (nodeRef2 && (extra[kSerializeMarker] || extra[kSerializeMarker] === void 0 && (isStatefulReferences(extra.referencedBindings) || tag.node.attributes.some(
         (attr2) => isStatefulReferences(attr2.value.extra?.referencedBindings)
-      ))) {
+      )))) {
         markNode(tag, nodeRef2);
       }
       exit2(tag);
@@ -5086,17 +5093,18 @@ var for_default = {
         const tagExtra = node.extra;
         const isStateful = isStatefulReferences(tagExtra.referencedBindings);
         const parentTag = getParentTag(tag);
-        const nodeRef2 = isOnlyChildInParent(tag) ? parentTag.node.extra[kNativeTagBinding] : tag.node.extra[kForMarkerBinding];
+        const onlyChildInParentOptimization = isOnlyChildInParent(tag);
+        const nodeRef2 = onlyChildInParentOptimization ? parentTag.node.extra[kNativeTagBinding] : tag.node.extra[kForMarkerBinding];
         const forAttrs = getKnownAttrValues(node);
         const forType = getForType(node);
         const params = node.body.params;
         const statements = [];
         const bodyStatements = node.body.body;
         const hasStatefulClosures = checkStatefulClosures(bodySection, true);
-        const singleNodeOptimization = bodySection.content === null || bodySection.content.singleChild;
+        const singleNodeOptimization = bodySection.content === null || bodySection.content.singleChild && bodySection.content.startType !== 4 /* Text */;
         let keyExpression;
-        if (isStateful && isOnlyChildInParent(tag)) {
-          parentTag.node.extra[kSerializeMarker] = true;
+        if (singleNodeOptimization && onlyChildInParentOptimization) {
+          parentTag.node.extra[kSerializeMarker] = false;
         }
         if (isStateful || hasStatefulClosures) {
           const defaultParamNames = {
@@ -5150,7 +5158,7 @@ var for_default = {
             keyExpression = params[defaultByParamIndex];
           }
           const forScopesIdentifier = getScopeIdentifier(bodySection);
-          statements.push(
+          getHTMLSectionStatements(tagSection).push(
             import_compiler29.types.variableDeclaration("const", [
               import_compiler29.types.variableDeclarator(
                 forScopesIdentifier,
@@ -5203,6 +5211,9 @@ var for_default = {
             getScopeAccessorLiteral(nodeRef2)
           );
         }
+        if (singleNodeOptimization && onlyChildInParentOptimization) {
+          forTagArgs.push(import_compiler29.types.numericLiteral(1));
+        }
         statements.push(
           import_compiler29.types.expressionStatement(callRuntime(forTagHTMLRuntime, ...forTagArgs))
         );
@@ -6946,7 +6957,7 @@ var IfTag = {
         if (branchBodySection) {
           branchBodySection.isBranch = true;
           branchBodySection.upstreamExpression = rootExtra;
-          if (!(branchBodySection.content === null || branchBodySection.content?.singleChild)) {
+          if (!(branchBodySection.content === null || branchBodySection.content?.singleChild && branchBodySection.content.startType !== 4 /* Text */)) {
             singleNodeOptimization = false;
           }
         }
@@ -7087,16 +7098,16 @@ var IfTag = {
                 )
               );
             }
-            nextTag.insertBefore([
+            nextTag.insertBefore(statement);
+            getHTMLSectionStatements(section).push(
               import_compiler38.types.variableDeclaration(
                 "let",
                 [
                   import_compiler38.types.variableDeclarator(ifScopeIdIdentifier),
                   isStateful && import_compiler38.types.variableDeclarator(ifRendererIdentifier)
                 ].filter(Boolean)
-              ),
-              statement
-            ]);
+              )
+            );
             getSerializedScopeProperties(section).set(
               import_compiler38.types.stringLiteral(
                 getScopeAccessorLiteral(nodeRef2).value + "!" /* ConditionalScope */
@@ -8037,6 +8048,7 @@ var function_default = {
     if (index === void 0) {
       functionNameCounts.set(name2, 0);
     } else {
+      functionNameCounts.set(name2, index + 1);
       id = `_${index}`;
     }
     extra.section = section;
@@ -9318,6 +9330,7 @@ var dynamic_tag_default = {
 
 // src/translator/visitors/tag/index.ts
 var TAG_NAME_IDENTIFIER_REG = /^[A-Z][a-zA-Z0-9_$]*$/;
+var BINDING_CHANGE_HANDLER = /* @__PURE__ */ new WeakMap();
 var tag_default = {
   transform: {
     enter(tag) {
@@ -9335,18 +9348,7 @@ var tag_default = {
         const attr2 = attributes[i];
         if (import_compiler53.types.isMarkoAttribute(attr2) && attr2.bound) {
           attr2.bound = false;
-          const changeValue = getChangeHandler(tag, attr2);
-          if (changeValue === null) {
-            throw tag.hub.buildError(
-              attr2,
-              "Attributes may only be bound to identifiers or member expressions"
-            );
-          }
-          attributes.splice(
-            ++i,
-            0,
-            import_compiler53.types.markoAttribute(attr2.name + "Change", changeValue)
-          );
+          attributes.splice(++i, 0, getChangeHandler(tag, attr2));
           crawl = true;
         }
       }
@@ -9466,33 +9468,94 @@ var tag_default = {
   }
 };
 function getChangeHandler(tag, attr2) {
+  const attrName = attr2.name;
+  const changeAttrName = attrName + "Change";
   if (import_compiler53.types.isIdentifier(attr2.value)) {
-    const valueId = tag.scope.generateUidIdentifier("new_" + attr2.value.name);
-    return import_compiler53.types.arrowFunctionExpression(
-      [valueId],
-      import_compiler53.types.blockStatement([
-        import_compiler53.types.expressionStatement(
-          import_compiler53.types.assignmentExpression("=", import_compiler53.types.cloneNode(attr2.value), valueId)
+    const binding = tag.scope.getBinding(attr2.value.name);
+    if (!binding)
+      return import_compiler53.types.markoAttribute(
+        changeAttrName,
+        buildChangeHandlerFunction(attr2.value)
+      );
+    const existingChangedAttr = BINDING_CHANGE_HANDLER.get(binding.identifier);
+    if (!existingChangedAttr) {
+      const changeHandlerAttr = import_compiler53.types.markoAttribute(
+        changeAttrName,
+        buildChangeHandlerFunction(attr2.value)
+      );
+      BINDING_CHANGE_HANDLER.set(binding.identifier, changeHandlerAttr);
+      return changeHandlerAttr;
+    }
+    if (existingChangedAttr.type === "Identifier") {
+      return import_compiler53.types.markoAttribute(
+        changeAttrName,
+        withPreviousLocation(
+          import_compiler53.types.identifier(existingChangedAttr.name),
+          attr2.value
         )
-      ])
+      );
+    }
+    const markoRoot = isMarko(binding.path) ? binding.path : getMarkoRoot(binding.path);
+    if (!(markoRoot?.isMarkoTag() || markoRoot?.isMarkoTagBody())) {
+      throw tag.hub.buildError(attr2.value, "Unable to bind to value.");
+    }
+    const changeHandlerId = markoRoot.scope.generateUid(changeAttrName);
+    const changeHandlerConst = import_compiler53.types.markoTag(
+      import_compiler53.types.stringLiteral("const"),
+      [import_compiler53.types.markoAttribute("value", existingChangedAttr.value, null, null, true)],
+      import_compiler53.types.markoTagBody([]),
+      null,
+      import_compiler53.types.identifier(changeHandlerId)
+    );
+    BINDING_CHANGE_HANDLER.set(
+      binding.identifier,
+      existingChangedAttr.value = import_compiler53.types.identifier(changeHandlerId)
+    );
+    if (markoRoot.isMarkoTag()) {
+      markoRoot.insertAfter(changeHandlerConst);
+    } else {
+      markoRoot.unshiftContainer("body", changeHandlerConst);
+    }
+    return import_compiler53.types.markoAttribute(
+      changeAttrName,
+      withPreviousLocation(import_compiler53.types.identifier(changeHandlerId), attr2.value)
     );
   } else if (import_compiler53.types.isMemberExpression(attr2.value)) {
     const prop = attr2.value.property;
-    if (import_compiler53.types.isPrivateName(prop)) return null;
-    if (import_compiler53.types.isIdentifier(prop)) {
-      return import_compiler53.types.memberExpression(
-        import_compiler53.types.cloneNode(attr2.value.object),
-        import_compiler53.types.identifier(prop.name + "Change")
-      );
-    } else {
-      return import_compiler53.types.memberExpression(
-        import_compiler53.types.cloneNode(attr2.value.object),
-        import_compiler53.types.binaryExpression("+", import_compiler53.types.cloneNode(prop), import_compiler53.types.stringLiteral("Change")),
-        true
+    if (!import_compiler53.types.isPrivateName(attr2.value.property)) {
+      return import_compiler53.types.markoAttribute(
+        changeAttrName,
+        import_compiler53.types.memberExpression(
+          import_compiler53.types.cloneNode(attr2.value.object),
+          prop.type === "Identifier" ? withPreviousLocation(import_compiler53.types.identifier(prop.name + "Change"), prop) : import_compiler53.types.binaryExpression(
+            "+",
+            import_compiler53.types.cloneNode(prop),
+            import_compiler53.types.stringLiteral("Change")
+          ),
+          prop.type !== "Identifier"
+        )
       );
     }
   }
-  return null;
+  throw tag.hub.buildError(
+    attr2.value,
+    "Attributes may only be bound to identifiers or member expressions"
+  );
+}
+function buildChangeHandlerFunction(id) {
+  const newId = "_new_" + id.name;
+  return import_compiler53.types.arrowFunctionExpression(
+    [withPreviousLocation(import_compiler53.types.identifier(newId), id)],
+    import_compiler53.types.blockStatement([
+      import_compiler53.types.expressionStatement(
+        import_compiler53.types.assignmentExpression(
+          "=",
+          withPreviousLocation(import_compiler53.types.identifier(id.name), id),
+          withPreviousLocation(import_compiler53.types.identifier(newId), id)
+        )
+      )
+    ])
+  );
 }
 
 // src/translator/visitors/text.ts

package/dist/translator/util/signals.d.ts

@@ -38,6 +38,7 @@ export type Signal = {
 export declare function setClosureSignalBuilder(tag: t.NodePath<t.MarkoTag>, builder: closureSignalBuilder): void;
 export declare function setForceResumeScope(section: Section): void;
 export declare const getSerializedScopeProperties: (section: Section) => Map<t.StringLiteral | t.NumericLiteral, t.Expression>;
+export declare const getHTMLSectionStatements: (section: Section) => t.Statement[];
 export declare function getSignal(section: Section, referencedBindings: ReferencedBindings, name?: string): Signal;
 export declare function initValue(binding: Binding, runtimeHelper?: "value" | "state"): Signal;
 export declare function getSignalFn(signal: Signal, params: Array<t.Identifier | t.Pattern>, referencedBindings?: ReferencedBindings): t.ArrowFunctionExpression;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "6.0.0-next.3.36",
+  "version": "6.0.0-next.3.37",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",