Merge branch 'master' into android-permissions

.circleci/config.yml

@@ -34,7 +34,7 @@ jobs:
             - node_modules-{{ arch }}-{{ checksum "yarn.lock" }}
 
       - run:
-          name: Run Tests
+          name: Lint checks
           command: yarn ci
 
   publish:

.github/workflows/detox.yml

@@ -1,5 +1,5 @@
 name: 'Detox CI Tests'
-on: [push]
+on: [pull_request]
 
 jobs:
   tests:

.github/workflows/scripts/install-vs-features.ps1

@@ -0,0 +1,108 @@
+param (
+	[Parameter(Mandatory=$true)]
+	[string[]] $Components,
+
+	[uri] $InstallerUri = "https://download.visualstudio.microsoft.com/download/pr/c4fef23e-cc45-4836-9544-70e213134bc8/1ee5717e9a1e05015756dff77eb27d554a79a6db91f2716d836df368381af9a1/vs_Enterprise.exe",
+
+	[string] $VsInstaller = "${env:System_DefaultWorkingDirectory}\vs_Enterprise.exe",
+
+	[string] $VsInstallOutputDir = "${env:System_DefaultWorkingDirectory}\vs",
+
+	[System.IO.FileInfo] $VsInstallPath = "${env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\Enterprise",
+
+	[System.IO.FileInfo] $VsInstallerPath = "${env:ProgramFiles(x86)}\Microsoft Visual Studio\Installer",
+
+	[switch] $Collect = $false,
+
+	[switch] $Cleanup = $false,
+
+	[switch] $UseWebInstaller = $false
+)
+
+$Components | ForEach-Object {
+	$componentList += '--add', $_
+}
+
+$LocalVsInstaller = "$VsInstallerPath\vs_installershell.exe"
+
+$UseWebInstaller = $UseWebInstaller -or -not (Test-Path -Path "$LocalVsInstaller")
+
+if ($UseWebInstaller) {
+	Write-Host "Downloading web installer..."
+
+	Invoke-WebRequest -Method Get `
+		-Uri $InstallerUri `
+		-OutFile $VsInstaller
+
+	New-Item -ItemType directory -Path $VsInstallOutputDir
+
+	Write-Host "Running web installer to download requested components..."
+
+	Start-Process `
+		-FilePath "$VsInstaller" `
+		-ArgumentList ( `
+			'--layout', "$VsInstallOutputDir",
+			'--wait',
+			'--norestart',
+			'--quiet' + `
+			$componentList
+		) `
+		-Wait `
+		-PassThru
+
+	Write-Host "Running downloaded VS installer to add requested components..."
+
+	Start-Process `
+		-FilePath "$VsInstallOutputDir\vs_Enterprise.exe" `
+		-ArgumentList (
+			'modify',
+			'--installPath', "`"$VsInstallPath`"" ,
+			'--wait',
+			'--norestart',
+			'--quiet' + `
+			$componentList
+		) `
+		-Wait `
+		-PassThru `
+		-OutVariable returnCode
+
+	if ($Cleanup) {
+		Write-Host "Cleaning up..."
+
+		Remove-Item -Path $VsInstaller
+		Remove-Item -Path $VsInstallOutputDir -Recurse
+	}
+	
+} else {
+	Write-Host "Running local installer to add requested components..."
+
+	Start-Process `
+		-FilePath "$LocalVsInstaller" `
+		-ArgumentList (
+			'modify',
+			'--installPath', "`"$VsInstallPath`"" ,
+			'--norestart',
+			'--quiet' + `
+			$componentList
+		) `
+		-Wait `
+		-OutVariable returnCode
+}
+
+if ($Collect) {
+	Invoke-WebRequest -Method Get `
+		-Uri 'https://download.microsoft.com/download/8/3/4/834E83F6-C377-4DCE-A757-69A418B6C6DF/Collect.exe' `
+		-OutFile ${env:System_DefaultWorkingDirectory}\Collect.exe
+
+	# Should generate ${env:Temp}\vslogs.zip
+	Start-Process `
+		-FilePath "${env:System_DefaultWorkingDirectory}\Collect.exe" `
+		-Wait `
+		-PassThru
+
+	New-Item -ItemType Directory -Force ${env:System_DefaultWorkingDirectory}\vslogs
+	Expand-Archive -Path ${env:TEMP}\vslogs.zip -DestinationPath ${env:System_DefaultWorkingDirectory}\vslogs\
+
+	Write-Host "VC versions after installation:"
+	Get-ChildItem -Name "$VsInstallPath\VC\Tools\MSVC\"
+}

