State flows where it needs to go like it has its own compass
// Define your events
type TodoEvent =
| { type: 'TODO_CREATED', id: string, title: string }
| { type: 'TODO_COMPLETED', id: string }
const { query, action, store } = scope<TodoEvent>()
const todoStore = store({
// call this to make todos
create: action(title => ({ type: 'TODO_CREATED', id: uuid(), title })),
complete: action(id => ({ type: 'TODO_COMPLETED', id })),
// this updates itself when you create todos
todos: query('TODO_CREATED').by.id
// shows only todos that haven't been completed yet
active: query('TODO_CREATED').by.id
.join(query('TODO_COMPLETED').by.id.optional())
.filter(([todo, completed]) => !completed)
.map(([todo]) => todo)
})