Creating a reusable UserControl that wraps a JavaScript UI library

[rbrundritt]

I'm looking to create a reusable user control that wraps a JavaScript UI library, in particular MapLibre (similar to Leaflet/Google Maps) as I need this for larger project I'm working on. My ultimate goal is to create a .NET API interface that wraps a chunk of this JavaScript library and is able to run this in offline scenarios. This would require hosting the JavaScript files for the library with the user control, as well as having some data offline for rendering.

I have created a very similar project previously for .NET Maui for Azure Maps (https://github.com/rbrundritt/AzureMapsNativeControl). In that solution I wrapped the .NET Maui Hybrid WebView control (https://github.com/[Eilon/MauiHybridWebView](https://github.com/Eilon/MauiHybridWebView)), made all my HTML/JS files embedded resources in my project, and loaded and controlled them within the WebView. I create an API interface similar to that of the library I was wrapping and create JS interop code as needed.

The above solution works really well, but now I'm working with a customer who needs a solution for Avalonia that works across all flavors (mobile, desktop, and Web Assembly). Before I go too far down the rabbit hole I'm looking for some insights, in particular:

• The WebView approach would likely work with mobile and desktop, but not sure how to handle the WebAssembly approach. Would I potentially have two versions of my user control, one that wraps the WebView control, and one that loads the html/js files directly somehow?
• Any examples out there that wrap a JavaScript UI library as an Avalonia user control that works across all platforms?
• Any guidance at all on this scenario would be greatly appreciated.

Note: I am aware of MapsUI and have tested it. It does not have the features of performance level I require.

[thevortexcloud]

but not sure how to handle the WebAssembly approach. Would I potentially have two versions of my user control, one that wraps the WebView control, and one that loads the html/js files directly somehow?

This one is actually the easiest. Avalonia supports "native" interop. Native for a web browser is HTML and Javascript. There is a sample here for embedding some HTML in an Avalonia control for web assembly and calling some Javascript code.

https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog.Browser/EmbedSample.Browser.cs

[rbrundritt]

ok, thanks. I'll need to test that out. In the .NET Maui version I created things got a bit more complex as I wanted things to work offline, and needed the ability to download and store data on the fly, and was using intercepting the http requests in native code, and basically had a local proxy going on so that I could offload the management of offline data to native code. This allowed me to use background threads to download data when the app wasn't running as well. As a starting point I could potentially do this in a web or service worker, and use indexDB for storage. This wouldn't run in the background when the app isn't running, but might be good enough.

[rbrundritt]

Actually, looking at the sample, it appears all the code is running in the browser version of the app rather than in a separate user control library. I'm new to Avalonia, so will need to do some testing, but ideally I'd like to be able to load my custom control library into all flavors of Avalonia (mobile, desktop, web) and have it work. This is where I think it gets tricky as the html/js files would need to be stored within the user control library and should not be in the wwwroot folder of the app (maybe I'm over thinking it).