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

package/src/__tests__/change-extractor.test.ts

@@ -1,142 +0,0 @@
-/**
- * Change Extractor Tests — validates useOnChange extraction to FieldWatcher metadata.
- */
-
-import { describe, it, expect } from 'vitest';
-import { transformSync } from '@babel/core';
-import babelPlugin from '../babel';
-import type { IRWorkflowDefinition } from '@mindmatrix/player-core';
-
-function compile(code: string): IRWorkflowDefinition {
-  const result = transformSync(code, {
-    filename: 'test.workflow.tsx',
-    plugins: [[babelPlugin, { mode: 'infer' }]],
-    parserOpts: { plugins: ['jsx', 'typescript'], attachComment: true },
-  });
-  return (result as any)?.metadata?.mindmatrixIR;
-}
-
-describe('Change Extractor (useOnChange)', () => {
-  it('should extract useOnChange as fieldWatcher in metadata', () => {
-    const ir = compile(`
-      export function Watcher() {
-        const [status, setStatus] = useState('active');
-        useOnChange('status', (newVal, oldVal) => {
-          console.log('status changed');
-        });
-        return <div />;
-      }
-    `);
-
-    expect(ir.metadata).toBeDefined();
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers).toBeDefined();
-    expect(watchers).toHaveLength(1);
-    expect(watchers[0].id).toMatch(/^watcher_/);
-    expect(watchers[0].field).toBe('status');
-    expect(watchers[0].actions).toHaveLength(1);
-    expect(watchers[0].actions[0].type).toBe('log_event');
-  });
-
-  it('should extract setField actions from callback', () => {
-    const ir = compile(`
-      export function FieldSync() {
-        const [a, setA] = useState(0);
-        const [b, setB] = useState(0);
-        useOnChange('a', () => {
-          setField('b', 100);
-        });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers[0].actions[0].type).toBe('set_field');
-    expect(watchers[0].actions[0].config).toEqual({ field: 'b', value: 100 });
-  });
-
-  it('should extract setMemory actions from callback', () => {
-    const ir = compile(`
-      export function MemorySync() {
-        const [count, setCount] = useState(0);
-        useOnChange('count', () => {
-          setMemory('lastCount', 'updated');
-        });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers[0].actions[0].type).toBe('set_memory');
-    expect(watchers[0].actions[0].config).toEqual({ key: 'lastCount', value: 'updated' });
-  });
-
-  it('should support derived setter calls', () => {
-    const ir = compile(`
-      export function DerivedSetter() {
-        const [x, setX] = useState(0);
-        const [y, setY] = useState(0);
-        useOnChange('x', () => {
-          setY(10);
-        });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers[0].actions[0].type).toBe('set_field');
-    expect(watchers[0].actions[0].config.field).toBe('y');
-    expect(watchers[0].actions[0].config.value).toBe(10);
-  });
-
-  it('should handle multiple watchers', () => {
-    const ir = compile(`
-      export function MultiWatcher() {
-        const [a, setA] = useState(0);
-        const [b, setB] = useState(0);
-        useOnChange('a', () => { console.log('a changed'); });
-        useOnChange('b', () => { console.log('b changed'); });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers).toHaveLength(2);
-    expect(watchers[0].field).toBe('a');
-    expect(watchers[1].field).toBe('b');
-  });
-
-  it('should have unique watcher IDs', () => {
-    const ir = compile(`
-      export function UniqueIds() {
-        useOnChange('x', () => { console.log('x'); });
-        useOnChange('y', () => { console.log('y'); });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    const ids = watchers.map((w: any) => w.id);
-    expect(new Set(ids).size).toBe(2);
-  });
-
-  it('should extract multiple actions from single callback', () => {
-    const ir = compile(`
-      export function MultiAction() {
-        const [total, setTotal] = useState(0);
-        useOnChange('items', () => {
-          setField('total', 0);
-          setMemory('recalculated', true);
-          console.log('items changed');
-        });
-        return <div />;
-      }
-    `);
-
-    const watchers = (ir.metadata as any).fieldWatchers;
-    expect(watchers[0].actions).toHaveLength(3);
-    expect(watchers[0].actions[0].type).toBe('set_field');
-    expect(watchers[0].actions[1].type).toBe('set_memory');
-    expect(watchers[0].actions[2].type).toBe('log_event');
-  });
-});

package/src/__tests__/cli-pull.test.ts

@@ -1,73 +0,0 @@
-/**
- * Tests for the pull command — verifies that an IR can be decompiled
- * to a local project structure.
- *
- * Note: doesn't test API fetching (that requires a running server),
- * only tests the decompilation pipeline that pull uses.
- */
-
-import { describe, it, expect } from 'vitest';
-import { readFileSync } from 'fs';
-import { resolve } from 'path';
-import { compileProject } from '../project-compiler';
-import { decompileProjectEnhanced as decompileProject } from '../decompiler/project-decompiler';
-
-const EXAMPLES_DIR = resolve(__dirname, '../../examples/authentication');
-
-function readExample(path: string): string {
-  return readFileSync(resolve(EXAMPLES_DIR, path), 'utf-8');
-}
-
-describe('Pull — Round-trip: compile → decompile', () => {
-  // Compile the auth module first
-  const files = {
-    'mm.config.ts': readExample('mm.config.ts'),
-    'main.workflow.tsx': readExample('main.workflow.tsx'),
-    'pages/LoginPage.tsx': readExample('pages/LoginPage.tsx'),
-    'pages/SignupPage.tsx': readExample('pages/SignupPage.tsx'),
-    'models/auth.ts': readExample('models/auth.ts'),
-  };
-  const compiled = compileProject(files);
-  const ir = compiled.ir;
-
-  it('compiles without errors', () => {
-    const errors = compiled.errors.filter(e => e.severity === 'error');
-    expect(errors).toHaveLength(0);
-  });
-
-  it('decompiles IR back to project files', () => {
-    const result = decompileProject(ir);
-    expect(result.files.length).toBeGreaterThanOrEqual(1);
-    expect(result.slug).toBe('mod-authentication');
-  });
-
-  it('decompiled project has mm.config.ts', () => {
-    const result = decompileProject(ir);
-    const config = result.files.find(f => f.path === 'mm.config.ts');
-    expect(config).toBeDefined();
-    expect(config!.content).toContain('mod-authentication');
-  });
-
-  it('decompiled project has a main workflow file', () => {
-    const result = decompileProject(ir);
-    const main = result.files.find(f => f.path.includes('.workflow.tsx') || f.path.includes('main'));
-    expect(main).toBeDefined();
-  });
-
-  it('decompiled project preserves fields', () => {
-    const result = decompileProject(ir);
-    const mainFile = result.files.find(f => f.path.includes('.workflow.tsx'));
-    if (mainFile) {
-      // The decompiled file should contain useState calls for fields
-      expect(mainFile.content).toContain('useState');
-    }
-  });
-
-  it('decompiled project preserves transitions', () => {
-    const result = decompileProject(ir);
-    const mainFile = result.files.find(f => f.path.includes('.workflow.tsx'));
-    if (mainFile) {
-      expect(mainFile.content).toContain('useTransition');
-    }
-  });
-});

package/src/__tests__/cli-test.test.ts

@@ -1,72 +0,0 @@
-/**
- * Tests for the `mmrc test` CLI command (round-trip fidelity).
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import * as path from 'path';
-
-// We test the `test()` function directly, not through the CLI entry point.
-import { test as roundTripTest } from '../cli/test';
-
-const FIXTURES_DIR = path.resolve(__dirname, 'round-trip/fixtures');
-
-describe('mmrc test (round-trip fidelity)', () => {
-  // Suppress console output during tests
-  const originalLog = console.log;
-  const originalError = console.error;
-  const originalWrite = process.stdout.write;
-
-  beforeEach(() => {
-    console.log = vi.fn();
-    console.error = vi.fn();
-    // Capture process.stdout.write too (used for inline progress)
-    process.stdout.write = vi.fn() as any;
-  });
-
-  afterEach(() => {
-    console.log = originalLog;
-    console.error = originalError;
-    process.stdout.write = originalWrite;
-  });
-
-  // Mock process.exit to prevent test runner from dying
-  const mockExit = vi.spyOn(process, 'exit').mockImplementation((() => {
-    throw new Error('process.exit called');
-  }) as any);
-
-  afterEach(() => {
-    mockExit.mockClear();
-  });
-
-  it('passes for simple-crud fixture', async () => {
-    const result = await roundTripTest({ src: path.join(FIXTURES_DIR, 'simple-crud') });
-
-    expect(result.success).toBe(true);
-    expect(result.fieldCount).toBeGreaterThan(0);
-    expect(result.fieldMatch).toBe(result.fieldCount);
-    expect(result.stateCount).toBeGreaterThan(0);
-    expect(result.stateMatch).toBe(result.stateCount);
-    expect(result.diffs.filter(d => d.severity === 'error')).toHaveLength(0);
-  });
-
-  it('passes for full-workflow fixture', async () => {
-    const result = await roundTripTest({ src: path.join(FIXTURES_DIR, 'full-workflow') });
-
-    expect(result.success).toBe(true);
-    expect(result.diffs.filter(d => d.severity === 'error')).toHaveLength(0);
-  });
-
-  it('returns timing data', async () => {
-    const result = await roundTripTest({ src: path.join(FIXTURES_DIR, 'simple-crud') });
-
-    expect(result.timings.compile).toBeGreaterThan(0);
-    expect(result.timings.decompile).toBeGreaterThan(0);
-    expect(result.timings.recompile).toBeGreaterThan(0);
-    expect(result.timings.compare).toBeGreaterThan(0);
-  });
-
-  it('exits with error when no mm.config.ts found', async () => {
-    await expect(roundTripTest({ src: '/tmp/nonexistent-dir' })).rejects.toThrow('process.exit called');
-    expect(mockExit).toHaveBeenCalledWith(1);
-  });
-});

package/src/__tests__/component-extractor.test.ts

@@ -1,331 +0,0 @@
-/**
- * Component Extractor Tests — validates JSX → IRExperienceNode extraction.
- *
- * Covers: text content, expression children, conditionals, lists,
- * spread attributes, member expressions, layout inference, boolean attrs.
- */
-
-import { describe, it, expect } from 'vitest';
-import { transformSync } from '@babel/core';
-import babelPlugin from '../babel';
-import type { IRWorkflowDefinition, IRExperienceNode } from '@mindmatrix/player-core';
-
-function compile(code: string): IRWorkflowDefinition {
-  const result = transformSync(code, {
-    filename: 'test.workflow.tsx',
-    plugins: [[babelPlugin, { mode: 'infer' }]],
-    parserOpts: { plugins: ['jsx', 'typescript'], attachComment: true },
-  });
-  return (result as any)?.metadata?.mindmatrixIR;
-}
-
-function getExperience(code: string): IRExperienceNode {
-  const ir = compile(code);
-  return ir.metadata?.experience as IRExperienceNode;
-}
-
-describe('Component Extractor', () => {
-  it('should extract basic JSX structure', () => {
-    const exp = getExperience(`
-      export function Basic() {
-        return <div><span>Hello</span></div>;
-      }
-    `);
-
-    expect(exp).toBeDefined();
-    expect(exp.component).toBe('div');
-    expect(exp.children).toBeDefined();
-    expect(exp.children!.length).toBeGreaterThan(0);
-  });
-
-  it('should extract text content as Text nodes', () => {
-    const exp = getExperience(`
-      export function TextContent() {
-        return <div><h1>Status</h1></div>;
-      }
-    `);
-
-    const h1 = exp.children?.find((c) => c.component === 'h1');
-    expect(h1).toBeDefined();
-    // h1 has text child "Status" → Text node
-    const textNode = h1?.children?.find((c) => c.component === 'Text');
-    expect(textNode).toBeDefined();
-    expect(textNode?.config?.value).toBe('Status');
-  });
-
-  it('should extract expression children as bound Text nodes', () => {
-    const exp = getExperience(`
-      export function ExprChild() {
-        const [count, setCount] = useState(0);
-        return <div>{count}</div>;
-      }
-    `);
-
-    const textNode = exp.children?.find((c) => c.component === 'Text' && c.bindings?.value);
-    expect(textNode).toBeDefined();
-    expect(textNode?.bindings?.value).toBe('$local.count');
-  });
-
-  it('should extract conditional rendering (ternary)', () => {
-    const exp = getExperience(`
-      export function Conditional() {
-        const [show, setShow] = useState(true);
-        return <div>{show ? <span>Yes</span> : <span>No</span>}</div>;
-      }
-    `);
-
-    const conditionals = exp.children?.filter((c) => c.visible_when);
-    expect(conditionals).toBeDefined();
-    expect(conditionals!.length).toBe(2);
-    // One with condition, one with negated condition
-    const hasNot = conditionals!.some((c) => c.visible_when?.startsWith('not('));
-    expect(hasNot).toBe(true);
-  });
-
-  it('should extract logical AND conditional rendering', () => {
-    const exp = getExperience(`
-      export function LogicalAnd() {
-        const [visible, setVisible] = useState(true);
-        return <div>{visible && <span>Content</span>}</div>;
-      }
-    `);
-
-    const conditional = exp.children?.find((c) => c.visible_when);
-    expect(conditional).toBeDefined();
-    expect(conditional?.visible_when).toBe('$local.visible');
-  });
-
-  it('should extract list rendering (.map)', () => {
-    const exp = getExperience(`
-      export function ListRender() {
-        const [items, setItems] = useState([]);
-        return <div>{items.map(item => <span key={item.id}>{item.name}</span>)}</div>;
-      }
-    `);
-
-    const eachNode = exp.children?.find((c) => c.component === 'Each');
-    expect(eachNode).toBeDefined();
-    expect(eachNode?.bindings?.items).toBe('$local.items');
-    expect(eachNode?.config?.as).toBe('item');
-    expect(eachNode?.children).toBeDefined();
-  });
-
-  it('should extract JSX attributes as config', () => {
-    const exp = getExperience(`
-      export function Attrs() {
-        return <div className="container" id="main"><button disabled>Click</button></div>;
-      }
-    `);
-
-    expect(exp.className).toBe('container');
-    expect(exp.config?.id).toBe('main');
-
-    const button = exp.children?.find((c) => c.component === 'button');
-    expect(button?.config?.disabled).toBe(true);
-  });
-
-  it('should extract expression attributes as bindings', () => {
-    const exp = getExperience(`
-      export function BoundAttrs() {
-        const [name, setName] = useState('');
-        return <input value={name} />;
-      }
-    `);
-
-    expect(exp.bindings?.value).toBe('$local.name');
-  });
-
-  it('should extract data-slot attribute', () => {
-    const exp = getExperience(`
-      export function SlotAttr() {
-        return <div data-slot="sidebar">Content</div>;
-      }
-    `);
-
-    expect(exp.slot).toBe('sidebar');
-  });
-
-  it('should extract visible_when attribute', () => {
-    const exp = getExperience(`
-      export function Visibility() {
-        return <div visible_when="$state == active">Active</div>;
-      }
-    `);
-
-    expect(exp.visible_when).toBe('$state == active');
-  });
-
-  it('should infer layout from component name', () => {
-    const exp = getExperience(`
-      export function LayoutInference() {
-        return <Stack gap={4}><Row><span>A</span></Row></Stack>;
-      }
-    `);
-
-    expect(exp.layout).toBe('stack');
-    const row = exp.children?.find((c) => c.component === 'Row');
-    expect(row?.layout).toBe('row');
-  });
-
-  it('should handle member expression component names', () => {
-    const exp = getExperience(`
-      export function MemberExpr() {
-        return <UI.Card title="test"><UI.Text>Hello</UI.Text></UI.Card>;
-      }
-    `);
-
-    expect(exp.component).toBe('UI.Card');
-    const text = exp.children?.find((c) => c.component === 'UI.Text');
-    expect(text).toBeDefined();
-  });
-
-  it('should handle JSX fragments', () => {
-    const exp = getExperience(`
-      export function Fragment() {
-        return <><span>A</span><span>B</span></>;
-      }
-    `);
-
-    expect(exp).toBeDefined();
-    expect(exp.children).toBeDefined();
-    expect(exp.children!.length).toBeGreaterThanOrEqual(2);
-  });
-
-  it('should have unique node IDs', () => {
-    const exp = getExperience(`
-      export function UniqueNodes() {
-        return <div><span>A</span><span>B</span><span>C</span></div>;
-      }
-    `);
-
-    const ids = new Set<string>();
-    function collectIds(node: IRExperienceNode) {
-      ids.add(node.id);
-      node.children?.forEach(collectIds);
-    }
-    collectIds(exp);
-    // All IDs must be unique
-    const allIds = Array.from(ids);
-    expect(new Set(allIds).size).toBe(allIds.length);
-  });
-
-  it('should reset node IDs between compilations', () => {
-    // Compile two separate workflows
-    const exp1 = getExperience(`
-      export function A() { return <div>A</div>; }
-    `);
-    const exp2 = getExperience(`
-      export function B() { return <div>B</div>; }
-    `);
-
-    // Both should start from low IDs (counter reset between compilations)
-    // The exact IDs don't matter, but they should be consistent
-    expect(exp1.id).toBeDefined();
-    expect(exp2.id).toBeDefined();
-  });
-});
-
-describe('Handler Decomposition (action sequences)', () => {
-  it('should decompose single setter to $action.setLocal 2-arg', () => {
-    const exp = getExperience(`
-      export function SingleSetter() {
-        const [text, setText] = useState('');
-        return <button onClick={() => setText('')}>Clear</button>;
-      }
-    `);
-
-    expect(exp.bindings?.onClick).toBe('$action.setLocal("text", "")');
-  });
-
-  it('should decompose toggle setter to $action.setLocal with negation', () => {
-    const exp = getExperience(`
-      export function Toggle() {
-        const [show, setShow] = useState(false);
-        return <button onClick={() => setShow(!show)}>Toggle</button>;
-      }
-    `);
-
-    expect(exp.bindings?.onClick).toBe('$action.setLocal("show", !$local.show)');
-  });
-
-  it('should decompose functional update setter', () => {
-    const exp = getExperience(`
-      export function FunctionalUpdate() {
-        const [show, setShow] = useState(false);
-        return <button onClick={() => setShow(prev => !prev)}>Toggle</button>;
-      }
-    `);
-
-    expect(exp.bindings?.onClick).toBe('$action.setLocal("show", !$local.show)');
-  });
-
-  it('should decompose multi-setter block to $action.seq', () => {
-    const exp = getExperience(`
-      export function MultiSetter() {
-        const [showEmoji, setShowEmoji] = useState(false);
-        const [showSlash, setShowSlash] = useState(false);
-        return <button onClick={() => { setShowEmoji(!showEmoji); setShowSlash(false); }}>Toggle</button>;
-      }
-    `);
-
-    expect(exp.bindings?.onClick).toBe(
-      '$action.seq($action.setLocal("show_emoji", !$local.show_emoji), $action.setLocal("show_slash", false))'
-    );
-  });
-
-  it('should decompose setter + conditional to seq with when', () => {
-    const exp = getExperience(`
-      export function SetterWithConditional() {
-        const [callActive, setCallActive] = useState(false);
-        return <button onClick={() => { setCallActive(!callActive); if (!callActive) { setCallActive(true); } }}>Call</button>;
-      }
-    `);
-
-    const binding = exp.bindings?.onClick;
-    expect(binding).toBeDefined();
-    expect(binding).toContain('$action.seq(');
-    expect(binding).toContain('$action.when(');
-    expect(binding).toContain('$action.setLocal("call_active"');
-  });
-
-  it('should leave non-handler arrow expressions as generateExpression', () => {
-    const exp = getExperience(`
-      export function NonHandler() {
-        const [items, setItems] = useState([]);
-        return <div className={items.length > 0 ? "full" : "empty"}>Content</div>;
-      }
-    `);
-
-    // className is not an event handler, should use normal generateExpression
-    expect(exp.bindings?.className).toBeDefined();
-    expect(exp.bindings?.className).not.toContain('$action.seq');
-  });
-
-  it('should fallback to generateExpression for non-decomposable handlers', () => {
-    const exp = getExperience(`
-      export function ComplexHandler() {
-        return <button onClick={() => console.log("hello")}>Log</button>;
-      }
-    `);
-
-    // console.log can't decompose to an $action, falls back to generateExpression
-    const binding = exp.bindings?.onClick;
-    expect(binding).toBeDefined();
-    expect(binding).toContain('console');
-  });
-
-  it('should decompose if/else to $action.when with else branch', () => {
-    const exp = getExperience(`
-      export function IfElse() {
-        const [mode, setMode] = useState('light');
-        return <button onClick={() => { if (mode === 'light') { setMode('dark'); } else { setMode('light'); } }}>Theme</button>;
-      }
-    `);
-
-    const binding = exp.bindings?.onClick;
-    expect(binding).toBeDefined();
-    expect(binding).toContain('$action.when(');
-    expect(binding).toContain('$action.setLocal("mode", "dark")');
-    expect(binding).toContain('$action.setLocal("mode", "light")');
-  });
-});