proto

gistfile1.txt

type Todo {
  completed : bool
  text : string
}

state Todos { number: Todo } {
  completed < filter('completed')
  uncompleted < intersect(completed)

  add(data) {
    @set(data.id, data)
  }

  clearCompleted() {
    @filter!('completed')
  }

  toggleAll(val) {
    @map!(@.completed == val)
  }

  destroy(id) {
    @delete!(id)
  }
}

view Todos(todos : Todos) {
  <div.todomvc-wrapper style: { visibility: 'hidden' }>
    <link rel: 'stylesheet' href: '/mercury/examples/todomvc/style.css'>
    <Header>
    <div#todoapp.todoapp>
      <h3>Completed</h3>
      {todos.completed.map(todo =>
        <TodoItem todo={todo} />
      }
    </div>
    <Footer>
  </div>
}

view TodoItem(todo : Todo) {
  <div.todo>
    {todo.text}
    <input.completed
      type: 'checkbox'
      onChange: todo.toggle('completed')
    />
  </div>
}

view Header(todos : Todos) {
  <header#header.header>
    <h1>Todos</h1>
    <input#new-todo
      onSubmit: todos.add
      placeholder: 'What needs to be done?',
      autofocus: true
    />
  </header>
}

view Footer(todos : Todos) {
  <footer#footer>
    <div#todo-count>
      <strong>{todos.length}</strong>
      {pluralize('item', todos)}
    </div>
  </footer>
}

styles {
  #header {
    background: xxx
  }

  .todo {
    border: 1px solid #fff
  }
}