roqa 0.0.1

package/src/compiler/transforms/show-transform.js

@@ -0,0 +1,78 @@
+import { extractJSXAttributes, getJSXChildren, isJSXExpressionContainer } from "../parser.js";
+
+/**
+ * Transform <Show> components into showBlock() calls
+ *
+ * Input:
+ *   <Show when={condition}><div>...</div></Show>
+ *
+ * Output:
+ *   showBlock(container, condition, (anchor) => {
+ *     // template creation and bindings
+ *     return { start, end };
+ *   });
+ */
+
+/**
+ * @typedef {Object} ShowTransformResult
+ * @property {string} containerVar - Variable name of the container element
+ * @property {import("@babel/types").Node} conditionExpression - The `when` prop expression
+ * @property {import("@babel/types").JSXElement} bodyJSX - The JSX child to render conditionally
+ */
+
+/**
+ * Extract information from a <Show> component for transformation
+ * @param {import("@babel/types").JSXElement} node - The <Show> JSX element
+ * @param {string} containerVar - Variable name of the parent container
+ * @returns {ShowTransformResult}
+ */
+export function extractShowInfo(node, containerVar) {
+	const attrs = extractJSXAttributes(node.openingElement);
+
+	// Get the `when` prop
+	const whenValue = attrs.get("when");
+	if (!whenValue || !isJSXExpressionContainer(whenValue)) {
+		throw createShowError(node, "Missing required 'when' prop on <Show> component");
+	}
+	const conditionExpression = whenValue.expression;
+
+	// Get the children - should have at least one child element
+	const children = getJSXChildren(node);
+	if (children.length === 0) {
+		throw createShowError(node, "<Show> must have at least one child element");
+	}
+
+	// Get the first JSX element child
+	let bodyJSX = null;
+	for (const child of children) {
+		if (child.type === "JSXElement") {
+			bodyJSX = child;
+			break;
+		}
+		// Support expression container with JSX: {<div>...</div>}
+		if (isJSXExpressionContainer(child) && child.expression.type === "JSXElement") {
+			bodyJSX = child.expression;
+			break;
+		}
+	}
+
+	if (!bodyJSX) {
+		throw createShowError(node, "<Show> must have a JSX element as child");
+	}
+
+	return {
+		containerVar,
+		conditionExpression,
+		bodyJSX,
+	};
+}
+
+/**
+ * Create a formatted error for <Show> component issues
+ */
+function createShowError(node, message) {
+	const error = new Error(message);
+	error.code = "SHOW_COMPONENT_ERROR";
+	error.loc = node.loc;
+	return error;
+}

package/src/compiler/transforms/validate.js

@@ -0,0 +1,80 @@
+import { traverse } from "../utils.js";
+import { getJSXElementName, isPascalCase, isControlFlowComponent } from "../parser.js";
+
+/**
+ * Validate that no unsupported PascalCase components remain in the AST
+ * This runs AFTER control flow transformers (For, Show, Switch) have processed their nodes
+ *
+ * Throws helpful error messages with suggestions for alternatives
+ */
+
+/**
+ * Validate the AST for unsupported components
+ * @param {import("@babel/types").File} ast - The Babel AST
+ * @throws {Error} If unsupported PascalCase components are found
+ */
+export function validateNoCustomComponents(ast) {
+	const errors = [];
+
+	traverse(ast, {
+		JSXElement(path) {
+			const node = path.node;
+			const name = getJSXElementName(node);
+
+			if (!name) return;
+
+			// Skip control flow components (they should be transformed, but check anyway)
+			if (isControlFlowComponent(node)) {
+				return;
+			}
+
+			// Check for PascalCase (custom component)
+			if (isPascalCase(name)) {
+				errors.push(createComponentError(name, node));
+			}
+		},
+		noScope: true,
+	});
+
+	if (errors.length > 0) {
+		// Throw the first error (could aggregate, but one at a time is clearer)
+		throw errors[0];
+	}
+}
+
+/**
+ * Create a detailed error for an unsupported component
+ * @param {string} name - Component name
+ * @param {import("@babel/types").JSXElement} node - The JSX node
+ * @returns {Error}
+ */
+function createComponentError(name, node) {
+	const kebabName = toKebabCase(name);
+
+	const error = new Error(
+		`Unsupported component '${name}'.\n` + `PascalCase components are not supported in Roqa.\n`,
+	);
+
+	error.code = "UNSUPPORTED_COMPONENT";
+	error.componentName = name;
+	error.loc = node.loc;
+	error.suggestions = [
+		`Use web components: defineComponent("${kebabName}", ${name})`,
+		`Use control flow: <For each={items}>`,
+		`Use lowercase HTML elements: <div>, <span>, <button>`,
+	];
+
+	return error;
+}
+
+/**
+ * Convert PascalCase to kebab-case
+ * @param {string} str
+ * @returns {string}
+ */
+function toKebabCase(str) {
+	return str
+		.replace(/([a-z])([A-Z])/g, "$1-$2")
+		.replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+		.toLowerCase();
+}

package/src/compiler/utils.js

@@ -0,0 +1,69 @@
+import _traverse from "@babel/traverse";
+
+/**
+ * Shared utilities for the Roqa compiler
+ */
+
+// Handle CJS/ESM interop for @babel/traverse
+export const traverse = _traverse.default || _traverse;
+
+/**
+ * Compiler constants to avoid magic strings
+ */
+export const CONSTANTS = {
+	/** Prefix for delegated event handlers (e.g., __click) */
+	EVENT_PREFIX: "__",
+	/** Prefix for cell refs used in inline updates (e.g., ref_1) */
+	REF_PREFIX: "ref_",
+	/** Prefix for template variables (e.g., $tmpl_1) */
+	TEMPLATE_PREFIX: "$tmpl_",
+	/** Prefix for root variables (e.g., $root_1) */
+	ROOT_PREFIX: "$root_",
+	/** Internal key used for root variable counter */
+	ROOT_COUNTER_KEY: "$root",
+};
+
+/**
+ * Escape single quotes and backslashes in template strings
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeTemplateString(str) {
+	return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+
+/**
+ * Escape special characters in a string literal
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeStringLiteral(str) {
+	return str
+		.replace(/\\/g, "\\\\")
+		.replace(/"/g, '\\"')
+		.replace(/\n/g, "\\n")
+		.replace(/\r/g, "\\r")
+		.replace(/\t/g, "\\t");
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeHtml(str) {
+	return str
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}
+
+/**
+ * Escape attribute values
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeAttr(str) {
+	return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}