Add documentation for keys (list rendering)

import { r, t, w } from "@arrow-js/core";

type Todo = {
  label: string;
  isDone: boolean;
};

const App = () => {
  const data = r({
    todos: [] as Todo[],
  });

  w(() => console.log("todos changes", JSON.stringify(data.todos)));

  const addTodo = (label: string) => {
    console.log("add todo", label);
    const newTodo: Todo = { label, isDone: false };
    data.todos = [...data.todos, newTodo] as any;
  };

  const markDone = (todo: Todo) => () => {
    console.log("mark done", todo);
    data.todos = data.todos.map((t) =>
      t === todo ? { ...t, isDone: true } : t
    ) as any;
  };

  const sortedTodos = () => {
    return [...data.todos].sort((a, b) => {
      if (a.isDone === b.isDone) {
        return 0;
      }
      return a.isDone ? 1 : -1;
    });
  };

  return t`
        <h1>Todo List</h1>
        <input type="text" @keyup="${(e: KeyboardEvent) => {
          if (e.code === "Enter") {
            const target = e.target as HTMLInputElement;
            addTodo(target.value);
            target.value = "";
          }
        }}">
        <ul>
        ${() =>
          sortedTodos().map((todo) =>
            TodoItem({ todo, markDone: markDone(todo) })
          )}
        </ul>
        `;
};

const TodoItem = ({ todo, markDone }: { todo: Todo; markDone: () => void }) => {
  const style = () => {
    if (todo.isDone) {
      return `text-decoration: line-through`;
    }
    return "";
  };

  return t`
        <li style=${style}><button @click=${markDone}>Done</button>${todo.label}</li>
    `;
};

const appElement = document.getElementById("app");
App()(appElement);