redom-jsx/index.d.ts

Tiny turboboosted JavaScript library for creating user interfaces. 100 % test coverage!

// Type definitions for redom 3.12
// Project: https://github.com/redom/redom/, https://redom.js.org
// Definitions by: Rauli Laine <https://github.com/RauliL>
//                 Felix Nehrke <https://github.com/nemoinho>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.2

export type RedomLifecycle = 'onmount' | 'onunmount' | 'onremount';
export type RedomElement = Node | RedomComponent;
export type RedomQuery = string | RedomElement;
export type RedomMiddleware = (el: HTMLElement | SVGElement) => void;
export type RedomQueryArgumentValue = RedomElement | string | number | { [key: string]: any } | RedomMiddleware;
export type RedomQueryArgument = RedomQueryArgumentValue | RedomQueryArgumentValue[];
export type RedomElQuery = string | Node | RedomComponentCreator;

export type RedomProps<T extends Record<string, any>> = {
    this?: string;
} & T;

export interface RedomEl extends HTMLElement, RedomComponent {
    __redom_mounted: boolean;
    __redom_lifecycle: Record<RedomLifecycle, number>;
    __redom_view: Record<string, any>;
}

export interface RedomComponent {
    el: RedomEl;

    update?(item: any, index?: number, data?: any, context?: any): void;

    onmount?(): void;

    onremount?(): void;

    onunmount?(): void;
}

export interface RedomComponentClass {
    new (): RedomComponent;
}

export type RedomComponentConstructor = RedomComponentClass;
export type RedomComponentFactoryFunction = () => RedomComponent
export type RedomComponentCreator = RedomComponentConstructor | RedomComponentFactoryFunction

export class ListPool {
    constructor(View: RedomComponentConstructor, key?: string, initData?: any);

    update(data: any[], context?: any): void;
}

export class List implements RedomComponent {
    el: RedomEl;

    constructor(parent: RedomQuery, View: RedomComponentCreator, key?: string, initData?: any);

    update(data: any[], context?: any): void;

    onmount?(): void;

    onremount?(): void;

    onunmount?(): void;

    static extend(parent: RedomQuery, View: RedomComponentConstructor, key?: string, initData?: any): RedomComponentConstructor;
}

export class Place implements RedomComponent {
    el: RedomEl;

    constructor(View: RedomComponentConstructor, initData?: any);

    update(visible: boolean, data?: any): void;
}

export class Router implements RedomComponent {
    el: RedomEl;

    constructor(parent: RedomQuery, Views: RouterDictionary, initData?: any);

    update(route: string, data?: any): void;
}

export interface RouterDictionary {
    [key: string]: RedomComponentConstructor;
}

type HTMLElementOfStringLiteral<Q extends string> =
    Q extends 'a' ? HTMLAnchorElement:
    Q extends 'area' ? HTMLAreaElement:
    Q extends 'audio' ? HTMLAudioElement:
    Q extends 'base' ? HTMLBaseElement:
    Q extends 'body' ? HTMLBodyElement:
    Q extends 'br' ? HTMLBRElement:
    Q extends 'button' ? HTMLButtonElement:
    Q extends 'canvas' ? HTMLCanvasElement:
    Q extends 'data' ? HTMLDataElement:
    Q extends 'datalist' ? HTMLDataListElement:
    Q extends 'details' ? HTMLDetailsElement:
    Q extends 'div' ? HTMLDivElement:
    Q extends 'dl' ? HTMLDListElement:
    Q extends 'embed' ? HTMLEmbedElement:
    Q extends 'fieldset' ? HTMLFieldSetElement:
    Q extends 'form' ? HTMLFormElement:
    Q extends 'hr' ? HTMLHRElement:
    Q extends 'head' ? HTMLHeadElement:
    Q extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' ? HTMLHeadingElement:
    Q extends 'html' ? HTMLHtmlElement:
    Q extends 'iframe' ? HTMLIFrameElement:
    Q extends 'img' ? HTMLImageElement:
    Q extends 'input' ? HTMLInputElement:
    Q extends 'label' ? HTMLLabelElement:
    Q extends 'legend' ? HTMLLegendElement:
    Q extends 'li' ? HTMLLIElement:
    Q extends 'link' ? HTMLLinkElement:
    Q extends 'map' ? HTMLMapElement:
    Q extends 'meta' ? HTMLMetaElement:
    Q extends 'meter' ? HTMLMeterElement:
    Q extends 'del' | 'ins' ? HTMLModElement:
    Q extends 'object' ? HTMLObjectElement:
    Q extends 'ol' ? HTMLOListElement:
    Q extends 'optgroup' ? HTMLOptGroupElement:
    Q extends 'option' ? HTMLOptionElement:
    Q extends 'output' ? HTMLOutputElement:
    Q extends 'p' ? HTMLParagraphElement:
    Q extends 'param' ? HTMLParamElement:
    Q extends 'pre' ? HTMLPreElement:
    Q extends 'progress' ? HTMLProgressElement:
    Q extends 'blockquote' | 'q' ? HTMLQuoteElement:
    Q extends 'script' ? HTMLScriptElement:
    Q extends 'select' ? HTMLSelectElement:
    Q extends 'slot' ? HTMLSlotElement:
    Q extends 'source' ? HTMLSourceElement:
    Q extends 'span' ? HTMLSpanElement:
    Q extends 'style' ? HTMLStyleElement:
    Q extends 'caption' ? HTMLTableCaptionElement:
    Q extends 'th' | 'td' ? HTMLTableCellElement:
    Q extends 'col' | 'colgroup' ? HTMLTableColElement:
    Q extends 'table' ? HTMLTableElement:
    Q extends 'tr' ? HTMLTableRowElement:
    Q extends 'thead' | 'tbody' | 'tfoot' ? HTMLTableSectionElement:
    Q extends 'template' ? HTMLTemplateElement:
    Q extends 'textarea' ? HTMLTextAreaElement:
    Q extends 'time' ? HTMLTimeElement:
    Q extends 'title' ? HTMLTitleElement:
    Q extends 'track' ? HTMLTrackElement:
    Q extends 'ul' ? HTMLUListElement:
    Q extends 'video' ? HTMLVideoElement:
    Q extends 'svg' ? SVGElement:
    HTMLElement

