roqa 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -5,6 +5,22 @@ 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.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
+
+- Fixed reactive bindings in `<For>` loops not updating when the bound cell references closure variables from the loop callback (e.g., `class={get(selected) === row.id ? "danger" : ""}`)
+- The compiler now correctly preserves `bind()` calls when the callback body contains closure variables that wouldn't be available at `set()` call sites
+
 ## [0.0.1] - 2026-01-10
 
 ### Added

package/README.md

@@ -2,10 +2,16 @@
 
 Roqa is a compile-time reactive web framework for building user interfaces and applications.
 
-Learn more about it at https://roqa.dev.
-
 ## At a glance
 
+Roqa ships a familiar API and syntax for writing component based web UIs, with a few unique differences.
+
+Under the hood every Roqa component is transformed into unbelievably optimized and performant custom elements & vanilla JavaScript. This means a compiled Roqa component is extremely portable and can be used in any other web framework or web-based environment. Additionally, by default Roqa does not use Shadow DOM, so you won't have to have to fight the styling gods to create beautiful web pages and applications –– you can use any of your favorite styling solutions out of the box.
+
+The reactive primitive of Roqa is a `cell`. It can roughly be thought of as a signal, but at compile time, this "signal" is compiled to an ultra-lightweight plain JavaScript object. A handful of functions (i.e. `get`, `set`, `put`) are provided to manipulate the data in this object and reactive updates are automatically applied after a change is made.
+
+Continue to learn more about Roqa at https://roqa.dev.
+
 ```jsx
 import { defineComponent, cell, get, set } from "roqa";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roqa",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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

@@ -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 }]
+	// Map: cellCode -> [{ callbackBody, elementVars, refNum, paramName, statementStart, statementEnd, hasClosureVars }]
 	const bindCallbacks = new Map();
 	// Track ref numbers per cell
 	const refCounters = new Map();
@@ -495,7 +495,9 @@ function findBindCallbacks(ast, code) {
 			}
 
 			// Find element variables used in the callback (e.g., p_1_text, tr_1)
-			const elementVars = findElementVariables(body);
+			// 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;
@@ -514,6 +516,7 @@ function findBindCallbacks(ast, code) {
 				paramName,
 				statementStart: path.node.start,
 				statementEnd: path.node.end,
+				hasClosureVars,
 			});
 		},
 		noScope: true,
@@ -525,15 +528,44 @@ function findBindCallbacks(ast, code) {
 /**
  * Find element variables used in a callback body
  * Looks for element.property = ... patterns
+ * Also returns closure variables that would prevent inlining
  */
-function findElementVariables(body) {
+function findElementVariables(body, code, paramName, cellCode) {
 	const elementVars = [];
+	const closureVars = new Set();
 	const seen = new Set();
 
+	// Extract the cell's base identifier (e.g., "selected" from "selected" or "row.label" from "row.label")
+	const cellBaseMatch = cellCode.match(/^([a-zA-Z_][a-zA-Z0-9_]*)/);
+	const cellBase = cellBaseMatch ? cellBaseMatch[1] : cellCode;
+
+	// Track identifiers that are used as property names (not variables)
+	const propertyNames = new Set();
+
+	// First pass: identify property names in member expressions
+	function findPropertyNames(node) {
+		if (!node) return;
+		if (node.type === "MemberExpression" && node.property.type === "Identifier" && !node.computed) {
+			// The property is accessed with dot notation, so it's not a variable reference
+			propertyNames.add(node.property);
+		}
+		for (const key of Object.keys(node)) {
+			const child = node[key];
+			if (child && typeof child === "object") {
+				if (Array.isArray(child)) {
+					child.forEach(findPropertyNames);
+				} else if (child.type) {
+					findPropertyNames(child);
+				}
+			}
+		}
+	}
+	findPropertyNames(body);
+
 	function visit(node) {
 		if (!node) return;
 
-		// Look for element.property = ... patterns
+		// Look for element.property = ... patterns (element variable assignments)
 		if (
 			node.type === "AssignmentExpression" &&
 			node.left.type === "MemberExpression" &&
@@ -546,6 +578,57 @@ function findElementVariables(body) {
 			}
 		}
 
+		// Look for identifier.property patterns (potential closure variables)
+		// e.g., row.id, item.name - these are closure variables from forBlock
+		if (node.type === "MemberExpression" && node.object.type === "Identifier") {
+			const varName = node.object.name;
+			// Skip if it's the callback parameter, the cell, or an already identified element var
+			if (varName !== paramName && varName !== cellBase && !seen.has(varName)) {
+				// This could be a closure variable - mark it
+				closureVars.add(varName);
+			}
+		}
+
+		// Also check for standalone identifiers that could be closure variables
+		// But skip identifiers that are property names in member expressions
+		if (node.type === "Identifier" && !propertyNames.has(node)) {
+			const varName = node.name;
+			// Skip common globals and the callback parameter
+			const knownGlobals = new Set([
+				"undefined",
+				"null",
+				"true",
+				"false",
+				"NaN",
+				"Infinity",
+				"console",
+				"window",
+				"document",
+				"Math",
+				"JSON",
+				"Array",
+				"Object",
+				"String",
+				"Number",
+				"Boolean",
+				"Date",
+				"RegExp",
+				"Error",
+				"Promise",
+				"Map",
+				"Set",
+			]);
+			if (
+				varName !== paramName &&
+				varName !== cellBase &&
+				!seen.has(varName) &&
+				!knownGlobals.has(varName)
+			) {
+				// Could be a closure variable
+				closureVars.add(varName);
+			}
+		}
+
 		// Recurse into child nodes
 		for (const key of Object.keys(node)) {
 			const child = node[key];
@@ -560,7 +643,13 @@ function findElementVariables(body) {
 	}
 
 	visit(body);
-	return elementVars;
+
+	// Remove element vars from closure vars (they're defined in the same scope level)
+	for (const { varName } of elementVars) {
+		closureVars.delete(varName);
+	}
+
+	return { elementVars, closureVars };
 }
 
 /**
@@ -811,8 +900,12 @@ export function inlineGetCalls(code, filename) {
 				}
 
 				if (callbacks && callbacks.length > 0) {
-					// Filter to only include callbacks that have element vars (were fully inlined)
-					const inlinableCallbacks = callbacks.filter((cb) => cb.elementVars.length > 0);
+					// Filter to only include callbacks that:
+					// 1. Have element vars (can update DOM elements)
+					// 2. Don't have closure vars (can be inlined at set() call sites)
+					const inlinableCallbacks = callbacks.filter(
+						(cb) => cb.elementVars.length > 0 && !cb.hasClosureVars,
+					);
 					return inlinableCallbacks
 						.map((cb) => {
 							let body = transformCallbackBody(
@@ -927,11 +1020,15 @@ export function inlineGetCalls(code, filename) {
 			const blockUpdate = call.blockVar ? `${call.blockVar}.update();` : "";
 
 			// Check if there are non-inlined bind callbacks for this cell
-			// These are callbacks without element vars that were kept as runtime bind() calls
+			// These are callbacks that:
+			// 1. Have no element vars (can't update DOM), OR
+			// 2. Have closure vars (can't be inlined at set() call sites)
 			let hasNonInlinedBinds = false;
 			const cellCallbacks = bindCallbacks.get(call.cellCode);
 			if (cellCallbacks) {
-				hasNonInlinedBinds = cellCallbacks.some((cb) => cb.elementVars.length === 0);
+				hasNonInlinedBinds = cellCallbacks.some(
+					(cb) => cb.elementVars.length === 0 || cb.hasClosureVars,
+				);
 			}
 
 			// Check if this cell is a source for forBlock/showBlock
@@ -978,6 +1075,13 @@ export function inlineGetCalls(code, filename) {
 	bindStatementsToRemove.sort((a, b) => b.start - a.start);
 
 	for (const { start, end, cellCode, callback } of bindStatementsToRemove) {
+		// Don't inline bind() calls that have closure variables (e.g., from forBlock item parameter)
+		// These callbacks capture variables like `row` that won't be in scope at set() call sites
+		if (callback.hasClosureVars) {
+			// Keep the bind() call - runtime handles execution
+			continue;
+		}
+
 		// Generate ref assignment for each element variable
 		let refAssignment = "";
 		for (const { varName } of callback.elementVars) {
@@ -997,8 +1101,10 @@ export function inlineGetCalls(code, filename) {
 
 	// 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)
-	const allBindsInlined = bindStatementsToRemove.every((b) => b.callback.elementVars.length > 0);
+	// Only remove bind import if ALL bind calls were fully inlined (had element vars and no closure vars)
+	const allBindsInlined = bindStatementsToRemove.every(
+		(b) => b.callback.elementVars.length > 0 && !b.callback.hasClosureVars,
+	);
 	const shouldRemoveBind = bindStatementsToRemove.length > 0 && allBindsInlined;
 	const importsToActuallyRemove = importsToRemove.filter(({ name }) => {
 		return (

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);