Creating a Svelte store from user events

A Svelte store stores data, but where does the data come from?

It could be from user interaction or user input, which calls an event handler that updates the store value by calling store.set().

What if we can encapsulate the user events and event handler logic into the store so that we do not need to call store.set() manually?

For example, we are going to have a Svelte store to calculate how many times the user clicks on the screen. Instead of manually adding an event listener on the document, if there’s a way to create a Svelte store and update it every time there’s a new click, how would that look? In short, how about having a custom Svelte store that can do all of that for us?

It would be great if we could reuse this Svelte store the next time we have a similar need, instead of having to manually set it up again.

So, let’s try to implement this click counter custom Svelte store.

Let's first scaffold...