@joshuafcole/fluorine/renderer.d.ts

A highly reactive, optionally compiled, and strongly typed view layer for TypeScript.

import { EventBinder } from "./catalyst";
export declare enum PropType {
    Property = 0,
    Attribute = 1,
    Event = 2,
    Lifecycle = 3
}
export interface FElement extends FElement.Basic, FElement.Content, FElement.Hooks, FElement.Lifecycle {
    [attr: string]: any;
}
export interface FSVGElement extends FElement.Basic, FElement.SVGPresentation, FElement.Hooks, FElement.Lifecycle {
    svg: true;
    [attr: string]: any;
}
export declare namespace FElement {
    type EventHandler = ReturnType<EventBinder["compile"]>;
    interface Hooks {
        click?: EventBinder | EventHandler;
        dblclick?: EventBinder | EventHandler;
        contextmenu?: EventBinder | EventHandler;
        mousedown?: EventBinder | EventHandler;
        mouseup?: EventBinder | EventHandler;
        mousemove?: EventBinder | EventHandler;
        mouseover?: EventBinder | EventHandler;
        mouseout?: EventBinder | EventHandler;
        mouseenter?: EventBinder | EventHandler;
        mouseleave?: EventBinder | EventHandler;
        wheel?: EventBinder | EventHandler;
        touchstart?: EventBinder | EventHandler;
        touchend?: EventBinder | EventHandler;
        touchcancel?: EventBinder | EventHandler;
        touchmove?: EventBinder | EventHandler;
        dragstart?: EventBinder | EventHandler;
        dragover?: EventBinder | EventHandler;
        drag?: EventBinder | EventHandler;
        dragend?: EventBinder | EventHandler;
        drop?: EventBinder | EventHandler;
        keyup?: EventBinder | EventHandler;
        keydown?: EventBinder | EventHandler;
        focus?: EventBinder | EventHandler;
        blur?: EventBinder | EventHandler;
        focusin?: EventBinder | EventHandler;
        focusout?: EventBinder | EventHandler;
        scroll?: EventBinder | EventHandler;
        change?: EventBinder | EventHandler;
        input?: EventBinder | EventHandler;
        cut?: EventBinder | EventHandler;
        copy?: EventBinder | EventHandler;
        paste?: EventBinder | EventHandler;
        transitionstart?: EventBinder | EventHandler;
        transitionrun?: EventBinder | EventHandler;
        transitioncancel?: EventBinder | EventHandler;
        transitionend?: EventBinder | EventHandler;
        animationstart?: EventBinder | EventHandler;
        animationiteration?: EventBinder | EventHandler;
        animationcancel?: EventBinder | EventHandler;
        animationend?: EventBinder | EventHandler;
    }
    interface Lifecycle {
        postrender?: (elem: FElement, node: Element) => void;
    }
    interface Basic {
        class?: string;
        id?: string;
        tabindex?: number;
        kind?: string;
        svg?: boolean;
        key?: string;
        ix?: number;
        dirty?: boolean;
        focused?: boolean;
        style?: string;
    }
    interface Content {
        selected?: boolean;
        contentEditable?: boolean;
        checked?: boolean;
        disabled?: boolean;
        draggable?: boolean;
        spellcheck?: boolean;
        allowfullscreen?: boolean;
        title?: string;
        placeholder?: string;
        href?: string;
        src?: string;
        download?: string;
        type?: string;
        min?: number;
        max?: number;
        step?: number;
        value?: any;
        for?: string;
        name?: string;
        target?: any;
    }
    type CursorValues = "auto" | "crosshair" | "default" | "pointer" | "move" | "e-resize" | "ne-resize" | "nw-resize" | "n-resize" | "se-resize" | "sw-resize" | "s-resize" | "w-resize" | "text" | "wait" | "help" | "inherit" | string;
    type DisplayValues = "inline" | "block" | "list-item" | "run-in" | "compact" | "marker" | "table" | "inline-table" | "table-row-group" | "table-header-group" | "table-footer-group" | "table-row" | "table-column-group" | "table-column" | "table-cell" | "table-caption" | "none" | "inherit" | "flex" | "grid";
    type SVGDrawRule = "nonzero" | "evenodd";
    type SVGPointerEvents = "bounding-box" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "none";
    interface SVGPresentation {
        "clip-path"?: string;
        "clip-rule"?: SVGDrawRule | "inherit";
        color?: string;
        "color-interpolation"?: "auto" | "sRGB" | "linearRGB" | "inherit";
        "color-rendering"?: "auto" | "optimizeSpeed" | "optimizeQuality" | "inherit";
        cursor?: CursorValues;
        display?: DisplayValues;
        fill?: string;
        "fill-opacity"?: number | string;
        "fill-rule"?: SVGDrawRule;
        filter?: string;
        mask?: string;
        opacity?: number | string;
        "pointer-events"?: SVGPointerEvents;
        "shape-rendering"?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision" | "inherit";
        stroke?: string;
        "stroke-dasharray"?: string;
        "stroke-dashoffset"?: number | string;
        "stroke-linecap"?: "butt" | "round" | "square";
        "stroke-linejoin"?: "arcs" | "bevel" | "miter" | "miter-clip" | "round";
        "stroke-miterlimit"?: number | string;
        "stroke-opacity"?: number | string;
        "stroke-width"?: number | string;
        transform?: string;
        "vector-effect"?: "default" | "non-scaling-stroke" | "inherit" | string;
        visibility?: "visible" | "hidden" | "collapse" | "inherit";
    }
}
export declare type FChild = FElem | string | undefined;
export interface FElem extends FElement {
    _id: string;
    kind: string;
    tagname?: string;
    parent?: string;
    ix?: number;
    children?: (FChild | FChild[])[];
    [attr: string]: any;
}
export interface FNode extends Element, HTMLOrSVGElement {
    _id: string;
}
export declare const EMPTY_ELEM: Readonly<FElem>;
export declare class Renderer {
    prop_map: {
        [prop: string]: PropType;
    };
    differs: {
        [kind: string]: (cur: FElem, old: FElem | undefined) => boolean;
    };
    updaters: {
        [kind: string]: (cur: FElem, old: FElem | undefined, node: Element, lib: Renderer) => void;
    };
    container: FNode;
    node_cache: {
        [id: string]: FNode;
    };
    prev_tree: {
        [id: string]: FElem;
    };
    tree: {
        [id: string]: FElem;
    };
    postrenders: string[];
    to_focus?: string;
    render_roots: () => FElement[];
    debug: {
        tree: boolean;
        perf: boolean;
        events: boolean;
    };
    queued: boolean;
    constructor();
    handle_event: (event: Event) => void;
    reset(): void;
    prepare(root: FElement): {
        [id: string]: FElem;
    };
    prepare_child(parent_id: string, child: FElement, child_ix: number): FElem;
    domify(): void;
    _move_elem(id: string, cur: FElem, node: Element): void;
    postdomify(): void;
    redraw(): void;
    force_draw: () => void;
    render(elems: FElement[]): void;
    static_diff(cur: FElem, old: FElem): boolean;
    static_update(this: never, cur: FElem, old: FElem, node: Element): void;
    text_diff(cur: FElem, old: FElem): boolean;
    text_update(this: never, cur: FElem, old: FElem, node: Element): void;
    dynamic_diff(cur: FElem, old: FElem): boolean;
    dynamic_update(this: never, cur: FElem, old: FElem, node: Element, lib: this): void;
    specialize(kind: string, properties: string[]): void;
}