What's the idiomatic way to link language-ext to a Blazor/Asp.Net project?

[ThereIsNoPie]

Scenario:

• I'm using K<Eff<RT>, T> to define my logic.
• I want to update the UI (e.g. progress bar, loading icon, text, etc.) in the middle of the logic.

Here's an image for context

Current (bad) solution:

In my core project:

I define my Traits and helper methods. (This is ugly because I need to define "where UI : FolderPathIO" which is not the same as the Newsletter project).

    public interface FolderPathIO
    {
        public Unit UpdateFolderPath(string path);
        public string GetFolderPath();
    }

    public static class FolderPath<M, RT, UI>
        where RT : Has<M, UI>
        where M : Monad<M>
        where UI : FolderPathIO
    {
        static K<M, UI> trait => Has<M, RT, UI>.ask;

        public static K<M, Unit> Update(string value) =>
            from t in trait
            let _ = t.UpdateFolderPath(value)
            select _;

        public static K<M, string> Get() =>
            from t in trait
            let path = t.GetFolderPath()
            select path;
    }

I define dependency injection for my UI (SelectDocRT might be an incorrect term, could someone suggest a rename?)

    public interface SelectDocumentIO : ProgressIO, FolderPathIO, IsRunningIO { }

    public record SelectDocumentModel(string InputFolderPath, bool IsRunning, double Progress);

    public record SelectDocRT(Action<SelectDocumentModel> set, Func<SelectDocumentModel> get)
        : SelectDocumentIO
    {
        public string GetFolderPath()
        {
            return get().InputFolderPath;
        }

        public Unit UpdateFolderPath(string path)
        {
            var x = get() with { InputFolderPath = path };
            set(x);
            return Unit.Default;
        }

        public Unit UpdateIsRunning(bool value)
        {
            var x = get() with { IsRunning = value };
            set(x);
            return Unit.Default;
        }

        public Unit UpdateProgress(double value)
        {
            var x = get() with { Progress = value };
            set(x);
            return Unit.Default;
        }
    }

I define my logic:

    public static class SelectDocumentLogic<M>
        where M : Monad<M>, Fallible<M>
    {
        public static K<M, string> SelectInputFolder<RT>()
            where RT : Has<M, FolderPickerIO>, Has<M, SelectDocumentIO>
        {
            return from folderPath in FolderPicker<M, RT>.SelectInputFolder()
                from _ in FolderPath<M, RT, SelectDocumentIO>.Update(folderPath)
                select folderPath;
        }
 // other functions here
    }

In my Blazor project

I define my runtime:

    public record BaseRuntimeCore<TRuntime, TStateRT, TStateIO>(IEnv Env, TStateRT stateRT)
        : Has<Eff<TRuntime>, AIQueryIO>,
            Has<Eff<TRuntime>, FolderPickerIO>
        where TRuntime : BaseRuntimeCore<TRuntime, TStateRT, TStateIO>
    {
        public static K<Eff<TRuntime>, AIQueryIO> Ask =>
            Prelude.liftEff<TRuntime, AIQueryIO>(rt => rt.Env.AIQueryParams);

        static K<Eff<TRuntime>, FolderPickerIO> Has<Eff<TRuntime>, FolderPickerIO>.Ask =>
            Prelude.liftEff<TRuntime, FolderPickerIO>(rt => rt.Env.FolderPickerIO);

// other dependencies here
    }
    
    public record SelectDocRuntime(IEnv Env, SelectDocRT stateRT)
        : BaseRuntimeCore<SelectDocRuntime, SelectDocRT, SelectDocumentIO>(Env, stateRT),
            Has<Eff<SelectDocRuntime>, SelectDocumentIO>
    {
        static K<Eff<SelectDocRuntime>, SelectDocumentIO> Has<
            Eff<SelectDocRuntime>,
            SelectDocumentIO
        >.Ask =>
            Prelude.liftEff<SelectDocRuntime, SelectDocumentIO>(rt => (SelectDocumentIO)rt.stateRT);
    }

For EACH PAGE, I must define a different runtime and use it.

namespace MauiBlazor2.Components.Pages;

public partial class Home
{
    [Inject]
    IEnv Environment { get; set; }
    SelectDocumentModel Model = new SelectDocumentModel("", false, 0);

    bool IsRunButtonEnabled => !Model.IsRunning && !string.IsNullOrEmpty(Model.InputFolderPath);

