Fix errors and add missing events

src/WebView.windows.js

 
 'use strict';
 
-var React = require('react');
-var ReactNative = require('ReactNative');
-var StyleSheet = require('../../StyleSheet/StyleSheet');
-var UIManager = require('../../ReactNative/UIManager');
-var View = require('../View/View');
+import React from 'react';
+import {
+  UIManager,
+  View,
+  requireNativeComponent,
+  StyleSheet,
+  Image,
+  findNodeHandle
+} from 'react-native';
 
 var keyMirror = require('fbjs/lib/keyMirror');
-var requireNativeComponent = require('../../ReactNative/requireNativeComponent');
-var resolveAssetSource = require('../../Image/resolveAssetSource');
+const { resolveAssetSource } = Image;
 
 const createReactClass = require('create-react-class');
 
     };
   },
 
-  componentWillMount: function() {
+  componentDidMount: function() {
     if (this.props.startInLoadingState) {
       this.setState({viewState: WebViewState.LOADING});
     }
         onLoadingStart={this.onLoadingStart}
         onLoadingFinish={this.onLoadingFinish}
         onLoadingError={this.onLoadingError}
+        goBack={this.goBack}
+        goForward={this.goForward}
+        reload={this.reload}
         testID={this.props.testID}
       />
     );
 
   getWebViewHandle: function() {
     // eslint-disable-next-line react/no-string-refs
-    return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
+    return findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
   },
 
   onLoadingStart: function(event) {

windows/ReactNativeWebView/ReactNativeWebView.filters

-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <ItemGroup>
-    <Filter Include="Resources">
-      <UniqueIdentifier>accd3aa8-1ba0-4223-9bbe-0c431709210b</UniqueIdentifier>
-      <Extensions>rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tga;tiff;tif;png;wav;mfcribbon-ms</Extensions>
-    </Filter>
-    <Filter Include="Generated Files">
-      <UniqueIdentifier>{926ab91d-31b4-48c3-b9a4-e681349f27f0}</UniqueIdentifier>
-    </Filter>
-  </ItemGroup>
-  <ItemGroup>
-    <ClCompile Include="pch.cpp" />
-    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
-    <ClCompile Include="ReactPackageProvider.cpp" />
-    <ClCompile Include="WebViewManager.cpp" />
-  </ItemGroup>
-  <ItemGroup>
-    <ClInclude Include="pch.h" />
-    <ClInclude Include="ReactPackageProvider.h" />
-    <ClInclude Include="WebViewManager.h" />
-  </ItemGroup>
-  <ItemGroup>
-    <None Include="ReactNativeWebView.def" />
-    <None Include="packages.config" />
-  </ItemGroup>
-  <ItemGroup>
-    <None Include="PropertySheet.props" />
-  </ItemGroup>
-  <ItemGroup>
-    <Midl Include="ReactPackageProvider.idl" />
-  </ItemGroup>
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup>
+    <Filter Include="Resources">
+      <UniqueIdentifier>accd3aa8-1ba0-4223-9bbe-0c431709210b</UniqueIdentifier>
+      <Extensions>rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tga;tiff;tif;png;wav;mfcribbon-ms</Extensions>
+    </Filter>
+    <Filter Include="Generated Files">
+      <UniqueIdentifier>{926ab91d-31b4-48c3-b9a4-e681349f27f0}</UniqueIdentifier>
+    </Filter>
+  </ItemGroup>
+  <ItemGroup>
+    <ClCompile Include="pch.cpp" />
+    <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
+    <ClCompile Include="ReactPackageProvider.cpp" />
+    <ClCompile Include="WebViewManager.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClInclude Include="pch.h" />
+    <ClInclude Include="ReactPackageProvider.h" />
+    <ClInclude Include="WebViewManager.h" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="ReactNativeWebView.def" />
+    <None Include="packages.config" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="PropertySheet.props" />
+  </ItemGroup>
+  <ItemGroup>
+    <Midl Include="ReactPackageProvider.idl" />
+  </ItemGroup>
 </Project>

windows/ReactNativeWebView/ReactWebViewManager.cpp

     }
 
     winrt::FrameworkElement ReactWebViewManager::CreateView() noexcept {
-        return winrt::WebView();
+        auto webView = winrt::WebView();
+        m_webView = winrt::make_weak(webView);
+        RegisterEvents();
+        return webView;
+    }
+
+    void ReactWebViewManager::RegisterEvents() {
+        if (auto webView = m_webView.get()) {
+            m_navigationCompletedRevoker = webView.NavigationCompleted(
+                winrt::auto_revoke, [=](auto const& sender, auto const& args) {
+                    OnNavigationCompleted(sender, args);
+                });
+        }
     }
 
     // IViewManagerWithReactContext
             for (auto const& pair : propertyMap) {
                 auto const& propertyName = pair.first;
                 auto const& propertyValue = pair.second;
+
                 if (propertyName == "source") {
                     if (!propertyValue.IsNull()) {
                         auto const& srcMap = propertyValue.Object();
-                        auto uriString = srcMap.at("uri").String();
-                        auto const isPackagerAsset = srcMap.at("__packager_asset").Boolean();
 
+                        auto uriString = srcMap.at("uri").String();
                         // non-uri sources not yet supported
                         if (uriString.length() == 0) {
                             continue;
                         }
 
+                        bool isPackagerAsset = false;
+                        if (srcMap.find("__packager_asset") != srcMap.end()) {
+                            isPackagerAsset = srcMap.at("__packager_asset").Boolean();
+                        }
+
                         if (isPackagerAsset && uriString.find("assets") == 0) {
                             uriString.replace(0, 6, "ms-appx://");
                         }
-                        auto const uri = winrt::Uri(to_hstring(uriString));
 
-                        SetSource(webView, uri);
+                        SetSource(winrt::Uri(to_hstring(uriString)));
                     }
                 }
             }
         }
     }
 
