import prefixer from './prefixer' ; export interface DomAttributes { id : String ; onchange : ( e : Event ) => any ; onclick : ( e : Event ) => any ; value : any ; selected : any ; disabled : any ; } export interface ElementWrapper { element : HTMLElement ; } type Appendable = string | HTMLElement | ElementWrapper ; const isElement = ( node ) => node . nodeType === Node . ELEMENT_NODE ; const isObj = ( val ) => typeof val === 'object' ; const isFunc = ( val ) => typeof val === 'function' ; const isStr = ( val ) => typeof val === 'string' ; const isElementWrapper = ( val ) : val is ElementWrapper => val ?. element && isElement ( val . element ) ; export const h = ( tagName , classNames , attrs , ... children ) => { const el = document . createElement ( tagName ) ; if ( classNames ) el . className = classNames . split ( '.' ) . filter ( txt => txt !== '' ) . map ( prefixer ) . join ( ' ' ) ; if ( attrs ) for ( const k in attrs ) { const v = attrs [ k ] ; if ( isFunc ( v ) ) el [ k ] = v ; else el . setAttribute ( k , v ) ; } if ( children ) { el . append ( ... children . map ( item => { return isElementWrapper ( item ) ? item . element : item ; } ) ) ; } return el ; } ; export const div = ( cls , ... children ) => { return h ( 'div' , cls , { } , ... children ) as HTMLDivElement ; } ; export const button = ( cls , attrs , label ) => { return h ( 'button' , cls , attrs , label ) as HTMLButtonElement ; } ; export const select = ( cls , attrs , ... optionElements ) => { return h ( 'select' , cls , attrs , ... optionElements ) as HTMLSelectElement ; } ; export const option = ( attrs , label ) => { return h ( 'option' , null , attrs , label ) as HTMLOptionElement ; } ;