New JavaScript Interop improvements in .NET 7 RC 1

The discharge of .NET 7 RC 1 has launched the brand new wasm-experimental workload and new JavaScript interop options that enable invoking of .NET code in JavaScript functions working on WebAssembly with out utilizing the Blazor UI element mannequin.

Till this launch, it was attainable to make use of WebAssembly with out the necessity for Blazor by leveraging the Mono WASM SDK, Uno.Wasm.Bootstrap library or the NativeAOT LLVM. Though the brand new workload and options are the idea for Blazor WebAssembly, with .NET 7, utilizing .NET code inside a WebAssembly context is feasible with out use of specialised libraries or Blazor and leveraging solely utilities from inside .NET.

To permit utilization of .NET code inside JavaScript, you should utilize the brand new JSExport attribute to reveal a technique to JavaScript. When utilized to a technique in .NET, the dotnet.js runtime exposes it by means of the getAssemblyExports perform and you should utilize it as follows:

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(); // Name into your technique from ```js
await dotnet.run(); // Run the Program Fundamental technique

To make use of JavaScript code within .NET, you should utilize the JSImport attribute to reveal a JavaScript technique to .NET. The next code snippet demonstrates learn how to enable .NET to import a technique.

 

import  dotnet  from './dotnet.js'
 
const  setModuleImports, getConfig, runMainAndExit  = await dotnet.create();
 
const configuration = getConfig();
 
// Set module imports that may be known as from .NET
setModuleImports("major.js", 
    window: 
        location: 
            href: () => globalThis.window.location.href
        
    
);
await dotnet.run(); // Run the Program Fundamental technique

Alternatively, as an alternative of needing to name setModuleImports, you’ll be able to create a ES6 module, export the strategies from there and use JSHost to load a JavaScript ES6 module immediately in .NET:

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

And on the .NET facet, that is how one can import the strategy, whatever the publicity variant you employ:

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

Pavel Šavara’s GitHub repository presents extra code samples, together with a more detailed explanation of some elements of the code within the accompanying article. A video overview of the identical pattern is on the market within the ASP.NET Community Standup recording.

With this launch, the IJSUnmarshalledRuntime interface, beforehand used to make unmarshalled synchronous calls to JavaScript interop, turns into out of date, and builders are inspired to make use of JSImport and JSExport going ahead.

Debugging the interop code shouldn’t be attainable from Visible Studio but, however the utility will be debugged by working the appliance from the command-line and attaching the Visible Studio Code or Chrome debuggers.

Within the context of Blazor WebAssembly, utilization of the brand new interop characteristic is really helpful solely in situations when it’s essential to use your .NET code on the consumer facet solely, IJSRuntime remains to be the really helpful method to do asynchronous JavaScript interop in different situations and is supported throughout all Blazor runtimes.

The .NET 7 RC 1 SDK is on the market for obtain and after set up, you’ll be able to set up the brand new WebAssembly workload and create a brand new WebAssembly browser utility by working the next instructions:

dotnet workload set up wasm-tools
dotnet workload set up wasm-experimental
dotnet new wasmbrowser

This launch makes extra enhancements for Blazor functions together with Debugging Improvements, availability of WebAssembly build tools for .NET 6, and Dynamic authentication requests in Blazor WebAssembly.

Microsoft has a extra complete list of updates in .NET 7 RC 1 for ASP.NET Core and the official announcement for additional info on what’s new in .NET 7 normally.