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

package/src/codemod/__tests__/round-trip.test.ts

@@ -1,137 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { transform } from '../index';
-
-/**
- * Round-trip invariant: forward(source) → reverse → ≈ source
- *
- * "≈" means semantically equivalent — whitespace may differ,
- * and plain divs may gain flex/flex-col (since atoms default to Stack).
- */
-
-function roundTrip(source: string): string {
-  const forwarded = transform(source, { direction: 'forward', annotate: true });
-  const reversed = transform(forwarded.code, { direction: 'reverse', annotate: false });
-  return reversed.code;
-}
-
-function normalize(s: string): string {
-  return s.replace(/\s+/g, ' ').trim();
-}
-
-describe('round-trip invariant', () => {
-  it('preserves a simple flex row', () => {
-    const input = `const App = () => <div className="flex items-center gap-2">hello</div>;`;
-    const result = roundTrip(input);
-    expect(normalize(result)).toContain('flex items-center gap-2');
-    expect(result).toContain('<div');
-  });
-
-  it('preserves a flex-col stack', () => {
-    const input = `const App = () => <div className="flex flex-col gap-4 p-2">hello</div>;`;
-    const result = roundTrip(input);
-    expect(normalize(result)).toContain('flex flex-col gap-4 p-2');
-  });
-
-  it('preserves conditional rendering', () => {
-    const input = `const App = () => <div className="flex">{visible && <span className="text-sm">hi</span>}</div>;`;
-    const result = roundTrip(input);
-    expect(result).toContain('visible &&');
-    expect(result).toContain('<span');
-  });
-
-  it('preserves .map() rendering', () => {
-    const input = `const App = () => (
-  <div className="flex flex-col">
-    {items.map(item => <span key={item.id}>{item.name}</span>)}
-  </div>
-);`;
-    const result = roundTrip(input);
-    expect(result).toContain('.map(');
-    expect(result).toContain('<span');
-  });
-
-  it('preserves button with onClick', () => {
-    const input = `const App = () => <button className="px-4 py-2" onClick={handleClick}>Go</button>;`;
-    const result = roundTrip(input);
-    expect(result).toContain('<button');
-    expect(result).toContain('onClick');
-    expect(result).toContain('px-4 py-2');
-  });
-
-  it('preserves img', () => {
-    const input = `const App = () => <img src="/avatar.png" className="w-9 h-9 rounded-full" />;`;
-    const result = roundTrip(input);
-    expect(result).toContain('<img');
-    expect(result).toContain('w-9 h-9 rounded-full');
-    expect(result).toContain('src="/avatar.png"');
-  });
-
-  it('preserves headings', () => {
-    const input = `const App = () => <h2 className="font-bold text-lg">Title</h2>;`;
-    const result = roundTrip(input);
-    expect(result).toContain('<h2');
-    expect(result).toContain('font-bold');
-  });
-
-  it('preserves textarea', () => {
-    const input = `const App = () => <textarea className="w-full h-20" />;`;
-    const result = roundTrip(input);
-    expect(result).toContain('<textarea');
-    expect(result).toContain('w-full h-20');
-  });
-
-  it('preserves a full component with mixed patterns', () => {
-    const input = `
-import React, { useState } from 'react';
-import { Hash } from 'lucide-react';
-
-const ChannelItem = ({ channel, isActive, onSelect }) => {
-  const [hovering, setHovering] = useState(false);
-
-  return (
-    <div
-      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-800 cursor-pointer"
-      onClick={() => onSelect(channel.id)}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-    >
-      <Hash className="w-3.5 h-3.5 text-gray-400 shrink-0" />
-      <span className="text-sm text-gray-300 truncate flex-1">
-        {channel.name}
-      </span>
-      {channel.unreadCount > 0 && (
-        <span className="bg-blue-500 text-white text-xs px-1.5 rounded-full min-w-[18px] text-center">
-          {channel.unreadCount}
-        </span>
-      )}
-    </div>
-  );
-};`;
-    const result = roundTrip(input);
-
-    // All key features preserved
-    expect(result).toContain('useState');
-    expect(result).toContain('Hash');
-    expect(result).toContain('channel.name');
-    expect(result).toContain('channel.unreadCount');
-    expect(result).toContain('hover:bg-gray-800');
-    expect(result).toContain('cursor-pointer');
-    expect(result).toContain('lucide-react');
-    expect(result).toContain('onMouseEnter');
-    expect(result).toContain('onMouseLeave');
-  });
-
-  it('preserves motion.div (not transformed)', () => {
-    const input = `const App = () => <motion.div className="flex" initial={{ opacity: 0 }}>hi</motion.div>;`;
-    const result = roundTrip(input);
-    expect(result).toContain('motion.div');
-    expect(result).toContain('initial=');
-  });
-
-  it('preserves PascalCase components (not transformed)', () => {
-    const input = `const App = () => <AnimatePresence><MyWidget>hi</MyWidget></AnimatePresence>;`;
-    const result = roundTrip(input);
-    expect(result).toContain('<AnimatePresence');
-    expect(result).toContain('<MyWidget');
-  });
-});

