@mmapp/react-compiler 0.1.0-alpha.1

package/src/decompiler/sx-emitter.ts

@@ -0,0 +1,318 @@
+/**
+ * sx-emitter — converts CanonicalStyleIR back to `sx` prop shorthand.
+ *
+ * This is the inverse of the sx-extractor (Appendix D). It collapses
+ * expanded canonical forms back into concise sx shorthands:
+ *   padding: { top: 16, right: 16, bottom: 16, left: 16 } → p: 16
+ *   backgroundColor: { r: 255, g: 0, b: 0, a: 1 }        → bg: 'red'
+ *   borderRadius: { topLeft: 8, ... }                       → rounded: 8
+ *
+ * Handles padding, margin, border-radius, colors, gap, flex, sizing,
+ * opacity, overflow, position, and state overrides (hover, pressed, focus, etc.).
+ */
+
+import * as t from '@babel/types';
+
+// =============================================================================
+// TRBL Helpers
+// =============================================================================
+
+interface TRBL {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+function isTRBL(v: unknown): v is TRBL {
+  if (typeof v !== 'object' || v === null) return false;
+  const obj = v as Record<string, unknown>;
+  return (
+    typeof obj.top === 'number' &&
+    typeof obj.right === 'number' &&
+    typeof obj.bottom === 'number' &&
+    typeof obj.left === 'number'
+  );
+}
+
+interface FourCorners {
+  topLeft: number;
+  topRight: number;
+  bottomRight: number;
+  bottomLeft: number;
+}
+
+function isFourCorners(v: unknown): v is FourCorners {
+  if (typeof v !== 'object' || v === null) return false;
+  const obj = v as Record<string, unknown>;
+  return (
+    typeof obj.topLeft === 'number' &&
+    typeof obj.topRight === 'number' &&
+    typeof obj.bottomRight === 'number' &&
+    typeof obj.bottomLeft === 'number'
+  );
+}
+
+// =============================================================================
+// Color Helpers
+// =============================================================================
+
+interface TokenRef {
+  kind: 'token-ref';
+  name: string;
+}
+
+function isTokenRef(v: unknown): v is TokenRef {
+  if (typeof v !== 'object' || v === null) return false;
+  return (v as Record<string, unknown>).kind === 'token-ref';
+}
+
+// =============================================================================
+// Spacing Shorthand Collapse
+// =============================================================================
+
+/**
+ * Collapses TRBL values into shorthand sx properties.
+ * Returns an array of AST object properties.
+ *
+ * All uniform:        p: 16
+ * Symmetric vertical: py: 8, px: 16
+ * All different:      pt: 8, pr: 16, pb: 12, pl: 24
+ */
+function emitSpacingShorthand(
+  prefix: 'p' | 'm',
+  trbl: TRBL,
+): t.ObjectProperty[] {
+  const { top, right, bottom, left } = trbl;
+
+  if (top === right && right === bottom && bottom === left) {
+    // All uniform → single shorthand
+    return [prop(prefix, top)];
+  }
+
+  if (top === bottom && left === right) {
+    // Symmetric → y/x shorthands
+    return [
+      prop(`${prefix}y`, top),
+      prop(`${prefix}x`, left),
+    ];
+  }
+
+  // All different → individual sides
+  return [
+    prop(`${prefix}t`, top),
+    prop(`${prefix}r`, right),
+    prop(`${prefix}b`, bottom),
+    prop(`${prefix}l`, left),
+  ];
+}
+
+// =============================================================================
+// Radius Shorthand Collapse
+// =============================================================================
+
+function emitRadiusShorthand(corners: FourCorners): t.ObjectProperty[] {
+  const { topLeft, topRight, bottomRight, bottomLeft } = corners;
+
+  if (topLeft === topRight && topRight === bottomRight && bottomRight === bottomLeft) {
+    return [prop('rounded', topLeft)];
+  }
+
+  return [
+    prop('roundedTL', topLeft),
+    prop('roundedTR', topRight),
+    prop('roundedBR', bottomRight),
+    prop('roundedBL', bottomLeft),
+  ];
+}
+
+// =============================================================================
+// Color Emission
+// =============================================================================
+
+function emitColorValue(color: unknown): t.Expression {
+  if (isTokenRef(color)) {
+    return t.stringLiteral(`token:${color.name}`);
+  }
+
+  if (typeof color === 'string') {
+    return t.stringLiteral(color);
+  }
+
+  // RGBA object → css string
+  if (typeof color === 'object' && color !== null) {
+    const c = color as Record<string, unknown>;
+    if (typeof c.r === 'number' && typeof c.g === 'number' && typeof c.b === 'number') {
+      const a = typeof c.a === 'number' ? c.a : 1;
+      if (a === 1) {
+        const hex = `#${hexByte(c.r as number)}${hexByte(c.g as number)}${hexByte(c.b as number)}`;
+        return t.stringLiteral(hex);
+      }
+      return t.stringLiteral(`rgba(${c.r}, ${c.g}, ${c.b}, ${a})`);
+    }
+  }
+
+  return t.stringLiteral('inherit');
+}
+
+function hexByte(n: number): string {
+  return Math.round(n).toString(16).padStart(2, '0');
+}
+
+// =============================================================================
+// AST Helpers
+// =============================================================================
+
+function prop(key: string, value: unknown): t.ObjectProperty {
+  return t.objectProperty(t.identifier(key), valueToExpression(value));
+}
+
+/**
+ * Converts a plain JS value to a Babel AST expression node.
+ */
+export function valueToExpression(value: unknown): t.Expression {
+  if (typeof value === 'string') return t.stringLiteral(value);
+  if (typeof value === 'number') return t.numericLiteral(value);
+  if (typeof value === 'boolean') return t.booleanLiteral(value);
+  if (value === null) return t.nullLiteral();
+  if (value === undefined) return t.identifier('undefined');
+
+  if (Array.isArray(value)) {
+    return t.arrayExpression(value.map(v => valueToExpression(v)));
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>);
+    return t.objectExpression(
+      entries.map(([k, v]) =>
+        t.objectProperty(t.identifier(k), valueToExpression(v))
+      )
+    );
+  }
+
+  return t.identifier('undefined');
+}
+
+// =============================================================================
+// State Override Keys
+// =============================================================================
+
+const STATE_TO_SX_KEY: Record<string, string> = {
+  hovered: 'hover',
+  pressed: 'pressed',
+  focused: 'focus',
+  selected: 'selected',
+  disabled: 'disabled',
+};
+
+// =============================================================================
+// Main: emitSxProp
+// =============================================================================
+
+/**
+ * Converts a CanonicalStyleIR (stored as Record<string, unknown> on IRExperienceNode)
+ * into a JSX `sx` attribute with collapsed shorthand properties.
+ *
+ * Returns null if the style is empty or undefined.
+ */
+export function emitSxProp(style: Record<string, unknown>): t.JSXAttribute | null {
+  if (!style || typeof style !== 'object') return null;
+
+  const props: t.ObjectProperty[] = [];
+
+  // Padding shorthand
+  if (style.padding && isTRBL(style.padding)) {
+    props.push(...emitSpacingShorthand('p', style.padding));
+  }
+
+  // Margin shorthand
+  if (style.margin && isTRBL(style.margin)) {
+    props.push(...emitSpacingShorthand('m', style.margin));
+  }
+
+  // Background color → bg
+  if (style.backgroundColor) {
+    props.push(t.objectProperty(
+      t.identifier('bg'),
+      emitColorValue(style.backgroundColor)
+    ));
+  }
+
+  // Border radius → rounded
+  if (style.borderRadius && isFourCorners(style.borderRadius)) {
+    props.push(...emitRadiusShorthand(style.borderRadius));
+  }
+
+  // Gap
+  if (typeof style.gap === 'number') {
+    props.push(prop('gap', style.gap));
+  }
+
+  // Flex direction
+  if (typeof style.flexDirection === 'string') {
+    props.push(prop('direction', style.flexDirection));
+  }
+
+  // Justify / align
+  if (typeof style.justifyContent === 'string') {
+    props.push(prop('justify', style.justifyContent));
+  }
+  if (typeof style.alignItems === 'string') {
+    props.push(prop('align', style.alignItems));
+  }
+
+  // Sizing
+  if (style.width !== undefined) props.push(prop('w', style.width));
+  if (style.height !== undefined) props.push(prop('h', style.height));
+  if (style.minWidth !== undefined) props.push(prop('minW', style.minWidth));
+  if (style.minHeight !== undefined) props.push(prop('minH', style.minHeight));
+  if (style.maxWidth !== undefined) props.push(prop('maxW', style.maxWidth));
+  if (style.maxHeight !== undefined) props.push(prop('maxH', style.maxHeight));
+
+  // Opacity
+  if (typeof style.opacity === 'number') {
+    props.push(prop('opacity', style.opacity));
+  }
+
+  // Color
+  if (style.color) {
+    props.push(t.objectProperty(
+      t.identifier('color'),
+      emitColorValue(style.color)
+    ));
+  }
+
+  // Overflow
+  if (typeof style.overflow === 'string') {
+    props.push(prop('overflow', style.overflow));
+  }
+
+  // Position
+  if (typeof style.position === 'string') {
+    props.push(prop('position', style.position));
+  }
+
+  // State overrides → hover, pressed, focus, etc.
+  if (typeof style.states === 'object' && style.states !== null) {
+    for (const [state, override] of Object.entries(style.states as Record<string, unknown>)) {
+      const sxKey = STATE_TO_SX_KEY[state] || state;
+      if (typeof override === 'object' && override !== null) {
+        // Recursively emit the override as an sx sub-object
+        const subProp = emitSxProp(override as Record<string, unknown>);
+        if (subProp && t.isJSXExpressionContainer(subProp.value) && t.isObjectExpression(subProp.value.expression)) {
+          props.push(t.objectProperty(
+            t.identifier(sxKey),
+            subProp.value.expression
+          ));
+        }
+      }
+    }
+  }
+
+  if (props.length === 0) return null;
+
+  return t.jsxAttribute(
+    t.jsxIdentifier('sx'),
+    t.jsxExpressionContainer(t.objectExpression(props))
+  );
+}

