heresey makes good use of domtagger, hyperHTML, smartDiff and lighterhtml to provide React like feeling to Custom Elements.
Mail gaols for heresey :
declared elements are the instance you'd expect (no virtual, no facade)
declared elements can be of any kind (table, tr, select, option, ...)
any attribute change, or node lifecycle, can be tracked via VQ API (no componentDidMount and friends)
no redundant dom nodes, no ghost fragments, a clean as possible output
Get it:npm install heresey
Sample usage:
123456789101112131415161718192021222324252627
import{define,html,render}from'heresy';classMyButtonextendsHTMLButtonElement{// the only mandatory static fieldstaticgettagName(){return'button';}// (optional) intercepts some attribute (any value)setprops(props){this._props=props;}getprops(){returnthis._props;}// (optional) render once connectedconnectedCallback(){this.render();}// (optional) populate this button content// (kinda useless with void elements such img, input, ...)render(){// this.html or this.svg are provided automaticallythis.html`Click${this.props.name}!`;}}// define the custom element (class name mandatory too)define(MyButton);// populate some noderender(document.body,()=>html`<MyButtonprops=$/>`);
123456789101112131415161718192021222324
import{define,html,render}from'heresy';// a divdefine(classDivextendsHTMLDivElement{staticgettagName(){return'div';}})// a paragraphdefine(classPextendsHTMLParagraphElement{staticgettagName(){return'p';}})// a h1define(classH1extendsHTMLHeadingElement{staticgettagName(){return'h1';}})render(document.body,()=>html`<Div><H1>Hellothere</H1><P>Thisishowcustomelementslookviaheresy.</P><P>Isn'tthisawesome?</P></Div>`);