hypersimple

The easiest way to use hyperHTML 🦄

• hooks like simplicity implemented through the model
• component implemented as callbacks
• an entire model/props driven development

Social Media Photo by Juliana Malta on Unsplash

Example

Live on Code Pen.

import {comp, html, render} from 'hypersimple';

// components
const Button = comp(model => html`
  <button onclick=${model.onclick}>
    ${model.text}
  </button>
`);

// main App: just like any component
const App = comp(model => html`
  Lorem ipsum: ${model.count}
  <br>
  ${Button(model.button)}
`);

// model: it will be mutated to trigger updates on changes
const model = {
  count: 0,
  button: {
    text: 'increment',
    onclick() {
      // will update the view right away
      model.count += 1;
    }
  }
};

// render
render(document.body, () => App(model));

API in a nutshell

• comp(fn) returns a component based on some props or model object. The fn must return the result of html or svg
• html and svg are a template literal tag that accept everything hyperHTML can produce
• render(where, what) will populate the content of a generic node with whatever a component returns
• update(model[, {...changes}]) to update all components based on the same model and, eventually, batch all updates at once through changes
• define(...) to enrich hyperHTML potentials as described in the documentation

The model will be modified to reflect any change of any of its properties in the UI, and every method will be automatically bound to the related context.

A model can be used with multiple components without needing to nest a sub model/object per each component related to the same model.

If you use immutable structures, you'll trash the whole layout each time so ... to keep it simple, as the project suggests, but also to keep it memory safe, just pass mutable models and update those directly instead of duplicating references.

The whole idea is indeed to abstract away everything that's more complicated than setting, or updating, a generic property.