Added replacers to the JSInterop (#63542)

Author: dariatiurina

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

@@ -78,6 +78,7 @@ public void CanInvokeInteropMethods()
             ["testDtoAsync"] = "Same",
             ["returnPrimitiveAsync"] = "123",
             ["returnArrayAsync"] = "first,second",
+            ["elementReference"] = "Success",
             ["jsObjectReference.identity"] = "Invoked from JSObjectReference",
             ["jsObjectReference.nested.add"] = "5",
             ["addViaJSObjectReference"] = "5",

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

@@ -51,6 +51,9 @@
     <h2>@nameof(JSObjectReferenceInvokeNonFunctionException)</h2>
     <p id="@nameof(JSObjectReferenceInvokeNonFunctionException)">@JSObjectReferenceInvokeNonFunctionException?.Message</p>
 </div>
+
+<p @ref="element">Element reference.</p>
+
 @if (DoneWithInterop)
 {
     <p id="done-with-interop">Done with interop.</p>
@@ -70,6 +73,8 @@
 
     public bool DoneWithInterop { get; set; }
 
+    public ElementReference element;
+
     public async Task InvokeInteropAsync()
     {
         var shouldSupportSyncInterop = RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER"));
@@ -167,6 +172,15 @@
             ReturnValues["invokeAsyncThrowsSerializingCircularStructure"] = $"Failure: {ex.Message}";
         }
 
+        try
+        {
+            var elementReference = await JSRuntime.InvokeAsync<ElementReference>("returnElementReference", element);
+            ReturnValues["elementReference"] = "Success";
+        }
+        catch (Exception ex)
+        {
+            ReturnValues["elementReference"] = $"Failure: {ex.Message}";
+        }
 
         var jsObjectReference = await JSRuntime.InvokeAsync<IJSObjectReference>("returnJSObjectReference");
         ReturnValues["jsObjectReference.identity"] = await jsObjectReference.InvokeAsync<string>("identity", "Invoked from JSObjectReference");

src/Components/test/testassets/BasicTestApp/wwwroot/js/jsinteroptests.js

@@ -254,6 +254,7 @@ window.jsInteropTests = {
   receiveDotNetObjectByRefAsync: receiveDotNetObjectByRefAsync,
   receiveDotNetStreamReference: receiveDotNetStreamReference,
   receiveDotNetStreamWrapperReference: receiveDotNetStreamWrapperReference,
+  returnElementReference: returnElementReference,
   TestClass: TestClass,
   nonConstructorFunction: () => { return 42; },
   testObject: testObject,
@@ -373,6 +374,10 @@ function returnJSObjectReference() {
   };
 }
 
+function returnElementReference(element) {
+  return element;
+}
+
 function addViaJSObjectReference(jsObjectReference, a, b) {
   return jsObjectReference.nested.add(a, b);
 }

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

@@ -9,6 +9,7 @@ export module DotNet {
 
   const jsObjectIdKey = "__jsObjectId";
   const dotNetObjectRefKey = "__dotNetObject";
+  const dotNetElementRefKey = "__internalId";
   const byteArrayRefKey = "__byte[]";
   const dotNetStreamRefKey = "__dotNetStream";
   const jsStreamReferenceLengthKey = "__jsStreamReferenceLength";
@@ -807,7 +808,20 @@ export module DotNet {
       return result;
   }
 
+  function getCaptureIdFromElement(element: Element): string | null {
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      if (attr.name.startsWith('_bl_')) {
+        return attr.name.substring(4);
+      }
+    }
+    return null;
+}
+
   function argReplacer(key: string, value: any) {
+      if (value instanceof Element) {
+          return { [dotNetElementRefKey]: getCaptureIdFromElement(value) };
+      }
       if (value instanceof DotNetObject) {
           return value.serializeAsArg();
       } else if (value instanceof Uint8Array) {