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

package/src/cli/type-generator.ts

@@ -1,243 +0,0 @@
-/**
- * Type Generator — converts a WorkflowDefinition into a TypeScript .d.ts file.
- *
- * Generates:
- *   - defineModel() call with `as const` assertion
- *   - Field types mapped to TypeScript types
- *   - State names as union type
- *   - Transition names as union type
- */
-
-import type { WorkflowDefinitionResponse } from './registry-client';
-
-/** Map workflow field types to TypeScript types */
-const FIELD_TYPE_MAP: Record<string, string> = {
-  string: 'string',
-  text: 'string',
-  email: 'string',
-  url: 'string',
-  phone: 'string',
-  password: 'string',
-  slug: 'string',
-  color: 'string',
-  number: 'number',
-  integer: 'number',
-  float: 'number',
-  decimal: 'number',
-  currency: 'number',
-  percentage: 'number',
-  boolean: 'boolean',
-  date: 'string',
-  datetime: 'string',
-  time: 'string',
-  timestamp: 'string',
-  json: 'unknown',
-  object: 'Record<string, unknown>',
-  array: 'unknown[]',
-  file: 'string',
-  image: 'string',
-  reference: 'string',
-  enum: 'string',
-  select: 'string',
-};
-
-function getTsType(fieldType: string): string {
-  return FIELD_TYPE_MAP[fieldType] ?? 'unknown';
-}
-
-function escapeStringLiteral(s: string): string {
-  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
-}
-
-function serializeDefault(value: unknown): string {
-  if (value === undefined || value === null) return "''";
-  if (typeof value === 'string') return `'${escapeStringLiteral(value)}'`;
-  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
-  if (Array.isArray(value)) return JSON.stringify(value);
-  return JSON.stringify(value);
-}
-
-/**
- * Generate a .d.ts file from a workflow definition response.
- */
-export function generateTypeDeclaration(def: WorkflowDefinitionResponse): string {
-  const lines: string[] = [];
-
-  lines.push("import { defineModel } from '@mindmatrix/react';");
-  lines.push('');
-  lines.push('declare const _default: ReturnType<typeof defineModel<{');
-  lines.push(`  readonly slug: '${escapeStringLiteral(def.slug)}';`);
-  lines.push(`  readonly version: '${escapeStringLiteral(def.version || '1.0.0')}';`);
-
-  // Fields
-  if (def.fields && def.fields.length > 0) {
-    lines.push('  readonly fields: {');
-    for (const field of def.fields) {
-      const props: string[] = [];
-      props.push(`readonly type: '${escapeStringLiteral(field.type)}'`);
-
-      if (field.default_value !== undefined && field.default_value !== null) {
-        props.push(`readonly default: ${serializeDefault(field.default_value)}`);
-      } else {
-        // Provide a sensible default based on type
-        const tsType = getTsType(field.type);
-        if (tsType === 'string') props.push("readonly default: ''");
-        else if (tsType === 'number') props.push('readonly default: 0');
-        else if (tsType === 'boolean') props.push('readonly default: false');
-      }
-
-      if (field.validation?.enum && field.validation.enum.length > 0) {
-        const enumValues = field.validation.enum
-          .map(v => `'${escapeStringLiteral(v)}'`)
-          .join(', ');
-        props.push(`readonly enum: readonly [${enumValues}]`);
-      }
-
-      if (field.required) {
-        props.push('readonly required: true');
-      }
-
-      lines.push(`    readonly ${field.name}: { ${props.join('; ')} };`);
-    }
-    lines.push('  };');
-  } else {
-    lines.push('  readonly fields: {};');
-  }
-
-  // States
-  if (def.states && def.states.length > 0) {
-    lines.push('  readonly states: {');
-    for (const state of def.states) {
-      const stateProps: string[] = [];
-      if (state.type === 'initial') {
-        stateProps.push("readonly type: 'initial'");
-      } else if (state.type === 'final') {
-        stateProps.push("readonly type: 'final'");
-      }
-      lines.push(`    readonly ${state.name}: { ${stateProps.join('; ')} };`);
-    }
-    lines.push('  };');
-  } else {
-    lines.push('  readonly states: {};');
-  }
-
-  // Transitions
-  if (def.transitions && def.transitions.length > 0) {
-    lines.push('  readonly transitions: {');
-    for (const transition of def.transitions) {
-      const tProps: string[] = [];
-
-      // from — use first element as string literal, or union if multiple
-      if (transition.from.length === 1) {
-        tProps.push(`readonly from: '${escapeStringLiteral(transition.from[0])}'`);
-      } else if (transition.from.length > 1) {
-        const fromUnion = transition.from.map(f => `'${escapeStringLiteral(f)}'`).join(' | ');
-        tProps.push(`readonly from: ${fromUnion}`);
-      }
-
-      tProps.push(`readonly to: '${escapeStringLiteral(transition.to)}'`);
-
-      lines.push(`    readonly ${transition.name}: { ${tProps.join('; ')} };`);
-    }
-    lines.push('  };');
-  } else {
-    lines.push('  readonly transitions: {};');
-  }
-
-  lines.push('}>>;');
-  lines.push('export default _default;');
-  lines.push('');
-
-  // Also export state and transition union types for convenience
-  if (def.states && def.states.length > 0) {
-    const stateUnion = def.states.map(s => `'${escapeStringLiteral(s.name)}'`).join(' | ');
-    lines.push(`export type States = ${stateUnion};`);
-  }
-
-  if (def.transitions && def.transitions.length > 0) {
-    const transitionUnion = def.transitions.map(t => `'${escapeStringLiteral(t.name)}'`).join(' | ');
-    lines.push(`export type Transitions = ${transitionUnion};`);
-  }
-
-  if (def.fields && def.fields.length > 0) {
-    lines.push('');
-    lines.push('export interface Fields {');
-    for (const field of def.fields) {
-      const tsType = getTsType(field.type);
-      lines.push(`  ${field.name}: ${tsType};`);
-    }
-    lines.push('}');
-  }
-
-  lines.push('');
-
-  return lines.join('\n');
-}
-
-/**
- * Generate a full source index.ts for a workflow package (--full mode).
- */
-export function generateFullSource(def: WorkflowDefinitionResponse): string {
-  const lines: string[] = [];
-
-  lines.push("import { defineModel } from '@mindmatrix/react';");
-  lines.push('');
-  lines.push('export default defineModel({');
-  lines.push(`  slug: '${escapeStringLiteral(def.slug)}',`);
-  lines.push(`  version: '${escapeStringLiteral(def.version || '1.0.0')}',`);
-
-  if (def.fields && def.fields.length > 0) {
-    lines.push('  fields: {');
-    for (const field of def.fields) {
-      const props: string[] = [];
-      props.push(`type: '${escapeStringLiteral(field.type)}'`);
-      if (field.default_value !== undefined && field.default_value !== null) {
-        props.push(`default: ${serializeDefault(field.default_value)}`);
-      }
-      if (field.validation?.enum) {
-        const enumValues = field.validation.enum
-          .map(v => `'${escapeStringLiteral(v)}'`)
-          .join(', ');
-        props.push(`enum: [${enumValues}] as const`);
-      }
-      if (field.required) {
-        props.push('required: true');
-      }
-      lines.push(`    ${field.name}: { ${props.join(', ')} },`);
-    }
-    lines.push('  },');
-  }
-
-  if (def.states && def.states.length > 0) {
-    lines.push('  states: {');
-    for (const state of def.states) {
-      if (state.type === 'initial' || state.type === 'final') {
-        lines.push(`    ${state.name}: { type: '${state.type}' },`);
-      } else {
-        lines.push(`    ${state.name}: {},`);
-      }
-    }
-    lines.push('  },');
-  }
-
-  if (def.transitions && def.transitions.length > 0) {
-    lines.push('  transitions: {');
-    for (const transition of def.transitions) {
-      const tProps: string[] = [];
-      if (transition.from.length === 1) {
-        tProps.push(`from: '${escapeStringLiteral(transition.from[0])}'`);
-      } else {
-        const fromArr = transition.from.map(f => `'${escapeStringLiteral(f)}'`).join(', ');
-        tProps.push(`from: [${fromArr}]`);
-      }
-      tProps.push(`to: '${escapeStringLiteral(transition.to)}'`);
-      lines.push(`    ${transition.name}: { ${tProps.join(', ')} },`);
-    }
-    lines.push('  },');
-  }
-
-  lines.push('} as const);');
-  lines.push('');
-
-  return lines.join('\n');
-}

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

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

@@ -1,145 +0,0 @@
-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');
-    });
-  });
-});