test/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>kaboobie</title>
  <script type="module">
  import(
    /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
    '../esm/index.js' :
    'https://unpkg.com/kaboobie@latest?module'
  )
  .then(({Component, render, html, useState}) => {

    // each component receives its "props"
    const Counter = Component(({start}) => {
      const [count, setCount] = useState(start);
      return html`
      <button onclick=${() => setCount(count + 1)}>
        Count: ${count}
      </button>`;
    });

    render(document.body, html`
      <div>
        A bounce of counters.<hr>
        <${Counter} start=${0} />
        <${Counter} start=${1} />
      </div>
    `);
  });
  </script>
</head>
</html>