Discussion on: Comparing reactivity models - React vs Vue vs Svelte vs MobX vs Solid vs Redux

Good article! Nice to see the same thing implemented in a bunch of the popular frameworks.

I've been playing with Svelte a bit lately too, I think it's great. You mentioned the thing = thing weirdness, and I agree it's a bit weird to get used to, but you can also write things the "immutable" way to avoid it. I noticed your removeTodo function does it this way, so maybe you already knew about this, but for setTodoCompleted you could write it this way and avoid the todoList = todoList:

function setTodoCompleted(todo, value) {
  todoList = todoList.map(t => {
    if(t === todo) {
      todo.completed = value
    }
    return t;
  })
}

Or, also, since you have the whole todo there already, there's no need to find it first, and you could do this:

function setTodoCompleted(todo, value) {
  todo.completed = value;
  todoList = todoList;
}

I tried todo.completed = value by itself and was a bit surprised it didn't work, because it seems Svelte should be able to "know" that todo came from that todoList array when it parses the template. That might be too hard with static analysis though.

Someone else already mentioned the input value binding thing, and yeah, you can shorten the code a bit by declaring a let inputValue up top and then doing <input id="new-todo" bind:value={inputValue} />. Svelte will bind that variable, and then you can just use it as normal in the addTodo function, without having to query for the input element.