hyperapp-customelements

hyperapp-customelements is a tiny (3KB) Web Components Custom Elements library based on hyperapp.

Define Custom Elements that:

• work in all evergreen browsers and IE10.
• are based on hyperapp so you get
  • a beautifully simple API
  • a functional paradigm
  • immutable state data
  • Virtual DOM updates
• provide a solid migration path to Custom Elements V1

See it in action here

constdefine=require('hyperapp-customelements')constMyElement=define({// Requiredname: 'my-element',view(){// Any `h()` returning function including JSX or a transformed `hyperviews` template},// Optionalstate: {// Initial hyperapp state},actions: {// Hyperapp actions},constructor(){// Wired actions are now available as `this.actions`},// Attributes to observe.// Each item in the array must be a string or an object.// Use an object to provide a conversion function.// The function is used to convert the value from a string when reflecting to state// E.g ['title', { max: Number }, { show: Boolean }, { custom: (value) => {...}}, 'another']observedAttributes: Array,attributeChangedCallback(name,oldValue,newValue){// Invoked when an observed attribute changes.// Attribute changes are reflected to state by default.// It's therefore not always necessary to provide this function.// Set `mapAttrsToState` to `false` to update state manually.},connectedCallback(){// Invoked when the element is inserted into the document},disconnectedCallback(){// Invoked when the element is removed from the document},//...any other properties/methods are added to the element prototype})

Then use declaratively

<my-element></my-element>

or programmatically

constmyElement=newMyElement()document.body.appendChild(myElement)

Example

constdefine=require('hyperapp-customelements')define({name: 'x-counter',state: {counter: 0},actions: {down: value=>state=>({count: state.count-value}),up: value=>state=>({count: state.count+value})},view: (state,actions)=>(<div><h1>{state.count}</h1><buttononclick={()=>actions.down(1)}disabled={state.count<=0}>ー</button><buttononclick={()=>actions.up(1)}disabled={state.count>=state.max}>＋</button></div>),observedAttributes: [{max: Number}]})

<x-countermax="10"></x-counter>

Notes

You may notice that the API looks like Custom Elements V1, however the decision was taken to initially target Custom Elements V0 but with a V1 flavour so, when V1 is widely supported, the upgrade will be simple. See this article for more information. Huge thanks to Andrea Giammarchi for all his work in this area.