@mmapp/react-compiler 0.1.0-alpha.1

package/examples/uber-app/workflows/payment-processing.workflow.tsx

@@ -0,0 +1,223 @@
+import {
+  useState,
+  useOnEnter,
+  useOnExit,
+  useTransition,
+  useOnEvent,
+  useOnChange,
+} from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { Payment } from '../models/payment.model';
+import { authorizePayment, capturePayment, settlePayment, processRefund, processDriverPayout } from '../actions/payments.server';
+
+/**
+ * @workflow payment-processing
+ * @model Payment
+ * @trigger ride.completed
+ */
+export default function PaymentProcessingWorkflow() {
+  const [payment, setPayment] = useState<Payment>('payment');
+  const [error, setError] = useState<string | null>('processingError');
+  const [retries, setRetries] = useState<number>('retryCount');
+
+  // --- State: pending ---
+  useOnEnter('pending', async (ctx) => {
+    setRetries(0);
+    setError(null);
+    return { initiatedAt: new Date().toISOString() };
+  });
+
+  useTransition('pending', 'authorized', {
+    action: authorizePayment,
+    guard: (ctx) => !!ctx.instance.fields.paymentMethodId,
+  });
+
+  useTransition('pending', 'failed', {
+    guard: (ctx) => !ctx.instance.fields.paymentMethodId,
+  });
+
+  // --- State: authorized ---
+  useOnEnter('authorized', async (ctx) => {
+    ctx.env.emit('payment:authorized', {
+      paymentId: ctx.instance.id,
+      amount: ctx.instance.fields.authorizedAmount,
+    });
+  });
+
+  useTransition('authorized', 'captured', {
+    action: capturePayment,
+    guard: (ctx) => ctx.instance.fields.rideCompleted === true,
+  });
+
+  useTransition('authorized', 'voided', {
+    guard: (ctx) => ctx.instance.fields.rideCancelled === true,
+  });
+
+  // --- State: captured ---
+  useOnEnter('captured', async (ctx) => {
+    ctx.env.emit('payment:captured', {
+      paymentId: ctx.instance.id,
+      finalAmount: ctx.instance.fields.capturedAmount,
+    });
+  });
+
+  useTransition('captured', 'settling', {
+    guard: () => true,
+    action: settlePayment,
+  });
+
+  // --- State: settling ---
+  useOnEnter('settling', async (ctx) => {
+    return {
+      platformFee: ctx.instance.fields.capturedAmount * 0.25,
+      driverEarnings: ctx.instance.fields.capturedAmount * 0.75,
+      taxAmount: ctx.instance.fields.capturedAmount * 0.08875,
+    };
+  });
+
+  useTransition('settling', 'settled', {
+    guard: (ctx) => ctx.instance.fields.settlementConfirmed === true,
+  });
+
+  useTransition('settling', 'settlement_failed', {
+    guard: (ctx) => ctx.instance.fields.settlementError !== undefined,
+  });
+
+  // --- State: settled ---
+  useOnEnter('settled', async (ctx) => {
+    ctx.env.emit('payment:settled', {
+      paymentId: ctx.instance.id,
+      driverEarnings: ctx.instance.fields.driverEarnings,
+    });
+  });
+
+  useTransition('settled', 'refund_pending', {
+    guard: (ctx) => ctx.instance.fields.refundRequested === true,
+  });
+
+  useTransition('settled', 'payout_pending', {
+    guard: (ctx) => ctx.instance.fields.driverPayoutRequested === true,
+  });
+
+  // --- State: refund_pending ---
+  useOnEnter('refund_pending', async (ctx) => {
+    ctx.env.emit('admin:review_needed', { type: 'refund', paymentId: ctx.instance.id });
+  });
+
+  useTransition('refund_pending', 'refunded', {
+    action: processRefund,
+    guard: (ctx) => ctx.instance.fields.refundApproved === true,
+  });
+
+  useTransition('refund_pending', 'settled', {
+    guard: (ctx) => ctx.instance.fields.refundDenied === true,
+  });
+
+  // --- State: refunded ---
+  useOnEnter('refunded', async (ctx) => {
+    ctx.env.emit('payment:refunded', {
+      paymentId: ctx.instance.id,
+      refundAmount: ctx.instance.fields.refundAmount,
+    });
+  });
+
+  // --- State: payout_pending ---
+  useTransition('payout_pending', 'paid_out', {
+    action: processDriverPayout,
+    guard: (ctx) => ctx.instance.fields.driverBalance >= 25,
+  });
+
+  // --- State: paid_out ---
+  useOnEnter('paid_out', async (ctx) => {
+    ctx.env.emit('payout:completed', {
+      driverId: ctx.instance.fields.driverId,
+      amount: ctx.instance.fields.payoutAmount,
+    });
+  });
+
+  // --- State: failed ---
+  useOnEnter('failed', async (ctx) => {
+    setError(ctx.instance.fields.failureReason || 'Payment processing failed');
+    ctx.env.emit('payment:failed', { paymentId: ctx.instance.id });
+  });
+
+  useTransition('failed', 'pending', {
+    guard: (ctx) => (ctx.instance.fields.retryCount || 0) < 3,
+    action: async (ctx) => {
+      setRetries((ctx.instance.fields.retryCount || 0) + 1);
+      return { success: true, data: { retryCount: (ctx.instance.fields.retryCount || 0) + 1 } };
+    },
+  });
+
+  // --- State: settlement_failed ---
+  useTransition('settlement_failed', 'settling', {
+    guard: (ctx) => (ctx.instance.fields.settlementRetries || 0) < 5,
+  });
+
+  // --- State: voided ---
+  useOnEnter('voided', async (ctx) => {
+    ctx.env.emit('payment:voided', { paymentId: ctx.instance.id });
+  });
+
+  // --- Events ---
+  useOnEvent('dispute:opened', async (ctx) => {
+    ctx.env.emit('payment:disputed', { paymentId: ctx.instance.id });
+  });
+
+  useOnChange('payment.status', (newVal) => {
+    if (newVal === 'failed') setError('Payment status changed to failed');
+  });
+
+  return (
+    <Stack gap="md">
+      <Heading level={2}>Payment #{payment.id?.slice(0, 8)}</Heading>
+      <Badge variant={payment.status === 'settled' ? 'success' : payment.status === 'failed' ? 'error' : 'info'}>
+        {payment.status}
+      </Badge>
+
+      <Card>
+        <Row justify="between">
+          <Text>Authorized</Text>
+          <Text weight="bold">${payment.authorizedAmount?.toFixed(2) || '—'}</Text>
+        </Row>
+        <Row justify="between">
+          <Text>Captured</Text>
+          <Text weight="bold">${payment.capturedAmount?.toFixed(2) || '—'}</Text>
+        </Row>
+        <Row justify="between">
+          <Text>Platform Fee (25%)</Text>
+          <Text>${payment.platformFee?.toFixed(2) || '—'}</Text>
+        </Row>
+        <Row justify="between">
+          <Text>Driver Earnings</Text>
+          <Text weight="bold" color="green">${payment.driverEarnings?.toFixed(2) || '—'}</Text>
+        </Row>
+      </Card>
+
+      <Show when={!!error}>
+        <Card variant="error">
+          <Text>{error}</Text>
+          <Show when={retries < 3}>
+            <Button variant="primary">Retry Payment</Button>
+          </Show>
+        </Card>
+      </Show>
+
+      <Show when={payment.status === 'settled'}>
+        <Row gap="sm">
+          <Button variant="outline">Request Refund</Button>
+          <Button variant="primary">Driver Payout</Button>
+        </Row>
+      </Show>
+
+      <Show when={payment.refundAmount > 0}>
+        <Card>
+          <Row justify="between">
+            <Text>Refunded</Text>
+            <Text color="red">${payment.refundAmount?.toFixed(2)}</Text>
+          </Row>
+        </Card>
+      </Show>
+    </Stack>
+  );
+}