.github/workflows/windows-ci.yml

@@ -0,0 +1,67 @@
+name: Windows CI
+on: [pull_request]
+
+jobs:
+  run-windows-tests:
+    name: Build & run tests
+    runs-on: windows-2019
+
+    steps:
+    - uses: actions/checkout@v2
+      name: Checkout Code
+     
+    - name: Setup Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.9.1'
+
+    - name: Install Visual Studio components
+      shell: powershell
+      run: .\.github\workflows\scripts\install-vs-features.ps1 Microsoft.VisualStudio.Component.VC.v141.x86.x64,Microsoft.VisualStudio.ComponentGroup.UWP.VC.v141
+
+    - name: Setup MSBuild
+      uses: microsoft/setup-msbuild@v1.0.0
+      with:
+        vs-version: 16.5
+       
+    - name: Setup NuGet
+      uses: NuGet/setup-nuget@v1.0.2
+
+    - name: Check node modules cache
+      uses: actions/cache@v1
+      id: yarn-cache
+      with:
+        path: ./node_modules
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Install node modules
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      run: yarn --pure-lockfile
+    
+    - name: yarn build
+      if: steps.yarn-cache.outputs.cache-hit == 'true'
+      run: |
+        yarn build
+        yarn tsc
+ 
+    - name: NuGet restore
+      run: nuget restore example\windows\WebViewWindows.sln
+
+    - name: Build x64 release
+      run: msbuild example\windows\WebViewWindows.sln /p:Configuration=Release /p:Platform=x64 -m
+
+    - name: Deploy
+      shell: powershell
+      run: |
+        cd example
+        Copy-Item -Path windows\x64\Release -Recurse -Destination windows\
+        npx react-native run-windows --arch x64 --release --no-build --no-packager
+
+    - name: Start Appium server
+      shell: powershell
+      run: Start-Process PowerShell -ArgumentList "yarn appium"
+      
+    - name: Run tests
+      run: yarn test:windows

.gitignore

@@ -57,3 +57,5 @@ lib/
 .classpath
 .project
 .settings/
+msbuild.binlog
+example/msbuild.binlog

__tests__/Alert.test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { driver, By2 } from 'selenium-appium'
+import { until } from 'selenium-webdriver';
+
+const setup = require('../jest-setups/jest.setup');
+jest.setTimeout(50000);
+
+beforeAll(() => {
+  return driver.startWithCapabilities(setup.capabilites);
+});
+
+afterAll(() => {
+  return driver.quit();
+});
+
+describe('Alert Tests', () => {
+  
+  test('Show Alert', async () => {
+    const showAlertButton = await driver.wait(until.elementLocated(By2.nativeName('Show alert')));
+    await showAlertButton.click();
+    await driver.wait(until.elementLocated(By2.nativeName('Hello! I am an alert box!')));
+    await By2.nativeName('OK').click();
+    const dismissMessage = await driver.wait(until.elementLocated(By2.nativeName('Alert dismissed!')));
+    expect(dismissMessage).not.toBeNull();
+  });
+
+});

docs/Guide.md

