Waiting for many Promise actors / setting child state from parent?

[James-E-A]

I'm trying to wait for several resources to be acquired before advancing my state machine from recording.acquiring to recording.recording.

I thought that I should do this by making recording.acquiring a parallel state, for each resource that needs to be acquired, using its onDone event to assign the result & then mark its parallel child ready (final); then using the recording.acquiring onDone transition to enter recording.recording.

This nearly worked, except that when the invoked actor onDone handlers try to switch the parallel child state, they end up resetting the state of all that parallel child's peers. (I thought to use invoked actors so that I can guarantee resources are cleaned up when the master recording state is eventually exited, no matter what reason.)

Setting reenter: false did not fix this. How can I accomplish what I'm trying to accomplish?

import { assign, createMachine, fromPromise } from "xstate";

class MediaRecorderStream {
  constructor(stream, options) {
    // ...
  }

  pipeTo(target, options) {
    console.debug("<debug: pipeTo OK>");
  }
}

export default createMachine(
  {
    id: "TapeRecorder",
    initial: "inactive",
    states: {
      inactive: {
        on: {
          action_record: "recording",
        },
      },
      recording: {
        initial: "acquiring",
        invoke: [
          {
            src: "MediaRecorderStream",
            id: "mic",
            input: {
              query: { audio: true, video: false },
              mimeType: "audio/webm;codecs=opus",
            },
            onDone: {
              actions: assign({ mic: ({ event }) => event.output }),
              target: ".acquiring.acquiring_mic.ready",
              reenter: false,
            },
            onError: {
              actions: ({ event }) => console.error(event.error),
              target: ".stopped"
            },
          },
          {
            src: "FileWritableStream",
            id: "file",
            input: {
              suggestedName: "out.weba",
            },
            onDone: {
              actions: assign({ file: ({ event }) => event.output }),
              target: ".acquiring.acquiring_file.ready",
              reenter: false,
            },
            onError: {
              actions: ({ event }) => console.error(event.error),
              target: ".stopped"
            },
          },
        ],
        states: {
          acquiring: {
            type: "parallel",
            states: {
              acquiring_mic: {
                initial: "acquiring",
                states: {
                  acquiring: {},
                  ready: {
                    type: "final",
                  },
                },
              },
              acquiring_file: {
                initial: "acquiring",
                states: {
                  acquiring: {},
                  ready: {
                    type: "final",
                  },
                },
              },
            },
            onDone: "recording",
          },
          recording: {
            initial: "recording",
            invoke: {
              src: "PipeTo",
              input: ({ context }) => ({
                source: context.mic,
                target: context.file,
              }),
            },
            states: {
              recording: {
                on: {
                  action_pause: "paused",
                },
              },
              paused: {
                on: {
                  action_resume: "recording",
                },
              },
            },
          },
          stopped: {
            type: "final",
          },
        },
        on: {
          action_stop: ".stopped",
        },
        onDone: "inactive",
      },
    },
  },
  {
    actors: {
      PipeTo: fromPromise(({ input: { source, target, options }, signal }) =>
        source.pipeTo(target, options)
      ),
      FileWritableStream: fromPromise(({ input: options, signal }) =>
        (
          //window.showSaveFilePicker(options)
          //new Promise((_resolve, reject) => setTimeout(() => reject(new Error("<debug>")), 1500))
          navigator.storage.getDirectory().then((d) => d.getFileHandle(options.suggestedName, { create: true }))
        )
        .then((f) => f.createWritable())
      ),
      MediaRecorderStream: fromPromise(({ input: { query, options }, signal }) =>
        navigator.mediaDevices.getUserMedia(query)
        .then((stream) => new MediaRecorderStream(stream, options))
      ),
    },
  },
);

---

OK, on further study, I realized that a Promise actor isn't quite the correct tool here.

But when using other actors, which don't "produce output" and have to be wired up with a custom ready event, I'm having a hard time finding any clean way to discriminate the different actors' ready events from one another:

import { assign, createMachine, fromCallback, fromPromise } from "xstate";

class MediaRecorderStream {
  constructor(stream, options) {
    // ...
  }

  pipeTo(target, options) {
    console.debug("<debug: pipeTo OK>");
  }
}

