Super minimal state w/ proxy

todo.js

window.subscribers = [];

const defaultState = {
  todos: []
};

const state = new Proxy(defaultState, {
  set(state, key, value) {
    const oldState = { ...state };
    
    state[key] = value;
    
    window.subscribers.forEach((callback) => callback(state, oldState));
    
    return state;
  }
});

function addTodo() {
  event.preventDefault();

  const todoForm = document.getElementById("todo-form");
  const formData = new FormData(todoForm);
  const todo = formData.get("todo-text");
  todoForm.reset();

  state.todos = [...state.todos, todo];
}

function renderTodos(currentState, oldState = null) {
  const todoList = document.getElementById("list");

  if (oldState && oldState.todos === currentState.todos) {
    return;
  }

  todoList.innerHTML = state.todos
    .map(
      (todo, i) => `<li>
      <input type="checkbox" id="a${i}" value="done">
      <label for="a${i}">${todo}</label>
    </li>`
    )
    .join("");
}

window.subscribers.push(renderTodos);