const TodoApp = () => {
  const [store, {
      addTodo, toggleAll, editTodo,
      removeTodo, clearCompleted, setVisibility
    }] = createTodosStore(),
    locationHandler = () =>
      setVisibility(location.hash.slice(2) || 'all'
    );

  window.addEventListener('hashchange', locationHandler);
  onCleanup(() =>
    window.removeEventListener('hashchange', locationHandler)
  );
  return <section class='todoapp'>
    <TodoHeader addTodo={addTodo} />
    <$ when={store.todos.length > 0}>
      <TodoList {...{store, toggleAll, editTodo, removeTodo}}/>
      <TodoFooter store={store} clearCompleted={clearCompleted} />
    </$>
  </section>
}

createRoot(() => document.body.insertBefore(
  <TodoApp />,
  document.body.firstChild
));