roqa 0.0.5 → 0.0.7

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.7] - 2026-03-31
+
+### Fixed
+
+- Fixed broken npm package publish — dependencies now correctly resolved at publish time using `pnpm publish` (previously `catalog:` version references were published verbatim, making the package uninstallable via npm/yarn)
+
+## [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

package/package.json

@@ -1,77 +1,77 @@
 {
-	"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"
-	}
-}
+  "name": "roqa",
+  "version": "0.0.7",
+  "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"
+  }
+}

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
  */