Enhance element

HTML first base element class to help cut down on web component boilerplate.

Install

npm i @enhance/element

unpkg import enhance from 'https://unpkg.com/@enhance/element?module=true'

Codepen

Usage

<my-list heading="Todos"></my-list>

enhance('my-list', {
  api,
  attrs: [ 'heading' ],
  keys: [ 'todos' ],
  init(element) {
    console.log('My List: ', element)
  },
  render({ html, state }) {
    const { attrs={}, store={} } = state
    const { heading='' } = attrs
    const { todos=[{ title: 'You have not todos yet.' }] } = store
    const todoItems = todos
      .map(t => `<li>${t.title || ''}</li>`)
      .join('\n')

    return html`
    <h1>${heading}</h1>
    <ul>
      ${todoItems}
    </ul>
    <!-- debug -->
    <pre>
      ${JSON.stringify(state)}
    </pre>
    `
  },
  connected() {
    console.log('CONNECTED')
  },
  disconnected() {
    console.log('DISCONNECTED')
  }
})

api:Object

The api object is used in the Enhance state management flow. api object must expose a subscribe and unsubscribe methods that accept a listener function to be passed a state object when an update occurs.

keys:Array

The keys array contains strings corresponding to the keys on a state object. Your Enhance Element will only update when a specified key updates in the state object.

attrs:Array

The attrs array is where you declare what attributes you want your component to update

init:Function

The init function will be called once and is where you should run your setup code like adding event listeners, grabbing DOM references etc.

render:Function

The render function is a pure function that returns an HTML string

connected:Function

The connected function is called when your component is added to the page

disconnected:Function

The disconnected function is called when your component is removed to the page

shadow:Enum

The shadow property can be set to either open or closed and effects how the components shadow root is "encapsulated".

 enhance('my-shady',{
    attrs: [ 'message' ],
    shadow: 'open',
    render({ html, state }) {
      const { attrs={} } = state
      const { message='So shady' } = attrs
      return html`
      <p>
        ${message}
      </p>
      `
    }
  })

Considerations

This is a convenience function that simplifies the createion of a Web Component class and adds Morphdom for automatic DOM updates when registered attributes or store keys update. For more advanced use cases you will want to use the Enhance Custom Element base class or the Enhance Shadow Element base class