@mmapp/react-compiler 0.1.0-alpha.1

package/dist/index.mjs

@@ -0,0 +1,372 @@
+import {
+  IncrementalCache,
+  IncrementalProjectCompiler,
+  buildDependencyGraph,
+  compileActions,
+  compileModel,
+  compileModels,
+  compileProject,
+  computeTransitiveDirtySet,
+  extractImports,
+  extractRoutes,
+  hashContent,
+  resolveActionReferences,
+  resolveImport,
+  topologicalSort
+} from "./chunk-ILFGMUVD.mjs";
+import {
+  decompile,
+  decompileProject,
+  shouldDecompileAsProject
+} from "./chunk-SU4E6E7B.mjs";
+import {
+  createDevServer
+} from "./chunk-NRXQKQ74.mjs";
+import "./chunk-46YKSHQR.mjs";
+import {
+  buildEnvelope
+} from "./chunk-FX6URXWN.mjs";
+import {
+  deploy
+} from "./chunk-EQGA6A6D.mjs";
+import {
+  build
+} from "./chunk-KFGYOOVS.mjs";
+import {
+  computeEnvelopeId,
+  createSourceEnvelope,
+  detectFileRole,
+  diffEnvelopes,
+  diffFsTrees,
+  envelopesEqual,
+  filterByRole,
+  generateFsTree
+} from "./chunk-5M7DKKBC.mjs";
+import {
+  babelPlugin,
+  compilerStateToWorkflow,
+  createVisitor,
+  emitCanonical,
+  emitCompiledOutput,
+  emitIR,
+  emitPureForm,
+  extractComponents,
+  extractComputed,
+  extractEffects,
+  extractEvents,
+  extractStates,
+  extractTransitions,
+  transformToFrontend
+} from "./chunk-HLRGCCIL.mjs";
+import "./chunk-Y6FXYEAI.mjs";
+
+// src/babel/emitters/ir-to-tsx-emitter.ts
+function decompileToTSX(definition, options) {
+  return decompile(definition, options);
+}
+function normalizeDecompilerInput(definition) {
+  const input = { ...definition };
+  if (!input.experience) {
+    const views = definition.views;
+    if (views?.default) {
+      input.experience = views.default;
+    }
+  }
+  if (!input.experience && definition.metadata?.experience) {
+    input.experience = definition.metadata.experience;
+  }
+  return input;
+}
+
+// src/RoundTripValidator.ts
+import { transformSync } from "@babel/core";
+function validateRoundTrip(definition) {
+  const { code: generatedSource } = decompile(definition, {
+    includeAnnotation: true
+  });
+  let roundTrippedIR = null;
+  try {
+    const result = transformSync(generatedSource, {
+      filename: `${definition.slug}.workflow.tsx`,
+      plugins: [[babelPlugin, { mode: "infer" }]],
+      parserOpts: { plugins: ["typescript", "jsx"], attachComment: true }
+    });
+    roundTrippedIR = result?.metadata?.mindmatrixIR ?? null;
+  } catch (err) {
+    return {
+      success: false,
+      generatedSource,
+      originalIR: definition,
+      roundTrippedIR: null,
+      diffs: [{
+        path: "<compile>",
+        expected: "valid compilation",
+        actual: `compilation failed: ${err.message}`,
+        severity: "error"
+      }]
+    };
+  }
+  if (!roundTrippedIR) {
+    return {
+      success: false,
+      generatedSource,
+      originalIR: definition,
+      roundTrippedIR: null,
+      diffs: [{
+        path: "<compile>",
+        expected: "IR output",
+        actual: "no IR produced",
+        severity: "error"
+      }]
+    };
+  }
+  const diffs = compareIR(definition, roundTrippedIR);
+  return {
+    success: diffs.filter((d) => d.severity === "error").length === 0,
+    generatedSource,
+    originalIR: definition,
+    roundTrippedIR,
+    diffs
+  };
+}
+function compareIR(original, roundTripped) {
+  const diffs = [];
+  comparePrimitive(diffs, "slug", original.slug, roundTripped.slug);
+  comparePrimitive(diffs, "version", original.version, roundTripped.version);
+  comparePrimitive(diffs, "category", original.category, roundTripped.category);
+  compareFields(diffs, original.fields, roundTripped.fields);
+  compareStates(diffs, original.states, roundTripped.states);
+  compareTransitions(diffs, original.transitions, roundTripped.transitions);
+  const origEvents = original.on_event ?? [];
+  const rtEvents = roundTripped.on_event ?? [];
+  if (origEvents.length !== rtEvents.length) {
+    diffs.push({
+      path: "on_event.length",
+      expected: origEvents.length,
+      actual: rtEvents.length,
+      severity: origEvents.length > 0 ? "error" : "warning"
+    });
+  }
+  return diffs;
+}
+function comparePrimitive(diffs, path, expected, actual) {
+  if (expected !== actual) {
+    diffs.push({ path, expected, actual, severity: "error" });
+  }
+}
+function compareFields(diffs, original, roundTripped) {
+  const origFields = original.filter((f) => !f.computed);
+  if (origFields.length !== roundTripped.length) {
+    diffs.push({
+      path: "fields.length",
+      expected: origFields.length,
+      actual: roundTripped.length,
+      severity: "error"
+    });
+  }
+  const rtMap = new Map(roundTripped.map((f) => [f.name, f]));
+  for (const field of origFields) {
+    const rt = rtMap.get(field.name);
+    if (!rt) {
+      diffs.push({
+        path: `fields[${field.name}]`,
+        expected: field.name,
+        actual: void 0,
+        severity: "error"
+      });
+      continue;
+    }
+    if (field.type !== rt.type && !isCompatibleType(field.type, rt.type)) {
+      diffs.push({
+        path: `fields[${field.name}].type`,
+        expected: field.type,
+        actual: rt.type,
+        severity: "warning"
+      });
+    }
+  }
+}
+function isCompatibleType(original, roundTripped) {
+  const stringTypes = ["text", "rich_text", "email", "url", "phone", "color", "select"];
+  const numberTypes = ["number", "currency", "percentage", "rating", "duration", "auto_number"];
+  if (stringTypes.includes(original) && stringTypes.includes(roundTripped)) return true;
+  if (numberTypes.includes(original) && numberTypes.includes(roundTripped)) return true;
+  return false;
+}
+function compareStates(diffs, original, roundTripped) {
+  const rtMap = new Map(roundTripped.map((s) => [s.name, s]));
+  for (const state of original) {
+    const hasActions = state.on_enter.length > 0 || state.on_exit.length > 0 || state.during.length > 0;
+    const rt = rtMap.get(state.name);
+    if (!rt && hasActions) {
+      diffs.push({
+        path: `states[${state.name}]`,
+        expected: state.name,
+        actual: void 0,
+        severity: "error"
+      });
+      continue;
+    }
+    if (!rt) continue;
+    if (state.on_enter.length !== rt.on_enter.length) {
+      diffs.push({
+        path: `states[${state.name}].on_enter.length`,
+        expected: state.on_enter.length,
+        actual: rt.on_enter.length,
+        severity: state.on_enter.length > 0 ? "error" : "warning"
+      });
+    }
+    if (state.on_exit.length !== rt.on_exit.length) {
+      diffs.push({
+        path: `states[${state.name}].on_exit.length`,
+        expected: state.on_exit.length,
+        actual: rt.on_exit.length,
+        severity: state.on_exit.length > 0 ? "error" : "warning"
+      });
+    }
+    if (state.during.length !== rt.during.length) {
+      diffs.push({
+        path: `states[${state.name}].during.length`,
+        expected: state.during.length,
+        actual: rt.during.length,
+        severity: state.during.length > 0 ? "error" : "warning"
+      });
+    }
+  }
+}
+function compareTransitions(diffs, original, roundTripped) {
+  if (original.length !== roundTripped.length) {
+    diffs.push({
+      path: "transitions.length",
+      expected: original.length,
+      actual: roundTripped.length,
+      severity: "error"
+    });
+  }
+  const rtMap = new Map(roundTripped.map((t) => [t.name, t]));
+  for (const transition of original) {
+    const rt = rtMap.get(transition.name);
+    if (!rt) {
+      diffs.push({
+        path: `transitions[${transition.name}]`,
+        expected: transition.name,
+        actual: void 0,
+        severity: "error"
+      });
+      continue;
+    }
+    if (transition.to !== rt.to) {
+      diffs.push({
+        path: `transitions[${transition.name}].to`,
+        expected: transition.to,
+        actual: rt.to,
+        severity: "error"
+      });
+    }
+    const origFrom = [...transition.from].sort();
+    const rtFrom = [...rt.from].sort();
+    if (JSON.stringify(origFrom) !== JSON.stringify(rtFrom)) {
+      diffs.push({
+        path: `transitions[${transition.name}].from`,
+        expected: origFrom,
+        actual: rtFrom,
+        severity: "error"
+      });
+    }
+    const origRoles = [...transition.roles ?? []].sort();
+    const rtRoles = [...rt.roles ?? []].sort();
+    if (JSON.stringify(origRoles) !== JSON.stringify(rtRoles)) {
+      diffs.push({
+        path: `transitions[${transition.name}].roles`,
+        expected: origRoles,
+        actual: rtRoles,
+        severity: "error"
+      });
+    }
+    const origReq = [...transition.required_fields ?? []].sort();
+    const rtReq = [...rt.required_fields ?? []].sort();
+    if (JSON.stringify(origReq) !== JSON.stringify(rtReq)) {
+      diffs.push({
+        path: `transitions[${transition.name}].required_fields`,
+        expected: origReq,
+        actual: rtReq,
+        severity: "error"
+      });
+    }
+    if (!!transition.auto !== !!rt.auto) {
+      diffs.push({
+        path: `transitions[${transition.name}].auto`,
+        expected: transition.auto,
+        actual: rt.auto,
+        severity: "error"
+      });
+    }
+  }
+}
+function compileSource(source, filename = "test.workflow.tsx") {
+  try {
+    const result = transformSync(source, {
+      filename,
+      plugins: [[babelPlugin, { mode: "infer" }]],
+      parserOpts: { plugins: ["typescript", "jsx"], attachComment: true }
+    });
+    return result?.metadata?.mindmatrixIR ?? null;
+  } catch {
+    return null;
+  }
+}
+function validateSourceRoundTrip(source, filename = "test.workflow.tsx") {
+  const ir = compileSource(source, filename);
+  if (!ir) return null;
+  return validateRoundTrip(ir);
+}
+export {
+  IncrementalCache,
+  IncrementalProjectCompiler,
+  babelPlugin,
+  build,
+  buildDependencyGraph,
+  buildEnvelope,
+  compileActions,
+  compileModel,
+  compileModels,
+  compileProject,
+  compileSource,
+  compilerStateToWorkflow,
+  computeEnvelopeId,
+  computeTransitiveDirtySet,
+  createDevServer,
+  createSourceEnvelope,
+  createVisitor,
+  decompile,
+  decompileProject,
+  decompileToTSX,
+  deploy,
+  detectFileRole,
+  diffEnvelopes,
+  diffFsTrees,
+  emitCanonical,
+  emitCompiledOutput,
+  emitIR,
+  emitPureForm,
+  envelopesEqual,
+  extractComponents,
+  extractComputed,
+  extractEffects,
+  extractEvents,
+  extractImports,
+  extractRoutes,
+  extractStates,
+  extractTransitions,
+  filterByRole,
+  generateFsTree,
+  hashContent,
+  normalizeDecompilerInput,
+  resolveActionReferences,
+  resolveImport,
+  shouldDecompileAsProject,
+  topologicalSort,
+  transformToFrontend,
+  validateRoundTrip,
+  validateSourceRoundTrip
+};

