roqa 0.0.1

package/src/compiler/index.js

@@ -0,0 +1,47 @@
+import { generateOutput } from "./codegen.js";
+import { parse } from "./parser.js";
+import { inlineGetCalls } from "./transforms/inline-get.js";
+import { validateNoCustomComponents } from "./transforms/validate.js";
+
+/**
+ * Main entry point for the Roqa JSX compiler
+ *
+ * Compilation pipeline:
+ * 1. Parse JSX source code into AST
+ * 2. Validate (no unsupported PascalCase components)
+ * 3. Generate output code with template extraction, event transforms, and bindings
+ * 4. Inline get() calls to direct property access (get(x) -> x.v)
+ *
+ * @param {string} code - Source code to compile
+ * @param {string} filename - Source filename for error messages and source maps
+ * @returns {{ code: string, map: object }} - Compiled code and source map
+ */
+export function compile(code, filename) {
+	// Step 1: Parse
+	const ast = parse(code, filename);
+
+	// Step 2: Validate (after parsing, before transforms)
+	// This checks for unsupported PascalCase components
+	// Note: <For> is handled specially in codegen, so it won't trigger validation error
+	validateNoCustomComponents(ast);
+
+	// Step 3: Generate output
+	// This handles:
+	// - Template extraction and deduplication
+	// - <For> component transformation
+	// - Event handler transformation
+	// - Reactive binding detection (get() -> bind())
+	const result = generateOutput(code, ast, filename);
+
+	// Step 4: Inline get() calls to direct property access
+	// This optimizes get(cell) to cell.v, avoiding function call overhead
+	const inlined = inlineGetCalls(result.code, filename);
+
+	return inlined;
+}
+
+// Re-export for direct usage if needed
+export { parse } from "./parser.js";
+export { validateNoCustomComponents } from "./transforms/validate.js";
+export { generateOutput } from "./codegen.js";
+export { inlineGetCalls } from "./transforms/inline-get.js";

package/src/compiler/parser.js

