Generic Await Component

[GustavBW]

Hi,
I wasn't sure where to put this, but I made this for a rather large solidjs project. It had a lot of async outbound calls (to servers and services), and I looked through the docs but didn't find any short hands for Await, so this proved really useful rather than handling 10+ resources manually all the time.

It might look a bit arcane, but all it is, is an Await component that takes in any amount of functions (like a vararg) returning a promise of some kind, and a child function (like For) with corresponding inputs. If any 1 function fails, the callback is used instead.
It is strictly a control flow utility, and has no visual "impact" so to speak.

Type safety is, somehow, preserved. Support can also easily be extended for resources' "refresh" through a trigger signal or something like that. Its version here is boiled down to only the parts involving the solidjs standard library as to require less dependencies.

I believe a lot would like a component like this to be part of either the standard library, or solid primitives, but again, don't exactly know where to PR, so let me know.

As for testing, I must admit that this specific version doesn't have its own test suite. We are primarily using descendants of this modified for our specific usecases, however it has been a solid tool (pun intended) for us for months.

import { createResource, InitializedResourceOptions, ResourceOptions } from "solid-js";
import { JSX } from "solid-js/jsx-runtime";

type AsyncFunction<T> = () => Promise<T>;
type FunctionArray<T extends any[]> = AsyncFunction<T[number]> | { [K in keyof T]: () => Promise<T[K]> };

interface AwaitProps<T extends any[]> {
    func: FunctionArray<T>;
    fallback?: (error: any) => JSX.Element;
    whilestLoading?: JSX.Element;
    children: (...args: T) => JSX.Element;
    options?: ResourceOptions<T> | InitializedResourceOptions<T>;
}

/**
 * Await any amount of functions, then, when all promises are resolved, render the children function with the resolved values.
 * On any error, render the fallback function.
 * 
 * Single function example:
 * ```tsx
 * <Await func={() => fetchUser(userId)}>{ userdata => (
 *     <User data={userdata} />
 * )}</Await>
 * ```
 * 
 * Multiple functions example:
 * ```tsx
 * <Await func={[() => fetchUser(userId), () => fetchRecentPosts(userId)]}>{ (userdata, posts) => (
 *    <User data={userdata}>
 *      <For each={posts}>{ post => (
 *         <Post data={post} />
 *     )}</For>
 * )}</Await>
 * ```
 * 
 * @author GustavBW
 */
export const Await = <T extends any[]>(props: AwaitProps<T>) => {
    const executeFuncs = async (): Promise<T[number]> => {
        if (typeof props.func === 'function') {
            return await props.func();
        } else {
            return await Promise.all(props.func.map(f => f()));
        }
    };
    const [resource] = createResource(executeFuncs, props.options);

    const onFallback = (error: any) => {
        if (props.fallback) {
            return props.fallback(error);
        }
        return (<p>{JSON.stringify(error)}</p>)
    };

    return (
        <>
            {resource.loading && (props.whilestLoading ? props.whilestLoading : <p>Loading...</p>)}
            {resource.error && onFallback(resource.error)}
            {resource.latest && props.children(...(resource.latest as T))}
        </>
    );
}

[GustavBW]

I've come to learn that this component, if updated to the standard and design philosophy of Solid, becomes the Suspense component.
Link to Discord discussion: https://discord.com/channels/722131463138705510/1309515178454286426/1309533979669696604