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

package/src/codemod/control-flow.ts

@@ -1,409 +0,0 @@
-/**
- * Control flow transforms: Show/Each ↔ &&/.map()
- */
-
-import * as t from '@babel/types';
-
-// ─── Forward: React patterns → Atom control flow ───
-
-/**
- * Check if a JSX expression container holds a `{cond && <Element/>}` pattern.
- * Returns { condition, consequent } or null.
- */
-export function matchConditionalRender(
-  expr: t.Expression,
-): { condition: t.Expression; consequent: t.Expression } | null {
-  if (expr.type !== 'LogicalExpression' || expr.operator !== '&&') return null;
-  // The right side should be JSX or a parenthesized JSX
-  if (!isJSXLike(expr.right)) return null;
-  return { condition: expr.left, consequent: expr.right };
-}
-
-/**
- * Check if a JSX expression container holds a ternary `{cond ? <A/> : <B/>}`.
- * Returns { condition, consequent, alternate } or null.
- */
-export function matchTernaryRender(
-  expr: t.Expression,
-): { condition: t.Expression; consequent: t.Expression; alternate: t.Expression } | null {
-  if (expr.type !== 'ConditionalExpression') return null;
-  if (!isJSXLike(expr.consequent) && !isJSXLike(expr.alternate)) return null;
-  return {
-    condition: expr.test,
-    consequent: expr.consequent,
-    alternate: expr.alternate,
-  };
-}
-
-/**
- * Check if a JSX expression container holds `{arr.map((item) => <Element/>)}`.
- * Returns { array, param, body, keyProp } or null.
- */
-export function matchMapRender(
-  expr: t.Expression,
-): {
-  array: t.Expression;
-  param: t.Identifier | t.Pattern;
-  indexParam: t.Identifier | null;
-  body: t.Expression | t.BlockStatement;
-  keyExpression: t.Expression | null;
-} | null {
-  if (expr.type !== 'CallExpression') return null;
-  if (expr.callee.type !== 'MemberExpression') return null;
-  const prop = expr.callee.property;
-  if (!((prop.type === 'Identifier' && prop.name === 'map'))) return null;
-
-  const array = expr.callee.object;
-  const callback = expr.arguments[0];
-  if (!callback) return null;
-
-  if (
-    callback.type !== 'ArrowFunctionExpression' &&
-    callback.type !== 'FunctionExpression'
-  )
-    return null;
-
-  const param = callback.params[0] || t.identifier('item');
-  const indexParam =
-    callback.params[1] && callback.params[1].type === 'Identifier'
-      ? callback.params[1]
-      : null;
-
-  // Extract key prop from the returned JSX
-  let keyExpression: t.Expression | null = null;
-  const returnedJSX = getReturnedJSX(callback.body);
-  if (returnedJSX && returnedJSX.type === 'JSXElement') {
-    const keyAttr = returnedJSX.openingElement.attributes.find(
-      (a): a is t.JSXAttribute =>
-        a.type === 'JSXAttribute' &&
-        a.name.type === 'JSXIdentifier' &&
-        a.name.name === 'key',
-    );
-    if (keyAttr && keyAttr.value) {
-      if (keyAttr.value.type === 'JSXExpressionContainer') {
-        keyExpression = keyAttr.value.expression as t.Expression;
-      } else if (keyAttr.value.type === 'StringLiteral') {
-        keyExpression = keyAttr.value;
-      }
-    }
-  }
-
-  return {
-    array,
-    param: param as t.Identifier | t.Pattern,
-    indexParam,
-    body: callback.body,
-    keyExpression,
-  };
-}
-
-// ─── Create atom JSX for forward ───
-
-/**
- * Create <Show when={condition}>{children}</Show>
- */
-export function createShowElement(
-  condition: t.Expression,
-  children: t.JSXElement | t.JSXFragment | t.Expression,
-): t.JSXElement {
-  const whenAttr = t.jsxAttribute(
-    t.jsxIdentifier('when'),
-    t.jsxExpressionContainer(condition),
-  );
-
-  const childNodes: (t.JSXElement | t.JSXExpressionContainer | t.JSXText | t.JSXFragment)[] = [];
-
-  if (t.isJSXElement(children) || t.isJSXFragment(children)) {
-    childNodes.push(children);
-  } else {
-    childNodes.push(t.jsxExpressionContainer(children));
-  }
-
-  return t.jsxElement(
-    t.jsxOpeningElement(t.jsxIdentifier('Show'), [whenAttr]),
-    t.jsxClosingElement(t.jsxIdentifier('Show')),
-    childNodes,
-    false,
-  );
-}
-
-/**
- * Create <Each items={array} as="param">{(param) => ...}</Each>
- */
-export function createEachElement(
-  items: t.Expression,
-  paramName: string,
-  body: t.Expression | t.BlockStatement,
-  keyExpression: t.Expression | null,
-  indexParam: t.Identifier | null,
-): t.JSXElement {
-  const attrs: t.JSXAttribute[] = [
-    t.jsxAttribute(
-      t.jsxIdentifier('items'),
-      t.jsxExpressionContainer(items),
-    ),
-    t.jsxAttribute(t.jsxIdentifier('as'), t.stringLiteral(paramName)),
-  ];
-
-  if (keyExpression) {
-    attrs.push(
-      t.jsxAttribute(
-        t.jsxIdentifier('keyField'),
-        t.jsxExpressionContainer(keyExpression),
-      ),
-    );
-  }
-
-  // Build callback: {(param, index) => ...}
-  const params: t.Identifier[] = [t.identifier(paramName)];
-  if (indexParam) params.push(indexParam);
-
-  // If body is a block statement returning JSX, keep it; if expression, keep as arrow
-  const arrow = t.arrowFunctionExpression(params, body);
-  const child = t.jsxExpressionContainer(arrow);
-
-  // Remove key prop from the returned JSX (it's now on Each's keyField)
-  removeKeyFromBody(body);
-
-  return t.jsxElement(
-    t.jsxOpeningElement(t.jsxIdentifier('Each'), attrs),
-    t.jsxClosingElement(t.jsxIdentifier('Each')),
-    [child],
-    false,
-  );
-}
-
-// ─── Reverse: Atom control flow → React patterns ───
-
-/**
- * Check if a JSXElement is <Show when={expr}>.
- */
-export function matchShowElement(
-  node: t.JSXElement,
-): { condition: t.Expression; children: t.JSXElement['children'] } | null {
-  const tag = node.openingElement.name;
-  if (tag.type !== 'JSXIdentifier' || tag.name !== 'Show') return null;
-
-  const whenAttr = node.openingElement.attributes.find(
-    (a): a is t.JSXAttribute =>
-      a.type === 'JSXAttribute' &&
-      a.name.type === 'JSXIdentifier' &&
-      a.name.name === 'when',
-  );
-  if (!whenAttr || !whenAttr.value) return null;
-
-  let condition: t.Expression;
-  if (whenAttr.value.type === 'JSXExpressionContainer') {
-    condition = whenAttr.value.expression as t.Expression;
-  } else if (whenAttr.value.type === 'StringLiteral') {
-    condition = whenAttr.value;
-  } else {
-    return null;
-  }
-
-  return { condition, children: node.children };
-}
-
-/**
- * Check if a JSXElement is <Each items={expr} as="param">.
- */
-export function matchEachElement(
-  node: t.JSXElement,
-): {
-  items: t.Expression;
-  paramName: string;
-  keyExpression: t.Expression | null;
-  children: t.JSXElement['children'];
-} | null {
-  const tag = node.openingElement.name;
-  if (tag.type !== 'JSXIdentifier' || tag.name !== 'Each') return null;
-
-  const itemsAttr = node.openingElement.attributes.find(
-    (a): a is t.JSXAttribute =>
-      a.type === 'JSXAttribute' &&
-      a.name.type === 'JSXIdentifier' &&
-      a.name.name === 'items',
-  );
-  if (!itemsAttr?.value) return null;
-
-  const asAttr = node.openingElement.attributes.find(
-    (a): a is t.JSXAttribute =>
-      a.type === 'JSXAttribute' &&
-      a.name.type === 'JSXIdentifier' &&
-      a.name.name === 'as',
-  );
-
-  const keyAttr = node.openingElement.attributes.find(
-    (a): a is t.JSXAttribute =>
-      a.type === 'JSXAttribute' &&
-      a.name.type === 'JSXIdentifier' &&
-      a.name.name === 'keyField',
-  );
-
-  let items: t.Expression;
-  if (itemsAttr.value.type === 'JSXExpressionContainer') {
-    items = itemsAttr.value.expression as t.Expression;
-  } else {
-    return null;
-  }
-
-  const paramName =
-    asAttr?.value?.type === 'StringLiteral' ? asAttr.value.value : 'item';
-
-  let keyExpression: t.Expression | null = null;
-  if (keyAttr?.value?.type === 'JSXExpressionContainer') {
-    keyExpression = keyAttr.value.expression as t.Expression;
-  }
-
-  return { items, paramName, keyExpression, children: node.children };
-}
-
-/**
- * Convert <Show> back to {condition && children}
- */
-export function showToConditional(
-  condition: t.Expression,
-  children: t.JSXElement['children'],
-): t.JSXExpressionContainer {
-  const content = unwrapChildren(children);
-  const logical = t.logicalExpression('&&', condition, content);
-  return t.jsxExpressionContainer(logical);
-}
-
-/**
- * Convert <Each> back to {items.map((param) => children)}
- */
-export function eachToMap(
-  items: t.Expression,
-  paramName: string,
-  keyExpression: t.Expression | null,
-  children: t.JSXElement['children'],
-): t.JSXExpressionContainer {
-  // Find the callback in children (should be a JSXExpressionContainer with arrow)
-  let callback: t.ArrowFunctionExpression | t.FunctionExpression | null = null;
-
-  for (const child of children) {
-    if (child.type === 'JSXExpressionContainer' && child.expression.type !== 'JSXEmptyExpression') {
-      const expr = child.expression;
-      if (expr.type === 'ArrowFunctionExpression' || expr.type === 'FunctionExpression') {
-        callback = expr;
-        break;
-      }
-    }
-  }
-
-  if (!callback) {
-    // Fallback: wrap children in arrow function
-    const content = unwrapChildren(children);
-    callback = t.arrowFunctionExpression([t.identifier(paramName)], content);
-  }
-
-  // If keyExpression, add key prop to the returned JSX
-  if (keyExpression) {
-    addKeyToCallback(callback, keyExpression);
-  }
-
-  const mapCall = t.callExpression(
-    t.memberExpression(items, t.identifier('map')),
-    [callback],
-  );
-
-  return t.jsxExpressionContainer(mapCall);
-}
-
-// ─── Helpers ───
-
-function isJSXLike(node: t.Node): boolean {
-  return (
-    node.type === 'JSXElement' ||
-    node.type === 'JSXFragment' ||
-    (node.type === 'ParenthesizedExpression' && isJSXLike((node as any).expression))
-  );
-}
-
-function getReturnedJSX(
-  body: t.Expression | t.BlockStatement,
-): t.JSXElement | t.JSXFragment | null {
-  if (body.type === 'JSXElement' || body.type === 'JSXFragment') return body;
-  if (body.type === 'ParenthesizedExpression') {
-    return getReturnedJSX((body as any).expression);
-  }
-  if (body.type === 'BlockStatement') {
-    for (const stmt of body.body) {
-      if (stmt.type === 'ReturnStatement' && stmt.argument) {
-        if (
-          stmt.argument.type === 'JSXElement' ||
-          stmt.argument.type === 'JSXFragment'
-        ) {
-          return stmt.argument;
-        }
-        if (stmt.argument.type === 'ParenthesizedExpression') {
-          return getReturnedJSX((stmt.argument as any).expression);
-        }
-      }
-    }
-  }
-  return null;
-}
-
-function removeKeyFromBody(body: t.Expression | t.BlockStatement): void {
-  const jsx = getReturnedJSX(body);
-  if (jsx && jsx.type === 'JSXElement') {
-    jsx.openingElement.attributes = jsx.openingElement.attributes.filter(
-      a =>
-        !(
-          a.type === 'JSXAttribute' &&
-          a.name.type === 'JSXIdentifier' &&
-          a.name.name === 'key'
-        ),
-    );
-  }
-}
-
-function addKeyToCallback(
-  callback: t.ArrowFunctionExpression | t.FunctionExpression,
-  keyExpr: t.Expression,
-): void {
-  const jsx = getReturnedJSX(callback.body);
-  if (jsx && jsx.type === 'JSXElement') {
-    // Check if key already exists
-    const hasKey = jsx.openingElement.attributes.some(
-      a =>
-        a.type === 'JSXAttribute' &&
-        a.name.type === 'JSXIdentifier' &&
-        a.name.name === 'key',
-    );
-    if (!hasKey) {
-      jsx.openingElement.attributes.unshift(
-        t.jsxAttribute(
-          t.jsxIdentifier('key'),
-          t.jsxExpressionContainer(keyExpr),
-        ),
-      );
-    }
-  }
-}
-
-/**
- * Unwrap JSX children into a single expression.
- * If single JSX child, return it. If multiple, wrap in fragment.
- */
-function unwrapChildren(
-  children: t.JSXElement['children'],
-): t.JSXElement | t.JSXFragment | t.Expression {
-  const meaningful = children.filter(c => {
-    if (c.type === 'JSXText') return c.value.trim().length > 0;
-    return true;
-  });
-
-  if (meaningful.length === 1) {
-    const child = meaningful[0];
-    if (child.type === 'JSXElement' || child.type === 'JSXFragment') return child;
-    if (child.type === 'JSXExpressionContainer') {
-      return child.expression as t.Expression;
-    }
-  }
-
-  // Wrap in fragment
-  return t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), meaningful);
-}