@@ -55,7 +55,7 @@ class MyWeb extends Component {
 
 ### Loading local HTML files
 
-Sometimes you would have bundled an HTML file along with the app and would like to load the HTML asset into your WebView. To do this on iOS, you can just import the html file like any other asset as shown below.
+Sometimes you would have bundled an HTML file along with the app and would like to load the HTML asset into your WebView. To do this on iOS and Windows, you can just import the html file like any other asset as shown below.
 
 ```js
 import React, { Component } from 'react';

example/App.tsx

@@ -16,6 +16,7 @@ import Background from './examples/Background';
 import Downloads from './examples/Downloads';
 import Uploads from './examples/Uploads';
 import Injection from './examples/Injection';
+import LocalPageLoad from './examples/LocalPageLoad';
 
 const TESTS = {
   Alerts: {
@@ -66,6 +67,14 @@ const TESTS = {
       return <Injection />;
     },
   },
+  PageLoad: {
+    title: 'LocalPageLoad',
+    testId: 'LocalPageLoad',
+    description: 'Local Page load test',
+    render() {
+      return <LocalPageLoad />;
+    },
+  },
 };
 
 type Props = {};
@@ -124,6 +133,11 @@ export default class App extends Component<Props, State> {
             title="Injection"
             onPress={() => this._changeTest('Injection')}
           />
+          <Button
+            testID="testType_pageLoad"
+            title="LocalPageLoad"
+            onPress={() => this._changeTest('PageLoad')}
+          />
           {Platform.OS == "ios" && <Button
             testID="testType_downloads"
             title="Downloads"

example/assets/test.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Test</title>
+    </head>
+    <body>
+        <h2>Local page test</h2>
+    </body>
+</html>

example/examples/LocalPageLoad.tsx

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import {View, Text, Alert, TextInput, Button} from 'react-native';
+import WebView from 'react-native-webview';
+const localHtmlFile = require('../assets/test.html');
+
+export default class LocalPageLoad extends Component<Props, State> {
+    render() {
+      return (
+        <View>
+            <View style={{ width: '100%', height: '100%' }}>
+                <WebView source={localHtmlFile}/>
+          </View>
+        </View>
+      );
+    }
+  }

example/windows/.gitignore

@@ -1,5 +1,6 @@
 *AppPackages*
 *BundleArtifacts*
+*Bundle
 
 #OS junk files
 [Tt]humbs.db

example/windows/WebViewWindows/Package.appxmanifest

@@ -7,7 +7,7 @@
   IgnorableNamespaces="uap mp">
 
  <Identity
-    Name="6b4ef5e9-85c1-4006-87d7-77c61c62f84f"
+    Name="WebViewWindows"
     Publisher="CN=kaigu"
     Version="1.0.0.0" />
 

example/windows/WebViewWindows/WebViewWindows.vcxproj

@@ -18,6 +18,7 @@
     <PackageCertificateKeyFile>WebViewWindows_TemporaryKey.pfx</PackageCertificateKeyFile>
     <PackageCertificateThumbprint>82A0D300B0912A62746FFB3E6E04F88985BC2798</PackageCertificateThumbprint>
     <PackageCertificatePassword>password</PackageCertificatePassword>
+    <AppxPackageSigningEnabled>true</AppxPackageSigningEnabled>
   </PropertyGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <ItemGroup Label="ProjectConfigurations">
@@ -145,6 +146,7 @@
   <ItemGroup>
     <None Include="packages.config" />
     <None Include="PropertySheet.props" />
+    <None Include="WebViewWindows_TemporaryKey.pfx" />
     <Text Include="readme.txt">
       <DeploymentContent>false</DeploymentContent>
     </Text>
@@ -160,8 +162,8 @@
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <PropertyGroup>
     <BundleCommand>
-      cd $(SolutionDir)..
-      react-native bundle --platform windows --entry-file example/index.js --bundle-output windows/$(SolutionName)/Bundle/index.windows.bundle --assets-dest windows/$(SolutionName)/Bundle
+      cd $(SolutionDir)..\..
+      npx react-native bundle --platform windows --entry-file example/index.js --bundle-output example/windows/WebViewWindows/Bundle/index.windows.bundle --assets-dest example/windows/WebViewWindows/Bundle --use-react-native-windows
     </BundleCommand>
   </PropertyGroup>
   <Import Project="..\..\..\node_modules\react-native-windows\PropertySheets\Bundle.Cpp.targets" />

example/windows/WebViewWindows/WebViewWindows.vcxproj.filters

@@ -51,6 +51,7 @@
   <ItemGroup>
     <None Include="PropertySheet.props" />
     <None Include="packages.config" />
+    <None Include="WebViewWindows_TemporaryKey.pfx" />
   </ItemGroup>
   <ItemGroup>
     <Text Include="readme.txt" />

jest-setups/jest.setup.js

@@ -0,0 +1,12 @@
+import { windowsAppDriverCapabilities } from 'selenium-appium'
+
+switch (platform) {
+    case "windows":
+        const webViewWindowsAppId = 'WebViewWindows_3x6rhkkr9xcf6!App';
+        module.exports = {
+            capabilites: windowsAppDriverCapabilities(webViewWindowsAppId)
+        }
+        break;
+    default:
+        throw "Unknown platform: " + platform;
+}

jest-setups/jest.setup.windows.js

@@ -0,0 +1 @@
+platform = "windows"

package.json

@@ -16,12 +16,13 @@
     "start:ios": "react-native run-ios --project-path example/ios --scheme example",
     "start:macos": "node node_modules/react-native-macos/local-cli/cli.js start --use-react-native-macos",
     "start:windows": "react-native start --use-react-native-windows",
-    "ci": "CI=true && yarn lint && yarn test",
+    "ci": "CI=true && yarn lint",
     "ci:publish": "yarn semantic-release",
     "lint": "yarn tsc --noEmit && yarn eslint ./src --ext .ts,.tsx",
     "build": "yarn tsc",
     "prepare": "yarn build",
-    "test": "yarn jest"
+    "appium": "appium",
+    "test:windows": "yarn jest --setupFiles=./jest-setups/jest.setup.windows.js"
   },
   "rn-docs": {
     "title": "Webview",
@@ -29,8 +30,7 @@
   },
   "peerDependencies": {
     "react": "^16.9",
-    "react-native": ">=0.60 <0.62",
-    "react-native-windows": "^0.61.0-beta.58"
+    "react-native": ">=0.60 <0.62"
   },
   "dependencies": {
     "escape-string-regexp": "2.0.0",
@@ -47,6 +47,7 @@
     "@types/jest": "24.0.18",
     "@types/react": "16.8.8",
     "@types/react-native": "0.60.11",
+    "@types/selenium-webdriver": "4.0.9",
     "@typescript-eslint/eslint-plugin": "2.1.0",
     "@typescript-eslint/parser": "2.1.0",
     "babel-eslint": "10.0.3",
@@ -60,14 +61,17 @@
     "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-native": "3.7.0",
     "jest": "24.9.0",
+    "metro": "0.56.4",
     "metro-react-native-babel-preset": "0.54.1",
     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-macos": "0.60.0-microsoft.73",
-    "react-native-windows": "^0.61.0-beta.58",
-    "rnpm-plugin-windows": "^0.5.1-0",
+    "react-native-windows": "0.61.5",
     "semantic-release": "15.13.24",
-    "typescript": "3.6.2"
+    "typescript": "3.6.2",
+    "appium": "1.17.0",
+    "selenium-appium": "0.0.15",
+    "selenium-webdriver": "4.0.0-alpha.7"
   },
   "repository": {
     "type": "git",

windows/ReactNativeWebView/ReactWebView.cpp

@@ -97,7 +97,7 @@ namespace winrt::ReactNativeWebView::implementation {
                 eventDataWriter.WriteObjectEnd();
             });
 
-        winrt::hstring windowAlert = L"window.alert = function (msg) {window.external.notify(`{\"type\":\"alert\",\"message\":\"${msg}\"}`)};";
+        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 });
     }
