roqa 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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.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
+
+- Fixed critical memory leak when using `<For>` with reactive bindings to cells outside the loop (e.g., `class={get(selected) === row.id ? "danger" : ""}`)
+  - Subscriptions to external cells are now properly cleaned up when items are removed or the array is cleared
+  - `reconcileFastClear` now calls cleanup functions before clearing DOM
+  - The compiler now generates cleanup functions that capture `bind()` unsubscribe calls inside `<For>` and `<Show>` blocks
+
 ## [0.0.2] - 2026-01-10
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roqa",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Roqa is a reactive UI framework",
   "keywords": [
     "UI",

package/src/compiler/codegen.js

@@ -701,16 +701,38 @@ function generateForBlock(
 	// Track ref counts per cell for numbered refs (ref_1, ref_2, etc.)
 	const cellRefCounts = new Map();
 
+	// Track cleanup functions needed from bind() calls
+	const cleanupVars = [];
+
 	// Bindings inside for block
 	for (const binding of processedBindings) {
-		const bindCode = generateBinding(code, binding, usedImports, itemParam, true, cellRefCounts);
+		const { bindCode, cleanupVar } = generateBindingWithCleanup(
+			code,
+			binding,
+			usedImports,
+			itemParam,
+			true,
+			cellRefCounts,
+			cleanupVars.length,
+		);
 		lines.push(`      ${bindCode}`);
+		if (cleanupVar) {
+			cleanupVars.push(cleanupVar);
+		}
 	}
 
-	// Insert before anchor and return range
+	// Insert before anchor and return range (with cleanup if needed)
 	lines.push("");
 	lines.push(`      anchor.before(${firstElementVar});`);
-	lines.push(`      return { start: ${firstElementVar}, end: ${firstElementVar} };`);
+
+	if (cleanupVars.length > 0) {
+		const cleanupCalls = cleanupVars.map((v) => `${v}()`).join("; ");
+		lines.push(
+			`      return { start: ${firstElementVar}, end: ${firstElementVar}, cleanup: () => { ${cleanupCalls}; } };`,
+		);
+	} else {
+		lines.push(`      return { start: ${firstElementVar}, end: ${firstElementVar} };`);
+	}
 	lines.push(`    });`);
 
 	return lines.join("\n");
@@ -861,16 +883,38 @@ function generateShowBlock(code, showBlock, nameGen, templateRegistry, usedImpor
 	// Track ref counts per cell for numbered refs (ref_1, ref_2, etc.)
 	const cellRefCounts = new Map();
 
+	// Track cleanup functions needed from bind() calls
+	const cleanupVars = [];
+
 	// Bindings inside show block
 	for (const binding of processedBindings) {
-		const bindCode = generateBinding(code, binding, usedImports, null, true, cellRefCounts);
+		const { bindCode, cleanupVar } = generateBindingWithCleanup(
+			code,
+			binding,
+			usedImports,
+			null,
+			true,
+			cellRefCounts,
+			cleanupVars.length,
+		);
 		lines.push(`      ${bindCode}`);
+		if (cleanupVar) {
+			cleanupVars.push(cleanupVar);
+		}
 	}
 
-	// Insert before anchor and return range
+	// Insert before anchor and return range (with cleanup if needed)
 	lines.push("");
 	lines.push(`      anchor.before(${firstElementVar});`);
-	lines.push(`      return { start: ${firstElementVar}, end: ${firstElementVar} };`);
+
+	if (cleanupVars.length > 0) {
+		const cleanupCalls = cleanupVars.map((v) => `${v}()`).join("; ");
+		lines.push(
+			`      return { start: ${firstElementVar}, end: ${firstElementVar}, cleanup: () => { ${cleanupCalls}; } };`,
+		);
+	} else {
+		lines.push(`      return { start: ${firstElementVar}, end: ${firstElementVar} };`);
+	}
 	lines.push(`    }${depsCode});`);
 
 	return lines.join("\n");
@@ -919,10 +963,83 @@ function generateBinding(
 	itemParam = null,
 	insideForBlock = false,
 	cellRefCounts = null,
+) {
+	// At component level (not inside forBlock), we don't need cleanup tracking
+	// because cleanup is handled by the component's disconnectedCallback
+	const result = generateBindingCore(
+		code,
+		binding,
+		usedImports,
+		itemParam,
+		insideForBlock,
+		cellRefCounts,
+		false, // Don't generate cleanup variables
+		0,
+	);
+	return result.bindCode;
+}
+
+/**
+ * Generate code for a binding, returning both the code and any cleanup variable
+ * Used inside forBlock/showBlock where cleanup is needed on item destruction
+ * @param {string} code - Original source code
+ * @param {object} binding - Binding info
+ * @param {Set} usedImports - Set of imports to track
+ * @param {string} itemParam - Item parameter name (for forBlock context)
+ * @param {boolean} insideForBlock - Whether we're inside a forBlock callback
+ * @param {Map} cellRefCounts - Map to track ref counts per cell (for numbered refs)
+ * @param {number} cleanupIndex - Index for naming cleanup variables
+ * @returns {{ bindCode: string, cleanupVar: string|null }}
+ */
+function generateBindingWithCleanup(
+	code,
+	binding,
+	usedImports,
+	itemParam = null,
+	insideForBlock = false,
+	cellRefCounts = null,
+	cleanupIndex = 0,
+) {
+	return generateBindingCore(
+		code,
+		binding,
+		usedImports,
+		itemParam,
+		insideForBlock,
+		cellRefCounts,
+		true, // Generate cleanup variables
+		cleanupIndex,
+	);
+}
+
+/**
+ * Core binding generation logic
+ * @param {string} code - Original source code
+ * @param {object} binding - Binding info
+ * @param {Set} usedImports - Set of imports to track
+ * @param {string} itemParam - Item parameter name (for forBlock context)
+ * @param {boolean} insideForBlock - Whether we're inside a forBlock callback
+ * @param {Map} cellRefCounts - Map to track ref counts per cell (for numbered refs)
+ * @param {boolean} generateCleanup - Whether to generate cleanup variables for bind() calls
+ * @param {number} cleanupIndex - Index for naming cleanup variables
+ * @returns {{ bindCode: string, cleanupVar: string|null }}
+ */
+function generateBindingCore(
+	code,
+	binding,
+	usedImports,
+	itemParam = null,
+	insideForBlock = false,
+	cellRefCounts = null,
+	generateCleanup = false,
+	cleanupIndex = 0,
 ) {
 	// Handle prop bindings (for custom elements)
 	if (binding.type === "prop") {
-		return generatePropBinding(code, binding, usedImports, insideForBlock);
+		return {
+			bindCode: generatePropBinding(code, binding, usedImports, insideForBlock),
+			cleanupVar: null,
+		};
 	}
 
 	const {
@@ -940,7 +1057,16 @@ function generateBinding(
 
 	// Handle new contentParts format (concatenated text content)
 	if (contentParts) {
-		return generateContentPartsBinding(code, binding, usedImports, insideForBlock, cellRefCounts);
+		return {
+			bindCode: generateContentPartsBinding(
+				code,
+				binding,
+				usedImports,
+				insideForBlock,
+				cellRefCounts,
+			),
+			cleanupVar: null,
+		};
 	}
 
 	// Build prefix string if we have static text before the dynamic expression
@@ -957,9 +1083,15 @@ function generateBinding(
 		// Static assignment
 		const exprCode = generateExpr(code, fullExpression);
 		if (needsSetAttribute) {
-			return `${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${exprCode});`;
+			return {
+				bindCode: `${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${exprCode});`,
+				cleanupVar: null,
+			};
 		}
-		return `${targetVar}.${targetProperty} = ${prefixCode}${exprCode};`;
+		return {
+			bindCode: `${targetVar}.${targetProperty} = ${prefixCode}${exprCode};`,
+			cleanupVar: null,
+		};
 	}
 
 	// Generate the cell argument code
@@ -982,8 +1114,11 @@ function generateBinding(
 
 		// Emit: initial value assignment + ref storage on cell
 		// cell.ref_N = element;
-		return `${targetVar}.${targetProperty} = ${initialExprCode};
-${indent}${cellCode}.${CONSTANTS.REF_PREFIX}${refNum} = ${targetVar};`;
+		return {
+			bindCode: `${targetVar}.${targetProperty} = ${initialExprCode};
+${indent}${cellCode}.${CONSTANTS.REF_PREFIX}${refNum} = ${targetVar};`,
+			cleanupVar: null,
+		};
 	}
 
 	// Fall back to bind() for complex bindings (or SVG attributes)
@@ -1000,18 +1135,50 @@ ${indent}${cellCode}.${CONSTANTS.REF_PREFIX}${refNum} = ${targetVar};`;
 		bindExprCode = "v";
 	}
 
-	// Set initial value AND bind for updates
+	// Determine indentation based on context
+	const indent = insideForBlock ? "      " : "    ";
+
+	// Generate with or without cleanup variable capture
+	if (generateCleanup) {
+		const cleanupVar = `_cleanup_${cleanupIndex}`;
+
+		if (needsSetAttribute) {
+			return {
+				bindCode: `${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${initialExprCode});
+${indent}const ${cleanupVar} = bind(${cellCode}, (v) => {
+${indent}  ${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${bindExprCode});
+${indent}});`,
+				cleanupVar,
+			};
+		}
+
+		return {
+			bindCode: `${targetVar}.${targetProperty} = ${prefixCode}${initialExprCode};
+${indent}const ${cleanupVar} = bind(${cellCode}, (v) => {
+${indent}  ${targetVar}.${targetProperty} = ${prefixCode}${bindExprCode};
+${indent}});`,
+			cleanupVar,
+		};
+	}
+
+	// No cleanup needed - just generate the bind without capturing
 	if (needsSetAttribute) {
-		return `${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${initialExprCode});
-    bind(${cellCode}, (v) => {
-      ${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${bindExprCode});
-    });`;
+		return {
+			bindCode: `${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${initialExprCode});
+${indent}bind(${cellCode}, (v) => {
+${indent}  ${targetVar}.setAttribute("${targetProperty}", ${prefixCode}${bindExprCode});
+${indent}});`,
+			cleanupVar: null,
+		};
 	}
 
-	return `${targetVar}.${targetProperty} = ${prefixCode}${initialExprCode};
-    bind(${cellCode}, (v) => {
-      ${targetVar}.${targetProperty} = ${prefixCode}${bindExprCode};
-    });`;
+	return {
+		bindCode: `${targetVar}.${targetProperty} = ${prefixCode}${initialExprCode};
+${indent}bind(${cellCode}, (v) => {
+${indent}  ${targetVar}.${targetProperty} = ${prefixCode}${bindExprCode};
+${indent}});`,
+		cleanupVar: null,
+	};
 }
 
 /**

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

@@ -463,61 +463,79 @@ function findBindCallbacks(ast, code) {
 	// 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) {
+		const cellArg = bindExpr.arguments[0];
+		const callbackArg = bindExpr.arguments[1];
+		if (!cellArg || !callbackArg) return;
+
+		// Get callback info
+		if (
+			callbackArg.type !== "ArrowFunctionExpression" &&
+			callbackArg.type !== "FunctionExpression"
+		) {
+			return;
+		}
 
-			const cellArg = expr.arguments[0];
-			const callbackArg = expr.arguments[1];
-			if (!cellArg || !callbackArg) return;
+		const cellCode = code.slice(cellArg.start, cellArg.end);
+		const paramName = callbackArg.params[0]?.name || "v";
 
-			// Get callback info
-			if (
-				callbackArg.type !== "ArrowFunctionExpression" &&
-				callbackArg.type !== "FunctionExpression"
-			) {
-				return;
-			}
+		// 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);
+		}
 
-			const cellCode = code.slice(cellArg.start, cellArg.end);
-			const paramName = callbackArg.params[0]?.name || "v";
+		// 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 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 or create ref number for this cell
+		const currentRef = refCounters.get(cellCode) || 0;
+		const refNum = currentRef + 1;
+		refCounters.set(cellCode, refNum);
 
-			// 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;
+		// Store bind callback info
+		if (!bindCallbacks.has(cellCode)) {
+			bindCallbacks.set(cellCode, []);
+		}
 
-			// Get or create ref number for this cell
-			const currentRef = refCounters.get(cellCode) || 0;
-			const refNum = currentRef + 1;
-			refCounters.set(cellCode, refNum);
+		bindCallbacks.get(cellCode).push({
+			callbackBody: bodyCode,
+			elementVars,
+			refNum,
+			paramName,
+			statementStart: stmtStart,
+			statementEnd: stmtEnd,
+			hasClosureVars,
+		});
+	}
 
-			// Store bind callback info
-			if (!bindCallbacks.has(cellCode)) {
-				bindCallbacks.set(cellCode, []);
+	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);
+				}
 			}
-
-			bindCallbacks.get(cellCode).push({
-				callbackBody: bodyCode,
-				elementVars,
-				refNum,
-				paramName,
-				statementStart: path.node.start,
-				statementEnd: path.node.end,
-				hasClosureVars,
-			});
 		},
 		noScope: true,
 	});

package/src/runtime/for-block.js

@@ -122,6 +122,13 @@ 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();
+	}
+
 	const parent_node = anchor.parentNode;
 	parent_node.textContent = "";
 	parent_node.append(anchor);