wickedstate/dist/index.d.ts

A plug-n-play reactive library for building web applications.

/**
 * A wicked state object contract.
 *
 * This is the object that is used to manage the state of the application.
 */
export interface WickedStateObjectContract extends Object {
    /**
     * The init function is called when the object is created.
     */
    init?: Function;
    /**
     * The destroy function is called when the object is destroyed.
     */
    destroy?: Function;
    /**
     * The $el property holds reference to the current element being processed.
     */
    $el?: WickedStateElementContract | null;
    /**
     * The $root property holds reference to the root element.
     */
    $root?: WickedStateElementContract | null;
    /**
     * The $data property holds reference to the data object.
     */
    $data?: WickedStateObjectContract | null;
    /**
     * The $parent property holds reference to the parent state object (if any).
     */
    $parent?: WickedStateElementContract | null;
    /**
     * The $effect property is used to create a reactive effect.
     */
    $effect?: WickedStateEffectContract;
    /**
     * The $watch property is used to watch a property for changes.
     */
    $watch?: <T>(selector: string, fn: (value: T, oldValue: T) => void) => void;
    /**
     * The $refs property holds reference to the elements with the `ref` attribute
     */
    $refs?: Record<string, HTMLElement>;
    /**
     * The $set property is used to set a value in the data object using dot notation.
     */
    $set?: <T>(path: string, value: T) => void;
    /**
     * The $get property is used to get a value from the data object using dot notation.
     */
    $get?: <T>(path: string, defaultValue?: T | null) => T;
}
/**
 * A wicked state element contract.
 *
 * These are the properties attached to a DOM element that is managed by Wicked State.
 */
export interface WickedStateElementContract extends HTMLElement {
    __wickedStateObject?: WickedStateObjectContract;
    __wickedStateProcessed?: boolean;
    __wickedStateCurrentElement?: WickedStateElementContract;
    __wickedStateCleanups?: Function[];
    __wickedStateRefs?: Record<string, WickedStateElementContract>;
    __wickedStateDisconnect?: () => void;
    __wickedStateWhenElement?: WickedStateElementContract;
    __wickedStateLoopItems?: WickedStateLoopItemContract[];
    __wickedStateLoopAnchor?: WickedStateElementContract;
    __wickedStateConfirm?: (action: Function, instead: Function) => any;
    __wickedStateIgnore?: boolean;
    __wickedStateIgnoreSelf?: boolean;
}
/**
 * The loop item contract.
 */
export interface WickedStateLoopItemContract {
    key: PropertyKey;
    value: any;
    el: WickedStateElementContract;
}
/**
 * The magic context contract.
 *
 * The cleanup function is called whenever the element that used the magic is removed from the DOM.
 */
export interface WickedStateMagicContextContract {
    state: WickedStateObjectContract;
    root: WickedStateElementContract;
    cleanup: (fn: Function) => void;
    effect: WickedStateEffectContract;
}
/**
 * The directive contract.
 */
export interface WickedStateDirectiveContract {
    name: string;
    priority: number;
    handler: WickedStateDirectiveHandlerContract;
}
/**
 * The directive binding contract.
 */
export interface WickedStateDirectiveBindingContract {
    name: string;
    type: string;
    value: string;
    priority: number;
    modifiers: Record<string, any>;
    handler: WickedStateDirectiveHandlerContract;
}
/**
 * This is the compiled context that is passed to the directive handler.
 */
export interface WickedStateDirectiveContextContract {
    bindings: WickedStateDirectiveBindingContract[];
    state: WickedStateObjectContract;
    node: WickedStateElementContract;
    root: WickedStateElementContract;
    cleanup: (fn: Function) => void;
    effect: WickedStateEffectContract;
    modifiers: Record<string, any>;
    type: string;
    value: string;
}
/**
 * The magic handler contract.
 *
 * The magic handler is called when the magic is used in an expression.
 */
export interface WickedStateMagicHandlerContract<T> {
    (magic: WickedStateMagicContextContract): T;
}
/**
 * The directive handler contract.
 *
 * The directive handler is called when the directive is found in the DOM.
 *
 * You can return a cleanup function to be called when the directive is removed from the DOM.
 */
export interface WickedStateDirectiveHandlerContract {
    (context: WickedStateDirectiveContextContract): void;
}
/**
 * The expression evaluator contract.
 *
 * The library ships with an expression evaluator for JavaScript that uses Function constructor, but you can create your own evaluator to support any environment.
 */
export interface WickedStateEvaluatorContract {
    (expr: string, state: object, locals?: object): any;
}
/**
 * The renderer contract.
 *
 * The library ships with a renderer for the DOM, but you can create your own renderer to support any environment.
 */
