@mmapp/react-compiler 0.1.0-alpha.1

package/src/codemod/__tests__/forward.test.ts

@@ -0,0 +1,239 @@
+import { describe, it, expect } from 'vitest';
+import { transform } from '../index';
+
+function forward(source: string): string {
+  return transform(source, { direction: 'forward', annotate: false }).code;
+}
+
+function forwardAnnotated(source: string): string {
+  return transform(source, { direction: 'forward', annotate: true }).code;
+}
+
+describe('forward transform', () => {
+  describe('element mapping', () => {
+    it('div with flex → Row', () => {
+      const input = `const App = () => <div className="flex items-center gap-2">hello</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Row');
+      expect(output).toContain('items-center gap-2');
+      expect(output).not.toContain('"flex ');
+    });
+
+    it('div with flex flex-col → Stack', () => {
+      const input = `const App = () => <div className="flex flex-col gap-4">hello</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Stack');
+      expect(output).toContain('gap-4');
+      expect(output).not.toContain('flex-col');
+      expect(output).not.toContain('"flex ');
+    });
+
+    it('div with grid → Grid', () => {
+      const input = `const App = () => <div className="grid grid-cols-3 gap-2">hello</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Grid');
+      expect(output).not.toContain('"grid ');
+    });
+
+    it('div without flex/grid → Stack', () => {
+      const input = `const App = () => <div className="p-4 bg-gray-800">hello</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Stack');
+      expect(output).toContain('p-4 bg-gray-800');
+    });
+
+    it('span → Text', () => {
+      const input = `const App = () => <span className="text-sm text-gray-300">hello</span>;`;
+      const output = forward(input);
+      expect(output).toContain('<Text');
+      expect(output).toContain('text-sm text-gray-300');
+    });
+
+    it('p → Text', () => {
+      const input = `const App = () => <p className="text-base">content</p>;`;
+      const output = forward(input);
+      expect(output).toContain('<Text');
+    });
+
+    it('h1-h6 → Text with variant', () => {
+      const input = `const App = () => <h2 className="font-bold">Title</h2>;`;
+      const output = forward(input);
+      expect(output).toContain('<Text');
+      expect(output).toContain('variant="h2"');
+    });
+
+    it('button → Button', () => {
+      const input = `const App = () => <button className="px-4 py-2" onClick={handleClick}>Go</button>;`;
+      const output = forward(input);
+      expect(output).toContain('<Button');
+      expect(output).toContain('onPress');
+      expect(output).not.toContain('onClick');
+    });
+
+    it('a → Link', () => {
+      const input = `const App = () => <a href="/page" className="text-blue-400">Link</a>;`;
+      const output = forward(input);
+      expect(output).toContain('<Link');
+    });
+
+    it('input → TextInput', () => {
+      const input = `const App = () => <input type="text" className="w-full" />;`;
+      const output = forward(input);
+      expect(output).toContain('<TextInput');
+    });
+
+    it('textarea → TextInput multiline', () => {
+      const input = `const App = () => <textarea className="w-full h-20" />;`;
+      const output = forward(input);
+      expect(output).toContain('<TextInput');
+      expect(output).toContain('multiline');
+    });
+
+    it('img → Image', () => {
+      const input = `const App = () => <img src="/avatar.png" className="w-9 h-9 rounded-full" />;`;
+      const output = forward(input);
+      expect(output).toContain('<Image');
+    });
+
+    it('preserves motion.div untouched', () => {
+      const input = `const App = () => <motion.div className="flex" initial={{ opacity: 0 }}>hi</motion.div>;`;
+      const output = forward(input);
+      expect(output).toContain('motion.div');
+    });
+
+    it('preserves PascalCase components', () => {
+      const input = `const App = () => <MyComponent className="flex">hi</MyComponent>;`;
+      const output = forward(input);
+      expect(output).toContain('<MyComponent');
+    });
+  });
+
+  describe('className cleanup', () => {
+    it('removes flex from Row className', () => {
+      const input = `const App = () => <div className="flex items-center gap-2">hi</div>;`;
+      const output = forward(input);
+      // Should have items-center gap-2 but not flex
+      expect(output).toMatch(/className="items-center gap-2"/);
+    });
+
+    it('removes flex and flex-col from Stack className', () => {
+      const input = `const App = () => <div className="flex flex-col gap-4 p-2">hi</div>;`;
+      const output = forward(input);
+      expect(output).toMatch(/className="gap-4 p-2"/);
+    });
+
+    it('handles cn() utility', () => {
+      const input = `const App = () => <div className={cn("flex items-center", isActive && "bg-blue-500")}>hi</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Row');
+      expect(output).toContain('"items-center"');
+    });
+
+    it('handles template literals', () => {
+      const input = 'const App = () => <div className={`flex items-center ${cls}`}>hi</div>;';
+      const output = forward(input);
+      expect(output).toContain('<Row');
+    });
+  });
+
+  describe('control flow', () => {
+    it('converts && conditional to <Show>', () => {
+      const input = `const App = () => <div className="flex">{visible && <span>hi</span>}</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Show');
+      expect(output).toContain('when={visible}');
+    });
+
+    it('converts .map() to <Each>', () => {
+      const input = `const App = () => <div className="flex flex-col">{items.map(item => <span key={item.id}>{item.name}</span>)}</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Each');
+      expect(output).toContain('items={items}');
+    });
+
+    it('converts ternary to dual <Show>', () => {
+      const input = `const App = () => <div className="flex">{active ? <span>on</span> : <span>off</span>}</div>;`;
+      const output = forward(input);
+      expect(output).toContain('<Show');
+      // Should have two Show elements
+      const showCount = (output.match(/<Show/g) || []).length;
+      expect(showCount).toBe(2);
+    });
+  });
+
+  describe('annotations', () => {
+    it('adds @mm-original annotation when enabled', () => {
+      const output = forwardAnnotated(
+        `const App = () => <div className="flex items-center">hi</div>;`,
+      );
+      expect(output).toContain('@mm-original');
+      expect(output).toContain('div');
+    });
+
+    it('omits annotation when disabled', () => {
+      const output = forward(
+        `const App = () => <div className="flex items-center">hi</div>;`,
+      );
+      expect(output).not.toContain('@mm-original');
+    });
+  });
+
+  describe('imports', () => {
+    it('adds atom import', () => {
+      const input = `import React from 'react';\nconst App = () => <div className="flex">hi</div>;`;
+      const output = forward(input);
+      expect(output).toContain('@mindmatrix/react/atoms');
+      expect(output).toContain('Row');
+    });
+  });
+
+  describe('real-world patterns', () => {
+    it('transforms a channel list item', () => {
+      const input = `
+const ChannelItem = ({ channel }) => (
+  <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-800">
+    <span className="text-sm text-gray-300 truncate flex-1">{channel.name}</span>
+    {channel.unread > 0 && (
+      <span className="bg-blue-500 text-white text-xs px-1.5 rounded-full">
+        {channel.unread}
+      </span>
+    )}
+  </div>
+);`;
+      const output = forward(input);
+      expect(output).toContain('<Row');
+      expect(output).toContain('<Text');
+      expect(output).toContain('<Show');
+      expect(output).toContain('when={channel.unread > 0}');
+      expect(output).toContain('hover:bg-gray-800');
+    });
+
+    it('transforms a message list', () => {
+      const input = `
+const Messages = ({ messages }) => (
+  <div className="flex flex-col gap-1">
+    {messages.map((msg) => (
+      <div key={msg.id} className="flex items-start gap-3 px-4">
+        <img src={msg.avatar} className="w-9 h-9 rounded-full" />
+        <div className="flex flex-col flex-1 min-w-0">
+          <span className="font-semibold">{msg.sender}</span>
+          <p className="text-sm">{msg.content}</p>
+        </div>
+      </div>
+    ))}
+  </div>
+);`;
+      const output = forward(input);
+      expect(output).toContain('<Stack');
+      expect(output).toContain('<Each');
+      expect(output).toContain('<Row');
+      expect(output).toContain('<Image');
+      expect(output).toContain('<Text');
+      // Verify all Tailwind classes preserved
+      expect(output).toContain('gap-1');
+      expect(output).toContain('items-start gap-3 px-4');
+      expect(output).toContain('w-9 h-9 rounded-full');
+      expect(output).toContain('font-semibold');
+    });
+  });
+});

package/src/codemod/__tests__/reverse.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import { transform } from '../index';
+
+function reverse(source: string): string {
+  return transform(source, { direction: 'reverse' }).code;
+}
+
+describe('reverse transform', () => {
+  describe('element mapping', () => {
+    it('Row → div with flex', () => {
+      const input = `const App = () => <Row className="items-center gap-2">hello</Row>;`;
+      const output = reverse(input);
+      expect(output).toContain('<div');
+      expect(output).toContain('flex items-center gap-2');
+    });
+
+    it('Stack → div with flex flex-col', () => {
+      const input = `const App = () => <Stack className="gap-4 p-2">hello</Stack>;`;
+      const output = reverse(input);
+      expect(output).toContain('<div');
+      expect(output).toContain('flex flex-col gap-4 p-2');
+    });
+
+    it('Grid → div with grid', () => {
+      const input = `const App = () => <Grid className="grid-cols-3">hello</Grid>;`;
+      const output = reverse(input);
+      expect(output).toContain('<div');
+      expect(output).toContain('grid grid-cols-3');
+    });
+
+    it('Text → span', () => {
+      const input = `const App = () => <Text className="text-sm">hello</Text>;`;
+      const output = reverse(input);
+      expect(output).toContain('<span');
+    });
+
+    it('Text with variant="h2" → h2', () => {
+      const input = `const App = () => <Text variant="h2" className="font-bold">Title</Text>;`;
+      const output = reverse(input);
+      expect(output).toContain('<h2');
+      expect(output).not.toContain('variant=');
+    });
+
+    it('Button → button with onClick', () => {
+      const input = `const App = () => <Button className="px-4" onPress={handleClick}>Go</Button>;`;
+      const output = reverse(input);
+      expect(output).toContain('<button');
+      expect(output).toContain('onClick');
+      expect(output).not.toContain('onPress');
+    });
+
+    it('Link → a', () => {
+      const input = `const App = () => <Link href="/page">Go</Link>;`;
+      const output = reverse(input);
+      expect(output).toContain('<a');
+    });
+
+    it('TextInput → input', () => {
+      const input = `const App = () => <TextInput className="w-full" />;`;
+      const output = reverse(input);
+      expect(output).toContain('<input');
+    });
+
+    it('TextInput multiline → textarea', () => {
+      const input = `const App = () => <TextInput multiline className="w-full" />;`;
+      const output = reverse(input);
+      expect(output).toContain('<textarea');
+      expect(output).not.toContain('multiline');
+    });
+
+    it('Image → img', () => {
+      const input = `const App = () => <Image src="/avatar.png" className="w-9 h-9" />;`;
+      const output = reverse(input);
+      expect(output).toContain('<img');
+    });
+  });
+
+  describe('control flow', () => {
+    it('Show → conditional &&', () => {
+      const input = `const App = () => <div><Show when={visible}><span>hi</span></Show></div>;`;
+      const output = reverse(input);
+      expect(output).toContain('visible &&');
+      expect(output).not.toContain('<Show');
+    });
+
+    it('Each → .map()', () => {
+      const input = `const App = () => <div><Each items={items} as="item">{(item) => <span>{item.name}</span>}</Each></div>;`;
+      const output = reverse(input);
+      expect(output).toContain('.map(');
+      expect(output).not.toContain('<Each');
+    });
+
+    it('Each with keyField restores key prop', () => {
+      const input = `const App = () => <div><Each items={items} as="item" keyField={item.id}>{(item) => <span>{item.name}</span>}</Each></div>;`;
+      const output = reverse(input);
+      expect(output).toContain('.map(');
+      expect(output).toContain('key={');
+    });
+  });
+
+  describe('className injection', () => {
+    it('adds flex to Row without className', () => {
+      const input = `const App = () => <Row>hello</Row>;`;
+      const output = reverse(input);
+      expect(output).toContain('className="flex"');
+    });
+
+    it('adds flex flex-col to Stack without className', () => {
+      const input = `const App = () => <Stack>hello</Stack>;`;
+      const output = reverse(input);
+      expect(output).toContain('className="flex flex-col"');
+    });
+
+    it('preserves existing classes when injecting', () => {
+      const input = `const App = () => <Row className="items-center gap-2">hello</Row>;`;
+      const output = reverse(input);
+      expect(output).toContain('flex items-center gap-2');
+    });
+  });
+
+  describe('imports', () => {
+    it('removes atom imports', () => {
+      const input = `import { Row, Text } from '@mindmatrix/react/atoms';\nconst App = () => <Row><Text>hi</Text></Row>;`;
+      const output = reverse(input);
+      expect(output).not.toContain("from '@mindmatrix/react/atoms'");
+    });
+
+    it('preserves non-atom imports', () => {
+      const input = `import { Row } from '@mindmatrix/react/atoms';\nimport { cn } from './utils';\nconst App = () => <Row>hi</Row>;`;
+      const output = reverse(input);
+      expect(output).toContain("from './utils'");
+    });
+  });
+
+  describe('annotation-guided reverse', () => {
+    it('uses @mm-original to restore exact tag', () => {
+      const input = `const App = () => (
+        /* @mm-original main */
+        <Stack className="p-4">hello</Stack>
+      );`;
+      const output = reverse(input);
+      expect(output).toContain('<main');
+    });
+  });
+});

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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,97 @@
+/**
+ * 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),
+    );
+  }
+}