From 805082bd5c10682c12a3271fbc1134453c16229b Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sat, 6 Apr 2019 17:05:02 -0700 Subject: [PATCH 1/4] Update to core-js@3 --- packages/babel-preset-react-app/create.js | 2 +- packages/react-app-polyfill/README.md | 59 ++++++++++++++++++----- packages/react-app-polyfill/ie11.js | 4 +- packages/react-app-polyfill/ie9.js | 28 ++--------- packages/react-app-polyfill/package.json | 6 ++- packages/react-app-polyfill/stable.js | 13 +++++ 6 files changed, 69 insertions(+), 43 deletions(-) create mode 100644 packages/react-app-polyfill/stable.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index b645a22ede2..931892e6a9a 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -83,7 +83,7 @@ module.exports = function(api, opts, env) { useBuiltIns: 'entry', // Set the corejs version we are using to avoid warnings in console // This will need to change once we upgrade to corejs@3 - corejs: 2, + corejs: 3, // Do not transform modules to CJS modules: false, // Exclude transforms that make all code slower diff --git a/packages/react-app-polyfill/README.md b/packages/react-app-polyfill/README.md index 75b066e3c37..cda82510469 100644 --- a/packages/react-app-polyfill/README.md +++ b/packages/react-app-polyfill/README.md @@ -3,18 +3,6 @@ This package includes polyfills for various browsers. It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects. -### Features - -Each polyfill ensures the following language features are present: - -1. `Promise` (for `async` / `await` support) -1. `window.fetch` (a Promise-based way to make web requests in the browser) -1. `Object.assign` (a helper required for Object Spread, i.e. `{ ...a, ...b }`) -1. `Symbol` (a built-in object used by `for...of` syntax and friends) -1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`) - -_If you need more features, you must include them manually._ - ### Usage First, install the package using Yarn or npm: @@ -29,7 +17,19 @@ or yarn add react-app-polyfill ``` -Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support. +## Supporting Internet Explorer + +You can import the entry point for the minimal version you intend to support to ensure that the minimum langauge 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. + +These modules ensures the following language features are present: + +1. `Promise` (for `async` / `await` support) +1. `window.fetch` (a Promise-based way to make web requests in the browser) +1. `Object.assign` (a helper required for Object Spread, i.e. `{ ...a, ...b }`) +1. `Symbol` (a built-in object used by `for...of` syntax and friends) +1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`) + +_If you need more features, see the [Polyfilling other language features](#polyfilling-other-language-features) section below._ #### Internet Explorer 9 @@ -48,3 +48,36 @@ import 'react-app-polyfill/ie11'; // ... ``` + +## Polyfilling other language features + +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**. + +```js +// This must be the first line in src/index.js +import 'react-app-polyfill/stable'; + +// ... +``` + +If you are supporting Internet Explorer 9/11 you should include both the `ie9`/`ie11` and `stable` modules: + +For IE9: + +```js +// These must be the first lines in src/index.js +import 'react-app-polyfill/ie9'; +import 'react-app-polyfill/stable'; + +// ... +``` + +For IE11: + +```js +// These must be the first lines in src/index.js +import 'react-app-polyfill/ie11'; +import 'react-app-polyfill/stable'; + +// ... +``` diff --git a/packages/react-app-polyfill/ie11.js b/packages/react-app-polyfill/ie11.js index e7e3d6b71a0..4a5bcd6bf38 100644 --- a/packages/react-app-polyfill/ie11.js +++ b/packages/react-app-polyfill/ie11.js @@ -26,6 +26,6 @@ if (typeof window !== 'undefined') { Object.assign = require('object-assign'); // Support for...of (a commonly used syntax feature that requires Symbols) -require('core-js/es6/symbol'); +require('core-js/features/symbol'); // Support iterable spread (...Set, ...Map) -require('core-js/fn/array/from'); +require('core-js/features/array/from'); diff --git a/packages/react-app-polyfill/ie9.js b/packages/react-app-polyfill/ie9.js index 9f355f28f21..42e31fdb1fb 100644 --- a/packages/react-app-polyfill/ie9.js +++ b/packages/react-app-polyfill/ie9.js @@ -6,31 +6,9 @@ */ 'use strict'; -if (typeof Promise === 'undefined') { - // Rejection tracking prevents a common issue where React gets into an - // inconsistent state due to an error, but it gets swallowed by a Promise, - // and the user has no idea what causes React's erratic future behavior. - require('promise/lib/rejection-tracking').enable(); - window.Promise = require('promise/lib/es6-extensions.js'); -} - -// Make sure we're in a Browser-like environment before importing polyfills -// This prevents `fetch()` from being imported in a Node test environment -if (typeof window !== 'undefined') { - // fetch() polyfill for making API calls. - require('whatwg-fetch'); -} - -// Object.assign() is commonly used with React. -// It will use the native implementation if it's present and isn't buggy. -Object.assign = require('object-assign'); - -// Support for...of (a commonly used syntax feature that requires Symbols) -require('core-js/es6/symbol'); -// Support iterable spread (...Set, ...Map) -require('core-js/fn/array/from'); +require('./ie11'); // React 16+ relies on Map, Set, and requestAnimationFrame -require('core-js/es6/map'); -require('core-js/es6/set'); +require('core-js/features/map'); +require('core-js/features/set'); require('raf').polyfill(window); diff --git a/packages/react-app-polyfill/package.json b/packages/react-app-polyfill/package.json index b9b55d3a1e0..ad5e231575f 100644 --- a/packages/react-app-polyfill/package.json +++ b/packages/react-app-polyfill/package.json @@ -13,13 +13,15 @@ "files": [ "ie9.js", "ie11.js", - "jsdom.js" + "jsdom.js", + "stable.js" ], "dependencies": { - "core-js": "2.6.5", + "core-js": "3.0.1", "object-assign": "4.1.1", "promise": "8.0.2", "raf": "3.4.1", + "regenerator-runtime": "0.13.2", "whatwg-fetch": "3.0.0" } } diff --git a/packages/react-app-polyfill/stable.js b/packages/react-app-polyfill/stable.js new file mode 100644 index 00000000000..6108630c7c0 --- /dev/null +++ b/packages/react-app-polyfill/stable.js @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +// Polyfill stable language features. +// It's recommended to use @babel/preset-env and browserslist +// to only include the polyfills necessary for the target browsers. +require('core-js/stable'); +require('regenerator-runtime/runtime'); From 0096e486f17862fcf96bc9e3d80fd1a599d1fbac Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sun, 7 Apr 2019 14:27:07 -0700 Subject: [PATCH 2/4] Remove references to @babel/polyfill --- docusaurus/docs/supported-browsers-features.md | 6 +----- packages/babel-preset-react-app/create.js | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index d2add48197a..2826b123afa 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -6,7 +6,7 @@ sidebar_label: Supported Browsers and Features ## Supported Browsers -By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a minimum set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). To polyfill other language features, see the [Adding Polyfills](#adding-polyfills) section below +By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). ## Supported Language Features @@ -27,10 +27,6 @@ Note that **this project includes no [polyfills](https://github.com/facebook/cre If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them. -## Adding Polyfills - -You can install [`@babel/polyfill`](https://babeljs.io/docs/en/babel-polyfill) as a dependency in your application, and import it at the very top of your app's entry point (`src/index.js` or `src/index.tsx`) to emulate a full ES2015+ environment. Your `browerslist` configuration will be used to only include the polyfills necessary by your target browsers. - ## Configuring Supported Browsers By default, the generated project includes a [`browerslist`](https://github.com/browserslist/browserslist) configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production. diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 931892e6a9a..7b7f1da6ed1 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -79,7 +79,7 @@ module.exports = function(api, opts, env) { // Latest stable ECMAScript features require('@babel/preset-env').default, { - // Allow importing @babel/polyfill in entrypoint and use browserlist to select polyfills + // Allow importing core-js in entrypoint and use browserlist to select polyfills useBuiltIns: 'entry', // Set the corejs version we are using to avoid warnings in console // This will need to change once we upgrade to corejs@3 From f6150f1e7509b60c6f813143a0c179a042882a5c Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sun, 7 Apr 2019 14:28:45 -0700 Subject: [PATCH 3/4] Improve language in react-app-polyfill README.md --- packages/react-app-polyfill/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-app-polyfill/README.md b/packages/react-app-polyfill/README.md index cda82510469..b1adf2e0c29 100644 --- a/packages/react-app-polyfill/README.md +++ b/packages/react-app-polyfill/README.md @@ -21,7 +21,7 @@ yarn add react-app-polyfill You can import the entry point for the minimal version you intend to support to ensure that the minimum langauge 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. -These modules ensures the following language features are present: +These modules ensure the following language features are present: 1. `Promise` (for `async` / `await` support) 1. `window.fetch` (a Promise-based way to make web requests in the browser) From aba1afaeb3af05140dfb5153e398d727f0f33cf3 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Sun, 7 Apr 2019 14:42:05 -0700 Subject: [PATCH 4/4] Update packages/react-app-polyfill/README.md Co-Authored-By: ianschmitz --- packages/react-app-polyfill/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-app-polyfill/README.md b/packages/react-app-polyfill/README.md index b1adf2e0c29..d5f68229617 100644 --- a/packages/react-app-polyfill/README.md +++ b/packages/react-app-polyfill/README.md @@ -60,7 +60,7 @@ import 'react-app-polyfill/stable'; // ... ``` -If you are supporting Internet Explorer 9/11 you should include both the `ie9`/`ie11` and `stable` modules: +If you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the `ie9` or `ie11` and `stable` modules: For IE9: