Choose your own reactive library

Sinuous can work with any observable library that provides a subscribe, root, sample and cleanup API method.

Example with Sinuous Observable (Codesandbox)

// 1.98 kB gzip (with babel-plugin-htm)
import { o, h } from 'sinuous';

const randomColor = () => '#' + ((Math.random() * (1 << 24)) | 0).toString(16);

const count = o(0);
const style = o({});
const onclick = o(clicked);

function clicked() {
  onclick(false);
  console.log('removed click handler');
}

// Closures are only needed for multiple observables.
const view = () => {
  return html`
    <h1 style=${style}>
      Sinuous <sup>${count}</sup>
      <div>${() => count() + count()}</div>
      <button onclick="${onclick}">Click</button>
    </h1>
  `;
};

document.querySelector('.sinuous').append(view());
setInterval(() => style({ color: randomColor() }) && count(count() + 1), 1000);

Example with S.js (Codesandbox)

// 3.87 kB gzip
import S from "s-js";
import { api, html } from "sinuous";

api.subscribe = S;
const randomColor = () => "#" + ((Math.random() * (1 << 24)) | 0).toString(16);

const count = S.data(0);
const style = S.data("");

const view = () => {
  return html`
    <h1 style=${() => style()}>Sinuous <sup>${() => count()}</sup></h1>
  `;
};

S.root(() => document.querySelector(".sinuous").append(view()));
setInterval(() => style({ color: randomColor() }) && count(count() + 1), 1000);

Example with hyperactiv (Codesandbox)

import { api, html } from "sinuous";
import hyperactiv from "hyperactiv";
const { observe, computed } = hyperactiv;

api.subscribe = computed;
const randomColor = () => "#" + ((Math.random() * (1 << 24)) | 0).toString(16);

const s = observe({
  count: 0,
  style: ""
});

const view = () => {
  return html`
    <h1 style=${() => s.style}>Sinuous <sup>${() => s.count}</sup></h1>
  `;
};

document.querySelector(".sinuous").append(view());
setInterval(() => (s.style = { color: randomColor() }) && s.count++, 1000);