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

package/src/codemod/state-transform.ts

@@ -1,126 +0,0 @@
-/**
- * State transform — handles useState ↔ useQuery/useMutation migration.
- *
- * Three modes:
- *   preserve (default): useState stays as-is
- *   annotate: Adds @mm-field comments without changing code
- *   migrate: Converts annotated useState to useQuery/useMutation
- */
-
-import type { NodePath, Visitor } from '@babel/traverse';
-import * as t from '@babel/types';
-
-export type StateMode = 'preserve' | 'annotate' | 'migrate';
-
-/**
- * Create a visitor for state transforms.
- * In 'preserve' mode, this is a no-op.
- */
-export function createStateVisitor(mode: StateMode): Visitor {
-  if (mode === 'preserve') return {};
-
-  if (mode === 'annotate') {
-    return {
-      VariableDeclaration(path: NodePath<t.VariableDeclaration>) {
-        for (const decl of path.node.declarations) {
-          if (!isUseStateCall(decl.init)) continue;
-          if (hasFieldAnnotation(path.node)) continue;
-
-          // Infer field type from initial value
-          const fieldType = inferFieldType(decl.init as t.CallExpression);
-          const comment = ` @mm-field type=${fieldType} `;
-
-          if (!path.node.trailingComments) {
-            path.node.trailingComments = [];
-          }
-          path.node.trailingComments.push({
-            type: 'CommentLine',
-            value: comment,
-          } as t.Comment);
-        }
-      },
-    };
-  }
-
-  // mode === 'migrate'
-  return {
-    VariableDeclaration(path: NodePath<t.VariableDeclaration>) {
-      for (const decl of path.node.declarations) {
-        if (!isUseStateCall(decl.init)) continue;
-
-        // Only migrate if explicitly annotated with @mm-migrate
-        const migrateAnnotation = getMigrateAnnotation(path.node);
-        if (!migrateAnnotation) continue;
-
-        if (migrateAnnotation.type === 'query') {
-          // Convert: const [x, setX] = useState(init)
-          // To:      const x = useQuery('model', { where: {} })
-          if (decl.id.type !== 'ArrayPattern' || decl.id.elements.length < 1)
-            continue;
-
-          const nameNode = decl.id.elements[0];
-          if (!nameNode || nameNode.type !== 'Identifier') continue;
-
-          decl.id = nameNode;
-          decl.init = t.callExpression(t.identifier('useQuery'), [
-            t.stringLiteral(migrateAnnotation.model || nameNode.name),
-            t.objectExpression([
-              t.objectProperty(
-                t.identifier('where'),
-                t.objectExpression([]),
-              ),
-            ]),
-          ]);
-        }
-      }
-    },
-  };
-}
-
-function isUseStateCall(node: t.Node | null | undefined): boolean {
-  return (
-    !!node &&
-    node.type === 'CallExpression' &&
-    node.callee.type === 'Identifier' &&
-    node.callee.name === 'useState'
-  );
-}
-
-function hasFieldAnnotation(node: t.Node): boolean {
-  return (
-    !!node.trailingComments &&
-    node.trailingComments.some(c => c.value.includes('@mm-field'))
-  );
-}
-
-function inferFieldType(call: t.CallExpression): string {
-  if (call.arguments.length === 0) return 'any';
-  const arg = call.arguments[0];
-  if (arg.type === 'StringLiteral') return 'text';
-  if (arg.type === 'NumericLiteral') return 'number';
-  if (arg.type === 'BooleanLiteral') return 'boolean';
-  if (arg.type === 'ArrayExpression') return 'list';
-  if (arg.type === 'ObjectExpression') return 'object';
-  if (arg.type === 'NullLiteral') return 'any';
-  return 'any';
-}
-
-function getMigrateAnnotation(
-  node: t.Node,
-): { type: 'query' | 'mutation'; model?: string } | null {
-  const comments = [
-    ...(node.leadingComments || []),
-    ...(node.trailingComments || []),
-  ];
-
-  for (const c of comments) {
-    const match = c.value.match(/@mm-migrate:\s*(query|mutation)(?:\s+(\w+))?/);
-    if (match) {
-      return {
-        type: match[1] as 'query' | 'mutation',
-        model: match[2],
-      };
-    }
-  }
-  return null;
-}