    private SelectDocRT GetRT() =>
        new SelectDocRT(
            n =>
            {
                MainThread.InvokeOnMainThreadAsync(() =>
                {
                    this.Model = n;
                    StateHasChanged();
                });
            },
            () => this.Model
        );

    private async Task ExecuteSelectDocumentLogic<T>(
        Func<K<Eff<SelectDocRuntime>, T>> logicProvider
    )
    {
        var rt = new SelectDocRuntime(this.Environment, GetRT());
        var outcome = await (
            from fork in logicProvider().ForkIO()
            from result in fork.Await
            select result
        ).RunAsync(rt);
    }

    private async Task BrowseInputFolder(MouseEventArgs e) =>
        await ExecuteSelectDocumentLogic(
            SelectDocumentLogic<Eff<SelectDocRuntime>>.SelectInputFolder<SelectDocRuntime>
        );

    private async Task RunAI(MouseEventArgs e) =>
        await ExecuteSelectDocumentLogic(
            SelectDocumentLogic<Eff<SelectDocRuntime>>.ProcessFiles<SelectDocRuntime>
        );
}

Question

Is there a better idiomatic way to do this? There's a lot of duplication and boilerplate here. I expect the "Mutates" trait might help me, but I can't find any examples of its use.

[aloslider]

SelectDocRT might be an incorrect term, could someone suggest a rename?

Maybe LambdaDocumentSelector? I usually add a specific name of the thing that implementation uses so you could easily say how it works internally by looking at the name.

public static class FolderPath<M, RT, UI>
where RT : Has<M, UI>
where M : Monad
where UI : FolderPathIO

Is there a reason for a third generic arg UI in FolderPath static class?

Overall, I'm struggling to understand what are you trying to do. I've never used blazor, but I assume runtime injection is similar to when working with ASP.NET: just inject your runtime to IoC and request to your framework's dependent class like Page (I assume it's done with InjectAttribute).

[ThereIsNoPie]

Maybe LambdaDocumentSelector? I usually add a specific name of the thing that implementation uses so you could easily say how it works internally by looking at the name.

Sounds good, thanks :)

Is there a reason for a third generic arg UI in FolderPath static class?

I have a core logic module that is used by multiple different pages. "SelectDocumentIO" is specific to the SelectDocumentPage so if I use that in the core module it'll mean it can only be used by that page.

I assume runtime injection is similar to when working with ASP.NET: just inject your runtime to IoC and request to your framework's dependent class like Page

This might be what I'm looking for. Could you show me some code? I can't quite make it work. My issue is:

• I have an operation that uses AI on every file in a folder.
• I want to show a progress bar (that updates after each file is processed).

So I can't assemble my runtime inside my IoC and then inject it into my page because my runtime contains my page. Here's the core logic code (sorry for the overwhelming amount of code)

    public static class FileProcessor<M, UI>
        where M : Monad<M>
        where UI : ProgressIO
    {
        public static K<M, Seq<GuessFile>> ProcessFiles<RT>(
            string inputFolderPath,
            AIQueryParams llm_params
        )
            where RT : Has<M, IReadDb>, Has<M, FileBrowserIO>, Has<M, UI>
        {
            return from filePaths in FileBrowser<M, RT>.GetFilePathsInFolder(inputFolderPath, "*.*")
                let imagePaths = filePaths
                    .Where((f) => f.EndsWith(".pdf") || f.EndsWith(".jpg") || f.EndsWith(".jpeg"))
                    .Select((path, i) => new { Path = path, Index = i })
                from processedFiles in Prelude
                    .Seq(imagePaths)
                    .TraverseM(
                        inputFile =>
                            from f in ProcessFile<RT>(inputFile.Path, llm_params)
                                .Map(x => new GuessFile(x.Item1, x.Item2, []))
                            let progress = (double)(inputFile.Index + 1) / imagePaths.Count()
                            from _ in Progress<M, RT, UI>.Update(progress)
                            select f
                    )
                select processedFiles;
        }
        // more functions here
}

[aloslider]

You don't have to declare RT on function level, just declare it within a module. Also, I don't see any reason to to add an UI argument as you are working with ProgressIO contract already. I think it can be rewritten like this (same for other modules):

 public static class FileProcessor<M, RT>
        where M : Monad<M>
        where RT : Has<M, ProgressIO>
{
        public static K<M, Seq<GuessFile>> ProcessFiles(
            string inputFolderPath,
            AIQueryParams llm_params) { ... }
}

