Add new methods to JS interop API (#61246)

* Add InvokeNewAsync, GetValueAsync & SetValueAsync to IJSRuntime

* Add sync variants to IJSInProcessRuntime

* Add relevant variants to IJSObjectReference and IJSInProcessReference

* Add BeginInvokeJS overload using JSInvocationInfo configuration DTO to JSRuntime

* Add InvokeJS overload using JSInvocationInfo configuration DTO to JSInProcessRuntime

* Add support for the new operations to Microsoft.JSInterop.JS

Author: oroztocil

package-lock.json

@@ -1,17 +1,37 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using System.Diagnostics.CodeAnalysis;
 using Microsoft.JSInterop;
+using static Microsoft.AspNetCore.Internal.LinkerFlags;
 
 namespace Microsoft.AspNetCore.Components.Endpoints;
 
 internal sealed class UnsupportedJavaScriptRuntime : IJSRuntime
 {
     private const string Message = "JavaScript interop calls cannot be issued during server-side static rendering, because the page has not yet loaded in the browser. Statically-rendered components must wrap any JavaScript interop calls in conditional logic to ensure those interop calls are not attempted during static rendering.";
 
-    public ValueTask<TValue> InvokeAsync<TValue>(string identifier, CancellationToken cancellationToken, object?[]? args)
+    public ValueTask<TValue> InvokeAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier, CancellationToken cancellationToken, object?[]? args)
         => throw new InvalidOperationException(Message);
 
-    ValueTask<TValue> IJSRuntime.InvokeAsync<TValue>(string identifier, object?[]? args)
+    ValueTask<TValue> IJSRuntime.InvokeAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier, object?[]? args)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask<IJSObjectReference> InvokeNewAsync(string identifier, object?[]? args)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask<IJSObjectReference> InvokeNewAsync(string identifier, CancellationToken cancellationToken, object?[]? args)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask<TValue> GetValueAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask<TValue> GetValueAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier, CancellationToken cancellationToken)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask SetValueAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier, TValue value)
+        => throw new InvalidOperationException(Message);
+
+    public ValueTask SetValueAsync<[DynamicallyAccessedMembers(JsonSerialized)] TValue>(string identifier, TValue value, CancellationToken cancellationToken)
         => throw new InvalidOperationException(Message);
 }

src/Components/Endpoints/src/DependencyInjection/UnsupportedJavaScriptRuntime.cs

@@ -105,6 +105,21 @@ protected override void SendByteArray(int id, byte[] data)
     }
 
     protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
+    {
+        var invocationInfo = new JSInvocationInfo
+        {
+            AsyncHandle = asyncHandle,
+            TargetInstanceId = targetInstanceId,
+            Identifier = identifier,
+            CallType = JSCallType.FunctionCall,
+            ResultType = resultType,
+            ArgsJson = argsJson,
+        };
+
+        BeginInvokeJS(invocationInfo);
+    }
+
+    protected override void BeginInvokeJS(in JSInvocationInfo invocationInfo)
     {
         if (_clientProxy is null)
         {
@@ -123,9 +138,16 @@ protected override void BeginInvokeJS(long asyncHandle, string identifier, strin
             }
         }
 
-        Log.BeginInvokeJS(_logger, asyncHandle, identifier);
+        Log.BeginInvokeJS(_logger, invocationInfo.AsyncHandle, invocationInfo.Identifier);
 
-        _clientProxy.SendAsync("JS.BeginInvokeJS", asyncHandle, identifier, argsJson, (int)resultType, targetInstanceId);
+        _clientProxy.SendAsync(
+            "JS.BeginInvokeJS",
+            invocationInfo.AsyncHandle,
+            invocationInfo.Identifier,
+            invocationInfo.ArgsJson,
+            (int)invocationInfo.ResultType,
+            invocationInfo.TargetInstanceId,
+            (int)invocationInfo.CallType);
     }
 
     protected override void ReceiveByteArray(int id, byte[] data)

src/Components/Server/src/Circuits/RemoteJSRuntime.cs

@@ -352,19 +352,54 @@ private static string ProtectionPrefix(string purpose)
 
     class TestJSRuntime : IJSRuntime
     {
-        public List<(string Identifier, object[] Args)> Invocations { get; }
-            = new List<(string Identifier, object[] Args)>();
+        public List<(string Identifier, object[] Args, JSCallType CallType)> Invocations { get; } = [];
 
         public object NextInvocationResult { get; set; }
 
         public ValueTask<TValue> InvokeAsync<TValue>(string identifier, CancellationToken cancellationToken, object[] args)
         {
-            Invocations.Add((identifier, args));
+            Invocations.Add((identifier, args, JSCallType.FunctionCall));
             return (ValueTask<TValue>)NextInvocationResult;
         }
 
         public ValueTask<TValue> InvokeAsync<TValue>(string identifier, object[] args)
             => InvokeAsync<TValue>(identifier, cancellationToken: CancellationToken.None, args: args);
+
+        public ValueTask<IJSObjectReference> InvokeNewAsync(string identifier, object[] args)
+        {
+            Invocations.Add((identifier, args, JSCallType.NewCall));
+            return (ValueTask<IJSObjectReference>)NextInvocationResult;
+        }
+
+        public ValueTask<IJSObjectReference> InvokeNewAsync(string identifier, CancellationToken cancellationToken, object[] args)
+        {
+            Invocations.Add((identifier, args, JSCallType.NewCall));
+            return (ValueTask<IJSObjectReference>)NextInvocationResult;
+        }
+
+        public ValueTask<TValue> GetValueAsync<TValue>(string identifier)
+        {
+            Invocations.Add((identifier, [], JSCallType.GetValue));
+            return (ValueTask<TValue>)NextInvocationResult;
+        }
+
+        public ValueTask<TValue> GetValueAsync<TValue>(string identifier, CancellationToken cancellationToken)
+        {
+            Invocations.Add((identifier, [], JSCallType.GetValue));
+            return (ValueTask<TValue>)NextInvocationResult;
+        }
+
+        public ValueTask SetValueAsync<TValue>(string identifier, TValue value)
+        {
+            Invocations.Add((identifier, [value], JSCallType.SetValue));
+            return ValueTask.CompletedTask;
+        }
+
+        public ValueTask SetValueAsync<TValue>(string identifier, TValue value, CancellationToken cancellationToken)
+        {
+            Invocations.Add((identifier, [value], JSCallType.SetValue));
+            return ValueTask.CompletedTask;
+        }
     }
 
     class TestProtectedBrowserStorage : ProtectedBrowserStorage

