ivi/dist/lib/state.d.ts

Lightweight Embeddable Web UI Library.

import type { Component } from "./core.js";
/**
 * Creates a memoized function.
 *
 * @example
 *
 *     const Example = component((c) => {
 *       const fullName = useMemo(shallowEqArray, ([firstName, lastName]) => (
 *         `${firstName} ${lastName}`
 *       ));
 *
 *       return ({firstName, lastName}) => html`
 *         div.fullName ${fullName([firstName, lastName])}
 *       `;
 *     });
 *
 * @typeparam T Input type.
 * @typeparam U Output type.
 * @param areEqual Function that checks if input value hasn't changed.
 * @param fn Function to memoize.
 * @returns Memoized function.
 */
export declare const useMemo: <T, U>(areEqual: (prev: T, next: T) => boolean, fn: (props: T) => U) => (props: T) => U;
/**
 * Creates a reactive state.
 *
 * @example
 *
 *     const Example = component((c) => {
 *       const [getCounter, setCounter] = useState(c, 0);
 *       const inc = () => { setCounter(getCounter() + 1); };
 *
 *       return () => html`
 *         div.app
 *           div.counter ${getCounter()}
 *           button @click=${inc} 'Increment'
 *       `;
 *     });
 *
 * @typeparam S State type.
 * @param component Component instance.
 * @param state Initial state value.
 * @returns A tuple with a getter and setter functions.
 */
export declare const useState: <S>(component: Component, state: S) => [get: () => S, set: (s: S) => void];
/**
 * Reducer Dispatch Function.
 *
 * @typeparam A Action Type.
 */
export type Dispatch<A> = (action: A) => void;
/**
 * Creates a reactive state reducer.
 *
 * @example
 *
 *     function reducer(state, action) {
 *       switch (action.type) {
 *         case "inc":
 *           return state + 1;
 *       }
 *       return state;
 *     }
 *
 *     const Example = component((c) => {
 *        const [counter, dispatch] = useReducer(c, 0, reducer);
 *        const inc = () => { dispatch("inc"); };
 *
 *       return () => html`
 *         div.app
 *           div.counter ${counter()}
 *           button @click=${inc} 'Increment'
 *       `;
 *     });
 *
 * @typeparam S State type.
 * @typeparam A Reducer action type.
 * @param component Component instance.
 * @param state Initial state.
 * @param reducer Reducer function.
 * @returns State getter and dispatch functions.
 */
export declare const useReducer: <S, A>(component: Component, state: S, reducer: (state: S, action: A) => S) => [get: () => S, dispatch: Dispatch<A>];
//# sourceMappingURL=state.d.ts.map