package/examples/uber-app/workflows/ride-request.workflow.tsx

@@ -0,0 +1,194 @@
+import {
+  useState,
+  useOnEnter,
+  useOnExit,
+  useTransition,
+  useWhileIn,
+  useOnEvent,
+  useOnChange,
+} from '@mindmatrix/react';
+import { Stack, Row, Text, Button, Show, Each, Card, Badge, Heading } from '@mindmatrix/react';
+import { Ride } from '../models/ride.model';
+import { findBestDriver } from '../actions/matching.server';
+import { calculateEstimatedFare, calculateActualFare, calculateCancellationFee } from '../actions/pricing.server';
+import { authorizePayment, capturePayment } from '../actions/payments.server';
+import { notifyRideMatched, notifyDriverArrived, notifyRideCompleted, notifyCancellation } from '../actions/notifications.server';
+import { MapView } from '../components/MapView';
+import { DriverCard } from '../components/DriverCard';
+import { RatingStars } from '../components/RatingStars';
+
+/**
+ * @workflow ride-request
+ * @model Ride
+ * @trigger rider.request
+ */
+export default function RideRequestWorkflow() {
+  const [ride, setRide] = useState<Ride>('ride');
+  const [driver, setDriver] = useState('assignedDriver');
+  const [fare, setFare] = useState('fareEstimate');
+  const [eta, setEta] = useState<number>('etaMinutes');
+  const [cancelReason, setCancelReason] = useState<string>('cancelReason');
+
+  // --- State: requested ---
+  useOnEnter('requested', async (ctx) => {
+    const estimate = await calculateEstimatedFare(ctx);
+    setFare(estimate.data.totalFare);
+    const auth = await authorizePayment(ctx);
+    return { fareEstimate: estimate.data, authorizationId: auth.data.transactionId };
+  });
+
+  useTransition('requested', 'matched', {
+    action: findBestDriver,
+    guard: (ctx) => ctx.instance.fields.paymentMethod !== undefined,
+  });
+
+  useTransition('requested', 'cancelled', {
+    guard: () => true,
+    action: async (ctx) => {
+      const fee = await calculateCancellationFee(ctx);
+      await notifyCancellation(ctx);
+      return fee;
+    },
+  });
+
+  // --- State: matched ---
+  useOnEnter('matched', async (ctx) => {
+    await notifyRideMatched(ctx);
+    setDriver(ctx.instance.fields.driverId);
+    setEta(ctx.instance.fields.estimatedPickupMinutes);
+  });
+
+  useTransition('matched', 'accepted', {
+    guard: (ctx) => ctx.instance.fields.driverConfirmed === true,
+  });
+
+  useTransition('matched', 'requested', {
+    guard: (ctx) => ctx.instance.fields.driverDeclined === true,
+    action: findBestDriver,
+  });
+
+  // --- State: accepted ---
+  useOnEnter('accepted', async (ctx) => {
+    ctx.env.emit('ride:accepted', { rideId: ctx.instance.id, driverId: ctx.instance.fields.driverId });
+  });
+
+  useTransition('accepted', 'driver_enroute', { guard: () => true });
+
+  // --- State: driver_enroute ---
+  useWhileIn('driver_enroute', {
+    interval: 5000,
+    action: async (ctx) => {
+      const loc = await ctx.env.query('location', {
+        filter: { userId: ctx.instance.fields.driverId },
+        limit: 1,
+        orderBy: 'timestamp',
+        order: 'desc',
+      });
+      if (loc[0]) setEta(loc[0].etaMinutes);
+      return { driverLocation: loc[0] };
+    },
+  });
+
+  useTransition('driver_enroute', 'pickup', {
+    guard: (ctx) => ctx.instance.fields.driverDistanceMeters < 50,
+    action: notifyDriverArrived,
+  });
+
+  // --- State: pickup ---
+  useOnEnter('pickup', async (ctx) => {
+    ctx.env.emit('ride:driver_arrived', { rideId: ctx.instance.id });
+  });
+
+  useTransition('pickup', 'in_progress', {
+    guard: (ctx) => ctx.instance.fields.riderPickedUp === true,
+  });
+
+  useTransition('pickup', 'cancelled', {
+    guard: (ctx) => ctx.instance.fields.waitTimeMinutes > 5,
+    action: calculateCancellationFee,
+  });
+
+  // --- State: in_progress ---
+  useWhileIn('in_progress', {
+    interval: 3000,
+    action: async (ctx) => {
+      const loc = await ctx.env.query('location', {
+        filter: { userId: ctx.instance.fields.driverId },
+        limit: 1,
+        orderBy: 'timestamp',
+        order: 'desc',
+      });
+      return { currentLocation: loc[0], distanceTraveled: ctx.instance.fields.actualDistanceKm };
+    },
+  });
+
+  useTransition('in_progress', 'completed', {
+    guard: (ctx) => ctx.instance.fields.arrivedAtDropoff === true,
+    action: async (ctx) => {
+      const actual = await calculateActualFare(ctx);
+      await capturePayment(ctx);
+      await notifyRideCompleted(ctx);
+      return actual;
+    },
+  });
+
+  // --- State: completed ---
+  useOnEnter('completed', async (ctx) => {
+    ctx.env.emit('ride:completed', { rideId: ctx.instance.id, fare: ctx.instance.fields.actualFare });
+  });
+
+  // --- State: cancelled ---
+  useOnExit('cancelled', async (ctx) => {
+    ctx.env.emit('ride:cancelled', { rideId: ctx.instance.id, reason: cancelReason });
+  });
+
+  // --- Events ---
+  useOnEvent('safety:alert', async (ctx) => {
+    ctx.env.emit('notification:urgent', { rideId: ctx.instance.id, type: 'safety' });
+  });
+
+  useOnChange('ride.surgeMultiplier', (newVal, oldVal) => {
+    if (newVal > oldVal) setFare((prev: number) => prev * (newVal / oldVal));
+  });
+
+  // --- View ---
+  return (
+    <Stack gap="md">
+      <Heading level={2}>Ride #{ride.id?.slice(0, 8)}</Heading>
+      <Badge variant={ride.status === 'in_progress' ? 'success' : 'info'}>{ride.status}</Badge>
+
+      <MapView
+        pickupLocation={ride.pickupLocation}
+        dropoffLocation={ride.dropoffLocation}
+        driverLocation={ride.driverLocation}
+        trackUser={ride.status === 'in_progress'}
+      />
+
+      <Show when={!!driver}>
+        <DriverCard name={driver.name} rating={driver.rating} vehicleMake={driver.vehicleMake}
+          vehicleModel={driver.vehicleModel} vehiclePlate={driver.vehiclePlate} etaMinutes={eta} />
+      </Show>
+
+      <Card>
+        <Row justify="between">
+          <Text weight="bold">Estimated Fare</Text>
+          <Text>${typeof fare === 'number' ? fare.toFixed(2) : fare}</Text>
+        </Row>
+        <Show when={ride.surgeMultiplier > 1}>
+          <Badge variant="warning">{ride.surgeMultiplier}x surge</Badge>
+        </Show>
+      </Card>
+
+      <Show when={ride.status === 'completed'}>
+        <RatingStars rideId={ride.id} targetName={driver.name} targetRole="driver"
+          fare={ride.actualFare} showTip onSubmit={() => {}} />
+      </Show>
+
+      <Show when={['requested', 'matched', 'pickup'].includes(ride.status)}>
+        <Button variant="danger" onPress={() => setCancelReason('rider_cancelled')}>
+          Cancel Ride
+        </Button>
+      </Show>
+    </Stack>
+  );
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@mmapp/react-compiler",
+  "version": "0.1.0-alpha.1",
+  "description": "Babel plugin + Vite integration for compiling React workflows to Pure Form IR",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "mmrc": "./dist/cli/index.js",
+    "mm-codemod": "./dist/codemod/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./babel": {
+      "types": "./dist/babel/index.d.ts",
+      "import": "./dist/babel/index.mjs",
+      "require": "./dist/babel/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.mjs",
+      "require": "./dist/vite/index.js"
+    },
+    "./codemod": {
+      "types": "./dist/codemod/index.d.ts",
+      "import": "./dist/codemod/index.mjs",
+      "require": "./dist/codemod/index.js"
+    },
+    "./dev-server": {
+      "types": "./dist/dev-server.d.ts",
+      "import": "./dist/dev-server.mjs",
+      "require": "./dist/dev-server.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.mjs",
+      "require": "./dist/testing/index.js"
+    },
+    "./envelope": {
+      "types": "./dist/envelope.d.ts",
+      "import": "./dist/envelope.mjs",
+      "require": "./dist/envelope.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "compile:chat": "node compile-chat-defs.mjs",
+    "seed": "node seed-compiled.mjs",
+    "seed:chat": "node seed-blueprint-chat.mjs",
+    "seed:chat:watch": "node seed-blueprint-chat.mjs --watch",
+    "seed:chat:compile": "node seed-blueprint-chat.mjs --compile-only",
+    "seed:chat:seed": "node seed-blueprint-chat.mjs --seed-only",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/generator": "^7.29.1",
+    "@babel/helper-plugin-utils": "^7.24.0",
+    "@babel/parser": "^7.24.0",
+    "@babel/plugin-syntax-typescript": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "glob": "^10.3.10",
+    "@mmapp/player-core": "^0.1.0-alpha.1"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/package.json.backup

@@ -0,0 +1,86 @@
+{
+  "name": "@mindmatrix/react-compiler",
+  "version": "0.1.0",
+  "description": "Babel plugin + Vite integration for compiling React workflows to Pure Form IR",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "mmrc": "./dist/cli/index.js",
+    "mm-codemod": "./dist/codemod/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./babel": {
+      "types": "./dist/babel/index.d.ts",
+      "import": "./dist/babel/index.mjs",
+      "require": "./dist/babel/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.mjs",
+      "require": "./dist/vite/index.js"
+    },
+    "./codemod": {
+      "types": "./dist/codemod/index.d.ts",
+      "import": "./dist/codemod/index.mjs",
+      "require": "./dist/codemod/index.js"
+    },
+    "./dev-server": {
+      "types": "./dist/dev-server.d.ts",
+      "import": "./dist/dev-server.mjs",
+      "require": "./dist/dev-server.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.mjs",
+      "require": "./dist/testing/index.js"
+    },
+    "./envelope": {
+      "types": "./dist/envelope.d.ts",
+      "import": "./dist/envelope.mjs",
+      "require": "./dist/envelope.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "compile:chat": "node compile-chat-defs.mjs",
+    "seed": "node seed-compiled.mjs",
+    "seed:chat": "node seed-blueprint-chat.mjs",
+    "seed:chat:watch": "node seed-blueprint-chat.mjs --watch",
+    "seed:chat:compile": "node seed-blueprint-chat.mjs --compile-only",
+    "seed:chat:seed": "node seed-blueprint-chat.mjs --seed-only",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/generator": "^7.29.1",
+    "@babel/helper-plugin-utils": "^7.24.0",
+    "@babel/parser": "^7.24.0",
+    "@babel/plugin-syntax-typescript": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "@mindmatrix/player-core": "workspace:*",
+    "glob": "^10.3.10"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.20.5",
+    "@types/node": "^20.0.0",
+    "@types/pg": "^8.18.0",
+    "pg": "^8.20.0",
+    "prettier": "^3.8.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.0.0"
+  }
+}