react-app-polyfill 0.2.2 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +46 -13
- package/ie11.js +2 -2
- package/ie9.js +3 -25
- package/package.json +10 -4
- package/stable.js +13 -0
package/README.md
CHANGED
@@ -3,18 +3,6 @@
|
|
3
3
|
This package includes polyfills for various browsers.
|
4
4
|
It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects.
|
5
5
|
|
6
|
-
### Features
|
7
|
-
|
8
|
-
Each polyfill ensures the following language features are present:
|
9
|
-
|
10
|
-
1. `Promise` (for `async` / `await` support)
|
11
|
-
1. `window.fetch` (a Promise-based way to make web requests in the browser)
|
12
|
-
1. `Object.assign` (a helper required for Object Spread, i.e. `{ ...a, ...b }`)
|
13
|
-
1. `Symbol` (a built-in object used by `for...of` syntax and friends)
|
14
|
-
1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`)
|
15
|
-
|
16
|
-
*If you need more features, you must include them manually.*
|
17
|
-
|
18
6
|
### Usage
|
19
7
|
|
20
8
|
First, install the package using Yarn or npm:
|
@@ -29,7 +17,19 @@ or
|
|
29
17
|
yarn add react-app-polyfill
|
30
18
|
```
|
31
19
|
|
32
|
-
|
20
|
+
## Supporting Internet Explorer
|
21
|
+
|
22
|
+
You can import the entry point for the minimal version you intend to support to ensure that the minimum language features are present that are required to use Create React App. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.
|
23
|
+
|
24
|
+
These modules ensure the following language features are present:
|
25
|
+
|
26
|
+
1. `Promise` (for `async` / `await` support)
|
27
|
+
1. `window.fetch` (a Promise-based way to make web requests in the browser)
|
28
|
+
1. `Object.assign` (a helper required for Object Spread, i.e. `{ ...a, ...b }`)
|
29
|
+
1. `Symbol` (a built-in object used by `for...of` syntax and friends)
|
30
|
+
1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`)
|
31
|
+
|
32
|
+
_If you need more features, see the [Polyfilling other language features](#polyfilling-other-language-features) section below._
|
33
33
|
|
34
34
|
#### Internet Explorer 9
|
35
35
|
|
@@ -48,3 +48,36 @@ import 'react-app-polyfill/ie11';
|
|
48
48
|
|
49
49
|
// ...
|
50
50
|
```
|
51
|
+
|
52
|
+
## Polyfilling other language features
|
53
|
+
|
54
|
+
You can also polyfill stable language features not available in your target browsers. If you're using this in Create React App, it will automatically use the `browserslist` you've defined to only include polyfills needed by your target browsers when importing the `stable` polyfill. **Make sure to follow the Internet Explorer steps above if you need to support Internet Explorer in your application**.
|
55
|
+
|
56
|
+
```js
|
57
|
+
// This must be the first line in src/index.js
|
58
|
+
import 'react-app-polyfill/stable';
|
59
|
+
|
60
|
+
// ...
|
61
|
+
```
|
62
|
+
|
63
|
+
If you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the `ie9` or `ie11` and `stable` modules:
|
64
|
+
|
65
|
+
For IE9:
|
66
|
+
|
67
|
+
```js
|
68
|
+
// These must be the first lines in src/index.js
|
69
|
+
import 'react-app-polyfill/ie9';
|
70
|
+
import 'react-app-polyfill/stable';
|
71
|
+
|
72
|
+
// ...
|
73
|
+
```
|
74
|
+
|
75
|
+
For IE11:
|
76
|
+
|
77
|
+
```js
|
78
|
+
// These must be the first lines in src/index.js
|
79
|
+
import 'react-app-polyfill/ie11';
|
80
|
+
import 'react-app-polyfill/stable';
|
81
|
+
|
82
|
+
// ...
|
83
|
+
```
|
package/ie11.js
CHANGED
@@ -26,6 +26,6 @@ if (typeof window !== 'undefined') {
|
|
26
26
|
Object.assign = require('object-assign');
|
27
27
|
|
28
28
|
// Support for...of (a commonly used syntax feature that requires Symbols)
|
29
|
-
require('core-js/
|
29
|
+
require('core-js/features/symbol');
|
30
30
|
// Support iterable spread (...Set, ...Map)
|
31
|
-
require('core-js/
|
31
|
+
require('core-js/features/array/from');
|
package/ie9.js
CHANGED
@@ -6,31 +6,9 @@
|
|
6
6
|
*/
|
7
7
|
'use strict';
|
8
8
|
|
9
|
-
|
10
|
-
// Rejection tracking prevents a common issue where React gets into an
|
11
|
-
// inconsistent state due to an error, but it gets swallowed by a Promise,
|
12
|
-
// and the user has no idea what causes React's erratic future behavior.
|
13
|
-
require('promise/lib/rejection-tracking').enable();
|
14
|
-
window.Promise = require('promise/lib/es6-extensions.js');
|
15
|
-
}
|
16
|
-
|
17
|
-
// Make sure we're in a Browser-like environment before importing polyfills
|
18
|
-
// This prevents `fetch()` from being imported in a Node test environment
|
19
|
-
if (typeof window !== 'undefined') {
|
20
|
-
// fetch() polyfill for making API calls.
|
21
|
-
require('whatwg-fetch');
|
22
|
-
}
|
23
|
-
|
24
|
-
// Object.assign() is commonly used with React.
|
25
|
-
// It will use the native implementation if it's present and isn't buggy.
|
26
|
-
Object.assign = require('object-assign');
|
27
|
-
|
28
|
-
// Support for...of (a commonly used syntax feature that requires Symbols)
|
29
|
-
require('core-js/es6/symbol');
|
30
|
-
// Support iterable spread (...Set, ...Map)
|
31
|
-
require('core-js/fn/array/from');
|
9
|
+
require('./ie11');
|
32
10
|
|
33
11
|
// React 16+ relies on Map, Set, and requestAnimationFrame
|
34
|
-
require('core-js/
|
35
|
-
require('core-js/
|
12
|
+
require('core-js/features/map');
|
13
|
+
require('core-js/features/set');
|
36
14
|
require('raf').polyfill(window);
|
package/package.json
CHANGED
@@ -1,8 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-app-polyfill",
|
3
|
-
"version": "0.
|
3
|
+
"version": "1.0.1",
|
4
4
|
"description": "Polyfills for various browsers including commonly used language features",
|
5
|
-
"repository":
|
5
|
+
"repository": {
|
6
|
+
"type": "git",
|
7
|
+
"url": "https://github.com/facebook/create-react-app.git",
|
8
|
+
"directory": "packages/react-app-polyfill"
|
9
|
+
},
|
6
10
|
"license": "MIT",
|
7
11
|
"bugs": {
|
8
12
|
"url": "https://github.com/facebook/create-react-app/issues"
|
@@ -13,13 +17,15 @@
|
|
13
17
|
"files": [
|
14
18
|
"ie9.js",
|
15
19
|
"ie11.js",
|
16
|
-
"jsdom.js"
|
20
|
+
"jsdom.js",
|
21
|
+
"stable.js"
|
17
22
|
],
|
18
23
|
"dependencies": {
|
19
|
-
"core-js": "
|
24
|
+
"core-js": "3.0.1",
|
20
25
|
"object-assign": "4.1.1",
|
21
26
|
"promise": "8.0.2",
|
22
27
|
"raf": "3.4.1",
|
28
|
+
"regenerator-runtime": "0.13.2",
|
23
29
|
"whatwg-fetch": "3.0.0"
|
24
30
|
}
|
25
31
|
}
|
package/stable.js
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright (c) 2015-present, Facebook, Inc.
|
3
|
+
*
|
4
|
+
* This source code is licensed under the MIT license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
'use strict';
|
8
|
+
|
9
|
+
// Polyfill stable language features.
|
10
|
+
// It's recommended to use @babel/preset-env and browserslist
|
11
|
+
// to only include the polyfills necessary for the target browsers.
|
12
|
+
require('core-js/stable');
|
13
|
+
require('regenerator-runtime/runtime');
|