osagai-application.js

import { define } from "osagai";
import { on } from "osagai/events";
import { update } from "osagai/dom";

function Todos({ element, query }) {
  on("click", query(".btn"), () => {
    update(element, (items = []) => {
      items.push({
        name: `Item nr ${items.length + 1}`
      });

      return items;
    });
  });

  return (items = []) =>
    `<div>
      <button class="btn">Add item</button>
      ${`
      <ul class="list">
        ${items.map(item => `<li>${item.name}</li>`).join("")}
      </ul>`}
    </div>`;
}

define("todo-list", Todos);