fix(windows): Add postMessage for Windows WebView (#1263 by @kaiguo)

docs/Reference.md

@@ -80,6 +80,7 @@ This document lays out the current public properties and methods for the React N
 - [`clearCache`](Reference.md#clearCache)
 - [`clearHistory`](Reference.md#clearHistory)
 - [`requestFocus`](Reference.md#requestFocus)
+- [`postMessage`](Reference.md#postMessage)
 
 ---
 
@@ -1240,6 +1241,13 @@ requestFocus();
 
 Request the webView to ask for focus. (People working on TV apps might want having a look at this!)
 
+### `postMessage(str)`
+
+```javascript
+postMessage('message');
+```
+Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
+
 ### `clearFormData()`
 
 (android only)

src/WebView.windows.tsx

@@ -104,6 +104,14 @@ export default class WebView extends React.Component<WebViewSharedProps, State>
     );
   }
 
+  postMessage = (data: string) => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.getViewManagerConfig('RCTWebView').Commands.postMessage,
+      [String(data)],
+    );
+  };
+
   /**
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward

windows/ReactNativeWebView/ReactNativeWebView.vcxproj

@@ -63,9 +63,11 @@
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
   <ImportGroup Label="ExtensionSettings">
   </ImportGroup>
+  <PropertyGroup>
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
+  </PropertyGroup>
   <ImportGroup Label="Shared">
-    <Import Project="..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')" />
+    <Import Project="$(ReactNativeWindowsDir)\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" />
-    <Import Project="..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')"/>
   </ImportGroup>
   <ImportGroup Label="PropertySheets">
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
@@ -139,11 +141,7 @@
     <None Include="PropertySheet.props" />
   </ItemGroup>
   <ItemGroup>
-    <ProjectReference Include="..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
+    <ProjectReference Include="$(ReactNativeWindowsDir)\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj">
-      <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
-      <Private>false</Private>
-    </ProjectReference>
-    <ProjectReference Include="..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
       <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
       <Private>false</Private>
     </ProjectReference>

windows/ReactNativeWebView/ReactWebView.cpp

@@ -129,13 +129,17 @@ namespace winrt::ReactNativeWebView::implementation {
             }
         }
         
+        PostMessage(winrt::hstring(args.Value()));
+    }
+
+    void ReactWebView::PostMessage(winrt::hstring const& message) {
         m_reactContext.DispatchEvent(
             m_webView,
             L"topMessage",
             [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
                 eventDataWriter.WriteObjectBegin();
                 {
-                    WriteProperty(eventDataWriter, L"data", winrt::to_string(args.Value()));
+                    WriteProperty(eventDataWriter, L"data", message);
                 }
                 eventDataWriter.WriteObjectEnd();
             });

windows/ReactNativeWebView/ReactWebView.h

@@ -13,6 +13,7 @@ namespace winrt::ReactNativeWebView::implementation {
     public:
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
         winrt::Windows::UI::Xaml::Controls::WebView GetView();
+        void PostMessage(winrt::hstring const& message);
 
     private:
         winrt::Windows::UI::Xaml::Controls::WebView m_webView{ nullptr };

windows/ReactNativeWebView/ReactWebView.idl

@@ -3,5 +3,6 @@ namespace ReactNativeWebView{
     runtimeclass ReactWebView : Windows.UI.Xaml.Controls.UserControl{
         ReactWebView(Microsoft.ReactNative.IReactContext context);
         Windows.UI.Xaml.Controls.WebView GetView();
+        void PostMessage(String message);
     };
 } // namespace ReactNativeWebView

windows/ReactNativeWebView/ReactWebViewManager.cpp

@@ -108,6 +108,7 @@ namespace winrt::ReactNativeWebView::implementation {
         commands.Append(L"reload");
         commands.Append(L"stopLoading");
         commands.Append(L"injectJavaScript");
+        commands.Append(L"postMessage");
         return commands.GetView();
     }
 
@@ -135,6 +136,8 @@ namespace winrt::ReactNativeWebView::implementation {
             }
             else if (commandId == L"injectJavaScript") {
                 webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
+            } else if(commandId == L"postMessage") {
+                m_reactWebView.PostMessage(winrt::to_hstring(commandArgs[0].AsString()));
             }
         }
     }