react-native-webview-bootpay 11.18.16 → 11.22.7

package/windows/ReactNativeWebView/ReactNativeWebView.vcxproj

@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
   <Import Project="$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.props" Condition="Exists('$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.props')" />
   <PropertyGroup Label="Globals">
     <CppWinRTOptimized>true</CppWinRTOptimized>
     <CppWinRTRootNamespaceAutoMerge>true</CppWinRTRootNamespaceAutoMerge>
     <MinimalCoreWin>true</MinimalCoreWin>
-    <ProjectGuid>{729d9af8-cd9e-4427-9f6c-fb757e287729}</ProjectGuid>
+    <ProjectGuid>{00AA3765-C6A0-4713-B3F9-BFE47B9C83F5}</ProjectGuid>
     <ProjectName>ReactNativeWebView</ProjectName>
     <RootNamespace>ReactNativeWebView</RootNamespace>
     <DefaultLanguage>en-US</DefaultLanguage>
@@ -13,15 +14,11 @@
     <AppContainerApplication>true</AppContainerApplication>
     <ApplicationType>Windows Store</ApplicationType>
     <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
-    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.18362.0</WindowsTargetPlatformVersion>
+    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0</WindowsTargetPlatformVersion>
     <WindowsTargetPlatformMinVersion>10.0.15063.0</WindowsTargetPlatformMinVersion>
   </PropertyGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <ItemGroup Label="ProjectConfigurations">
-    <ProjectConfiguration Include="Debug|ARM">
-      <Configuration>Debug</Configuration>
-      <Platform>ARM</Platform>
-    </ProjectConfiguration>
     <ProjectConfiguration Include="Debug|ARM64">
       <Configuration>Debug</Configuration>
       <Platform>ARM64</Platform>
@@ -34,10 +31,6 @@
       <Configuration>Debug</Configuration>
       <Platform>x64</Platform>
     </ProjectConfiguration>
-    <ProjectConfiguration Include="Release|ARM">
-      <Configuration>Release</Configuration>
-      <Platform>ARM</Platform>
-    </ProjectConfiguration>
     <ProjectConfiguration Include="Release|ARM64">
       <Configuration>Release</Configuration>
       <Platform>ARM64</Platform>
@@ -56,6 +49,7 @@
     <PlatformToolset>v140</PlatformToolset>
     <PlatformToolset Condition="'$(VisualStudioVersion)' == '15.0'">v141</PlatformToolset>
     <PlatformToolset Condition="'$(VisualStudioVersion)' == '16.0'">v142</PlatformToolset>
+    <PlatformToolset Condition="'$(VisualStudioVersion)' == '17.0'">v143</PlatformToolset>
     <CharacterSet>Unicode</CharacterSet>
     <GenerateManifest>false</GenerateManifest>
   </PropertyGroup>
@@ -83,7 +77,13 @@
   <ImportGroup Label="PropertySheets">
     <Import Project="PropertySheet.props" />
   </ImportGroup>
-  <PropertyGroup Label="UserMacros" />
+  <ImportGroup Label="ReactNativeWindowsPropertySheets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\external\Microsoft.ReactNative.Uwp.CppLib.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props')" />
+    <Import Project="$(SolutionDir)\packages\$(WinUIPackageProps)" Condition="'$(WinUIPackageProps)'!='' And Exists('$(SolutionDir)\packages\$(WinUIPackageProps)')" />
+  </ImportGroup>
+  <PropertyGroup>
+    <WinUI2_HasWebView2 Condition="$([MSBuild]::VersionGreaterThanOrEquals('$(WinUIPackageVersion)','2.8.0-prerelease.210927001'))">true</WinUI2_HasWebView2>
+  </PropertyGroup>
   <PropertyGroup />
   <ItemDefinitionGroup>
     <ClCompile>
@@ -115,21 +115,29 @@
       <PreprocessorDefinitions>NDEBUG;%(PreprocessorDefinitions)</PreprocessorDefinitions>
     </ClCompile>
   </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(WinUI2_HasWebView2)'=='true'">
+  <ClCompile>
+    <PreprocessorDefinitions>WINUI2_HAS_WEBVIEW2;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+  </ClCompile>
+  <Midl>
+    <PreprocessorDefinitions>WINUI2_HAS_WEBVIEW2;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+  </Midl>
+  </ItemDefinitionGroup>
   <ItemGroup>
