@marko/runtime-tags 0.1.13 → 0.1.14

package/dist/common/types.d.ts

@@ -14,6 +14,7 @@ export type Scope<T extends {
     ___bound: Map<unknown, unknown> | undefined;
     ___renderer: ClientRenderer | undefined;
     ___abortControllers: Map<string | number, AbortController> | undefined;
+    ___cleanupOwner: Scope | undefined;
     $global: Record<string, unknown>;
     _: Scope | undefined;
     [x: string | number]: any;
@@ -22,7 +23,8 @@ export declare enum ResumeSymbol {
     SectionStart = "[",
     SectionEnd = "]",
     SectionSingleNodesEnd = "|",
-    Node = "*"
+    Node = "*",
+    Cleanup = "$"
 }
 export declare enum AccessorChar {
     Dynamic = "?",

package/dist/debug/dom.js

@@ -117,7 +117,7 @@ var bindFunction = binder(
 );
 function destroyScope(scope) {
   _destroyScope(scope);
-  scope._?.___cleanup?.delete(scope);
+  scope.___cleanupOwner?.___cleanup?.delete(scope);
   const closureSignals = scope.___renderer?.___closureSignals;
   if (closureSignals) {
     for (const signal of closureSignals) {
@@ -141,11 +141,11 @@ function _destroyScope(scope) {
   }
 }
 function onDestroy(scope) {
-  let parentScope = scope._;
+  let parentScope = scope.___cleanupOwner;
   while (parentScope && !parentScope.___cleanup?.has(scope)) {
     (parentScope.___cleanup ||= /* @__PURE__ */ new Set()).add(scope);
     scope = parentScope;
-    parentScope = scope._;
+    parentScope = scope.___cleanupOwner;
   }
 }
 function removeAndDestroyScope(scope) {
@@ -600,8 +600,9 @@ function changeHandler(valueAccessor, fn) {
     fn(scope, valueOrOp);
   };
 }
-function value(valueAccessor, fn, intersection2) {
+function value(valueAccessor, fn, getIntersection) {
   const markAccessor = valueAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, valueOrOp) => {
     if (valueOrOp === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -623,9 +624,10 @@ function value(valueAccessor, fn, intersection2) {
   };
 }
 var accessorId = 0;
-function intersection(count, fn, intersection2) {
+function intersection(count, fn, getIntersection) {
   const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
   const markAccessor = dirtyAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, op) => {
     if (op === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -648,11 +650,11 @@ function intersection(count, fn, intersection2) {
   };
 }
 var defaultGetOwnerScope = (scope) => scope._;
-function closure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
+function closure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
   const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
   const markAccessor = dirtyAccessor + 1;
-  const getOwnerScope = _getOwnerScope || defaultGetOwnerScope;
   const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, op) => {
     if (op === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -684,14 +686,13 @@ function closure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
     }
   };
 }
-function dynamicClosure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
-  const getOwnerScope = _getOwnerScope || defaultGetOwnerScope;
+function dynamicClosure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
   const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
   const signalFn = closure(
     getOwnerValueAccessor,
     fn,
     getOwnerScope,
-    intersection2
+    getIntersection
   );
   signalFn.___subscribe = (scope) => {
     const ownerScope = getOwnerScope(scope);
@@ -782,14 +783,17 @@ function trimWalkString(walkString) {
 }
 function walk(startNode, walkCodes, scope) {
   walker.currentNode = startNode;
-  walkInternal(walkCodes, scope, 0);
+  walkInternal(walkCodes, scope, scope, 0);
   walker.currentNode = document.documentElement;
 }
-function walkInternal(walkCodes, scope, currentWalkIndex) {
+function walkInternal(walkCodes, scope, cleanupOwnerScope, currentWalkIndex) {
   let value2;
   let storedMultiplier = 0;
   let currentMultiplier = 0;
   let currentScopeIndex = 0;
+  if (cleanupOwnerScope !== scope) {
+    scope.___cleanupOwner = cleanupOwnerScope;
+  }
   while (value2 = walkCodes.charCodeAt(currentWalkIndex++)) {
     currentMultiplier = storedMultiplier;
     storedMultiplier = 0;
@@ -815,6 +819,7 @@ function walkInternal(walkCodes, scope, currentWalkIndex) {
       currentWalkIndex = walkInternal(
         walkCodes,
         scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global),
+        cleanupOwnerScope,
         currentWalkIndex
       );
     } else if (value2 === 38 /* EndChild */) {
@@ -858,7 +863,7 @@ function getDebugKey(index, node) {
 // src/dom/renderer.ts
 function createScopeWithRenderer(renderer, $global, ownerScope) {
   const newScope = createScope($global);
-  newScope._ = renderer.___owner || ownerScope;
+  newScope._ = newScope.___cleanupOwner = renderer.___owner || ownerScope;
   newScope.___renderer = renderer;
   initRenderer(renderer, newScope);
   if (renderer.___closureSignals) {
@@ -917,18 +922,22 @@ function dynamicTagAttrs(nodeAccessor, renderBody, inputIsArgs) {
     }
   };
 }
-function createRenderer(template, walks, setup, closureSignals, hasUserEffects = 0, args) {
-  return {
+function createRenderer(template, walks, setup, getClosureSignals, hasUserEffects = 0, getArgs) {
+  let closureSignals;
+  const renderer = {
     ___template: template,
     ___walks: walks && /* @__PURE__ */ trimWalkString(walks),
     ___setup: setup,
     ___clone: _clone,
-    ___closureSignals: new Set(closureSignals),
     ___hasUserEffects: hasUserEffects,
     ___sourceNode: void 0,
-    ___args: args,
-    ___owner: void 0
+    ___owner: void 0,
+    ___args: getArgs && ((scope, value2) => (renderer.___args = getArgs())(scope, value2)),
+    get ___closureSignals() {
+      return closureSignals ??= new Set(getClosureSignals?.());
+    }
   };
+  return renderer;
 }
 function _clone() {
   let sourceNode = this.___sourceNode;
@@ -967,9 +976,10 @@ function patchConditionals(fn) {
   conditional = fn(conditional);
   conditionalOnlyChild = fn(conditionalOnlyChild);
 }
-var conditional = function conditional2(nodeAccessor, fn, intersection2) {
+var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
     let currentRenderer = scope[rendererAccessor];
@@ -1019,9 +1029,10 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
   );
   removeAndDestroyScope(prevScope);
 }
-var conditionalOnlyChild = function conditional3(nodeAccessor, fn, intersection2) {
+var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
     let currentRenderer = scope[rendererAccessor];
@@ -1097,10 +1108,13 @@ function loop(nodeAccessor, renderer, forEach) {
   return (scope, valueOrOp) => {
     if (valueOrOp === DIRTY) return;
     if (valueOrOp === MARK || valueOrOp === CLEAN) {
-      for (const childScope of scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */].values()) {
-        params?.(childScope, valueOrOp);
-        for (const signal of closureSignals) {
-          signal(childScope, valueOrOp);
+      const loopScopes = scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
+      if (loopScopes !== emptyMarkerArray) {
+        for (const childScope of loopScopes) {
+          params?.(childScope, valueOrOp);
+          for (const signal of closureSignals) {
+            signal(childScope, valueOrOp);
+          }
         }
       }
       return;
@@ -1177,8 +1191,10 @@ function inLoopScope(signal, loopNodeAccessor) {
   const loopScopeAccessor = loopNodeAccessor + "!" /* LoopScopeArray */;
   return (scope, op) => {
     const loopScopes = scope[loopScopeAccessor] ?? scope[loopNodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
-    for (const scope2 of loopScopes) {
-      signal(scope2, op);
+    if (loopScopes !== emptyMarkerArray) {
+      for (const scope2 of loopScopes) {
+        signal(scope2, op);
+      }
     }
   };
 }
@@ -1334,32 +1350,57 @@ var Render = class {
     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 data3 = commentText.slice(commentText.indexOf(" ") + 1);
+        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 */) {
-          this.___scopeStack.push(this.___currentScopeId);
+          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 currScope = scopeLookup[this.___currentScopeId];
             const currParent = visit.parentNode;
-            const startNode = currScope.___startNode;
-            if (currParent !== startNode.parentNode) {
+            const startNode = sectionEnd(visit).___startNode;
+            if (currParent && currParent !== startNode.parentNode) {
               currParent.prepend(startNode);
             }
-            currScope.___endNode = visit.previousSibling;
             this.___currentScopeId = this.___scopeStack.pop();
           }
         } else if (token === "|" /* SectionSingleNodesEnd */) {
@@ -1369,9 +1410,7 @@ var Render = class {
           );
           let curNode = visit;
           for (let i = childScopeIds.length - 1; i >= 0; i--) {
-            const childScope = scopeLookup[childScopeIds[i]] ??= {};
-            while ((curNode = curNode.previousSibling).nodeType === 8) ;
-            childScope.___startNode = childScope.___endNode = curNode;
+            curNode = sectionEnd(visit, childScopeIds[i], curNode).___endNode;
           }
         }
       }
@@ -1399,6 +1438,11 @@ var Render = class {
               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") {
@@ -1519,7 +1563,14 @@ var compat = {
     return value2;
   },
   createRenderer(setup, clone, args) {
-    const renderer = createRenderer("", void 0, setup, void 0, 1, args);
+    const renderer = createRenderer(
+      "",
+      void 0,
+      setup,
+      void 0,
+      1,
+      args && (() => args)
+    );
     renderer.___clone = clone;
     return renderer;
   },

package/dist/debug/dom.mjs

@@ -41,7 +41,7 @@ var bindFunction = binder(
 );
 function destroyScope(scope) {
   _destroyScope(scope);
-  scope._?.___cleanup?.delete(scope);
+  scope.___cleanupOwner?.___cleanup?.delete(scope);
   const closureSignals = scope.___renderer?.___closureSignals;
   if (closureSignals) {
     for (const signal of closureSignals) {
@@ -65,11 +65,11 @@ function _destroyScope(scope) {
   }
 }
 function onDestroy(scope) {
-  let parentScope = scope._;
+  let parentScope = scope.___cleanupOwner;
   while (parentScope && !parentScope.___cleanup?.has(scope)) {
     (parentScope.___cleanup ||= /* @__PURE__ */ new Set()).add(scope);
     scope = parentScope;
-    parentScope = scope._;
+    parentScope = scope.___cleanupOwner;
   }
 }
 function removeAndDestroyScope(scope) {
@@ -524,8 +524,9 @@ function changeHandler(valueAccessor, fn) {
     fn(scope, valueOrOp);
   };
 }
-function value(valueAccessor, fn, intersection2) {
+function value(valueAccessor, fn, getIntersection) {
   const markAccessor = valueAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, valueOrOp) => {
     if (valueOrOp === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -547,9 +548,10 @@ function value(valueAccessor, fn, intersection2) {
   };
 }
 var accessorId = 0;
-function intersection(count, fn, intersection2) {
+function intersection(count, fn, getIntersection) {
   const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
   const markAccessor = dirtyAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, op) => {
     if (op === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -572,11 +574,11 @@ function intersection(count, fn, intersection2) {
   };
 }
 var defaultGetOwnerScope = (scope) => scope._;
-function closure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
+function closure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
   const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
   const markAccessor = dirtyAccessor + 1;
-  const getOwnerScope = _getOwnerScope || defaultGetOwnerScope;
   const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, op) => {
     if (op === MARK) {
       if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
@@ -608,14 +610,13 @@ function closure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
     }
   };
 }
-function dynamicClosure(ownerValueAccessor, fn, _getOwnerScope, intersection2) {
-  const getOwnerScope = _getOwnerScope || defaultGetOwnerScope;
+function dynamicClosure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
   const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
   const signalFn = closure(
     getOwnerValueAccessor,
     fn,
     getOwnerScope,
-    intersection2
+    getIntersection
   );
   signalFn.___subscribe = (scope) => {
     const ownerScope = getOwnerScope(scope);
@@ -706,14 +707,17 @@ function trimWalkString(walkString) {
 }
 function walk(startNode, walkCodes, scope) {
   walker.currentNode = startNode;
-  walkInternal(walkCodes, scope, 0);
+  walkInternal(walkCodes, scope, scope, 0);
   walker.currentNode = document.documentElement;
 }
-function walkInternal(walkCodes, scope, currentWalkIndex) {
+function walkInternal(walkCodes, scope, cleanupOwnerScope, currentWalkIndex) {
   let value2;
   let storedMultiplier = 0;
   let currentMultiplier = 0;
   let currentScopeIndex = 0;
+  if (cleanupOwnerScope !== scope) {
+    scope.___cleanupOwner = cleanupOwnerScope;
+  }
   while (value2 = walkCodes.charCodeAt(currentWalkIndex++)) {
     currentMultiplier = storedMultiplier;
     storedMultiplier = 0;
@@ -739,6 +743,7 @@ function walkInternal(walkCodes, scope, currentWalkIndex) {
       currentWalkIndex = walkInternal(
         walkCodes,
         scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global),
+        cleanupOwnerScope,
         currentWalkIndex
       );
     } else if (value2 === 38 /* EndChild */) {
@@ -782,7 +787,7 @@ function getDebugKey(index, node) {
 // src/dom/renderer.ts
 function createScopeWithRenderer(renderer, $global, ownerScope) {
   const newScope = createScope($global);
-  newScope._ = renderer.___owner || ownerScope;
+  newScope._ = newScope.___cleanupOwner = renderer.___owner || ownerScope;
   newScope.___renderer = renderer;
   initRenderer(renderer, newScope);
   if (renderer.___closureSignals) {
@@ -841,18 +846,22 @@ function dynamicTagAttrs(nodeAccessor, renderBody, inputIsArgs) {
     }
   };
 }
-function createRenderer(template, walks, setup, closureSignals, hasUserEffects = 0, args) {
-  return {
+function createRenderer(template, walks, setup, getClosureSignals, hasUserEffects = 0, getArgs) {
+  let closureSignals;
+  const renderer = {
     ___template: template,
     ___walks: walks && /* @__PURE__ */ trimWalkString(walks),
     ___setup: setup,
     ___clone: _clone,
-    ___closureSignals: new Set(closureSignals),
     ___hasUserEffects: hasUserEffects,
     ___sourceNode: void 0,
-    ___args: args,
-    ___owner: void 0
+    ___owner: void 0,
+    ___args: getArgs && ((scope, value2) => (renderer.___args = getArgs())(scope, value2)),
+    get ___closureSignals() {
+      return closureSignals ??= new Set(getClosureSignals?.());
+    }
   };
+  return renderer;
 }
 function _clone() {
   let sourceNode = this.___sourceNode;
@@ -891,9 +900,10 @@ function patchConditionals(fn) {
   conditional = fn(conditional);
   conditionalOnlyChild = fn(conditionalOnlyChild);
 }
-var conditional = function conditional2(nodeAccessor, fn, intersection2) {
+var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
     let currentRenderer = scope[rendererAccessor];
@@ -943,9 +953,10 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
   );
   removeAndDestroyScope(prevScope);
 }
-var conditionalOnlyChild = function conditional3(nodeAccessor, fn, intersection2) {
+var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
   const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
     let currentRenderer = scope[rendererAccessor];
@@ -1021,10 +1032,13 @@ function loop(nodeAccessor, renderer, forEach) {
   return (scope, valueOrOp) => {
     if (valueOrOp === DIRTY) return;
     if (valueOrOp === MARK || valueOrOp === CLEAN) {
-      for (const childScope of scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */].values()) {
-        params?.(childScope, valueOrOp);
-        for (const signal of closureSignals) {
-          signal(childScope, valueOrOp);
+      const loopScopes = scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
+      if (loopScopes !== emptyMarkerArray) {
+        for (const childScope of loopScopes) {
+          params?.(childScope, valueOrOp);
+          for (const signal of closureSignals) {
+            signal(childScope, valueOrOp);
+          }
         }
       }
       return;
@@ -1101,8 +1115,10 @@ function inLoopScope(signal, loopNodeAccessor) {
   const loopScopeAccessor = loopNodeAccessor + "!" /* LoopScopeArray */;
   return (scope, op) => {
     const loopScopes = scope[loopScopeAccessor] ?? scope[loopNodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
-    for (const scope2 of loopScopes) {
-      signal(scope2, op);
+    if (loopScopes !== emptyMarkerArray) {
+      for (const scope2 of loopScopes) {
+        signal(scope2, op);
+      }
     }
   };
 }
@@ -1258,32 +1274,57 @@ var Render = class {
     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 data3 = commentText.slice(commentText.indexOf(" ") + 1);
+        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 */) {
-          this.___scopeStack.push(this.___currentScopeId);
+          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 currScope = scopeLookup[this.___currentScopeId];
             const currParent = visit.parentNode;
-            const startNode = currScope.___startNode;
-            if (currParent !== startNode.parentNode) {
+            const startNode = sectionEnd(visit).___startNode;
+            if (currParent && currParent !== startNode.parentNode) {
               currParent.prepend(startNode);
             }
-            currScope.___endNode = visit.previousSibling;
             this.___currentScopeId = this.___scopeStack.pop();
           }
         } else if (token === "|" /* SectionSingleNodesEnd */) {
@@ -1293,9 +1334,7 @@ var Render = class {
           );
           let curNode = visit;
           for (let i = childScopeIds.length - 1; i >= 0; i--) {
-            const childScope = scopeLookup[childScopeIds[i]] ??= {};
-            while ((curNode = curNode.previousSibling).nodeType === 8) ;
-            childScope.___startNode = childScope.___endNode = curNode;
+            curNode = sectionEnd(visit, childScopeIds[i], curNode).___endNode;
           }
         }
       }
@@ -1323,6 +1362,11 @@ var Render = class {
               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") {
@@ -1443,7 +1487,14 @@ var compat = {
     return value2;
   },
   createRenderer(setup, clone, args) {
-    const renderer = createRenderer("", void 0, setup, void 0, 1, args);
+    const renderer = createRenderer(
+      "",
+      void 0,
+      setup,
+      void 0,
+      1,
+      args && (() => args)
+    );
     renderer.___clone = clone;
     return renderer;
   },