anki/ts/sveltelib/asyncReactive.ts

53 lines
1.4 KiB
TypeScript
Raw Normal View History

2021-04-13 10:57:08 +02:00
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { Readable, derived } from "svelte/store";
2021-03-21 21:38:23 +01:00
interface AsyncReativeData<T, E> {
2021-03-21 21:07:35 +01:00
value: Readable<T | null>;
error: Readable<E | null>;
loading: Readable<boolean>;
}
2021-03-21 21:38:23 +01:00
function useAsyncReactive<T, E>(
2021-03-21 21:07:35 +01:00
asyncFunction: () => Promise<T>,
dependencies: [Readable<unknown>, ...Readable<unknown>[]]
2021-03-21 21:38:23 +01:00
): AsyncReativeData<T, E> {
const promise = derived(
dependencies,
2021-03-22 15:30:35 +01:00
(_, set: (value: Promise<T> | null) => void): void => set(asyncFunction()),
// initialize with null to avoid duplicate fetch on init
null
);
2021-03-21 21:07:35 +01:00
const value = derived(
promise,
2021-03-22 15:30:35 +01:00
($promise, set: (value: T) => void): void => {
$promise?.then((value: T) => set(value));
2021-03-21 21:07:35 +01:00
},
null
);
2021-03-21 21:07:35 +01:00
const error = derived(
promise,
2021-03-22 15:30:35 +01:00
($promise, set: (error: E | null) => void): (() => void) => {
$promise?.catch((error: E) => set(error));
2021-03-22 15:30:35 +01:00
return (): void => set(null);
2021-03-21 21:07:35 +01:00
},
null
);
2021-03-21 21:07:35 +01:00
const loading = derived(
promise,
2021-03-22 15:30:35 +01:00
($promise, set: (value: boolean) => void): (() => void) => {
$promise?.finally(() => set(false));
2021-03-22 15:30:35 +01:00
return (): void => set(true);
2021-03-21 21:07:35 +01:00
},
true
);
return { value, error, loading };
}
2021-03-21 21:38:23 +01:00
export default useAsyncReactive;