features-interop.md

uid
Uno.Wasm.Bootstrap.JSInterop

Interoperating with Javascript

The Uno bootstrapper provides the ability to interoperate from and to Javascript from .NET.

Two techniques are available:

• The use of .NET 7's new generated interop features. It uses code generation to create performant, CSP-Compliant, thread-safe interop and does not make of the unsafe javascript eval.
• The use of the legacy C# Interop.Runtime.InvokeJS(...) and Javascript mono_bind_static_method(...).

Invoking C# code from Javascript

.NET 7 JSExport

.NET 7 introduces the [JSExportAttribute] which allows for Javascript to invoke C# static methods in a memory, threading and performance efficient way.

Important

To enable this feature, you'll need to use net7.0 or later in your project's TargetFramework, and you will need to use the Uno Bootstrapper 7.x or later.

In your C# project (named MyApp for this example), add the following class:

namespace MyNamespace;

public static partial class Exports
{
    [System.Runtime.InteropServices.JavaScript.JSExport()]
    public static string MyExportedMethod()
    {
        return $"Invoked";
    }
}

Then in your Javascript, add the following:

async function invokeCSMethod() {
    globalThis.myExports = await Module.getAssemblyExports("MyApp");
    var result = globalThis.myExports.MyNamespace.Exports.MyExportedMethod();
}

invokeCSMethod();

.NET 6 mono_bind_static_method

In your C# project (named MyApp for this example), add the following class:

namespace MyNamespace;

public static partial class Exports
{
    public static string MyExportedMethod()
    {
        return $"Invoked";
    }
}

Then in your Javascript, add the following:

var myExportedMethod = Module.mono_bind_static_method("[MyApp] MyNamespace.Exports:MyExportedMethod");
var result = myExportedMethod();

Important

The interop infrastructure only supports primitive types for parameters and return value.

[!IMPORTANT] This type of interop is not compatible with strict CSP.

---

Invoking Javascript code from C#

.NET 7 JSImport

Invoking JS functions from C# can be done through [JSImportAttribute].

Important

To enable this feature, you'll need to use net7.0 or later in your project's TargetFramework.

In your C# project (named MyApp for this example), add the following class:

namespace MyNamespace;

public static partial class Imports
{
    [System.Runtime.InteropServices.JavaScript.JSImport("globalThis.myJSMethod")]
    public static partial string MyJSMethod();
}

Then in your Javascript, add the following:

function myJSMethod(){
    return "myJSMethod invoked!";
}

In the C# code, call Imports.MyJSMethod(); as you would any other method.

.NET 6 JSEval

If you're not using Uno.UI, you'll need to define the following in the global namespace:

internal sealed class Interop
{
    internal sealed class Runtime
    {
        [MethodImplAttribute(MethodImplOptions.InternalCall)]
        public static extern string InvokeJS(string str, out int exceptional_result);
    }
}

Then in your Javascript, add the following:

function myJSMethod(){
    console.log("myJSMethod invoked!");
}

And can be used from C# with:

InvokeJS("myJSMethod()");

Note that the interop only supports strings as the returned value, and parameters must formatted in the string passed to InvokeJS.

---