Awaitable and Abort-Signalling Transitions

[mmocny]

I want to make it easier to write compute-intensive JavaScript functions which support yield()ing to main thread, and support AbortSignal signals to cancel any in-progress work. This is in support of writing Components which do not block main thread, allowing the UI to stay responsive (and do well on Interaction to Next Paint (INP)).

In particular, it would be very convenient to integrate with useTransition and <Suspense> where SolidJS already makes it very nice and easy to write async code.

Example usage:

const [isPending, startAwaitableTransition] = useAwaitableTransition();

// an example of transitions that may happen in quick succession, like text input...
const onInput = async (e) => {
    try {
        // New: await transition end (until !pending)
        await startAwaitableTransition(() => {
            // Like today: Set up transition
        });
        // New: Clean up after transition
    } catch {
        // New: Clean up an abort transition
    }
};

The fact that you can await a transition is not much different than just creating an Effect on transition pending... However, I am not aware of a way to (currently) run some clean-up code in situations where a transition is aborted by the start of another transition. This helper lets you just catch() a transition failure.

And, based on this, create a helper that automatically manages an AbortController which is signalled.

const [isPending, startAbortSignallingTransition, abortSignal] = useAbortSignallingTransition();

const onInput = async (e) => {
    try {
        await startAbortSignallingTransition(() => {
            // Set up transition
        });
    } catch { } // No desire to handle in this case
};

// ... can use abortSignal() in effects and rendering... will get automatically signalled whenever transition is aborted

---

Here was my stab at it... Some of the TypeScript types are likely to need improvement.

function useAwaitableTransition() : [Accessor<boolean>, (fn: () => void) => Promise<void>] {
	const [isPending, startTransition] = useTransition();
	let resolveRef: (((value?: any) => void) | undefined);
	let rejectRef: (((reason?: any) => void) | undefined);

	const startAwaitableTransition = async (callback: () => void): Promise<void> => {
		rejectRef?.();

		return new Promise((resolve, reject) => {
			resolveRef = resolve;
			rejectRef = reject;

			startTransition(() => {
				callback();
			});
		});
	};
	
	createEffect(() => {
		if (!isPending()) {
			resolveRef?.();

			resolveRef = undefined;
			rejectRef = undefined;
		}
	});

	return [isPending, startAwaitableTransition];
}

function useAbortSignallingTransition() : [Accessor<boolean>, (fn: () => void) => Promise<void>, Accessor<AbortSignal>] {
  const [isPending, startAwaitableTransition] = useAwaitableTransition();
  const [abortController, setAbortController] = createSignal(new AbortController);

	const startAbortSignallingTransition = async (callback: () => void) => {
		const newAbortController = new AbortController();

		try {
			await startAwaitableTransition(() => {
				callback();
				setAbortController(newAbortController);
			});
		} catch (ex) {
			newAbortController.abort();
			throw ex;
		}
  }

	return [isPending, startAbortSignallingTransition, () => abortController().signal];
}