package/src/decompiler/workspace-hydrator.ts

@@ -0,0 +1,189 @@
+/**
+ * workspace-hydrator.ts — writes decompiled files to disk.
+ *
+ * hydrateWorkspace(path, definition) decompiles a workflow definition
+ * into files and writes them to the given directory. It preserves
+ * user-modified files by comparing content hashes before overwriting.
+ */
+
+import { createHash } from 'crypto';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { dirname, join } from 'path';
+import type { DecompilerInput } from './index';
+import { decompileProjectEnhanced } from './project-decompiler';
+import type { EnhancedDecompileResult } from './project-decompiler';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Map of relative path to generated content. */
+export type FileMap = Map<string, string>;
+
+/** Result of a workspace hydration. */
+export interface HydrationResult {
+  /** Files that were written (created or updated). */
+  written: string[];
+  /** Files that were skipped (user-modified). */
+  skipped: string[];
+  /** Files that were unchanged. */
+  unchanged: string[];
+  /** The decompile result used. */
+  decompileResult: EnhancedDecompileResult;
+}
+
+/** Hash manifest for tracking generated files. */
+interface HashManifest {
+  /** Map of relative path to content hash at generation time. */
+  files: Record<string, string>;
+  /** Timestamp of last hydration. */
+  lastHydrated: string;
+  /** Slug of the source definition. */
+  slug: string;
+}
+
+const MANIFEST_FILE = '.mm-manifest.json';
+
+// =============================================================================
+// Hash Utilities
+// =============================================================================
+
+function sha256(content: string): string {
+  return createHash('sha256').update(content, 'utf8').digest('hex');
+}
+
+function loadManifest(workspacePath: string): HashManifest | null {
+  const manifestPath = join(workspacePath, MANIFEST_FILE);
+  if (!existsSync(manifestPath)) return null;
+  try {
+    const raw = readFileSync(manifestPath, 'utf-8');
+    return JSON.parse(raw) as HashManifest;
+  } catch {
+    return null;
+  }
+}
+
+function saveManifest(workspacePath: string, manifest: HashManifest): void {
+  const manifestPath = join(workspacePath, MANIFEST_FILE);
+  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8');
+}
+
+// =============================================================================
+// File Writing
+// =============================================================================
+
+/**
+ * Determines whether a file has been modified by the user since last hydration.
+ *
+ * Returns true if the file exists and its current content hash differs from
+ * the hash stored in the manifest (meaning the user changed it).
+ */
+function isUserModified(
+  filePath: string,
+  manifest: HashManifest | null,
+  relativePath: string,
+): boolean {
+  if (!existsSync(filePath)) return false;
+  if (!manifest) return true; // No manifest = first run, treat existing files as user-modified
+
+  const storedHash = manifest.files[relativePath];
+  if (!storedHash) return true; // File not in manifest = user created it
+
+  const currentContent = readFileSync(filePath, 'utf-8');
+  const currentHash = sha256(currentContent);
+
+  // If current hash matches stored hash, the file hasn't been touched by the user
+  return currentHash !== storedHash;
+}
+
+function ensureDir(filePath: string): void {
+  const dir = dirname(filePath);
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+
+// =============================================================================
+// Main: hydrateWorkspace
+// =============================================================================
+
+/**
+ * Decompiles a workflow definition and writes the resulting files to disk.
+ *
+ * Preserves user-modified files by checking content hashes against the
+ * stored manifest from the previous hydration.
+ *
+ * @param workspacePath - Absolute path to the target directory.
+ * @param definition - The workflow definition to decompile.
+ * @returns A HydrationResult describing what was written, skipped, or unchanged.
+ */
+export function hydrateWorkspace(
+  workspacePath: string,
+  definition: DecompilerInput,
+): HydrationResult {
+  // Decompile
+  const decompileResult = decompileProjectEnhanced(definition);
+
+  // Load existing manifest
+  const oldManifest = loadManifest(workspacePath);
+
+  // Track results
+  const written: string[] = [];
+  const skipped: string[] = [];
+  const unchanged: string[] = [];
+  const newManifest: HashManifest = {
+    files: {},
+    lastHydrated: new Date().toISOString(),
+    slug: definition.slug,
+  };
+
+  // Write each file
+  for (const file of decompileResult.files) {
+    const fullPath = join(workspacePath, file.path);
+    const contentHash = sha256(file.content);
+    newManifest.files[file.path] = contentHash;
+
+    // Check if file exists and was user-modified
+    if (isUserModified(fullPath, oldManifest, file.path)) {
+      skipped.push(file.path);
+      // Keep the old hash in manifest so we don't overwrite next time either
+      if (oldManifest?.files[file.path]) {
+        newManifest.files[file.path] = oldManifest.files[file.path];
+      }
+      continue;
+    }
+
+    // Check if content is unchanged
+    if (existsSync(fullPath)) {
+      const existing = readFileSync(fullPath, 'utf-8');
+      if (sha256(existing) === contentHash) {
+        unchanged.push(file.path);
+        continue;
+      }
+    }
+
+    // Write the file
+    ensureDir(fullPath);
+    writeFileSync(fullPath, file.content, 'utf-8');
+    written.push(file.path);
+  }
+
+  // Save updated manifest
+  ensureDir(join(workspacePath, MANIFEST_FILE));
+  saveManifest(workspacePath, newManifest);
+
+  return { written, skipped, unchanged, decompileResult };
+}
+
+/**
+ * Returns a FileMap of all decompiled files without writing to disk.
+ * Useful for previewing output or testing.
+ */
+export function decompileToFileMap(definition: DecompilerInput): FileMap {
+  const result = decompileProjectEnhanced(definition);
+  const map: FileMap = new Map();
+  for (const file of result.files) {
+    map.set(file.path, file.content);
+  }
+  return map;
+}