@mmapp/react-compiler 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,107 @@
+# @mindmatrix/react-compiler
+
+Babel plugin + Vite integration that transforms React workflow files into Pure Form (IR) JSON output.
+
+## Installation
+
+```bash
+pnpm add -D @mindmatrix/react-compiler
+```
+
+## Usage
+
+### Vite Plugin
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { mindmatrixReact } from '@mindmatrix/react-compiler/vite';
+
+export default defineConfig({
+  plugins: [
+    mindmatrixReact({
+      mode: 'infer',
+      include: ['**/*.workflow.tsx']
+    })
+  ]
+});
+```
+
+### Babel Plugin
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['@mindmatrix/react-compiler/babel', { mode: 'infer' }]
+  ]
+};
+```
+
+### CLI
+
+```bash
+# Build workflows
+pnpm mmrc build --src src/workflows --out dist/workflows
+
+# Deploy workflows
+pnpm mmrc deploy --api-url http://localhost:3010 --token YOUR_TOKEN
+```
+
+## Features
+
+- Extract `useState` calls → IR field definitions
+- Extract `useOnEnter`, `useOnExit` → IR action definitions
+- Extract `useTransition` → IR transition definitions
+- Extract `useOnEvent` → IR event subscriptions
+- Extract JSX components → IR experience nodes
+- Emit Pure Form JSON matching `IRWorkflowDefinition` schema
+
+## Example
+
+```tsx
+// src/workflows/approval.workflow.tsx
+import { useState, useOnEnter, useTransition } from '@mindmatrix/react';
+
+export function ApprovalWorkflow() {
+  const [status, setStatus] = useState('pending');
+  const [approver, setApprover] = useState('');
+
+  useOnEnter('approved', () => {
+    setStatus('done');
+  });
+
+  const approve = useTransition('approve');
+
+  return <div>Status: {status}</div>;
+}
+```
+
+Compiles to:
+
+```json
+{
+  "slug": "approval",
+  "name": "ApprovalWorkflow",
+  "version": "0.1.0",
+  "category": "workflow",
+  "fields": [
+    { "name": "status", "type": "text", "default_value": "pending" },
+    { "name": "approver", "type": "text", "default_value": "" }
+  ],
+  "states": [
+    {
+      "name": "approved",
+      "type": "REGULAR",
+      "on_enter": [
+        { "id": "auto_1", "type": "set_field", "mode": "auto", "config": { "field": "status", "value": "done" } }
+      ],
+      "during": [],
+      "on_exit": []
+    }
+  ],
+  "transitions": [
+    { "name": "approve", "from": [], "to": "approved", "actions": [], "conditions": [] }
+  ]
+}
+```

package/compile-blueprint-chat.mjs

