vm.ts

// counterデモをgoban式で実現

const Counter = {
  view: () => [
    m("button", { onclick: aco.send(vm.x + 1, "msg") }, `val: ${vm.x}`),
    m("button", { onclick: aco.send({}, "reset") }, "reset"),
    m(Todos)
  ]
} as m.Component;

const Todos = {
  view: () => vm.todos.map(todo => Todo(todo))
} as m.Component;

interface TodoAttr {
  todo: string;
}

const Todo = (name: string): m.Children => {
  return m("p", name);
};

class VM {
  x: number = 42;
  todos: string[] = [];
}

const vm = new VM();

const ctrl = async () => {
  resetter();
  pusher();
};

const resetter = async () => {
  for (;;) {
    await aco.recv("reset");
    vm.todos = [];
  }
};

const pusher = async () => {
  for (;;) {
    await aco.recv("msg");
    vm.todos.push("hello");
  }
};

ctrl();

m.mount(document.body, Counter);