fundom.js/dist/index.esm.d.ts

JS library for creating reactive ui elements in declarative way

type FunStateSub<T> = (nextValue: T, ...args: any[]) => void;
type FunStateOnReleaseEffect = () => void;
type FunStateGetterOptions = {
    once?: boolean;
    releaseEffect?: FunStateOnReleaseEffect;
};
type FunStateSetterOptions = {
    force?: boolean;
};
type FunStateGetter<T> = (subCb?: FunStateSub<T>, options?: FunStateGetterOptions) => T;
type FunStateAction = 'pause' | 'resume' | 'release';
type FunStateController<T> = (action: FunStateAction, sub?: FunStateSub<T>) => void;
type FunStateSetterCallback<T> = (controller: FunStateController<T>) => void;
type FunStateSetter<T> = (value: T | FunStateSetterCallback<T>, options?: FunStateSetterOptions) => void;
type FunState = <T>(initialValue: T) => [getter: FunStateGetter<T>, setter: FunStateSetter<T>];
type ChildrenParams<C extends TagName> = (() => HTMLElementTagNameMap[C]) | HTMLElementTagNameMap[C];
type TagName = keyof HTMLElementTagNameMap;
type FunUtilHandler<T> = (val: T) => void;
type FormatReturnValue = (handler: FunUtilHandler<TextValue>) => void;
type ComputeReturnValue<T> = (handler: FunUtilHandler<T>) => void;
type IncomingFormatItem<T> = TextValue | FunStateGetter<TextValue> | ComputeReturnValue<T> | FormatReturnValue;
type UtilIncomingValue = TextValue | FunStateGetter<TextValue> | FormatReturnValue;
type CaseReturnValue<K extends TagName> = (value: any, isLast: boolean) => FunDomUtil<K>[];
type ElementSnapshot = {
    childrenLength: number;
    innerHTML: string;
    innerText: string;
    textContent: string;
    style: CSSStyleDeclaration;
    attributes: NamedNodeMap;
    classList: DOMTokenList;
};
type ControlFlowId = string;
type ControlFlowContext = {
    snapshot: ElementSnapshot | null;
    comment: Comment | undefined;
};
type ElementContext = Record<ControlFlowId, ControlFlowContext>;
type FunDomUtil<K extends keyof HTMLElementTagNameMap> = (el: HTMLElementTagNameMap[K], context: ElementContext, ctrlFlowId: ControlFlowId, useRevert: boolean) => HTMLElementTagNameMap[K];
type TextValue = string | number;

declare const elem: <K extends TagName>(name: K, ...utils: FunDomUtil<K>[]) => (...extraUtils: FunDomUtil<K>[]) => HTMLElementTagNameMap[K];
declare function children<K extends TagName, C extends TagName>(...values: ChildrenParams<C>[]): FunDomUtil<K>;
declare function children<K extends TagName, C extends TagName>(value: FunStateGetter<ChildrenParams<C> | ChildrenParams<C>[]>): FunDomUtil<K>;
declare const child: <K extends TagName, C extends TagName>(name: C, ...utils: FunDomUtil<C>[]) => FunDomUtil<K>;
declare const list: <T, K extends TagName, C extends TagName>(data: Array<T> | FunStateGetter<Array<T>>, newElementFn: (item: T, index: number) => ReturnType<typeof elem<C>>) => FunDomUtil<K>;
declare const ifElse: <K extends TagName>(condition: any) => (...fns1: FunDomUtil<K>[]) => (...fns2: FunDomUtil<K>[]) => FunDomUtil<K>;
declare const ifOnly: <K extends TagName>(condition: any) => (...fns1: FunDomUtil<K>[]) => FunDomUtil<K>;
declare const match: <K extends TagName>(data: any) => (...cases: CaseReturnValue<K>[]) => FunDomUtil<K>;
declare const matchCase: <K extends TagName>(caseValue?: unknown) => (...fns: FunDomUtil<K>[]) => CaseReturnValue<K>;
declare const html: <K extends TagName>(value: UtilIncomingValue) => FunDomUtil<K>;
declare const txt: <K extends TagName>(value: UtilIncomingValue, options?: {
    useTextContent: boolean;
}) => FunDomUtil<K>;
declare const style: <K extends TagName>(props: Record<string, UtilIncomingValue>) => FunDomUtil<K>;
declare const classList: <K extends TagName>(...classNames: UtilIncomingValue[]) => FunDomUtil<K>;
declare const attr: <K extends TagName>(props: Record<string, UtilIncomingValue>) => FunDomUtil<K>;
declare const on: <K extends TagName>(type: string, cb: (e: Event) => void, options?: {
    capture?: boolean;
    once?: boolean;
    passive?: boolean;
    signal?: AbortSignal;
    offTrigger?: FunStateGetter<boolean>;
}) => FunDomUtil<K>;

declare const fmt: <T>(...values: Array<IncomingFormatItem<T>>) => FormatReturnValue;
declare const cmp: <T, U>(stateGetter: FunStateGetter<T>, computer: (val: T) => U) => ComputeReturnValue<U>;

declare const funState: FunState;

export { attr, child, children, classList, cmp, elem, fmt, funState, html, ifElse, ifOnly, list, match, matchCase, on, style, txt };
export type { CaseReturnValue, ChildrenParams, ComputeReturnValue, ControlFlowContext, ControlFlowId, ElementContext, ElementSnapshot, FormatReturnValue, FunDomUtil, FunState, FunStateAction, FunStateController, FunStateGetter, FunStateGetterOptions, FunStateOnReleaseEffect, FunStateSetter, FunStateSetterCallback, FunStateSetterOptions, FunStateSub, FunUtilHandler, IncomingFormatItem, TagName, TextValue, UtilIncomingValue };