How to use the hyperhtml.bind function in hyperhtml

To help you get started, weโ€™ve selected a few hyperhtml examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github WebReflection / basicHTML / test / hyperhtml.js View on Github external
// 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));
github WebReflection / hyperHTML-Element / cjs / index.js View on Github external
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
    ));
  }
github WebReflection / hyperHTML-Element / esm / index.js View on Github external
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
    ));
  }
github prasannavl / icomponent / packages / icomponent-hyper / lib / index.js View on Github external
export function hyperRender() {
    // workaround hyperhtml ts definition bug
    bind(this.getRenderRoot())(...this.view());
}
export class Component extends ComponentBase {
github krausest / js-framework-benchmark / frameworks / keyed / hyperhtml / src / index.js View on Github external
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}) =&gt; {
  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>
github skatejs / skatejs / packages / element-hyperhtml / src / index.ts View on Github external
renderer() {
    let h = cache.get(this);
    if (!h) cache.set(this, (h = bind(this.renderRoot)));
    this.render(h);
  }
}

hyperhtml

A Fast & Light Virtual DOM Alternative

ISC
Latest version published 2 years ago

Package Health Score

56 / 100
Full package analysis