package/dist/init-IXEE2RCF.mjs

@@ -0,0 +1,340 @@
+import "./chunk-Y6FXYEAI.mjs";
+
+// src/cli/init.ts
+import { mkdirSync, writeFileSync, existsSync } from "fs";
+import { join } from "path";
+function toTitleCase(slug) {
+  return slug.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function toPascalCase(slug) {
+  return slug.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+}
+function generatePackageJson(name) {
+  return JSON.stringify(
+    {
+      name: `@mindmatrix/blueprint-${name}`,
+      version: "0.1.0",
+      private: true,
+      type: "module",
+      scripts: {
+        build: "mmrc build --src . --out dist",
+        dev: "mmrc dev --src . --port 5199",
+        deploy: "mmrc deploy --build --src ."
+      },
+      dependencies: {
+        "@mindmatrix/react": "workspace:*"
+      }
+    },
+    null,
+    2
+  );
+}
+function generateMmConfig(name, opts) {
+  const title = toTitleCase(name);
+  const desc = opts.description ?? `${title} blueprint.`;
+  const icon = opts.icon ?? "box";
+  const author = opts.author ?? "MindMatrix";
+  return `import { defineBlueprint } from '@mindmatrix/react';
+
+export default defineBlueprint({
+  slug: '${name}',
+  name: '${title}',
+  version: '1.0.0',
+  description: '${desc}',
+  author: '${author}',
+  icon: '${icon}',
+  mode: 'infer',
+  defaultRuntime: 'collaborative',
+
+  models: [
+    'models/item',
+  ],
+
+  routes: [
+    { path: '/', view: 'app/page', label: 'Home' },
+  ],
+
+  dependencies: [],
+});
+`;
+}
+function generateModel(name) {
+  const modelSlug = `${name}-item`;
+  const pascal = toPascalCase(name);
+  return `/**
+ * ${pascal} Item \u2014 data model with lifecycle states.
+ *
+ * States: draft \u2192 active \u2192 archived
+ */
+
+import { defineModel } from '@mindmatrix/react';
+
+export interface ${pascal}ItemFields {
+  title: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  createdAt: number;
+}
+
+export default defineModel({
+  slug: '${modelSlug}',
+  version: '1.0.0',
+  category: ['model', '${name}'],
+
+  fields: {
+    title: { type: 'string', required: true },
+    description: { type: 'string', default: '' },
+    priority: { type: 'string', default: 'medium', enum: ['low', 'medium', 'high'] },
+    createdAt: { type: 'number', default: 0 },
+  },
+
+  states: {
+    draft: {
+      type: 'initial',
+      onEnter: [
+        { id: 'set-created', type: 'set_field', mode: 'auto', config: { field: 'createdAt', expression: 'NOW()' } },
+      ],
+    },
+    active: {
+      onEnter: [
+        { id: 'log-activated', type: 'log_event', mode: 'auto', config: { event: '${modelSlug}.activated' } },
+      ],
+    },
+    archived: {
+      type: 'end',
+    },
+  },
+
+  transitions: {
+    activate: {
+      from: 'draft',
+      to: 'active',
+      description: 'Publish this item',
+    },
+    archive: {
+      from: 'active',
+      to: 'archived',
+      description: 'Archive this item',
+    },
+  },
+});
+`;
+}
+function generateLayout(name) {
+  const title = toTitleCase(name);
+  return `/**
+ * @workflow slug="${name}-layout" version="1.0.0" category="view"
+ *
+ * Root layout with sidebar navigation.
+ */
+
+import {
+  Row,
+  Stack,
+  Slot,
+  Text,
+  Icon,
+  Button,
+  Divider,
+} from '@mindmatrix/react/atoms';
+import { useRouter } from '@mindmatrix/react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  return (
+    <Row gap={0} height="100vh" overflow="hidden">
+      {/* Sidebar */}
+      <Stack
+        width={240}
+        borderRight="1px solid token:border"
+        height="100vh"
+        background="token:surface"
+      >
+        <Row padding={12} gap={8} align="center" borderBottom="1px solid token:border">
+          <Icon name="box" size={20} color="token:primary" />
+          <Text variant="label" size="sm" value="${title}" />
+        </Row>
+
+        <Stack padding={8} gap={4}>
+          <Button variant="ghost" onPress={() => router.push('/')}>
+            <Row gap={8} align="center">
+              <Icon name="home" size={16} />
+              <Text size="sm" value="Home" />
+            </Row>
+          </Button>
+          <Button variant="ghost" onPress={() => router.push('/settings')}>
+            <Row gap={8} align="center">
+              <Icon name="settings" size={16} />
+              <Text size="sm" value="Settings" />
+            </Row>
+          </Button>
+        </Stack>
+
+        <Divider />
+        <Stack flex={1} />
+        <Row padding={12}>
+          <Text variant="muted" size="xs" value="v1.0.0" />
+        </Row>
+      </Stack>
+
+      {/* Main content */}
+      <Stack flex={1} overflow="auto">
+        {children}
+      </Stack>
+    </Row>
+  );
+}
+`;
+}
+function generatePage(name) {
+  const title = toTitleCase(name);
+  const pascal = toPascalCase(name);
+  return `/**
+ * @workflow slug="${name}-home" version="1.0.0" category="page"
+ *
+ * Index page \u2014 lists items with create and search.
+ */
+
+import itemModel from '../models/item';
+import {
+  useQuery, useMutation, useRouter, useState,
+  Stack, Row, Text, Button, Icon, Card, Show, Each, TextInput, Badge,
+} from '@mindmatrix/react';
+
+const PRIORITY_COLORS: Record<string, string> = {
+  high: 'token:error',
+  medium: 'token:warning',
+  low: 'token:success',
+};
+
+export default function ${pascal}Home() {
+  const { data: items, loading } = useQuery(itemModel);
+  const mutation = useMutation(itemModel);
+  const router = useRouter();
+  const [search, setSearch] = useState('');
+
+  const activeItems = items.filter(i => i.state !== 'archived');
+  const filtered = activeItems.filter(i =>
+    i.fields.title.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleCreate = async () => {
+    await mutation.create({ title: 'New Item', priority: 'medium' });
+  };
+
+  return (
+    <Stack gap={24} padding={24}>
+      {/* Header */}
+      <Row justify="space-between" align="center">
+        <Stack gap={4}>
+          <Text variant="h3" weight="bold" value="${title}" />
+          <Text variant="muted" size="sm" value={\`\${activeItems.length} items\`} />
+        </Stack>
+        <Button variant="primary" onPress={handleCreate}>
+          <Row gap={6} align="center">
+            <Icon name="plus" size={16} />
+            <Text value="Add Item" />
+          </Row>
+        </Button>
+      </Row>
+
+      {/* Search */}
+      <TextInput
+        value={search}
+        onChange={setSearch}
+        placeholder="Search items..."
+      />
+
+      {/* Loading */}
+      <Show when={loading}>
+        <Card padding={32}>
+          <Stack align="center">
+            <Text variant="muted" value="Loading..." />
+          </Stack>
+        </Card>
+      </Show>
+
+      {/* Empty state */}
+      <Show when={!loading && filtered.length === 0}>
+        <Card padding={32}>
+          <Stack align="center" gap={12}>
+            <Icon name="inbox" size={40} color="token:muted" />
+            <Text variant="muted" value="No items yet" />
+            <Button variant="outline" onPress={handleCreate}>
+              <Text value="Create your first item" />
+            </Button>
+          </Stack>
+        </Card>
+      </Show>
+
+      {/* Item list */}
+      <Show when={!loading && filtered.length > 0}>
+        <Stack gap={4}>
+          <Each items={filtered} keyField="id">
+            {(item) => (
+              <Card padding={12}>
+                <Row align="center" gap={12}>
+                  <Stack flex={1} gap={2}>
+                    <Text weight="medium" value={item.fields.title} />
+                    <Show when={!!item.fields.description}>
+                      <Text size="sm" variant="muted" value={item.fields.description} />
+                    </Show>
+                  </Stack>
+                  <Badge value={item.fields.priority} />
+                  <Badge value={item.state} variant={item.state === 'active' ? 'success' : 'default'} />
+                </Row>
+              </Card>
+            )}
+          </Each>
+        </Stack>
+      </Show>
+    </Stack>
+  );
+}
+`;
+}
+async function init(options) {
+  const { name } = options;
+  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
+    console.error(`[mmrc] Error: Blueprint name must be lowercase alphanumeric with hyphens (got "${name}")`);
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const packagesDir = existsSync(join(cwd, "packages")) ? join(cwd, "packages") : cwd;
+  const blueprintDir = join(packagesDir, `blueprint-${name}`);
+  if (existsSync(blueprintDir)) {
+    console.error(`[mmrc] Error: Directory already exists: ${blueprintDir}`);
+    process.exit(1);
+  }
+  console.log(`[mmrc] Creating blueprint: ${name}
+`);
+  mkdirSync(join(blueprintDir, "models"), { recursive: true });
+  mkdirSync(join(blueprintDir, "app"), { recursive: true });
+  const files = [
+    ["package.json", generatePackageJson(name)],
+    ["mm.config.ts", generateMmConfig(name, options)],
+    ["models/item.ts", generateModel(name)],
+    ["app/layout.tsx", generateLayout(name)],
+    ["app/page.tsx", generatePage(name)]
+  ];
+  for (const [relPath, content] of files) {
+    const fullPath = join(blueprintDir, relPath);
+    writeFileSync(fullPath, content, "utf-8");
+    console.log(`  + ${relPath}`);
+  }
+  const title = toTitleCase(name);
+  console.log(`
+[mmrc] Blueprint "${title}" created at:
+  ${blueprintDir}
+
+Next steps:
+  1. cd ${blueprintDir.startsWith(cwd) ? blueprintDir.slice(cwd.length + 1) : blueprintDir}
+  2. mmrc dev                    # Start dev server
+  3. mmrc build                  # Compile to IR
+  4. mmrc deploy --build         # Build + deploy to backend
+`);
+}
+export {
+  init
+};