xstate-wait-until.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
import { createMachine, interpret, Interpreter, State } from "xstate";

const promiseMachine = createMachine({
	id: "promise",
	initial: "pending",
	states: {
		pending: {
			on: {
				RESOLVE: { target: "resolved" },
				REJECT: { target: "rejected" },
			},
		},
		resolved: {
			type: "final",
		},
		rejected: {
			type: "final",
		},
	},
});

const waitUntil = <TState extends State<any>>(
	interpreter: Interpreter<any>,
	condition: (state: TState) => boolean
): Promise<TState> => {
	console.log("Waiting...");
	return new Promise((resolve) => {
		const listener = (state: TState) => {
			console.log("Checking state", state.toStrings());
			if (condition(state)) {
				console.log("Condition met!");
				interpreter.off(listener);
				resolve(state);
			}
		};

		interpreter.onTransition(listener as any);
	});
};

const somePromise = interpret(promiseMachine)
	.onTransition((state) => console.log("Transitioned to", state.toStrings()))
	.start();

waitUntil(somePromise, (state) => state.matches("resolved")).then((state) =>
	console.log("Resolved!", state.toStrings())
);

waitUntil(somePromise, (state) => Boolean(state.done)).then((state) => console.log("Done!", state.toStrings()));

console.log("Resolving", somePromise.send("RESOLVE").toStrings(), somePromise.state.toStrings());

Response to https://twitter.com/mpocock1/status/1465290808060489734