-    void ReactWebViewManager::SetSource(winrt::WebView const& webView, winrt::Uri const& uri) {
-        auto const tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
-
-        m_reactContext.DispatchEvent(
-            webView,
-            L"topLoadStart",
-            [tag](winrt::IJSValueWriter const& eventDataWriter) noexcept {
-                eventDataWriter.WriteObjectBegin();
-                {
-                    WriteProperty(eventDataWriter, L"target", tag);
-                }
-                eventDataWriter.WriteObjectEnd();
-            });
+    void ReactWebViewManager::SetSource(winrt::Uri const& uri) {
+        if (auto webView = m_webView.get()) {
+            auto tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
+            m_reactContext.DispatchEvent(
+                webView,
+                L"topLoadingStart",
+                [tag](winrt::IJSValueWriter const& eventDataWriter) noexcept {
+                    eventDataWriter.WriteObjectBegin();
+                    {
+                        WriteProperty(eventDataWriter, L"target", tag);
+                    }
+                    eventDataWriter.WriteObjectEnd();
+                });
 
-        webView.Navigate(uri);
+            webView.Navigate(uri);
+        }
     }
 
     // IViewManagerWithExportedEventTypeConstants
 
     ConstantProvider ReactWebViewManager::ExportedCustomDirectEventTypeConstants() noexcept {
         return [](winrt::Microsoft::ReactNative::IJSValueWriter const& constantWriter) {
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadStart");
+            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingStart");
             WriteCustomDirectEventTypeConstant(constantWriter, "onLoad");
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadEnd");
+            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingFinish");
         };
     }
 
+    // IViewManagerWithCommands
+    IMapView<hstring, int64_t> ReactWebViewManager::Commands() noexcept {
+        auto commands = winrt::single_threaded_map<hstring, int64_t>();
+        commands.Insert(L"goForward", 0);
+        commands.Insert(L"goBack", 1);
+        commands.Insert(L"reload", 2);
+        return commands.GetView();
+    }
+
+    void ReactWebViewManager::DispatchCommand(
+        FrameworkElement const& view,
+        int64_t commandId,
+        winrt::Microsoft::ReactNative::IJSValueReader const& commandArgsReader) noexcept {
+        if (auto webView = view.try_as<winrt::WebView>()) {
+            switch (commandId) {
+            case 0: // goForward
+                webView.GoForward();
+                break;
+            case 1: // goBack
+                webView.GoBack();
+                break;
+            case 2: // reload
+                webView.Refresh();
+                break;
+            }
+        }
+    }
+
+    void ReactWebViewManager::OnNavigationCompleted(winrt::WebView const& webView, winrt::WebViewNavigationCompletedEventArgs const& args) {
+        m_reactContext.DispatchEvent(
+            webView,
+            L"topLoadingFinish",
+            [webView, args](winrt::IJSValueWriter const& eventDataWriter) noexcept {
+                eventDataWriter.WriteObjectBegin();
+                {
+                    auto tag = webView.GetValue(winrt::FrameworkElement::TagProperty()).as<winrt::IPropertyValue>().GetInt64();
+                    WriteProperty(eventDataWriter, L"canGoBack", webView.CanGoBack());
+                    WriteProperty(eventDataWriter, L"canGoForward", webView.CanGoForward());
+                    WriteProperty(eventDataWriter, L"loading", false);
+                    WriteProperty(eventDataWriter, L"target", tag);
+                    WriteProperty(eventDataWriter, L"title", webView.DocumentTitle());
+                    WriteProperty(eventDataWriter, L"url", args.Uri().ToString());
+                }
+                eventDataWriter.WriteObjectEnd();
+            });
+    }
+
 } // namespace winrt::ReactWebView::implementation

