Hotwire Discussion

Stimulus from scratch

Recently I started thinking, “What if I had to create Stimulus from scratch?” I mostly write Ruby, so the task seemed like a good learning opportunity. I was also curious about what tweaks I would make if API compatibility wasn’t a concern.

The result is Taproot, a humble little library, weighing in at 6 kB minified / 2.5 kB minified + gzipped. The README covers the key differences from Stimulus, but one feature that I like is the dataFor method:

class BottlesController extends Taproot.Controller {
  static defaults = { count: 99 }

  takeN({ currentTarget }) {
    this.data.count -= this.dataFor(currentTarget, { n: 1 }).n
  }
}

In the above example, if the data-bottles-n attribute is not present on the currentTarget element, this.dataFor(currentTarget, { n: 1 }).n will return 1. Otherwise, it will return the value of data-bottles-n parsed by JSON.parse.

Overall this was a great exercise that pushed me out of my comfort zone. I think the most frustration came from choosing and coordinating disparate pieces of the JavaScript ecosystem, rather than from JavaScript itself. It was a good reminder of how much care is put into developer UX in the Ruby / Rails world.

Thank you for reading! I welcome any feedback!

4 Likes