Add InvokeNew, GetValue & SetValue to JS interop API

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

@@ -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/Server/src/Circuits/RemoteJSRuntime.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(JSInvocationInfo invocationInfo)
     {
         if (_clientProxy is null)
         {
@@ -123,9 +138,11 @@ protected override void BeginInvokeJS(long asyncHandle, string identifier, strin
             }
         }
 
-        Log.BeginInvokeJS(_logger, asyncHandle, identifier);
+        var invocationInfoJson = invocationInfo.ToJson();
+
+        Log.BeginInvokeJS(_logger, invocationInfo.AsyncHandle, invocationInfo.Identifier);
 
-        _clientProxy.SendAsync("JS.BeginInvokeJS", asyncHandle, identifier, argsJson, (int)resultType, targetInstanceId);
+        _clientProxy.SendAsync("JS.BeginInvokeJS", invocationInfoJson);
     }
 
     protected override void ReceiveByteArray(int id, byte[] data)

src/Components/Server/test/ProtectedBrowserStorageTest.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/Web.JS/src/Boot.WebAssembly.Common.ts

@@ -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,13 @@ 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 {
-  if (asyncHandle !== 0) {
-    dispatcher.beginInvokeJSFromDotNet(asyncHandle, identifier, argsJson, resultType, targetInstanceId);
+function invokeJSJson(invocationInfoJson: string): string | null {
+  const invocationInfo: DotNet.JSInvocationInfo = JSON.parse(invocationInfoJson);
+  if (invocationInfo.asyncHandle !== 0) {
+    dispatcher.beginInvokeJSFromDotNet(invocationInfo);
     return null;
   } else {
-    return dispatcher.invokeJSFromDotNet(identifier, argsJson, resultType, targetInstanceId);
+    return dispatcher.invokeJSFromDotNet(invocationInfo);
   }
 }
 

src/Components/Web.JS/src/GlobalExports.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?: (invocationInfoString: string) => string | null;
     endInvokeDotNetFromJS?: (callId: string, success: boolean, resultJsonOrErrorMessage: string) => void;
     receiveByteArray?: (id: number, data: Uint8Array) => void;
     getPersistedState?: () => string;

src/Components/Web.JS/src/Platform/Circuits/CircuitManager.ts

@@ -127,7 +127,7 @@ export class CircuitManager implements DotNet.DotNetCallDispatcher {
     const connection = connectionBuilder.build();
 
     connection.on('JS.AttachComponent', (componentId, selector) => attachRootComponentToLogicalElement(WebRendererId.Server, this.resolveElement(selector), componentId, false));
-    connection.on('JS.BeginInvokeJS', this._dispatcher.beginInvokeJSFromDotNet.bind(this._dispatcher));
+    connection.on('JS.BeginInvokeJS', (invocationInfoJson: string) => this.beginInvokeJSJson(invocationInfoJson));
     connection.on('JS.EndInvokeDotNet', this._dispatcher.endInvokeDotNetFromJS.bind(this._dispatcher));
     connection.on('JS.ReceiveByteArray', this._dispatcher.receiveByteArray.bind(this._dispatcher));
 
@@ -232,6 +232,11 @@ export class CircuitManager implements DotNet.DotNetCallDispatcher {
     return true;
   }
 
+  private beginInvokeJSJson(invocationInfoJson: string) {    
+    const invocationInfo: DotNet.JSInvocationInfo = JSON.parse(invocationInfoJson);
+    this._dispatcher.beginInvokeJSFromDotNet(invocationInfo);
+  }
+
   // Implements DotNet.DotNetCallDispatcher
   public beginInvokeDotNetFromJS(callId: number, assemblyName: string | null, methodIdentifier: string, dotNetObjectId: number | null, argsJson: string): void {
     this.throwIfDispatchingWhenDisposed();

src/Components/Web.JS/src/Platform/WebView/WebViewIpcReceiver.ts

@@ -33,7 +33,7 @@ export function startIpcReceiver(): void {
       showErrorNotification();
     },
 
-    'BeginInvokeJS': dispatcher.beginInvokeJSFromDotNet.bind(dispatcher),
+    'BeginInvokeJS': beginInvokeJSJson,
 
     'EndInvokeDotNet': dispatcher.endInvokeDotNetFromJS.bind(dispatcher),
 
@@ -80,3 +80,8 @@ function base64ToArrayBuffer(base64: string): Uint8Array {
   }
   return result;
 }
+
+function beginInvokeJSJson(invocationInfoJson: string) {
+  const invocationInfo = JSON.parse(invocationInfoJson);
+  dispatcher.beginInvokeJSFromDotNet(invocationInfo);
+}

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

@@ -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(JSInvocationInfo invocationInfo);
 }

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

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

src/Components/Web/src/WebRenderer.cs

@@ -10,6 +10,7 @@
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
 using Microsoft.JSInterop;
+using Microsoft.JSInterop.Infrastructure;
 using static Microsoft.AspNetCore.Internal.LinkerFlags;
 
 namespace Microsoft.AspNetCore.Components.RenderTree;
@@ -130,7 +131,16 @@ private void AttachWebRendererInterop(IJSRuntime jsRuntime, JsonSerializerOption
             newJsonOptions.TypeInfoResolverChain.Add(WebRendererSerializerContext.Default);
             newJsonOptions.TypeInfoResolverChain.Add(JsonConverterFactoryTypeInfoResolver<DotNetObjectReference<WebRendererInteropMethods>>.Instance);
             var argsJson = JsonSerializer.Serialize(args, newJsonOptions);
-            inProcessRuntime.InvokeJS(JSMethodIdentifier, argsJson, JSCallResultType.JSVoidResult, 0);
+            var invocationInfo = new JSInvocationInfo
+            {
+                AsyncHandle = 0,
+                TargetInstanceId = 0,
+                Identifier = JSMethodIdentifier,
+                CallType = JSCallType.FunctionCall,
+                ResultType = JSCallResultType.JSVoidResult,
+                ArgsJson = argsJson,
+            };
+            inProcessRuntime.InvokeJS(invocationInfo);
         }
         else
         {

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

@@ -18,12 +18,7 @@ internal static partial class InternalCalls
     public static extern TRes InvokeJS<T0, T1, T2, TRes>(out string exception, ref JSCallInfo callInfo, [AllowNull] T0 arg0, [AllowNull] T1 arg1, [AllowNull] T2 arg2);
 
     [JSImport("Blazor._internal.invokeJSJson", "blazor-internal")]
-    public static partial string InvokeJSJson(
-        string identifier,
-        [JSMarshalAs<JSType.Number>] long targetInstanceId,
-        int resultType,
-        string argsJson,
-        [JSMarshalAs<JSType.Number>] long asyncHandle);
+    public static partial string InvokeJSJson(string invocationInfoString);
 
     [JSImport("Blazor._internal.endInvokeDotNetFromJS", "blazor-internal")]
     public static partial void EndInvokeDotNetFromJS(

src/Components/WebAssembly/JSInterop/src/PublicAPI.Unshipped.txt

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

src/Components/WebAssembly/JSInterop/src/WebAssemblyJSRuntime.cs

@@ -25,9 +25,27 @@ protected WebAssemblyJSRuntime()
     /// <inheritdoc />
     protected override string InvokeJS(string identifier, [StringSyntax(StringSyntaxAttribute.Json)] string? argsJson, JSCallResultType resultType, long targetInstanceId)
     {
+        var invocationInfo = new JSInvocationInfo
+        {
+            AsyncHandle = 0,
+            TargetInstanceId = targetInstanceId,
+            Identifier = identifier,
+            CallType = JSCallType.FunctionCall,
+            ResultType = resultType,
+            ArgsJson = argsJson,
+        };
+
+        return InvokeJS(invocationInfo) ?? "";
+    }
+
+    /// <inheritdoc />
+    protected override string? InvokeJS(JSInvocationInfo invocationInfo)
+    {
+        var invocationInfoJson = invocationInfo.ToJson();
+
         try
         {
-            return InternalCalls.InvokeJSJson(identifier, targetInstanceId, (int)resultType, argsJson ?? "[]", 0);
+            return InternalCalls.InvokeJSJson(invocationInfoJson);
         }
         catch (Exception ex)
         {
@@ -38,7 +56,24 @@ protected override string InvokeJS(string identifier, [StringSyntax(StringSyntax
     /// <inheritdoc />
     protected override void BeginInvokeJS(long asyncHandle, string identifier, [StringSyntax(StringSyntaxAttribute.Json)] string? argsJson, JSCallResultType resultType, long targetInstanceId)
     {
-        InternalCalls.InvokeJSJson(identifier, targetInstanceId, (int)resultType, argsJson ?? "[]", asyncHandle);
+        var invocationInfo = new JSInvocationInfo
+        {
+            AsyncHandle = asyncHandle,
+            TargetInstanceId = targetInstanceId,
+            Identifier = identifier,
+            CallType = JSCallType.FunctionCall,
+            ResultType = resultType,
+            ArgsJson = argsJson,
+        };
+
+        BeginInvokeJS(invocationInfo);
+    }
+
+    /// <inheritdoc />
+    protected override void BeginInvokeJS(JSInvocationInfo invocationInfo)
+    {
+        var invocationInfoJson = invocationInfo.ToJson();
+        InternalCalls.InvokeJSJson(invocationInfoJson);
     }
 
     /// <inheritdoc />