@mmapp/react-compiler 0.1.0-alpha.1

package/src/babel/extractors/during-extractor.ts

@@ -0,0 +1,295 @@
+/**
+ * During Extractor — extracts useWhileIn calls and converts them to IRDuringAction.
+ *
+ * INPUT:
+ *   useWhileIn('counting', 1000, () => {
+ *     setCount(prev => prev + 1);
+ *   });
+ *
+ * OUTPUT (on state 'counting'.during[]):
+ *   {
+ *     id: "during_1",
+ *     type: "interval",
+ *     interval_ms: 1000,
+ *     actions: [{ id: "auto_N", type: "set_field", mode: "auto", config: { field: "count", value: "count + 1" } }]
+ *   }
+ */
+
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import type { IRDuringAction, IRActionDefinition, IRStateDefinition } from '@mindmatrix/player-core';
+import type { CompilerState } from '../../types';
+
+let duringIdCounter = 0;
+
+/**
+ * Resets the during ID counter. Call between file compilations.
+ */
+export function resetDuringIdCounter(): void {
+  duringIdCounter = 0;
+}
+
+/**
+ * Analyzes a callback body and extracts action definitions.
+ * Reuses the same patterns as effect-extractor but produces standalone actions.
+ */
+function analyzeCallbackBody(
+  body: t.Statement[],
+  actionCounter: { value: number }
+): IRActionDefinition[] {
+  const actions: IRActionDefinition[] = [];
+
+  for (const statement of body) {
+    if (!t.isExpressionStatement(statement)) continue;
+    const expr = statement.expression;
+
+    if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
+      const calleeName = expr.callee.name;
+      const args = expr.arguments;
+
+      if (calleeName === 'setField' && args.length >= 2) {
+        const field = t.isStringLiteral(args[0]) ? args[0].value : undefined;
+        const arg1 = args[1];
+        if (field !== undefined && !t.isArgumentPlaceholder(arg1)) {
+          actions.push({
+            id: `auto_${++actionCounter.value}`,
+            type: 'set_field',
+            mode: 'auto',
+            config: { field, value: extractValue(arg1) },
+          });
+        }
+      } else if (calleeName === 'setMemory' && args.length >= 2) {
+        const key = t.isStringLiteral(args[0]) ? args[0].value : undefined;
+        const arg1 = args[1];
+        if (key !== undefined && !t.isArgumentPlaceholder(arg1)) {
+          actions.push({
+            id: `auto_${++actionCounter.value}`,
+            type: 'set_memory',
+            mode: 'auto',
+            config: { key, value: extractValue(arg1) },
+          });
+        }
+      } else if (calleeName.startsWith('set') && calleeName.length > 3 && args.length >= 1) {
+        const fieldName = calleeName.slice(3, 4).toLowerCase() + calleeName.slice(4);
+        const arg0 = args[0];
+        if (!t.isArgumentPlaceholder(arg0)) {
+          actions.push({
+            id: `auto_${++actionCounter.value}`,
+            type: 'set_field',
+            mode: 'auto',
+            config: { field: fieldName, value: extractValue(arg0) },
+          });
+        }
+      }
+    } else if (t.isCallExpression(expr)) {
+      const callee = expr.callee;
+      if (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.object) &&
+        callee.object.name === 'console' &&
+        t.isIdentifier(callee.property) &&
+        callee.property.name === 'log' &&
+        expr.arguments.length > 0
+      ) {
+        const arg0 = expr.arguments[0];
+        if (!t.isArgumentPlaceholder(arg0)) {
+          actions.push({
+            id: `auto_${++actionCounter.value}`,
+            type: 'log_event',
+            mode: 'auto',
+            config: { message: extractValue(arg0) },
+          });
+        }
+      } else {
+        actions.push({
+          id: `auto_${++actionCounter.value}`,
+          type: 'custom',
+          mode: 'auto',
+          config: { expression: generateCode(expr) },
+        });
+      }
+    }
+  }
+
+  return actions;
+}
+
+function extractValue(node: t.Expression | t.SpreadElement): unknown {
+  if (t.isNumericLiteral(node)) return node.value;
+  if (t.isStringLiteral(node)) return node.value;
+  if (t.isBooleanLiteral(node)) return node.value;
+  if (t.isNullLiteral(node)) return null;
+  if (t.isArrayExpression(node)) {
+    return node.elements.map((el) => (el && t.isExpression(el) ? extractValue(el) : null));
+  }
+  if (t.isObjectExpression(node)) {
+    const obj: Record<string, unknown> = {};
+    node.properties.forEach((prop) => {
+      if (t.isObjectProperty(prop) && t.isIdentifier(prop.key) && t.isExpression(prop.value)) {
+        obj[prop.key.name] = extractValue(prop.value);
+      }
+    });
+    return obj;
+  }
+  return generateCode(node);
+}
+
+function generateCode(node: t.Node): string {
+  if (t.isIdentifier(node)) return node.name;
+  if (t.isNumericLiteral(node)) return String(node.value);
+  if (t.isStringLiteral(node)) return `"${node.value}"`;
+  if (t.isBooleanLiteral(node)) return String(node.value);
+  if (t.isNullLiteral(node)) return 'null';
+  if (t.isBinaryExpression(node)) {
+    return `(${generateCode(node.left)} ${node.operator} ${generateCode(node.right)})`;
+  }
+  if (t.isLogicalExpression(node)) {
+    return `(${generateCode(node.left)} ${node.operator} ${generateCode(node.right)})`;
+  }
+  if (t.isConditionalExpression(node)) {
+    return `(${generateCode(node.test)} ? ${generateCode(node.consequent)} : ${generateCode(node.alternate)})`;
+  }
+  if (t.isUnaryExpression(node) && node.prefix) {
+    return `${node.operator}${generateCode(node.argument)}`;
+  }
+  if (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    t.isIdentifier(node.callee.object) &&
+    node.callee.object.name === 'Date' &&
+    t.isIdentifier(node.callee.property) &&
+    node.callee.property.name === 'now'
+  ) {
+    return 'now()';
+  }
+  if (t.isMemberExpression(node)) {
+    const obj = generateCode(node.object);
+    if (node.computed) {
+      return `${obj}[${generateCode(node.property)}]`;
+    }
+    const prop = t.isIdentifier(node.property) ? node.property.name : '[property]';
+    return `${obj}.${prop}`;
+  }
+  if (t.isCallExpression(node)) {
+    if (t.isIdentifier(node.callee)) {
+      const args = node.arguments.map((a) => generateCode(a)).join(', ');
+      return `${node.callee.name}(${args})`;
+    }
+    if (t.isMemberExpression(node.callee)) {
+      const obj = generateCode(node.callee.object);
+      const prop = t.isIdentifier(node.callee.property) ? node.callee.property.name : '[method]';
+      const args = node.arguments.map((a) => generateCode(a)).join(', ');
+      return `${obj}.${prop}(${args})`;
+    }
+  }
+  if (t.isArrowFunctionExpression(node) || t.isFunctionExpression(node)) {
+    if (t.isArrowFunctionExpression(node) && t.isExpression(node.body)) {
+      const params = node.params;
+      if (params.length === 1 && t.isIdentifier(params[0])) {
+        const paramName = params[0].name;
+        const bodyCode = generateCode(node.body);
+        return bodyCode.replace(new RegExp(`\\b${paramName}\\b`, 'g'), '$prev');
+      }
+    }
+    return '[Function]';
+  }
+  if (t.isTemplateLiteral(node)) {
+    return node.quasis.map((q, i) => {
+      const raw = q.value.raw;
+      if (i < node.expressions.length) return raw + '${' + generateCode(node.expressions[i]) + '}';
+      return raw;
+    }).join('');
+  }
+  if (t.isArrayExpression(node)) {
+    const elements = node.elements.map((el) => el ? generateCode(el) : 'undefined').join(', ');
+    return `[${elements}]`;
+  }
+  if (t.isObjectExpression(node)) {
+    const props = node.properties.map((p) => {
+      if (t.isObjectProperty(p)) {
+        const key = t.isIdentifier(p.key) ? p.key.name : t.isStringLiteral(p.key) ? `"${p.key.value}"` : '[key]';
+        if (p.shorthand && t.isIdentifier(p.value)) return key;
+        return `${key}: ${generateCode(p.value)}`;
+      }
+      if (t.isSpreadElement(p)) return `...${generateCode(p.argument)}`;
+      return '';
+    }).filter(Boolean).join(', ');
+    return `{ ${props} }`;
+  }
+  if (t.isTSAsExpression(node)) return generateCode(node.expression);
+  if (t.isTSNonNullExpression(node)) return generateCode(node.expression);
+  return '[Expression]';
+}
+
+/**
+ * Ensures a state exists in the state map.
+ */
+function ensureState(
+  states: Map<string, IRStateDefinition>,
+  stateName: string
+): IRStateDefinition {
+  if (!states.has(stateName)) {
+    states.set(stateName, {
+      name: stateName,
+      type: 'REGULAR',
+      on_enter: [],
+      during: [],
+      on_exit: [],
+    });
+  }
+  return states.get(stateName)!;
+}
+
+/**
+ * Main extractor function called from the visitor.
+ *
+ * Handles: useWhileIn(stateName, intervalMs, callback)
+ */
+export function extractDuring(path: NodePath<t.CallExpression>, state: any): void {
+  const callee = path.node.callee;
+  if (!t.isIdentifier(callee) || callee.name !== 'useWhileIn') return;
+
+  const args = path.node.arguments;
+  if (args.length < 3) return;
+
+  const stateArg = args[0];
+  const intervalArg = args[1];
+  const callbackArg = args[2];
+
+  if (!t.isStringLiteral(stateArg)) return;
+  const stateName = stateArg.value;
+
+  // Extract interval — can be a numeric literal
+  let intervalMs = 1000; // default fallback
+  if (t.isNumericLiteral(intervalArg)) {
+    intervalMs = intervalArg.value;
+  }
+
+  // Extract callback body
+  let callbackBody: t.Statement[] = [];
+  if (t.isArrowFunctionExpression(callbackArg) || t.isFunctionExpression(callbackArg)) {
+    const body = callbackArg.body;
+    if (t.isBlockStatement(body)) {
+      callbackBody = body.body;
+    } else if (t.isExpression(body)) {
+      callbackBody = [t.expressionStatement(body)];
+    }
+  }
+
+  const compilerState = state as CompilerState;
+  if (!compilerState.states) compilerState.states = new Map();
+  if (!compilerState.actionCounter) compilerState.actionCounter = 0;
+
+  const stateDefinition = ensureState(compilerState.states, stateName);
+  const actions = analyzeCallbackBody(callbackBody, { value: compilerState.actionCounter });
+  compilerState.actionCounter += actions.length;
+
+  const duringAction: IRDuringAction = {
+    id: `during_${++duringIdCounter}`,
+    type: 'interval',
+    interval_ms: intervalMs,
+    actions,
+  };
+
+  stateDefinition.during.push(duringAction);
+}