@@ -119,26 +119,26 @@ namespace winrt::ReactNativeWebView::implementation {
 
     void ReactWebView::OnScriptNotify(winrt::IInspectable const& /*sender*/, winrt::Windows::UI::Xaml::Controls::NotifyEventArgs const& args) {
         winrt::JsonObject jsonObject;
-        if (winrt::JsonObject::TryParse(args.Value(), jsonObject)) {
+        if (winrt::JsonObject::TryParse(args.Value(), jsonObject) && jsonObject.HasKey(L"type")) {
             auto type = jsonObject.GetNamedString(L"type");
-            if (type == L"alert") {
+            if (type == L"__alert") {
                 auto dialog = winrt::MessageDialog(jsonObject.GetNamedString(L"message"));
                 dialog.Commands().Append(winrt::UICommand(L"OK"));
                 dialog.ShowAsync();
+                return;
             }
         }
-        else {
-            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()));
-                    }
-                    eventDataWriter.WriteObjectEnd();
-                });
-        }
+
+        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()));
+                }
+                eventDataWriter.WriteObjectEnd();
+            });
     }
 
 } // namespace winrt::ReactNativeWebView::implementation

windows/ReactNativeWebView/ReactWebViewManager.cpp

@@ -58,7 +58,6 @@ namespace winrt::ReactNativeWebView::implementation {
                     auto const& srcMap = propertyValue.AsObject();
                     if (srcMap.find("uri") != srcMap.end()) {
                         auto uriString = srcMap.at("uri").AsString();
-                        // non-uri sources not yet supported
                         if (uriString.length() == 0) {
                             continue;
                         }
@@ -67,9 +66,9 @@ namespace winrt::ReactNativeWebView::implementation {
                         if (srcMap.find("__packager_asset") != srcMap.end()) {
                             isPackagerAsset = srcMap.at("__packager_asset").AsBoolean();
                         }
-
-                        if (isPackagerAsset && uriString.find("assets") == 0) {
-                            uriString.replace(0, 6, "ms-appx://");
+                        if (isPackagerAsset && uriString.find("file://") == 0) {
+                            auto bundleRootPath = winrt::to_string(ReactNativeHost().InstanceSettings().BundleRootPath());
+                            uriString.replace(0, 7, bundleRootPath.empty() ? "ms-appx-web:///Bundle/" : bundleRootPath);
                         }
 
                         webView.Navigate(winrt::Uri(to_hstring(uriString)));
@@ -94,10 +93,10 @@ namespace winrt::ReactNativeWebView::implementation {
 
     ConstantProviderDelegate ReactWebViewManager::ExportedCustomDirectEventTypeConstants() noexcept {
         return [](winrt::IJSValueWriter const& constantWriter) {
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingStart");
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingFinish");
-            WriteCustomDirectEventTypeConstant(constantWriter, "onLoadingError");
-            WriteCustomDirectEventTypeConstant(constantWriter, "onMessage");
+            WriteCustomDirectEventTypeConstant(constantWriter, "LoadingStart");
+            WriteCustomDirectEventTypeConstant(constantWriter, "LoadingFinish");
+            WriteCustomDirectEventTypeConstant(constantWriter, "LoadingError");
+            WriteCustomDirectEventTypeConstant(constantWriter, "Message");
         };
     }
 
@@ -116,6 +115,7 @@ namespace winrt::ReactNativeWebView::implementation {
         FrameworkElement const& view,
         int64_t commandId,
         winrt::IJSValueReader const& commandArgsReader) noexcept {
+        auto commandArgs = JSValue::ReadArrayFrom(commandArgsReader);
         if (auto webView = view.try_as<winrt::WebView>()) {
             switch (commandId) {
                 case static_cast<int64_t>(WebViewCommands::GoForward) :
@@ -135,7 +135,7 @@ namespace winrt::ReactNativeWebView::implementation {
                     webView.Stop();
                     break;
                 case static_cast<int64_t>(WebViewCommands::InjectJavaScript) :
-                    webView.InvokeScriptAsync(L"eval", { commandArgsReader.GetString() });
+                    webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
                     break;
             }
         }