package/src/codemod/annotation.ts

@@ -1,97 +0,0 @@
-/**
- * Round-trip annotation — preserves original element info as JSDoc comments.
- *
- * Format: @mm-original tagName.class1.class2.class3
- */
-
-import * as t from '@babel/types';
-
-const ANNOTATION_PREFIX = '@mm-original';
-
-/**
- * Create an annotation comment for a transformed element.
- */
-export function createAnnotation(
-  originalTag: string,
-  classNames: string[],
-): string {
-  const parts = [originalTag, ...classNames.slice(0, 10)]; // limit to 10 classes
-  return `${ANNOTATION_PREFIX} ${parts.join('.')}`;
-}
-
-/**
- * Parse an annotation comment.
- * Returns { tag, classes } or null if not an annotation.
- */
-export function parseAnnotation(
-  comment: string,
-): { tag: string; classes: string[] } | null {
-  const trimmed = comment.trim();
-  if (!trimmed.startsWith(ANNOTATION_PREFIX)) return null;
-
-  const rest = trimmed.slice(ANNOTATION_PREFIX.length).trim();
-  if (!rest) return null;
-
-  const parts = rest.split('.');
-  const tag = parts[0];
-  const classes = parts.slice(1);
-
-  return { tag, classes };
-}
-
-/**
- * Add a leading comment annotation to a JSX element node.
- */
-export function addAnnotationComment(
-  node: t.Node,
-  originalTag: string,
-  classNames: string[],
-): void {
-  const text = ` ${createAnnotation(originalTag, classNames)} `;
-  if (!node.leadingComments) {
-    node.leadingComments = [];
-  }
-  node.leadingComments.push({
-    type: 'CommentBlock',
-    value: text,
-  } as t.Comment);
-}
-
-/**
- * Read and remove the annotation comment from a node.
- * Returns parsed annotation or null.
- */
-export function readAnnotationComment(
-  node: t.Node,
-): { tag: string; classes: string[] } | null {
-  if (!node.leadingComments) return null;
-
-  for (let i = node.leadingComments.length - 1; i >= 0; i--) {
-    const comment = node.leadingComments[i];
-    const parsed = parseAnnotation(comment.value);
-    if (parsed) {
-      // Remove the annotation comment
-      node.leadingComments.splice(i, 1);
-      return parsed;
-    }
-  }
-
-  return null;
-}
-
-/**
- * Strip all @mm-original annotations from a node and its children.
- * Used with --strip-annotations flag.
- */
-export function stripAnnotations(node: t.Node): void {
-  if (node.leadingComments) {
-    node.leadingComments = node.leadingComments.filter(
-      c => !parseAnnotation(c.value),
-    );
-  }
-  if (node.trailingComments) {
-    node.trailingComments = node.trailingComments.filter(
-      c => !parseAnnotation(c.value),
-    );
-  }
-}

package/src/codemod/classify.ts

