ponies v0.0.0

ponies 🐎🐎🐎

My little library for creating Web Components that automatically update when their attributes change. The hard work is done by yo-yo which uses bel to render tagged template literals as DOM elements, and morphdom to do DOM Diffing. It's lightweight so you can use it to create libraries of components that other people can easily add to their pages.

Basic Example

const ponies = require('ponies');

ponies.register({
  render() {
    return ponies.render`
      <my-little-component>
        <h1>Hello ${this.getAttribute('you') || "World"}</h1>
        <input onkeyup=${ev => this.setAttribute('you', ev.target.value)}/>
      </my-little-component>
    `;
  }
});

Note that the root element must have a dash in it's tagName. Then use it like you would any other HTML element.

<my-little-component you="Jesse"></my-little-component>

Whenever the element's attributes change the render function gets called again and the element's DOM gets transformed to match the new result.

Lifecycle Callbacks

Custom elements often need to do setup when they are first created or attached to the DOM, clean up after they are detached, or custom tasks when their attributes are changed. Lifecycle callbacks are functions that you provide to handle these events. Ponies assigns these functions as methods of every instance of your component, so you can refer to the current element using this.

ponies.register({
  render() {
    return ponies.render`
      <log-component>
        <ul>
          ${this.logs.map(val => ponies.render`<li>${val}</li>`)}
        </ul>
      </log-component>
    `;
  }
  attached() {
    this.interval = window.setInterval(() => {
      this.logs.push(new Date());
      this.update();
    }, 1000);
  },
  detached() {
    window.clearInterval(this.interval);
  }
});

Styling

Ponies registers Custom Elements, but it doesn't use Shadow DOM. This means that the style of your components can be affected by the stylesheet of the page. You can style your components using style attributes which have high specificity, but these can still be overridden with !important.

Polyfilling

Native support for Custom Elements has been present in Chrome since 2014. Firefox, and WebKit support is in development. Edge support is in consideration. In the mean time it is advised to use a polyfill for document.registerElement.

Transpiling

ES2015 features including tagged template literals, classes, and Object.assign are used with aplomb. You know what to do.