roqa 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.6] - 2026-03-31
+
+### Added
+
+- Added compile-time selector optimization for list selection patterns
+  - The compiler now detects `get(cell) === loopItem` inside `<For>` attribute expressions and generates an O(1) selector instead of N per-row `bind()` subscriptions
+  - A single shared `Map` (keyed by row reference) and one `bind()` on the outer cell replaces N per-row `bind()` calls
+  - On selection change only 2 Map callbacks fire (deselect old, select new) regardless of list size
+  - Row cleanup removes its Map entry to prevent memory leaks
+
+## [0.0.5] - 2026-03-31
+
+### Fixed
+
+- Fixed a compiler bug where cleanup-captured `bind()` calls inside `<For>` and `<Show>` blocks could be fully inlined to ref assignments while leaving dangling `_cleanup_N()` calls in generated cleanup functions
+  - The inliner now tracks cleanup variable names for removable `bind()` subscriptions and removes stale cleanup calls when their underlying subscription has been optimized away
+  - Cleanup properties are omitted entirely when all generated cleanup calls were eliminated during inlining
+
+### Changed
+
+- Restored the js benchmark example to the faster per-row selection strategy so compiled output uses direct row refs instead of per-row subscriptions to a shared selection cell
+
 ## [0.0.4] - 2026-01-10
 
 ### Fixed

package/package.json

@@ -1,77 +1,77 @@
 {
-  "name": "roqa",
-  "version": "0.0.4",
-  "description": "Roqa is a reactive UI framework",
-  "keywords": [
-    "UI",
-    "framework",
-    "roqa",
-    "roqajs",
-    "web components",
-    "custom elements",
-    "jsx",
-    "compiler"
-  ],
-  "homepage": "https://roqa.dev",
-  "bugs": {
-    "url": "https://github.com/roqajs/roqa/issues"
-  },
-  "license": "MIT",
-  "author": "Hawk Ticehurst",
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/roqajs/roqa.git",
-    "directory": "packages/roqa"
-  },
-  "type": "module",
-  "files": [
-    "src",
-    "types",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./src/runtime/index.js",
-      "browser": "./src/runtime/index.js",
-      "default": "./src/runtime/index.js"
-    },
-    "./package.json": "./package.json",
-    "./compiler": {
-      "types": "./types/compiler.d.ts",
-      "import": "./src/compiler/index.js",
-      "default": "./src/compiler/index.js"
-    },
-    "./jsx-runtime": {
-      "types": "./src/jsx-runtime.d.ts",
-      "import": "./src/jsx-runtime.js",
-      "default": "./src/jsx-runtime.js"
-    }
-  },
-  "dependencies": {
-    "@babel/generator": "^7.28.5",
-    "@babel/parser": "^7.28.5",
-    "@babel/traverse": "^7.28.5",
-    "@babel/types": "^7.28.5",
-    "magic-string": "^0.30.21"
-  },
-  "devDependencies": {
-    "@vitest/browser": "^3.0.0",
-    "@vitest/coverage-v8": "^3.0.0",
-    "playwright": "^1.49.0",
-    "vitest": "^3.0.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:unit": "vitest run --project unit",
-    "test:browser": "vitest run --project browser",
-    "test:coverage": "vitest run --coverage"
-  }
-}
+	"name": "roqa",
+	"version": "0.0.6",
+	"description": "Roqa is a reactive UI framework",
+	"keywords": [
+		"UI",
+		"framework",
+		"roqa",
+		"roqajs",
+		"web components",
+		"custom elements",
+		"jsx",
+		"compiler"
+	],
+	"homepage": "https://roqa.dev",
+	"bugs": {
+		"url": "https://github.com/roqajs/roqa/issues"
+	},
+	"license": "MIT",
+	"author": "Hawk Ticehurst",
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/roqajs/roqa.git",
+		"directory": "packages/roqa"
+	},
+	"type": "module",
+	"files": [
+		"src",
+		"types",
+		"README.md",
+		"LICENSE",
+		"CHANGELOG.md"
+	],
+	"exports": {
+		".": {
+			"types": "./types/index.d.ts",
+			"import": "./src/runtime/index.js",
+			"browser": "./src/runtime/index.js",
+			"default": "./src/runtime/index.js"
+		},
+		"./package.json": "./package.json",
+		"./compiler": {
+			"types": "./types/compiler.d.ts",
+			"import": "./src/compiler/index.js",
+			"default": "./src/compiler/index.js"
+		},
+		"./jsx-runtime": {
+			"types": "./src/jsx-runtime.d.ts",
+			"import": "./src/jsx-runtime.js",
+			"default": "./src/jsx-runtime.js"
+		}
+	},
+	"scripts": {
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:unit": "vitest run --project unit",
+		"test:browser": "vitest run --project browser",
+		"test:coverage": "vitest run --coverage"
+	},
+	"dependencies": {
+		"@babel/generator": "catalog:default",
+		"@babel/parser": "catalog:default",
+		"@babel/traverse": "catalog:default",
+		"@babel/types": "catalog:default",
+		"magic-string": "catalog:default"
+	},
+	"devDependencies": {
+		"@vitest/browser": "^3.0.0",
+		"@vitest/coverage-v8": "^3.0.0",
+		"playwright": "^1.49.0",
+		"vitest": "^3.0.0"
+	},
+	"engines": {
+		"node": ">=20.0.0"
+	}
+}