-    <ClInclude Include="ReactWebView.h">
-      <DependentUpon>ReactWebView.idl</DependentUpon>
-    </ClInclude>
-    <ClInclude Include="ReactWebViewManager.h" />
+    <ClInclude Include="ReactWebView.h" />
+    <ClInclude Include="ReactWebView2.h" />
+    <ClInclude Include="ReactWebView2Manager.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="ReactPackageProvider.h">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
     </ClInclude>
+    <ClInclude Include="ReactWebViewManager.h" />
+    <ClInclude Include="WebBridge.h" />
   </ItemGroup>
   <ItemGroup>
-    <ClCompile Include="ReactWebView.cpp">
-      <DependentUpon>ReactWebView.idl</DependentUpon>
-    </ClCompile>
-    <ClCompile Include="ReactWebViewManager.cpp" />
+    <ClCompile Include="ReactWebView.cpp" />
+    <ClCompile Include="ReactWebView2.cpp" />
+    <ClCompile Include="ReactWebView2Manager.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
     </ClCompile>
@@ -137,15 +145,19 @@
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
     </ClCompile>
     <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
+    <ClCompile Include="ReactWebViewManager.cpp" />
+    <ClCompile Include="WebBridge.cpp" />
   </ItemGroup>
   <ItemGroup>
     <Midl Include="ReactWebView.idl" />
     <Midl Include="ReactPackageProvider.idl" />
+    <Midl Include="WebBridge.idl" />
   </ItemGroup>
   <ItemGroup>
     <None Include="packages.config" />
     <None Include="ReactNativeWebView.def" />
   </ItemGroup>
+
   <ItemGroup>
     <None Include="PropertySheet.props" />
   </ItemGroup>
@@ -154,13 +166,23 @@
       <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
       <Private>false</Private>
     </ProjectReference>
-    <ProjectReference Include="..\WebViewBridgeComponent\WebViewBridgeComponent.vcxproj">
-      <Project>{176323cd-97ce-4b0f-9d11-a2b77bda829b}</Project>
-    </ProjectReference>
   </ItemGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
+  <ImportGroup Label="ReactNativeWindowsTargets">
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets')" />
+  </ImportGroup>
+  <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
+    <PropertyGroup>
+      <ErrorText>This project references targets in your node_modules\react-native-windows folder that are missing. The missing file is {0}.</ErrorText>
+    </PropertyGroup>
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.props'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets'))" />
+  </Target>
   <ImportGroup Label="ExtensionTargets">
     <Import Project="$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets" Condition="Exists('$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets')" />
+    <Import Project="$(SolutionDir)packages\$(WinUIPackageName).$(WinUIPackageVersion)\build\native\$(WinUIPackageName).targets" Condition="Exists('$(SolutionDir)packages\$(WinUIPackageName).$(WinUIPackageVersion)\build\native\$(WinUIPackageName).targets')" />
+    <Import Project="$(SolutionDir)\packages\Microsoft.ReactNative.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.targets" Condition="'$(UseExperimentalNuget)'=='true' And Exists('$(SolutionDir)\packages\Microsoft.ReactNative.Cxx.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.Cxx.targets')" />
+    <Import Project="$(SolutionDir)\packages\Microsoft.ReactNative.Cxx.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.Cxx.targets" Condition="'$(UseExperimentalNuget)'=='true' And Exists('$(SolutionDir)\packages\Microsoft.ReactNative.Cxx.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.Cxx.targets')" />
   </ImportGroup>
   <Target Name="Deploy" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
@@ -169,5 +191,8 @@
     </PropertyGroup>
     <Error Condition="!Exists('$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.props')" Text="$([System.String]::Format('$(ErrorText)', '$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.props'))" />
     <Error Condition="!Exists('$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(SolutionDir)packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets'))" />
+    <Error Condition="!Exists('$(SolutionDir)packages\$(WinUIPackageName).$(WinUIPackageVersion)\build\native\$(WinUIPackageName).targets')" Text="$([System.String]::Format('$(ErrorText)', '$(SolutionDir)packages\$(WinUIPackageName).$(WinUIPackageVersion)\build\native\$(WinUIPackageName).targets'))" />
+    <Error Condition="'$(UseExperimentalNuget)'=='true' And !Exists('$(SolutionDir)\packages\Microsoft.ReactNative.Cxx.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.Cxx.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(SolutionDir)\packages\Microsoft.ReactNative.Cxx.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.Cxx.targets'))" />
+    <Error Condition="'$(UseExperimentalNuget)'=='true' And !Exists('$(SolutionDir)\packages\Microsoft.ReactNative.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(SolutionDir)\packages\Microsoft.ReactNative.$(ReactNativeWindowsVersion)\build\native\Microsoft.ReactNative.targets'))" />
   </Target>
