Porting Blazor WASM to Blazor MAUI

[daniel-p-tech]

Hi,

I have created a Blazor WASM app and now I'd like to run it as an Android (and later iOS) app. My understanding is that this is possible using this new technology.

1. Do you have any examples on how to proceed?
2. All the C# code in the ported app will be compiled directly to native Android/iOS, correct? So the app should perform better than a Blazor WASM web app accessed via Android Chrome?
3. I will be able to access full Android/iOS API - things like camera, notifications etc?
4. I'm using IJSInProcessRuntime for all JS interop and call StateHasChanged rather than await InvokeAsync(StateHasChanged) - I'm hoping this is not going to be a problem?

Thank you!

[Asyvix]

1. Most functions are compatible, some rename (eg. App.razor) or implement some classes (eg. BaseAddressAuthorizationMessageHandler).
2. In my case, the MAUI Blazor was much faster than the Blazor Wasm.
3. It is possible. You can access to all MAUI Essentials apis like camera, push notifications and more.
4. No problem in my case.

[SteveSandersonMS]

I'm using IJSInProcessRuntime for all JS interop

You can't use IJSInProcessRuntime on MAUI because, when running on WebView2, the JS runtime is not in-process, it's out-of-process. Hopefully it won't affect your application much to change to the more broadly supported IJSRuntime but if that's not possible for some reason I'd be interested to hear the details to learn more about your scenarios. We can't make WebView2/Chromium change its architecture to bring the JS runtime into the .NET process but maybe I could suggest alternatives for you.

call StateHasChanged rather than await InvokeAsync(StateHasChanged)

Whether or not you need InvokeAsync depends on whether your code is running in the Blazor renderer's sync context or not. If it is, which normally it will be, then you don't need InvokeAsync. It would be unusual for this to be a problem so I'd suggest trying it out and let us know more if something about your app architecture doesn't work on MAUI.

[daniel-p-tech]

Most of the JS interop is used in a UI components library that is specifically tailored to the needs of the type of applications that I'm designing. I've looked at commercial alternatives but they are all bloated and often don't support some basic features that I need (although offer plenty of other features that I don't care about). So I created my own component set (at this point it's a library of about 30 components).

Each component has its own JS module that handles any DOM interaction that cannot be done via Blazor. I'm invoking module functions asynchronously (no problem here) - it's the only supported option anyway.

1. Some of the functions inside a component-specific JS module call utility functions sitting in a global window.lib object. Is this going to be a problem? Here's an example. Please look at the series of lib.XYZ calls in BlzComobBox.js.

BlzComobBox.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        m_componentRef = DotNetObjectReference.Create((BaseJsInteropComponent)this);

        m_module = await ImportModuleAsync("BlzComboBox.js");
        if (m_isDisposed == false)
        {
            await m_module.InvokeVoidAsync("register", m_componentRef, m_componentGuid, m_inptDropdown, m_btnDropdownToggle, m_divDropdownMenu, m_btnClear);
        }
        m_isAfterFirstRender = true;
    }
    if (m_afterRenderActionTypeId == AfterRenderActionType.ScrollToSelectedItem)
    {
        // scroll selected <a> element into view, positioning the item at the top of the container
        // note that certain component vendors scroll selected item to the bottom of the container instead (which requires extra logic)
        await m_module.InvokeVoidAsync("scrollToSelectedItem", m_componentGuid);
        m_afterRenderActionTypeId = AfterRenderActionType.None;
    }
    else if (m_afterRenderActionTypeId == AfterRenderActionType.Open)
    {
        // open dropdown below input element
        await m_module.InvokeVoidAsync("open", m_componentGuid);
        m_afterRenderActionTypeId = AfterRenderActionType.None;
    }
}

BlzComobBox.js

export function open(componentGuid) {
    const component = lib.getComponent(componentGuid);
    lib.registerOpenDropdownMenuComponent(componentGuid);
    lib.updateDropdownMenuPosition(component.inptDropdown, component.divDropdownMenu);
    scrollToSelectedItem(componentGuid);
    component.inptDropdown.focus();
}

