virtual-dom.ts

type Attribute<Msg>
    = VEvent<Msg>
    ;

type Decoder<Msg> = (event: Event) => Msg;

interface VEvent<Msg> {
    type: 'V_EVENT';
    key: string;
    value: {
        decoder: Decoder<Msg>;
    };
}

const VEvent = <Msg>(key: string, decoder: Decoder<Msg>): VEvent<Msg> => ({
    type: 'V_EVENT',
    key,
    value: {
        decoder
    }
});

const onClick = <Msg>(tagger: () => Msg): Attribute<Msg> =>
    VEvent('click', tagger);

type Html<Msg>
    = VNode<Msg>
    | VText
    ;

interface VNode<Msg> {
    type: 'V_NODE';
    tagName: string;
    // attrs: any,
    attrs: Array<Attribute<Msg>>;
    children: Array<Html<Msg>>
}

const VNode = <Msg>(
    tagName: string,
    attrs: Array<Attribute<Msg>>,
    children: Array<Html<Msg>>
): VNode<Msg> => ({
    type: 'V_NODE',
    tagName,
    attrs,
    children
});

interface VText {
    type: 'V_TEXT';
    text: string;
}

const VText = (text: string): VText => ({
    type: 'V_TEXT',
    text
});

const text: <Msg>(text: string) => Html<Msg> = VText;

const div = <Msg>(attrs: Array<Attribute<Msg>>, children: Array<Html<Msg>>): Html<Msg> =>
    VNode('div', attrs, children);

const button = <Msg>(attrs: Array<Attribute<Msg>>, children: Array<Html<Msg>>): Html<Msg> =>
    VNode('button', attrs, children);

type Foo
    = Increment
    | Decrement
    ;

interface Increment {
    type: 'INCREMENT';
}

const Increment = (): Increment => ({
    type: 'INCREMENT'
});

interface Decrement {
    type: 'DECREMENT';
}

const Decrement = (): Decrement => ({
    type: 'DECREMENT'
});

interface Reset {
    type: 'RESET';
}

const Reset = (): Reset => ({
    type: 'RESET'
});

const view = (model: number): Html<Foo> =>
    div([], [
        div([], [
            button([
                onClick(Decrement)
            ], [
                text('-')
            ])
        ]),
        div([], [
            text(model.toString())
        ]),
        div([], [
            button([
                onClick(Increment)
            ], [
                text('+')
            ])
        ])
    ]);