export default createMachine(
  {
    id: "TapeRecorder",
    initial: "inactive",
    states: {
      inactive: {
        on: {
          action_record: "recording",
        },
      },
      recording: {
        invoke: [
          {
            src: "MediaRecorderStream",
            id: "mic",
            input: {
              query: { audio: true, video: false },
              mimeType: "audio/webm;codecs=opus",
              fixme1: "nhpuv6",
            },
            onError: {
              actions: ({ event }) => console.error(event.error),
              target: ".stopped"
            },
          },
          {
            src: "FileWritableStream",
            id: "file",
            input: {
              options: { suggestedName: "out.weba" },
              fixme1: "xdj2de",
            },
            onError: {
              actions: ({ event }) => console.error(event.error),
              target: ".stopped"
            },
          },
        ],
        initial: "acquiring",
        states: {
          acquiring: {
            type: "parallel",
            states: {
              acquiring_mic: {
                initial: "acquiring",
                states: {
                  acquiring: {
                    on: {
                      ready_nhpuv6: {
                        actions: assign({ mic: ({ event }) => event.output }),
                        target: "ready",
                      },
                    },
                  },
                  ready: {
                    type: "final",
                  },
                },
              },
              acquiring_file: {
                initial: "acquiring",
                states: {
                  acquiring: {
                    on: {
                      ready_xdj2de: {
                        actions: assign({ file: ({ event }) => event.output }),
                        target: "ready",
                      },
                    },
                  },
                  ready: {
                    type: "final",
                  },
                },
              },
            },
            onDone: "recording",
          },
          recording: {
            initial: "recording",
            invoke: {
              src: "PipeTo",
              input: ({ context }) => ({
                source: context.mic,
                target: context.file,
              }),
            },
            states: {
              recording: {
                on: {
                  action_pause: "paused",
                },
              },
              paused: {
                on: {
                  action_resume: "recording",
                },
              },
            },
          },
          stopped: {
            type: "final",
          },
        },
        on: {
          action_stop: ".stopped",
        },
        onDone: "inactive",
      },
    },
  },
  {
    actors: {
      PipeTo: fromPromise(({ input: { source, target, options }, signal }) =>
        source.pipeTo(target, options)
      ),
      FileWritableStream: fromCallback(({ sendBack, receive, input: { options, fixme1 }, signal }) => {
        console.debug(signal);
        (
          //window.showSaveFilePicker(options)
          //new Promise((_resolve, reject) => setTimeout(() => reject(new Error("<debug>")), 1500))
          navigator.storage.getDirectory().then((d) => d.getFileHandle(options.suggestedName, { create: true }))
        )
        .then((f) => f.createWritable())
        .then((w) => sendBack({ type: `ready_${fixme1}`, output: w }));

        return () => {console.debug("<debug: cleanup file>");};
      }),
      MediaRecorderStream: fromCallback(({ sendBack, receive, input: { query, options, fixme1 }, signal }) => {
        navigator.mediaDevices.getUserMedia(query)
        .then((media) => sendBack({ type: `ready_${fixme1}`, output: new MediaRecorderStream(media, options) }));

        return () => {console.debug("<debug: cleanup media>");};
      }),
    },
  },
);

[James-E-A]

Interim solution that isn't so unspeakably bad: have the actors brand the ready events with their own IDs

/**
 * resourceActor({
 *   acquire: async (options) => {...},
 *   release: async (resource) => {...},
 * })
 */
function resourceActor({ acquire, release }) {
	return fromCallback(({ input: options, self, sendBack }) => {
		var resource_ = Promise.resolve(acquire(options));
		resource_.then(
			(result) => void sendBack({ type: "ready", output: result, _fixme_xstate_5335: self.id }),
			(error) => void sendBack({ type: "error", error })
		);
		return () => void resource_.then((result) => release(result));
	});
}


/**
 * on: {
 *   ready: {
 *     guard: fromActor("some_invoked_actor"),
 *     actions: assign({ some_resource: ({ event }) => event.output }),
 *     target: "ready",
 *   },
 * },
 */
function fromActor(id) {
	return ({ event }) => (event._fixme_xstate_5335 === id);
}

[davidkpiano]

Would using Promise.allSettled(…) as a single actor work here?

[James-E-A]

I think not; I actually discovered that Promise actors can't be used for resource management like I thought, since they're deemed to be terminated after settled.

I'm currently using a template for callback actors as detailed here.

[James-E-A]

I've got a more fully worked example here, showing a pretty minimal "real-world" use-case of resource acquisition. I just can't see how to accomplish this without that annoying extra "tag" on the event.