Component Renderer for non-blazor WebASsembly

[SerratedSharp]

I am using wasm-browser project template to basically build a custom client-side MVC framework. I leverage a RCL to render *.razor templates to HTML client side by using HtmlRenderer. Simplified, it is essentially doing this:

       IServiceCollection services = new ServiceCollection();
       services.AddLogging();
       services.AddSingleton<CustomInteractiveRenderer>();
       IServiceProvider serviceProvider = services.BuildServiceProvider();
        var htmlRenderer = new HtmlRenderer(serviceProvider, loggerFactory);       
        var viewParametersDictionary = new Dictionary<string, object> {
            { "TitleContent", "Title from params dictionary" },
            { "Suffix", " - Suffix from params dictionary" }
        };
        var paramView = ParameterView.FromDictionary(viewParametersDictionary);

        return await htmlRenderer.Dispatcher.InvokeAsync(async () =>
        {
            HtmlRootComponent rootComponent2 = await htmlRenderer
                .RenderComponentAsync<TestFragmentMakerViewWithRef>(paramView);
            return rootComponent2.ToHtmlString();
        });

The one thing this doesn't support is @ref nor OnAfterRenderAsync within the *.razor. It seems like there's not a way to get this renderer to trigger the OnAfterRenderAsync event in components/*.razor, I assume because of its intended usage scenario.

I tried using @renderMode InteractiveWebAssembly since this is within a webassembly, but it complains that the platform is not supported. I don't know if there's something I can add to my ServiceProvider to make it "think" it's in the appropriate platform. My ServiceProvider is created on the fly for prototyping only for the HtmlRenderer, because to support certain scenarios in my web assembly I am using AutoFac for the app as a whole. I was thinking I could use AddInteractiveWebAssemblyRenderMode on the service provider, but this is intended to be used with an app builder, so not real clear if I can use this somehow with my on-the-fly ServiceProvider. (I recognize this is not how ServiceProvider is intended to be used)

I had some success with a custom renderer, but I'm not clear how to do the final render to HTML since the type it returns is no longer a RootHtmlComponent with .ToHtmlString(), and generally feels like I probably have implemented aspects incorrectly.

public class CustomInteractiveRenderer : Renderer
{
    private readonly Dispatcher _dispatcher;

    public CustomInteractiveRenderer(IServiceProvider serviceProvider)
        : base(serviceProvider, NullLoggerFactory.Instance)
    {
        _dispatcher = Dispatcher.CreateDefault();
    }

    protected override Task UpdateDisplayAsync(in RenderBatch renderBatch)
    {
        return Task.CompletedTask;
    }

    public async Task<TComponent> CreateComponent<TComponent>() where TComponent : IComponent
    {
        var component = base.InstantiateComponent(typeof(TComponent));
        var componentId = AssignRootComponentId(component);
        Console.WriteLine($"componentId: {componentId} for {typeof(TComponent).Name}");
        await RenderRootComponentAsync<TComponent>(componentId);
        return (TComponent)component;
    }

    private async Task RenderRootComponentAsync<TComponent>(int componentId) where TComponent : IComponent
    {
        var builder = new RenderTreeBuilder();
        builder.OpenComponent(0, typeof(TComponent));
        builder.CloseComponent();
        await RenderRootComponentAsync(componentId, ParameterView.Empty); //builder.GetFrames());
    }

    protected override void HandleException(Exception exception)
    {
        Console.WriteLine(exception);
    }

    public override Dispatcher Dispatcher => _dispatcher;
}

I started to look through existing ASP.NET Core renderer's (that inherit from Microsoft.AspNetCore.Components.RenderTree.Render), but having a hard time wrapping my head around all the options.

Is there an existing renderer that would support @ref and OnAfterRenderAsync and could be used in a non-Blazor web assembly? I recognize I'm probably venturing into the realm of using types that aren't really intended for end user consumption, but hoping if I can get something working a little better, then I start to dig into how it works and pivot from there. Thank you.

[SerratedSharp]

This is one of those things where you spend hours, and feel stuck, post a question, and then 10 minutes later you find a solution. It was big thanks to Steve Sanderson for leaving this comment in StaticHtmlRender (I'm so thankful when people actually comment code and don't take for granted that the "why"/rational is implicitly understood):

//     protected override Task UpdateDisplayAsync(in RenderBatch renderBatch)
//{
//    // By default we return a canceled task. This has the effect of making it so that the
//    // OnAfterRenderAsync callbacks on components don't run by default.
//    // This way, by default prerendering gets the correct behavior and other renderers
//    // override the UpdateDisplayAsync method already, so those components can
//    // either complete a task when the client acknowledges the render, or return a canceled task
//    // when the renderer gets disposed.

Based on that I made a full copy of HtmlRender, implemented my own StaticRenderer that returns a completed task:

public class StaticHtmlWithAfterRenderer : StaticHtmlRenderer
{
    public StaticHtmlWithAfterRenderer(IServiceProvider services, ILoggerFactory loggerFactory)
        : base(services, loggerFactory)
    {
    }

    protected override Task UpdateDisplayAsync(in RenderBatch renderBatch)
    {
        // Call the base implementation to update the display
        var baseTask = base.UpdateDisplayAsync(renderBatch);

        // Return a completed task to ensure OnAfterRender events fire
        return Task.CompletedTask;
    }
}

then changed my custom HtmlRenderer "copy" to use this StaticHtmlWithAfterRenderer.

Making a copy of HtmlRenderer doesn't feel exactly like to cleanest thing to do, but not sure how else I would do it without the encapsulated StaticHtmlRenderer not being a template parameter.