@@ -1,197 +0,0 @@
-/**
- * Element classifier — analyzes tag name + className to determine target atom.
- */
-
-import type * as t from '@babel/types';
-import { FORWARD_RULES, REVERSE_RULES, CONTROL_FLOW_ATOMS, TEXT_VARIANT_TO_TAG } from './rules';
-import type { MappingRule } from './rules';
-
-export interface ClassifyResult {
-  atom: string;
-  /** Classes to remove from className (implicit in atom) */
-  removeClasses: string[];
-  /** Props to add to the element */
-  addProps: Record<string, string | boolean>;
-  /** Original tag for annotation */
-  originalTag: string;
-}
-
-export interface ReverseClassifyResult {
-  htmlTag: string;
-  /** Classes to inject into className */
-  injectClasses: string[];
-  /** Props to remove (encoded in HTML tag) */
-  removeProps: string[];
-}
-
-/**
- * Extract static class names from a className JSX attribute value.
- * Handles: string literals, template literals (static parts), cn() first arg.
- */
-export function extractStaticClasses(attrValue: t.Node | null | undefined): string[] {
-  if (!attrValue) return [];
-
-  // className="flex items-center"
-  if (attrValue.type === 'StringLiteral') {
-    return attrValue.value.split(/\s+/).filter(Boolean);
-  }
-
-  // className={expr} — unwrap JSXExpressionContainer
-  if (attrValue.type === 'JSXExpressionContainer') {
-    return extractStaticClasses(attrValue.expression as t.Node);
-  }
-
-  // className={`flex items-center ${dynamic}`}
-  if (attrValue.type === 'TemplateLiteral') {
-    const staticParts = attrValue.quasis.map(q => q.value.raw).join(' ');
-    return staticParts.split(/\s+/).filter(Boolean);
-  }
-
-  // className={cn("flex items-center", dynamic)}
-  if (
-    attrValue.type === 'CallExpression' &&
-    attrValue.callee.type === 'Identifier' &&
-    attrValue.callee.name === 'cn' &&
-    attrValue.arguments.length > 0
-  ) {
-    const firstArg = attrValue.arguments[0];
-    if (firstArg.type === 'StringLiteral') {
-      return firstArg.value.split(/\s+/).filter(Boolean);
-    }
-  }
-
-  return [];
-}
-
-/**
- * Classify a raw HTML element into its target workflow atom.
- */
-export function classifyElement(
-  tagName: string,
-  classNames: string[],
-): ClassifyResult | null {
-  // Skip elements that are already atoms or components (PascalCase)
-  if (tagName[0] === tagName[0].toUpperCase() && tagName[0] !== tagName[0].toLowerCase()) {
-    return null;
-  }
-
-  // Skip motion.* elements
-  if (tagName.startsWith('motion.')) {
-    return null;
-  }
-
-  // Find matching rules for this tag, sorted by priority descending
-  const candidates = FORWARD_RULES
-    .filter(r => r.htmlTag === tagName)
-    .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-
-  if (candidates.length === 0) return null;
-
-  // For div, we need to check className signals
-  if (tagName === 'div') {
-    for (const rule of candidates) {
-      if (!rule.classSignal || rule.classSignal.length === 0) {
-        // Default rule (no signal required) — only use if no better match
-        continue;
-      }
-      const hasAllSignals = rule.classSignal.every(s => classNames.includes(s));
-      if (hasAllSignals) {
-        return makeResult(rule, tagName);
-      }
-    }
-    // Fallback: default div rule (priority 0)
-    const defaultRule = candidates.find(r => (r.priority ?? 0) === 0);
-    if (defaultRule) {
-      return makeResult(defaultRule, tagName);
-    }
-  }
-
-  // For non-div elements, take the first (and usually only) match
-  const rule = candidates[0];
-  return makeResult(rule, tagName);
-}
-
-function makeResult(rule: MappingRule, tagName: string): ClassifyResult {
-  return {
-    atom: rule.atom,
-    removeClasses: rule.implicitClasses ?? [],
-    addProps: rule.props ?? {},
-    originalTag: tagName,
-  };
-}
-
-/**
- * Reverse-classify a workflow atom into its target HTML element.
- */
-export function reverseClassifyAtom(
-  atomName: string,
-  props: Map<string, t.Node>,
-): ReverseClassifyResult | null {
-  // Skip control flow atoms
-  if (CONTROL_FLOW_ATOMS.has(atomName)) return null;
-
-  // Special case: Text with variant → heading tag
-  if (atomName === 'Text') {
-    const variantNode = props.get('variant');
-    if (variantNode && variantNode.type === 'StringLiteral') {
-      const tag = TEXT_VARIANT_TO_TAG[variantNode.value];
-      if (tag) {
-        return {
-          htmlTag: tag,
-          injectClasses: [],
-          removeProps: ['variant'],
-        };
-      }
-    }
-    // Default Text → span
-    return { htmlTag: 'span', injectClasses: [], removeProps: [] };
-  }
-
-  // Special case: TextInput with multiline → textarea
-  if (atomName === 'TextInput') {
-    const multilineNode = props.get('multiline');
-    if (multilineNode) {
-      const isMultiline =
-        (multilineNode.type === 'BooleanLiteral' && multilineNode.value) ||
-        (multilineNode.type === 'JSXExpressionContainer' &&
-          (multilineNode as any).expression?.type === 'BooleanLiteral' &&
-          (multilineNode as any).expression?.value);
-      if (isMultiline) {
-        return { htmlTag: 'textarea', injectClasses: [], removeProps: ['multiline'] };
-      }
-    }
-    return { htmlTag: 'input', injectClasses: [], removeProps: [] };
-  }
-
-  const rule = REVERSE_RULES.find(r => r.atom === atomName);
-  if (!rule) return null;
-
-  return {
-    htmlTag: rule.htmlTag,
-    injectClasses: rule.injectClasses ?? [],
-    removeProps: rule.removeProps ?? [],
-  };
-}
-
-/**
- * Remove classes from a className string.
- */
-export function removeClassesFromString(className: string, toRemove: string[]): string {
-  if (toRemove.length === 0) return className;
-  const removeSet = new Set(toRemove);
-  return className
-    .split(/\s+/)
-    .filter(c => c && !removeSet.has(c))
-    .join(' ');
-}
-
-/**
- * Add classes to the beginning of a className string.
- */
-export function addClassesToString(className: string, toAdd: string[]): string {
-  if (toAdd.length === 0) return className;
-  const existing = new Set(className.split(/\s+/).filter(Boolean));
-  const newClasses = toAdd.filter(c => !existing.has(c));
-  if (newClasses.length === 0) return className;
-  return [...newClasses, ...className.split(/\s+/).filter(Boolean)].join(' ');
-}

