flexium
Version:
A lightweight, signals-based UI framework with cross-platform renderers
101 lines (96 loc) • 2.73 kB
text/typescript
import { V as VNode } from './renderer-CWYPPHmO.cjs';
import { S as StateGetter } from './state-EWGQpL70.cjs';
interface ForProps<T> {
each: StateGetter<T[]>;
children: ((item: T, index: () => number) => VNode)[];
}
/**
* <For> component for efficient list rendering.
* Reuses DOM nodes for items that haven't changed, avoiding full VDOM diffing.
*
* @example
* <For each={items}>
* {(item, index) => <div>{item.name}</div>}
* </For>
*/
declare function For<T>(props: ForProps<T>): () => VNode[];
interface ShowProps<T> {
when: StateGetter<T | undefined | null | false>;
fallback?: VNode | (() => VNode);
children: VNode[] | ((item: T) => VNode)[];
}
/**
* <Show> component for conditional rendering.
* Renders children when the condition is truthy, otherwise renders fallback.
*
* @example
* <Show when={isLoggedIn} fallback={<div>Login</div>}>
* <Dashboard />
* </Show>
*
* // With callback to access truthy value
* <Show when={user}>
* {(u) => <div>Hello {u.name}</div>}
* </Show>
*/
declare function Show<T>(props: ShowProps<T>): () => any;
interface SwitchProps {
fallback?: VNode;
children: VNode[];
}
interface MatchProps<T> {
when: StateGetter<T | undefined | null | false>;
children: VNode | ((item: T) => VNode);
}
/**
* <Match> component to be used within <Switch>.
* It does not render anything on its own.
*/
declare function Match<T>(props: MatchProps<T>): any;
/**
* <Switch> component for mutually exclusive conditional rendering.
* Renders the first <Match> child whose `when` condition is truthy.
*
* @example
* <Switch fallback={<div>Not Found</div>}>
* <Match when={isLoading}>Loading...</Match>
* <Match when={error}>Error: {error}</Match>
* <Match when={data}>
* {(d) => <DataView data={d} />}
* </Match>
* </Switch>
*/
declare function Switch(props: SwitchProps): () => any;
/**
* Context API for dependency injection
*/
/**
* Context interface
*/
interface Context<T> {
id: symbol;
defaultValue: T;
Provider: (props: {
value: T;
children: any;
}) => any;
}
/**
* Creates a Context object
*
* @param defaultValue - The default value if no provider is found
* @returns Context object with Provider component
*/
declare function createContext<T>(defaultValue: T): Context<T>;
/**
* Retrieves the current value of a Context
*
* @param context - The context object
* @returns The current value
*/
declare function useContext<T>(context: Context<T>): T;
declare function Suspense(props: {
fallback: any;
children: any;
}): () => any;
export { type Context as C, For as F, Match as M, Show as S, Switch as a, Suspense as b, createContext as c, useContext as u };