src/Components/Server/test/ProtectedBrowserStorageTest.cs

@@ -14,6 +14,7 @@ import { addDispatchEventMiddleware } from './Rendering/WebRendererInteropMethod
 import { WebAssemblyComponentDescriptor, WebAssemblyServerOptions, discoverWebAssemblyPersistedState } from './Services/ComponentDescriptorDiscovery';
 import { receiveDotNetDataStream } from './StreamingInterop';
 import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
+import { DotNet } from '@microsoft/dotnet-js-interop';
 import { MonoConfig } from '@microsoft/dotnet-runtime';
 import { RootComponentManager } from './Services/RootComponentManager';
 import { WebRendererId } from './Rendering/WebRendererId';
@@ -263,12 +264,12 @@ async function scheduleAfterStarted(operations: string): Promise<void> {
   Blazor._internal.updateRootComponents(operations);
 }
 
-function invokeJSJson(identifier: string, targetInstanceId: number, resultType: number, argsJson: string, asyncHandle: number): string | null {
+function invokeJSJson(identifier: string, targetInstanceId: number, resultType: number, argsJson: string, asyncHandle: number, callType: number): string | null {
   if (asyncHandle !== 0) {
-    dispatcher.beginInvokeJSFromDotNet(asyncHandle, identifier, argsJson, resultType, targetInstanceId);
+    dispatcher.beginInvokeJSFromDotNet(asyncHandle, identifier, argsJson, resultType, targetInstanceId, callType);
     return null;
   } else {
-    return dispatcher.invokeJSFromDotNet(identifier, argsJson, resultType, targetInstanceId);
+    return dispatcher.invokeJSFromDotNet(identifier, argsJson, resultType, targetInstanceId, callType);
   }
 }
 

src/Components/Web.JS/src/Boot.WebAssembly.Common.ts

@@ -52,7 +52,7 @@ export interface IBlazor {
     forceCloseConnection?: () => Promise<void>;
     InputFile?: typeof InputFile;
     NavigationLock: typeof NavigationLock;
-    invokeJSJson?: (identifier: string, targetInstanceId: number, resultType: number, argsJson: string, asyncHandle: number) => string | null;
+    invokeJSJson?: (identifier: string, targetInstanceId: number, resultType: number, argsJson: string, asyncHandle: number, callType: number) => string | null;
     endInvokeDotNetFromJS?: (callId: string, success: boolean, resultJsonOrErrorMessage: string) => void;
     receiveByteArray?: (id: number, data: Uint8Array) => void;
     getPersistedState?: () => string;

src/Components/Web.JS/src/GlobalExports.ts

@@ -4,6 +4,7 @@
 using System.ComponentModel;
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.JSInterop;
+using Microsoft.JSInterop.Infrastructure;
 
 namespace Microsoft.AspNetCore.Components.Web.Internal;
 
@@ -17,4 +18,9 @@ public interface IInternalWebJSInProcessRuntime
     /// For internal framework use only.
     /// </summary>
     string InvokeJS(string identifier, [StringSyntax(StringSyntaxAttribute.Json)] string? argsJson, JSCallResultType resultType, long targetInstanceId);
+
+    /// <summary>
+    /// For internal framework use only.
+    /// </summary>
+    string InvokeJS(in JSInvocationInfo invocationInfo);
 }

src/Components/Web/src/Internal/IInternalWebJSInProcessRuntime.cs

@@ -1,2 +1,3 @@
 #nullable enable
+Microsoft.AspNetCore.Components.Web.Internal.IInternalWebJSInProcessRuntime.InvokeJS(in Microsoft.JSInterop.Infrastructure.JSInvocationInfo invocationInfo) -> string!
 virtual Microsoft.AspNetCore.Components.Routing.NavLink.ShouldMatch(string! uriAbsolute) -> bool

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -23,7 +23,8 @@ public static partial string InvokeJSJson(
         [JSMarshalAs<JSType.Number>] long targetInstanceId,
         int resultType,
         string argsJson,
-        [JSMarshalAs<JSType.Number>] long asyncHandle);
+        [JSMarshalAs<JSType.Number>] long asyncHandle,
+        int callType);
 
     [JSImport("Blazor._internal.endInvokeDotNetFromJS", "blazor-internal")]
     public static partial void EndInvokeDotNetFromJS(

src/Components/WebAssembly/JSInterop/src/InternalCalls.cs

@@ -1 +1,3 @@
 #nullable enable
+override Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.BeginInvokeJS(in Microsoft.JSInterop.Infrastructure.JSInvocationInfo invocationInfo) -> void
+override Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeJS(in Microsoft.JSInterop.Infrastructure.JSInvocationInfo invocationInfo) -> string!