@@ -0,0 +1,99 @@
+/**
+ * Compiles blueprint-chat app/ views through the same Babel plugin
+ * that handles .workflow.tsx files.
+ *
+ * Each app/ file has @workflow JSDoc + default export function →
+ * compiled to { canonical, ir } with view tree.
+ *
+ * Run from repo root: node packages/react-compiler/compile-blueprint-chat.mjs
+ */
+import { transformSync } from '@babel/core';
+import { readFileSync, readdirSync, writeFileSync, mkdirSync, statSync } from 'fs';
+import { join, dirname, relative } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const plugin = await import('./dist/babel/index.mjs');
+const babelPlugin = plugin.default;
+
+const blueprintDir = join(__dirname, '../blueprint-chat/app');
+const outDir = join(__dirname, '../frontend/src/workflows/compiled/blueprint-chat');
+
+mkdirSync(outDir, { recursive: true });
+
+// Recursively find all .tsx files in app/
+function findTsxFiles(dir, base = '') {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const relPath = base ? `${base}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      files.push(...findTsxFiles(join(dir, entry.name), relPath));
+    } else if (entry.name.endsWith('.tsx')) {
+      files.push({ fullPath: join(dir, entry.name), relPath });
+    }
+  }
+  return files;
+}
+
+const files = findTsxFiles(blueprintDir);
+console.log(`Found ${files.length} .tsx files in blueprint-chat/app/\n`);
+
+let compiled = 0;
+let failed = 0;
+const results = [];
+
+for (const { fullPath, relPath } of files) {
+  const code = readFileSync(fullPath, 'utf-8');
+
+  try {
+    const result = transformSync(code, {
+      filename: fullPath,
+      plugins: [[babelPlugin, { mode: 'infer' }]],
+      parserOpts: { plugins: ['jsx', 'typescript'] },
+    });
+
+    const def = result?.metadata?.mindmatrixDefinition;
+    const canonical = result?.metadata?.mindmatrixCanonical;
+    const ir = result?.metadata?.mindmatrixIR;
+
+    if (def) {
+      const combinedOutput = {
+        canonical: canonical || null,
+        ir: def,
+      };
+
+      // Use the slug from the workflow annotation
+      const outFile = join(outDir, `${def.slug}.json`);
+      writeFileSync(outFile, JSON.stringify(combinedOutput, null, 2), 'utf-8');
+      console.log(`  ✓ ${relPath} → ${def.slug}.json`);
+
+      // Check if view tree was extracted
+      const viewTree = def.views?.default || def.metadata?.experience;
+      if (viewTree) {
+        console.log(`    view tree: ${viewTree.children?.length || 0} top-level children`);
+      } else {
+        console.log(`    ⚠ no view tree extracted`);
+      }
+
+      results.push({ slug: def.slug, relPath, hasView: !!viewTree });
+      compiled++;
+    } else {
+      console.log(`  ⚠ ${relPath}: no @workflow annotation or no definition generated`);
+      failed++;
+    }
+  } catch (err) {
+    console.error(`  ✗ ${relPath}: ${err.message}`);
+    failed++;
+  }
+}
+
+console.log(`\nCompiled: ${compiled}, Failed/Skipped: ${failed}`);
+
+// Summary of view trees
+console.log('\n--- View tree summary ---');
+for (const r of results) {
+  console.log(`  ${r.slug}: view=${r.hasView ? '✓' : '✗'} (${r.relPath})`);
+}

package/compile-blueprint-glass-console.mjs

@@ -0,0 +1,98 @@
+/**
+ * Compiles blueprint-glass-console app/ views through the same Babel plugin
+ * that handles .workflow.tsx files.
+ *
+ * Each app/ file has @workflow JSDoc + default export function →
+ * compiled to { canonical, ir } with view tree.
+ *
+ * Run from repo root: node packages/react-compiler/compile-blueprint-glass-console.mjs
+ */
+import { transformSync } from '@babel/core';
+import { readFileSync, readdirSync, writeFileSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const plugin = await import('./dist/babel/index.mjs');
+const babelPlugin = plugin.default;
+
+const blueprintDir = join(__dirname, '../blueprint-glass-console/app');
+const outDir = join(__dirname, '../frontend/src/workflows/compiled/blueprint-glass-console');
+
+mkdirSync(outDir, { recursive: true });
+
+// Recursively find all .tsx files in app/
+function findTsxFiles(dir, base = '') {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const relPath = base ? `${base}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      files.push(...findTsxFiles(join(dir, entry.name), relPath));
+    } else if (entry.name.endsWith('.tsx')) {
+      files.push({ fullPath: join(dir, entry.name), relPath });
+    }
+  }
+  return files;
+}
+
+const files = findTsxFiles(blueprintDir);
+console.log(`Found ${files.length} .tsx files in blueprint-glass-console/app/\n`);
+
+let compiled = 0;
+let failed = 0;
+const results = [];
+
+for (const { fullPath, relPath } of files) {
+  const code = readFileSync(fullPath, 'utf-8');
+
+  try {
+    const result = transformSync(code, {
+      filename: fullPath,
+      plugins: [[babelPlugin, { mode: 'infer' }]],
+      parserOpts: { plugins: ['jsx', 'typescript'] },
+    });
+
+    const def = result?.metadata?.mindmatrixDefinition;
+    const canonical = result?.metadata?.mindmatrixCanonical;
+
+    if (def) {
+      const combinedOutput = {
+        canonical: canonical || null,
+        ir: def,
+      };
+
+      // Use the slug from the workflow annotation
+      const outFile = join(outDir, `${def.slug}.json`);
+      writeFileSync(outFile, JSON.stringify(combinedOutput, null, 2), 'utf-8');
+      console.log(`  ✓ ${relPath} → ${def.slug}.json`);
+
+      // Check if view tree was extracted
+      const viewTree = def.views?.default || def.metadata?.experience;
+      if (viewTree) {
+        console.log(`    view tree: ${viewTree.children?.length || 0} top-level children`);
+      } else {
+        console.log(`    ⚠ no view tree extracted`);
+      }
+
+      results.push({ slug: def.slug, relPath, hasView: !!viewTree });
+      compiled++;
+    } else {
+      console.log(`  ⚠ ${relPath}: no @workflow annotation or no definition generated`);
+      failed++;
+    }
+  } catch (err) {
+    console.error(`  ✗ ${relPath}: ${err.message}`);
+    failed++;
+  }
+}
+
+console.log(`\nCompiled: ${compiled}, Failed/Skipped: ${failed}`);
+
+// Summary of view trees
+console.log('\n--- View tree summary ---');
+for (const r of results) {
+  console.log(`  ${r.slug}: view=${r.hasView ? '✓' : '✗'} (${r.relPath})`);
+}

