@marko/runtime-tags 0.1.20 → 0.1.21

package/dist/debug/dom.js

@@ -25,7 +25,6 @@ __export(dom_exports, {
   attrTags: () => attrTags,
   attrs: () => attrs,
   attrsEvents: () => attrsEvents,
-  changeHandler: () => changeHandler,
   childClosures: () => childClosures,
   classAttr: () => classAttr,
   closure: () => closure,
@@ -52,6 +51,7 @@ __export(dom_exports, {
   dynamicClosure: () => dynamicClosure,
   dynamicSubscribers: () => dynamicSubscribers,
   dynamicTagAttrs: () => dynamicTagAttrs,
+  effect: () => effect,
   forIn: () => forIn,
   forOf: () => forOf,
   forTo: () => forTo,
@@ -61,7 +61,6 @@ __export(dom_exports, {
   inConditionalScope: () => inConditionalScope,
   inLoopScope: () => inLoopScope,
   init: () => init,
-  initValue: () => initValue,
   intersection: () => intersection,
   intersections: () => intersections,
   lifecycle: () => lifecycle,
@@ -72,18 +71,14 @@ __export(dom_exports, {
   nodeRef: () => nodeRef,
   on: () => on,
   partialAttrs: () => partialAttrs,
-  prepare: () => prepare,
   props: () => props,
-  queueControllableSource: () => queueControllableSource,
-  queueEffect: () => queueEffect,
-  queueSource: () => queueSource,
   register: () => register,
   registerBoundSignal: () => registerBoundSignal,
   registerSubscriber: () => registerSubscriber,
   resetAbortSignal: () => resetAbortSignal,
   run: () => run,
-  runEffects: () => runEffects,
   setTagVar: () => setTagVar,
+  state: () => state,
   styleAttr: () => styleAttr,
   tagVarSignal: () => tagVarSignal,
   value: () => value
@@ -136,6 +131,51 @@ function forTo(to, from, step, cb) {
   }
 }
 
+// src/dom/schedule.ts
+var task;
+var port2 = /* @__PURE__ */ (() => {
+  const { port1, port2: port22 } = new MessageChannel();
+  port1.onmessage = () => {
+    isScheduled = false;
+    if (true) {
+      task.run(run);
+      task = void 0;
+    } else {
+      run();
+    }
+  };
+  return port22;
+})();
+var isScheduled;
+function schedule() {
+  if (!isScheduled) {
+    if (true) {
+      task = console.createTask?.("queue") || {
+        run(fn) {
+          fn();
+        }
+      };
+    }
+    isScheduled = true;
+    queueMicrotask(flushAndWaitFrame);
+  }
+}
+function flushAndWaitFrame() {
+  if (true) {
+    task.run(run);
+  } else {
+    run();
+  }
+  requestAnimationFrame(triggerMacroTask);
+}
+function triggerMacroTask() {
+  port2.postMessage(0);
+}
+
+// src/common/meta.ts
+var DEFAULT_RUNTIME_ID = "M";
+var DEFAULT_RENDER_ID = "_";
+
 // src/dom/scope.ts
 var debugID = 0;
 function createScope($global) {
@@ -165,12 +205,7 @@ function destroyScope(scope) {
   return scope;
 }
 function _destroyScope(scope) {
-  const cleanup = scope.___cleanup;
-  if (cleanup) {
-    for (const instance of cleanup) {
-      _destroyScope(instance);
-    }
-  }
+  scope.___cleanup?.forEach(_destroyScope);
   const controllers = scope.___abortControllers;
   if (controllers) {
     for (const ctrl of controllers.values()) {
@@ -206,365 +241,221 @@ function insertBefore(scope, parent, nextSibling) {
   }
 }
 
-// src/dom/abort-signal.ts
-function resetAbortSignal(scope, id) {
-  const controllers = scope.___abortControllers;
-  if (controllers) {
-    const ctrl = controllers.get(id);
-    if (ctrl) {
-      ctrl.abort();
-      controllers.delete(id);
-    }
+// src/dom/resume.ts
+var registeredValues = {};
+var Render = class {
+  ___scopeStack = [];
+  ___scopeLookup = {};
+  ___serializeContext = {
+    _: registeredValues
+  };
+  constructor(renders, runtimeId, renderId) {
+    this.___renders = renders;
+    this.___runtimeId = runtimeId;
+    this.___renderId = renderId;
+    this.___data = renders[renderId];
+    this.___resume();
   }
-}
-function getAbortSignal(scope, id) {
-  const controllers = scope.___abortControllers ||= /* @__PURE__ */ new Map();
-  let controller = controllers.get(id);
-  if (!controller) {
-    onDestroy(scope);
-    controllers.set(id, controller = new AbortController());
+  w() {
+    this.___data.w();
+    this.___resume();
   }
-  return controller.signal;
-}
-
-// src/common/compat-meta.ts
-var prefix = true ? "$compat_" : "$C_";
-var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
-var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
-
-// src/common/helpers.ts
-function classValue(value2) {
-  return toDelimitedString(value2, " ", stringifyClassObject);
-}
-function stringifyClassObject(name, value2) {
-  return value2 ? name : "";
-}
-function styleValue(value2) {
-  return toDelimitedString(value2, ";", stringifyStyleObject);
-}
-var NON_DIMENSIONAL = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
-function stringifyStyleObject(name, value2) {
-  return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" && value2 && !NON_DIMENSIONAL.test(name) ? value2 + "px" : value2}` : "";
-}
-function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "";
-        let curDelimiter = "";
-        if (Array.isArray(val)) {
-          for (const v of val) {
-            const part = toDelimitedString(v, delimiter, stringify);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
+  ___resume() {
+    const data2 = this.___data;
+    const serializeContext = this.___serializeContext;
+    const scopeLookup = this.___scopeLookup;
+    const visits = data2.v;
+    const cleanupOwners = /* @__PURE__ */ new Map();
+    if (visits.length) {
+      const commentPrefix = data2.i;
+      const commentPrefixLen = commentPrefix.length;
+      const cleanupMarkers = /* @__PURE__ */ new Map();
+      data2.v = [];
+      const sectionEnd = (visit, scopeId = this.___currentScopeId, curNode = visit) => {
+        const scope = scopeLookup[scopeId] ||= {};
+        let endNode = curNode;
+        while ((endNode = endNode.previousSibling).nodeType === 8) ;
+        scope.___endNode = endNode;
+        const startNode = scope.___startNode ||= endNode;
+        let len = cleanupMarkers.size;
+        for (const [markerScopeId, markerNode] of cleanupMarkers) {
+          if (!len--) break;
+          if (markerScopeId !== scopeId && startNode.compareDocumentPosition(markerNode) & 4 && curNode.compareDocumentPosition(markerNode) & 2) {
+            cleanupOwners.set("" + markerScopeId, scopeId);
+            cleanupMarkers.delete(markerScopeId);
+          }
+        }
+        cleanupMarkers.set(scopeId, visit);
+        return scope;
+      };
+      for (const visit of visits) {
+        const commentText = visit.data;
+        const token = commentText[commentPrefixLen];
+        const scopeId = parseInt(commentText.slice(commentPrefixLen + 1));
+        const scope = scopeLookup[scopeId] ||= {};
+        const dataIndex = commentText.indexOf(" ") + 1;
+        const data3 = dataIndex ? commentText.slice(dataIndex) : "";
+        if (token === "*" /* Node */) {
+          scope[data3] = visit.previousSibling;
+        } else if (token === "$" /* Cleanup */) {
+          cleanupMarkers.set(scopeId, visit);
+        } else if (token === "[" /* SectionStart */) {
+          if (this.___currentScopeId) {
+            if (data3) {
+              sectionEnd(visit);
             }
+            this.___scopeStack.push(this.___currentScopeId);
           }
-        } else {
-          for (const name in val) {
-            const v = val[name];
-            const part = stringify(name, v);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
+          this.___currentScopeId = scopeId;
+          scope.___startNode = visit;
+        } else if (token === "]" /* SectionEnd */) {
+          scope[data3] = visit;
+          if (scopeId < this.___currentScopeId) {
+            const currParent = visit.parentNode;
+            const startNode = sectionEnd(visit).___startNode;
+            if (currParent && currParent !== startNode.parentNode) {
+              currParent.prepend(startNode);
             }
+            this.___currentScopeId = this.___scopeStack.pop();
+          }
+        } else if (token === "|" /* SectionSingleNodesEnd */) {
+          scope[true ? data3.slice(0, data3.indexOf(" ")) : parseInt(data3)] = visit;
+          const childScopeIds = JSON.parse(
+            "[" + data3.slice(data3.indexOf(" ") + 1) + "]"
+          );
+          let curNode = visit;
+          for (let i = childScopeIds.length - 1; i >= 0; i--) {
+            curNode = sectionEnd(visit, childScopeIds[i], curNode).___endNode;
           }
         }
-        return result;
       }
+    }
+    const resumes = data2.r;
+    if (resumes) {
+      data2.r = [];
+      const len = resumes.length;
+      let i = 0;
+      try {
+        isResuming = true;
+        while (i < len) {
+          const resumeData = resumes[i++];
+          if (typeof resumeData === "function") {
+            const scopes = resumeData(serializeContext);
+            let { $global } = scopeLookup;
+            if (!$global) {
+              scopeLookup.$global = $global = scopes.$ || {};
+              $global.runtimeId = this.___runtimeId;
+              $global.renderId = this.___renderId;
+            }
+            for (const scopeId in scopes) {
+              if (scopeId !== "$") {
+                const scope = scopes[scopeId];
+                const prevScope = scopeLookup[scopeId];
+                scope.$global = $global;
+                if (prevScope !== scope) {
+                  scopeLookup[scopeId] = Object.assign(
+                    scope,
+                    prevScope
+                  );
+                }
+                const cleanupOwnerId = cleanupOwners.get(scopeId);
+                if (cleanupOwnerId) {
+                  scope.___cleanupOwner = scopes[cleanupOwnerId];
+                  onDestroy(scope);
+                }
+              }
+            }
+          } else if (i === len || typeof resumes[i] !== "string") {
+            delete this.___renders[this.___renderId];
+          } else {
+            registeredValues[resumes[i++]](
+              scopeLookup[resumeData]
+            );
+          }
+        }
+      } finally {
+        isResuming = false;
+      }
+    }
   }
-  return "";
+};
+var isResuming = false;
+function register(id, obj) {
+  registeredValues[id] = obj;
+  return obj;
 }
-function normalizeDynamicRenderer(value2) {
-  if (value2) return value2.renderBody || value2.default || value2;
+function registerBoundSignal(id, signal) {
+  registeredValues[id] = (scope) => (valueOrOp) => signal(scope, valueOrOp);
+  return signal;
 }
-
-// src/dom/reconcile.ts
-var WRONG_POS = 2147483647;
-function reconcile(parent, oldScopes, newScopes, afterReference) {
-  let oldStart = 0;
-  let newStart = 0;
-  let oldEnd = oldScopes.length - 1;
-  let newEnd = newScopes.length - 1;
-  let oldStartScope = oldScopes[oldStart];
-  let newStartScope = newScopes[newStart];
-  let oldEndScope = oldScopes[oldEnd];
-  let newEndScope = newScopes[newEnd];
-  let i;
-  let j;
-  let k;
-  let nextSibling;
-  let oldScope;
-  let newScope;
-  outer: {
-    while (oldStartScope === newStartScope) {
-      ++oldStart;
-      ++newStart;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
-      }
-      oldStartScope = oldScopes[oldStart];
-      newStartScope = newScopes[newStart];
-    }
-    while (oldEndScope === newEndScope) {
-      --oldEnd;
-      --newEnd;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
-      }
-      oldEndScope = oldScopes[oldEnd];
-      newEndScope = newScopes[newEnd];
-    }
-  }
-  if (oldStart > oldEnd) {
-    if (newStart <= newEnd) {
-      k = newEnd + 1;
-      nextSibling = k < newScopes.length ? newScopes[k].___startNode : afterReference;
-      do {
-        insertBefore(newScopes[newStart++], parent, nextSibling);
-      } while (newStart <= newEnd);
-    }
-  } else if (newStart > newEnd) {
-    do {
-      removeAndDestroyScope(oldScopes[oldStart++]);
-    } while (oldStart <= oldEnd);
-  } else {
-    const oldLength = oldEnd - oldStart + 1;
-    const newLength = newEnd - newStart + 1;
-    const aNullable = oldScopes;
-    const sources = new Array(newLength);
-    for (i = 0; i < newLength; ++i) {
-      sources[i] = -1;
-    }
-    let pos = 0;
-    let synced = 0;
-    const keyIndex = /* @__PURE__ */ new Map();
-    for (j = newStart; j <= newEnd; ++j) {
-      keyIndex.set(newScopes[j], j);
-    }
-    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
-      oldScope = oldScopes[i];
-      j = keyIndex.get(oldScope);
-      if (j !== void 0) {
-        pos = pos > j ? WRONG_POS : j;
-        ++synced;
-        newScope = newScopes[j];
-        sources[j - newStart] = i;
-        aNullable[i] = null;
-      }
-    }
-    if (oldLength === oldScopes.length && synced === 0) {
-      for (; newStart < newLength; ++newStart) {
-        insertBefore(newScopes[newStart], parent, afterReference);
-      }
-      for (; oldStart < oldLength; ++oldStart) {
-        removeAndDestroyScope(oldScopes[oldStart]);
-      }
-    } else {
-      i = oldLength - synced;
-      while (i > 0) {
-        oldScope = aNullable[oldStart++];
-        if (oldScope !== null) {
-          removeAndDestroyScope(oldScope);
-          i--;
-        }
-      }
-      if (pos === WRONG_POS) {
-        const seq = longestIncreasingSubsequence(sources);
-        j = seq.length - 1;
-        k = newScopes.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newScope = newScopes[pos++];
-            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-            insertBefore(newScope, parent, nextSibling);
-          } else {
-            if (j < 0 || i !== seq[j]) {
-              pos = i + newStart;
-              newScope = newScopes[pos++];
-              nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-              insertBefore(newScope, parent, nextSibling);
-            } else {
-              --j;
-            }
-          }
-        }
-      } else if (synced !== newLength) {
-        k = newScopes.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newScope = newScopes[pos++];
-            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-            insertBefore(newScope, parent, nextSibling);
-          }
-        }
-      }
-    }
-  }
+function getRegisteredWithScope(id, scope) {
+  const val = registeredValues[id];
+  return scope ? val(scope) : val;
 }
-function longestIncreasingSubsequence(a) {
-  const p = a.slice();
-  const result = [];
-  result.push(0);
-  let u;
-  let v;
-  for (let i = 0, il = a.length; i < il; ++i) {
-    if (a[i] === -1) {
-      continue;
-    }
-    const j = result[result.length - 1];
-    if (a[j] < a[i]) {
-      p[i] = j;
-      result.push(i);
-      continue;
-    }
-    u = 0;
-    v = result.length - 1;
-    while (u < v) {
-      const c = (u + v) / 2 | 0;
-      if (a[result[c]] < a[i]) {
-        u = c + 1;
-      } else {
-        v = c;
-      }
-    }
-    if (a[i] < a[result[u]]) {
-      if (u > 0) {
-        p[i] = result[u - 1];
-      }
-      result[u] = i;
+function init(runtimeId = DEFAULT_RUNTIME_ID) {
+  if (true) {
+    if (!runtimeId.match(/^[_$a-z][_$a-z0-9]*$/i)) {
+      throw new Error(
+        `Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
+      );
     }
   }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
-}
-
-// src/dom/event.ts
-var elementHandlersByEvent = /* @__PURE__ */ new Map();
-var defaultDelegator = createDelegator();
-function on(element, type, handler) {
-  let handlersByElement = elementHandlersByEvent.get(type);
-  if (!handlersByElement) {
-    elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap());
-  }
-  if (!handlersByElement.has(element)) {
-    defaultDelegator(element, type, handleDelegated);
-  }
-  handlersByElement.set(element, handler || void 0);
-}
-function createDelegator() {
-  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
-  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);
-    }
-  };
-}
-function handleDelegated(ev) {
-  let target = ev.target;
-  if (target) {
-    const handlersByElement = elementHandlersByEvent.get(ev.type);
-    handlersByElement.get(target)?.(ev, target);
-    if (ev.bubbles) {
-      while ((target = target.parentElement) && !ev.cancelBubble) {
-        handlersByElement.get(target)?.(ev, target);
-      }
-    }
+  const resumeRender = (renderId) => resumeRender[renderId] = renders[renderId] = new Render(renders, runtimeId, renderId);
+  let renders;
+  if (window[runtimeId]) {
+    setRenders(window[runtimeId]);
+  } else {
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      set: setRenders
+    });
   }
-}
-
-// src/dom/schedule.ts
-var task;
-var port2 = /* @__PURE__ */ (() => {
-  const { port1, port2: port22 } = new MessageChannel();
-  port1.onmessage = () => {
-    isScheduled = false;
+  function setRenders(v) {
     if (true) {
-      task.run(run);
-      task = void 0;
-    } else {
-      run();
+      if (renders) {
+        throw new Error(
+          "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page."
+        );
+      }
     }
-  };
-  return port22;
-})();
-var isScheduled;
-function schedule() {
-  if (!isScheduled) {
-    if (true) {
-      task = console.createTask?.("queue") || {
-        run(fn) {
-          fn();
-        }
-      };
+    renders = v;
+    for (const renderId in v) {
+      resumeRender(renderId);
     }
-    isScheduled = true;
-    queueMicrotask(flushAndWaitFrame);
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      value: resumeRender
+    });
   }
 }
-function flushAndWaitFrame() {
-  if (true) {
-    task.run(run);
-  } else {
-    run();
-  }
-  requestAnimationFrame(triggerMacroTask);
+function registerSubscriber(id, signal) {
+  register(id, signal.___subscribe);
+  return signal;
 }
-function triggerMacroTask() {
-  port2.postMessage(0);
+function nodeRef(id, key) {
+  return register(id, (scope) => () => scope[key]);
 }
 
 // src/dom/signals.ts
 var MARK = true ? Symbol("mark") : {};
 var CLEAN = true ? Symbol("clean") : {};
 var DIRTY = true ? Symbol("dirty") : {};
-function initValue(valueAccessor, valueSignal) {
+function state(valueAccessor, fn, getIntersection) {
+  const valueSignal = value(valueAccessor, fn, getIntersection);
   const markAccessor = valueAccessor + "#" /* Mark */;
-  return (scope, valueOrOp) => {
-    if (valueOrOp !== MARK && scope[markAccessor] === void 0) {
-      valueSignal(scope, valueOrOp);
-    }
-  };
-}
-function changeHandler(valueAccessor, fn) {
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  return (scope, valueOrOp) => {
-    if (true) {
-      if (valueOrOp !== MARK && valueOrOp !== CLEAN && valueOrOp !== DIRTY) {
-        if (valueOrOp != null && typeof valueOrOp !== "function") {
-          throw new Error(
-            `Invalid value ${valueOrOp} for change handler '${valueAccessor}'`
-          );
-        } else if (scope[markAccessor] !== void 0) {
-          const prevValue = scope[valueAccessor];
-          if (prevValue && !valueOrOp) {
-            throw new Error(
-              `Change handler '${valueAccessor}' cannot change from a function to ${valueOrOp}`
-            );
-          } else if (!prevValue && valueOrOp) {
-            throw new Error(
-              `Change handler '${valueAccessor}' cannot change from a nullish to a function`
-            );
-          }
-        }
-      }
+  return (scope, valueOrOp, valueChange) => {
+    if (rendering) {
+      const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
+      valueSignal(
+        scope,
+        valueIsOp || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+      );
+    } else if (valueChange) {
+      valueChange(valueOrOp);
+    } else {
+      queueSource(scope, valueSignal, valueOrOp);
     }
-    fn(scope, valueOrOp);
+    return valueOrOp;
   };
 }
 function value(valueAccessor, fn, getIntersection) {
@@ -582,7 +473,7 @@ function value(valueAccessor, fn, getIntersection) {
           intersection2?.(scope, CLEAN);
         } else {
           scope[valueAccessor] = valueOrOp;
-          fn?.(scope, valueOrOp);
+          fn && fn(scope, valueOrOp);
           intersection2?.(scope, DIRTY);
         }
       }
@@ -642,7 +533,7 @@ function closure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, g
           scope[dirtyAccessor] = false;
           ownerScope ||= getOwnerScope(scope);
           ownerValueAccessor2 ||= getOwnerValueAccessor(scope);
-          fn?.(scope, ownerScope[ownerValueAccessor2]);
+          fn && fn(scope, ownerScope[ownerValueAccessor2]);
           intersection2?.(scope, DIRTY);
         } else {
           intersection2?.(scope, CLEAN);
@@ -739,80 +630,353 @@ function intersections(signals) {
     }
   };
 }
+function effect(id, fn) {
+  register(id, fn);
+  return (scope) => {
+    queueEffect(scope, fn);
+  };
+}
 
 // src/dom/queue.ts
-var currentBatch = [];
-var currentEffects = [];
-function queueControllableSource(scope, signal, changeHandler2, value2) {
-  if (changeHandler2) {
-    changeHandler2(value2);
-    return value2;
-  }
-  return queueSource(scope, signal, value2);
-}
+var pendingSignals = [];
+var pendingEffects = [];
+var rendering = false;
 function queueSource(scope, signal, value2) {
   schedule();
+  rendering = true;
   signal(scope, MARK);
-  currentBatch.push(scope, signal, value2);
+  rendering = false;
+  pendingSignals.push(scope, signal, value2);
   return value2;
 }
 function queueEffect(scope, fn) {
-  currentEffects.push(scope, fn);
+  pendingEffects.push(scope, fn);
 }
 function run() {
+  const signals = pendingSignals;
+  const effects = pendingEffects;
   try {
-    runBatch();
+    rendering = true;
+    pendingSignals = [];
+    runSignals(signals);
   } finally {
-    currentBatch = [];
+    rendering = false;
   }
+  pendingEffects = [];
+  runEffects(effects);
+}
+function prepareEffects(fn) {
+  const prevSignals = pendingSignals;
+  const prevEffects = pendingEffects;
+  const preparedEffects = pendingEffects = [];
+  const preparedSignals = pendingSignals = [];
   try {
-    runEffects();
+    rendering = true;
+    fn();
+    pendingSignals = prevSignals;
+    runSignals(preparedSignals);
   } finally {
-    currentEffects = [];
+    rendering = false;
+    pendingSignals = prevSignals;
+    pendingEffects = prevEffects;
+  }
+  return preparedEffects;
+}
+function runEffects(effects = pendingEffects) {
+  for (let i = 0; i < effects.length; i += 2 /* Total */) {
+    const scope = effects[i];
+    const fn = effects[i + 1];
+    fn(scope);
+  }
+}
+function runSignals(signals) {
+  for (let i = 0; i < signals.length; i += 3 /* Total */) {
+    const scope = signals[i + 0 /* Scope */];
+    const signal = signals[i + 1 /* Signal */];
+    const value2 = signals[i + 2 /* Value */];
+    signal(scope, value2);
+  }
+}
+
+// src/dom/abort-signal.ts
+function resetAbortSignal(scope, id) {
+  const controllers = scope.___abortControllers;
+  if (controllers) {
+    const ctrl = controllers.get(id);
+    if (ctrl) {
+      queueEffect(null, () => ctrl.abort());
+      controllers.delete(id);
+    }
+  }
+}
+function getAbortSignal(scope, id) {
+  const controllers = scope.___abortControllers ||= /* @__PURE__ */ new Map();
+  let controller = controllers.get(id);
+  if (!controller) {
+    onDestroy(scope);
+    controllers.set(id, controller = new AbortController());
+  }
+  return controller.signal;
+}
+
+// src/common/compat-meta.ts
+var prefix = true ? "$compat_" : "$C_";
+var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
+var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
+
+// src/common/helpers.ts
+function classValue(value2) {
+  return toDelimitedString(value2, " ", stringifyClassObject);
+}
+function stringifyClassObject(name, value2) {
+  return value2 ? name : "";
+}
+function styleValue(value2) {
+  return toDelimitedString(value2, ";", stringifyStyleObject);
+}
+var NON_DIMENSIONAL = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
+function stringifyStyleObject(name, value2) {
+  return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" && value2 && !NON_DIMENSIONAL.test(name) ? value2 + "px" : value2}` : "";
+}
+function toDelimitedString(val, delimiter, stringify) {
+  switch (typeof val) {
+    case "string":
+      return val;
+    case "object":
+      if (val !== null) {
+        let result = "";
+        let curDelimiter = "";
+        if (Array.isArray(val)) {
+          for (const v of val) {
+            const part = toDelimitedString(v, delimiter, stringify);
+            if (part !== "") {
+              result += curDelimiter + part;
+              curDelimiter = delimiter;
+            }
+          }
+        } else {
+          for (const name in val) {
+            const v = val[name];
+            const part = stringify(name, v);
+            if (part !== "") {
+              result += curDelimiter + part;
+              curDelimiter = delimiter;
+            }
+          }
+        }
+        return result;
+      }
+  }
+  return "";
+}
+function normalizeDynamicRenderer(value2) {
+  if (value2) return value2.renderBody || value2.default || value2;
+}
+
+// src/dom/reconcile.ts
+var WRONG_POS = 2147483647;
+function reconcile(parent, oldScopes, newScopes, afterReference) {
+  let oldStart = 0;
+  let newStart = 0;
+  let oldEnd = oldScopes.length - 1;
+  let newEnd = newScopes.length - 1;
+  let oldStartScope = oldScopes[oldStart];
+  let newStartScope = newScopes[newStart];
+  let oldEndScope = oldScopes[oldEnd];
+  let newEndScope = newScopes[newEnd];
+  let i;
+  let j;
+  let k;
+  let nextSibling;
+  let oldScope;
+  let newScope;
+  outer: {
+    while (oldStartScope === newStartScope) {
+      ++oldStart;
+      ++newStart;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldStartScope = oldScopes[oldStart];
+      newStartScope = newScopes[newStart];
+    }
+    while (oldEndScope === newEndScope) {
+      --oldEnd;
+      --newEnd;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldEndScope = oldScopes[oldEnd];
+      newEndScope = newScopes[newEnd];
+    }
+  }
+  if (oldStart > oldEnd) {
+    if (newStart <= newEnd) {
+      k = newEnd + 1;
+      nextSibling = k < newScopes.length ? newScopes[k].___startNode : afterReference;
+      do {
+        insertBefore(newScopes[newStart++], parent, nextSibling);
+      } while (newStart <= newEnd);
+    }
+  } else if (newStart > newEnd) {
+    do {
+      removeAndDestroyScope(oldScopes[oldStart++]);
+    } while (oldStart <= oldEnd);
+  } else {
+    const oldLength = oldEnd - oldStart + 1;
+    const newLength = newEnd - newStart + 1;
+    const aNullable = oldScopes;
+    const sources = new Array(newLength);
+    for (i = 0; i < newLength; ++i) {
+      sources[i] = -1;
+    }
+    let pos = 0;
+    let synced = 0;
+    const keyIndex = /* @__PURE__ */ new Map();
+    for (j = newStart; j <= newEnd; ++j) {
+      keyIndex.set(newScopes[j], j);
+    }
+    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
+      oldScope = oldScopes[i];
+      j = keyIndex.get(oldScope);
+      if (j !== void 0) {
+        pos = pos > j ? WRONG_POS : j;
+        ++synced;
+        newScope = newScopes[j];
+        sources[j - newStart] = i;
+        aNullable[i] = null;
+      }
+    }
+    if (oldLength === oldScopes.length && synced === 0) {
+      for (; newStart < newLength; ++newStart) {
+        insertBefore(newScopes[newStart], parent, afterReference);
+      }
+      for (; oldStart < oldLength; ++oldStart) {
+        removeAndDestroyScope(oldScopes[oldStart]);
+      }
+    } else {
+      i = oldLength - synced;
+      while (i > 0) {
+        oldScope = aNullable[oldStart++];
+        if (oldScope !== null) {
+          removeAndDestroyScope(oldScope);
+          i--;
+        }
+      }
+      if (pos === WRONG_POS) {
+        const seq = longestIncreasingSubsequence(sources);
+        j = seq.length - 1;
+        k = newScopes.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newScope = newScopes[pos++];
+            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
+            insertBefore(newScope, parent, nextSibling);
+          } else {
+            if (j < 0 || i !== seq[j]) {
+              pos = i + newStart;
+              newScope = newScopes[pos++];
+              nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
+              insertBefore(newScope, parent, nextSibling);
+            } else {
+              --j;
+            }
+          }
+        }
+      } else if (synced !== newLength) {
+        k = newScopes.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newScope = newScopes[pos++];
+            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
+            insertBefore(newScope, parent, nextSibling);
+          }
+        }
+      }
+    }
+  }
+}
+function longestIncreasingSubsequence(a) {
+  const p = a.slice();
+  const result = [];
+  result.push(0);
+  let u;
+  let v;
+  for (let i = 0, il = a.length; i < il; ++i) {
+    if (a[i] === -1) {
+      continue;
+    }
+    const j = result[result.length - 1];
+    if (a[j] < a[i]) {
+      p[i] = j;
+      result.push(i);
+      continue;
+    }
+    u = 0;
+    v = result.length - 1;
+    while (u < v) {
+      const c = (u + v) / 2 | 0;
+      if (a[result[c]] < a[i]) {
+        u = c + 1;
+      } else {
+        v = c;
+      }
+    }
+    if (a[i] < a[result[u]]) {
+      if (u > 0) {
+        p[i] = result[u - 1];
+      }
+      result[u] = i;
+    }
+  }
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
   }
+  return result;
 }
-function runSync(fn, v) {
-  const prevBatch = currentBatch;
-  const prevEffects = currentEffects;
-  currentBatch = [];
-  currentEffects = [];
-  try {
-    fn(v);
-    runBatch();
-    currentBatch = prevBatch;
-    runEffects();
-  } finally {
-    currentBatch = prevBatch;
-    currentEffects = prevEffects;
+
+// src/dom/event.ts
+var elementHandlersByEvent = /* @__PURE__ */ new Map();
+var defaultDelegator = createDelegator();
+function on(element, type, handler) {
+  let handlersByElement = elementHandlersByEvent.get(type);
+  if (!handlersByElement) {
+    elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap());
   }
-}
-function prepare(fn) {
-  const prevBatch = currentBatch;
-  const prevEffects = currentEffects;
-  const preparedEffects = currentEffects = [];
-  currentBatch = [];
-  try {
-    fn();
-    runBatch();
-  } finally {
-    currentBatch = prevBatch;
-    currentEffects = prevEffects;
+  if (!handlersByElement.has(element)) {
+    defaultDelegator(element, type, handleDelegated);
   }
-  return preparedEffects;
+  handlersByElement.set(element, handler || void 0);
 }
-function runEffects(effects = currentEffects) {
-  for (let i = 0; i < effects.length; i += 2 /* Total */) {
-    const scope = effects[i];
-    const fn = effects[i + 1];
-    fn(scope);
-  }
+function createDelegator() {
+  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  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);
+    }
+  };
 }
-function runBatch() {
-  for (let i = 0; i < currentBatch.length; i += 3 /* Total */) {
-    const scope = currentBatch[i + 0 /* Scope */];
-    const signal = currentBatch[i + 1 /* Signal */];
-    const value2 = currentBatch[i + 2 /* Value */];
-    signal(scope, value2);
+function handleDelegated(ev) {
+  let target = ev.target;
+  if (target) {
+    const handlersByElement = elementHandlersByEvent.get(ev.type);
+    handlersByElement.get(target)?.(ev, target);
+    if (ev.bubbles) {
+      while ((target = target.parentElement) && !ev.cancelBubble) {
+        handlersByElement.get(target)?.(ev, target);
+      }
+    }
   }
 }
 
@@ -843,205 +1007,6 @@ function stripSpacesAndPunctuation(str) {
   return str.replace(/[^\p{L}\p{N}]/gu, "");
 }
 
-// src/common/meta.ts
-var DEFAULT_RUNTIME_ID = "M";
-var DEFAULT_RENDER_ID = "_";
-
-// src/dom/resume.ts
-var registeredValues = {};
-var Render = class {
-  ___scopeStack = [];
-  ___scopeLookup = {};
-  ___serializeContext = {
-    _: registeredValues
-  };
-  constructor(renders, runtimeId, renderId) {
-    this.___renders = renders;
-    this.___runtimeId = runtimeId;
-    this.___renderId = renderId;
-    this.___data = renders[renderId];
-    this.___resume();
-  }
-  w() {
-    this.___data.w();
-    this.___resume();
-  }
-  ___resume() {
-    const data2 = this.___data;
-    const serializeContext = this.___serializeContext;
-    const scopeLookup = this.___scopeLookup;
-    const visits = data2.v;
-    const cleanupOwners = /* @__PURE__ */ new Map();
-    if (visits.length) {
-      const commentPrefix = data2.i;
-      const commentPrefixLen = commentPrefix.length;
-      const cleanupMarkers = /* @__PURE__ */ new Map();
-      data2.v = [];
-      const sectionEnd = (visit, scopeId = this.___currentScopeId, curNode = visit) => {
-        const scope = scopeLookup[scopeId] ||= {};
-        let endNode = curNode;
-        while ((endNode = endNode.previousSibling).nodeType === 8) ;
-        scope.___endNode = endNode;
-        const startNode = scope.___startNode ||= endNode;
-        let len = cleanupMarkers.size;
-        for (const [markerScopeId, markerNode] of cleanupMarkers) {
-          if (!len--) break;
-          if (markerScopeId !== scopeId && startNode.compareDocumentPosition(markerNode) & 4 && curNode.compareDocumentPosition(markerNode) & 2) {
-            cleanupOwners.set("" + markerScopeId, scopeId);
-            cleanupMarkers.delete(markerScopeId);
-          }
-        }
-        cleanupMarkers.set(scopeId, visit);
-        return scope;
-      };
-      for (const visit of visits) {
-        const commentText = visit.data;
-        const token = commentText[commentPrefixLen];
-        const scopeId = parseInt(commentText.slice(commentPrefixLen + 1));
-        const scope = scopeLookup[scopeId] ||= {};
-        const dataIndex = commentText.indexOf(" ") + 1;
-        const data3 = dataIndex ? commentText.slice(dataIndex) : "";
-        if (token === "*" /* Node */) {
-          scope[data3] = visit.previousSibling;
-        } else if (token === "$" /* Cleanup */) {
-          cleanupMarkers.set(scopeId, visit);
-        } else if (token === "[" /* SectionStart */) {
-          if (this.___currentScopeId) {
-            if (data3) {
-              sectionEnd(visit);
-            }
-            this.___scopeStack.push(this.___currentScopeId);
-          }
-          this.___currentScopeId = scopeId;
-          scope.___startNode = visit;
-        } else if (token === "]" /* SectionEnd */) {
-          scope[data3] = visit;
-          if (scopeId < this.___currentScopeId) {
-            const currParent = visit.parentNode;
-            const startNode = sectionEnd(visit).___startNode;
-            if (currParent && currParent !== startNode.parentNode) {
-              currParent.prepend(startNode);
-            }
-            this.___currentScopeId = this.___scopeStack.pop();
-          }
-        } else if (token === "|" /* SectionSingleNodesEnd */) {
-          scope[true ? data3.slice(0, data3.indexOf(" ")) : parseInt(data3)] = visit;
-          const childScopeIds = JSON.parse(
-            "[" + data3.slice(data3.indexOf(" ") + 1) + "]"
-          );
-          let curNode = visit;
-          for (let i = childScopeIds.length - 1; i >= 0; i--) {
-            curNode = sectionEnd(visit, childScopeIds[i], curNode).___endNode;
-          }
-        }
-      }
-    }
-    const resumes = data2.r;
-    if (resumes) {
-      data2.r = [];
-      const len = resumes.length;
-      let i = 0;
-      try {
-        isResuming = true;
-        while (i < len) {
-          const resumeData = resumes[i++];
-          if (typeof resumeData === "function") {
-            const scopes = resumeData(serializeContext);
-            let { $global } = scopeLookup;
-            if (!$global) {
-              scopeLookup.$global = $global = scopes.$ || {};
-              $global.runtimeId = this.___runtimeId;
-              $global.renderId = this.___renderId;
-            }
-            for (const scopeId in scopes) {
-              if (scopeId !== "$") {
-                const scope = scopes[scopeId];
-                const prevScope = scopeLookup[scopeId];
-                scope.$global = $global;
-                if (prevScope !== scope) {
-                  scopeLookup[scopeId] = Object.assign(
-                    scope,
-                    prevScope
-                  );
-                }
-                const cleanupOwnerId = cleanupOwners.get(scopeId);
-                if (cleanupOwnerId) {
-                  scope.___cleanupOwner = scopes[cleanupOwnerId];
-                  onDestroy(scope);
-                }
-              }
-            }
-          } else if (i === len || typeof resumes[i] !== "string") {
-            delete this.___renders[this.___renderId];
-          } else {
-            registeredValues[resumes[i++]](
-              scopeLookup[resumeData]
-            );
-          }
-        }
-      } finally {
-        isResuming = false;
-      }
-    }
-  }
-};
-var isResuming = false;
-function register(id, obj) {
-  registeredValues[id] = obj;
-  return obj;
-}
-function registerBoundSignal(id, signal) {
-  registeredValues[id] = (scope) => (valueOrOp) => signal(scope, valueOrOp);
-  return signal;
-}
-function getRegisteredWithScope(id, scope) {
-  const val = registeredValues[id];
-  return scope ? val(scope) : val;
-}
-function init(runtimeId = DEFAULT_RUNTIME_ID) {
-  if (true) {
-    if (!runtimeId.match(/^[_$a-z][_$a-z0-9]*$/i)) {
-      throw new Error(
-        `Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
-      );
-    }
-  }
-  const resumeRender = (renderId) => resumeRender[renderId] = renders[renderId] = new Render(renders, runtimeId, renderId);
-  let renders;
-  if (window[runtimeId]) {
-    setRenders(window[runtimeId]);
-  } else {
-    Object.defineProperty(window, runtimeId, {
-      configurable: true,
-      set: setRenders
-    });
-  }
-  function setRenders(v) {
-    if (true) {
-      if (renders) {
-        throw new Error(
-          "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page."
-        );
-      }
-    }
-    renders = v;
-    for (const renderId in v) {
-      resumeRender(renderId);
-    }
-    Object.defineProperty(window, runtimeId, {
-      configurable: true,
-      value: resumeRender
-    });
-  }
-}
-function registerSubscriber(id, signal) {
-  register(id, signal.___subscribe);
-  return signal;
-}
-function nodeRef(id, key) {
-  return register(id, (scope) => () => scope[key]);
-}
-
 // src/dom/controllable.ts
 function controllable_input_checked(scope, nodeAccessor, checked, checkedChange) {
   setCheckboxValue(
@@ -1058,7 +1023,8 @@ function controllable_input_checked_effect(scope, nodeAccessor) {
     const checkedChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (checkedChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(checkedChange, el.checked);
+      checkedChange(el.checked);
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         el.checked = !el.checked;
       }
@@ -1083,10 +1049,10 @@ function controllable_input_checkedValue_effect(scope, nodeAccessor) {
     if (checkedValueChange) {
       const oldValue = scope[nodeAccessor + ":" /* ControlledValue */];
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(
-        checkedValueChange,
+      checkedValueChange(
         Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0
       );
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         el.checked = !el.checked;
       }
@@ -1120,7 +1086,8 @@ function controllable_input_value_effect(scope, nodeAccessor) {
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
       if (ev) inputType = ev.inputType;
-      runSync(valueChange, el.value);
+      valueChange(el.value);
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setValueAndUpdateSelection(
           el,
@@ -1151,10 +1118,10 @@ function controllable_select_value_effect(scope, nodeAccessor) {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(
-        valueChange,
+      valueChange(
         Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
       );
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setSelectOptions(
           el,
@@ -1207,7 +1174,8 @@ function controllable_detailsOrDialog_open_effect(scope, nodeAccessor) {
       const openChange = scope[nodeAccessor + ";" /* ControlledHandler */];
       if (openChange) {
         scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-        runSync(openChange, el.open);
+        openChange(el.open);
+        run();
         if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
           el.open = !el.open;
         }
@@ -1684,7 +1652,7 @@ function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
     }
   };
 }
-function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, hasUserEffects = 0, getArgs) {
+function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, getArgs) {
   let args;
   let closureSignals;
   const id = true ? Symbol("Marko Renderer") : {};
@@ -1697,7 +1665,6 @@ function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, h
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___hasUserEffects: hasUserEffects,
       ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
@@ -1708,13 +1675,12 @@ function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, h
     };
   };
 }
-function createRenderer(template, walks, setup, getClosureSignals, hasUserEffects, getArgs) {
+function createRenderer(template, walks, setup, getClosureSignals, getArgs) {
   return createRendererWithOwner(
     template,
     walks,
     setup,
     getClosureSignals,
-    hasUserEffects,
     getArgs
   )();
 }
@@ -1742,7 +1708,7 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
         currentRenderer = scope[rendererAccessor] = normalizedRenderer;
         setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
-        fn?.(scope);
+        fn && fn(scope);
         op = DIRTY;
       } else {
         op = CLEAN;
@@ -1803,7 +1769,7 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
           nodeAccessor,
           normalizedRenderer
         );
-        fn?.(scope);
+        fn && fn(scope);
         op = DIRTY;
       } else {
         op = CLEAN;
@@ -1916,11 +1882,7 @@ function loop(nodeAccessor, renderer, forEach) {
         newArray = emptyMarkerArray;
         getEmptyScope(referenceNode);
       } else {
-        if (renderer.___hasUserEffects) {
-          for (let i = 0; i < oldArray.length; i++) {
-            destroyScope(oldArray[i]);
-          }
-        }
+        oldArray.forEach(destroyScope);
         referenceNode.textContent = "";
         newMap = emptyMap;
         newArray = emptyArray;
@@ -2013,7 +1975,6 @@ var compat = {
       void 0,
       setup,
       void 0,
-      1,
       args && (() => args)
     );
     renderer.___clone = clone;
@@ -2030,7 +1991,7 @@ var compat = {
     }
     const args = renderer.___args || noop;
     let existing = false;
-    component.effects = prepare(() => {
+    component.effects = prepareEffects(() => {
       if (!scope) {
         scope = component.scope = createScopeWithRenderer(renderer, out.global);
         const closures = renderer.___closureSignals;
@@ -2054,7 +2015,8 @@ function noop() {
 }
 
 // src/dom/template.ts
-var createTemplate = (renderer, templateId) => {
+var createTemplate = (templateId, ...rendererArgs) => {
+  const renderer = createRenderer(...rendererArgs);
   renderer.mount = mount;
   renderer._ = renderer;
   if (true) {
@@ -2083,7 +2045,7 @@ function mount(input = {}, reference, position) {
     };
   }
   const args = this.___args;
-  const effects = prepare(() => {
+  const effects = prepareEffects(() => {
     scope = createScope($global);
     dom = initRenderer(this, scope);
     if (args) {
@@ -2108,10 +2070,12 @@ function mount(input = {}, reference, position) {
   return {
     update: (newInput) => {
       if (args) {
-        runSync(() => {
-          args(scope, MARK);
-          args(scope, [newInput]);
-        });
+        runEffects(
+          prepareEffects(() => {
+            args(scope, MARK);
+            args(scope, [newInput]);
+          })
+        );
       }
     },
     destroy: () => {