A Stateful Component gzip 1.43 kB

In addition to taking input data (accessed via props), a component can maintain internal state data (accessed via observables o). When a component’s state data changes, the rendered markup will be updated by re-invoking the stored DOM operations.

import { o, html } from 'sinuous';

const Timer = (props) => {
const seconds = o(0);

function tick() {
seconds(seconds() + 1);
}
setInterval(tick, 1000);

return html`
<div>Seconds: ${seconds}</div>
`
;
};

document.querySelector('.counter-example').append(
html`<${Timer}/>`
);