Update context from promise + async iterator stream

[drewdelano]

I'm trying to make an API call that returns a promise + async iterator and then iterate through the results updating the context as the stream comes in. I've tried fromPromise and fromObservable, but no luck so far. All of the examples observables I can find for XState are simplified to the point I'm not sure they're usable.

Here's the demo:
xstate-stream-issue.zip

Possibly related to:
#4968

Same question in Discord:
https://discord.com/channels/795785288994652170/1353802241370226848/1353802241370226848

[Andarist]

I think this does the trick (TS playground):

// @target: esnext

import { setup, fromPromise, ActorRef, Snapshot } from "xstate"; // types: 5.19.2

async function* createAsyncIterator() {
  yield "Hello";
  await new Promise((resolve) => setTimeout(resolve, 1000));
  yield "World!";
  await new Promise((resolve) => setTimeout(resolve, 1000));
  yield "Async Iterators are cool!";
}

type ParentEvent = { type: "UPDATE_VALUE"; value: string };

setup({
  types: {} as {
    context: {
      value: string;
    };
    events: ParentEvent;
  },
  actors: {
    consumeAsyncIterator: fromPromise(
      async ({
        input: { parent },
      }: {
        input: { parent: ActorRef<Snapshot<unknown>, ParentEvent> };
      }) => {
        for await (const value of createAsyncIterator()) {
          parent.send({ type: "UPDATE_VALUE", value });
        }
      },
    ),
  },
}).createMachine({
  context: {
    value: "",
  },
  invoke: {
    src: "consumeAsyncIterator",
    input: ({ self }) => ({ parent: self }),
  },
});