Heresy

heresey

React like Custom Elements.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {define, html, render} from 'heresy';

class MyButton extends HTMLButtonElement {

  // the only mandatory static field
  static get tagName() { return 'button'; }

  // (optional) intercepts some attribute (any value)
  set props(props) { this._props = props; }
  get props() { return this._props; }

  // (optional) render once connected
  connectedCallback() { this.render(); }

  // (optional) populate this button content
  //            (kinda useless with void elements such img, input, ...)
  render() {
    // this.html or this.svg are provided automatically
    this.html`Click ${this.props.name}!`;
  }
}

// define the custom element (class name mandatory too)
define(MyButton);

// populate some node
render(document.body, () => html`<MyButton props=$ />`);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {define, html, render} from 'heresy';

// a div
define(class Div extends HTMLDivElement {
  static get tagName() { return 'div'; }
})

// a paragraph
define(class P extends HTMLParagraphElement {
  static get tagName() { return 'p'; }
})

// a h1
define(class H1 extends HTMLHeadingElement {
  static get tagName() { return 'h1'; }
})

render(document.body, () => html`
  <Div>
    <H1>Hello there</H1>
    <P>This is how custom elements look via heresy.</P>
    <P>Isn't this awesome?</P>
  </Div>
`);

GIF FTW!

heresy.gif

Suggest a module

Comments