fix: Adjust native embedding support

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/BrowserMediaPlayerExtension.cs

@@ -16,6 +16,7 @@
 using Uno.Foundation.Logging;
 using Uno.Helpers;
 using Uno.Media.Playback;
+using Uno.UI.NativeElementHosting;
 
 namespace Uno.UI.Runtime.Skia;
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/BrowserMediaPlayerPresenterExtension.cs

@@ -6,6 +6,7 @@
 using Windows.Foundation;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Uno.UI.NativeElementHosting;
 
 namespace Uno.UI.Runtime.Skia;
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/BrowserNativeElementHostingExtension.cs

@@ -3,6 +3,7 @@
 using System;
 using System.Diagnostics;
 using System.Runtime.InteropServices.JavaScript;
+using Uno.UI.NativeElementHosting;
 using ContentPresenter = Microsoft.UI.Xaml.Controls.ContentPresenter;
 
 namespace Uno.UI.Runtime.Skia;
@@ -61,25 +62,25 @@ public object CreateSampleComponent(string text)
 
 	private static partial class NativeMethods
 	{
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.isNativeElement")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.isNativeElement")]
 		internal static partial bool IsNativeElement(string content);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.attachNativeElement")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.attachNativeElement")]
 		internal static partial bool AttachNativeElement(string content);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.detachNativeElement")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.detachNativeElement")]
 		internal static partial bool DetachNativeElement(string content);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.arrangeNativeElement")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.arrangeNativeElement")]
 		internal static partial bool ArrangeNativeElement(string content, double x, double y, double width, double height);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.createSampleComponent")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.createSampleComponent")]
 		internal static partial void CreateSampleComponent(string parentId, string text);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.changeNativeElementOpacity")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.changeNativeElementOpacity")]
 		internal static partial string ChangeNativeElementOpacity(string content, double opacity);
 
-		[JSImport($"globalThis.Uno.UI.Runtime.Skia.{nameof(BrowserNativeElementHostingExtension)}.setSvgClipPathForNativeElementHost")]
+		[JSImport($"globalThis.Uno.UI.NativeElementHosting.{nameof(BrowserHtmlElement)}.setSvgClipPathForNativeElementHost")]
 		internal static partial string SetSvgClipPathForNativeElementHost(string path);
 	}
 }

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/UI/Xaml/Controls/WebView/BrowserWebViewProvider.cs

@@ -1,5 +1,6 @@
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.Web.WebView2.Core;
+using Uno.UI.NativeElementHosting;
 using Uno.UI.Runtime.Skia;
 using Uno.UI.Xaml.Controls;
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/WebAssemblyBrowserHost.cs

@@ -14,6 +14,7 @@
 using Uno.UI.Xaml.Controls;
 using Uno.UI.Xaml.Controls.Extensions;
 using Microsoft.Web.WebView2.Core;
+using Uno.UI.NativeElementHosting;
 
 namespace Uno.UI.Runtime.Skia.WebAssembly.Browser;
 