In your Home page example you create a specific implementaton SelectDocRT (naming is bad here, I understand it as something LambdaDocumentSelector) of your SelectDocumentIO trait. Instead you need to read it from a runtime (which is side-effect) that you inject to your page:

partial class Home
{
    [Inject]
    SelectDocRuntime Runtime { get; set; } // your page specific runtime 
    SelectDocumentModel Model = new SelectDocumentModel("", false, 0);

    bool IsRunButtonEnabled => !Model.IsRunning && !string.IsNullOrEmpty(Model.InputFolderPath);

    private async Task ExecuteSelectDocumentLogic<T>(Func<K<Eff<SelectDocRuntime>, T>> logicProvider)
    {
        await SelectDocumentLogic<Eff<SelectDocRuntime>, SelectDocRuntime>.SelectDocRuntime(logicProvider).RunAsync(Runtime);
    }
}

I can't assemble my runtime inside my IoC and then inject it into my page because my runtime contains my page

Sorry, but I can't find what are you talking about in the code you've provided, its way overwhelming and I need to guess many things. I don't understand how a runtime can contain some page when it should contain all dependencies you need that do side-effects with your pages.
You may provide code again, but not all together (one page, one module, one trait and implementation, and one runtime the page needs) so we can discuss a specific example.

[ThereIsNoPie]

I don't see any reason to to add an UI argument as you are working with ProgressIO contract already

The UI thing was a workaround, likely because I'm doing something silly. I think this issue will likely be resolved if the question below is resolved

You may provide code again, but not all together (one page, one module, one trait and implementation, and one runtime the page needs) so we can discuss a specific example.

Here's a simplified example of what I want to do.

public record PDF();

// this code is in a class library (no reference to blazor)
public static class CoreLogic
{
    public static IO<string> TranscribePDF(PDF pdf)
    {
        return Prelude.lift(() =>
        {
            Thread.Sleep(1000);
            return "Transcribed text from PDF";
        });
    }

    public static K<IO, Seq<string>> TranscribePDFs(IEnumerable<PDF> pdfs)
    {
        return from processedFiles in Prelude
                .Seq(pdfs)
                .TraverseM(
                    pdf =>
                        from transcription in TranscribePDF(pdf)
                        from _ in Prelude
                            .lift(() =>
                            {
                                // I want to update progress here
                                return Unit.Default;
                            })
                            .ToIO()
                        select transcription
                )
            select processedFiles;
    }
}

// this is the codebehind for my razor page (i.e. in the blazor project)
public partial class SomePage
{
    IEnumerable<PDF> PDFs { get; set; }

    // this value shows on the progress bar (on the page UI).
    float Progress { get; set; }

    public async Task OnTranscribeButtonPressed() => CoreLogic.TranscribePDFs(PDFs).Run();
}

A lot of the confusion is I've probably used the term "Runtime" incorrectly in my code. Assume a lot of base stupidity from me :P.

Thanks for the help. It's appreciated :).

[louthy]

For EACH PAGE, I must define a different runtime and use it.

