Simple scenario with asynchronous signal fails

[davdiv]

Hello,

I am interested in this library especially for its support of asynchronous signals.
However, I am a bit disappointed because the following basic scenario only works for the synchronous case (or maybe I am missing something ?):

import { reactive, signal, watcher } from "signalium";

const pause = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay));

const name = signal("world");
const hello = reactive(() => `hello ${name.value}`);
// const hello = reactive(async () => `hello ${name.value}`);
const w = watcher(hello);
w.addListener(async () => {
  console.log("Value: ", await w.value);
});
// correctly logs: "Value: hello world"

await pause(1000);

console.log("Changing value");
name.value = "developers";
// logs (in the synchronous case): "Value: hello developers"
// does nothing (in the asynchronous case)

await pause(1000);

This exact code (with the synchronous version) works as expected.
However, if I uncomment the asynchronous version of hello, I don't see the updated version "Value: hello developers".
I have configured the transform (cf my reproduction repository here).
Is there a bug in signalium ? Or how can I make this scenario work ?

Thank you in advance for your answer!

[pzuraq]

Hey @davdiv, thanks for the interest!

So, this may be a bit of a gap here because I do think that your example makes sense, logically. The issue is that watcher() can't directly wrap an async function, because when that function updates the ReactivePromise itself does NOT update. So, the watcher thinks that it has the same promise as before, and addListener never triggers.

Here's an example that does work, for reference:

import { reactive, signal, watcher } from 'signalium';

const pause = (delay) => new Promise((resolve) => setTimeout(resolve, delay));

const name = signal('world');
const hello = reactive(async () => `hello ${name.value}`);
const w = watcher(() => hello().value);
w.addListener(() => {
  console.log('Value: ', w.value);
});
// logs: "Value: hello world"
// logs: "Value: hello world" (second log, this seems wrong)

await pause(1000);

console.log('Changing value');
name.value = 'developers';
// logs: "Value: hello developers"

await pause(1000);

The initial double log is also an issue here, that happens because technically there is no delay in this async function but it shouldn't double log unless you access hello().isPending.

Anyways, I have a few branching thoughts here:

1. I think that watcher(async() => {}) should definitely work, we should fix that, OR it should throw an obvious error. But it feels intuitive to me and I think I did intend for it to work at one point.
2. I think we need better documentation around watchers in general, they're moreso a power user API so I haven't put a ton of effort into them, but we definitely should put more so people can more easily experiment. I'm working on a docs update currently so I think now is a good time
3. I do wonder what the use cases are for async watchers. Generally, watchers exist at the edge of the system, and that's typically a place where you convert from async to sync, e.g. by using promise.isReady and promise.value to show current async state.

May I ask what you're building with signals? I can help you figure out the best way to integrate them, happy to discuss details!

[davdiv]

@pzuraq Thank you very much for your detailed answer!

I did not think about using .value in the watcher, I am not used to ReactivePromise yet, it is great to be able to do that !

I am building a (currently very experimental) network manager (feel free to have a look at it if you are interested!). I opened this issue because I was investigating a problem with the new value of a signal that did not propagate correctly through reactive promises.

I tried to reproduce it in a simpler scenario and was surprised with the behavior of signalium in this very simple case, which looked like my original problem but was actually different. Anyway, it is great if, as you say, the async watchers case is fixed or raises a clear error, but I actually don't really need async watchers.

I have now found the cause of my original problem: it was a missing await in my code. With javascript, it usually does not matter to await a promise before returning its value (unless it is in a try...catch context), but I realized that that with the transform provided by signalium it makes a big difference. I have added the "@typescript-eslint/return-await": ["error", "always"] eslint rule in my project to avoid similar issues later. As you are working on the doc, this is probably something to recommend to users of signalium.

Anyway, thank you very much for your help! And thank you for this great signals library!