An Application gzip 2.56 kB

The o function creates an observable which can hold any value you would like to make reactive in the view. Just keep in mind that the observable returns a function. By calling this function without an argument it acts as a getter, if an argument is passed it will set the value of the observable.

The first time the view is rendered Sinuous will detect any used observables causing the accompanying DOM operations to be stored. At a later point when a new value is set to an observable it will simply execute the previously stored DOM operation with the new value.

import { o, html } from 'sinuous';
import { map } from 'sinuous/map';

const TodoApp = () => {
let items = o([]);
let text = o('');

const view = html`
<div>
<h3>TODO</h3>
<${TodoList} items=${items} />
<form onsubmit=${handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onchange=${handleChange}
value=${text}
/>

<button>
Add #${() => items().length + 1}
</button>
</form>
</div>
`
;

function handleSubmit(e) {
e.preventDefault();
if (!text().length) {
return;
}
const newItem = {
text: text(),
id: Date.now()
};
items(items().concat(newItem));
text('');
}

function handleChange(e) {
text(e.target.value);
}

return view;
};

const TodoList = ({ items }) => {
return html`
<ul>
${map(items, (item) => html`<li id=${item.id}>${item.text}</li>`)}
</ul>
`
;
};

document.querySelector('.todos-example').append(TodoApp());