Sandwich Condiments

Go to original example.

Lessons learned:

  • This example used Object.freeze on the keycodes that it binds to, which is a good practice so that they can't be reassigned and cause strange errors. I added this to my own keyboard-utils.
  • I had initially reached for Svelte's bind:group but found that it accumulates the values of the checkboxes as an array, which leads to not knowing how to apply the values on change.
  • In order to guarantee that the updated values can be correlated back to the checkbox value, it made sense to pass through an object that can be manipulated to derrive the checked state as well as returning an object with the same keys but updated values on check.
    This moves the logic to monitor the relationship to the other checkboxes from the DOM and into the framework.