@@ -0,0 +1,197 @@
+import * as parser from "@babel/parser";
+
+/**
+ * Parse JSX source code into an AST
+ * @param {string} code - Source code to parse
+ * @param {string} filename - Source filename for error messages
+ * @returns {import("@babel/types").File} - Babel AST
+ */
+export function parse(code, filename) {
+	const isTypeScript = filename && (filename.endsWith(".tsx") || filename.endsWith(".ts"));
+	const plugins = isTypeScript ? ["jsx", "typescript"] : ["jsx"];
+
+	return parser.parse(code, {
+		sourceType: "module",
+		plugins,
+		sourceFilename: filename,
+	});
+}
+
+/**
+ * Check if a JSX element is a control flow component (<For>, <Show>)
+ * @param {import("@babel/types").JSXElement} node
+ * @returns {boolean}
+ */
+export function isControlFlowComponent(node) {
+	const name = getJSXElementName(node);
+	return name === "For" || name === "Show";
+}
+
+/**
+ * Check if a JSX element is the <For> component
+ * @param {import("@babel/types").JSXElement} node
+ * @returns {boolean}
+ */
+export function isForComponent(node) {
+	return getJSXElementName(node) === "For";
+}
+
+/**
+ * Check if a JSX element is the <Show> component
+ * @param {import("@babel/types").JSXElement} node
+ * @returns {boolean}
+ */
+export function isShowComponent(node) {
+	return getJSXElementName(node) === "Show";
+}
+
+/**
+ * Check if a string is PascalCase (starts with uppercase)
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function isPascalCase(name) {
+	return /^[A-Z]/.test(name);
+}
+
+/**
+ * Get the name of a JSX element
+ * @param {import("@babel/types").JSXElement} node
+ * @returns {string|null}
+ */
+export function getJSXElementName(node) {
+	const openingElement = node.openingElement;
+	if (!openingElement) return null;
+
+	const nameNode = openingElement.name;
+
+	// <div>, <For>, <my-component>
+	if (nameNode.type === "JSXIdentifier") {
+		return nameNode.name;
+	}
+
+	// <Foo.Bar> - member expression
+	if (nameNode.type === "JSXMemberExpression") {
+		return getMemberExpressionName(nameNode);
+	}
+
+	return null;
+}
+
+/**
+ * Get the full name from a JSXMemberExpression (Foo.Bar.Baz)
+ * @param {import("@babel/types").JSXMemberExpression} node
+ * @returns {string}
+ */
+function getMemberExpressionName(node) {
+	const parts = [];
+	let current = node;
+
+	while (current.type === "JSXMemberExpression") {
+		parts.unshift(current.property.name);
+		current = current.object;
+	}
+
+	if (current.type === "JSXIdentifier") {
+		parts.unshift(current.name);
+	}
+
+	return parts.join(".");
+}
+
+/**
+ * Extract attributes from a JSX opening element
+ * @param {import("@babel/types").JSXOpeningElement} openingElement
+ * @returns {Map<string, import("@babel/types").Node>}
+ */
+export function extractJSXAttributes(openingElement) {
+	const attrs = new Map();
+
+	for (const attr of openingElement.attributes) {
+		if (attr.type === "JSXAttribute") {
+			const name = attr.name.name;
+			// Value can be: StringLiteral, JSXExpressionContainer, or null (boolean true)
+			attrs.set(name, attr.value);
+		} else if (attr.type === "JSXSpreadAttribute") {
+			// Mark spread attributes specially
+			attrs.set("...", attr.argument);
+		}
+	}
+
+	return attrs;
+}
+
+/**
+ * Check if a node is a JSX element
+ * @param {import("@babel/types").Node} node
+ * @returns {boolean}
+ */
+export function isJSXElement(node) {
+	return node && node.type === "JSXElement";
+}
+
+/**
+ * Check if a node is a JSX fragment
+ * @param {import("@babel/types").Node} node
+ * @returns {boolean}
+ */
+export function isJSXFragment(node) {
+	return node && node.type === "JSXFragment";
+}
+
+/**
+ * Check if a node is JSX text
+ * @param {import("@babel/types").Node} node
+ * @returns {boolean}
+ */
+export function isJSXText(node) {
+	return node && node.type === "JSXText";
+}
+
+/**
+ * Check if a node is a JSX expression container
+ * @param {import("@babel/types").Node} node
+ * @returns {boolean}
+ */
+export function isJSXExpressionContainer(node) {
+	return node && node.type === "JSXExpressionContainer";
+}
+
+/**
+ * Get children of a JSX element, filtering out empty text nodes
+ * @param {import("@babel/types").JSXElement} node
+ * @returns {import("@babel/types").Node[]}
+ */
+export function getJSXChildren(node) {
+	return node.children.filter((child) => {
+		// Filter out whitespace-only text nodes
+		if (child.type === "JSXText") {
+			return child.value.trim().length > 0;
+		}
+		return true;
+	});
+}
+
+/**
+ * Check if a CallExpression is a get() call
+ * @param {import("@babel/types").Node} node
+ * @returns {boolean}
+ */
+export function isGetCall(node) {
+	return (
+		node &&
+		node.type === "CallExpression" &&
+		node.callee.type === "Identifier" &&
+		node.callee.name === "get"
+	);
+}
+
+/**
+ * Extract the cell argument from a get() call
+ * @param {import("@babel/types").CallExpression} node
+ * @returns {import("@babel/types").Node|null}
+ */
+export function extractGetCellArg(node) {
+	if (!isGetCall(node)) return null;
+	return node.arguments[0] || null;
+}

package/src/compiler/transforms/bind-detector.js