windows/ReactNativeWebView/ReactWebViewManager.h

 
 #pragma once
 #include "winrt/Microsoft.ReactNative.h"
-#include <winrt/Windows.UI.Xaml.Media.h>
 #include "NativeModules.h"
 
 namespace winrt::ReactNativeWebView::implementation {
         winrt::Microsoft::ReactNative::IViewManager,
         winrt::Microsoft::ReactNative::IViewManagerWithReactContext,
         winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
-        winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants> {
+        winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
+        winrt::Microsoft::ReactNative::IViewManagerWithCommands> {
     public:
         ReactWebViewManager();
         // IViewManager
         winrt::Microsoft::ReactNative::ConstantProvider ExportedCustomBubblingEventTypeConstants() noexcept;
         winrt::Microsoft::ReactNative::ConstantProvider ExportedCustomDirectEventTypeConstants() noexcept;
 
+        // IViewManagerWithCommands
+        winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, int64_t> Commands() noexcept;
+
+        void DispatchCommand(
+            winrt::Windows::UI::Xaml::FrameworkElement const& view,
+            int64_t commandId,
+            winrt::Microsoft::ReactNative::IJSValueReader const& commandArgsReader) noexcept;
+
     private:
+        winrt::weak_ref<winrt::Windows::UI::Xaml::Controls::WebView> m_webView;
         winrt::Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
+        winrt::Windows::UI::Xaml::Controls::WebView::NavigationCompleted_revoker m_navigationCompletedRevoker{};
 
-        void SetSource(winrt::Windows::UI::Xaml::Controls::WebView const& webView, winrt::Windows::Foundation::Uri const& uri);
+        void RegisterEvents();
+        void SetSource(winrt::Windows::Foundation::Uri const& uri);
+        void OnNavigationCompleted(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationCompletedEventArgs const& args);
     };
 } // namespace winrt::ReactWebView::implementation

windows/ReactNativeWebView/pch.h

 #include <winrt/Windows.Foundation.Collections.h>
 #include <winrt/Windows.UI.Xaml.h>
 #include <winrt/Windows.UI.Xaml.Controls.h>
+#include <winrt/Windows.UI.Xaml.Navigation.h>
 #include <winrt/Microsoft.ReactNative.h>