New JavaScript interop improvements in .NET 7 RC 1

The release of .NET 7 RC 1 introduced a new wasm-experimental workload and new JavaScript interop capabilities to call .NET code in JavaScript applications running on WebAssembly without using the Blazor UI component model. I can.

Until this release, it was possible to use WebAssembly without requiring Blazor by leveraging the Mono WASM SDK, Uno.Wasm.Bootstrap library, or NativeAOT LLVM. New workloads and features are the foundation of Blazor WebAssembly, but with .NET 7 you can use .NET code within a WebAssembly context without using dedicated libraries or Blazor, leveraging only the utilities inside .NET. increase.

To make .NET code available within JavaScript, methods can be exposed to JavaScript using the new JSExport attribute. Applied to a method in .NET, the dotnet.js runtime exposes it via the getAssemblyExports function and can be used like this:

import { dotnet } from './dotnet.js'
 
const { getAssemblyExports, getConfig, runMainAndExit } = await dotnet.create();
 
const configuration = getConfig();
const exports = await getAssemblyExports(configuration.mainAssemblyName);
const myValue = exports.MyClass.MyMethod(); // Call into your method from ```js
await dotnet.run(); // Run the Program Main method

To use JavaScript code within .NET, expose JavaScript methods to .NET using the JSImport attribute. The following code snippet shows how .NET allows methods to be imported.

import { dotnet } from './dotnet.js'
 
const { setModuleImports, getConfig, runMainAndExit } = await dotnet.create();
 
const configuration = getConfig();
 
// Set module imports that can be called from .NET
setModuleImports("main.js", {
    window: {
        location: {
            href: () => globalThis.window.location.href
        }
    }
});
await dotnet.run(); // Run the Program Main method

Alternatively, instead of calling setModuleImports, you can create an ES6 module, export methods from it, and use JSHost to load the JavaScript ES6 module directly into .NET.

await JSHost.ImportAsync("main.js", "./main.js");

On the .NET side, here’s how to import a method regardless of which public variant you use:

[JSImport("window.location.href", "main.js")]
internal static partial string GetHRef();

Pavel Šavara’s GitHub repository provides additional code samples and detailed descriptions of some of the code in the accompanying articles. A video overview of the same sample is available at the ASP.NET Community Standup Recording.

This release deprecates the IJSUnmarshalledRuntime interface previously used to make unmarshalled synchronous calls to JavaScript interop and encourages developers to use JSImport and JSExport going forward.

You can’t debug interop code from Visual Studio yet, but you can debug your application by running it from the command line and attaching the Visual Studio Code or Chrome debugger.

In the context of Blazor WebAssembly, we recommend using the new interop features only in scenarios where you need to use .NET code only on the client side. IJSRuntime is the recommended and supported way to do asynchronous JavaScript interop in other scenarios. Across all Blazor runtimes.

The .NET 7 RC 1 SDK is available for download and once installed you can run the following commands to install the new WebAssembly workloads and create a new WebAssembly browser application.

dotnet workload install wasm-tools
dotnet workload install wasm-experimental
dotnet new wasmbrowser

This release brings additional improvements for Blazor applications, including improved debugging, availability of WebAssembly build tools for .NET 6, and dynamic authentication requests in Blazor WebAssembly.

Microsoft has prepared a more comprehensive list of .NET 7 RC 1 updates for ASP.NET Core and a formal announcement with more information about what’s new in .NET 7 in general.