how to host a blazor component on wasm?

[SongOfYouth]

I have a official blazor commponent which inherited Microsoft.AspNetCore.Components.ComponentBase, is there a way to use it on wasm?

[MartinZikmund]

I am not aware of any existing guidance on this, but we were already thinking of ways to allow developers to integrate with Blazor on some level. Can you please describe your scenario more thoroughly?

[SongOfYouth]

Ofcourse. i'm integrating a fastreport compomemt on uno to show a report, it support avalonia for cross platform but not uno now.
There is a workaround: show the report by a blazor component via FastReport.Blazor.Wasm(for test you can use FastReport.Blazor.Wasm.Demo). but i don't know how to achieve it.
official wasm doc: https://www.fast-report.com/blogs/blazor-webassembly-manual
load font: https://www.fast-report.com/blogs/fonts-reports-without-installing
frx files: https://github.com/FastReports/FastReport/tree/master/Demos/Reports
a demo i have offered: FastReport.Uno.zip

[SerratedSharp]

Not sure if this will be helpful, but I have done alot of rendering blazor components in .NET vanilla browser-wasm projects. This treats a *.razor component as a HTML rendering template, passing it a view model, and getting back a rendered HTML fragment as stirng, then inserting/refreshing the HTML string where desired on the page.

This covers the fundamental mechanism which should be pretty agnostic to what platform you're in, but I can't remember if I tested this specifically within Uno Bootstrap(I think I did but can't remember for sure):
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-components-outside-of-aspnetcore?view=aspnetcore-8.0

Code in the *.razor will run only once since you are only doing a single render to HTML. I think I remember OnAfterRender and some other "initialization" events also do not run, because they are not leveraged using the one-off approach the HtmlRenderer uses versus the interactive rendering engine.

Beyond that the component has no lifetime. This means trying to do anything like having components talking to each other in real time or handling events in the "Blazor way" doesn't come out of the box. It can be solved in a generic way, but it's alot of work and you'll end up writing the equivalent of the Blazor interactive rendering engine.

This approach would be good for components that have little to no interactivity, and serve just to take models and generate HTML.

private static async Task<string> RenderComponentToStringAsync
        <[DAMembers(DATypes.All)] TComponent>
        (HtmlRenderer htmlRenderer, Dictionary<string, object> viewModels)
where TComponent : IComponent
    {
        return await htmlRenderer.Dispatcher.InvokeAsync(async () =>
        {
            //var dictionary = new Dictionary<string, object>
            //    {
            //        { "Message", "Hello from the Render Message component!" }
            //        { "Card", new Card{ artist="bob" } }
            //    };
            var paramView = ParameterView.FromDictionary(viewModels);
            var output = await htmlRenderer.RenderComponentAsync<TComponent>(paramView);
            return output.ToHtmlString();
        });
    }

[SongOfYouth]

It may a usefull workaround for me, i will try it. thanks for sharing.

[SerratedSharp]

Note there is a very popular rendering mode for Blazor called Blazor WASM Standalone if you needed the full interactive engine for the component. Rather than using this inside your Uno Bootstrap project, you would have a separate project of type in VS called "Blazor WebAssembly Standalone App". This runs client-side as its own WASM module and you specific an element as the root element of the interactive renderer: builder.RootComponents.Add<SomeComponent>("#someComponentContainerHtmlId");.

Theoretically you could load this on any page as an additional WASM module, regardless of hosting platform, as long as nothing else interferes with the #someComponentContainerHtmlId element. However, it is "heavier" in terms of load time than vanilla WASM Bootstrap and of course if you wanted to "talk" between WASM modules, you need to go through JS interop. If you're not experienced working with WASM, you might find alot of hurdles working the appropriate way to structure your projects and build pipeline to bring everything together and load different WASM engines on the same page.