Skip to content

Commit 044d46e

Browse files
sbecaerictraut
sbeca
authored and
erictraut
committed
Extract the WebView component out of core and into an extension (#1101)
* Extract the WebView component out of core and into an extension * Fix a race condition that could result in accurate test results in RXP Test * Resolve Github review nit * Fix typo
1 parent 75a6227 commit 044d46e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+580
-340
lines changed

‎docs/docs/components/webview.md‎

Lines changed: 1 addition & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -7,131 +7,4 @@ permalink: docs/components/webview.html
77
next: apis/alert
88
---
99

10-
This component displays HTML contents in an embedded browser control.
11-
12-
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).
13-
14-
15-
## Types
16-
``` javascript
17-
enum WebViewSandboxMode {
18-
None = 0,
19-
AllowForms = 1 << 0,
20-
AllowModals = 1 << 1,
21-
AllowOrientationLock = 1 << 2,
22-
AllowPointerLock = 1 << 3,
23-
AllowPopups = 1 << 4,
24-
AllowPopupsToEscapeSandbox = 1 << 5,
25-
AllowPresentation = 1 << 6,
26-
AllowSameOrigin = 1 << 7,
27-
AllowScripts = 1 << 8,
28-
AllowTopNavigation = 1 << 9,
29-
30-
// Control https mixed content behavior, never by default
31-
AllowMixedContentAlways = 1 << 10,
32-
AllowMixedContentCompatibilityMode = 1 << 11
33-
}
34-
35-
interface WebViewNavigationState {
36-
canGoBack: boolean;
37-
canGoForward: boolean;
38-
loading: boolean;
39-
url: string;
40-
title: string;
41-
readonly navigationType:
42-
| 'click'
43-
| 'formsubmit'
44-
| 'backforward'
45-
| 'reload'
46-
| 'formresubmit'
47-
| 'other';
48-
}
49-
50-
interface WebViewErrorState {
51-
description: string;
52-
domain: string;
53-
code: string;
54-
}
55-
56-
interface WebViewSource {
57-
html: string;
58-
baseUrl?: string; // Native only
59-
}
60-
```
61-
62-
## Props
63-
``` javascript
64-
// Allow javascript code to call storage methods?
65-
domStorageEnabled: boolean = true; // Native only
66-
67-
// JavaScript code that is injected into the control and executed
68-
injectedJavaScript: string = undefined; // Native only
69-
70-
// Is JavaScript executed within the control?
71-
javaScriptEnabled: boolean = true;
72-
73-
// Determines whether HTML5 audio and video requires the user to tap them before they start playing.
74-
mediaPlaybackRequiresUserAction: boolean = true; // Native only
75-
76-
// Determines whether HTML5 videos play inline or use the native full-screen controller.
77-
allowsInlineMediaPlayback: boolean = false; // iOS only
78-
79-
// HTTP headers to include when fetching the URL.
80-
headers: { [headerName: string]: string } = undefined;
81-
82-
// Called when an error occurs that prevents the contents from loading
83-
onError: (e: SyntheticEvent) => void = undefined; // Native only
84-
85-
// Called when the contents successfully load
86-
onLoad: (e: SyntheticEvent) => void = undefined;
87-
88-
// Called when the contents start to load
89-
onLoadStart: (e: SyntheticEvent) => void = undefined; // Native only
90-
91-
// Called when a message is posted from within a WebView
92-
onMessage: (e: WebViewMessageEvent) => void = undefined;
93-
94-
// Called when the navigation state changes
95-
onNavigationStateChange: (navigationState: WebViewNavigationState) => void;
96-
97-
// Flags that restrict behaviors within the control
98-
sandbox: WebViewSandboxMode = None;
99-
100-
// Zooms the page contents to fit the available space; deprecated on
101-
// iOS in RN 0.57
102-
scalesPageToFit: boolean = false; // Native only
103-
104-
// HTML to display in webview (if url is not specified)
105-
source: WebViewSource = undefined;
106-
107-
// Start loading immediately or wait for reload?
108-
startInLoadingState: boolean = true; // Native only
109-
110-
// See below for supported styles
111-
style: WebViewStyleRuleSet | WebViewStyleRuleSet[] = [];
112-
113-
// ID that can be used to identify the instantiated element for testing purposes.
114-
testId: string = undefined;
115-
116-
// URL to HTML content
117-
url: string = undefined;
118-
```
119-
120-
## Styles
121-
No specialized styles
122-
123-
## Methods
124-
``` javascript
125-
// Navigate back and forward
126-
goBack();
127-
goForward();
128-
129-
// Posts a message to the web control, allowing for communication between
130-
// the app and the JavaScript code running within the web control. On native
131-
// platforms, the targetOrigin is ignored.
132-
postMessage(message: string, targetOrigin?: string = '*'): void;
133-
134-
// Force the page to reload
135-
reload();
136-
```
137-
10+
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: VirtualListView
44
layout: docs
55
category: Extensions
66
permalink: docs/extensions/virtuallistview.html
7+
next: extensions/webview
78
---
89

