WebView in content of UserControl

windows/ReactNativeWebView/ReactWebView.cpp

@@ -26,11 +26,13 @@ namespace winrt::ReactNativeWebView::implementation {
 #else
         m_webView = winrt::WebView();
 #endif
+        this->Content(m_webView);
         RegisterEvents();
     }
 
-    winrt::WebView ReactWebView::GetView() {
-        return m_webView;
+    ReactWebView::~ReactWebView()
+    {
+      OutputDebugStringW(L"> ReactWebView::~ReactWebView()\n");
     }
 
     void ReactWebView::RegisterEvents() {
@@ -64,54 +66,54 @@ namespace winrt::ReactNativeWebView::implementation {
             });
     }
 
-    void ReactWebView::WriteWebViewNavigationEventArg(winrt::IJSValueWriter const& eventDataWriter) {
-        auto tag = m_webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
-        WriteProperty(eventDataWriter, L"canGoBack", m_webView.CanGoBack());
-        WriteProperty(eventDataWriter, L"canGoForward", m_webView.CanGoForward());
-        WriteProperty(eventDataWriter, L"loading", !m_webView.IsLoaded());
+    void ReactWebView::WriteWebViewNavigationEventArg(winrt::WebView 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());
+        WriteProperty(eventDataWriter, L"loading", !sender.IsLoaded());
         WriteProperty(eventDataWriter, L"target", tag);
-        WriteProperty(eventDataWriter, L"title", m_webView.DocumentTitle());
-        if (auto uri = m_webView.Source()) {
-            WriteProperty(eventDataWriter, L"url", uri.AbsoluteCanonicalUri());
+        WriteProperty(eventDataWriter, L"title", sender.DocumentTitle());
+        if (auto uri = sender.Source()) {
+          WriteProperty(eventDataWriter, L"url", uri.AbsoluteCanonicalUri());
         }
     }
 
     void ReactWebView::OnNavigationStarting(winrt::WebView const& webView, winrt::WebViewNavigationStartingEventArgs const& /*args*/) {
         m_reactContext.DispatchEvent(
-            webView,
+            *this,
             L"topLoadingStart",
             [&](winrt::IJSValueWriter const& eventDataWriter) noexcept {
                 eventDataWriter.WriteObjectBegin();
-                WriteWebViewNavigationEventArg(eventDataWriter);
+                WriteWebViewNavigationEventArg(webView, eventDataWriter);
                 eventDataWriter.WriteObjectEnd();
             });
     }
 
     void ReactWebView::OnNavigationCompleted(winrt::WebView const& webView, winrt::WebViewNavigationCompletedEventArgs const& /*args*/) {
         m_reactContext.DispatchEvent(
-            webView,
+            *this,
             L"topLoadingFinish",
             [&](winrt::IJSValueWriter const& eventDataWriter) noexcept {
                 eventDataWriter.WriteObjectBegin();
-                WriteWebViewNavigationEventArg(eventDataWriter);
+                WriteWebViewNavigationEventArg(webView, eventDataWriter);
                 eventDataWriter.WriteObjectEnd();
             });
 
         winrt::hstring windowAlert = L"window.alert = function (msg) {window.external.notify(`{\"type\":\"__alert\",\"message\":\"${msg}\"}`)};";
         winrt::hstring postMessage = L"window.ReactNativeWebView = {postMessage: function (data) {window.external.notify(String(data))}};";
-        m_webView.InvokeScriptAsync(L"eval", { windowAlert + postMessage });
+        webView.InvokeScriptAsync(L"eval", { windowAlert + postMessage });
     }
 
     void ReactWebView::OnNavigationFailed(winrt::IInspectable const& /*sender*/, winrt::WebViewNavigationFailedEventArgs const& args) {
         m_reactContext.DispatchEvent(
-            m_webView,
+            *this,
             L"topLoadingError",
             [&](winrt::IJSValueWriter const& eventDataWriter) noexcept {
                 auto httpCode = static_cast<int32_t>(args.WebErrorStatus());
                 eventDataWriter.WriteObjectBegin();
                 {
                     WriteProperty(eventDataWriter, L"code", httpCode);
-                    WriteWebViewNavigationEventArg(eventDataWriter);
+                    WriteWebViewNavigationEventArg(m_webView, eventDataWriter);
                 }
                 eventDataWriter.WriteObjectEnd();
             });
@@ -134,7 +136,7 @@ namespace winrt::ReactNativeWebView::implementation {
 
     void ReactWebView::PostMessage(winrt::hstring const& message) {
         m_reactContext.DispatchEvent(
-            m_webView,
+            *this,
             L"topMessage",
             [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
                 eventDataWriter.WriteObjectBegin();

windows/ReactNativeWebView/ReactWebView.h

@@ -12,8 +12,8 @@ namespace winrt::ReactNativeWebView::implementation {
     class ReactWebView : public ReactWebViewT<ReactWebView> {
     public:
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
-        winrt::Windows::UI::Xaml::Controls::WebView GetView();
         void PostMessage(winrt::hstring const& message);
+        ~ReactWebView();
 
     private:
         winrt::Windows::UI::Xaml::Controls::WebView m_webView{ nullptr };
@@ -24,7 +24,7 @@ namespace winrt::ReactNativeWebView::implementation {
         winrt::Windows::UI::Xaml::Controls::WebView::ScriptNotify_revoker m_scriptNotifyRevoker{};
 
         void RegisterEvents();
-        void WriteWebViewNavigationEventArg(winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter);
+        void WriteWebViewNavigationEventArg(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter);
         void OnNavigationStarting(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationStartingEventArgs const& args);
         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);

windows/ReactNativeWebView/ReactWebView.idl

@@ -2,7 +2,6 @@ namespace ReactNativeWebView{
     [default_interface]
     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

@@ -23,8 +23,8 @@ namespace winrt::ReactNativeWebView::implementation {
     }
 
     winrt::FrameworkElement ReactWebViewManager::CreateView() noexcept {
-        m_reactWebView = *winrt::make_self<ReactWebView>(m_reactContext);
-        return m_reactWebView.GetView();
+      auto view = winrt::ReactNativeWebView::ReactWebView(m_reactContext);
+      return view;
     }
 
     // IViewManagerWithReactContext
@@ -46,7 +46,11 @@ namespace winrt::ReactNativeWebView::implementation {
     void ReactWebViewManager::UpdateProperties(
         FrameworkElement const& view,
         IJSValueReader const& propertyMapReader) noexcept {
-        if (auto webView = view.try_as<winrt::WebView>()) {
+
+        auto control = view.try_as<winrt::UserControl>();
+        auto content = control.Content();
+
+        if (auto webView = content.try_as<winrt::WebView>()) {
             const JSValueObject& propertyMap = JSValueObject::ReadFrom(propertyMapReader);
 
             for (auto const& pair : propertyMap) {
@@ -116,8 +120,10 @@ namespace winrt::ReactNativeWebView::implementation {
         FrameworkElement const& view,
         winrt::hstring const& commandId,
         winrt::IJSValueReader const& commandArgsReader) noexcept {
+        auto control = view.try_as<winrt::UserControl>();
+        auto content = control.Content();
         auto commandArgs = JSValue::ReadArrayFrom(commandArgsReader);
-        if (auto webView = view.try_as<winrt::WebView>()) {
+        if (auto webView = content.try_as<winrt::WebView>()) {
             if (commandId == L"goForward") {
                 if (webView.CanGoForward()) {
                     webView.GoForward();
@@ -137,7 +143,9 @@ 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()));
+                if (auto reactWebView = content.try_as<ReactNativeWebView::ReactWebView>()) {
+                    reactWebView.PostMessage(winrt::to_hstring(commandArgs[0].AsString()));
+                }
             }
         }
     }

windows/ReactNativeWebView/ReactWebViewManager.h

@@ -47,7 +47,6 @@ namespace winrt::ReactNativeWebView::implementation {
             winrt::Microsoft::ReactNative::IJSValueReader const& commandArgsReader) noexcept;
 
     private:
-        winrt::ReactNativeWebView::ReactWebView m_reactWebView{ nullptr };
         winrt::Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
 
     };