Make final state data available to waitFor?

[grahamb]

I'm currently using the invoke onDone handler to deal with the result of a machine who has entered a final state. I return a data object in those final states. The onDone handler has access to event.data, but waitFor does not. The state object that the waitFor handler has access to includes a configuration array, and I can get at the state data through the first entry in that array, but that smells wrong.

Simple example:

import { createMachine, interpret } from "xstate";
import { waitFor } from "xstate/lib/waitFor.js";

(async () => {
  const machine = createMachine({
    initial: "pending",
    states: {
      pending: {
        after: {
          1000: {
            target: "done"
          }
        }
      },
      done: {
        type: "final",
        data: {
          foo: "bar"
        }
      }
    }
  });

  const actor = interpret(machine)
    .onDone((state) => {
      console.log(state.data); // logs `{foo: "bar"}`
    })
    .start();

  const doneState = await waitFor(actor, (state) => {
    const isDone = state.matches("done");
    if (isDone) {
      console.log(state.data); // logs `undefined`
    }
    return isDone;
  });

  console.log(doneState.data); // logs `undefined`
  console.log( doneState.configuration[0].doneData); // logs `{foo: "bar"}` but smells wrong
})();

My current use case for this is the need to invoke several machines in parallel and deal with the combined results derived from the final state data. waitFor would be perfect for this except it doesn't have access to this data.