@@ -0,0 +1,264 @@
+import { isGetCall, extractGetCellArg } from "../parser.js";
+import { traverse } from "../utils.js";
+
+/**
+ * Auto-detect get() calls in JSX expressions and generate bind() wrappers
+ *
+ * Input JSX:
+ *   <tr class={get(row.isSelected) ? "danger" : ""}>{get(row.label)}</tr>
+ *
+ * Output:
+ *   bind(row.isSelected, (v) => { tr_1.className = v ? "danger" : ""; });
+ *   bind(row.label, (v) => { a_1_text.nodeValue = v; });
+ */
+
+/**
+ * @typedef {Object} BindingInfo
+ * @property {import("@babel/types").Node} cellArg - The cell argument (e.g., row.label)
+ * @property {import("@babel/types").Node} fullExpression - The complete expression containing get()
+ * @property {string} targetVar - Variable name of the DOM element/text node
+ * @property {string} targetProperty - Property to update (nodeValue, className, etc.)
+ * @property {"text"|"attribute"} bindingType - Type of binding
+ * @property {string} attrName - Original attribute name (for attribute bindings)
+ */
+
+/**
+ * Analyze an expression for get() calls
+ * @param {import("@babel/types").Node} expression - The expression to analyze
+ * @returns {GetCallInfo[]} - All get() calls found in the expression
+ *
+ * @typedef {Object} GetCallInfo
+ * @property {import("@babel/types").Node} cellArg - The cell reference (e.g., row.label)
+ * @property {import("@babel/types").CallExpression} callNode - The get() call node
+ * @property {boolean} isOnlyExpression - Whether this get() is the entire expression
+ */
+export function findGetCalls(expression) {
+	const getCalls = [];
+
+	// Simple case: expression IS a get() call
+	if (isGetCall(expression)) {
+		getCalls.push({
+			cellArg: extractGetCellArg(expression),
+			callNode: expression,
+			isOnlyExpression: true,
+		});
+		return getCalls;
+	}
+
+	// Complex case: get() is somewhere inside the expression
+	// Use Babel traverse to find all get() calls
+	const visitedNodes = new Set();
+
+	// Create a mini AST wrapper for traverse
+	const wrapper = {
+		type: "Program",
+		body: [
+			{
+				type: "ExpressionStatement",
+				expression: expression,
+			},
+		],
+	};
+
+	traverse(wrapper, {
+		CallExpression(path) {
+			const node = path.node;
+			if (visitedNodes.has(node)) return;
+			visitedNodes.add(node);
+
+			if (isGetCall(node)) {
+				getCalls.push({
+					cellArg: extractGetCellArg(node),
+					callNode: node,
+					isOnlyExpression: false,
+				});
+			}
+		},
+		noScope: true,
+	});
+
+	return getCalls;
+}
+
+/**
+ * Process bindings from template extraction and generate bind() info
+ * @param {Array} bindings - Bindings from jsx-to-template
+ * @param {string} code - Original source code
+ * @returns {ProcessedBinding[]}
+ *
+ * @typedef {Object} ProcessedBinding
+ * @property {string} targetVar - Variable name of the target element
+ * @property {string} targetProperty - Property to update
+ * @property {import("@babel/types").Node} cellArg - Cell to bind to
+ * @property {import("@babel/types").Node} fullExpression - Full expression for the update callback
+ * @property {boolean} needsTransform - Whether to transform get(cell) to v in callback
+ * @property {Array} contentParts - Array of content parts (static/dynamic) for concatenated text
+ */
+export function processBindings(bindings, code) {
+	const processed = [];
+
+	for (const binding of bindings) {
+		const { type, varName } = binding;
+
+		// Handle prop bindings (for custom elements)
+		if (type === "prop") {
+			const { propName, expression, isStatic } = binding;
+
+			// Check if expression is a string literal (static prop)
+			if (isStatic || expression.type === "StringLiteral") {
+				processed.push({
+					type: "prop",
+					targetVar: varName,
+					propName,
+					expression: expression,
+					isStatic: true,
+				});
+				continue;
+			}
+
+			// Find get() calls in the expression
+			const getCalls = findGetCalls(expression);
+
+			if (getCalls.length === 0) {
+				// No get() calls - static expression
+				processed.push({
+					type: "prop",
+					targetVar: varName,
+					propName,
+					fullExpression: expression,
+					isStatic: true,
+				});
+				continue;
+			}
+
+			// Reactive prop
+			for (const getCall of getCalls) {
+				processed.push({
+					type: "prop",
+					targetVar: varName,
+					propName,
+					cellArg: getCall.cellArg,
+					fullExpression: expression,
+					needsTransform: !getCall.isOnlyExpression,
+					isStatic: false,
+					getCallNode: getCall.callNode,
+				});
+			}
+			continue;
+		}
+
+		// Handle new contentParts format for text bindings
+		if (type === "text" && binding.contentParts) {
+			const { textVarName, contentParts } = binding;
+
+			// Collect all get() calls from all dynamic parts
+			const allGetCalls = [];
+			for (const part of contentParts) {
+				if (part.type === "dynamic") {
+					const getCalls = findGetCalls(part.expression);
+					for (const getCall of getCalls) {
+						allGetCalls.push({
+							...getCall,
+							partExpression: part.expression,
+						});
+					}
+				}
+			}
+
+			if (allGetCalls.length === 0) {
+				// All static - shouldn't happen but handle it
+				processed.push({
+					targetVar: textVarName,
+					targetProperty: "nodeValue",
+					cellArg: null,
+					fullExpression: null,
+					contentParts,
+					needsTransform: false,
+					isStatic: true,
+				});
+				continue;
+			}
+
+			// Create a binding for each unique cell
+			// Track cells we've already created bindings for (by cell code, not position)
+			const seenCells = new Set();
+
+			for (const getCall of allGetCalls) {
+				// Create a unique key for this cell based on its code representation
+				// Use the actual cell code (e.g., "a", "row.label") not position,
+				// since the same cell may appear multiple times at different positions
+				const cellCode = code.slice(getCall.cellArg.start, getCall.cellArg.end);
+
+				if (seenCells.has(cellCode)) continue;
+				seenCells.add(cellCode);
+
+				processed.push({
+					targetVar: textVarName,
+					targetProperty: "nodeValue",
+					cellArg: getCall.cellArg,
+					fullExpression: null, // Not used with contentParts
+					contentParts,
+					needsTransform: true,
+					isStatic: false,
+					getCallNode: getCall.callNode,
+				});
+			}
+			continue;
+		}
+
+		// Handle legacy single expression format and attribute bindings
+		const { expression, staticPrefix, usesMarker } = binding;
+
+		// Find all get() calls in this expression
+		const getCalls = findGetCalls(expression);
+
+		if (getCalls.length === 0) {
+			// No get() calls - this is a static expression, no binding needed
+			// But we still need to set the initial value
+			processed.push({
+				targetVar: type === "text" ? binding.textVarName : varName,
+				targetProperty: type === "text" ? "nodeValue" : binding.attrName,
+				cellArg: null,
+				fullExpression: expression,
+				needsTransform: false,
+				isStatic: true,
+				staticPrefix: staticPrefix || "",
+				usesMarker: usesMarker || false,
+				// Pass through SVG flag for proper attribute setting
+				isSvg: binding.isSvg || false,
+			});
+			continue;
+		}
+
+		// For each get() call, create a binding
+		// Note: Multiple get() calls in one expression will create multiple bindings
+		// This might cause redundant updates, but ensures correctness
+		for (const getCall of getCalls) {
+			const targetProperty =
+				type === "text"
+					? "nodeValue"
+					: binding.attrName === "class" || binding.attrName === "className"
+						? "className"
+						: binding.attrName;
+
+			processed.push({
+				targetVar: type === "text" ? binding.textVarName : varName,
+				targetProperty,
+				cellArg: getCall.cellArg,
+				fullExpression: expression,
+				needsTransform: !getCall.isOnlyExpression,
+				isStatic: false,
+				// Store the get() call node for replacement in codegen
+				getCallNode: getCall.callNode,
+				// Include static prefix for text bindings
+				staticPrefix: staticPrefix || "",
+				// Pass through marker flag
+				usesMarker: usesMarker || false,
+				// Pass through SVG flag for proper attribute setting
+				isSvg: binding.isSvg || false,
+			});
+		}
+	}
+
+	return processed;
+}