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

package/src/__tests__/round-trip/RESULTS.md

@@ -1,86 +0,0 @@
-# Round-Trip Verification Results
-
-Date: 2026-03-24
-
-## Executive Summary
-
-The bidirectional compiler verification suite confirms that compilation is now round-trip stable. All 4 synthetic fixtures and all 3 real blueprint packages achieve both IR semantic equality and source stabilization.
-
-## Test Results
-
-### Fixture Results
-
-| Fixture | Compile | Decompile | Re-compile | IR Match | Source Stable |
-|---------|---------|-----------|------------|----------|---------------|
-| simple-crud | PASS | PASS | PASS | PASS | PASS |
-| full-workflow | PASS | PASS | PASS | PASS | PASS |
-| data-heavy | PASS | PASS | PASS | PASS | PASS |
-| view-heavy | PASS | PASS | PASS | PASS | PASS |
-
-### Real Blueprint Results
-
-| Blueprint | Compile | Decompile | Re-compile | IR Match | Source Stable |
-|-----------|---------|-----------|------------|----------|---------------|
-| blueprint-auth | PASS | PASS | PASS | PASS | PASS |
-| blueprint-employee-salary-tracking | PASS | PASS | PASS | PASS | PASS |
-| blueprint-glass-console | PASS | PASS | PASS | PASS | PASS |
-
-### Single-File Inline Results
-
-All 20 single-file pattern tests pass IR semantic match and source stabilization:
-- minimal counter, fields and state effects, transitions with roles
-- complex JSX with sx, conditional Show, useOnChange/useOnEvent, useRole
-- layout atoms, form atoms, Each list, media atoms, Modal, Link
-- multi-action handlers, nested Show, useQuery, DataGrid
-- diverse field types, nullable field types, enum/select union
-- Markdown/ScrollArea, auto transitions, useWhileIn, defineModel, Slot
-
-## Bugs Fixed
-
-### 1. Null vs Undefined Distinction (sx-emitter.ts)
-`valueToExpression()` was converting both `null` and `undefined` to `t.identifier('undefined')`.
-**Fix**: `null` now emits `t.nullLiteral()`, preserving the semantic difference.
-
-### 2. Page File Naming (project-decompiler.ts)
-Single-segment routes (e.g. `/page`) were wrapped in `app/shared/{slug}.tsx`, causing the compiler's `/page` suffix stripping to create route `/shared` instead of `/page`.
-**Fix**: Single-segment routes now decompile to `app/{slug}.tsx` (no `shared/` prefix).
-
-### 3. Null Default Preservation (state-emitter.ts)
-`emitFieldDeclarations()` replaced null defaults with `inferDefaultFromType()`, creating disagreement between model files and useState calls.
-**Fix**: Null defaults now emit `useState(null)` directly. Model files emit `default: null` explicitly.
-
-### 4. JSON Type Default (state-emitter.ts)
-`inferDefaultFromType('json')` returned `[]` (array) but the compiler produces `{}` (object) on re-compilation.
-**Fix**: JSON type now defaults to `{}` (empty object).
-
-### 5. JSX String Escaping (ast-builder.ts)
-Strings with quotes or newlines emitted as JSX string attributes produced invalid JSX (`value="Click \"Setup\""`).
-**Fix**: Strings containing `"`, `\`, or `\n` use expression containers (`value={"..."}`) instead.
-
-### 6. Binding Expression Preservation (component-extractor.ts)
-String literals in JSX expression containers (`items={"$instance..."}`) were stored as config values, then re-emitted as plain string attributes on the next pass.
-**Fix**: Strings matching binding patterns (`$instance`, `$local`, function calls) are stored as bindings.
-
-### 7. Empty State Names (project-decompiler.ts)
-States with empty names (`''`) were included in model files but dropped on re-compilation.
-**Fix**: States with empty names are filtered out during model generation.
-
-### 8. Data Source Import Instability (project-decompiler.ts)
-Main workflow files in multi-file projects included `useMutation`/`useQuery` from page files, but these weren't present after re-compilation.
-**Fix**: Strip `dataSources` and `mutationTargets` from main file metadata.
-
-### 9. Category Array Comparison (round-trip.test.ts)
-Array categories like `["workflow","blueprint","module"]` failed `!==` reference equality.
-**Fix**: Use `JSON.stringify` comparison for categories.
-
-### 10. Type Annotation for Null Defaults (state-emitter.ts)
-Fields with null defaults got type annotations on pass 2 but not pass 1.
-**Fix**: Skip type annotations when `default_value` is null.
-
-## Test Suite
-
-- **908 tests** across 49 test files (all passing)
-- 4 synthetic fixtures with full bidirectional verification
-- 3 real blueprint packages with full bidirectional verification
-- 20 single-file pattern tests
-- Existing examples (counter, todo-app, dashboard, authentication)

package/src/__tests__/round-trip/fixtures/data-heavy/main.workflow.tsx

@@ -1,55 +0,0 @@
-/**
- * @workflow slug="contact-db" version="1.0.0" category="blueprint"
- * @description Contact database with many field types
- */
-import { useState } from 'react';
-import {
-  useTransition,
-  useOnEnter,
-  useOnExit,
-  useWhileIn,
-  Stack,
-  Heading,
-  Text,
-  Button,
-} from '@mindmatrix/react';
-
-export default function ContactDb() {
-  const [contactCount, setContactCount] = useState(0);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterActive, setFilterActive] = useState(true);
-  const [lastSync, setLastSync] = useState('');
-  const [syncInterval, setSyncInterval] = useState(60);
-
-  useOnEnter('draft', () => {
-    setContactCount(0);
-    setSearchQuery('');
-  });
-
-  useOnEnter('pending', () => {
-    setLastSync(new Date().toISOString());
-  });
-
-  useOnExit('verified', () => {
-    setLastSync(new Date().toISOString());
-  });
-
-  useWhileIn('verified', 30000, () => {
-    setLastSync(new Date().toISOString());
-  });
-
-  const importData = useTransition('import-contacts', { from: 'draft', to: 'pending' });
-  const verifyAll = useTransition('verify-all', { from: 'pending', to: 'verified' });
-  const archiveOld = useTransition('archive-old', { from: 'verified', to: 'archived' });
-
-  return (
-    <Stack sx={{ gap: 16, p: 24 }}>
-      <Heading sx={{ fontSize: 24, fontWeight: 'bold' }}>Contact Database</Heading>
-      <Text>Contacts: {contactCount}</Text>
-      <Text>Last sync: {lastSync}</Text>
-      <Button onClick={() => importData.fire()}>Import</Button>
-      <Button onClick={() => verifyAll.fire()}>Verify All</Button>
-      <Button onClick={() => archiveOld.fire()} sx={{ variant: 'outline' }}>Archive Old</Button>
-    </Stack>
-  );
-}

package/src/__tests__/round-trip/fixtures/data-heavy/mm.config.ts

@@ -1,11 +0,0 @@
-import { defineBlueprint } from '@mindmatrix/react';
-
-export default defineBlueprint({
-  slug: 'contact-db',
-  name: 'Contact Database',
-  version: '1.0.0',
-  category: 'blueprint',
-  description: 'Contact database with many field types',
-  models: ['models/contact.ts'],
-  entries: ['main.workflow.tsx'],
-});

package/src/__tests__/round-trip/fixtures/data-heavy/models/contact.ts

@@ -1,54 +0,0 @@
-/**
- * @workflow slug="contact" version="1.0.0" category="data"
- * @description Contact with many field types
- */
-export interface Contact {
-  firstName: string;
-  lastName: string;
-  email: string;
-  phone: string;
-  age: number;
-  salary: number;
-  isActive: boolean;
-  isVerified: boolean;
-  notes: string;
-  tags: string[];
-  address: string;
-  website: string;
-}
-
-export const states = [
-  { name: 'draft', type: 'START' as const },
-  { name: 'pending' },
-  { name: 'verified' },
-  { name: 'suspended' },
-  { name: 'archived' },
-] as const;
-
-export const transitions = {
-  submit: {
-    from: 'draft',
-    to: 'pending',
-    required_fields: ['firstName', 'lastName', 'email'],
-  },
-  verify: {
-    from: 'pending',
-    to: 'verified',
-    roles: ['admin'],
-  },
-  suspend: {
-    from: 'verified',
-    to: 'suspended',
-    roles: ['admin'],
-  },
-  reactivate: {
-    from: 'suspended',
-    to: 'verified',
-    roles: ['admin'],
-  },
-  archive: {
-    from: ['verified', 'suspended'],
-    to: 'archived',
-    roles: ['admin'],
-  },
-};

package/src/__tests__/round-trip/fixtures/full-workflow/main.workflow.tsx

@@ -1,79 +0,0 @@
-/**
- * @workflow slug="order-system" version="2.0.0" category="blueprint"
- * @description Order management with roles and actions
- */
-import { useState } from 'react';
-import {
-  useTransition,
-  useOnEnter,
-  useOnExit,
-  useOnChange,
-  useOnEvent,
-  useRole,
-  Stack,
-  Heading,
-  Text,
-  Button,
-} from '@mindmatrix/react';
-
-export default function OrderSystem() {
-  const [orderStatus, setOrderStatus] = useState('');
-  const [totalAmount, setTotalAmount] = useState(0);
-  const [itemCount, setItemCount] = useState(0);
-  const [lastUpdated, setLastUpdated] = useState('');
-
-  const isAdmin = useRole('admin');
-  const isCustomer = useRole('customer');
-
-  useOnEnter('draft', () => {
-    setOrderStatus('New order created');
-    setTotalAmount(0);
-  });
-
-  useOnEnter('submitted', () => {
-    setOrderStatus('Order submitted for review');
-  });
-
-  useOnExit('processing', () => {
-    setLastUpdated(new Date().toISOString());
-  });
-
-  useOnChange('totalAmount', () => {
-    setLastUpdated(new Date().toISOString());
-  });
-
-  useOnEvent('order:updated', () => {
-    setLastUpdated(new Date().toISOString());
-  });
-
-  const submitOrder = useTransition('submit', {
-    from: 'draft',
-    to: 'submitted',
-    requiredFields: ['customerName', 'shippingAddress'],
-    roles: ['customer'],
-  });
-
-  const processOrder = useTransition('process', {
-    from: 'submitted',
-    to: 'processing',
-    roles: ['fulfiller', 'admin'],
-  });
-
-  const cancelOrder = useTransition('cancel', {
-    from: ['draft', 'submitted'],
-    to: 'cancelled',
-    roles: ['customer', 'admin'],
-  });
-
-  return (
-    <Stack sx={{ gap: 16, p: 24 }}>
-      <Heading sx={{ fontSize: 24, fontWeight: 'bold' }}>Order System</Heading>
-      <Text>Status: {orderStatus}</Text>
-      <Text>Items: {itemCount} | Total: ${totalAmount}</Text>
-      <Text>Last updated: {lastUpdated}</Text>
-      <Button onClick={() => submitOrder.fire()}>Submit Order</Button>
-      <Button onClick={() => processOrder.fire()}>Process</Button>
-      <Button onClick={() => cancelOrder.fire()} sx={{ colorScheme: 'red' }}>Cancel</Button>
-    </Stack>
-  );
-}

package/src/__tests__/round-trip/fixtures/full-workflow/mm.config.ts

@@ -1,12 +0,0 @@
-import { defineBlueprint } from '@mindmatrix/react';
-
-export default defineBlueprint({
-  slug: 'order-system',
-  name: 'Order System',
-  version: '2.0.0',
-  category: 'blueprint',
-  description: 'Order management with roles and actions',
-  models: ['models/order.ts'],
-  entries: ['main.workflow.tsx'],
-  roles: ['admin', 'customer', 'fulfiller'],
-});

package/src/__tests__/round-trip/fixtures/full-workflow/models/order.ts

@@ -1,50 +0,0 @@
-/**
- * @workflow slug="order" version="1.0.0" category="data"
- * @description Order data model with states and transitions
- */
-export interface Order {
-  customerName: string;
-  itemCount: number;
-  totalAmount: number;
-  shippingAddress: string;
-  isPaid: boolean;
-  notes: string;
-}
-
-export const states = [
-  { name: 'draft', type: 'START' as const },
-  { name: 'submitted' },
-  { name: 'processing' },
-  { name: 'shipped' },
-  { name: 'delivered' },
-  { name: 'cancelled' },
-] as const;
-
-export const transitions = {
-  submit: {
-    from: 'draft',
-    to: 'submitted',
-    required_fields: ['customerName', 'shippingAddress'],
-    roles: ['customer'],
-  },
-  process: {
-    from: 'submitted',
-    to: 'processing',
-    roles: ['fulfiller', 'admin'],
-  },
-  ship: {
-    from: 'processing',
-    to: 'shipped',
-    roles: ['fulfiller'],
-  },
-  deliver: {
-    from: 'shipped',
-    to: 'delivered',
-    roles: ['fulfiller'],
-  },
-  cancel: {
-    from: ['draft', 'submitted'],
-    to: 'cancelled',
-    roles: ['customer', 'admin'],
-  },
-};

package/src/__tests__/round-trip/fixtures/simple-crud/main.workflow.tsx

@@ -1,25 +0,0 @@
-/**
- * @workflow slug="task-manager" version="1.0.0" category="blueprint"
- * @description A simple task management app
- */
-import { useState } from 'react';
-import { useTransition, useQuery, Stack, Heading, Text, Button } from '@mindmatrix/react';
-
-export default function TaskManager() {
-  const [taskTitle, setTaskTitle] = useState('');
-  const [taskCount, setTaskCount] = useState(0);
-
-  const tasks = useQuery('task', { fields: ['title', 'completed', 'priority'] });
-
-  const addTask = useTransition('add-task', { from: 'idle', to: 'idle' });
-  const clearAll = useTransition('clear-all', { from: 'idle', to: 'idle' });
-
-  return (
-    <Stack sx={{ gap: 16, p: 24 }}>
-      <Heading sx={{ fontSize: 24, fontWeight: 'bold' }}>Task Manager</Heading>
-      <Text>Total tasks: {taskCount}</Text>
-      <Button onClick={() => addTask.fire()}>Add Task</Button>
-      <Button onClick={() => clearAll.fire()} sx={{ variant: 'outline' }}>Clear All</Button>
-    </Stack>
-  );
-}

package/src/__tests__/round-trip/fixtures/simple-crud/mm.config.ts

@@ -1,11 +0,0 @@
-import { defineBlueprint } from '@mindmatrix/react';
-
-export default defineBlueprint({
-  slug: 'task-manager',
-  name: 'Task Manager',
-  version: '1.0.0',
-  category: 'blueprint',
-  description: 'A simple task management app',
-  models: ['models/task.ts'],
-  entries: ['main.workflow.tsx'],
-});

package/src/__tests__/round-trip/fixtures/simple-crud/models/task.ts

@@ -1,32 +0,0 @@
-/**
- * @workflow slug="task" version="1.0.0" category="data"
- * @description Task data model
- */
-export interface Task {
-  title: string;
-  description: string;
-  completed: boolean;
-  priority: number;
-}
-
-export const states = [
-  { name: 'draft', type: 'START' as const },
-  { name: 'active' },
-  { name: 'done' },
-] as const;
-
-export const transitions = {
-  activate: {
-    from: 'draft',
-    to: 'active',
-    required_fields: ['title'],
-  },
-  complete: {
-    from: 'active',
-    to: 'done',
-  },
-  reopen: {
-    from: 'done',
-    to: 'active',
-  },
-};

package/src/__tests__/round-trip/fixtures/view-heavy/main.workflow.tsx

@@ -1,79 +0,0 @@
-/**
- * @workflow slug="dashboard-app" version="1.0.0" category="blueprint"
- * @description Dashboard with complex views and routing
- */
-import { useState } from 'react';
-import {
-  useTransition,
-  Stack,
-  Row,
-  Heading,
-  Text,
-  Button,
-  Show,
-  Route,
-} from '@mindmatrix/react';
-
-export default function DashboardApp() {
-  const [activeTab, setActiveTab] = useState('home');
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [notificationCount, setNotificationCount] = useState(0);
-  const [darkMode, setDarkMode] = useState(false);
-
-  const navigate = useTransition('navigate', { from: 'active', to: 'active' });
-
-  return (
-    <Stack sx={{ minHeight: '100vh', bg: '#f8fafc' }}>
-      <Row sx={{ p: 16, bg: '#ffffff', borderBottom: '1px solid #e2e8f0', justifyContent: 'space-between' }}>
-        <Heading sx={{ fontSize: 20, fontWeight: 'bold' }}>Dashboard</Heading>
-        <Row sx={{ gap: 8 }}>
-          <Text sx={{ fontSize: 14, color: '#64748b' }}>Notifications: {notificationCount}</Text>
-          <Button onClick={() => setDarkMode(!darkMode)} sx={{ variant: 'ghost' }}>Toggle Theme</Button>
-        </Row>
-      </Row>
-      <Row sx={{ flex: 1 }}>
-        <Show when={sidebarOpen}>
-          <Stack sx={{ width: 240, bg: '#ffffff', borderRight: '1px solid #e2e8f0', p: 16, gap: 8 }}>
-            <Button onClick={() => setActiveTab('home')} sx={{ variant: 'ghost', justifyContent: 'flex-start' }}>Home</Button>
-            <Button onClick={() => setActiveTab('analytics')} sx={{ variant: 'ghost', justifyContent: 'flex-start' }}>Analytics</Button>
-            <Button onClick={() => setActiveTab('settings')} sx={{ variant: 'ghost', justifyContent: 'flex-start' }}>Settings</Button>
-          </Stack>
-        </Show>
-        <Stack sx={{ flex: 1, p: 24, gap: 16 }}>
-          <Route path="/home">
-            <Stack sx={{ gap: 16 }}>
-              <Heading sx={{ fontSize: 18 }}>Welcome Home</Heading>
-              <Text sx={{ color: '#64748b' }}>Your dashboard overview</Text>
-              <Row sx={{ gap: 16 }}>
-                <Stack sx={{ bg: '#ffffff', p: 16, rounded: 8, flex: 1 }}>
-                  <Text sx={{ fontSize: 14, color: '#64748b' }}>Total Items</Text>
-                  <Heading sx={{ fontSize: 32 }}>128</Heading>
-                </Stack>
-                <Stack sx={{ bg: '#ffffff', p: 16, rounded: 8, flex: 1 }}>
-                  <Text sx={{ fontSize: 14, color: '#64748b' }}>Active</Text>
-                  <Heading sx={{ fontSize: 32 }}>42</Heading>
-                </Stack>
-              </Row>
-            </Stack>
-          </Route>
-          <Route path="/analytics">
-            <Stack sx={{ gap: 16 }}>
-              <Heading sx={{ fontSize: 18 }}>Analytics</Heading>
-              <Text sx={{ color: '#64748b' }}>Performance metrics</Text>
-            </Stack>
-          </Route>
-          <Route path="/settings">
-            <Stack sx={{ gap: 16 }}>
-              <Heading sx={{ fontSize: 18 }}>Settings</Heading>
-              <Show when={darkMode}>
-                <Text sx={{ color: '#64748b' }}>Dark mode is enabled</Text>
-              </Show>
-              <Button onClick={() => setSidebarOpen(!sidebarOpen)}>Toggle Sidebar</Button>
-            </Stack>
-          </Route>
-        </Stack>
-      </Row>
-    </Stack>
-  );
-}

package/src/__tests__/round-trip/fixtures/view-heavy/mm.config.ts

@@ -1,10 +0,0 @@
-import { defineBlueprint } from '@mindmatrix/react';
-
-export default defineBlueprint({
-  slug: 'dashboard-app',
-  name: 'Dashboard App',
-  version: '1.0.0',
-  category: 'blueprint',
-  description: 'Dashboard with complex views and routing',
-  entries: ['main.workflow.tsx'],
-});