todo.mjs

import { query, _, ANY, paths } from './datalog.mjs';
import { input, formula, database, view } from './reactives.mjs';
import { $el, entities } from './el.mjs';

let todos = database(paths([
  {text: "do the thing", status: "ready"},
  {text: "do the other thing", status: "ready"},
  {text: "do that last thing", status: "done"}
]));

let showStatus = input(ANY.VALUE);

let visibleTodos = view({
  find: [_.e, _.a, _.v],
  use: [_.status],
  where: [
    [_.e, "status", _.status],
    [_.e, _.a, _.v]
  ]
})(todos, showStatus);

let todoList = $el.ul(
  $el.select({
    onchange: ({target: {value}}) => {
      showStatus.set(value === "any" ? ANY.VALUE : value);
    }
  },
    $el.option({value: "any"}, "Any"),
    $el.option({value: "ready"}, "Ready"),
    $el.option({value: "done"}, "Done")
  ),
  entities(visibleTodos, attrs => $el.li(
    formula((eid, text) => `${eid} - ${text}`)(attrs._eid, attrs.text)
  ))
);

document.addEventListener("DOMContentLoaded", () => {
  document.body.appendChild(todoList);
});