JSObjectReference

AspNetCore.sln

@@ -1507,6 +1507,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.Extensions.Diagno
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.Extensions.Diagnostics.HealthChecks.Tests", "src\HealthChecks\HealthChecks\test\Microsoft.Extensions.Diagnostics.HealthChecks.Tests.csproj", "{7509AA1E-3093-4BEE-984F-E11579E98A11}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.JSInterop.Tests", "src\JSInterop\Microsoft.JSInterop\test\Microsoft.JSInterop.Tests.csproj", "{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -7179,6 +7181,18 @@ Global
 		{7509AA1E-3093-4BEE-984F-E11579E98A11}.Release|x64.Build.0 = Release|Any CPU
 		{7509AA1E-3093-4BEE-984F-E11579E98A11}.Release|x86.ActiveCfg = Release|Any CPU
 		{7509AA1E-3093-4BEE-984F-E11579E98A11}.Release|x86.Build.0 = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|x64.Build.0 = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Debug|x86.Build.0 = Debug|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|Any CPU.Build.0 = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|x64.ActiveCfg = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|x64.Build.0 = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|x86.ActiveCfg = Release|Any CPU
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -7934,6 +7948,7 @@ Global
 		{B06040BC-DA28-4923-8CAC-20EB517D471B} = {22D7D74B-565D-4047-97B4-F149B1A13350}
 		{55CACC1F-FE96-47C8-8073-91F4CAA55C75} = {2A91479A-4ABE-4BB7-9A5E-CA3B9CCFC69E}
 		{7509AA1E-3093-4BEE-984F-E11579E98A11} = {7CB09412-C9B0-47E8-A8C3-311AA4CFDE04}
+		{DAAB6B35-CBD2-4573-B633-CDD42F583A0E} = {16898702-3E33-41C1-B8D8-4CE3F1D46BD9}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {3E8720B3-DBDD-498C-B383-2CC32A054E8F}

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

@@ -71,7 +71,7 @@ private void EndInvokeDotNetCore(string callId, bool success, object resultOrErr
                 JsonSerializer.Serialize(new[] { callId, success, resultOrError }, JsonSerializerOptions));
         }
 
