toPromise(actorRef)

docs/about/goals.md

@@ -32,5 +32,4 @@ If you're deciding if you should use XState, [John Yanarella](https://github.com
 > The front-end development world is the wild west, and it could stand to learn from what other engineering disciplines have known and employed for years.
 >
 > 3. It has **passed a critical threshold of maturity** as of version 4, particularly given the introduction of [the visualizer](https://statecharts.github.io/xstate-viz). And that's just the tip of the iceberg of where it could go next, as it (and [its community](https://github.com/statelyai/xstate/discussions)) introduces tooling that takes advantage of how a statechart can be visualized, analyzed, and tested.
->
 > 4. The **community** that is growing around it and the awareness it is bringing to finite state machines and statecharts. If you read back through this gitter history, there's a wealth of links to research papers, other FSM and Statechart implementations, etc. that have been collected by [Erik Mogensen](https://twitter.com/mogsie) over at [statecharts.github.io](https://statecharts.github.io).

docs/recipes/svelte.md

@@ -59,19 +59,21 @@ export const toggleMachine = createMachine({
 
 ```html
 <script>
-    import {interpret} from 'xstate';
-    import {toggleMachine} from './machine';
+  import { interpret } from 'xstate';
+  import { toggleMachine } from './machine';
 
-    let current;
+  let current;
 
-    const toggleService = interpret(toggleMachine)
-        .onTransition((state) => {
-            current = state;
-        }).start()
+  const toggleService = interpret(toggleMachine)
+    .onTransition((state) => {
+      current = state;
+    })
+    .start();
 </script>
 
-<button on:click={() => toggleService.send({ type: 'TOGGLE' })}>
-    {current.matches('inactive') ? 'Off' : 'On'}
+<button on:click="{()" ="">
+  toggleService.send({ type: 'TOGGLE' })}> {current.matches('inactive') ? 'Off'
+  : 'On'}
 </button>
 ```
 
@@ -81,14 +83,15 @@ The toggleService has a `.subscribe` function that is similar to Svelte stores,
 
 ```html
 <script>
-    import {interpret} from 'xstate';
-    import {toggleMachine} from './machine';
+  import { interpret } from 'xstate';
+  import { toggleMachine } from './machine';
 
-    const toggleService = interpret(toggleMachine).start();
+  const toggleService = interpret(toggleMachine).start();
 </script>
 
-<button on:click={() => toggleService.send({ type: 'TOGGLE' })}>
-    {$toggleService.matches('inactive') ? 'Off' : 'On'}
+<button on:click="{()" ="">
+  toggleService.send({ type: 'TOGGLE' })}> {$toggleService.matches('inactive') ?
+  'Off' : 'On'}
 </button>
 ```
 

packages/core/src/index.ts

@@ -32,7 +32,7 @@ export type {
   InspectedSnapshotEvent,
   InspectionEvent
 } from './system.ts';
-
+export { toPromise } from './toPromise.ts';
 export { and, not, or, stateIn } from './guards.ts';
 export { setup } from './setup.ts';
 

packages/core/src/interpreter.ts

@@ -22,6 +22,7 @@ import type {
   EventFromLogic,
   SnapshotFrom,
   AnyActorRef,
+  OutputFrom,
   DoneActorEvent,
   Snapshot
 } from './types.ts';

packages/core/src/toPromise.ts

@@ -0,0 +1,21 @@
+import { Actor, ActorRef, AnyActor, AnyActorRef, OutputFrom } from '.';
+
+export function toPromise<T extends AnyActorRef>(
+  actor: T
+): Promise<T extends Actor<infer TLogic> ? OutputFrom<TLogic> : unknown> {
+  return new Promise((resolve, reject) => {
+    actor.subscribe({
+      complete: () => {
+        resolve(
+          actor.getSnapshot().output
+          // actor.getOutput()! as T extends Actor<infer TLogic>
+          //   ? OutputFrom<TLogic>
+          //   : unknown
+        );
+      },
+      error: (err) => {
+        reject(err);
+      }
+    });
+  });
+}

packages/core/test/toPromise.test.ts

@@ -0,0 +1,76 @@
+import {
+  ActorRef,
+  createActor,
+  createMachine,
+  fromPromise,
+  toPromise
+} from '../src';
+
+describe('toPromise', () => {
+  it('should be awaitable', async () => {
+    const promiseActor = createActor(
+      fromPromise(() => Promise.resolve(42))
+    ).start();
+
+    const result = await toPromise(promiseActor);
+
+    ((_accept: number) => {})(result);
+
+    expect(result).toEqual(42);
+  });
+
+  it('should await actors', async () => {
+    const machine = createMachine({
+      types: {} as {
+        output: { count: 42 };
+      },
+      initial: 'pending',
+      states: {
+        pending: {
+          on: {
+            RESOLVE: 'done'
+          }
+        },
+        done: {
+          type: 'final'
+        }
+      },
+      output: { count: 42 }
+    });
+
+    const actor = createActor(machine).start();
+
+    setTimeout(() => {
+      actor.send({ type: 'RESOLVE' });
+    }, 1);
+
+    const data = await toPromise(actor);
+
+    ((_accept: { count: number }) => {})(data);
+
+    expect(data).toEqual({ count: 42 });
+  });
+
+  it('should await already done actors', async () => {
+    const machine = createMachine({
+      types: {} as {
+        output: { count: 42 };
+      },
+      initial: 'done',
+      states: {
+        done: {
+          type: 'final'
+        }
+      },
+      output: { count: 42 }
+    });
+
+    const actor = createActor(machine).start();
+
+    const data = await toPromise(actor);
+
+    ((_accept: { count: number }) => {})(data);
+
+    expect(data).toEqual({ count: 42 });
+  });
+});