export interface WickedStateRendererContract {
    (root: any): Promise<void>;
}
/**
 * The reactivity contract.
 *
 * This is the contract that is used to create reactive effects and reactive objects.
 */
export interface WickedStateReactivityContract {
    effect: WickedStateEffectContract;
    reactive: WickedStateReactiveContract;
}
/**
 * A wicked state effect contract.
 */
export interface WickedStateEffectContract {
    (fn: Function): () => void;
}
/**
 * A wicked state reactive contract.
 */
export interface WickedStateReactiveContract {
    (target: Object): Object;
}
/**
 * Evaluate an expression in the context of the state and locals using the function constructor.
 *
 * @example
 * ```ts
 * import { functionEvaluator } from 'wickedstate';
 *
 * functionEvaluator('a + b', { a: 1 }, { b: 2 }); // 3
 * ```
 */
export const functionEvaluator: WickedStateEvaluatorContract;
/**
 * The expression evaluator used by WickedState.
 *
 * @example
 * ```ts
 * import { evaluator } from 'wickedstate';
 *
 * const result = evaluator('foo.bar', { foo: { bar: 'baz' } });
 *
 * console.log(result); // baz
 * ```
 */
export let evaluator: WickedStateEvaluatorContract;
/**
 * Switch the expression evaluator.
 *
 * @example
 * ```ts
 * import { setEvaluator } from 'wickedstate';
 *
 * setEvaluator((expr, state, locals) => {
 *  // Custom evaluator
 * });
 * ```
 */
export function setEvaluator(newEvaluator: WickedStateEvaluatorContract): WickedStateEvaluatorContract;
/**
 * Register a data provider.
 *
 * @example
 * ```ts
 * import { data } from 'wickedstate';
 *
 * data('counter', () => ({ count: 0 }));
 * ```
 */
export function data(name: string, callback: Function): void;
/**
 * Register a directive.
 *
 * The directive with the lowest priority will be executed first e.g `*state` has a priority of `0` to make sure other directives can access the state object when they are executed.
 *
 * So if you want to do something before the state directive is executed, you can set the priority of your directive to a negative number else set to 1 or higher.
 *
 * @example
 * ```ts
 * import { directive } from 'wickedstate';
 *
 * directive({
 *   name: 'logger',
 *   priority: -1,
 *   handler: ({ node }) => {
 *       console.log(node);
 *    },
 * });
 * ```
 */
export function directive(directive: WickedStateDirectiveContract): WickedStateDirectiveContract;
/**
 * DOM renderer.
 *
 * This function is responsible for applying directives to the DOM elements starting from `root`.
 */
export function domRenderer(root: any): Promise<void>;
/**
 * The renderer used to render the state.
 */
export let render: WickedStateRendererContract;
/**
 * Set the renderer to use.
 *
 * @example
 * ```ts
 * import { setRenderer } from 'wickedstate';
 *
 * setRenderer((root) => {
 *  // Custom rendering logic
 * });
 * ```
 */
export function setRenderer(renderer: WickedStateRendererContract): WickedStateRendererContract;
/**
 * Set the prefix to use.
 *
 * @example
 * ```ts
 * import { setPrefix } from 'wickedstate';
 *
 * setPrefix('data-');
 * ```
 */
export function setPrefix(newPrefix: string): string;
/**
 * Get the prefix used.
 *
 * @example
 * ```ts
 * import { prefix } from 'wickedstate';
 *
 * console.log(prefix()); // '*'
 *
 * console.log(prefix('cloak')); // '*cloak'
 * ```
 */
export function prefix(append?: string): string;
/**
 * Very basic reactivity engine.
 *
 * You can swap this with other engines like `@vue/reactivity`.
 */
export const defaultReactivity: WickedStateReactivityContract;
/**
 * The reactivity engine used by WickedState.
 */
export let reactivity: WickedStateReactivityContract;
/**
 * Switch the reactivity engine.
 *
 * @example
 * ```ts
 * import { setReactivity } from 'wickedstate';
 * import { effect, reactive } from '@vue/reactivity';
 *
 * setReactivity({
 *   effect,
 *   reactive,
 * });
 * ```
 */
export function setReactivity(newReactivity: WickedStateReactivityContract): WickedStateReactivityContract;
/**
 * Registers a new magic.
 *
 * @example
 * ```ts
 * import { magic } from 'wickedstate';
 *
 * magic('now', () => new Date());
 * ```
 */
export function magic<T>(name: string, fn: WickedStateMagicHandlerContract<T>): void;

//# sourceMappingURL=index.d.ts.map