-        protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson)
+        protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
         {
             if (_clientProxy is null)
             {
@@ -83,7 +83,7 @@ protected override void BeginInvokeJS(long asyncHandle, string identifier, strin
 
             Log.BeginInvokeJS(_logger, asyncHandle, identifier);
 
-            _clientProxy.SendAsync("JS.BeginInvokeJS", asyncHandle, identifier, argsJson);
+            _clientProxy.SendAsync("JS.BeginInvokeJS", asyncHandle, identifier, argsJson, (int)resultType, targetInstanceId);
         }
 
         public static class Log

src/Components/Web.JS/src/Boot.Server.ts

@@ -97,7 +97,7 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
 
   connection.on('JS.AttachComponent', (componentId, selector) => attachRootComponentToLogicalElement(0, circuit.resolveElement(selector), componentId));
   connection.on('JS.BeginInvokeJS', DotNet.jsCallDispatcher.beginInvokeJSFromDotNet);
-  connection.on('JS.EndInvokeDotNet', (args: string) => DotNet.jsCallDispatcher.endInvokeDotNetFromJS(...(JSON.parse(args) as [string, boolean, unknown])));
+  connection.on('JS.EndInvokeDotNet', (args: string) => DotNet.jsCallDispatcher.endInvokeDotNetFromJS(...(DotNet.parseJsonWithRevivers(args) as [string, boolean, unknown])));
 
   const renderQueue = RenderQueue.getOrCreate(logger);
   connection.on('JS.RenderBatch', (batchId: number, batchData: Uint8Array) => {

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

@@ -32,6 +32,9 @@ async function boot(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
     }
   });
 
+  // Configure JS interop
+  window['Blazor']._internal.invokeJSFromDotNet = invokeJSFromDotNet;
+
   // Configure environment for execution under Mono WebAssembly with shared-memory rendering
   const platform = Environment.setPlatform(monoPlatform);
   window['Blazor'].platform = platform;
@@ -84,6 +87,28 @@ async function boot(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
   platform.callEntryPoint(resourceLoader.bootConfig.entryAssembly);
 }
 
+function invokeJSFromDotNet(callInfo: Pointer, arg0: any, arg1: any, arg2: any): any {
+  const functionIdentifier = monoPlatform.readStringField(callInfo, 0)!;
+  const resultType = monoPlatform.readInt32Field(callInfo, 4);
+  const marshalledCallArgsJson = monoPlatform.readStringField(callInfo, 8);
+  const targetInstanceId = monoPlatform.readUint64Field(callInfo, 20);
+
+  if (marshalledCallArgsJson !== null) {
+    const marshalledCallAsyncHandle = monoPlatform.readUint64Field(callInfo, 12);
+
+    if (marshalledCallAsyncHandle !== 0) {
+      DotNet.jsCallDispatcher.beginInvokeJSFromDotNet(marshalledCallAsyncHandle, functionIdentifier, marshalledCallArgsJson, resultType, targetInstanceId);
+      return 0;
+    } else {
+      const resultJson = DotNet.jsCallDispatcher.invokeJSFromDotNet(functionIdentifier, marshalledCallArgsJson, resultType, targetInstanceId)!;
+      return resultJson === null ? 0 : BINDING.js_string_to_mono_string(resultJson);
+    }
+  } else {
+    const func = DotNet.jsCallDispatcher.findJSFunction(functionIdentifier, targetInstanceId);
+    return func.call(null, arg0, arg1, arg2);
+  }
+}
+
 window['Blazor'].start = boot;
 if (shouldAutoStart()) {
   boot().catch(error => {

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

@@ -16,12 +16,7 @@ internal static class InternalCalls
         // in driver.c in the Mono distribution
         /// See: https://github.com/mono/mono/blob/90574987940959fe386008a850982ea18236a533/sdks/wasm/src/driver.c#L318-L319
 
-        // We're passing asyncHandle by ref not because we want it to be writable, but so it gets
-        // passed as a pointer (4 bytes). We can pass 4-byte values, but not 8-byte ones.
         [MethodImpl(MethodImplOptions.InternalCall)]
-        public static extern string InvokeJSMarshalled(out string exception, ref long asyncHandle, string functionIdentifier, string argsJson);
-
-        [MethodImpl(MethodImplOptions.InternalCall)]
-        public static extern TRes InvokeJSUnmarshalled<T0, T1, T2, TRes>(out string exception, string functionIdentifier, [AllowNull] T0 arg0, [AllowNull] T1 arg1, [AllowNull] T2 arg2);
+        public static extern TRes InvokeJS<T0, T1, T2, TRes>(out string exception, ref JSCallInfo callInfo, [AllowNull] T0 arg0, [AllowNull] T1 arg1, [AllowNull] T2 arg2);
     }
 }

src/Components/WebAssembly/JSInterop/src/JSCallInfo.cs

@@ -0,0 +1,27 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System.Runtime.InteropServices;
+using Microsoft.JSInterop;
+
+namespace WebAssembly.JSInterop
+{
+    [StructLayout(LayoutKind.Explicit, Pack = 4)]
+    internal struct JSCallInfo
+    {
+        [FieldOffset(0)]
+        public string FunctionIdentifier;
+
+        [FieldOffset(4)]
+        public JSCallResultType ResultType;
+
+        [FieldOffset(8)]
+        public string MarshalledCallArgsJson;
+
+        [FieldOffset(12)]
+        public long MarshalledCallAsyncHandle;
+
+        [FieldOffset(20)]
+        public long TargetInstanceId;
+    }
+}

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

@@ -14,19 +14,37 @@ namespace Microsoft.JSInterop.WebAssembly
     public abstract class WebAssemblyJSRuntime : JSInProcessRuntime, IJSUnmarshalledRuntime
     {
         /// <inheritdoc />
-        protected override string InvokeJS(string identifier, string argsJson)
+        protected override string InvokeJS(string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
         {
-            var noAsyncHandle = default(long);
-            var result = InternalCalls.InvokeJSMarshalled(out var exception, ref noAsyncHandle, identifier, argsJson);
+            var callInfo = new JSCallInfo
+            {
+                FunctionIdentifier = identifier,
+                TargetInstanceId = targetInstanceId,
+                ResultType = resultType,
+                MarshalledCallArgsJson = argsJson ?? "[]",
+                MarshalledCallAsyncHandle = default
+            };
+
+            var result = InternalCalls.InvokeJS<object, object, object, string>(out var exception, ref callInfo, null, null, null);
+
             return exception != null
                 ? throw new JSException(exception)
                 : result;
         }
 
         /// <inheritdoc />
-        protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson)
+        protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
         {
-            InternalCalls.InvokeJSMarshalled(out _, ref asyncHandle, identifier, argsJson);
+            var callInfo = new JSCallInfo
+            {
+                FunctionIdentifier = identifier,
+                TargetInstanceId = targetInstanceId,
+                ResultType = resultType,
+                MarshalledCallArgsJson = argsJson ?? "[]",
+                MarshalledCallAsyncHandle = asyncHandle
+            };
+
+            InternalCalls.InvokeJS<object, object, object, string>(out _, ref callInfo, null, null, null);
         }
 
         protected override void EndInvokeDotNet(DotNetInvocationInfo callInfo, in DotNetInvocationResult dispatchResult)
@@ -39,7 +57,7 @@ protected override void EndInvokeDotNet(DotNetInvocationInfo callInfo, in DotNet
             // We pass 0 as the async handle because we don't want the JS-side code to
             // send back any notification (we're just providing a result for an existing async call)
             var args = JsonSerializer.Serialize(new[] { callInfo.CallId, dispatchResult.Success, resultOrError }, JsonSerializerOptions);
-            BeginInvokeJS(0, "DotNet.jsCallDispatcher.endInvokeDotNetFromJS", args);
+            BeginInvokeJS(0, "DotNet.jsCallDispatcher.endInvokeDotNetFromJS", args, JSCallResultType.Default, 0);
         }
 
         /// <inheritdoc />
@@ -57,7 +75,14 @@ TResult IJSUnmarshalledRuntime.InvokeUnmarshalled<T0, T1, TResult>(string identi
         /// <inheritdoc />
         TResult IJSUnmarshalledRuntime.InvokeUnmarshalled<T0, T1, T2, TResult>(string identifier, T0 arg0, T1 arg1, T2 arg2)
         {
-            var result = InternalCalls.InvokeJSUnmarshalled<T0, T1, T2, TResult>(out var exception, identifier, arg0, arg1, arg2);
+            var callInfo = new JSCallInfo
+            {
+                FunctionIdentifier = identifier,
+                ResultType = ResultTypeFromGeneric<TResult>()
+            };
+
+            var result = InternalCalls.InvokeJS<T0, T1, T2, TResult>(out var exception, ref callInfo, arg0, arg1, arg2);
+
             return exception != null
                 ? throw new JSException(exception)
                 : result;

src/Components/test/E2ETest/Tests/InteropTest.cs

@@ -55,10 +55,13 @@ public void CanInvokeDotNetMethods()
                 ["result7Async"] = @"[{""id"":6,""isValid"":true,""data"":{""source"":""Some random text with at least 6 characters"",""start"":6,""length"":6}},6,123,24,48,6.25]",
                 ["result8Async"] = @"[{""id"":7,""isValid"":false,""data"":{""source"":""Some random text with at least 7 characters"",""start"":7,""length"":7}},7,123,28,56,7.25,[0.5,1.5,2.5,3.5,4.5,5.5,6.5]]",
                 ["result9Async"] = @"[{""id"":8,""isValid"":true,""data"":{""source"":""Some random text with at least 8 characters"",""start"":8,""length"":8}},8,123,32,64,8.25,[0.5,1.5,2.5,3.5,4.5,5.5,6.5,7.5],{""source"":""Some random text with at least 7 characters"",""start"":9,""length"":9}]",
+                ["roundTripJSObjectReferenceAsync"] = @"""successful""",
+                ["invokeDisposedJSObjectReferenceExceptionAsync"] = @"""JS object instance with ID",
                 ["AsyncThrowSyncException"] = @"""System.InvalidOperationException: Threw a sync exception!",
                 ["AsyncThrowAsyncException"] = @"""System.InvalidOperationException: Threw an async exception!",
                 ["SyncExceptionFromAsyncMethod"] = "Function threw a sync exception!",
                 ["AsyncExceptionFromAsyncMethod"] = "Function threw an async exception!",
+                ["JSObjectReferenceInvokeNonFunctionException"] = "The value 'nonFunction' is not a function.",
                 ["resultReturnDotNetObjectByRefAsync"] = "1001",
                 ["instanceMethodThisTypeNameAsync"] = @"""JavaScriptInterop""",
                 ["instanceMethodStringValueUpperAsync"] = @"""MY STRING""",
@@ -69,6 +72,10 @@ public void CanInvokeDotNetMethods()
                 ["testDtoAsync"] = "Same",
                 ["returnPrimitiveAsync"] = "123",
                 ["returnArrayAsync"] = "first,second",
+                ["jsObjectReference.identity"] = "Invoked from JSObjectReference",
+                ["jsObjectReference.nested.add"] = "5",
+                ["addViaJSObjectReference"] = "5",
+                ["jsObjectReferenceModule"] = "Returned from module!",
                 ["syncGenericInstanceMethod"] = @"""Initial value""",
                 ["asyncGenericInstanceMethod"] = @"""Updated value 1""",
             };
@@ -93,13 +100,16 @@ public void CanInvokeDotNetMethods()
                 ["result7"] = @"[{""id"":6,""isValid"":true,""data"":{""source"":""Some random text with at least 6 characters"",""start"":6,""length"":6}},6,123,24,48,6.25]",
                 ["result8"] = @"[{""id"":7,""isValid"":false,""data"":{""source"":""Some random text with at least 7 characters"",""start"":7,""length"":7}},7,123,28,56,7.25,[0.5,1.5,2.5,3.5,4.5,5.5,6.5]]",
                 ["result9"] = @"[{""id"":8,""isValid"":true,""data"":{""source"":""Some random text with at least 8 characters"",""start"":8,""length"":8}},8,123,32,64,8.25,[0.5,1.5,2.5,3.5,4.5,5.5,6.5,7.5],{""source"":""Some random text with at least 7 characters"",""start"":9,""length"":9}]",
+                ["roundTripJSObjectReference"] = @"""successful""",
+                ["invokeDisposedJSObjectReferenceException"] = @"""JS object instance with ID",
                 ["ThrowException"] = @"""System.InvalidOperationException: Threw an exception!",
                 ["ExceptionFromSyncMethod"] = "Function threw an exception!",
                 ["resultReturnDotNetObjectByRefSync"] = "1000",
                 ["instanceMethodThisTypeName"] = @"""JavaScriptInterop""",
                 ["instanceMethodStringValueUpper"] = @"""MY STRING""",
                 ["instanceMethodIncomingByRef"] = "123",
                 ["instanceMethodOutgoingByRef"] = "1234",
+                ["jsInProcessObjectReference.identity"] = "Invoked from JSInProcessObjectReference",
                 ["stringValueUpperSync"] = "MY STRING",
                 ["testDtoNonSerializedValueSync"] = "99999",
                 ["testDtoSync"] = "Same",

src/Components/test/testassets/BasicTestApp/InteropComponent.razor

@@ -46,6 +46,8 @@
     <p id="@nameof(SyncExceptionFromAsyncMethod)">@SyncExceptionFromAsyncMethod?.Message</p>
     <h2>@nameof(AsyncExceptionFromAsyncMethod)</h2>
     <p id="@nameof(AsyncExceptionFromAsyncMethod)">@AsyncExceptionFromAsyncMethod?.Message</p>
+    <h2>@nameof(JSObjectReferenceInvokeNonFunctionException)</h2>
+    <p id="@nameof(JSObjectReferenceInvokeNonFunctionException)">@JSObjectReferenceInvokeNonFunctionException?.Message</p>
 </div>
 @if (DoneWithInterop)
 {
@@ -59,6 +61,7 @@
     public JSException ExceptionFromSyncMethod { get; set; }
     public JSException SyncExceptionFromAsyncMethod { get; set; }
     public JSException AsyncExceptionFromAsyncMethod { get; set; }
+    public JSException JSObjectReferenceInvokeNonFunctionException { get; set; }
 
     public IDictionary<string, object> ReceiveDotNetObjectByRefResult { get; set; } = new Dictionary<string, object>();
     public IDictionary<string, object> ReceiveDotNetObjectByRefAsyncResult { get; set; } = new Dictionary<string, object>();
@@ -134,6 +137,28 @@
             ReturnValues["returnArray"] = string.Join(",", ((IJSInProcessRuntime)JSRuntime).Invoke<Segment[]>("returnArray").Select(x => x.Source).ToArray());
         }
 
+        var jsObjectReference = await JSRuntime.InvokeAsync<JSObjectReference>("returnJSObjectReference");
+        ReturnValues["jsObjectReference.identity"] = await jsObjectReference.InvokeAsync<string>("identity", "Invoked from JSObjectReference");
+        ReturnValues["jsObjectReference.nested.add"] = (await jsObjectReference.InvokeAsync<int>("nested.add", 2, 3)).ToString();
+        ReturnValues["addViaJSObjectReference"] = (await JSRuntime.InvokeAsync<int>("addViaJSObjectReference", jsObjectReference, 2, 3)).ToString();
+
+        try
+        {
+            await jsObjectReference.InvokeAsync<object>("nonFunction");
+        }
+        catch (JSException e)
+        {
+            JSObjectReferenceInvokeNonFunctionException = e;
+        }
+
+        var module = await JSRuntime.InvokeAsync<JSObjectReference>("import", "./js/testmodule.js");
+        ReturnValues["jsObjectReferenceModule"] = await module.InvokeAsync<string>("identity", "Returned from module!");
+
+        if (shouldSupportSyncInterop)
+        {
+            InvokeInProcessJSInterop();
+        }
+
         Invocations = invocations;
         DoneWithInterop = true;
     }
@@ -163,6 +188,14 @@
         ReceiveDotNetObjectByRefResult["testDto"] = result.TestDto.Value == passDotNetObjectByRef ? "Same" : "Different";
     }
 
+    public void InvokeInProcessJSInterop()
+    {
+        var inProcRuntime = ((IJSInProcessRuntime)JSRuntime);
+
+        var jsInProcObjectReference = inProcRuntime.Invoke<JSInProcessObjectReference>("returnJSObjectReference");
+        ReturnValues["jsInProcessObjectReference.identity"] = jsInProcObjectReference.Invoke<string>("identity", "Invoked from JSInProcessObjectReference");
+    }
+
     public class PassDotNetObjectByRefArgs
     {
         public string StringValue { get; set; }

src/Components/test/testassets/BasicTestApp/InteropTest/JavaScriptInterop.cs

@@ -414,6 +414,47 @@ public static int ExtractNonSerializedValue(DotNetObjectReference<TestDTO> objec
             return objectByRef.Value.GetNonSerializedValue();
         }
 
+        [JSInvokable]
+        public static JSObjectReference RoundTripJSObjectReference(JSObjectReference jsObjectReference)
+        {
+            return jsObjectReference;
+        }
+
+        [JSInvokable]
+        public static async Task<JSObjectReference> RoundTripJSObjectReferenceAsync(JSObjectReference jSObjectReference)
+        {
+            await Task.Yield();
+            return jSObjectReference;
+        }
+
+        [JSInvokable]
+        public static string InvokeDisposedJSObjectReferenceException(JSInProcessObjectReference jsObjectReference)
+        {
+            try
+            {
+                jsObjectReference.Invoke<object>("noop");
+                return "No exception thrown";
+            } 
+            catch (JSException e)
+            {
+                return e.Message;
+            }
+        }
+
+        [JSInvokable]
+        public static async Task<string> InvokeDisposedJSObjectReferenceExceptionAsync(JSObjectReference jsObjectReference)
+        {
+            try
+            {
+                await jsObjectReference.InvokeVoidAsync("noop");
+                return "No exception thrown";
+            } 
+            catch (JSException e)
+            {
+                return e.Message;
+            }
+        }
+
         [JSInvokable]
         public InstanceMethodOutput InstanceMethod(InstanceMethodInput input)
         {