package/src/codemod/forward.ts

@@ -1,244 +0,0 @@
-/**
- * Forward transform: Raw React → Workflow Atoms
- *
- * Babel visitor that:
- * 1. Renames HTML elements to atoms (div→Stack/Row, span→Text, etc.)
- * 2. Transforms control flow ({cond && <X/>} → <Show>, {arr.map()} → <Each>)
- * 3. Cleans up implicit className classes (flex, flex-col)
- * 4. Adds @mm-original annotations for round-trip fidelity
- * 5. Updates imports
- */
-
-import type { NodePath, Visitor } from '@babel/traverse';
-import * as t from '@babel/types';
-import {
-  classifyElement,
-  extractStaticClasses,
-  removeClassesFromString,
-} from './classify';
-import {
-  matchConditionalRender,
-  matchTernaryRender,
-  matchMapRender,
-  createShowElement,
-  createEachElement,
-} from './control-flow';
-import { addAnnotationComment } from './annotation';
-import type { ImportTracker } from './import-manager';
-
-export interface ForwardOptions {
-  /** Add @mm-original annotations for round-trip fidelity */
-  annotate?: boolean;
-  /** State transform mode */
-  stateMode?: 'preserve' | 'migrate' | 'annotate';
-}
-
-/**
- * Create the forward visitor (Raw React → Atoms).
- */
-export function createForwardVisitor(
-  imports: ImportTracker,
-  options: ForwardOptions = {},
-): Visitor {
-  const { annotate = true } = options;
-
-  return {
-    JSXElement(path: NodePath<t.JSXElement>) {
-      const opening = path.node.openingElement;
-      const tag = opening.name;
-
-      // Only transform simple identifiers (div, span, button, etc.)
-      // Skip namespaced (xml:foo) and member expressions (motion.div)
-      if (tag.type !== 'JSXIdentifier') return;
-
-      const tagName = tag.name;
-
-      // Extract className for classification
-      const classAttr = opening.attributes.find(
-        (a): a is t.JSXAttribute =>
-          a.type === 'JSXAttribute' &&
-          a.name.type === 'JSXIdentifier' &&
-          a.name.name === 'className',
-      );
-      const staticClasses = extractStaticClasses(classAttr?.value ?? null);
-
-      // Classify the element
-      const result = classifyElement(tagName, staticClasses);
-      if (!result) return;
-
-      // Add annotation before transforming
-      if (annotate) {
-        addAnnotationComment(path.node, result.originalTag, staticClasses);
-      }
-
-      // Rename the element
-      tag.name = result.atom;
-      if (path.node.closingElement) {
-        (path.node.closingElement.name as t.JSXIdentifier).name = result.atom;
-      }
-
-      // Track atom usage for imports
-      imports.addAtom(result.atom);
-
-      // Clean up className: remove implicit classes
-      if (classAttr && result.removeClasses.length > 0) {
-        updateClassName(classAttr, result.removeClasses, 'remove');
-      }
-
-      // Add extra props (e.g., variant="h1" for headings, multiline for textarea)
-      for (const [key, value] of Object.entries(result.addProps)) {
-        const existing = opening.attributes.find(
-          (a): a is t.JSXAttribute =>
-            a.type === 'JSXAttribute' &&
-            a.name.type === 'JSXIdentifier' &&
-            a.name.name === key,
-        );
-        if (!existing) {
-          if (typeof value === 'boolean') {
-            opening.attributes.push(
-              t.jsxAttribute(
-                t.jsxIdentifier(key),
-                value ? null : t.jsxExpressionContainer(t.booleanLiteral(false)),
-              ),
-            );
-          } else {
-            opening.attributes.push(
-              t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(value)),
-            );
-          }
-        }
-      }
-
-      // Rename HTML event handlers to atom conventions
-      renameEventHandlers(opening, 'forward');
-    },
-
-    JSXExpressionContainer(path: NodePath<t.JSXExpressionContainer>) {
-      // Only transform expression containers that are direct children of JSX elements
-      if (!path.parentPath.isJSXElement() && !path.parentPath.isJSXFragment()) return;
-
-      const expr = path.node.expression;
-      if (expr.type === 'JSXEmptyExpression') return;
-
-      // Pattern: {condition && <Element />} → <Show when={condition}>
-      const conditional = matchConditionalRender(expr as t.Expression);
-      if (conditional) {
-        const showEl = createShowElement(conditional.condition, conditional.consequent);
-        imports.addAtom('Show');
-        path.replaceWith(showEl);
-        return;
-      }
-
-      // Pattern: {condition ? <A /> : <B />} → <Show when={cond}><A/></Show><Show when={!cond}><B/></Show>
-      const ternary = matchTernaryRender(expr as t.Expression);
-      if (ternary) {
-        const show1 = createShowElement(ternary.condition, ternary.consequent);
-        const negated = t.unaryExpression('!', ternary.condition);
-        const show2 = createShowElement(negated, ternary.alternate);
-        imports.addAtom('Show');
-
-        // Replace with both Show elements
-        path.replaceWithMultiple([show1, show2]);
-        return;
-      }
-
-      // Pattern: {array.map((item) => <Element />)} → <Each items={array}>
-      const mapRender = matchMapRender(expr as t.Expression);
-      if (mapRender) {
-        const paramName =
-          mapRender.param.type === 'Identifier'
-            ? mapRender.param.name
-            : 'item';
-
-        const eachEl = createEachElement(
-          mapRender.array,
-          paramName,
-          mapRender.body,
-          mapRender.keyExpression,
-          mapRender.indexParam,
-        );
-        imports.addAtom('Each');
-        path.replaceWith(eachEl);
-        return;
-      }
-    },
-  };
-}
-
-/**
- * Update a className attribute: remove or add classes.
- */
-function updateClassName(
-  attr: t.JSXAttribute,
-  classes: string[],
-  operation: 'remove' | 'add',
-): void {
-  if (!attr.value) return;
-
-  if (attr.value.type === 'StringLiteral') {
-    const result =
-      operation === 'remove'
-        ? removeClassesFromString(attr.value.value, classes)
-        : attr.value.value;
-
-    if (result.trim()) {
-      attr.value = t.stringLiteral(result);
-    } else {
-      // Empty className — could remove the attribute, but keep it for round-trip
-      attr.value = t.stringLiteral('');
-    }
-    return;
-  }
-
-  if (attr.value.type === 'JSXExpressionContainer') {
-    const expr = attr.value.expression;
-
-    // Template literal: remove from static quasis
-    if (expr.type === 'TemplateLiteral') {
-      for (const quasi of expr.quasis) {
-        if (operation === 'remove') {
-          quasi.value.raw = removeClassesFromString(quasi.value.raw, classes);
-          quasi.value.cooked = removeClassesFromString(quasi.value.cooked ?? quasi.value.raw, classes);
-        }
-      }
-      return;
-    }
-
-    // cn("flex items-center", dynamic) → cn("items-center", dynamic)
-    if (
-      expr.type === 'CallExpression' &&
-      expr.callee.type === 'Identifier' &&
-      expr.callee.name === 'cn' &&
-      expr.arguments.length > 0
-    ) {
-      const firstArg = expr.arguments[0];
-      if (firstArg.type === 'StringLiteral' && operation === 'remove') {
-        firstArg.value = removeClassesFromString(firstArg.value, classes);
-      }
-      return;
-    }
-  }
-}
-
-/**
- * Rename HTML event handler props to atom conventions and vice versa.
- */
-function renameEventHandlers(
-  opening: t.JSXOpeningElement,
-  direction: 'forward' | 'reverse',
-): void {
-  const map: Record<string, string> =
-    direction === 'forward'
-      ? { onClick: 'onPress', onChange: 'onChange', onSubmit: 'onSubmit' }
-      : { onPress: 'onClick' };
-
-  for (const attr of opening.attributes) {
-    if (
-      attr.type === 'JSXAttribute' &&
-      attr.name.type === 'JSXIdentifier' &&
-      attr.name.name in map
-    ) {
-      attr.name.name = map[attr.name.name];
-    }
-  }
-}