@hoge1e3/dom

Create HTML Element with shorthand expression.

API

tagGenerator creates TagGenerator

t=tagGenerator();

Call methods to the generated TagGenerator object in the following format.

t.tagName( attributes ,  subelements.... )
t.tagName( subelements.... )

tagName shoule be substituted to the tag name (ex t.div , t.button ). Any tag name can be accepted(uses proxy internally).

attributes is plain object. For the key that begins with 'on', function should be given as the value(automatically call addEventListener).

subelements shoule be either primitive values(for text node), or HTMLElement

returns HTMLElement

Example:

    t.div(
        {style:"color:blue;"},
        "hello",
        t.button({
            onclick(){
                alert(3);
            },
            style:"padding:10px;",
        },"go"))

returns HTMLElement represented in HTML:

    <div style="color:blue;">
        hello
        <button style="padding:10px">go</button>
    </div>

and click event is bound to the button.

type definitions

export function tagGenerator():TagGenerator;
type TagGenerator={
    [key:string]:TagFunction,
};
type Attribute=object;
type SubElement=Node|string|number|boolean|null|undefined;
type TagFunction=
    ((...args:SubElement[])=>HTMLElement)|
    ((attr:Attribute, ...args:SubElement[])=>HTMLElement);