type RedomElementOfElQuery<Q extends RedomElQuery> =
    Q extends Node ? Q:
    Q extends RedomComponentClass ? InstanceType<Q>:
    Q extends RedomComponentFactoryFunction ? ReturnType<Q>:
    Q extends string ? HTMLElementOfStringLiteral<Q>:
    never

export function html<Q extends RedomElQuery>(query: Q, ...args: RedomQueryArgument[]): RedomElementOfElQuery<Q>;
// export function h<Q extends RedomElQuery>(query: Q, ...args: RedomQueryArgument[]): RedomElementOfElQuery<Q>;
export function el<Q extends RedomElQuery>(query: Q, ...args: RedomQueryArgument[]): RedomElementOfElQuery<Q>;

export function listPool(View: RedomComponentConstructor, key?: string, initData?: any): ListPool;
export function list(parent: RedomQuery, View: RedomComponentConstructor, key?: string, initData?: any): List;

export function mount(parent: RedomElement, child: RedomElement, before?: RedomElement, replace?: boolean): RedomElement;
export function unmount(parent: RedomElement, child: RedomElement): RedomElement;

export function place(View: RedomComponentConstructor, initData?: any): Place;

export function router(parent: RedomQuery, Views: RouterDictionary, initData?: any): Router;

export function setAttr(view: RedomElement, arg1: string | object, arg2?: string): void;

export function setStyle(view: RedomElement, arg1: string | object, arg2?: string): void;

export function setChildren(parent: RedomElement, children: RedomElement[]): void;

export function setData(view: RedomElement, arg1: string | object, arg2?: string): void;

export function svg(query: RedomQuery, ...args: RedomQueryArgument[]): SVGElement;
export function s(query: RedomQuery, ...args: RedomQueryArgument[]): SVGElement;

// export function text(str: string): Text;

export namespace list {
    function extend(parent: RedomQuery, View: RedomComponentConstructor, key?: string, initData?: any): RedomComponentConstructor;
}

export namespace svg {
    function extend(query: RedomQuery): RedomComponentConstructor;
}

// export function Fragment(): JSX.Element;

// JSX

export declare global {
    export declare namespace JSX {
        export type Element = HTMLElement;
        export interface IntrinsicElements {
            [tag: string]: BaseProps;
        }
    }
}

interface BaseProps extends Partial<ElementProps> {
    [property: string]: any;
    style?: Partial<CSSStyleDeclaration>;
}

type ElementWithoutReadonlyProps<T = HTMLElement> = Pick<T, WritableKeys<T>>;
type ElementProps = Omit<
    ElementWithoutReadonlyProps,
    FunctionPropertyNames<ElementWithoutReadonlyProps>
>;

type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends <
    T
    >() => T extends Y ? 1 : 2
    ? A
    : B;

type WritableKeys<T> = {
    [P in keyof T]-?: IfEquals<
        { [Q in P]: T[P] },
        { -readonly [Q in P]: T[P] },
        P
    >;
}[keyof T];

type FunctionPropertyNames<T> = {
    [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];