Fix handling function references on JS side

Author: oroztocil

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

@@ -108,7 +108,8 @@ public void CanInvokeInteropMethods()
             ["invokeNewWithClassConstructorAsync.function"] = "6",
             ["invokeNewWithNonConstructorAsync"] = "Success",
             // Function reference tests
-            ["changeFunctionViaObjectReferenceAsync"] = "42"
+            ["changeFunctionViaObjectReferenceAsync"] = "42",
+            ["invokeDelegateFromAsAsyncFunction"] = "42"
         };
 
         var expectedSyncValues = new Dictionary<string, string>

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

@@ -614,6 +614,9 @@
         var testClassRef = await JSRuntime.InvokeNewAsync("jsInteropTests.TestClass", "abraka");
         await testClassRef.SetValueAsync("getTextLength", funcRef);
         ReturnValues["changeFunctionViaObjectReferenceAsync"] = (await testClassRef.InvokeAsync<int>("getTextLength")).ToString();
+
+        var funcDelegate = funcRef.AsAsyncFunction<Func<Task<int>>>();
+        ReturnValues["invokeDelegateFromAsAsyncFunction"] = (await funcDelegate()).ToString();
     }
 
     private void FunctionReferenceTests()

src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts

@@ -562,7 +562,17 @@ export module DotNet {
       const targetInstance = cachedJSObjectsById[targetInstanceId];
 
       if (targetInstance) {
-          return targetInstance.resolveInvocationHandler(identifier, callType ?? JSCallType.FunctionCall);
+          if (identifier) {
+              return targetInstance.resolveInvocationHandler(identifier, callType ?? JSCallType.FunctionCall);
+          } else {
+              const wrappedObject = targetInstance.getWrappedObject();
+              
+              if (wrappedObject instanceof Function) {
+                  return wrappedObject;
+              } else {
+                  throw new Error(`JS object instance with ID ${targetInstanceId} is not a function.`);
+              }
+          }
       }
 
       throw new Error(`JS object instance with ID ${targetInstanceId} does not exist (has it been disposed?).`);
@@ -626,7 +636,10 @@ export module DotNet {
               if (!isReadableProperty(parent, memberName)) {
                   throw new Error(`The property '${identifier}' is not defined or is not readable.`);
               }
-              return () => parent[memberName];
+
+              return parent[memberName] instanceof Function
+                  ? () => parent[memberName].bind(parent)
+                  : () => parent[memberName];
           case JSCallType.SetValue:
               if (!isWritableProperty(parent, memberName)) {
                   throw new Error(`The property '${identifier}' is not writable.`);

src/JSInterop/Microsoft.JSInterop/src/Infrastructure/JSFunctionReference.cs

@@ -9,7 +9,7 @@
 namespace Microsoft.JSInterop.Infrastructure;
 
 /// <summary>
-/// TODO(OR): Document this.
+/// Helper for constructing a Func delegate that wraps interop call to a JavaScript function referenced via <see cref="IJSObjectReference"/>.
 /// </summary>
 internal readonly struct JSFunctionReference
 {
@@ -25,9 +25,6 @@ public JSFunctionReference(IJSObjectReference jsObjectReference)
         _jsObjectReference = jsObjectReference;
     }
 
-    /// <summary>
-    /// TODO(OR): Document this.
-    /// </summary>
     public static T CreateInvocationDelegate<T>(IJSObjectReference jsObjectReference) where T : Delegate
     {
         Type delegateType = typeof(T);

src/JSInterop/Microsoft.JSInterop/src/JSObjectReferenceExtensions.cs

@@ -1,9 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using System.Collections.Concurrent;
 using System.Diagnostics.CodeAnalysis;
-using System.Reflection;
 using Microsoft.JSInterop.Infrastructure;
 using static Microsoft.AspNetCore.Internal.LinkerFlags;
 
@@ -171,12 +169,13 @@ public static ValueTask<IJSObjectReference> InvokeNewAsync(this IJSObjectReferen
     }
 
     /// <summary>
-    /// TODO(OR): Document this.
+    /// Converts a JavaScript function reference into a .NET delegate of the specified type.
     /// </summary>
-    /// <typeparam name="T"></typeparam>
-    /// <param name="jsObjectReference"></param>
-    /// <returns></returns>
-    /// <exception cref="ArgumentException"></exception>
+    /// <typeparam name="T">The type of the delegate to create. Must be a Func with the result type <see cref="Task"/>, <see cref="Task{R}"/>, <see cref="ValueTask"/>, or <see cref="ValueTask{R}"/>.</typeparam>
+    /// <param name="jsObjectReference">The JavaScript object reference that represents the function to be invoked.</param>
+    /// <returns>A Func delegate of type <typeparamref name="T"/> that can be used to invoke the JavaScript function.</returns>
+    /// <exception cref="ArgumentNullException">Thrown when <paramref name="jsObjectReference"/> is null.</exception>
+    /// <exception cref="InvalidOperationException">Thrown when <typeparamref name="T"/> is not a valid Func type.</exception>
     public static T AsAsyncFunction<T>(this IJSObjectReference jsObjectReference) where T : Delegate
     {
         ArgumentNullException.ThrowIfNull(jsObjectReference);