Added replacers to the JSInterop

Author: dariatiurina

src/Components/Web.JS/src/Rendering/ElementReferenceCapture.ts

@@ -16,12 +16,34 @@ function getCaptureIdAttributeName(referenceCaptureId: string) {
   return `_bl_${referenceCaptureId}`;
 }
 
+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;
+}
+
 // Support receiving ElementRef instances as args in interop calls
 const elementRefKey = '__internalId'; // Keep in sync with ElementRef.cs
 DotNet.attachReviver((key, value) => {
   if (value && typeof value === 'object' && Object.prototype.hasOwnProperty.call(value, elementRefKey) && typeof value[elementRefKey] === 'string') {
+    console.log("attachReviver: ", value);
     return getElementByCaptureId(value[elementRefKey]);
   } else {
     return value;
   }
 });
+
+// Support return of the ElementRef from JS to .NET
+DotNet.attachReplacer((key, value) => {
+  if (value instanceof Element) {
+    const captureId = getCaptureIdFromElement(value);
+    if (captureId) {
+      return { [elementRefKey]: captureId };
+    }
+  }
+  return value;
+});

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,19 @@
             ReturnValues["invokeAsyncThrowsSerializingCircularStructure"] = $"Failure: {ex.Message}";
         }
 
+        try
+        {
+            var elementReference = await JSRuntime.InvokeAsync<ElementReference>("returnElementReference", element);
+            ReturnValues["elementReference"] = "Success";
+        }
+        catch (JSException ex)
+        {
+            ReturnValues["elementReference"] = $"Failure: {ex.Message}";
+        }
+        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

@@ -6,6 +6,8 @@
 export module DotNet {
   export type JsonReviver = ((key: any, value: any) => any);
   const jsonRevivers: JsonReviver[] = [];
+  export type JsonReplacer = ((key: any, value: any) => any);
+  const jsonReplacers: JsonReplacer[] = [];
 
   const jsObjectIdKey = "__jsObjectId";
   const dotNetObjectRefKey = "__dotNetObject";
@@ -118,6 +120,14 @@ export module DotNet {
       jsonRevivers.push(reviver);
   }
 
+  /**
+   * Adds a JSON replacer callback that will be used when serializing arguments sent to .NET.
+   * @param replacer The replacer to add.
+   */
+  export function attachReplacer(replacer: JsonReplacer) {
+    jsonReplacers.push(replacer);
+}
+
   /**
    * Invokes the specified .NET public method synchronously. Not all hosting scenarios support
    * synchronous invocation, so if possible use invokeMethodAsync instead.
@@ -808,16 +818,21 @@ export module DotNet {
   }
 
   function argReplacer(key: string, value: any) {
-      if (value instanceof DotNetObject) {
-          return value.serializeAsArg();
-      } else if (value instanceof Uint8Array) {
+      const processedValue = jsonReplacers.reduce(
+          (currentValue, replacer) => replacer(key, currentValue),
+          value
+      );
+
+      if (processedValue instanceof DotNetObject) {
+          return processedValue.serializeAsArg();
+      } else if (processedValue instanceof Uint8Array) {
           const dotNetCallDispatcher = currentCallDispatcher!.getDotNetCallDispatcher();
-          dotNetCallDispatcher!.sendByteArray(nextByteArrayIndex, value);
+          dotNetCallDispatcher!.sendByteArray(nextByteArrayIndex, processedValue);
           const jsonValue = { [byteArrayRefKey]: nextByteArrayIndex };
           nextByteArrayIndex++;
           return jsonValue;
       }
 
-      return value;
+      return processedValue;
   }
 }