JavaScript interop not marshalling Task<ArraySegment<byte>> and Task<Array>

[FranklinWhale]

Description

When exporting a .NET async method that returns Task<ArraySegment<byte>> or Task<Array>, error SYSLIB1072 is reported.

Exporting a .NET method that returns ArraySegment<byte> or Array works.

Reproduction Steps

1. dotnet new wasmbrowser
2. Add <LangVersion>preview</LangVersion> to <PropertyGroup> in the csproj file
3. In Program.cs, add the following namespaces:

using System.Threading.Tasks;
using System.IO;

4. Inside public partial class MyClass in Program.cs, add the following code:

[JSExport]
[return: JSMarshalAs<JSType.MemoryView>]
static ArraySegment<byte> GetMemoryView() {
	var stream = new MemoryStream();
	stream.TryGetBuffer(out var buffer);
	return buffer;
}

[JSExport]
[return: JSMarshalAs<JSType.Promise<JSType.MemoryView>>]
static Task<ArraySegment<byte>> GetMemoryViewAsync() => Task.Run(GetMemoryView);

[JSExport]
static byte[] GetBytes() => new byte[0];

[JSExport]
static Task<byte[]> GetBytesAsync() => Task.FromResult(GetBytes());

5. dotnet run

Expected behavior

The build should be successful

Actual behavior

error SYSLIB1072: The type 'System.Threading.Tasks.Task<System.ArraySegment<byte>>' is not supported by source-generated JavaScript interop. The generated source will not handle marshalling of the return value of method 'GetMemoryViewAsync'.

error SYSLIB1072: The type 'System.Threading.Tasks.Task<byte[]>' is not supported by source-generated JavaScript interop. The generated source will not handle marshalling of the return value of method 'GetBytesAsync'.

Regression?

No response

Known Workarounds

No response

Configuration

.NET 7 RC2
Windows 10 Professional x64 21H2 Build 19044.2130

Other information

No response

I couldn't figure out the best area label to add to this issue. If you have write-permissions please help me learn by adding exactly one area label.

[pavelsavara]

Task of ArraySegment combination is not supported in Net 7 and analyzer reports it properly.
You can however make 2 calls. First call to obtain the promise which you await and then second call to marshal the data.

[pavelsavara]

We are working on documentation of supported types here dotnet/AspNetCore.Docs#27311 (comment)

[IEvangelist]

Task of ArraySegment combination is not supported in Net 7 and analyzer reports it properly. You can however make 2 calls. First call to obtain the promise which you await and then second call to marshal the data.

Hey, @pavelsavara - do you have an example of this? For example, in your proposed workaround you mention doing this in two parts. What would both ends of this look like with two calls?

site.js

Imagine we have the following JavaScript in a site.js file.

export async function requestVideoDevices(max) {
    try {
        // Ask the first time to prime the underlying device list.
        let devices = await navigator.mediaDevices.enumerateDevices();
        if (devices &&
            (devices.length === 0 || devices.every(d => d.deviceId === ""))) {
            await navigator.mediaDevices.getUserMedia({
                video: true
            });
        }

        // Ask again if the user allowed it the device list is now populated.
        // If not, the const returns an empty array.
        devices = await navigator.mediaDevices.enumerateDevices();
        if (devices && devices.length) {
            const deviceResults = [];
            devices.filter(device => device.kind === 'videoinput')
                .forEach(device => {
                    const { deviceId, label } = device;
                    deviceResults.push({ deviceId, label });
                });

            return max >= 0 ? deviceResults.slice(0, max) : deviceResults;
        }
    } catch (error) {
        console.log(error);
    }

    return [];
};

Note
Assuming that the following runs in Program.cs:

await JSHost.ImportAsync(nameof(SiteJavaScriptModule), $"./site.js?{Guid.NewGuid()}");

var app = builder.Build();
await app.RunAsync();

SiteJavaScriptModule.cs

We might define this corresponding SiteJavaScriptModule.cs file:

using Microsoft.JSInterop;
using System.Runtime.Versioning;

[SupportedOSPlatform("browser")]
internal sealed partial class SiteJavaScriptModule
{
    [JSImport("requestVideoDevices", nameof(SiteVideoJavaScriptModule))]
    [return: JSMarshalAs<JSType.Promise<JSType.Object>>]
    public static partial Task<object?> RequestVideoDevicesAsync(
        [JSMarshalAs<JSType.Number>] int? max = 3);
}

Compilation error

This doesn't work, on this RequestVideoDevicesAsync method name the following error is present:

Severity	Code	Description
Error	SYSLIB1072	Type global::System.Threading.Tasks.Task is not supported by source-> generated JavaScript interop. The generated source will not handle marshalling of the return value of the method 'RequestVideoDevicesAsync'.

Type is not supported by source-generated JavaScript interop.

How would you fix this?

Also, why wouldn't this work - it has the same defect and results in SYSLIB1072.

[JSImport("requestVideoDevices", nameof(SiteVideoJavaScriptModule))]
[return: JSMarshalAs<JSType.Promise<JSType.Void>>]
public static partial Task RequestVideoDevicesAsync(
    [JSMarshalAs<JSType.Function<JSType.Array<JSType.Object>>>] Action<JSObject[]> onDevicesAvailable);

If I were to update the JavaScript like this:

export async function getVideoDevices(onDevicesAvailable) {
    try {
        // Ask the first time to prime the underlying device list.
        let devices = await navigator.mediaDevices.enumerateDevices();
        if (devices &&
            (devices.length === 0 || devices.every(d => d.deviceId === ""))) {
            await navigator.mediaDevices.getUserMedia({
                video: true
            });
        }

        // Ask again, if the user allowed it the device list is now poplated.
        // If not, the const returns an empty array.
        devices = await navigator.mediaDevices.enumerateDevices();
        if (devices && devices.length) {
            const deviceResults = [];
            devices.filter(device => device.kind === 'videoinput')
                .forEach(device => {
                    const { deviceId, label } = device;
                    deviceResults.push({ deviceId, label });
                });

            if (onDevicesAvailable) {
                onDevicesAvailable(deviceResults);
            }
        }
    } catch (error) {
        console.log(error);
    }

    if (onDevicesAvailable) {
        onDevicesAvailable([]);
    }
}

This is something that is documented to work here:

• https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/import-export-interop?view=aspnetcore-7.0

That document also doesn't link to the APIs available. JSType.Promise for example, isn't a real type, instead it's JSType.Promise<TJSType>.

[maraf]

In .NET 7 we are not able to pass nested generic types. So types like Task<string[]> or Action<List<int>> are not supported. We can bypass that limitation by returning an JSObject and than do additional interop calls on that object.

async function getVideoDevices() {
    await ...
    ...
    return ["a", "b", "c"];
}

[JSImport("getVideoDevices")]
public static partial Task<JSObject> GetVideoDevicesAsync();

...
var devices = await GetVideoDevicesAsync();
for (int i = 0; i < devices.GetPropertyAsInt32("length"); i++)
    Console.WriteLine(devices.GetPropertyAsString(i.ToString()));

The item of the returned array can also be an JSObject and you can access by calling devices.GetPropertyAsJSObject(i.ToString()).

As such interop is quite chatty as every GetProperty*** on JSObject cross the boundary between JavaScript and WebAssembly. An alternative is some situations could be serializing response to JSON and passing to WebAssembly as string.

Another alternative is to make JavaScript function "statefull". Store list of devices in the JavaScript variable and use it in additional interop calls.