hyperhtml-comp v0.1.3

hyperhtml-comp

This script provides connected and disconnected callback capabilities for hyperHTML components.

You can include it either as module or as external script.

<script src="https://unpkg.com/hyperhtml-comp@latest/min.js"></script>

Please note this helper does not depend on hyperHTML so you can add it at runtime once or in any part of your page.

Example

import {Component} from 'hyperhtml';

class Clock extends Component {

  update() {
    this.time = (new Date).toLocaleTimeString();
    this.render();
  }

  // equivalent of Custom Elements connectedCallback
  onconnected() {
    console.log('start time');
    this.update();
    this.timer = setInterval(() => this.update(), 1000);
  }

  // equivalent of Custom Elements disconnectedCallback
  ondisconnected() {
    console.log('end time');
    clearInterval(this.timer);
  }

  render() { return this.html`
    <p
      onconnected=${this}
      ondisconnected=${this}
    >
      ${this.time}
    </p>`;
  }
}

hyperHTML(document.body)`${new Clock}`;

Compatibility

IE9+ (once transpiled) and every other Mobile / Desktop browser.

ES2015 compatible browsers can test the live example, while every old/new browser can test raw functionality here.