IL-instrumentation-based observables for C#

The idea is to implement something like MobX for .NET and to mirror its API when it's possible and makes sense. Library is originally intended to be used with Blazor, but isn't limited to that, so Blazor-specific bits live in a separate package.

For now library supports:

• observable properties
• ObservableList
• Autorun
• When
• RunInAction
• "@observer" Blazor components (see usage with blazor)

Missing features (aka TODO):

• computed properties
• reaction
• @action decorator

Usage

Installation

See also Fody usage.

NuGet installation

Install the NObservable NuGet package

dotnet add package NObservable

Add to FodyWeavers.xml

Add <NObservable/> to FodyWeavers.xml

<?xml version="1.0" encoding="utf-8" ?>
<Weavers>
  <NObservable/>
</Weavers>

API

[Observable] attribute

[Observable] instructs to instrument either one property or entire class. Property access will be tracked by NObservable.

Works like @observable decorator from MobX but can be also applied to entire class

[Observable]
class Foo
{
    public int Prop1 { get; set; }
    public int Prop2 { get; set; }
}

class Bar
{
    [Observable]
    public int Foo { get; set; }
    public int NotTracked{ get; set; }
}

Autorun

Works like autorun from MobX. It runs provided callback once and records all read property access to observable objects. If any of observed properties changes, callback will be run again and new property access list will be recorded

var o = new Foo{Prop1 = 1, Prop2 = 1};
Observe.Autorun(() => {
     Console.WriteLine($"Prop1: {o.Prop1}");
     if(o.Prop1 == 3)
        Console.WriteLine($"Prop1: {o.Prop1} Prop2: {o.Prop2}");
     else
        Console.WriteLine($"Prop1: {o.Prop1});    
});

o.Prop1 = 2;
o.Prop2 = 2;

o.Prop1 = 3;
o.Prop2 = 3;

Console output:

Prop1: 1
Prop1: 2
Prop1: 3, Prop2: 2
Prop1: 3, Prop2: 3

When

Works like when from MobX. Either returns a task that completes when observed condition is met or runs a provided callback:

await Observe.When(() => o.Prop1 == 5);

Observe.When(() => o.Prop2 == 5, () => Console.WriteLine("callback"));

RunInAction

Works like runInAction from MobX. Groups multiple property updates so change reactions won't be triggered on each property set call.

Proper method instrumentation (@action decorator alternative) isn't implemented yet, but unlike MobX it would be possible to make it properly work with async functions.

var o = new Foo{Prop1 = 1};
Observe.Autorun(() => Console.WriteLine(o.Prop1));
Observe.RunInAction(() => {
    o.Prop1++;
    o.Prop1++;
    o.Prop1 = 5;
    
});

Console output:

1
5

Usage with Blazor

Install the NObservable.Blazor NuGet package and add NObservable to FodyWeavers

dotnet add package NObservable

Add UseNObservable to your Startup.cs:

public void Configure(IBlazorApplicationBuilder app)
{
    app.UseNObservable(); // <---------------
    app.AddComponent<App>("app");
}

Add @using NObservable.Blazor to _ViewImports.cshtml.

Add @implements IObserverComponent at the top of your blazor component

Now your component should update if any observable properties used during the previous render are changed. Note, that NObservable adds its own ShouldRender implementation if your component doesn't have one already, so automatic update after input events won't happen. To automatically update on local property changes decorate your local properties with [Observable]

Some kind of example app

AppModel.cs:

[Observable]
public class AppModel
{
    public int Counter { get; set; }

    public AppModel()
    {
        Tick();
    }

    async void Tick()
    {
        while (true)
        {
            Counter++;
            await Task.Delay(1000);
        }
    }
}

Startup.cs:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton<AppModel>();
    }

    public void Configure(IBlazorApplicationBuilder app)
    {
        app.UseNObservable();
        app.AddComponent<App>("app");
    }
}

@page "/"
@implements IObserverComponent
@inject AppModel model

<h1>Counter demo</h1>


Counter: @(model.Counter)

Counter should tick automatically