@mmapp/react-compiler 0.1.0-alpha.1 → 0.1.0-alpha.4

package/src/babel/extractors/component-extractor.ts

@@ -1,907 +0,0 @@
-/**
- * Component Extractor — extracts JSX return value into IRExperienceNode tree.
- *
- * Handles:
- * - JSX elements with identifier and member expression names
- * - Fragments (anonymous containers)
- * - Text content as Text nodes
- * - Expression children ({count}, {status})
- * - Conditional rendering ({show && <X/>}, {cond ? <A/> : <B/>})
- * - List rendering ({items.map(i => <Item/>)})
- * - Spread attributes
- * - visible_when, data-slot special attributes
- */
-
-import type { NodePath } from '@babel/traverse';
-import * as t from '@babel/types';
-import type { IRExperienceNode, IRFieldDefinition } from '@mindmatrix/player-core';
-import type { CompilerState } from '../../types';
-import { transpileExpression } from '../transpilers/ts-to-expression';
-
-/**
- * Per-compilation node ID counter. Reset via resetNodeIdCounter().
- */
-let nodeIdCounter = 0;
-
-/**
- * Maps camelCase useState field names → snake_case names for $local bindings.
- * e.g. "sidebarOpen" → "sidebar_open"
- */
-let localFieldMap: Map<string, string> = new Map();
-
-/**
- * Maps setter function names → snake_case field names.
- * e.g. "setSidebarOpen" → "sidebar_open"
- */
-let setterToFieldMap: Map<string, string> = new Map();
-
-/**
- * Maps derived/computed variable names → their AST expressions.
- * e.g. "hasContent" → BinaryExpression(text.trim().length > 0 || files.length > 0)
- * When generateExpression encounters these, it inlines the expression
- * (recursively resolving $local references).
- */
-let derivedVarMap: Map<string, t.Expression> = new Map();
-
-/**
- * Converts camelCase to snake_case.
- */
-function toSnakeCase(str: string): string {
-  return str.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
-}
-
-/**
- * Sentinel value for tryStaticEval failure (distinguishes from `undefined` as a valid result).
- */
-const STATIC_EVAL_FAIL = Symbol('STATIC_EVAL_FAIL');
-
-/**
- * Attempts to statically evaluate an AST expression into a plain JS value.
- * Returns the value for pure literals (arrays, objects, strings, numbers, booleans, null, undefined).
- * Returns STATIC_EVAL_FAIL if the expression contains dynamic references.
- */
-function tryStaticEval(node: t.Expression): unknown {
-  if (t.isStringLiteral(node)) return node.value;
-  if (t.isNumericLiteral(node)) return node.value;
-  if (t.isBooleanLiteral(node)) return node.value;
-  if (t.isNullLiteral(node)) return null;
-  if (t.isIdentifier(node) && node.name === 'undefined') return undefined;
-
-  if (t.isUnaryExpression(node) && node.operator === '-' && t.isNumericLiteral(node.argument)) {
-    return -node.argument.value;
-  }
-
-  if (t.isArrayExpression(node)) {
-    const result: unknown[] = [];
-    for (const el of node.elements) {
-      if (el === null) { result.push(null); continue; }
-      if (t.isSpreadElement(el)) return STATIC_EVAL_FAIL;
-      const val = tryStaticEval(el);
-      if (val === STATIC_EVAL_FAIL) return STATIC_EVAL_FAIL;
-      result.push(val);
-    }
-    return result;
-  }
-
-  if (t.isObjectExpression(node)) {
-    const result: Record<string, unknown> = {};
-    for (const prop of node.properties) {
-      if (t.isSpreadElement(prop) || t.isObjectMethod(prop)) return STATIC_EVAL_FAIL;
-      if (!t.isObjectProperty(prop)) return STATIC_EVAL_FAIL;
-      let key: string;
-      if (t.isIdentifier(prop.key)) key = prop.key.name;
-      else if (t.isStringLiteral(prop.key)) key = prop.key.value;
-      else if (t.isNumericLiteral(prop.key)) key = String(prop.key.value);
-      else return STATIC_EVAL_FAIL;
-      if (!t.isExpression(prop.value)) return STATIC_EVAL_FAIL;
-      const val = tryStaticEval(prop.value);
-      if (val === STATIC_EVAL_FAIL) return STATIC_EVAL_FAIL;
-      result[key] = val;
-    }
-    return result;
-  }
-
-  // Template literal with no expressions: `hello world`
-  if (t.isTemplateLiteral(node) && node.expressions.length === 0) {
-    return node.quasis[0].value.cooked ?? node.quasis[0].value.raw;
-  }
-
-  return STATIC_EVAL_FAIL;
-}
-
-/**
- * Initializes field maps from extracted useState fields.
- * Must be called before JSX extraction.
- */
-function initLocalFieldMaps(fields: IRFieldDefinition[]): void {
-  localFieldMap.clear();
-  setterToFieldMap.clear();
-  for (const field of fields) {
-    const camelName = field.name;
-    const snakeName = toSnakeCase(camelName);
-    localFieldMap.set(camelName, snakeName);
-    // Build setter name: "sidebarOpen" → "setSidebarOpen"
-    const setterName = 'set' + camelName.charAt(0).toUpperCase() + camelName.slice(1);
-    setterToFieldMap.set(setterName, snakeName);
-  }
-}
-
-/**
- * Register a derived variable (const declaration) for inline expansion.
- * When the variable is referenced in JSX expressions, its initializer
- * expression is inlined with $local substitutions applied.
- */
-export function registerDerivedVar(name: string, init: t.Expression): void {
-  derivedVarMap.set(name, init);
-}
-
-/**
- * Resets the node ID counter. MUST be called between file compilations.
- */
-export function resetNodeIdCounter(): void {
-  nodeIdCounter = 0;
-  derivedVarMap.clear();
-}
-
-/**
- * Converts JSX element to IRExperienceNode.
- */
-function jsxToExperienceNode(node: t.JSXElement | t.JSXFragment): IRExperienceNode {
-  if (t.isJSXFragment(node)) {
-    return {
-      id: `fragment_${++nodeIdCounter}`,
-      children: extractChildren(node.children),
-    };
-  }
-
-  const element = node.openingElement;
-  const componentName = resolveComponentName(element.name);
-  const id = generateNodeId(componentName);
-  const config: Record<string, unknown> = {};
-  const bindings: Record<string, string> = {};
-  let visibleWhen: string | undefined;
-  let layout: string | undefined;
-  let slot: string | undefined;
-  let className: string | undefined;
-  let displayName: string | undefined;
-
-  // Infer layout from component type
-  const layoutMap: Record<string, string> = {
-    Stack: 'stack', Row: 'row', Grid: 'grid', Tabs: 'tabs', Column: 'column',
-  };
-  if (layoutMap[componentName]) {
-    layout = layoutMap[componentName];
-  }
-
-  // Extract attributes
-  for (const attr of element.attributes) {
-    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
-      const attrName = attr.name.name;
-      const attrValue = attr.value;
-
-      if (attrName === 'visible_when' && t.isStringLiteral(attrValue)) {
-        visibleWhen = attrValue.value;
-      } else if (attrName === 'data-slot' && t.isStringLiteral(attrValue)) {
-        slot = attrValue.value;
-      } else if (attrName === 'className' && t.isStringLiteral(attrValue)) {
-        className = attrValue.value;
-      } else if (attrName === 'displayName' && t.isStringLiteral(attrValue)) {
-        displayName = attrValue.value;
-      } else if (t.isJSXExpressionContainer(attrValue)) {
-        const expr = attrValue.expression;
-        if (t.isJSXEmptyExpression(expr)) continue;
-        // Literals go to config, dynamic expressions go to bindings
-        if (t.isNumericLiteral(expr)) {
-          config[attrName] = expr.value;
-        } else if (t.isBooleanLiteral(expr)) {
-          config[attrName] = expr.value;
-        } else if (t.isStringLiteral(expr)) {
-          // String literals that look like binding expressions (containing $instance,
-          // $local, or function calls) should be stored as bindings for round-trip
-          // stability. Plain strings go to config.
-          if (expr.value.includes('$instance') || expr.value.includes('$local') || /^[a-zA-Z_]+\(/.test(expr.value)) {
-            bindings[attrName] = expr.value;
-          } else {
-            config[attrName] = expr.value;
-          }
-        } else if (t.isIdentifier(expr)) {
-          const snakeName = localFieldMap.get(expr.name);
-          bindings[attrName] = snakeName ? `$local.${snakeName}` : `$instance.${expr.name}`;
-        } else if (
-          isEventHandlerProp(attrName) &&
-          (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr))
-        ) {
-          // Decompose event handlers into action sequences
-          const decomposed = decomposeHandlerToSeq(expr);
-          if (decomposed) {
-            bindings[attrName] = decomposed;
-          } else {
-            // Fallback: wrap raw JS in $expr() so IR consumers can identify
-            // opaque JavaScript expressions that don't map to mm-compute syntax.
-            // The binding resolver strips $expr() at evaluation time.
-            bindings[attrName] = `$expr(${generateExpression(expr)})`;
-          }
-        } else if (t.isExpression(expr)) {
-          // Try to statically evaluate pure-literal expressions (arrays/objects of primitives)
-          // into config values instead of putting them in bindings as strings
-          const staticVal = tryStaticEval(expr);
-          if (staticVal !== STATIC_EVAL_FAIL) {
-            config[attrName] = staticVal;
-          } else {
-            bindings[attrName] = generateExpression(expr);
-          }
-        }
-      } else if (t.isStringLiteral(attrValue)) {
-        config[attrName] = attrValue.value;
-      } else if (attrValue === null) {
-        // Boolean attribute: <Button disabled />
-        config[attrName] = true;
-      }
-    } else if (t.isJSXSpreadAttribute(attr)) {
-      // Spread attributes: {...props} → store the identifier in bindings
-      if (t.isIdentifier(attr.argument)) {
-        bindings['...' + attr.argument.name] = `$instance.${attr.argument.name}`;
-      }
-    }
-  }
-
-  const children = extractChildren(node.children);
-
-  const experienceNode: IRExperienceNode = {
-    id,
-    ...(displayName && { displayName }),
-    component: componentName,
-    ...(slot && { slot }),
-    ...(layout && { layout }),
-    ...(className && { className }),
-    ...(Object.keys(bindings).length > 0 && { bindings }),
-    ...(Object.keys(config).length > 0 && { config }),
-    ...(visibleWhen && { visible_when: visibleWhen }),
-    ...(children.length > 0 && { children }),
-  };
-
-  return experienceNode;
-}
-
-/**
- * Resolves component name from JSX element name node.
- * Handles JSXIdentifier and JSXMemberExpression.
- */
-function resolveComponentName(name: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName): string {
-  if (t.isJSXIdentifier(name)) return name.name;
-  if (t.isJSXMemberExpression(name)) {
-    const obj = resolveComponentName(name.object);
-    return `${obj}.${name.property.name}`;
-  }
-  if (t.isJSXNamespacedName(name)) {
-    return `${name.namespace.name}:${name.name.name}`;
-  }
-  return 'div';
-}
-
-/**
- * Extracts children from JSX, handling text, expressions, conditionals, and lists.
- */
-function extractChildren(
-  children: Array<t.JSXText | t.JSXExpressionContainer | t.JSXElement | t.JSXFragment | t.JSXSpreadChild>
-): IRExperienceNode[] {
-  const nodes: IRExperienceNode[] = [];
-
-  for (const child of children) {
-    if (t.isJSXElement(child)) {
-      nodes.push(jsxToExperienceNode(child));
-    } else if (t.isJSXFragment(child)) {
-      nodes.push(jsxToExperienceNode(child));
-    } else if (t.isJSXText(child)) {
-      const text = child.value.trim();
-      if (text) {
-        nodes.push({
-          id: `text_${++nodeIdCounter}`,
-          component: 'Text',
-          config: { value: text },
-        });
-      }
-    } else if (t.isJSXExpressionContainer(child)) {
-      const expr = child.expression;
-      if (t.isJSXEmptyExpression(expr)) continue;
-
-      // Conditional: {cond ? <A/> : <B/>}
-      if (t.isConditionalExpression(expr)) {
-        const condExpr = generateExpression(expr.test);
-        if (t.isJSXElement(expr.consequent) || t.isJSXFragment(expr.consequent)) {
-          const consequent = jsxToExperienceNode(expr.consequent as t.JSXElement | t.JSXFragment);
-          consequent.visible_when = condExpr;
-          nodes.push(consequent);
-        }
-        if (t.isJSXElement(expr.alternate) || t.isJSXFragment(expr.alternate)) {
-          const alternate = jsxToExperienceNode(expr.alternate as t.JSXElement | t.JSXFragment);
-          alternate.visible_when = `not(${condExpr})`;
-          nodes.push(alternate);
-        }
-      }
-      // Logical AND: {show && <Component/>}
-      else if (t.isLogicalExpression(expr) && expr.operator === '&&') {
-        const condExpr = generateExpression(expr.left);
-        if (t.isJSXElement(expr.right) || t.isJSXFragment(expr.right)) {
-          const element = jsxToExperienceNode(expr.right as t.JSXElement | t.JSXFragment);
-          element.visible_when = condExpr;
-          nodes.push(element);
-        }
-      }
-      // List: {items.map(item => <Item key={...} />)}
-      else if (
-        t.isCallExpression(expr) &&
-        t.isMemberExpression(expr.callee) &&
-        t.isIdentifier(expr.callee.property) &&
-        expr.callee.property.name === 'map' &&
-        expr.arguments.length > 0
-      ) {
-        const listSource = generateExpression(expr.callee.object as t.Expression);
-        const mapFn = expr.arguments[0];
-        let itemTemplate: IRExperienceNode | null = null;
-        let itemAlias = 'item';
-
-        if (t.isArrowFunctionExpression(mapFn) || t.isFunctionExpression(mapFn)) {
-          // Get the item parameter name
-          if (mapFn.params.length > 0 && t.isIdentifier(mapFn.params[0])) {
-            itemAlias = mapFn.params[0].name;
-          }
-          // Get the returned JSX
-          const body = mapFn.body;
-          if (t.isJSXElement(body) || t.isJSXFragment(body)) {
-            itemTemplate = jsxToExperienceNode(body as t.JSXElement | t.JSXFragment);
-          } else if (t.isBlockStatement(body)) {
-            for (const stmt of body.body) {
-              if (t.isReturnStatement(stmt) && stmt.argument) {
-                if (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument)) {
-                  itemTemplate = jsxToExperienceNode(stmt.argument as t.JSXElement | t.JSXFragment);
-                }
-                break;
-              }
-            }
-          }
-        }
-
-        nodes.push({
-          id: `each_${++nodeIdCounter}`,
-          component: 'Each',
-          bindings: { items: listSource.startsWith('$') ? listSource : `$instance.${listSource}` },
-          config: { as: itemAlias },
-          ...(itemTemplate ? { children: [itemTemplate] } : {}),
-        });
-      }
-      // Render callback: {(item) => <Component/>} or {(item, index) => { return <Component/>; }}
-      // This is the children-as-function pattern used by Each, Show, etc.
-      else if (
-        (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) &&
-        extractJSXFromCallback(expr)
-      ) {
-        const jsxNode = extractJSXFromCallback(expr)!;
-        nodes.push(jsxToExperienceNode(jsxNode));
-      }
-      // String literal in expression: {' '}, {"hello"} → static Text config
-      else if (t.isStringLiteral(expr)) {
-        nodes.push({
-          id: `text_${++nodeIdCounter}`,
-          component: 'Text',
-          config: { value: expr.value },
-        });
-      }
-      // Simple expression: {count}, {status}
-      else if (t.isIdentifier(expr)) {
-        const snakeName = localFieldMap.get(expr.name);
-        const bindingPath = snakeName ? `$local.${snakeName}` : `$instance.${expr.name}`;
-        nodes.push({
-          id: `text_${++nodeIdCounter}`,
-          component: 'Text',
-          bindings: { value: bindingPath },
-        });
-      }
-      // Complex expression: {a + b}, {fn(x)}
-      else if (t.isExpression(expr)) {
-        const exprStr = generateExpression(expr);
-        if (exprStr !== '[Expression]') {
-          nodes.push({
-            id: `text_${++nodeIdCounter}`,
-            component: 'Text',
-            bindings: { value: exprStr },
-          });
-        }
-      }
-    }
-  }
-
-  return nodes;
-}
-
-/**
- * Generates a unique node ID from component name.
- */
-function generateNodeId(componentName: string): string {
-  const id = componentName
-    .replace(/\./g, '-')
-    .replace(/([A-Z])/g, '-$1')
-    .toLowerCase()
-    .replace(/^-/, '');
-  return `${id}_${++nodeIdCounter}`;
-}
-
-/**
- * Generates expression string from AST node.
- *
- * The output must be valid JS that the binding resolver can evaluate
- * via `new Function(...)`. All $-prefix paths are resolved at runtime
- * from the binding context ($instance, $local, $fn, $action, etc.).
- */
-function generateExpression(node: t.Expression): string {
-  if (t.isIdentifier(node)) {
-    // Map useState fields to $local.snake_case
-    const snakeName = localFieldMap.get(node.name);
-    if (snakeName) return `$local.${snakeName}`;
-    // Inline derived variables: expand to their defining expression
-    const derivedInit = derivedVarMap.get(node.name);
-    if (derivedInit) return `(${generateExpression(derivedInit)})`;
-    return node.name;
-  }
-  if (t.isStringLiteral(node)) return `"${node.value.replace(/"/g, '\\"')}"`;
-  if (t.isNumericLiteral(node)) return String(node.value);
-  if (t.isBooleanLiteral(node)) return String(node.value);
-  if (t.isNullLiteral(node)) return 'null';
-
-  // Member expression: a.b, a?.b, a[0], a["key"]
-  if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
-    const obj = t.isExpression(node.object) ? generateExpression(node.object) : '[object]';
-    const optional = (node as any).optional ? '?.' : '.';
-    if (node.computed) {
-      const prop = t.isExpression(node.property) ? generateExpression(node.property as t.Expression) : '0';
-      return `${obj}[${prop}]`;
-    }
-    const prop = t.isIdentifier(node.property) ? node.property.name : '[property]';
-    return `${obj}${optional}${prop}`;
-  }
-
-  // Binary: a + b, a === b, a !== b, etc.
-  if (t.isBinaryExpression(node)) {
-    return `(${generateExpression(node.left as t.Expression)} ${node.operator} ${generateExpression(node.right as t.Expression)})`;
-  }
-
-  // Logical: a && b, a || b, a ?? b
-  if (t.isLogicalExpression(node)) {
-    return `(${generateExpression(node.left)} ${node.operator} ${generateExpression(node.right)})`;
-  }
-
-  // Conditional (ternary): a ? b : c
-  if (t.isConditionalExpression(node)) {
-    return `(${generateExpression(node.test)} ? ${generateExpression(node.consequent)} : ${generateExpression(node.alternate)})`;
-  }
-
-  // Unary: !a, -a, typeof a
-  if (t.isUnaryExpression(node) && node.prefix) {
-    const space = node.operator === 'typeof' || node.operator === 'void' || node.operator === 'delete' ? ' ' : '';
-    return `${node.operator}${space}${generateExpression(node.argument)}`;
-  }
-
-  // Call expression: fn(args) or obj.method(args)
-  if (t.isCallExpression(node) || t.isOptionalCallExpression(node)) {
-    if (t.isIdentifier(node.callee)) {
-      // Detect useState setter calls: setSomething(value) → $action.setLocal("field")(value)
-      const setterFieldName = setterToFieldMap.get(node.callee.name);
-      if (setterFieldName) {
-        if (node.arguments.length >= 1) {
-          const arg = node.arguments[0];
-          // Functional update: setSomething(prev => expr) → $action.setLocal("field")(expr with prev→$local.field)
-          if (
-            (t.isArrowFunctionExpression(arg) || t.isFunctionExpression(arg)) &&
-            arg.params.length >= 1 &&
-            t.isIdentifier(arg.params[0])
-          ) {
-            const paramName = arg.params[0].name;
-            const bodyExpr = t.isExpression(arg.body) ? generateExpression(arg.body) : 'undefined';
-            // Replace the callback param with the actual $local field reference
-            const resolved = bodyExpr.replace(
-              new RegExp(`(?<![.$\\w])${paramName}(?![\\w])`, 'g'),
-              `$local.${setterFieldName}`,
-            );
-            return `$action.setLocal("${setterFieldName}")(${resolved})`;
-          }
-          // Direct value: setSomething(value) → $action.setLocal("field")(value)
-          const argStr = t.isExpression(arg) ? generateExpression(arg) : 'undefined';
-          return `$action.setLocal("${setterFieldName}")(${argStr})`;
-        }
-        return `$action.setLocal("${setterFieldName}")`;
-      }
-      const args = node.arguments.map((a) => t.isExpression(a) ? generateExpression(a) : t.isSpreadElement(a) ? `...${generateExpression(a.argument)}` : 'undefined').join(', ');
-      return `${node.callee.name}(${args})`;
-    }
-    if (t.isMemberExpression(node.callee) || t.isOptionalMemberExpression(node.callee)) {
-      // Try mm-compute transpilation for recognized method patterns
-      // (Math.*, JSON.*, Date.*, string/array methods)
-      const mmResult = transpileExpression(node, {
-        localFieldMap,
-        derivedVarMap,
-        setterToFieldMap,
-      });
-      if (mmResult.pure) return mmResult.expression;
-
-      // Fallback: raw JS method call syntax
-      const obj = generateExpression(node.callee.object as t.Expression);
-      const optional = (node.callee as any).optional ? '?.' : '.';
-      const prop = t.isIdentifier(node.callee.property) ? node.callee.property.name : '[method]';
-      const args = node.arguments.map((a) => t.isExpression(a) ? generateExpression(a) : t.isSpreadElement(a) ? `...${generateExpression(a.argument)}` : 'undefined').join(', ');
-      return `${obj}${optional}${prop}(${args})`;
-    }
-    // Callee is a more complex expression (e.g., (fn || fallback)(args))
-    if (t.isExpression(node.callee)) {
-      const callee = generateExpression(node.callee);
-      const args = node.arguments.map((a) => t.isExpression(a) ? generateExpression(a) : 'undefined').join(', ');
-      return `(${callee})(${args})`;
-    }
-  }
-
-  // Template literal: `hello ${name}`
-  if (t.isTemplateLiteral(node)) {
-    const parts = node.quasis.map((q, i) => {
-      const raw = q.value.raw;
-      if (i < node.expressions.length) {
-        return raw + '${' + generateExpression(node.expressions[i] as t.Expression) + '}';
-      }
-      return raw;
-    }).join('');
-    return '`' + parts + '`';
-  }
-
-  // Arrow function: () => expr, (a) => expr, (a) => { ... }
-  if (t.isArrowFunctionExpression(node)) {
-    const params = node.params.map((p) => {
-      if (t.isIdentifier(p)) return p.name;
-      if (t.isRestElement(p) && t.isIdentifier(p.argument)) return `...${p.argument.name}`;
-      if (t.isAssignmentPattern(p) && t.isIdentifier(p.left)) {
-        return `${p.left.name} = ${t.isExpression(p.right) ? generateExpression(p.right) : 'undefined'}`;
-      }
-      return '_';
-    }).join(', ');
-    if (t.isExpression(node.body)) {
-      return `(${params}) => ${generateExpression(node.body)}`;
-    }
-    // Block body — generate the statements
-    if (t.isBlockStatement(node.body)) {
-      const bodyStr = generateBlockStatement(node.body);
-      return `(${params}) => { ${bodyStr} }`;
-    }
-  }
-
-  // Array expression: [1, 2, 3]
-  if (t.isArrayExpression(node)) {
-    const elements = node.elements.map((el) => {
-      if (el === null) return 'undefined';
-      if (t.isSpreadElement(el)) return `...${generateExpression(el.argument)}`;
-      return t.isExpression(el) ? generateExpression(el) : 'undefined';
-    }).join(', ');
-    return `[${elements}]`;
-  }
-
-  // Object expression: { key: value }
-  if (t.isObjectExpression(node)) {
-    const props = node.properties.map((prop) => {
-      if (t.isSpreadElement(prop)) return `...${generateExpression(prop.argument)}`;
-      if (t.isObjectProperty(prop)) {
-        const key = t.isIdentifier(prop.key) ? prop.key.name
-          : t.isStringLiteral(prop.key) ? `"${prop.key.value}"`
-          : t.isNumericLiteral(prop.key) ? String(prop.key.value)
-          : '[key]';
-        if (prop.shorthand && t.isIdentifier(prop.value)) return key;
-        const value = t.isExpression(prop.value) ? generateExpression(prop.value) : 'undefined';
-        return `${key}: ${value}`;
-      }
-      if (t.isObjectMethod(prop)) {
-        const key = t.isIdentifier(prop.key) ? prop.key.name : '[method]';
-        const params = prop.params.map((p) => t.isIdentifier(p) ? p.name : '_').join(', ');
-        const bodyStr = generateBlockStatement(prop.body);
-        return `${key}(${params}) { ${bodyStr} }`;
-      }
-      return '';
-    }).filter(Boolean).join(', ');
-    return `{ ${props} }`;
-  }
-
-  // Parenthesized expression
-  if (t.isParenthesizedExpression(node)) {
-    return `(${generateExpression(node.expression)})`;
-  }
-
-  // TS type assertions: x as Type, x!
-  if (t.isTSAsExpression(node)) return generateExpression(node.expression);
-  if (t.isTSNonNullExpression(node)) return generateExpression(node.expression);
-  if (t.isTSTypeAssertion(node)) return generateExpression(node.expression);
-
-  // Sequence expression: (a, b, c) — returns last value
-  if (t.isSequenceExpression(node)) {
-    return `(${node.expressions.map(generateExpression).join(', ')})`;
-  }
-
-  // Assignment expression: a = b
-  if (t.isAssignmentExpression(node)) {
-    const left = t.isExpression(node.left) ? generateExpression(node.left as t.Expression) : '[target]';
-    return `(${left} ${node.operator} ${generateExpression(node.right)})`;
-  }
-
-  // Update expression: a++, --b
-  if (t.isUpdateExpression(node)) {
-    const arg = generateExpression(node.argument);
-    return node.prefix ? `${node.operator}${arg}` : `${arg}${node.operator}`;
-  }
-
-  // Tagged template: tag`string`
-  if (t.isTaggedTemplateExpression(node)) {
-    return generateExpression(node.quasi);
-  }
-
-  // Spread in non-array/object context (shouldn't happen but safety)
-  if (t.isSpreadElement(node as any)) {
-    return `...${generateExpression((node as any).argument)}`;
-  }
-
-  // Yield: yield expr (generators — unlikely in views but handle gracefully)
-  if (t.isYieldExpression(node)) {
-    return node.argument ? `yield ${generateExpression(node.argument)}` : 'yield';
-  }
-
-  // Await: await expr
-  if (t.isAwaitExpression(node)) {
-    return `await ${generateExpression(node.argument)}`;
-  }
-
-  // New expression: new Foo(args)
-  if (t.isNewExpression(node)) {
-    const callee = t.isExpression(node.callee) ? generateExpression(node.callee) : 'Object';
-    const args = node.arguments.map((a) => t.isExpression(a) ? generateExpression(a) : 'undefined').join(', ');
-    return `new ${callee}(${args})`;
-  }
-
-  // This expression
-  if (t.isThisExpression(node)) return 'this';
-
-  // Fallback — generate from source if possible using Babel's generator
-  console.warn(`[component-extractor] Unhandled expression type: ${node.type}`);
-  return '[Expression]';
-}
-
-/**
- * Generates a block statement body as a string.
- */
-function generateBlockStatement(block: t.BlockStatement): string {
-  return block.body.map((stmt) => {
-    if (t.isReturnStatement(stmt)) {
-      return stmt.argument ? `return ${generateExpression(stmt.argument)};` : 'return;';
-    }
-    if (t.isExpressionStatement(stmt)) {
-      return `${generateExpression(stmt.expression)};`;
-    }
-    if (t.isVariableDeclaration(stmt)) {
-      const decls = stmt.declarations.map((d) => {
-        const id = t.isIdentifier(d.id) ? d.id.name : '_';
-        const init = d.init && t.isExpression(d.init) ? generateExpression(d.init) : 'undefined';
-        return `${id} = ${init}`;
-      }).join(', ');
-      return `${stmt.kind} ${decls};`;
-    }
-    if (t.isIfStatement(stmt)) {
-      const test = generateExpression(stmt.test);
-      const consequent = t.isBlockStatement(stmt.consequent)
-        ? `{ ${generateBlockStatement(stmt.consequent)} }`
-        : t.isExpressionStatement(stmt.consequent)
-          ? `{ ${generateExpression(stmt.consequent.expression)}; }`
-          : '{}';
-      const alternate = stmt.alternate
-        ? t.isBlockStatement(stmt.alternate)
-          ? ` else { ${generateBlockStatement(stmt.alternate)} }`
-          : t.isIfStatement(stmt.alternate)
-            ? ` else ${generateBlockStatement(t.blockStatement([stmt.alternate]))}`
-            : ''
-        : '';
-      return `if (${test}) ${consequent}${alternate}`;
-    }
-    // Fallback for other statement types
-    return '/* [Statement] */';
-  }).join(' ');
-}
-
-/**
- * Extracts JSX element from a render callback function.
- * Handles: (item) => <JSX/>, (item) => (<JSX/>), (item) => { return <JSX/>; }
- */
-function extractJSXFromCallback(
-  node: t.ArrowFunctionExpression | t.FunctionExpression
-): t.JSXElement | t.JSXFragment | null {
-  const body = node.body;
-  if (t.isJSXElement(body) || t.isJSXFragment(body)) {
-    return body as t.JSXElement | t.JSXFragment;
-  }
-  // Parenthesized: (item) => (<JSX/>)
-  if (t.isParenthesizedExpression(body)) {
-    const inner = body.expression;
-    if (t.isJSXElement(inner) || t.isJSXFragment(inner)) {
-      return inner as t.JSXElement | t.JSXFragment;
-    }
-  }
-  // Block body: (item) => { return <JSX/>; }
-  if (t.isBlockStatement(body)) {
-    for (const stmt of body.body) {
-      if (t.isReturnStatement(stmt) && stmt.argument) {
-        if (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument)) {
-          return stmt.argument as t.JSXElement | t.JSXFragment;
-        }
-        // Parenthesized return: return (<JSX/>)
-        if (t.isParenthesizedExpression(stmt.argument)) {
-          const inner = stmt.argument.expression;
-          if (t.isJSXElement(inner) || t.isJSXFragment(inner)) {
-            return inner as t.JSXElement | t.JSXFragment;
-          }
-        }
-      }
-    }
-  }
-  return null;
-}
-
-// ============================================================================
-// EVENT HANDLER DECOMPOSITION
-// ============================================================================
-
-/**
- * Returns true for event handler prop names (onClick, onPress, onChange, etc.)
- */
-function isEventHandlerProp(name: string): boolean {
-  return /^on[A-Z]/.test(name);
-}
-
-/**
- * Converts a single expression (statement body) into an atomic action string.
- * Returns null if the expression cannot be decomposed.
- */
-function expressionToActionAtom(expr: t.Expression): string | null {
-  // Call expression: setter, transition, navigate, toast, etc.
-  if (t.isCallExpression(expr) || t.isOptionalCallExpression(expr)) {
-    // Direct setter: setFoo(value)
-    if (t.isIdentifier(expr.callee)) {
-      const setterFieldName = setterToFieldMap.get(expr.callee.name);
-      if (setterFieldName && expr.arguments.length >= 1) {
-        const arg = expr.arguments[0];
-        // Functional update: setFoo(prev => expr)
-        if (
-          (t.isArrowFunctionExpression(arg) || t.isFunctionExpression(arg)) &&
-          arg.params.length >= 1 &&
-          t.isIdentifier(arg.params[0])
-        ) {
-          const paramName = arg.params[0].name;
-          const bodyExpr = t.isExpression(arg.body) ? generateExpression(arg.body) : 'undefined';
-          const resolved = bodyExpr.replace(
-            new RegExp(`(?<![.$\\w])${paramName}(?![\\w])`, 'g'),
-            `$local.${setterFieldName}`,
-          );
-          return `$action.setLocal("${setterFieldName}", ${resolved})`;
-        }
-        // Direct value: setFoo(value)
-        const argStr = t.isExpression(arg) ? generateExpression(arg) : 'undefined';
-        return `$action.setLocal("${setterFieldName}", ${argStr})`;
-      }
-      // Other function calls — not decomposable into framework actions
-      return null;
-    }
-
-    // Member call: $action-like calls from chained setLocal etc.
-    // e.g., $action.setLocal("key")(value) — already handled above via setter detection
-    // For now, try to generate as expression and check if it's an $action call
-    if (t.isMemberExpression(expr.callee) || t.isOptionalMemberExpression(expr.callee)) {
-      const generated = generateExpression(expr);
-      // If it looks like an $action call, wrap it as a 2-arg form
-      if (generated.startsWith('$action.')) return generated;
-    }
-
-    return null;
-  }
-
-  return null;
-}
-
-/**
- * Converts a statement into an action atom string.
- * Returns null for unsupported statement types.
- */
-function statementToAction(stmt: t.Statement): string | null {
-  // ExpressionStatement: the most common case
-  if (t.isExpressionStatement(stmt)) {
-    return expressionToActionAtom(stmt.expression);
-  }
-
-  // IfStatement: convert to $action.when(condition, thenAction, elseAction?)
-  if (t.isIfStatement(stmt)) {
-    const condition = generateExpression(stmt.test);
-
-    // Consequent
-    let thenAction: string | null = null;
-    if (t.isBlockStatement(stmt.consequent)) {
-      const actions = stmt.consequent.body.map(s => statementToAction(s)).filter(Boolean) as string[];
-      if (actions.length === 0 || actions.length !== stmt.consequent.body.length) return null;
-      thenAction = actions.length === 1 ? actions[0] : `$action.seq(${actions.join(', ')})`;
-    } else if (t.isExpressionStatement(stmt.consequent)) {
-      thenAction = expressionToActionAtom(stmt.consequent.expression);
-    }
-    if (!thenAction) return null;
-
-    // Alternate (optional)
-    let elseAction: string | null = null;
-    if (stmt.alternate) {
-      if (t.isBlockStatement(stmt.alternate)) {
-        const actions = stmt.alternate.body.map(s => statementToAction(s)).filter(Boolean) as string[];
-        if (actions.length !== stmt.alternate.body.length) return null;
-        elseAction = actions.length === 1 ? actions[0] : `$action.seq(${actions.join(', ')})`;
-      } else if (t.isIfStatement(stmt.alternate)) {
-        elseAction = statementToAction(stmt.alternate);
-      } else if (t.isExpressionStatement(stmt.alternate)) {
-        elseAction = expressionToActionAtom(stmt.alternate.expression);
-      }
-      if (!elseAction) return null;
-    }
-
-    return elseAction
-      ? `$action.when(${condition}, ${thenAction}, ${elseAction})`
-      : `$action.when(${condition}, ${thenAction})`;
-  }
-
-  return null;
-}
-
-/**
- * Decomposes an arrow/function expression handler into a $action.seq() string.
- * For single-expression arrows, returns the single action atom.
- * Returns null if decomposition fails (fallback to generateExpression).
- */
-function decomposeHandlerToSeq(node: t.ArrowFunctionExpression | t.FunctionExpression): string | null {
-  // Expression body: () => setFoo(value) — single action
-  if (t.isArrowFunctionExpression(node) && t.isExpression(node.body)) {
-    return expressionToActionAtom(node.body);
-  }
-
-  // Block body: () => { stmt1; stmt2; ... }
-  const body = node.body;
-  if (!t.isBlockStatement(body)) return null;
-
-  const actions: string[] = [];
-  for (const stmt of body.body) {
-    const action = statementToAction(stmt);
-    if (!action) return null; // Can't decompose — bail
-    actions.push(action);
-  }
-
-  if (actions.length === 0) return null;
-  if (actions.length === 1) return actions[0];
-  return `$action.seq(${actions.join(', ')})`;
-}
-
-/**
- * Main extractor function called from the visitor.
- */
-export function extractComponents(path: NodePath<t.ReturnStatement>, state: any): void {
-  const arg = path.node.argument;
-  if (!arg) return;
-
-  // Initialize local field maps from extracted useState fields BEFORE processing JSX
-  const compilerState = state as CompilerState;
-
-  if (compilerState.fields && compilerState.fields.length > 0) {
-    initLocalFieldMaps(compilerState.fields);
-  }
-
-  let experienceNode: IRExperienceNode | null = null;
-
-  if (t.isJSXElement(arg)) {
-    experienceNode = jsxToExperienceNode(arg);
-  } else if (t.isJSXFragment(arg)) {
-    experienceNode = jsxToExperienceNode(arg);
-  }
-
-  if (experienceNode) {
-    compilerState.experience = experienceNode;
-  }
-}