@@ -67,6 +68,8 @@ private void Initialize()
 
 		void CreateApp(ApplicationInitializationCallbackParams _)
 		{
+			BrowserHtmlElement.Initialize();
+
 			var app = _appBuilder();
 			app.Host = this;
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/ts/Runtime/BrowserNativeElementHostingExtension.ts

@@ -1,7 +1,24 @@
-namespace Uno.UI.Runtime.Skia {
-	export class BrowserNativeElementHostingExtension {
+namespace Uno.UI.NativeElementHosting {
+	export class BrowserHtmlElement {
 		private static clipPath: SVGPathElement;
 
+		/** Native elements created with the BrowserHtmlElement class */
+		private static nativeHandlersMap: { [id: string]: any } = {};
+
+		private static dispatchEventNativeElementMethod: any;
+
+		public static async initialize() {
+			let anyModule = <any>window.Module;
+
+			if (anyModule.getAssemblyExports !== undefined) {
+				const browserExports = await anyModule.getAssemblyExports("Uno.UI");
+
+				BrowserHtmlElement.dispatchEventNativeElementMethod = browserExports.Uno.UI.NativeElementHosting.BrowserHtmlElement.DispatchEventNativeElementMethod;
+			} else {
+				throw `BrowserHtmlElement: Unable to find dotnet exports`;
+			}
+		}
+
 		public static setSvgClipPathForNativeElementHost(path: string) {
 			if (!document.getElementById("unoNativeElementHostClipPath")) {
 				const svgContainer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -118,5 +135,109 @@
 			element.appendChild(btn);
 			element.addEventListener("pointerdown", _ => alert(`button ${text} clicked`));
 		}
+
+		public static setStyleString(elementId: string, name: string, value: string) {
+			const element = document.getElementById(elementId);
+
+			element.style.setProperty(name, value);
+		}
+
+		public static resetStyle(elementId: string, names: string[]) {
+			const element = document.getElementById(elementId);
+
+			for (const name of names) {
+				element.style.setProperty(name, "");
+			}
+		}
+
+		public static setClasses(elementId: string, cssClassesList: string[], classIndex: number) {
+			const element = document.getElementById(elementId);
+
+			for (let i = 0; i < cssClassesList.length; i++) {
+				if (i === classIndex) {
+					element.classList.add(cssClassesList[i]);
+				} else {
+					element.classList.remove(cssClassesList[i]);
+				}
+			}
+		}
+
+		public static setUnsetCssClasses(elementId: string, classesToUnset: string[]) {
+			const element = document.getElementById(elementId);
+
+			classesToUnset.forEach(c => {
+				element.classList.remove(c);
+			});
+		}
+
+		public static setAttribute(elementId: string, name: string, value: string) {
+			const element = document.getElementById(elementId);
+
+			element.setAttribute(name, value);
+		}
+
+		public static getAttribute(elementId: string, name: string) {
+			const element = document.getElementById(elementId);
+
+			return element.getAttribute(name);
+		}
+
+		public static removeAttribute(elementId: string, name: string) {
+			const element = document.getElementById(elementId);
+
+			element.removeAttribute(name);
+		}
+
+		public static setContentHtml(elementId: string, html: string) {
+			const element = document.getElementById(elementId);
+
+			element.innerHTML = html;
+		}
+
+		public static registerNativeHtmlEvent(owner: any, elementId: string, eventName: string, managedHandler: string) {
+			const element = document.getElementById(elementId);
+
+			if (!BrowserHtmlElement.dispatchEventNativeElementMethod) {
+				throw `BrowserHtmlElement: The initialize method has not been called`;
+			}
+
+			const eventHandler = (event: Event) => {
+				BrowserHtmlElement.dispatchEventNativeElementMethod(owner, eventName, managedHandler, event);
+			};
+
+			// Register the handler using a string representation of the managed handler
+			// the managed representation assumes that the string contains a unique id.
+			BrowserHtmlElement.nativeHandlersMap["" + managedHandler] = eventHandler;
+
+			element.addEventListener(eventName, eventHandler);
+		}
+
+		public static unregisterNativeHtmlEvent(elementId: string, eventName: string, managedHandler: any) {
+			const element = document.getElementById(elementId);
+
+			if (!BrowserHtmlElement.dispatchEventNativeElementMethod) {
+				throw `BrowserHtmlElement: The initialize method has not been called`;
+			}
+
+			const key = "" + managedHandler;
+			const eventHandler = BrowserHtmlElement.nativeHandlersMap[key];
+			if (eventHandler) {
+				element.removeEventListener(eventName, eventHandler);
+				delete BrowserHtmlElement.nativeHandlersMap[key];
+			}
+		}
+
+		public static invokeJS(command: string): string {
+			return String(eval(command) || "");
+		}
+
+		public static async invokeAsync(command: string): Promise<string> {
+			// Preseve the original emscripten marshalling semantics
+			// to always return a valid string.
+			var result = await eval(command);
+
+			return String(result || "");
+
+		}
 	}
 }