@solid-primitives/promise

A library of reactive primitives and helpers for handling promises.

• promiseTimeout — Creates a promise that resolves (or rejects) after given time.
• raceTimeout — Combination of Promise.race() and promiseTimeout.
• until — Promised one-time watch for changes. Await a reactive condition.

Installation

1npm install @solid-primitives/promise
2# or
3yarn add @solid-primitives/promise

promiseTimeout

Creates a promise that resolves (or rejects) after given time.

How to use it

1import { promiseTimeout } from "@solid-primitives/promise";
2
3await promiseTimeout(1000); // resolves after 1 second
4
5try {
6  await promiseTimeout(1000, true, "timeout"); // rejects with 'timeout' after 1 second
7} catch (e) {
8  console.log(e); // 'timeout'
9}

raceTimeout

Combination of Promise.race() and promiseTimeout.

How to use it

1import { raceTimeout } from "@solid-primitives/promise";
2
3await raceTimeout(myPromise, 1000); // resolves after 1 second, or when "myPromise" resolves
4
5try {
6  await raceTimeout(myPromise, 1000, true, "timeout"); // rejects with 'timeout' after 1 second, or resolves when "myPromise" resolves
7} catch (e) {
8  console.log(e); // 'timeout'
9}

until

Promised one-time watch for changes. Await a reactive condition.

How to use it

It takes a signal or a reactive condition — which will resolve the promise if truthy — as an argument.

Returns a promise that resolves a truthy value of a condition. Or rejects when it's root get's disposed.

With a custom reactive condition:

no need for createMemo, it's memoized internally

1import { until } from "@solid-primitives/promise";
2
3const [count, setCount] = createSignal(0);
4
5await until(() => count() > 5);

With createResource

It also can be used as a source for createResource.

1import { until } from "@solid-primitives/promise";
2
3const [state, setState] = createSignal(null);
4
5const [data] = createResource(() => until(state));

With raceTimeout

To limit the maximum time it has for resolving

1import { until, raceTimeout } from "@solid-primitives/promise";
2
3try {
4  const result = await raceTimeout(until(condition), 2000, true, "until was too slow");
5  // if until is quicker:
6  result; // => truthy condition value
7} catch (err) {
8  // if timeouts:
9  console.log(err); // => "until was too slow"
10}

Manually stopping computation

If you don't want to use raceTimeout, there are other ways to stop the reactive computation of until if needed.

First, it will stop itself "onCleanup".

1// the same goes for components as they are roots too
2createRoot(dispose => {
3
4  // disposing root causes the promise to reject,
5  // so you need to catch that outcome to prevent errors
6  until(condition)
7    .then(res => {...})
8    .catch(() => {})
9
10  dispose()
11})

Second, using the .dispose() method.

1// until returns a promise with a dispose method in it
2const promise = until(condition);
3
4// you need to catch the rejection here too
5promise.then().catch();
6
7promise.dispose();

Demo

until + createResource demo: https://codesandbox.io/s/until-resource-demo-sfs7c?file=/src/index.tsx

until as createResource fetcher: https://codesandbox.io/s/until-as-resource-fetcher-6sl0e?file=/src/index.tsx

Changelog

See CHANGELOG.md

Inspiration

Original idea for this primitive comes from a VueUse's function of the same name.