package/src/codemod/cli.ts

@@ -1,207 +0,0 @@
-#!/usr/bin/env node
-/**
- * CLI for the bidirectional React ↔ Workflow Atom codemod.
- *
- * Usage:
- *   npx mm-codemod forward src/features/chat/
- *   npx mm-codemod reverse packages/blueprint-chat/app/
- *   npx mm-codemod verify src/features/chat/
- */
-
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
-import { resolve, relative, dirname } from 'path';
-import { glob } from 'glob';
-import { transform, type CodemodOptions } from './index';
-import type { StateMode } from './state-transform';
-
-interface CLIOptions {
-  direction: 'forward' | 'reverse' | 'verify';
-  paths: string[];
-  dryRun: boolean;
-  stripAnnotations: boolean;
-  stateMode: StateMode;
-  verbose: boolean;
-  outDir?: string;
-}
-
-function parseArgs(argv: string[]): CLIOptions {
-  const args = argv.slice(2);
-  const direction = args[0] as CLIOptions['direction'];
-
-  if (!direction || !['forward', 'reverse', 'verify'].includes(direction)) {
-    console.error('Usage: mm-codemod <forward|reverse|verify> <paths...> [options]');
-    console.error('');
-    console.error('Options:');
-    console.error('  --dry-run           Print diff without writing');
-    console.error('  --strip-annotations Remove @mm-original comments');
-    console.error('  --mode <mode>       State mode: preserve|migrate|annotate');
-    console.error('  --out <dir>         Output directory (default: in-place)');
-    console.error('  --verbose           Log every transformation');
-    process.exit(1);
-  }
-
-  const paths: string[] = [];
-  let dryRun = false;
-  let stripAnnotations = false;
-  let stateMode: StateMode = 'preserve';
-  let verbose = false;
-  let outDir: string | undefined;
-
-  for (let i = 1; i < args.length; i++) {
-    const arg = args[i];
-    if (arg === '--dry-run') {
-      dryRun = true;
-    } else if (arg === '--strip-annotations') {
-      stripAnnotations = true;
-    } else if (arg === '--mode') {
-      stateMode = args[++i] as StateMode;
-    } else if (arg === '--out') {
-      outDir = args[++i];
-    } else if (arg === '--verbose') {
-      verbose = true;
-    } else if (!arg.startsWith('-')) {
-      paths.push(arg);
-    }
-  }
-
-  if (paths.length === 0) {
-    console.error('Error: No paths specified');
-    process.exit(1);
-  }
-
-  return { direction, paths, dryRun, stripAnnotations, stateMode, verbose, outDir };
-}
-
-async function findFiles(paths: string[]): Promise<string[]> {
-  const files: string[] = [];
-
-  for (const p of paths) {
-    const resolved = resolve(p);
-    const matches = await glob('**/*.{tsx,jsx}', {
-      cwd: resolved,
-      absolute: true,
-      ignore: ['**/node_modules/**', '**/__tests__/**', '**/dist/**'],
-    });
-    files.push(...matches);
-  }
-
-  return files.sort();
-}
-
-function transformFile(
-  filePath: string,
-  options: CodemodOptions,
-  verbose: boolean,
-): { code: string; changed: boolean } {
-  const source = readFileSync(filePath, 'utf-8');
-
-  try {
-    const result = transform(source, options);
-    const changed = result.code !== source;
-
-    if (verbose && changed) {
-      console.log(`  [${options.direction}] ${relative(process.cwd(), filePath)}`);
-    }
-
-    return { code: result.code, changed };
-  } catch (err: any) {
-    console.error(`  [ERROR] ${relative(process.cwd(), filePath)}: ${err.message}`);
-    return { code: source, changed: false };
-  }
-}
-
-async function main() {
-  const opts = parseArgs(process.argv);
-  const files = await findFiles(opts.paths);
-
-  console.log(`mm-codemod: ${opts.direction} — ${files.length} file(s)`);
-
-  if (opts.direction === 'verify') {
-    // Round-trip verification: forward(source) → reverse(result) → diff
-    let pass = 0;
-    let fail = 0;
-
-    for (const file of files) {
-      const source = readFileSync(file, 'utf-8');
-      const forward = transform(source, {
-        direction: 'forward',
-        annotate: true,
-        stateMode: opts.stateMode,
-      });
-      const roundTripped = transform(forward.code, {
-        direction: 'reverse',
-        annotate: false,
-        stateMode: opts.stateMode,
-      });
-
-      // Normalize whitespace for comparison
-      const normalize = (s: string) => s.replace(/\s+/g, ' ').trim();
-      if (normalize(roundTripped.code) === normalize(source)) {
-        pass++;
-        if (opts.verbose) console.log(`  [PASS] ${relative(process.cwd(), file)}`);
-      } else {
-        fail++;
-        console.log(`  [FAIL] ${relative(process.cwd(), file)}`);
-        if (opts.verbose) {
-          console.log('    Expected (normalized):');
-          console.log(`      ${normalize(source).slice(0, 200)}...`);
-          console.log('    Got (normalized):');
-          console.log(`      ${normalize(roundTripped.code).slice(0, 200)}...`);
-        }
-      }
-    }
-
-    console.log(`\nResults: ${pass} pass, ${fail} fail out of ${files.length} files`);
-    process.exit(fail > 0 ? 1 : 0);
-  }
-
-  // Forward or reverse
-  const codemodOptions: CodemodOptions = {
-    direction: opts.direction as 'forward' | 'reverse',
-    annotate: !opts.stripAnnotations,
-    stateMode: opts.stateMode,
-  };
-
-  let changed = 0;
-  let unchanged = 0;
-  let errors = 0;
-
-  for (const file of files) {
-    try {
-      const result = transformFile(file, codemodOptions, opts.verbose);
-
-      if (!result.changed) {
-        unchanged++;
-        continue;
-      }
-
-      changed++;
-
-      if (opts.dryRun) {
-        console.log(`  [WOULD CHANGE] ${relative(process.cwd(), file)}`);
-        continue;
-      }
-
-      // Determine output path
-      let outPath = file;
-      if (opts.outDir) {
-        const rel = relative(resolve(opts.paths[0]), file);
-        outPath = resolve(opts.outDir, rel);
-        const dir = dirname(outPath);
-        if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
-      }
-
-      writeFileSync(outPath, result.code, 'utf-8');
-    } catch (err: any) {
-      errors++;
-      console.error(`  [ERROR] ${relative(process.cwd(), file)}: ${err.message}`);
-    }
-  }
-
-  console.log(`\nDone: ${changed} changed, ${unchanged} unchanged, ${errors} errors`);
-}
-
-main().catch(err => {
-  console.error(err);
-  process.exit(1);
-});