package/src/decompiler/ast-builder.ts

@@ -1,538 +0,0 @@
-/**
- * ast-builder — converts IRExperienceNode tree to Babel JSX AST.
- *
- * This is the inverse of component-extractor.ts. Given an IR experience tree,
- * it produces a JSX element tree using Babel AST nodes that @babel/generator
- * can emit as source code.
- *
- * Handles:
- *   - component name → JSX element name
- *   - config → static JSX attributes
- *   - bindings → JSX expression attributes
- *   - children → nested JSX elements (recursive)
- *   - visible_when → <Show when={...}> wrapper
- *   - style → sx prop (via sx-emitter)
- *   - displayName → preserved as comment
- *
- * Handles component names, config, bindings, children, visible_when, style, and displayName.
- */
-
-import * as t from '@babel/types';
-import { parseExpression } from '@babel/parser';
-import type {
-  IRExperienceNode,
-  IRFieldDefinition,
-  IRTransitionDefinition,
-} from '@mindmatrix/player-core';
-import { emitSxProp, valueToExpression } from './sx-emitter';
-import type { ImportTracker } from './index';
-
-// =============================================================================
-// Symbol Table — maps IR tokens to local variable names
-// =============================================================================
-
-export interface SymbolTable {
-  /** $local.field_name → camelCase variable name */
-  locals: Map<string, string>;
-  /** field_name → setFieldName setter */
-  setters: Map<string, string>;
-  /** data source name → useQuery variable name */
-  queries: Map<string, string>;
-  /** transition name → useTransition variable name */
-  transitions: Map<string, string>;
-}
-
-/**
- * Builds a symbol table from emitted hook declarations so that IR tokens
- * in binding expressions can be resolved to their local variable names.
- */
-export function buildSymbolTable(
-  fields: IRFieldDefinition[],
-  metadata: Record<string, unknown> | undefined,
-  transitions: IRTransitionDefinition[],
-  experience?: IRExperienceNode,
-): SymbolTable {
-  const locals = new Map<string, string>();
-  const setters = new Map<string, string>();
-  const queries = new Map<string, string>();
-  const transMap = new Map<string, string>();
-
-  // Fields → locals + setters
-  for (const field of fields) {
-    if (field.computed) continue;
-    const camel = toCamelCase(field.name);
-    locals.set(field.name, camel);
-    setters.set(field.name, setterName(field.name));
-  }
-
-  // Data sources → queries
-  const dataSources = metadata?.dataSources as Array<{
-    type: string; name: string; slug?: string;
-  }> | undefined;
-  if (dataSources) {
-    for (const ds of dataSources) {
-      if (ds.type !== 'workflow') continue;
-      const varName = toCamelCase(ds.name.replace(/-/g, '_'));
-      queries.set(ds.name, varName);
-      queries.set(ds.name.replace(/-/g, '_'), varName);
-    }
-  }
-
-  // Transitions → transition map
-  for (const trans of transitions) {
-    transMap.set(trans.name, toCamelCase(trans.name));
-  }
-
-  // Walk experience tree for localDefaults
-  if (experience) {
-    collectLocalDefaults(experience, locals, setters);
-  }
-
-  return { locals, setters, queries, transitions: transMap };
-}
-
-/** Recursively collects localDefaults keys from the experience tree. */
-function collectLocalDefaults(
-  node: IRExperienceNode,
-  locals: Map<string, string>,
-  setters: Map<string, string>,
-): void {
-  if (node.config?.localDefaults && typeof node.config.localDefaults === 'object') {
-    for (const key of Object.keys(node.config.localDefaults as Record<string, unknown>)) {
-      // Skip dotted keys like "driver.today_earnings" — they're nested field refs
-      if (key.includes('.')) continue;
-      if (!locals.has(key)) {
-        const camel = toCamelCase(key);
-        locals.set(key, camel);
-        setters.set(key, setterName(key));
-      }
-    }
-  }
-  if (node.children) {
-    for (const child of node.children) {
-      collectLocalDefaults(child, locals, setters);
-    }
-  }
-}
-
-// =============================================================================
-// Atom Components (from @mindmatrix/react)
-// =============================================================================
-
-const REACT_ATOMS = new Set([
-  'Stack', 'Row', 'Column', 'Grid', 'Divider', 'Spacer',
-  'Text', 'Heading', 'Field', 'Image', 'Badge', 'Icon',
-  'Button', 'Link',
-  'Show', 'Each',
-  'Card', 'Tabs', 'Accordion', 'Section', 'Modal',
-  'TextInput', 'Select', 'Markdown', 'ScrollArea',
-  'Canvas3D', 'DataGrid', 'AnimatedBox', 'ServerGrid', 'Chart', 'MetricCard',
-  'Slot',
-]);
-
-// =============================================================================
-// IR Token Resolution
-// =============================================================================
-
-/**
- * Resolves IR binding tokens in an expression string to valid JS variable names.
- *
- * Handles:
- *   $local.field_name          → fieldName (camelCase from symbol table)
- *   $instance.field_name       → fieldName (from queries or camelCase)
- *   $instance?.field_name      → fieldName
- *   $instance.state_data.field → fieldName
- *   $action.setLocal("f", v)   → setF(v)
- *   $action.transition("name") → transitionName()
- *   $action.seq(a, b)          → () => { a; b; }
- *   $fn.concat(a, b)           → `${a}${b}`
- *   $instance.["a","b"]        → ["a","b"]
- */
-function resolveIRTokens(expr: string, symbols: SymbolTable): string {
-  let result = expr;
-
-  // Pass 0: $expr(...) → unwrap opaque JS expression wrapper
-  const exprMatch = result.match(/^\$expr\((.+)\)$/s);
-  if (exprMatch) {
-    return resolveIRTokens(exprMatch[1], symbols);
-  }
-
-  // Pass 1: $action.seq(...) → arrow function
-  const seqMatch = result.match(/^\$action\.seq\((.+)\)$/);
-  if (seqMatch) {
-    const actions = splitTopLevelArgs(seqMatch[1]);
-    const resolved = actions.map(a => resolveIRTokens(a.trim(), symbols));
-    return `() => { ${resolved.join('; ')}; }`;
-  }
-
-  // Pass 2: $action.setLocal("field", value) → setField(value)
-  // Use iterative balanced-paren matching for nested calls
-  while (result.includes('$action.setLocal(')) {
-    const updated = resolveOneSetLocal(result, symbols);
-    if (updated === result) break;
-    result = updated;
-  }
-
-  // Pass 3: $action.transition("name") → transitionName()
-  result = result.replace(/\$action\.transition\("([^"]+)"\)/g, (_, name: string) => {
-    const varName = symbols.transitions.get(name) || toCamelCase(name);
-    return `${varName}()`;
-  });
-
-  // Pass 4: $instance.["a","b"] → ["a","b"]  (array literal items)
-  result = result.replace(/\$instance\.\[/g, '[');
-
-  // Pass 5: $instance?.field / $instance.state_data.field / $instance.field
-  result = result.replace(/\$instance\??\.(?:state_data\.)?(\w+)/g, (_, field: string) => {
-    return symbols.queries.get(field) || toCamelCase(field);
-  });
-
-  // Pass 6: $local.field_name → camelCase
-  result = result.replace(/\$local\.(\w+)/g, (_, field: string) => {
-    return symbols.locals.get(field) || toCamelCase(field);
-  });
-
-  // Pass 7: $fn.concat(a, b, ...) → `${a}${b}...`
-  const concatMatch = result.match(/^\$fn\.concat\((.+)\)$/);
-  if (concatMatch) {
-    const parts = splitTopLevelArgs(concatMatch[1]);
-    return '`' + parts.map(p => `\${${p.trim()}}`).join('') + '`';
-  }
-
-  // Pass 8: not(expr) → !(expr) — mm-compute negation to JS
-  const notMatch = result.match(/^not\((.+)\)$/);
-  if (notMatch) {
-    return `!(${resolveIRTokens(notMatch[1], symbols)})`;
-  }
-
-  return result;
-}
-
-/**
- * Resolves one $action.setLocal("field", value) occurrence using balanced parens.
- */
-function resolveOneSetLocal(expr: string, symbols: SymbolTable): string {
-  const prefix = '$action.setLocal(';
-  const idx = expr.indexOf(prefix);
-  if (idx === -1) return expr;
-
-  // Find matching close paren
-  let depth = 0;
-  let end = -1;
-  for (let i = idx + prefix.length - 1; i < expr.length; i++) {
-    if (expr[i] === '(') depth++;
-    else if (expr[i] === ')') {
-      depth--;
-      if (depth === 0) { end = i; break; }
-    }
-  }
-  if (end === -1) return expr;
-
-  const inner = expr.substring(idx + prefix.length, end);
-  // Parse "field_name", value
-  const fieldMatch = inner.match(/^"([^"]+)",\s*/);
-  if (!fieldMatch) return expr;
-
-  const field = fieldMatch[1];
-  const value = inner.substring(fieldMatch[0].length);
-  const setter = symbols.setters.get(field) || setterName(field);
-  const resolvedValue = resolveIRTokens(value.trim(), symbols);
-
-  return expr.substring(0, idx) + `${setter}(${resolvedValue})` + expr.substring(end + 1);
-}
-
-/**
- * Splits a string on top-level commas (not inside balanced parens or quotes).
- */
-function splitTopLevelArgs(input: string): string[] {
-  const result: string[] = [];
-  let depth = 0;
-  let inStr: string | null = null;
-  let current = '';
-
-  for (let i = 0; i < input.length; i++) {
-    const ch = input[i];
-
-    // Handle string delimiters
-    if ((ch === '"' || ch === "'" || ch === '`') && (i === 0 || input[i - 1] !== '\\')) {
-      if (inStr === ch) inStr = null;
-      else if (!inStr) inStr = ch;
-    }
-
-    if (!inStr) {
-      if (ch === '(' || ch === '[' || ch === '{') depth++;
-      else if (ch === ')' || ch === ']' || ch === '}') depth--;
-      else if (ch === ',' && depth === 0) {
-        result.push(current);
-        current = '';
-        continue;
-      }
-    }
-
-    current += ch;
-  }
-  if (current.trim()) result.push(current);
-  return result;
-}
-
-// =============================================================================
-// Binding Expression Decompilation
-// =============================================================================
-
-/**
- * Converts an IR binding expression string to a Babel AST expression.
- *
- * First resolves all IR tokens ($local, $instance, $action, $fn) to valid JS
- * variable references using the symbol table. Then parses the result.
- */
-function emitBindingExpression(expr: string, symbols: SymbolTable): t.Expression {
-  // Placeholder for unresolvable expressions → null
-  if (expr === '[Expression]' || expr === '"[Expression]"') {
-    return t.nullLiteral();
-  }
-
-  // Step 1: Resolve IR tokens to local variable names
-  const resolved = resolveIRTokens(expr, symbols);
-
-  // fields.fieldName → fieldName
-  const fieldsMatch = resolved.match(/^fields\.(\w+)$/);
-  if (fieldsMatch) {
-    return t.identifier(toCamelCase(fieldsMatch[1]));
-  }
-
-  // set_field(snake_name, value) → setSnakeName(value)
-  const setFieldMatch = resolved.match(/^set_field\((\w+),\s*(.+)\)$/);
-  if (setFieldMatch) {
-    const setter = setterName(setFieldMatch[1]);
-    return t.callExpression(
-      t.identifier(setter),
-      [emitBindingExpression(setFieldMatch[2].trim(), symbols)]
-    );
-  }
-
-  // Simple identifier (no dots, no operators)
-  if (/^\w+$/.test(resolved)) {
-    return t.identifier(toCamelCase(resolved));
-  }
-
-  // Dot-path expression (e.g., "user.name", "order.items.length")
-  // Allow optional chaining (?)
-  if (/^[\w$]+(?:\??\.[\w$]+)+$/.test(resolved)) {
-    const parts = resolved.split(/(\??\.)/).filter(Boolean);
-    let node: t.Expression = t.identifier(parts[0]);
-    for (let i = 1; i < parts.length; i += 2) {
-      const isOptional = parts[i] === '?.';
-      const prop = parts[i + 1];
-      if (!prop) break;
-      node = t.optionalMemberExpression(
-        node,
-        t.identifier(prop),
-        false,
-        isOptional,
-      );
-    }
-    return node;
-  }
-
-  // Complex expressions — parse with @babel/parser
-  if (/[=<>!+\-*/%&|^~?:,()[\]{}]/.test(resolved)) {
-    try {
-      return parseExpression(resolved, {
-        plugins: ['typescript', 'jsx'],
-      }) as unknown as t.Expression;
-    } catch {
-      // If parsing fails, emit as string literal (safe fallback)
-      return t.stringLiteral(resolved);
-    }
-  }
-
-  // Fallback: emit as string literal (safe, always valid JS)
-  return t.stringLiteral(resolved);
-}
-
-// =============================================================================
-// JSX Attribute Emission
-// =============================================================================
-
-/**
- * Converts a config key-value pair to a JSX attribute.
- */
-function emitConfigAttribute(key: string, value: unknown): t.JSXAttribute {
-  if (typeof value === 'string') {
-    // JSX string attributes don't support backslash escapes. If the string
-    // contains quotes, newlines, or backslashes, use an expression container
-    // ({""}) instead of a plain string literal to ensure valid JSX output.
-    if (value.includes('"') || value.includes('\\') || value.includes('\n')) {
-      return t.jsxAttribute(
-        t.jsxIdentifier(key),
-        t.jsxExpressionContainer(t.stringLiteral(value))
-      );
-    }
-    return t.jsxAttribute(
-      t.jsxIdentifier(key),
-      t.stringLiteral(value)
-    );
-  }
-
-  if (typeof value === 'boolean' && value === true) {
-    // Boolean true → bare attribute (e.g., `disabled` instead of `disabled={true}`)
-    return t.jsxAttribute(t.jsxIdentifier(key), null);
-  }
-
-  // Numbers, booleans (false), objects, arrays → expression container
-  return t.jsxAttribute(
-    t.jsxIdentifier(key),
-    t.jsxExpressionContainer(valueToExpression(value))
-  );
-}
-
-// =============================================================================
-// Name Helpers
-// =============================================================================
-
-function toCamelCase(str: string): string {
-  return str.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
-}
-
-function setterName(snakeName: string): string {
-  const camel = toCamelCase(snakeName);
-  return `set${camel.charAt(0).toUpperCase()}${camel.slice(1)}`;
-}
-
-// =============================================================================
-// Main: buildJSXTree
-// =============================================================================
-
-/**
- * Converts an IRExperienceNode tree into a Babel JSX AST subtree.
- *
- * Recursively processes children and emits JSX elements with
- * config attributes, binding expressions, sx props, and Show wrappers.
- *
- * @param node - The IR experience node to convert.
- * @param imports - Import tracker to record needed imports.
- * @param symbols - Symbol table for resolving IR tokens.
- * @returns A JSX element or fragment AST node.
- */
-export function buildJSXTree(
-  node: IRExperienceNode,
-  imports: ImportTracker,
-  symbols: SymbolTable,
-): t.JSXElement | t.JSXFragment {
-  // No component → JSX Fragment for container nodes
-  if (!node.component) {
-    const fragmentChildren = (node.children || []).map(child =>
-      buildJSXTree(child, imports, symbols)
-    );
-    return t.jsxFragment(
-      t.jsxOpeningFragment(),
-      t.jsxClosingFragment(),
-      fragmentChildren,
-    );
-  }
-
-  // Track import
-  const componentName = node.component;
-  if (REACT_ATOMS.has(componentName)) {
-    addImport(imports, '@mindmatrix/react', componentName);
-  }
-
-  // Build attributes
-  const attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[] = [];
-
-  // Static config → JSX attributes (skip localDefaults — they're extracted as useState)
-  if (node.config) {
-    for (const [key, value] of Object.entries(node.config)) {
-      if (key === 'localDefaults') continue;
-      attributes.push(emitConfigAttribute(key, value));
-    }
-  }
-
-  // Bindings → JSX expression attributes
-  // NOTE: "value" bindings on Text components are emitted as props (value={expr})
-  // rather than JSX children ({expr}) for round-trip stability. The compiler
-  // extracts JSX expression children as bindings.value, so always using props
-  // ensures compile → decompile → recompile → re-decompile produces identical output.
-  if (node.bindings) {
-    for (const [key, expr] of Object.entries(node.bindings)) {
-      let emitted = emitBindingExpression(expr, symbols);
-      // Wrap event handler expressions in arrow functions for round-trip stability.
-      // The compiler decomposes `onClick={() => expr}` into IR actions but cannot
-      // decompose bare `onClick={expr}` (CallExpression). Wrapping ensures the
-      // compiler sees an arrow function on re-compilation.
-      if (isEventHandlerKey(key) && !t.isArrowFunctionExpression(emitted) && !t.isFunctionExpression(emitted)) {
-        emitted = t.arrowFunctionExpression([], emitted);
-      }
-      attributes.push(
-        t.jsxAttribute(
-          t.jsxIdentifier(key),
-          t.jsxExpressionContainer(emitted)
-        )
-      );
-    }
-  }
-
-  // Style → sx prop
-  if (node.style && typeof node.style === 'object' && Object.keys(node.style).length > 0) {
-    const sxAttr = emitSxProp(node.style);
-    if (sxAttr) attributes.push(sxAttr);
-  }
-
-  // Build children
-  const jsxChildren: Array<t.JSXElement | t.JSXFragment | t.JSXExpressionContainer | t.JSXText> = [];
-
-  // Recursive children
-  if (node.children) {
-    for (const child of node.children) {
-      jsxChildren.push(buildJSXTree(child, imports, symbols));
-    }
-  }
-
-  const isSelfClosing = jsxChildren.length === 0;
-
-  const element = t.jsxElement(
-    t.jsxOpeningElement(
-      t.jsxIdentifier(componentName),
-      attributes,
-      isSelfClosing,
-    ),
-    isSelfClosing ? null : t.jsxClosingElement(t.jsxIdentifier(componentName)),
-    jsxChildren,
-    isSelfClosing,
-  );
-
-  // Wrap with <Show when={...}> if visible_when is set
-  if (node.visible_when) {
-    addImport(imports, '@mindmatrix/react', 'Show');
-    return t.jsxElement(
-      t.jsxOpeningElement(
-        t.jsxIdentifier('Show'),
-        [
-          t.jsxAttribute(
-            t.jsxIdentifier('when'),
-            t.jsxExpressionContainer(emitBindingExpression(node.visible_when, symbols))
-          ),
-        ],
-        false,
-      ),
-      t.jsxClosingElement(t.jsxIdentifier('Show')),
-      [element],
-      false,
-    );
-  }
-
-  return element;
-}
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function isEventHandlerKey(key: string): boolean {
-  return /^on[A-Z]/.test(key);
-}
-
-function addImport(tracker: ImportTracker, source: string, name: string): void {
-  if (!tracker.has(source)) tracker.set(source, new Set());
-  tracker.get(source)!.add(name);
-}