Add more types of new signals like LinkedSignal, Resource, ...

[vgallegob]

Hello, question and request:

Angular included more types of signals, is this a 1 on 1 port with that model?

Add more types of new signals like LinkedSignal, Resource, ...

Cheers

[fedeAlterio]

Hi. Its not exactly a 1:1 port.
Resources can be implemented in this library with AsyncComputed. C# has the concept of AsyncLocals fields, that allows to pass information about which signals are accessed and when between await calls
You can just do

computedFactory.AsyncComputed(async cancellationToken => await IsUsernameValidAsync(Username.Value, cancellationToken),
                                                        false, 
                                                        ConcurrentChangeStrategy.CancelCurrent);

It will just work, even if you access signals after the await (With angular Resources this is more difficult, probably you have to split in multiple resources or fallback using rx).
Can this work for you?

Also note that signals in angular are linked to componets lifecycle. But here they are not, that's the reason why computedFactory exists, so that you can choose what means activated and deactivated for you (and unhook every computed signals automatically)

LinkedSignal could be a good addition.
Thank you!

[vgallegob]

Interesting,

I'm not so sure it's exactly the same, perhaps i'm wrong.

From https://angular.dev/guide/signals/resource

Status | value() | Description
-- | -- | --
'idle' | undefined | The resource has no valid request and the loader has not run.
'error' | undefined | The loader has encountered an error.
'loading' | undefined | The loader is running as a result of the request value changing.
'reloading' | Previous value | The loader is running as a result calling of the resource's reload method.
'resolved' | Resolved value | The loader has completed.
'local' | Locally set value | The resource's value has been set locally via .set() or .update()

[Reloading](https://angular.dev/guide/signals/resource#reloading)
You can programmatically trigger a resource's loader by calling the reload method.

[Resource loaders](https://angular.dev/guide/signals/resource#resource-loaders)
The ResourceLoaderParams object contains three properties: params, previous, and abortSignal.

https://angular.dev/guide/signals/linked-signal
Yes LinkedSignal unloks many things, I actually created a reactive primitive in the past to acomplish that.

In my opinion angular created this constructs to facilitate App development for the developer, meaning I think they studied what are the common patterns in building reactive apps, and what kind of things people need for that. Beeing able to reload a resource, accesing the previous value, seeing the status of the resource are very hany primitives for frontend development

Cheers!

[fedeAlterio]

Yes the idea was indeed that. But the current implementation is a lot simpler that the angular one. Basically an AsyncComputed signal could be in 2 states: Running or not running. And the Current value is actually the last succesfully computed value
See here

I implemented it like this because I'm not sure the angular interface is "correct enough". For example

• Should the previous value be undefined (null in c#) if a new computation just started? This could create some flickering on the UI. Maybe one wants to keep the last value and maybe show a spinner or something.
• Is it okay to manually refresh or set the computation? Isn't this against reactive programming patterns? Similar to have a lot of subjects instead of let the reactive computation flow
• Exceptions could be a nice addition. I think this is common enough. But what about consistency? If we an Exception property, the value should become undefined (as angular implementation does), but that should again cause some flickering. What if I just want to notify the user without loosing the previous value?

Current implementation is simpler but has no limits => For exception handling you could just try-catch and set another signal with the error.
Also note that computedFactory is composable: So this is valid code:

var computedFactory = ComputedSignalFactory.Default .DisconnectEverythingWhen(isDeactivated.Values);
var computedWithExceptionHandling = computedFactory .OnException(exception =>
{
   /* log or do something with it */
});

computedWithExceptionHandling.AsyncComputed(async token => { /*  Any Exception thrown here will go in the handler above. And token will be canceled when isDeactivated signal notifies  */ });
// I can further compose it adding middlewares-like behaviors to the signal execution

What do you think?

[fedeAlterio]

About the loader. What is missing is an overload with the previous value. That is important.

• abortSignal => CancellationToken
• params => No needed because we can directly access signals inside the function. Like an async computed function indeed

[vgallegob]

Interesting too,

Yes I saw you have abortSignal and Params using direct access to Signals.

• CancelationToken is exactly abortSignar.

• Params VS DirectAccess is very similar indeed. I am not 100% sure but my intuition says there must be something usefull about having the params object. Menaing, they could also acces directly to signals, why would they bother with those params?

Is it okay to manually refresh or set the computation? Isn't this against reactive programming patterns? Similar to have a lot of subjects instead of let the reactive computation flow.

• Yes I gues so. But I think they are evolving the pattern, making it more accessible, less restrictive, more practical.

Should the previous value be undefined (null in c#) if a new computation just started? This could create some flickering on the UI. Maybe one wants to keep the last value and maybe show a spinner or something.

• I thing you IsComputing is a subset of their Status enum ('loading'). So if anything, theirs is more expressive?

I should look more into how do Angular signals work. They are pretty new and we're working with Blazor ATM.

Nice chat!