Angular-like Signals

[fedeAlterio]

Hi there 👋

I’d like to share a small free open-source library I’ve been working on called SignalsDotnet.
It brings Angular-like reactive signals to the .NET ecosystem — and I believe it could be very useful for Avalonia developers.

In Angular, signals have become very popular because they hide much of the complexity of Rx while still maintaining full interoperability with observables.
They make reactive state simpler and easier to reason about.

I paste here a small example

public class LoginViewModel
{
    // Value set from outside.
    public Signal<bool> IsDeactivated { get; } = new(false);
    public LoginViewModel()
    {      
        var computedFactory = ComputedSignalFactory.Default
                                                   .DisconnectEverythingWhen(isDeactivated.Values)
                                                   .OnException(exception =>
                                                   {
                                                       /* log or do something with it */
                                                   });

        // Will be cancelled on deactivation, of if the username signal changes during the await
        IsUsernameValid = computedFactory.AsyncComputed(async cancellationToken => await IsUsernameValidAsync(Username.Value, cancellationToken),
                                                        false, 
                                                        ConcurrentChangeStrategy.CancelCurrent);

        
        // async computed signals have a (sync) signal that notifies us when the async computation is running
        CanLogin = computedFactory.Computed(() => !IsUsernameValid.IsComputing.Value
                                                  && IsUsernameValid.Value
                                                  && !string.IsNullOrWhiteSpace(Password.Value));

        computedFactory.Effect(UpdateApiCalls);

        // This signal will be recomputed both when the collection changes, and when endDate of the last element changes automatically!
        TotalApiCallsText = computedFactory.Computed(() =>
        {
            var lastCall = ApiCalls.Value.LastOrDefault();
            return $"Total api calls: {ApiCalls.Value.Count}. Last started at {lastCall?.StartedAt}, and ended at {lastCall?.EndedAt.Value}";
        })!;
    }

    public ViewModelActivator Activator { get; } = new();
    public ReactiveCommand<Unit, Unit> LoginCommand { get; }
    public Signal<string?> Username { get; } = new("");
    public Signal<string> Password { get; } = new("");
    public IAsyncReadOnlySignal<bool> IsUsernameValid { get; }
    public IReadOnlySignal<bool> CanLogin { get; }
    public IReadOnlySignal<string> TotalApiCallsText { get; }
    public IReadOnlySignal<ObservableCollection<ApiCall>> ApiCalls { get; } = new ObservableCollection<ApiCall>().ToCollectionSignal();

    async Task<bool> IsUsernameValidAsync(string? username, CancellationToken cancellationToken)
    {
        await Task.Delay(3000, cancellationToken);
        return username?.Length > 2;
    }
    void UpdateApiCalls()
    {
        var isComputingUsername = IsUsernameValid.IsComputing.Value;
        using var _ = Signal.UntrackedScope();

        if (isComputingUsername)
        {
            ApiCalls.Value.Add(new ApiCall(startedAt: DateTime.Now));
            return;
        }

        var call = ApiCalls.Value.LastOrDefault();
        if (call is { EndedAt.Value: null })
        {
            call.EndedAt.Value = DateTime.Now;
        }
    }
}

public class ApiCall(DateTime startedAt)
{
    public DateTime StartedAt => startedAt;
    public Signal<DateTime?> EndedAt { get; } = new();
}