package/src/babel/extractors/effect-extractor.ts

@@ -0,0 +1,340 @@
+/**
+ * Effect Extractor — extracts useOnEnter, useOnExit calls and converts callback bodies to IRActionDefinition.
+ *
+ * INPUT:
+ *   useOnEnter('active', () => {
+ *     setCount(1);
+ *     setMemory('entered', true);
+ *   });
+ *
+ *   useOnExit('active', () => {
+ *     console.log('left active');
+ *   });
+ *
+ * OUTPUT for state 'active':
+ *   {
+ *     on_enter: [
+ *       { id: "auto_1", type: "set_field", mode: "auto", config: { field: "count", value: 1 } },
+ *       { id: "auto_2", type: "set_memory", mode: "auto", config: { key: "entered", value: true } }
+ *     ],
+ *     on_exit: [
+ *       { id: "auto_3", type: "log_event", mode: "auto", config: { message: "left active" } }
+ *     ]
+ *   }
+ */
+
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import type { IRActionDefinition, IRStateDefinition, IRStateType } from '@mindmatrix/player-core';
+import type { CompilerState } from '../../types';
+
+/**
+ * Analyzes a callback body and extracts action definitions.
+ */
+function analyzeCallbackBody(
+  body: t.Statement[],
+  actionCounter: { value: number }
+): IRActionDefinition[] {
+  const actions: IRActionDefinition[] = [];
+
+  for (const statement of body) {
+    if (t.isExpressionStatement(statement)) {
+      const expr = statement.expression;
+
+      // setField(field, value) or setCount(value)
+      if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
+        const calleeName = expr.callee.name;
+        const args = expr.arguments;
+
+        // setField(field, value)
+        if (calleeName === 'setField' && args.length >= 2) {
+          const field = t.isStringLiteral(args[0]) ? args[0].value : undefined;
+          const arg1 = args[1];
+          if (field !== undefined && !t.isArgumentPlaceholder(arg1)) {
+            const value = extractValue(arg1);
+            actions.push({
+              id: `auto_${++actionCounter.value}`,
+              type: 'set_field',
+              mode: 'auto',
+              config: { field, value },
+            });
+          }
+        }
+        // setMemory(key, value)
+        else if (calleeName === 'setMemory' && args.length >= 2) {
+          const key = t.isStringLiteral(args[0]) ? args[0].value : undefined;
+          const arg1 = args[1];
+          if (key !== undefined && !t.isArgumentPlaceholder(arg1)) {
+            const value = extractValue(arg1);
+            actions.push({
+              id: `auto_${++actionCounter.value}`,
+              type: 'set_memory',
+              mode: 'auto',
+              config: { key, value },
+            });
+          }
+        }
+        // setCount(value) — derived setter from useState
+        else if (calleeName.startsWith('set') && args.length >= 1) {
+          // Extract field name: setCount -> count
+          const fieldName = calleeName.slice(3).charAt(0).toLowerCase() + calleeName.slice(4);
+          const arg0 = args[0];
+          if (!t.isArgumentPlaceholder(arg0)) {
+            const value = extractValue(arg0);
+            actions.push({
+              id: `auto_${++actionCounter.value}`,
+              type: 'set_field',
+              mode: 'auto',
+              config: { field: fieldName, value },
+            });
+          }
+        }
+      }
+      // console.log(message)
+      else if (t.isCallExpression(expr)) {
+        const callee = expr.callee;
+        const args = expr.arguments;
+        if (
+          t.isMemberExpression(callee) &&
+          t.isIdentifier(callee.object) &&
+          callee.object.name === 'console' &&
+          t.isIdentifier(callee.property) &&
+          callee.property.name === 'log' &&
+          args.length > 0
+        ) {
+          const arg0 = args[0];
+          if (!t.isArgumentPlaceholder(arg0)) {
+            const message = extractValue(arg0);
+            actions.push({
+              id: `auto_${++actionCounter.value}`,
+              type: 'log_event',
+              mode: 'auto',
+              config: { message },
+            });
+          }
+        }
+        // Unknown call → custom action (infer mode only)
+        else {
+          actions.push({
+            id: `auto_${++actionCounter.value}`,
+            type: 'custom',
+            mode: 'auto',
+            config: { expression: generateCode(expr) },
+          });
+        }
+      }
+    }
+  }
+
+  return actions;
+}
+
+/**
+ * Extracts a value from an expression node.
+ */
+function extractValue(node: t.Expression | t.SpreadElement): unknown {
+  if (t.isNumericLiteral(node)) return node.value;
+  if (t.isStringLiteral(node)) return node.value;
+  if (t.isBooleanLiteral(node)) return node.value;
+  if (t.isNullLiteral(node)) return null;
+  if (t.isArrayExpression(node)) {
+    return node.elements.map((el) => (el && t.isExpression(el) ? extractValue(el) : null));
+  }
+  if (t.isObjectExpression(node)) {
+    const obj: Record<string, unknown> = {};
+    node.properties.forEach((prop) => {
+      if (t.isObjectProperty(prop) && t.isIdentifier(prop.key) && t.isExpression(prop.value)) {
+        obj[prop.key.name] = extractValue(prop.value);
+      }
+    });
+    return obj;
+  }
+  // For complex expressions, return a placeholder or the raw code
+  return generateCode(node);
+}
+
+/**
+ * Generates JavaScript code from an AST node (simplified).
+ * Recognizes common patterns like Date.now(), new Date().toISOString(), etc.
+ */
+function generateCode(node: t.Node): string {
+  if (t.isIdentifier(node)) return node.name;
+  if (t.isNumericLiteral(node)) return String(node.value);
+  if (t.isStringLiteral(node)) return `"${node.value}"`;
+  if (t.isBooleanLiteral(node)) return String(node.value);
+  if (t.isNullLiteral(node)) return 'null';
+
+  // Date.now() → "now()" (workflow expression)
+  if (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    t.isIdentifier(node.callee.object) &&
+    node.callee.object.name === 'Date' &&
+    t.isIdentifier(node.callee.property) &&
+    node.callee.property.name === 'now'
+  ) {
+    return 'now()';
+  }
+
+  // new Date().toISOString() → "now()" (workflow expression)
+  if (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    t.isNewExpression(node.callee.object) &&
+    t.isIdentifier(node.callee.object.callee) &&
+    node.callee.object.callee.name === 'Date' &&
+    t.isIdentifier(node.callee.property) &&
+    node.callee.property.name === 'toISOString'
+  ) {
+    return 'now()';
+  }
+
+  // Binary/logical expressions
+  if (t.isBinaryExpression(node)) {
+    return `(${generateCode(node.left)} ${node.operator} ${generateCode(node.right)})`;
+  }
+  if (t.isLogicalExpression(node)) {
+    return `(${generateCode(node.left)} ${node.operator} ${generateCode(node.right)})`;
+  }
+  if (t.isConditionalExpression(node)) {
+    return `(${generateCode(node.test)} ? ${generateCode(node.consequent)} : ${generateCode(node.alternate)})`;
+  }
+  if (t.isUnaryExpression(node) && node.prefix) {
+    return `${node.operator}${generateCode(node.argument)}`;
+  }
+
+  // Template literal
+  if (t.isTemplateLiteral(node)) {
+    return node.quasis.map((q, i) => {
+      const raw = q.value.raw;
+      if (i < node.expressions.length) return raw + '${' + generateCode(node.expressions[i]) + '}';
+      return raw;
+    }).join('');
+  }
+
+  // Member expression: a.b, a[0]
+  if (t.isMemberExpression(node)) {
+    const obj = generateCode(node.object);
+    if (node.computed) {
+      return `${obj}[${generateCode(node.property)}]`;
+    }
+    const prop = t.isIdentifier(node.property) ? node.property.name : '[property]';
+    return `${obj}.${prop}`;
+  }
+
+  // Call expressions
+  if (t.isCallExpression(node)) {
+    if (t.isIdentifier(node.callee)) {
+      const args = node.arguments.map((a) => generateCode(a)).join(', ');
+      return `${node.callee.name}(${args})`;
+    }
+    if (t.isMemberExpression(node.callee)) {
+      const obj = generateCode(node.callee.object);
+      const prop = t.isIdentifier(node.callee.property) ? node.callee.property.name : '[method]';
+      const args = node.arguments.map((a) => generateCode(a)).join(', ');
+      return `${obj}.${prop}(${args})`;
+    }
+  }
+
+  // Arrow functions
+  if (t.isArrowFunctionExpression(node)) {
+    if (t.isExpression(node.body)) {
+      const params = node.params;
+      if (params.length === 1 && t.isIdentifier(params[0])) {
+        const paramName = params[0].name;
+        const bodyCode = generateCode(node.body);
+        return bodyCode.replace(new RegExp(`\\b${paramName}\\b`, 'g'), '$prev');
+      }
+    }
+    return '[Function]';
+  }
+  if (t.isFunctionExpression(node)) return '[Function]';
+
+  // Array/Object literals
+  if (t.isArrayExpression(node)) {
+    const elements = node.elements.map((el) => el ? generateCode(el) : 'undefined').join(', ');
+    return `[${elements}]`;
+  }
+  if (t.isObjectExpression(node)) {
+    const props = node.properties.map((p) => {
+      if (t.isObjectProperty(p)) {
+        const key = t.isIdentifier(p.key) ? p.key.name : t.isStringLiteral(p.key) ? `"${p.key.value}"` : '[key]';
+        if (p.shorthand && t.isIdentifier(p.value)) return key;
+        return `${key}: ${generateCode(p.value)}`;
+      }
+      if (t.isSpreadElement(p)) return `...${generateCode(p.argument)}`;
+      return '';
+    }).filter(Boolean).join(', ');
+    return `{ ${props} }`;
+  }
+
+  // TS type helpers
+  if (t.isTSAsExpression(node)) return generateCode(node.expression);
+  if (t.isTSNonNullExpression(node)) return generateCode(node.expression);
+
+  return '[Expression]';
+}
+
+/**
+ * Ensures a state exists in the state map.
+ */
+function ensureState(
+  states: Map<string, IRStateDefinition>,
+  stateName: string
+): IRStateDefinition {
+  if (!states.has(stateName)) {
+    states.set(stateName, {
+      name: stateName,
+      type: 'REGULAR' as IRStateType,
+      on_enter: [],
+      during: [],
+      on_exit: [],
+    });
+  }
+  return states.get(stateName)!;
+}
+
+/**
+ * Main extractor function called from the visitor.
+ */
+export function extractEffects(path: NodePath<t.CallExpression>, state: any): void {
+  const callee = path.node.callee;
+  if (!t.isIdentifier(callee)) return;
+
+  const hookName = callee.name;
+  const args = path.node.arguments;
+
+  // useOnEnter(state, callback) or useOnExit(state, callback)
+  if ((hookName === 'useOnEnter' || hookName === 'useOnExit') && args.length >= 2) {
+    const stateArg = args[0];
+    const callbackArg = args[1];
+
+    if (!t.isStringLiteral(stateArg)) return;
+    const stateName = stateArg.value;
+
+    let callbackBody: t.Statement[] = [];
+    if (t.isArrowFunctionExpression(callbackArg) || t.isFunctionExpression(callbackArg)) {
+      const body = callbackArg.body;
+      if (t.isBlockStatement(body)) {
+        callbackBody = body.body;
+      } else if (t.isExpression(body)) {
+        // Single expression arrow function
+        callbackBody = [t.expressionStatement(body)];
+      }
+    }
+
+    const compilerState = state as CompilerState;
+    if (!compilerState.states) compilerState.states = new Map();
+    if (!compilerState.actionCounter) compilerState.actionCounter = 0;
+
+    const stateDefinition = ensureState(compilerState.states, stateName);
+    const actions = analyzeCallbackBody(callbackBody, { value: compilerState.actionCounter });
+    compilerState.actionCounter += actions.length;
+
+    if (hookName === 'useOnEnter') {
+      stateDefinition.on_enter.push(...actions);
+    } else if (hookName === 'useOnExit') {
+      stateDefinition.on_exit.push(...actions);
+    }
+  }
+}