ReactiveUI.Blazor Server, ViewModel Activation, and JSRuntime

[chrisg32]

I have a Blazor Server application with pre-rendering enabled. I am using ReactiveInjectableComponentBase and IActivatableViewModel . The my ViewModels are being activated as expected, however, I run into an issue when the ViewModel activation has a dependency on the JsRuntime (e.g. getting a token from browser local storage). I will get the following exception.

JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

This is because with ReactiveInjectableComponentBase activation happens after initialization and before rendering (OnAfterRender).

What is the best way to handle this? I would still like the lifecycle management that comes with IActivatableViewModel but would like to be able to defer activation until after the first render.

Right now I am leaning toward replacing ReactiveInjectableComponentBase with a custom implementation but this seems to be lift that the framework would be able to handle.

Current (not working) implementation:

public class ActivatableComponent<T> : ReactiveInjectableComponentBase<T> where T : class, INotifyPropertyChanged
{
    public ActivatableComponent()
    {
        this.WhenActivated(disposables =>
        {
            //this call is required in order for the view model to be activated
        });
        
    }
}

public abstract class ActivatableViewModel  : ReactiveObject, IActivatableViewModel
{
    public ViewModelActivator Activator { get; } = new();
    protected ActivatableViewModel()
    {
        this.WhenActivated(disposables =>
        {
            HandleActivation(disposables);
            Disposable.Create(HandleDeactivation).DisposeWith(disposables);
        });
    }

    protected abstract void HandleActivation(CompositeDisposable disposables);
    
    protected virtual void HandleDeactivation() { }
}

Currently the lifecycle is:

View Constructed
ViewModel Constructed
View Initialized
ViewModel Activated
View Activated
View Parameters Set
View Rendered

[chrisg32]

The solution is to create a custom IActivationForViewFetcher. A complete example of how to do this is available in Sample 18.05 of You, I, and ReactiveUI. Shout out to @kentcb for an excellent book . If I would have kept reading I would have found the answer sooner. 🤦‍♂️

My implementation is below.

IActivationForViewFetcher

public class ActivationAfterRenderForViewFetcher : IActivationForViewFetcher
{
    public int GetAffinityForView(Type view)
    {
        return typeof(ICanRender).IsAssignableFrom(view) ? 100 : 0;
    }

    public IObservable<bool> GetActivationForView(IActivatableView view)
    {
        var activation =
            GetActivationFor(view as ICanRender) ??
            Observable.Never<bool>();
        return activation.DistinctUntilChanged();
    }


    private IObservable<bool> GetActivationFor(ICanRender view)
    {
        var rendered = view.Rendered.Select(_ => true);
        var disposed = view.Disposed.Select(_ => false);

        var activation = rendered.Merge(disposed);

        if (view is ICanActivate canActivate)
        {
            activation = activation.Merge(canActivate.Deactivated.Select(_ => false));
        }
        
        return activation;
    }
 }

Register the IActivationForViewFetcher

Don't forget to register the IActivationForViewFetcher using the Splat.Locator.

var instance = new ActivationAfterRenderForViewFetcher();
Splat.Locator.CurrentMutable.RegisterConstant(instance, typeof(IActivationForViewFetcher));

Interface

public interface ICanRender
{
    /// <summary>
    /// Gets a observable which is triggered when the View is rendered.
    /// </summary>
    IObservable<Unit> Rendered { get; }
    
    /// <summary>
    /// Gets a observable which is triggered when the View is disposed.
    /// </summary>
    IObservable<Unit> Disposed { get; }
}

Component (View)

public class ActivatableComponent<T> : ReactiveInjectableComponentBase<T>, ICanRender where T : class, INotifyPropertyChanged
{
    private bool _disposedValue;
    private readonly Subject<Unit> _renderedSubject = new();
    private readonly Subject<Unit> _disposedSubject = new();
    public ActivatableComponent()
    {
        Console.WriteLine("View Constructed");
        this.WhenActivated(disposables =>
        {
            Console.WriteLine("View Activated");
            //this call is required in order for the view model to be activated
        });
        
    }
    
    public IObservable<Unit> Rendered => _renderedSubject.AsObservable();
    public IObservable<Unit> Disposed => _disposedSubject.AsObservable();

    protected override void OnParametersSet()
    {
        Console.WriteLine("View Parameters Set");
        base.OnParametersSet();
    }

    protected override void OnInitialized()
    {
        Console.WriteLine("View Initialized");
        base.OnInitialized();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        Console.WriteLine("View Rendered");
        base.OnAfterRender(firstRender);
        _renderedSubject.OnNext(Unit.Default);
    }
    protected override void Dispose(bool disposing)
    {
        if(!_disposedValue)
        {
            if(disposing)
            {
                _disposedSubject.OnNext(Unit.Default);
                _disposedSubject.Dispose();
                _renderedSubject.Dispose();
            }
            _disposedValue = true;
        }
        base.Dispose(disposing);
    }
}

Which results in the following lifecycle.

View Constructed
ViewModel Constructed
View Initialized
View Parameters Set
View Rendered
ViewModel Activated
View Activated

[chrisg32]

This answer works if you need to change web view models are activated, however; for my scenario it turned out to be an issue with the service resolution/scope of my HttpMessageHandler. The reason my resolved runtime was never initialized was because it was resolving a different instance.

[anaisbetts]

This feels like something that should just be a default in ReactiveUI, is there any reason that ReactiveUI for Blazer would ever not want to do this?

[chrisg32]

I could see both ways. In most cases, anything dependent on JS is technically part of your View so it doesn't make sense that the ViewModel has to wait on the View. However, in my case state is persisted the the browser. This also doesn't seem like it would be a rare situation.

As for why you would not want ReactiveUI for Blazor to do this, you could set properties, for example, on ViewModel activation that you want to have values before rendering. This could prevent UI lag and/or rerendering the UI.

Maybe make it an opt-in feature?

Perhaps a better implementation would be to have the Service that returns the persisted state be aware of the Views render state, but that doesn't feel clean either. I am open for other ideas.

[glennawatson]

Sounds like if we change the functionality it might be worth getting a good spec issue going so we can nut out the details on this one.

[chrisg32]

What about a dedicated scheduler for JavaScript operations?