-</Project>
+</Project>

package/windows/ReactNativeWebView/ReactPackageProvider.cpp

@@ -4,6 +4,7 @@
 #include "ReactPackageProvider.g.cpp"
 #endif
 
+#include "ReactWebView2Manager.h"
 #include "ReactWebViewManager.h"
 
 using namespace winrt::Microsoft::ReactNative;
@@ -12,6 +13,10 @@ namespace winrt::ReactNativeWebView::implementation {
 
 void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept {
   packageBuilder.AddViewManager(L"ReactWebViewManager", []() { return winrt::make<ReactWebViewManager>(); });
+
+#if HAS_WEBVIEW2
+  packageBuilder.AddViewManager(L"ReactWebView2Manager", []() { return winrt::make<ReactWebView2Manager>(); });
+#endif
 }
 
-} // namespace winrt::ReactNativeWebView::implementation
+} // namespace winrt::ReactNativeWebView::implementation

package/windows/ReactNativeWebView/ReactWebView.cpp

@@ -23,11 +23,7 @@ namespace winrt {
 namespace winrt::ReactNativeWebView::implementation {
 
     ReactWebView::ReactWebView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext) {
-#ifdef CHAKRACORE_UWP
-        m_webView = winrt::WebView(winrt::WebViewExecutionMode::SeparateProcess);
-#else
         m_webView = winrt::WebView();
-#endif
         this->Content(m_webView);
         RegisterEvents();
     }
@@ -63,7 +59,7 @@ namespace winrt::ReactNativeWebView::implementation {
             });
     }
 
-    bool Is17763OrHigher() {
+    bool ReactWebView::Is17763OrHigher() {
       static std::optional<bool> hasUniversalAPIContract_v7;
 
       if (!hasUniversalAPIContract_v7.has_value()) {
@@ -122,9 +118,9 @@ namespace winrt::ReactNativeWebView::implementation {
             });
 
         if (m_messagingEnabled) {
-          winrt::hstring windowAlert = L"window.alert = function (msg) {__REACT_WEB_VIEW_BRIDGE.postMessage(`{\"type\":\"__alert\",\"message\":\"${msg}\"}`)};";
-          winrt::hstring postMessage = L"window.BootpayRNWebView = {postMessage: function (data) {__REACT_WEB_VIEW_BRIDGE.postMessage(String(data))}};";
-          webView.InvokeScriptAsync(L"eval", { windowAlert + postMessage });
+          winrt::hstring message = LR"(window.alert = function(msg) { __REACT_WEB_VIEW_BRIDGE.postMessage(`{"type":"__alert", "message" : "${msg}" }`) }; 
+            window.ReactNativeWebView = {postMessage: function(data) { __REACT_WEB_VIEW_BRIDGE.postMessage(String(data)) }};)";
+          webView.InvokeScriptAsync(L"eval", { message });
         }
     }
 
