How to use hyperhtml - 10 common examples

// to perform an initial feature detection
global.document = document;
const hyperHTML = require('hyperhtml');

// most basic hyperHTML examples in node
function tick(render) {
  console.log(render`
    <div style="${{margin:">
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
    </div>
  `.innerHTML);
}

// start ticking
setInterval(tick, 1000, hyperHTML.bind(document.body));

get html() {
    return this._html$ || (this.html = bind(
      // in a way or another, bind to the right node
      // backward compatible, first two could probably go already
      this.shadowRoot || this._shadowRoot || sr.get(this) || this
    ));
  }

get html() {
    return this._html$ || (this.html = bind(
      // in a way or another, bind to the right node
      // backward compatible, first two could probably go already
      this.shadowRoot || this._shadowRoot || sr.get(this) || this
    ));
  }

export function hyperRender() {
    // workaround hyperhtml ts definition bug
    bind(this.getRenderRoot())(...this.view());
}
export class Component extends ComponentBase {

    fn: (scope) => hyperHTML(document.createDocumentFragment())`
      <div></div>
    `
  }, {

import {State} from 'js-framework-benchmark-utils';
import {bind} from 'hyperhtml';

import Row from './row.js';

const state = State(update);
const html = bind(document.getElementById('main'));

const click = ({target}) => {
  const a = target.closest('a');
  const {action} = a.dataset;
  state[action](+a.closest('tr').id);
};

update(state);

function update({data, selected, run, runLots, add, update, clear, swapRows}) {
  html`
  <div class="container">
    <div class="jumbotron">
      <div class="row">
        <div class="col-md-6">
          <h1>hyper(HTML) keyed</h1></div></div></div></div>

renderer() {
    let h = cache.get(this);
    if (!h) cache.set(this, (h = bind(this.renderRoot)));
    this.render(h);
  }
}

function html() {
  return wire(wired.model, 'html:' + wired.id).apply(null, arguments);
}
exports.html = html;

export function svg() {
  return wire(wired.model, 'svg:' + wired.id).apply(null, arguments);
};

function svg() {
  return wire(wired.model, 'svg:' + wired.id).apply(null, arguments);
}
exports.svg = svg;