@furystack/shades-common-components/esm/components/cache-view.d.ts

Common UI components for FuryStack Shades

import type { Cache, CacheWithValue } from '@furystack/cache';
import type { PartialElement, ShadeComponent, ViewTransitionConfig } from '@furystack/shades';
/**
 * Props for the CacheView component.
 * @typeParam TData - The type of data stored in the cache
 * @typeParam TArgs - The tuple type of arguments used to identify the cache entry
 * @typeParam TContentProps - The full props type of the content component (must include `data`)
 */
export type CacheViewProps<TData, TArgs extends any[], TContentProps extends {
    data: CacheWithValue<TData>;
} = {
    data: CacheWithValue<TData>;
}> = {
    /** The cache instance to observe and control */
    cache: Cache<TData, TArgs>;
    /** The arguments identifying which cache entry to display */
    args: TArgs;
    /** Shades component rendered when a value is available (loaded or obsolete). */
    content: ShadeComponent<TContentProps>;
    /** Optional custom loader element. Default: null (nothing shown when loading). */
    loader?: JSX.Element;
    /**
     * Optional custom error UI. Receives the error and a retry callback.
     * The retry callback calls cache.reload(...args).
     * If not provided, a default Result + retry Button is shown.
     */
    error?: (error: unknown, retry: () => void) => JSX.Element;
    viewTransition?: boolean | ViewTransitionConfig;
} & (keyof Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>> extends never ? {
    contentProps?: never;
} : {
    contentProps: Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>>;
});
/**
 * Renders the state of a cache entry for the given `cache` + `args`.
 *
 * Subscribes to the cache observable and dispatches in this order:
 * 1. **Error** — failed result renders the error UI with a retry callback.
 * 2. **Value** — loaded or obsolete result renders `content`. Obsolete also
 *    triggers a single `cache.reload(...args)` per obsolete cycle.
 * 3. **Loading** — no value, no error: renders `loader` (default `null`).
 *
 * @example
 * ```tsx
 * const MyContent = Shade<{ data: CacheWithValue<User> }>({
 *   customElementName: 'my-content',
 *   render: ({ props }) => <div>{props.data.value.name}</div>,
 * })
 *
 * <CacheView cache={userCache} args={[userId]} content={MyContent} />
 * ```
 */
export declare const CacheView: <TData, TArgs extends any[], TContentProps extends {
    data: CacheWithValue<TData>;
} = {
    data: CacheWithValue<TData>;
}>(props: CacheViewProps<TData, TArgs, TContentProps>) => JSX.Element;
//# sourceMappingURL=cache-view.d.ts.map