@mmapp/react-compiler 0.1.0-alpha.1

package/src/codemod/classify.ts

@@ -0,0 +1,197 @@
+/**
+ * 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

@@ -0,0 +1,207 @@
+#!/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);
+});