I haven't had a chance to dig in too deep to what you wrote, but this ^^^ sticks out. Really, you should only need to define one runtime per application. The runtime defines the interface to 'the world'. It's your way of specifying how to talk to the mutable messiness which is the real world and collecting all of the 'real world problems' in a single, easily audited, place (this can really help if you're building security constructs into the runtime too).

You then constrain individual methods with the Has constraints to specify which bits of the runtime you're 'opening up'. So, it doesn't matter that a function gets given a more capable runtime, as long as the function only opens up what it needs. This gives you the declarative benefits (and the DI benefits), without having to do all of the messy legwork of building a runtime per function/per control/per page/...

In terms of idiomatic ways of implementing Blazor apps. Right now, nothing is defined. Initially I tried to avoid being too opinionated about how to integrate FP into C# apps as many people pick different levels of FP commitment (some just use Option, some go all-in with effects, some only use for back-end, ...)

However, I keep getting similar questions to this one, so I'm currently in the process of setting out some 'idiomatic' approaches. That's also part of the reason I'm doing a big refactor of the streaming features: I want to have a good story around events and event-streams and how they integrate with a real-world app (beyond Rx basically). Once it's done, my plan is to continue the Higher Kinds blog series expanding into how to build complete applications. I don't currently have a timeline for this right now, as I have a huge amount going on.

Going back to the question of what if anything is idiomatic, well, nothing right now. Because the idioms haven't been defined. But the way I always like to think about anything that has a web request/response process is that a request is like an application that starts up, runs, returns a result and shuts down.

So, the Newsletter sample being an an application that starts up, runs, returns a result and shuts down is the model for a single web-request. Essentially, we want to build a single pure effect that we can Run (per request). And then return the result of the Run method from the request. Everything else should live inside whatever monad you decide to use. Whether it's Eff or one you define.

I realise this advice is quite generic. I'll expand upon it once I have some real world examples to show.

[ThereIsNoPie]

I haven't had a chance to dig in too deep to what you wrote, but this ^^^ sticks out

It sticks out to me as well and is one of the major reasons I realised I needed help. My issue is that I cannot get the code to update the UI without this concession.

I don't currently have a timeline for this right now, as I have a huge amount going on.

I will likely need to complete my current project milestone before these articles are released. Would you be able to give a recommendation on what I should explore to solve my current issues?

A summary of my current issue is "If my UI is part of my runtime and I have a webapp with many pages, then I cannot find a way to add these pages to my run time"

Here are the options I'm considering exploring:

1. Find a way to include the .razor pages inside my Runtime (in the Program.cs file, using the AppBuilder + functions, I believe I may have issues because pages are transient)
2. Have my core functions return a State or another monad (so that I can call DoThing().Run(runtime).Run(ui)
3. Switch to an OO approach for all UI updates and move that logic to the blazor project.

A simple example of what I want to achieve is here (#1459 (reply in thread))

[louthy]

I don't know anything about Blazor/Razor, I've never used it. Part of my project to show real-world use-cases is to learn the MS-mandated UI frameworks and to build something functional for them. So, right now I'd probably give bad advice.

One thing I would question is this: "I cannot get the code to update the UI without this concession."

Really, the 'runtime system' is for:

• IO functionality that you potentially want to mock
• Configuration parameters
• Local state

Updating a page isn't really IO (if it's part of a request/response then it can easily be seen as referentially-transparent if we consider it to be a function: Request -> Response (Response WebRequest(Request request)). So, we shouldn't 'over engineer' our functionality to have to be pure at every single point of a function. As long as the function as a whole is referentially-transparent then we still win.

However, if you wanted to make the modification of a progress-bar into something pure. that could be invoked mid-function. then I, personally, would want to use events and have something listening to those events that updates the bar. Again, I have no knowledge of razor, so I have no idea if this is sound advice or not.

Another approach is to just wrap the update in an IO monad

public static class ProgressBar
{
    public static IO<Unit> UpdateProgress(double value, ...) =>
        IO.lift(e => /* code to update the progress bar */);
}

This makes the side-effect pure and can be lifted into your Eff expressions.

1. Find a way to include the .razor pages inside my Runtime (in the Program.cs file, using the AppBuilder + functions, I believe I may have issues because pages are transient)

Remember you can create 'local runtimes' (i.e. runtimes that have locally transformed state). That is you could call a method on your runtime called SetPage(page-to-set) and immutably update its state. You'd have to work with the base-type for all pages, but you would at least have access. Perhaps then have something like this for your runtime:

// I don't know what the base-type is for razor pages, so replace this type with whatever it is
public record BasePage;

// This simple record type just carries the 'current page' for the runtime
public record Page(Option<BasePage> Value)
{
    public static K<M, P> get<M, RT, P>()
        where M : Monad<M>, Fallible<Error, M>
        where RT: Has<M, Page>
        where P : BasePage =>
        Has<M, RT, Page>.ask.Bind(
            p => p.Value.Match(
                Some: p => p is P page 
                               ? M.Pure(page)
                               : M.Fail<P>(Error.New($"Page is not of type {typeof(P).Name}")),
                None: () => M.Fail<P>(Error.New("No page set"))));
}

public record Runtime(RuntimeEnv Env) :
    Has<Eff<Runtime>, Page>,
    // ... rest of your Has types ...
    IDisposable
{
    public Runtime SetPage(BasePage page) =>
        this with { Env = Env with { Page = new Page(Some(page)) } };

    public static K<Eff<Runtime>, Page> Ask { get; } = 
        liftEff<Runtime, Page>(rt => rt.Env.Page);
}

public record RuntimeEnv(Page Page, ...) : IDisposable
{
}

This makes it possible to (before invoking anything relating to the page) call SetPage to have a current-page set for the duration of a request, or to even bake-it-in when the page is created as a property of the page, or something like that. Then you can call Page.get<Eff<Runtime>, Runtime, YourPage> to get a typed page. It's not the prettiest approach, but it certainly saves you having to create a runtime per page.

2. Have my core functions return a State or another monad (so that I can call DoThing().Run(runtime).Run(ui)

This is possible and it's an approach I have used with an Avalonia app that I made recently. I basically created a standalone set of pure behaviours, completely disconnected from the UI, and got them to return a result and events to 'run' upon completion (so really, more of a Writer monad than a State monad, but they're basically then same thing). Those events, when run, would mutate the top-level application-state. The top-level application-state was held entirely in an Atom<AppState>, which triggers events when mutated. Those events would then trigger UI updates (through Rx streams). So, the UI was entirely derived from Rx observables of the Atom<AppState>.

This has a nice separation of concerns feeling to it, but if you haven't architected your solution like this, then it could be a reasonable amount of heavy lifting to get it working. If I understood your request, you also wanted to do UI updates mid-method. This approach only updates once all logic has run.

I doubt this works for web-applications, but if blazor/razor is trying to shoehorn the desktop-app like experience into the web, maybe it would. Again, I dunno what I dunno!

3. Switch to an OO approach for all UI updates and move that logic to the blazor project.

Don't be afraid to take the easy option if you're coming up to a deadline! I saw how awkward it was to try and fit a pure-FP approach into the Avalonia UI system. I certainly didn't nail it, but just about found an approach that worked. Pick the battles that are worth taking on. With pure-FP if you can lift your core backend-logic into a more declarative approach, then you've already won a victory for the long-term maintainability of your app. The UI is always messy, in my experience, which is why I think it's probably the next thing for me to take on. It's a tough one to take on though.

[louthy]

So, I've just added a BlazorApp sample to the repo. It's some early ideas that might work, or might collapse under a larger project, I just don't have enough Blazor experience to know.

I basically took the default Rider sample-app (which I think you have in your example too) and then did the following:

Broke the WeatherForecast data structure out into a Data folder:

• Made it a record
• Removed the TemperatureC and TemperatureF and replaced it with the LanguageExt 'Units of Measure' Temperature.

/// <summary>
/// Weather forecast data
/// </summary>
/// <param name="Date">Date</param>
/// <param name="Temperature">Temperature for the day</param>
/// <param name="Summary">Summary text</param>
public record WeatherForecast(
    DateOnly Date, 
    Temperature Temperature, 
    string Summary);

Made a Control folder to contain pure effects

The original code that was in the Weather.razor page has been factored out to the Weather<RT> type. It realises that randomness is an effect, as is the date & time 'now', as is the whole forecast. So, they're represented as such:

public static class Weather<RT>
    where RT : 
        Has<Eff<RT>, TimeIO>, 
        Has<Eff<RT>, RndIO>
{
    /// <summary>
    /// Some example summaries
    /// </summary>
    static readonly Seq<string> summaries =
        ["Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"];

    /// <summary>
    /// Get the next five-days weather forecast
    /// </summary>
    public static Eff<RT, Seq<WeatherForecast>> forecastNextFiveDays =>
        from d in dateNow
        from f in Range(1, 5).AsIterable()
                             .Map(d.AddDays)
                             .Traverse(forecast)
        select toSeq(f);          

    /// <summary>
    /// Gets a weather forecast for a given date
    /// </summary>
    public static Eff<RT, WeatherForecast> forecast(DateOnly date) =>
        from t in randomTemperature
        from s in randomSummary
        select new WeatherForecast(date, t, s);

    /// <summary>
    /// Get the date now
    /// </summary>
    static Eff<RT, DateOnly> dateNow =>
        Time<Eff<RT>, RT>.now.Map(DateOnly.FromDateTime).As();
    
    /// <summary>
    /// Generate a random temperature between -20 and 55 degrees celsius
    /// </summary>
    static Eff<RT, Temperature> randomTemperature =>
        Rnd<Eff<RT>, RT>.next(-20, 55).Map(c => c.Celsius()).As();

    /// <summary>
    /// Generate a random summary
    /// </summary>
    static Eff<RT, string> randomSummary =>
        Rnd<Eff<RT>, RT>.next(summaries.Length).Map(ix => summaries[ix]).As();
}

Interfaces and Runtime

• I created an Effects folder to contain the Runtime and interfaces
• I was able to reuse TimeIO from language-ext
• I needed to create a RndIO for the randomness:

public interface RndIO
{
    /// <summary>
    /// Get a random integer between min and max, inclusive.
    /// </summary>
    int Next(int min, int max);
    
    /// <summary>
    /// Get a random integer up to max, inclusive.
    /// </summary>
    int Next(int max);    
}

• And I needed an implementation:

public class RndImpl : RndIO
{
    public static readonly RndIO Default = new RndImpl();
    
    public int Next(int min, int max) => 
        Random.Shared.Next(min, max);

    public int Next(int max) => 
        Random.Shared.Next(max);
}

• And finally, I needed a static API to call the randomness behaviours:

public static class Rnd<M, RT>
    where M : MonadIO<M>
    where RT : Has<M, RndIO>
{
    static readonly K<M, RndIO> trait = Has<M, RT, RndIO>.ask;

    /// <summary>
    /// Get a random integer between min and max, inclusive.
    /// </summary>
    public static K<M, int> next(int min, int max) =>
        trait.Map(t => t.Next(min, max));
    
    /// <summary>
    /// Get a random integer up to max, inclusive.
    /// </summary>
    public static K<M, int> next(int max) =>
        trait.Map(t => t.Next(max));
}

• Then I created a Runtime

/// <summary>
/// Concrete runtime for this project
/// </summary>
public record Runtime(RuntimeInterfaces Interfaces) : 
    Has<Eff<Runtime>, TimeIO>,
    Has<Eff<Runtime>, RndIO>
{
    public Runtime(TimeIO timeIO, RndIO rndIO) :
        this(new RuntimeInterfaces(timeIO, rndIO)){}

    static K<Eff<Runtime>, TimeIO> Has<Eff<Runtime>, TimeIO>.Ask { get; } =
        liftEff<Runtime, TimeIO>(rt => rt.Interfaces.TimeIO);
        
    static K<Eff<Runtime>, RndIO> Has<Eff<Runtime>, RndIO>.Ask { get; } =
        liftEff<Runtime, RndIO>(rt => rt.Interfaces.RndIO);
}

public record RuntimeInterfaces(TimeIO TimeIO, RndIO RndIO);

This is slightly different to other runtimes I've built, in that it takes a RuntimeInterfaces, which allows me to provide the interfaces at construction. Rather than have them baked into multiple runtimes. The reason for this is that Razor pages don't play nice with generics, so we have to use a single Runtime type that can take multiple DI injections.

In the end this works pretty well, I think.

Safe errors

I added a helper to catch exceptional errors and make them safe, in case they ever get near a real world user:

    /// <summary>
    /// Catch exceptional errors and make them safe errors by wrapping up the exception
    /// in an `Inner` property and returning with 'There was an error' as the message. 
    /// </summary>
    /// <param name="ma"></param>
    /// <typeparam name="M"></typeparam>
    /// <typeparam name="A"></typeparam>
    /// <returns></returns>
    public static K<M, A> SafeError<M, A>(this K<M, A> ma)
        where M : Fallible<M> =>
        ma.Catch(e => e.IsExceptional, e => Error.New("There was an error", e));

AppRuntime.Default

Somehow we need to get a Runtime passed to the page. I couldn't think of another way other than a static:

public static class AppRuntime
{
    /// <summary>
    /// This will always point to the same runtime in this example, but it should be relatively
    /// obvious that switching this to a test-runtime, or any alternative with different effects
    /// implementations is how you would do mocking or DI.
    ///
    /// There may well be a more elegant way to make the runtime available to the Razor pages, but
    /// I have zero experience with Razer/Blazor, so I haven't figured it out yet.  If you know,
    /// please let me know in the repo Discussions.  Thanks! 
    /// </summary>
    public static Runtime? Current;
}

As it implies in the comment, a better way of parameterising pages is needed.

Page base-type

Then I created a base-type for the page. This hooks into every event I could see and creates one that works with Eff instead:

public class Page : ComponentBase
{
    protected override async Task OnInitializedAsync() =>
        (await OnInitialized().RunAsync(AppRuntime.Current!)).SafeError();

    protected override async Task OnAfterRenderAsync(bool firstRender) => 
        (await OnAfterRender(firstRender).RunAsync(AppRuntime.Current!)).SafeError();

    protected override async Task OnParametersSetAsync() => 
        (await OnParametersSet().RunAsync(AppRuntime.Current!)).SafeError();

    public override async Task SetParametersAsync(ParameterView parameters) => 
        (await SetParameters(parameters).RunAsync(AppRuntime.Current!)).SafeError();
    
    protected new virtual Eff<Runtime, Unit> OnInitialized() =>
        liftEff<Runtime, Unit>(async _ =>
                               {
                                   await base.OnInitializedAsync();
                                   return unit;
                               });
    
    protected new virtual Eff<Runtime, Unit> OnAfterRender(bool firstRender) =>
        liftEff<Runtime, Unit>(async _ =>
                               {
                                   await base.OnAfterRenderAsync(firstRender);
                                   return unit;
                               });

    protected new virtual Eff<Runtime, Unit> OnParametersSet() =>
        liftEff<Runtime, Unit>(async _ =>
                               {
                                   await base.OnParametersSetAsync();
                                   return unit;
                               });
    
    protected new virtual Eff<Runtime, Unit> SetParameters(ParameterView parameters) =>
        liftEff<Runtime, Unit>(async _ =>
                               {
                                   await base.SetParametersAsync(parameters);
                                   return unit;
                               });
}

Weather.razor

Then in Weather.razor we need to inherit the new Page type:

@inherits Page

And finally, we can use Eff directly in the page:

@code {
    AtomSeq<WeatherForecast> forecasts = AtomSeq<WeatherForecast>();

    protected override Eff<Runtime, Unit> OnInitialized() =>
        from fs in Control.Weather<Runtime>.forecastNextFiveDays
        from _ in forecasts.SwapIO(_ => fs)
        select unit;
}

Conclusion

As with all MS UI frameworks, they're a mess of mutability. I think they all suck tbh. It would be great to take some of the core functionality (HTTP pipelines, C# -> WASM, ...) and make a truly functional first UI system. Something that could be projected down onto whatever platform its on.

I'm sure I'll do that one day. But I have already bitten off too much with lang-ext for the time being.

[ThereIsNoPie]

Thanks for putting that together. It's been a big help as a template for some of my current projects.

One thing I've noticed is that Blazor will only update the UI if the update is triggered on a main thread. I've edited your counter page to illustrate what happens.

I'm wondering if anyone's run into this before and has an elegant solution. Calling InvokeAsync(() => StateHasChanged()) is a bit tedious but it's manageable.

@code {
    Atom<int> currentCount = Atom(0);

    // 0 -> (wait 1s) 3 
    void IncrementCount() =>
        incrementCount.Run();

    IO<int> incrementCount =>
        from _ in currentCount.SwapIO(x => x + 1)
        from _2 in IO.lift(() => Thread.Sleep(1000))
        from count in currentCount.SwapIO(x => x + 2)
        select count;


    // 0 -> 1 -> (wait 1s) 3 
    async Task IncrementCount2() =>
        await Task.Run(() => incrementCount2.RunAsync());

    IO<int> incrementCount2 =>
        from _ in currentCount.SwapIO(x => x + 1)
        from __ in IO.lift(() => InvokeAsync(() => StateHasChanged()))
        from _2 in IO.lift(() => Thread.Sleep(1000))
        from count in currentCount.SwapIO(x => x + 2)
        select count;

    // 0 -> sometimes 1 (sometimes skips) -> (wait 1s) 3
   // this seems to always fail on the first button press
    async Task IncrementCount3() =>
        await Task.Run(() => incrementCount3.RunAsync());

    IO<int> incrementCount3 =>
        from _ in currentCount.SwapIO(x => x + 1)
        // from __ in IO.lift(() => InvokeAsync(() => StateHasChanged()))
        from _2 in IO.lift(() => Thread.Sleep(1000))
        from count in currentCount.SwapIO(x => x + 2)
        select count;
}

[louthy]

I'm away from my computer atm, but you can use IO.Post to run an operation on the original execution context