package/compile-chat-defs.mjs

@@ -0,0 +1,92 @@
+/**
+ * Compiles all .workflow.tsx files into engine-compatible JSON definitions.
+ * Outputs to packages/frontend/src/workflows/compiled/
+ *
+ * Each compiled output contains both:
+ *   - canonical: Pure form tree per 041 protocol (THE TRUTH)
+ *   - ir: Lowered IR with normalized view tree (derivable cache)
+ *
+ * Run from repo root: node packages/react-compiler/compile-chat-defs.mjs
+ */
+import { transformSync } from '@babel/core';
+import { readFileSync, readdirSync, writeFileSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const plugin = await import('./dist/babel/index.mjs');
+const babelPlugin = plugin.default;
+
+const workflowDir = join(__dirname, '../frontend/src/workflows');
+const outDir = join(__dirname, '../frontend/src/workflows/compiled');
+
+const files = readdirSync(workflowDir).filter(f => f.endsWith('.workflow.tsx'));
+
+mkdirSync(outDir, { recursive: true });
+
+let compiled = 0;
+const slugs = [];
+
+for (const file of files) {
+  const filePath = join(workflowDir, file);
+  const code = readFileSync(filePath, 'utf-8');
+
+  try {
+    const result = transformSync(code, {
+      filename: filePath,
+      plugins: [[babelPlugin, { mode: 'infer' }]],
+      parserOpts: { plugins: ['jsx', 'typescript'] },
+    });
+
+    const def = result?.metadata?.mindmatrixDefinition;
+    const canonical = result?.metadata?.mindmatrixCanonical;
+
+    if (def) {
+      // Output combined format: { canonical, ir }
+      const combinedOutput = {
+        canonical: canonical || null,
+        ir: def,
+      };
+
+      const outFile = join(outDir, `${def.slug}.json`);
+      writeFileSync(outFile, JSON.stringify(combinedOutput, null, 2), 'utf-8');
+      console.log(`  ✓ ${file} → ${def.slug}.json (canonical + ir)`);
+      slugs.push(def.slug);
+      compiled++;
+    } else {
+      console.error(`  ✗ ${file}: no definition generated`);
+    }
+  } catch (err) {
+    console.error(`  ✗ ${file}: ${err.message}`);
+  }
+}
+
+// Generate index.ts that re-exports all definitions
+const indexContent = [
+  '// Auto-generated by compile-chat-defs.mjs — do not edit manually',
+  `// Compiled from ${files.length} .workflow.tsx files`,
+  '',
+  ...slugs.map(slug => {
+    const varName = slug.replace(/-/g, '_').replace(/^mm_/, 'mm');
+    return `import ${varName}Def from './${slug}.json';`;
+  }),
+  '',
+  'export const compiledDefinitions: Record<string, unknown> = {',
+  ...slugs.map(slug => {
+    const varName = slug.replace(/-/g, '_').replace(/^mm_/, 'mm');
+    return `  '${slug}': ${varName}Def,`;
+  }),
+  '};',
+  '',
+  ...slugs.map(slug => {
+    const varName = slug.replace(/-/g, '_').replace(/^mm_/, 'mm');
+    return `export { default as ${varName}Def } from './${slug}.json';`;
+  }),
+  '',
+].join('\n');
+
+writeFileSync(join(outDir, 'index.ts'), indexContent);
+console.log(`\n  ✓ index.ts generated (${slugs.length} definitions)`);
+console.log(`\nCompiled ${compiled} workflow definitions`);

package/dist/babel/index.d.mts

@@ -0,0 +1,3 @@
+import '@babel/traverse';
+export { b as default } from '../index-revho_gS.mjs';
+import '@mindmatrix/player-core';

package/dist/babel/index.d.ts

@@ -0,0 +1,3 @@
+import '@babel/traverse';
+export { b as default } from '../index-revho_gS.js';
+import '@mindmatrix/player-core';