roqa 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -5,6 +5,26 @@ 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.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
+
+- Fixed `set()` calls not notifying subscribers when using cleanup-captured `bind()` calls inside `<For>` and `<Show>` blocks
+  - The `findBindCallbacks` function in the inliner now correctly detects `bind()` calls in variable declarations (`const _cleanup_N = bind(...)`) in addition to expression statements
+  - This ensures the effect loop is generated for cells with non-inlined bind callbacks
+
 ## [0.0.3] - 2026-01-10
 
 ### Fixed

package/package.json

@@ -1,77 +1,77 @@
 {
-  "name": "roqa",
-  "version": "0.0.3",
-  "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.5",
+	"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/transforms/inline-get.js

@@ -458,66 +458,90 @@ 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();
 
-	traverse(ast, {
-		ExpressionStatement(path) {
-			const expr = path.node.expression;
-			if (!isBindCall(expr)) return;
+	/**
+	 * Process a bind() call expression and add to bindCallbacks
+	 * @param {object} bindExpr - The bind() CallExpression node
+	 * @param {number} stmtStart - Start position of containing statement
+	 * @param {number} stmtEnd - End position of containing statement
+	 */
+	function processBindCall(bindExpr, stmtStart, stmtEnd, cleanupVarName = null) {
+		const cellArg = bindExpr.arguments[0];
+		const callbackArg = bindExpr.arguments[1];
+		if (!cellArg || !callbackArg) return;
 
-			const cellArg = expr.arguments[0];
-			const callbackArg = expr.arguments[1];
-			if (!cellArg || !callbackArg) return;
+		// Get callback info
+		if (
+			callbackArg.type !== "ArrowFunctionExpression" &&
+			callbackArg.type !== "FunctionExpression"
+		) {
+			return;
+		}
 
-			// Get callback info
-			if (
-				callbackArg.type !== "ArrowFunctionExpression" &&
-				callbackArg.type !== "FunctionExpression"
-			) {
-				return;
-			}
+		const cellCode = code.slice(cellArg.start, cellArg.end);
+		const paramName = callbackArg.params[0]?.name || "v";
 
-			const cellCode = code.slice(cellArg.start, cellArg.end);
-			const paramName = callbackArg.params[0]?.name || "v";
+		// Get the callback body
+		const body = callbackArg.body;
+		let bodyCode;
+		if (body.type === "BlockStatement") {
+			// Extract statements from block, removing braces
+			bodyCode = code.slice(body.start + 1, body.end - 1).trim();
+		} else {
+			// Expression body
+			bodyCode = code.slice(body.start, body.end);
+		}
 
-			// Get the callback body
-			const body = callbackArg.body;
-			let bodyCode;
-			if (body.type === "BlockStatement") {
-				// Extract statements from block, removing braces
-				bodyCode = code.slice(body.start + 1, body.end - 1).trim();
-			} else {
-				// Expression body
-				bodyCode = code.slice(body.start, body.end);
-			}
+		// Find element variables used in the callback (e.g., p_1_text, tr_1)
+		// Also detect closure variables that would prevent inlining
+		const { elementVars, closureVars } = findElementVariables(body, code, paramName, cellCode);
+		const hasClosureVars = closureVars.size > 0;
 
-			// Find element variables used in the callback (e.g., p_1_text, tr_1)
-			// Also detect closure variables that would prevent inlining
-			const { elementVars, closureVars } = findElementVariables(body, code, paramName, cellCode);
-			const hasClosureVars = closureVars.size > 0;
+		// Get or create ref number for this cell
+		const currentRef = refCounters.get(cellCode) || 0;
+		const refNum = currentRef + 1;
+		refCounters.set(cellCode, refNum);
 
-			// Get or create ref number for this cell
-			const currentRef = refCounters.get(cellCode) || 0;
-			const refNum = currentRef + 1;
-			refCounters.set(cellCode, refNum);
+		// Store bind callback info
+		if (!bindCallbacks.has(cellCode)) {
+			bindCallbacks.set(cellCode, []);
+		}
 
-			// Store bind callback info
-			if (!bindCallbacks.has(cellCode)) {
-				bindCallbacks.set(cellCode, []);
-			}
+		bindCallbacks.get(cellCode).push({
+			callbackBody: bodyCode,
+			elementVars,
+			refNum,
+			paramName,
+			statementStart: stmtStart,
+			statementEnd: stmtEnd,
+			hasClosureVars,
+			cleanupVarName,
+		});
+	}
 
-			bindCallbacks.get(cellCode).push({
-				callbackBody: bodyCode,
-				elementVars,
-				refNum,
-				paramName,
-				statementStart: path.node.start,
-				statementEnd: path.node.end,
-				hasClosureVars,
-			});
+	traverse(ast, {
+		// Handle: bind(cell, callback);
+		ExpressionStatement(path) {
+			const expr = path.node.expression;
+			if (!isBindCall(expr)) return;
+			processBindCall(expr, path.node.start, path.node.end);
+		},
+		// Handle: const _cleanup_N = bind(cell, callback);
+		VariableDeclaration(path) {
+			for (const decl of path.node.declarations) {
+				if (decl.init && isBindCall(decl.init)) {
+					processBindCall(
+						decl.init,
+						path.node.start,
+						path.node.end,
+						decl.id.type === "Identifier" ? decl.id.name : null,
+					);
+				}
+			}
 		},
 		noScope: true,
 	});
@@ -525,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
@@ -722,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 = [];
@@ -1090,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
@@ -1099,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 = [];