Extract the WebView component out of core and into an extension

docs/docs/components/webview.md

@@ -7,131 +7,4 @@ permalink: docs/components/webview.html
 next: apis/alert
 ---
 
-This component displays HTML contents in an embedded browser control.
-
-To limit the functionality of the browser control, specify one or more sandbox options. For detailed definitions of sandbox flags, refer to the [HTML documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
-
-
-## Types
-``` javascript
-enum WebViewSandboxMode {
-    None = 0,
-    AllowForms = 1 << 0,
-    AllowModals = 1 << 1,
-    AllowOrientationLock = 1 << 2,
-    AllowPointerLock = 1 << 3,
-    AllowPopups = 1 << 4,
-    AllowPopupsToEscapeSandbox = 1 << 5,
-    AllowPresentation = 1 << 6,
-    AllowSameOrigin = 1 << 7,
-    AllowScripts = 1 << 8,
-    AllowTopNavigation = 1 << 9,
-
-    // Control https mixed content behavior, never by default
-    AllowMixedContentAlways = 1 << 10,
-    AllowMixedContentCompatibilityMode = 1 << 11
-}
-
-interface WebViewNavigationState {
-    canGoBack: boolean;
-    canGoForward: boolean;
-    loading: boolean;
-    url: string;
-    title: string;
-    readonly navigationType:
-        | 'click'
-        | 'formsubmit'
-        | 'backforward'
-        | 'reload'
-        | 'formresubmit'
-        | 'other';
-}
-
-interface WebViewErrorState {
-    description: string;
-    domain: string;
-    code: string;
-}
-
-interface WebViewSource {
-    html: string;
-    baseUrl?: string; // Native only
-}
-```
-
-## Props
-``` javascript
-// Allow javascript code to call storage methods?
-domStorageEnabled: boolean = true; // Native only
-
-// JavaScript code that is injected into the control and executed
-injectedJavaScript: string = undefined; // Native only
-
-// Is JavaScript executed within the control?
-javaScriptEnabled: boolean = true;
-
-// Determines whether HTML5 audio and video requires the user to tap them before they start playing.
-mediaPlaybackRequiresUserAction: boolean = true; // Native only
-
-// Determines whether HTML5 videos play inline or use the native full-screen controller.
-allowsInlineMediaPlayback: boolean = false; // iOS only
-
-// HTTP headers to include when fetching the URL.
-headers: { [headerName: string]: string } = undefined;
-
-// Called when an error occurs that prevents the contents from loading
-onError: (e: SyntheticEvent) => void = undefined; // Native only
-
-// Called when the contents successfully load
-onLoad: (e: SyntheticEvent) => void = undefined;
-
-// Called when the contents start to load
-onLoadStart: (e: SyntheticEvent) => void = undefined; // Native only
-
-// Called when a message is posted from within a WebView
-onMessage: (e: WebViewMessageEvent) => void = undefined;
-
-// Called when the navigation state changes
-onNavigationStateChange: (navigationState: WebViewNavigationState) => void;
-
-// Flags that restrict behaviors within the control
-sandbox: WebViewSandboxMode = None;
-
-// Zooms the page contents to fit the available space; deprecated on
-// iOS in RN 0.57
-scalesPageToFit: boolean = false; // Native only
-
-// HTML to display in webview (if url is not specified)
-source: WebViewSource = undefined;
-
-// Start loading immediately or wait for reload?
-startInLoadingState: boolean = true; // Native only
-
-// See below for supported styles
-style: WebViewStyleRuleSet | WebViewStyleRuleSet[] = [];
-
-// ID that can be used to identify the instantiated element for testing purposes.
-testId: string = undefined;
-
-// URL to HTML content
-url: string = undefined;
-```
-
-## Styles
-No specialized styles
-
-## Methods
-``` javascript
-// Navigate back and forward
-goBack();
-goForward();
-
-// Posts a message to the web control, allowing for communication between
-// the app and the JavaScript code running within the web control. On native
-// platforms, the targetOrigin is ignored.
-postMessage(message: string, targetOrigin?: string = '*'): void;
-
-// Force the page to reload
-reload();
-```
-
+This has been deprecated from ReactXP Core and moved to an extension (reactxp-webview) inline with the React Native Lean Core initiative.

docs/docs/extensions/virtuallistview.md

@@ -4,6 +4,7 @@ title: VirtualListView
 layout: docs
 category: Extensions
 permalink: docs/extensions/virtuallistview.html
+next: extensions/webview
 ---
 
 This components supports a vertical list of items within a scrolling area. The visible portion of the list is referred to as the "view port". The list is virtualized, which means that items are rendered only when they are within the view port (or just above or below the view port).

docs/docs/extensions/webview.md

@@ -0,0 +1,136 @@
+---
+id: extensions/webview
+title: WebView
+layout: docs
+category: Extensions
+permalink: docs/extensions/webview.html
+---
+
+This component displays HTML contents in an embedded browser control.
+
+To limit the functionality of the browser control, specify one or more sandbox options. For detailed definitions of sandbox flags, refer to the [HTML documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
+
+
+## Types
+``` javascript
+enum WebViewSandboxMode {
+    None = 0,
+    AllowForms = 1 << 0,
+    AllowModals = 1 << 1,
+    AllowOrientationLock = 1 << 2,
+    AllowPointerLock = 1 << 3,
+    AllowPopups = 1 << 4,
+    AllowPopupsToEscapeSandbox = 1 << 5,
+    AllowPresentation = 1 << 6,
+    AllowSameOrigin = 1 << 7,
+    AllowScripts = 1 << 8,
+    AllowTopNavigation = 1 << 9,
+
+    // Control https mixed content behavior, never by default
+    AllowMixedContentAlways = 1 << 10,
+    AllowMixedContentCompatibilityMode = 1 << 11
+}
+
+interface WebViewNavigationState {
+    canGoBack: boolean;
+    canGoForward: boolean;
+    loading: boolean;
+    url: string;
+    title: string;
+    readonly navigationType:
+        | 'click'
+        | 'formsubmit'
+        | 'backforward'
+        | 'reload'
+        | 'formresubmit'
+        | 'other';
+}
+
+interface WebViewErrorState {
+    description: string;
+    domain: string;
+    code: string;
+}
+
+interface WebViewSource {
+    html: string;
+    baseUrl?: string; // Native only
+}
+```
+
+## Props
+``` javascript
+// Allow javascript code to call storage methods?
+domStorageEnabled: boolean = true; // Native only
+
+// JavaScript code that is injected into the control and executed
+injectedJavaScript: string = undefined; // Native only
+
+// Is JavaScript executed within the control?
+javaScriptEnabled: boolean = true;
+
+// Determines whether HTML5 audio and video requires the user to tap them before they start playing.
+mediaPlaybackRequiresUserAction: boolean = true; // Native only
+
+// Determines whether HTML5 videos play inline or use the native full-screen controller.
+allowsInlineMediaPlayback: boolean = false; // iOS only
+
+// HTTP headers to include when fetching the URL.
+headers: { [headerName: string]: string } = undefined;
+
+// Called when an error occurs that prevents the contents from loading
+onError: (e: SyntheticEvent) => void = undefined; // Native only
+
+// Called when the contents successfully load
+onLoad: (e: SyntheticEvent) => void = undefined;
+
+// Called when the contents start to load
+onLoadStart: (e: SyntheticEvent) => void = undefined; // Native only
+
+// Called when a message is posted from within a WebView
+onMessage: (e: WebViewMessageEvent) => void = undefined;
+
+// Called when the navigation state changes
+onNavigationStateChange: (navigationState: WebViewNavigationState) => void;
+
+// Flags that restrict behaviors within the control
+sandbox: WebViewSandboxMode = None;
+
+// Zooms the page contents to fit the available space; deprecated on
+// iOS in RN 0.57
+scalesPageToFit: boolean = false; // Native only
+
+// HTML to display in webview (if url is not specified)
+source: WebViewSource = undefined;
+
+// Start loading immediately or wait for reload?
+startInLoadingState: boolean = true; // Native only
+
+// See below for supported styles
+style: WebViewStyleRuleSet | WebViewStyleRuleSet[] = [];
+
+// ID that can be used to identify the instantiated element for testing purposes.
+testId: string = undefined;
+
+// URL to HTML content
+url: string = undefined;
+```
+
+## Styles
+No specialized styles
+
+## Methods
+``` javascript
+// Navigate back and forward
+goBack();
+goForward();
+
+// Posts a message to the web control, allowing for communication between
+// the app and the JavaScript code running within the web control. On native
+// platforms, the targetOrigin is ignored.
+postMessage(message: string, targetOrigin?: string = '*'): void;
+
+// Force the page to reload
+reload();
+```
+

extensions/webview/.gitignore

@@ -0,0 +1,20 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+package-lock.json
+
+# Optional npm cache directory
+.npm
+
+# Build artifacts
+**/dist
+
+# Miscellaneous user files
+*.user
+.vscode
+.DS_STORE
+

extensions/webview/.npmignore

@@ -0,0 +1,5 @@
+/node_modules
+/src/.vs
+/src/bin
+/src/obj
+*.user

extensions/webview/README.md

@@ -0,0 +1,21 @@
+# reactxp-webview
+This module provides a cross-platform control that allows the display of an independent web page within the [ReactXP](https://microsoft.github.io/reactxp/) library. This used to be a part of ReactXP core, but was extracted to be a standalone module inline with React Native `Lean Core` initiative. This exists as a standalone module to prevent users of ReactXP from having to link native modules when getting started.
+
+## Getting Started
+This module relies on [react-native-webview](https://www.npmjs.com/package/react-native-webview) and will need to be linked into the react-native project.
+This can be done by following the linking instructions in the React Native documentation or by running
+```react-native link react-native-webview```
+
+## Documentation
+For detailed documentation, look [here](https://microsoft.github.io/reactxp/docs/extensions/webview.html).
+
+### Prerequisites
+* [ReactXP](https://github.com/microsoft/reactxp/)
+
+## Contributing
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 
+
+You must sign a Contribution License Agreement (CLA) before your PR will be merged. This a one-time requirement for Microsoft projects in GitHub. You can read more about [Contribution License Agreements (CLA)](https://en.wikipedia.org/wiki/Contributor_License_Agreement) on Wikipedia. You can sign the Microsoft Contribution License Agreement by visiting https://cla.microsoft.com/. Use your GitHub account to login.
+
+## License
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

extensions/webview/index.android.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/android/PluginBase.js');

extensions/webview/index.ios.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/ios/PluginBase.js');

extensions/webview/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+// Export web by default. Other platforms have custom index.[platform].js files
+module.exports = require('./dist/web/PluginBase.js');

extensions/webview/index.macos.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/macos/PluginBase.js');

extensions/webview/index.windows.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/windows/PluginBase.js');

extensions/webview/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "reactxp-webview",
+  "version": "0.0.1-alpha.1",
+  "description": "Plugin for ReactXP that provides a control that allows the display of an independent web page",
+  "author": "ReactXP Team <reactxp@microsoft.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "npm run tslint && tsc",
+    "tslint": "tslint -p tsconfig.json -r tslint.json -r ./node_modules/tslint-microsoft-contrib --fix || true"
+  },
+  "dependencies": {
+    "react-native-webview": "^5.6.3"
+  },
+  "peerDependencies": {
+    "reactxp": "^1.6.0",
+    "react": "^16.0",
+    "react-dom": "^16.0",
+    "react-native": ">=0.57 <0.60",
+    "react-native-windows": "^0.57.1"
+  },
+  "devDependencies": {
+    "reactxp": "^1.6.0",
+    "typescript": "3.4.5",
+    "tslint": "5.16.0",
+    "tslint-microsoft-contrib": "6.1.1"
+  },
+  "types": "dist/web/PluginBase.d.ts"
+}

extensions/webview/src/android/PluginBase.tsx

@@ -0,0 +1,13 @@
+/*
+ * PluginBase.ts
+ *
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT license.
+ *
+ * Base export for the Android implementation of the plugin.
+ */
+
+import * as Types from '../common/Types';
+import WebView from '../native-common/WebView';
+
+export { WebView as default, Types };