@@ -145,13 +141,15 @@ namespace winrt::ReactNativeWebView::implementation {
 
     void ReactWebView::HandleMessageFromJS(winrt::hstring const& message) {
         winrt::JsonObject jsonObject;
-        if (winrt::JsonObject::TryParse(message, jsonObject) && jsonObject.HasKey(L"type")) {
-            auto type = jsonObject.GetNamedString(L"type");
-            if (type == L"__alert") {
-              auto dialog = winrt::MessageDialog(jsonObject.GetNamedString(L"message"));
-              dialog.Commands().Append(winrt::UICommand(L"OK"));
-              dialog.ShowAsync();
-              return;
+        if (winrt::JsonObject::TryParse(message, jsonObject)) {
+            if (auto v = jsonObject.Lookup(L"type"); v && v.ValueType() == JsonValueType::String) {
+                auto type = v.GetString();
+                if (type == L"__alert") {
+                    auto dialog = winrt::MessageDialog(jsonObject.GetNamedString(L"message"));
+                    dialog.Commands().Append(winrt::UICommand(L"OK"));
+                    dialog.ShowAsync();
+                    return;
+                }
             }
           }
       
@@ -167,8 +165,11 @@ namespace winrt::ReactNativeWebView::implementation {
                 });
     }
 
-    void ReactWebView::SetMessagingEnabled(bool enabled) {
+    void ReactWebView::MessagingEnabled(bool enabled) noexcept{
       m_messagingEnabled = enabled;
     }
 
+    bool ReactWebView::MessagingEnabled() const noexcept{
+        return m_messagingEnabled;
+    }
 } // namespace winrt::ReactNativeWebView::implementation

package/windows/ReactNativeWebView/ReactWebView.h

@@ -7,16 +7,17 @@
 #include "NativeModules.h"
 #include "ReactWebView.g.h"
 
-#include "winrt/WebViewBridgeComponent.h"
+#include "winrt/ReactNativeWebView.h"
 
-using namespace winrt::WebViewBridgeComponent;
+using namespace winrt::ReactNativeWebView;
 
 namespace winrt::ReactNativeWebView::implementation {
 
     class ReactWebView : public ReactWebViewT<ReactWebView> {
     public:
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
-        void SetMessagingEnabled(bool enabled);
+        void MessagingEnabled(bool enabled) noexcept;
+        bool MessagingEnabled() const noexcept;
         ~ReactWebView();
 
     private:
@@ -36,6 +37,7 @@ namespace winrt::ReactNativeWebView::implementation {
         void OnNavigationCompleted(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationCompletedEventArgs const& args);
         void OnNavigationFailed(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationFailedEventArgs const& args);
         void OnMessagePosted(hstring const& message);
+        bool Is17763OrHigher();
     };
 } // namespace winrt::ReactNativeWebView::implementation
 

package/windows/ReactNativeWebView/ReactWebView.idl

@@ -1,7 +1,21 @@
 namespace ReactNativeWebView{
     [default_interface]
-    runtimeclass ReactWebView : Windows.UI.Xaml.Controls.UserControl{
+    runtimeclass ReactWebView : Windows.UI.Xaml.Controls.ContentPresenter{
         ReactWebView(Microsoft.ReactNative.IReactContext context);
-        void SetMessagingEnabled(Boolean enabled);
+        Boolean MessagingEnabled;
     };
-} // namespace ReactNativeWebView
+#if __has_include(<VersionMacros.h>)
+#include <VersionMacros.h>
+#else
+#define RNW_VERSION_AT_LEAST(x,y,z) false
+#endif
+
+#if RNW_VERSION_AT_LEAST(0,68,0) && defined(WINUI2_HAS_WEBVIEW2)
+    [default_interface]
+    runtimeclass ReactWebView2 : Windows.UI.Xaml.Controls.ContentPresenter{
+        ReactWebView2(Microsoft.ReactNative.IReactContext context);
+        void NavigateToHtml(String html);
+        Boolean MessagingEnabled;
+    };
+#endif
+} // namespace ReactNativeWebView

package/windows/ReactNativeWebView/ReactWebView2.cpp

@@ -0,0 +1,185 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "ReactWebView2.h"
+
+#if HAS_WEBVIEW2
+#include "JSValueXaml.h"
+#include "ReactWebView2.g.cpp"
+#include <winrt/Windows.Foundation.Metadata.h>
+#include <optional>
+
+namespace winrt {
+    using namespace Microsoft::ReactNative;
+    using namespace Windows::Foundation;
+    using namespace Windows::UI;
+    using namespace Windows::UI::Xaml;
+    using namespace Windows::UI::Xaml::Controls;
+    using namespace Microsoft::UI::Xaml::Controls;
+    using namespace Microsoft::Web::WebView2::Core;
+    using namespace Windows::Data::Json;
+    using namespace Windows::UI::Popups;
+    using namespace Windows::UI::Xaml::Input;
+    using namespace Windows::UI::Xaml::Media;
+} // namespace winrt
+
+namespace winrt::ReactNativeWebView::implementation {
+
+    ReactWebView2::ReactWebView2(winrt::IReactContext const& reactContext) : m_reactContext(reactContext) {
+        m_webView = winrt::WebView2();
+        this->Content(m_webView);
+        RegisterEvents();
+    }
+
+    ReactWebView2::~ReactWebView2(){}
+
+    void ReactWebView2::RegisterEvents() {
+        m_navigationStartingRevoker = m_webView.NavigationStarting(
+            winrt::auto_revoke, [ref = get_weak()](auto const& sender, auto const& args) {
+                if (auto self = ref.get()) {
+                    self->OnNavigationStarting(sender, args);
+                }
+                    
+            });
+
+        m_navigationCompletedRevoker = m_webView.NavigationCompleted(
+            winrt::auto_revoke, [ref = get_weak()](auto const& sender, auto const& args) {
+                if (auto self = ref.get()) {
+                    self->OnNavigationCompleted(sender, args);
+                }
+            });
+
+        m_CoreWebView2InitializedRevoker = m_webView.CoreWebView2Initialized(
+            winrt::auto_revoke, [ref = get_weak()](auto const& sender, auto const& args){
+            if (auto self = ref.get()) {
+                self->OnCoreWebView2Initialized(sender, args);
+            }
+        });
+    }  
+
+    bool ReactWebView2::Is17763OrHigher() {
+        static std::optional<bool> hasUniversalAPIContract_v7;
+
+        if (!hasUniversalAPIContract_v7.has_value()) {
+        hasUniversalAPIContract_v7 = winrt::Windows::Foundation::Metadata::ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7);
+        }
+        return hasUniversalAPIContract_v7.value();
+    }
+
+    void ReactWebView2::WriteWebViewNavigationEventArg(winrt::WebView2 const& sender, winrt::IJSValueWriter const& eventDataWriter) {
+        auto tag = this->GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
+        WriteProperty(eventDataWriter, L"canGoBack", sender.CanGoBack());
+        WriteProperty(eventDataWriter, L"canGoForward", sender.CanGoForward());
+        if (Is17763OrHigher()) {
+        WriteProperty(eventDataWriter, L"loading", !sender.IsLoaded());
+        }
+        WriteProperty(eventDataWriter, L"target", tag);
+        if (auto uri = sender.Source()) {
+        WriteProperty(eventDataWriter, L"url", uri.AbsoluteCanonicalUri());
+        }
+    }
+
+    void ReactWebView2::OnNavigationStarting(winrt::WebView2 const& webView, winrt::CoreWebView2NavigationStartingEventArgs const& /* args */) {
+        m_reactContext.DispatchEvent(
+            *this,
+            L"topLoadingStart",
+            [&](winrt::IJSValueWriter const& eventDataWriter) noexcept {
+                eventDataWriter.WriteObjectBegin();
+                WriteWebViewNavigationEventArg(webView, eventDataWriter);
+                eventDataWriter.WriteObjectEnd();
+            });
+
+                
+        if (m_messagingEnabled) {
+            m_messageToken = webView.WebMessageReceived([this](auto const& /* sender */ , winrt::CoreWebView2WebMessageReceivedEventArgs const& messageArgs)
+                {
+                    try {
+                        auto message = messageArgs.TryGetWebMessageAsString();
+                        this->OnMessagePosted(message);
+                    }
+                    catch (...) {
+                        return;
+                    }
+                });
+        }
+    }
+
+    void ReactWebView2::OnMessagePosted(hstring const& message)
+    {
+        HandleMessageFromJS(message);
+    }
+
+    void ReactWebView2::OnNavigationCompleted(winrt::WebView2 const& webView, winrt::CoreWebView2NavigationCompletedEventArgs const& /* args */) {
+        m_reactContext.DispatchEvent(
+            *this,
+            L"topLoadingFinish",
+            [&](winrt::IJSValueWriter const& eventDataWriter) noexcept {
+                eventDataWriter.WriteObjectBegin();
+                WriteWebViewNavigationEventArg(webView, eventDataWriter);
+                eventDataWriter.WriteObjectEnd();
+            });
+
+        if (m_messagingEnabled) {
+            winrt::hstring message = LR"(window.alert = function (msg) {window.chrome.webview.postMessage(`{"type":"__alert","message":"${msg}"}`)}; 
+                window.ReactNativeWebView = {postMessage: function (data) {window.chrome.webview.postMessage(String(data))}};)";
+            webView.ExecuteScriptAsync(message);
+        }
+    }
+
+    void ReactWebView2::OnCoreWebView2Initialized(winrt::Microsoft::UI::Xaml::Controls::WebView2 const& sender, winrt::Microsoft::UI::Xaml::Controls::CoreWebView2InitializedEventArgs const& /* args */) {
+        assert(sender.CoreWebView2());
+        if (m_navigateToHtml != L"") {
+            m_webView.NavigateToString(m_navigateToHtml);
+            m_navigateToHtml = L"";
+        }
+    }
+
+    void ReactWebView2::HandleMessageFromJS(winrt::hstring const& message) {
+        winrt::JsonObject jsonObject;
+        if (winrt::JsonObject::TryParse(message, jsonObject)) {
+            if (auto v = jsonObject.Lookup(L"type"); v && v.ValueType() == JsonValueType::String) {
+                auto type = v.GetString();
+                if (type == L"__alert") {
+                    auto dialog = winrt::MessageDialog(jsonObject.GetNamedString(L"message"));
+                    dialog.Commands().Append(winrt::UICommand(L"OK"));
+                    dialog.ShowAsync();
+                    return;
+                }
+            }
+        }
+
+        m_reactContext.DispatchEvent(
+            *this,
+            L"topMessage",
+            [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
+                eventDataWriter.WriteObjectBegin();
+                {
+                    WriteProperty(eventDataWriter, L"data", message);
+                }
+                eventDataWriter.WriteObjectEnd();
+            });
+    }
+
+    void ReactWebView2::MessagingEnabled(bool enabled) noexcept{
+        m_messagingEnabled = enabled;
+    }
+
+    bool ReactWebView2::MessagingEnabled() const noexcept{
+        return m_messagingEnabled;
+    }
+
+
+    void ReactWebView2::NavigateToHtml(winrt::hstring html) {
+        if (m_webView.CoreWebView2()) {
+            m_webView.NavigateToString(html);
+        }
+        else {
+            m_webView.EnsureCoreWebView2Async();
+            m_navigateToHtml = html;
+        }
+    }
+
+} // namespace winrt::ReactNativeWebView::implementation
+
+#endif // HAS_WEBVIEW2

package/windows/ReactNativeWebView/ReactWebView2.h

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#pragma once
+
+#if HAS_WEBVIEW2
+
+#include "winrt/Microsoft.ReactNative.h"
+#include "NativeModules.h"
+#include "ReactWebView2.g.h"
+
+#include "winrt/ReactNativeWebView.h"
+
+using namespace winrt::ReactNativeWebView;
+
+namespace winrt::ReactNativeWebView::implementation {
+
+    class ReactWebView2 : public ReactWebView2T<ReactWebView2> {
+    public:
+        ReactWebView2(Microsoft::ReactNative::IReactContext const& reactContext);
+        void MessagingEnabled(bool enabled) noexcept;
+        bool MessagingEnabled() const noexcept;
+        void NavigateToHtml(winrt::hstring html);
+        ~ReactWebView2();
+
+    private:
+        winrt::hstring m_navigateToHtml = L"";
+        bool m_messagingEnabled{ true };
+
+        winrt::Microsoft::UI::Xaml::Controls::WebView2 m_webView{ nullptr };
+        Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
+        winrt::event_token m_messageToken;
+        winrt::Microsoft::UI::Xaml::Controls::WebView2::NavigationStarting_revoker m_navigationStartingRevoker{};
+        winrt::Microsoft::UI::Xaml::Controls::WebView2::NavigationCompleted_revoker m_navigationCompletedRevoker{};
+        winrt::Microsoft::UI::Xaml::Controls::WebView2::CoreWebView2Initialized_revoker m_CoreWebView2InitializedRevoker{};
+        void HandleMessageFromJS(winrt::hstring const& message);
+        void RegisterEvents();
+        void WriteWebViewNavigationEventArg(winrt::Microsoft::UI::Xaml::Controls::WebView2 const& sender, winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter);
+        void OnNavigationStarting(winrt::Microsoft::UI::Xaml::Controls::WebView2 const& sender, winrt::Microsoft::Web::WebView2::Core::CoreWebView2NavigationStartingEventArgs const& args);
+        void OnNavigationCompleted(winrt::Microsoft::UI::Xaml::Controls::WebView2 const& sender, winrt::Microsoft::Web::WebView2::Core::CoreWebView2NavigationCompletedEventArgs const& args);
+        void OnCoreWebView2Initialized(winrt::Microsoft::UI::Xaml::Controls::WebView2 const& sender, winrt::Microsoft::UI::Xaml::Controls::CoreWebView2InitializedEventArgs const& args);
+        void OnMessagePosted(hstring const& message);
+        bool Is17763OrHigher();
+    };
+} // namespace winrt::ReactNativeWebView2::implementation
+
+namespace winrt::ReactNativeWebView::factory_implementation {
+    struct ReactWebView2 : ReactWebView2T<ReactWebView2, implementation::ReactWebView2> {};
+} // namespace winrt::ReactNativeWebView2::factory_implementation
+
+#endif // HAS_WEBVIEW2