2. I also call lib.XYZ directly from cs code:

private void Hide()
{
    IsDropdownMenuVisible = false;
    JSRuntime.InvokeVoid("lib.unregisterOpenDropdownMenuComponent", m_componentGuid);
}

public class LibState : IDisposable
{
    public event Action ThemeChanged;

    public DeviceType DeviceTypeId { get; set; }

    private readonly DotNetObjectReference<LibState> m_componentRef;
    private readonly IJSInProcessRuntime m_jSRuntime;

    public LibState(IJSInProcessRuntime jSRuntime)
    {
        m_jSRuntime = jSRuntime;
        m_componentRef = DotNetObjectReference.Create(this);
        DeviceTypeId = (DeviceType)Enum.Parse(typeof(DeviceType), jSRuntime.Invoke<string>("lib.getDeviceType"));
    }

    public void ChangeTheme(string cssFileUrl)
        => m_jSRuntime.InvokeVoid("lib.changeAppTheme", cssFileUrl, m_componentRef);

    [JSInvokable]
    public void OnThemeChanged()
        => ThemeChanged?.Invoke();

    public void Dispose()
        => m_componentRef?.Dispose();

As you can see, I'm calling lib.XYZ function inside a constructor as well!

In case it's not clear, lib.js file is simply referenced in index.html file.

index.html

<script src="_content/XYZ.Components.Blazor/js/lib.js"></script>

lib.js

window.lib = {

    deviceType: null,
    components: [],

    registerComponent: (componentDotNetRef, componentGuid, type) => {
   ...
}

What do you recommend? Issuing synchronous JS calls was a carefully scrutinized decision, when I started the work on my components there was no .NET MAUI and I knew I had no interest in Blazor server. Now that .NET MAUI is here, I absolutely love the idea of being able to use the same code and publish an Android or iOS app!!! You only mentioned WebView2, what about Safari? My understanding is that the goal of MAUI is to be able to deploy Blazor app to any device, correct?

I don't even know how to start experimenting with this, I couldn't find any useful documentation. I'm OK to wait for the first official preview which should be coming up soon I believe.

I'm looking forward to your comments @SteveSandersonMS !

[hawkerm]

It seems all the previous issues have been locked for conversation, makes it hard to jump in at any given point in the repo.

I started looking at Maui Blazor Hybrid, but have yet, after days of investigation, figure out how to properly interop with JavaScript to load external libraries from the JS library to integrate with my app.

All the documentation seems to pertain specifically to ASP or Blazor WASM and is not compatible with Maui Blazor Hybrid, but that's not called out anywhere. There's no documentation for the WebViewJSRuntime object returned by injecting the IJSRuntime interface into a Blazor component within the application to explain what methods it supports, what capabilities it has, or how to use it to connect .NET to JavaScript. And I have yet to find any examples or anyone that seems to have been able to do this. All the issues seemed closed as 'not supported that way' but with no indication of what the proper way is...

I've loaded a library which I know loads a JavaScript based component and able to run it within my app, so there is some way to do this. But I don't understand how that library has done that and haven't found any valid documentation to show a simple case of how to perform this interop within a simple Blazor component within a Maui Blazor Hybrid app.

[foximoxi]

@hawkerm
There is no difference between JS interop in Hybrid/WASM/Web
After injection of IJSRuntime you're able to invoke any method in JS:

1. Inject in .razor: @Inject JSRunTime JS
   or inject in CSharp code [Inject[ JsRuntime JS;
2. Invoke: JSRuntime.InvokeVoidAsync("yourFunction");

You can also invoke static method in your CSharp from JS e.g.:

DotNet.invokeMethodAsync('MyLib', 'UpdateDragWindow', param1,param2....);

You can get all info and examples from https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-8.0 or any other source.