What would be the best way of facilitating reactivity in classes from a library that is not for Svelte?

[webJose]

Hello, everyone. I have a potentially weird question. Hear me out.

I have created a library for web workers. The usual is there:

1. async/await pattern.
2. Bi-directional communication.
3. Queueing multpile commands.

But also a unique feature: Cancellation tokens that use Atomics to cancel work, so work can be cancelled without terminating the worker.

Cancellation is easy to react to: The promise gets rejected. However, while building the demo site (in Svelte, obviously), I realized it would be nice if the work item's status property be reactive in a way Svelte could pick it up. The work item is an instance of the class WorkItem, so $state won't pick up on its properties. There are 5 different status values that I would like to react to in the demo site.

The question: In a zero-dependency library like the one I developed, what would be the best way to at least prepare the road of Svelte picking up changes on WorkItem.status reactively? I suppose I'm willing to depend on a package, so long the package is UI framework-agnostic.

[brunnerh]

You could e.g. implement the Svelte readable store contract, which just needs a subscribe function to work. The interface is also compatible with Observable instances from rxjs.

Other than that, you could just expose an event callback function like onStatusChange or make the object inherit from EventTarget to use its methods for event dispatching/handling.

[webJose]

Thanks for dropping by. I like the readable contract suggestion for sure as it seems to be a simple and quick thing to do. I am a bit unsure about its second argument (invalidate). Could I trouble you for a quick example on this one? Is it for setting a new value?

[brunnerh]

It's a function that is called when the value of the store is changed, before all the subscribers are executed.
It exists to prevent invalid intermediate states particularly when using derived stores.
Regular users are unlikely to need this, the argument should default to a noop.

In Svelte it is used like this:

const run_queue = !subscriber_queue.length;
for (const subscriber of subscribers) {
  subscriber[1](); // `invalidate` calls
  subscriber_queue.push(subscriber, value);
}
if (run_queue) {
  for (let i = 0; i < subscriber_queue.length; i += 2) {
    subscriber_queue[i][0](subscriber_queue[i + 1]); // `run` calls
  }
  subscriber_queue.length = 0;
}

A bit more info on this in my answer here.

[webJose]

Thanks for the information. I believe that this intermediate function should be documented for completeness and for people that might experience edge cases where this could help. Especifically, a couple good examples to understand the dynamics is what is missing, I would say.