package/src/compiler/codegen.js

@@ -595,6 +595,44 @@ function generateForBlock(
 
 	// Process inner bindings (these need to reference the item parameter)
 	const processedBindings = processBindings(bindings, code);
+
+	// === SELECTOR DETECTION ===
+	// Scan for the pattern: get(outerCell) === itemParam in attribute expressions.
+	// When found, replace N individual bind() subscriptions with one shared dispatch
+	// function + a keyed Map, reducing selection change cost from O(n) to O(1).
+	const selectorMap = new Map(); // cellCode -> { subsVar, prevVar }
+	let selectorCounter = 0;
+	for (const binding of processedBindings) {
+		if (binding.isStatic || !binding.cellArg || !binding.fullExpression) continue;
+		const cellCode = generateExpr(code, binding.cellArg);
+		if (selectorMap.has(cellCode)) continue;
+		if (detectSelectorPattern(binding, itemParam)) {
+			selectorCounter++;
+			selectorMap.set(cellCode, {
+				subsVar: `_sel_${selectorCounter}_subs`,
+				prevVar: `_sel_${selectorCounter}_prev`,
+			});
+		}
+	}
+
+	// Generate selector setup lines (emitted BEFORE the forBlock call)
+	const selectorSetupLines = [];
+	for (const [cellCode, sel] of selectorMap) {
+		selectorSetupLines.push(`    const ${sel.subsVar} = new Map();`);
+		selectorSetupLines.push(`    let ${sel.prevVar} = get(${cellCode});`);
+		selectorSetupLines.push(`    bind(${cellCode}, (next) => {`);
+		selectorSetupLines.push(`      if (${sel.prevVar} === next) return;`);
+		selectorSetupLines.push(`      ${sel.subsVar}.get(${sel.prevVar})?.(false);`);
+		selectorSetupLines.push(`      ${sel.subsVar}.get(next)?.(true);`);
+		selectorSetupLines.push(`      ${sel.prevVar} = next;`);
+		selectorSetupLines.push(`    });`);
+		selectorSetupLines.push("");
+		usedImports.add("bind");
+		usedImports.add("get");
+	}
+	const selectorSetupCode =
+		selectorSetupLines.length > 0 ? selectorSetupLines.join("\n") + "\n" : "";
+
 	for (const b of processedBindings) {
 		if (!b.isStatic) {
 			usedImports.add("bind");
@@ -703,9 +741,38 @@ function generateForBlock(
 
 	// Track cleanup functions needed from bind() calls
 	const cleanupVars = [];
+	// Track inline cleanup expressions from selector subscriptions
+	const selectorCleanups = [];
 
 	// Bindings inside for block
 	for (const binding of processedBindings) {
+		// Check for selector pattern before falling back to standard binding generation
+		if (!binding.isStatic && binding.cellArg && binding.fullExpression) {
+			const cellCode = generateExpr(code, binding.cellArg);
+			const sel = selectorMap.get(cellCode);
+			if (sel) {
+				const match = detectSelectorPattern(binding, itemParam);
+				if (match) {
+					const { targetVar, targetProperty } = binding;
+					// Initial value: evaluates with get(cell), Phase 4 inlines to cell.v
+					const initialExprCode = generateExpr(code, binding.fullExpression);
+					// Callback: replace the entire `get(cell) === itemParam` comparison with `active`
+					const callbackExprCode = generateExprWithReplacement(
+						code,
+						binding.fullExpression,
+						match.comparisonNode,
+						"active",
+					);
+					lines.push(`      ${targetVar}.${targetProperty} = ${initialExprCode};`);
+					lines.push(`      ${sel.subsVar}.set(${itemParam}, (active) => {`);
+					lines.push(`        ${targetVar}.${targetProperty} = ${callbackExprCode};`);
+					lines.push(`      });`);
+					selectorCleanups.push(`${sel.subsVar}.delete(${itemParam})`);
+					continue;
+				}
+			}
+		}
+
 		const { bindCode, cleanupVar } = generateBindingWithCleanup(
 			code,
 			binding,
@@ -725,17 +792,23 @@ function generateForBlock(
 	lines.push("");
 	lines.push(`      anchor.before(${firstElementVar});`);
 
-	if (cleanupVars.length > 0) {
-		const cleanupCalls = cleanupVars.map((v) => `${v}()`).join("; ");
+	const allCleanupCalls = [
+		...cleanupVars.map((v) => `${v}()`),
+		...selectorCleanups,
+	]
+		.filter(Boolean)
+		.join("; ");
+
+	if (allCleanupCalls) {
 		lines.push(
-			`      return { start: ${firstElementVar}, end: ${firstElementVar}, cleanup: () => { ${cleanupCalls}; } };`,
+			`      return { start: ${firstElementVar}, end: ${firstElementVar}, cleanup: () => { ${allCleanupCalls}; } };`,
 		);
 	} else {
 		lines.push(`      return { start: ${firstElementVar}, end: ${firstElementVar} };`);
 	}
 	lines.push(`    });`);
 
-	return lines.join("\n");
+	return selectorSetupCode + lines.join("\n");
 }
 
 /**
@@ -1301,6 +1374,67 @@ function generatePropBinding(code, binding, usedImports) {
 	return `setProp(${targetVar}, "${propName}", ${exprCode});`;
 }
 
+/**
+ * Detect the selector pattern in a binding: get(outerCell) === itemParam
+ *
+ * This pattern is common for list selection (e.g. class={get(selected) === row ? "danger" : ""}).
+ * When detected, the compiler replaces N individual bind() subscriptions with a single shared
+ * dispatch function (O(1) per selection change) backed by a keyed Map.
+ *
+ * @param {object} binding - ProcessedBinding from bind-detector
+ * @param {string} itemParam - The loop item parameter name (e.g., "row")
+ * @returns {{ comparisonNode: object } | null}
+ */
+function detectSelectorPattern(binding, itemParam) {
+	const { fullExpression, getCallNode, needsTransform } = binding;
+	// Must be a complex expression (needsTransform) so there's something beyond just get(cell)
+	if (!fullExpression || !getCallNode || !needsTransform) return null;
+
+	function find(node) {
+		if (!node || typeof node !== "object" || !node.type) return null;
+
+		if (node.type === "BinaryExpression" && node.operator === "===") {
+			// get(cell) === itemParam
+			if (
+				node.left === getCallNode &&
+				node.right.type === "Identifier" &&
+				node.right.name === itemParam
+			) {
+				return { comparisonNode: node };
+			}
+			// itemParam === get(cell)
+			if (
+				node.right === getCallNode &&
+				node.left.type === "Identifier" &&
+				node.left.name === itemParam
+			) {
+				return { comparisonNode: node };
+			}
+		}
+
+		// Recurse into child nodes
+		for (const key of Object.keys(node)) {
+			if (key === "start" || key === "end" || key === "type" || key === "loc" || key === "extra")
+				continue;
+			const child = node[key];
+			if (child && typeof child === "object") {
+				if (Array.isArray(child)) {
+					for (const c of child) {
+						const result = find(c);
+						if (result) return result;
+					}
+				} else if (child.type) {
+					const result = find(child);
+					if (result) return result;
+				}
+			}
+		}
+		return null;
+	}
+
+	return find(fullExpression);
+}
+
 /**
  * Generate expression code from AST node using original source
  */

package/src/compiler/transforms/inline-get.js

@@ -458,7 +458,7 @@ function findBlockInfo(ast, code) {
  * Returns a map from cell code -> array of callback info
  */
 function findBindCallbacks(ast, code) {
-	// Map: cellCode -> [{ callbackBody, elementVars, refNum, paramName, statementStart, statementEnd, hasClosureVars }]
+	// Map: cellCode -> [{ callbackBody, elementVars, refNum, paramName, statementStart, statementEnd, hasClosureVars, cleanupVarName }]
 	const bindCallbacks = new Map();
 	// Track ref numbers per cell
 	const refCounters = new Map();
@@ -469,7 +469,7 @@ function findBindCallbacks(ast, code) {
 	 * @param {number} stmtStart - Start position of containing statement
 	 * @param {number} stmtEnd - End position of containing statement
 	 */
-	function processBindCall(bindExpr, stmtStart, stmtEnd) {
+	function processBindCall(bindExpr, stmtStart, stmtEnd, cleanupVarName = null) {
 		const cellArg = bindExpr.arguments[0];
 		const callbackArg = bindExpr.arguments[1];
 		if (!cellArg || !callbackArg) return;
@@ -519,6 +519,7 @@ function findBindCallbacks(ast, code) {
 			statementStart: stmtStart,
 			statementEnd: stmtEnd,
 			hasClosureVars,
+			cleanupVarName,
 		});
 	}
 
@@ -533,7 +534,12 @@ function findBindCallbacks(ast, code) {
 		VariableDeclaration(path) {
 			for (const decl of path.node.declarations) {
 				if (decl.init && isBindCall(decl.init)) {
-					processBindCall(decl.init, path.node.start, path.node.end);
+					processBindCall(
+						decl.init,
+						path.node.start,
+						path.node.end,
+						decl.id.type === "Identifier" ? decl.id.name : null,
+					);
 				}
 			}
 		},
@@ -543,6 +549,35 @@ function findBindCallbacks(ast, code) {
 	return bindCallbacks;
 }
 
+function isCleanupCallStatement(node, cleanupVarNames) {
+	return (
+		node?.type === "ExpressionStatement" &&
+		node.expression?.type === "CallExpression" &&
+		node.expression.callee?.type === "Identifier" &&
+		cleanupVarNames.has(node.expression.callee.name) &&
+		node.expression.arguments.length === 0
+	);
+}
+
+function removeObjectProperty(s, code, propertyNode) {
+	let start = propertyNode.start;
+	let end = propertyNode.end;
+
+	let left = start - 1;
+	while (left >= 0 && /\s/.test(code[left])) left--;
+	if (left >= 0 && code[left] === ",") {
+		start = left;
+	} else {
+		let right = end;
+		while (right < code.length && /\s/.test(code[right])) right++;
+		if (right < code.length && code[right] === ",") {
+			end = right + 1;
+		}
+	}
+
+	s.remove(start, end);
+}
+
 /**
  * Find element variables used in a callback body
  * Looks for element.property = ... patterns
@@ -740,6 +775,7 @@ export function inlineGetCalls(code, filename) {
 
 	// Track bind statements to remove
 	const bindStatementsToRemove = [];
+	const inlinedCleanupVars = new Set();
 
 	// Track roqa imports for removal
 	const importsToRemove = [];
@@ -1108,6 +1144,9 @@ export function inlineGetCalls(code, filename) {
 
 		// Replace bind() call with ref assignment(s)
 		if (refAssignment) {
+			if (callback.cleanupVarName) {
+				inlinedCleanupVars.add(callback.cleanupVarName);
+			}
 			s.overwrite(start, end, refAssignment);
 		} else {
 			// No element vars found - bind() can't be fully inlined
@@ -1117,6 +1156,60 @@ export function inlineGetCalls(code, filename) {
 		}
 	}
 
+	// Remove cleanup calls for bind() subscriptions that were fully inlined away.
+	// If a cleanup block only contains now-removed cleanup calls, drop the cleanup
+	// property entirely so runtime list items don't carry no-op cleanup functions.
+	if (inlinedCleanupVars.size > 0) {
+		const cleanupStatementsToRemove = [];
+		const cleanupPropertiesToRemove = [];
+
+		traverse(ast, {
+			ObjectProperty(path) {
+				const node = path.node;
+				const key = node.key;
+				const isCleanupProperty =
+					(key?.type === "Identifier" && key.name === "cleanup") ||
+					(key?.type === "StringLiteral" && key.value === "cleanup");
+				if (!isCleanupProperty) return;
+
+				const fn = node.value;
+				if (
+					!fn ||
+					(fn.type !== "ArrowFunctionExpression" && fn.type !== "FunctionExpression") ||
+					fn.body?.type !== "BlockStatement"
+				) {
+					return;
+				}
+
+				const statements = fn.body.body;
+				if (statements.length === 0) return;
+
+				const removableStatements = statements.filter((stmt) =>
+					isCleanupCallStatement(stmt, inlinedCleanupVars),
+				);
+				if (removableStatements.length === 0) return;
+
+				if (removableStatements.length === statements.length) {
+					cleanupPropertiesToRemove.push(node);
+					return;
+				}
+
+				cleanupStatementsToRemove.push(...removableStatements);
+			},
+			noScope: true,
+		});
+
+		cleanupStatementsToRemove.sort((a, b) => b.start - a.start);
+		for (const stmt of cleanupStatementsToRemove) {
+			s.remove(stmt.start, stmt.end);
+		}
+
+		cleanupPropertiesToRemove.sort((a, b) => b.start - a.start);
+		for (const property of cleanupPropertiesToRemove) {
+			removeObjectProperty(s, code, property);
+		}
+	}
+
 	// Remove imports that are no longer needed
 	// Collect all imports to remove first
 	// Only remove bind import if ALL bind calls were fully inlined (had element vars and no closure vars)

package/src/runtime/for-block.js

@@ -66,10 +66,13 @@ function lisAlgorithm(arr) {
  * @param {*} value - The data item
  * @param {number} index - Array index
  * @param {Function} renderFn - (anchor, value, index) => { start, end } or just appends nodes
+ * @param {Object} forState - The for loop state (to track cleanup count)
  */
-function createItem(anchor, value, index, renderFn) {
+function createItem(anchor, value, index, renderFn, forState) {
 	// renderFn should return { start, end } nodes for the item
 	const item = renderFn(anchor, value, index);
+	// Track if this item has cleanup for fast-path optimization
+	if (item.cleanup) forState.cleanupCount++;
 	return {
 		s: item, // state: { start, end } - the DOM range for this item
 		v: value,
@@ -101,14 +104,18 @@ function moveItem(item, anchor) {
 
 /**
  * Destroy an item's DOM nodes and run cleanup if present
+ * @param {Object} forState - The for loop state (to track cleanup count)
  */
-function destroyItem(item) {
+function destroyItem(item, forState) {
 	const state = item.s;
 	let node = state.start;
 	const end = state.end;
 
 	// Run cleanup function if the render provided one
-	if (state.cleanup) state.cleanup();
+	if (state.cleanup) {
+		state.cleanup();
+		forState.cleanupCount--;
+	}
 
 	while (node !== null) {
 		const next = node.nextSibling;
@@ -122,11 +129,14 @@ function destroyItem(item) {
  * Fast path: clear all items when going from non-empty to empty
  */
 function reconcileFastClear(anchor, forState, array) {
-	// Run cleanup for all items before clearing DOM
-	const items = forState.items;
-	for (let i = 0; i < items.length; i++) {
-		const state = items[i].s;
-		if (state.cleanup) state.cleanup();
+	// Only run cleanup loop if there are items with cleanup functions
+	if (forState.cleanupCount > 0) {
+		const items = forState.items;
+		for (let i = 0; i < items.length; i++) {
+			const state = items[i].s;
+			if (state.cleanup) state.cleanup();
+		}
+		forState.cleanupCount = 0;
 	}
 
 	const parent_node = anchor.parentNode;
@@ -161,7 +171,7 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 		// Empty -> non-empty: create all
 		if (aLen === 0) {
 			for (; j < bLen; j++) {
-				bItems[j] = createItem(anchor, b[j], j, renderFn);
+				bItems[j] = createItem(anchor, b[j], j, renderFn, forState);
 			}
 			forState.array = b;
 			forState.items = bItems;
@@ -205,14 +215,14 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 				while (j <= bEnd) {
 					bVal = b[j];
 					target = j >= aLen ? anchor : aItems[j].s.start;
-					bItems[j] = createItem(target, bVal, j, renderFn);
+					bItems[j] = createItem(target, bVal, j, renderFn, forState);
 					j++;
 				}
 			}
 		} else if (j > bEnd) {
 			// Only removals
 			while (j <= aEnd) {
-				destroyItem(aItems[j++]);
+				destroyItem(aItems[j++], forState);
 			}
 		} else {
 			// General case: need full reconciliation
@@ -237,7 +247,7 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 								sources[j - bStart] = i + 1;
 								if (fastPathRemoval) {
 									fastPathRemoval = false;
-									while (aStart < i) destroyItem(aItems[aStart++]);
+									while (aStart < i) destroyItem(aItems[aStart++], forState);
 								}
 								if (pos > j) moved = true;
 								else pos = j;
@@ -246,9 +256,9 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 								break;
 							}
 						}
-						if (!fastPathRemoval && j > bEnd) destroyItem(aItems[i]);
+						if (!fastPathRemoval && j > bEnd) destroyItem(aItems[i], forState);
 					} else if (!fastPathRemoval) {
-						destroyItem(aItems[i]);
+						destroyItem(aItems[i], forState);
 					}
 				}
 			} else {
@@ -262,7 +272,7 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 						if (j !== undefined) {
 							if (fastPathRemoval) {
 								fastPathRemoval = false;
-								while (i > aStart) destroyItem(aItems[aStart++]);
+								while (i > aStart) destroyItem(aItems[aStart++], forState);
 							}
 							sources[j - bStart] = i + 1;
 							if (pos > j) moved = true;
@@ -270,10 +280,10 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 							bItems[j] = aItems[i];
 							++patched;
 						} else if (!fastPathRemoval) {
-							destroyItem(aItems[i]);
+							destroyItem(aItems[i], forState);
 						}
 					} else if (!fastPathRemoval) {
-						destroyItem(aItems[i]);
+						destroyItem(aItems[i], forState);
 					}
 				}
 			}
@@ -295,7 +305,7 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 
 					if (sources[i] === 0) {
 						bVal = b[pos];
-						bItems[pos] = createItem(target, bVal, pos, renderFn);
+						bItems[pos] = createItem(target, bVal, pos, renderFn, forState);
 					} else if (j < 0 || i !== seq[j]) {
 						moveItem(bItems[pos], target);
 					} else {
@@ -309,7 +319,7 @@ function reconcileByRef(anchor, forState, b, renderFn) {
 						bVal = b[pos];
 						const nextPos = pos + 1;
 						target = nextPos < bLen ? bItems[nextPos].s.start : anchor;
-						bItems[pos] = createItem(target, bVal, pos, renderFn);
+						bItems[pos] = createItem(target, bVal, pos, renderFn, forState);
 					}
 				}
 			}
@@ -339,6 +349,7 @@ export function forBlock(container, sourceCell, renderFn) {
 	const forState = {
 		array: [],
 		items: [],
+		cleanupCount: 0, // Track items with cleanup for fast-path optimization
 	};
 
 	const doUpdate = () => {
@@ -363,7 +374,7 @@ export function forBlock(container, sourceCell, renderFn) {
 		// Destroy all current items
 		const items = forState.items;
 		for (let i = 0; i < items.length; i++) {
-			destroyItem(items[i]);
+			destroyItem(items[i], forState);
 		}
 		forState.array = [];
 		forState.items = [];