examples/todo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        margin: 4rem;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      h1 {
        font-size: 4rem;
        font-weight: 900;
        letter-spacing: -0.03ch;
        margin-top: 0;
        margin-bottom: 1rem;
      }
      main {
        display: grid;
        grid-row-gap: 0.25rem;
      }
      input {
        appearance: none;
      }
      input[type="text"] {
        border: solid #dde 2px;
        border-radius: 0.5rem;
        font-size: 1rem;
        padding: 0.25rem;
        margin-right: 0.25rem;
      }
      input[type="checkbox"] {
        background: #dde;
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
      }
      input[type="checkbox"]:checked {
        background: rgba(31, 178, 83);
      }
      button {
        border-radius: 0.5rem;
        border: solid #aab 2px;
        padding: 0.25rem 0.5rem;
        background: #dde;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import { patch } from "../index.js";
      import S from "https://cdn.skypack.dev/s-js";
      import SArray from "https://cdn.skypack.dev/s-array";

      S.root(() => {
        const todos = SArray([]);
        const inputText = S.data("");
        const addTodo = () => {
          todos.push({ title: S.data(inputText()), done: S.data(false) });
          inputText("");
        };

        const Main = {
          tag: "main",
          children: [
            { tag: "h1", children: "Todo List" },
            {
              children: [
                {
                  tag: "input",
                  type: "text",
                  onInput: (event) => void inputText(event.target.value),
                  value: inputText,
                },
                { tag: "button", onClick: addTodo, children: "Add" },
              ],
            },
            todos.map((todo) => {
              return {
                children: [
                  {
                    tag: "input",
                    type: "checkbox",
                    onInput: (event) => void todo.done(!todo.done()),
                    checked: todo.done,
                  },
                  {
                    tag: "input",
                    type: "text",
                    onInput: (event) => void todo.title(event.target.value),
                    value: todo.title,
                  },
                  {
                    tag: "button",
                    onClick: () => todos.remove(todo),
                    children: "Remove",
                  },
                ],
              };
            }),
          ],
        };

        patch(document.body, Main);
      });
    </script>
  </body>
</html>