910
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‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
id: extensions/webview
3+
title: WebView
4+
layout: docs
5+
category: Extensions
6+
permalink: docs/extensions/webview.html
7+
---
8+
9+
This component displays HTML contents in an embedded browser control.
10+
11+
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).
12+
13+
14+
## Types
15+
``` javascript
16+
enum WebViewSandboxMode {
17+
None = 0,
18+
AllowForms = 1 << 0,
19+
AllowModals = 1 << 1,
20+
AllowOrientationLock = 1 << 2,
21+
AllowPointerLock = 1 << 3,
22+
AllowPopups = 1 << 4,
23+
AllowPopupsToEscapeSandbox = 1 << 5,
24+
AllowPresentation = 1 << 6,
25+
AllowSameOrigin = 1 << 7,
26+
AllowScripts = 1 << 8,
27+
AllowTopNavigation = 1 << 9,
28+
29+
// Control https mixed content behavior, never by default
30+
AllowMixedContentAlways = 1 << 10,
31+
AllowMixedContentCompatibilityMode = 1 << 11
32+
}
33+
34+
interface WebViewNavigationState {
35+
canGoBack: boolean;
36+
canGoForward: boolean;
37+
loading: boolean;
38+
url: string;
39+
title: string;
40+
readonly navigationType:
41+
| 'click'
42+
| 'formsubmit'
43+
| 'backforward'
44+
| 'reload'
45+
| 'formresubmit'
46+
| 'other';
47+
}
48+
49+
interface WebViewErrorState {
50+
description: string;
51+
domain: string;
52+
code: string;
53+
}
54+
55+
interface WebViewSource {
56+
html: string;
57+
baseUrl?: string; // Native only
58+
}
59+
```
60+
61+
## Props
62+
``` javascript
63+
// Allow javascript code to call storage methods?
64+
domStorageEnabled: boolean = true; // Native only
65+
66+
// JavaScript code that is injected into the control and executed
67+
injectedJavaScript: string = undefined; // Native only
68+
69+
// Is JavaScript executed within the control?
70+
javaScriptEnabled: boolean = true;
71+
72+
// Determines whether HTML5 audio and video requires the user to tap them before they start playing.
73+
mediaPlaybackRequiresUserAction: boolean = true; // Native only
74+
75+
// Determines whether HTML5 videos play inline or use the native full-screen controller.
76+
allowsInlineMediaPlayback: boolean = false; // iOS only
77+
78+
// HTTP headers to include when fetching the URL.
79+
headers: { [headerName: string]: string } = undefined;
80+
81+
// Called when an error occurs that prevents the contents from loading
82+
onError: (e: SyntheticEvent) => void = undefined; // Native only
83+
84+
// Called when the contents successfully load
85+
onLoad: (e: SyntheticEvent) => void = undefined;
86+
87+
// Called when the contents start to load
88+
onLoadStart: (e: SyntheticEvent) => void = undefined; // Native only
89+
90+
// Called when a message is posted from within a WebView
91+
onMessage: (e: WebViewMessageEvent) => void = undefined;
92+
93+
// Called when the navigation state changes
94+
onNavigationStateChange: (navigationState: WebViewNavigationState) => void;
95+
96+
// Flags that restrict behaviors within the control
97+
sandbox: WebViewSandboxMode = None;
98+
99+
// Zooms the page contents to fit the available space; deprecated on
100+
// iOS in RN 0.57
101+
scalesPageToFit: boolean = false; // Native only
102+
103+
// HTML to display in webview (if url is not specified)
104+
source: WebViewSource = undefined;
105+
106+
// Start loading immediately or wait for reload?
107+
startInLoadingState: boolean = true; // Native only
108+
109+
// See below for supported styles
110+
style: WebViewStyleRuleSet | WebViewStyleRuleSet[] = [];
111+
112+
// ID that can be used to identify the instantiated element for testing purposes.
113+
testId: string = undefined;
114+
115+
// URL to HTML content
116+
url: string = undefined;
117+
```
118+
119+
## Styles
120+
No specialized styles
121+
122+
## Methods
123+
``` javascript
124+
// Navigate back and forward
125+
goBack();
126+
goForward();
127+
128+
// Posts a message to the web control, allowing for communication between
129+
// the app and the JavaScript code running within the web control. On native
130+
// platforms, the targetOrigin is ignored.
131+
postMessage(message: string, targetOrigin?: string = '*'): void;
132+
133+
// Force the page to reload
134+
reload();
135+
```
136+

‎extensions/webview/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
package-lock.json
9+
10+
# Optional npm cache directory
11+
.npm
12+
13+
# Build artifacts
14+
**/dist
15+
16+
# Miscellaneous user files
17+
*.user
18+
.vscode
19+
.DS_STORE
20+

‎extensions/webview/.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/src/.vs
3+
/src/bin
4+
/src/obj
5+
*.user

‎extensions/webview/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# reactxp-webview
2+
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.
3+
4+
## Getting Started
5+
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.
6+
This can be done by following the linking instructions in the React Native documentation or by running
7+
```react-native link react-native-webview```
8+
9+
## Documentation
10+
For detailed documentation, look [here](https://microsoft.github.io/reactxp/docs/extensions/webview.html).
11+
12+
### Prerequisites
13+
* [ReactXP](https://github.com/microsoft/reactxp/)
14+
15+
## Contributing
16+
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.
17+
18+
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.
19+
20+
## License
21+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

‎extensions/webview/index.android.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
module.exports = require('./dist/android/PluginBase.js');

‎extensions/webview/index.ios.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
module.exports = require('./dist/ios/PluginBase.js');

‎extensions/webview/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
'use strict';
2+
3+
// Export web by default. Other platforms have custom index.[platform].js files
4+
module.exports = require('./dist/web/PluginBase.js');

‎extensions/webview/index.macos.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
module.exports = require('./dist/macos/PluginBase.js');

0 commit comments

Comments
 (0)