Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Packages: Change how required built-ins are polyfilled with Babel 7 #9171

Merged
merged 10 commits into from
Sep 5, 2018
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ When creating a new package you need to provide at least the following:
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56"
"@babel/runtime": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
50 changes: 38 additions & 12 deletions bin/packages/get-babel-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,55 @@ if ( ! process.env.SKIP_JSX_PRAGMA_TRANSFORM ) {
} ] );
}

const overrideOptions = ( target, targetName, options ) => {
if ( get( target, [ 'file', 'request' ] ) === targetName ) {
return [ targetName, Object.assign(
{},
target.options,
options
) ];
}
return target;
};

const babelConfigs = {
main: Object.assign(
{},
babelDefaultConfig,
{
plugins,
presets: map( babelDefaultConfig.presets, ( preset ) => {
if ( get( preset, [ 'file', 'request' ] ) === '@babel/preset-env' ) {
return [ '@babel/preset-env', Object.assign(
{},
preset.options,
{ modules: 'commonjs' }
) ];
}
return preset;
} ),
plugins: map(
plugins,
( plugin ) => overrideOptions( plugin, '@babel/plugin-transform-runtime', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not certain we need this plugin anymore because we're using useBuiltIns: true. Any idea @aduth In my understanding the runtime is a subset of the polyfills (added by preset-env).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just read the docs https://babeljs.io/docs/en/next/babel-polyfill and https://babeljs.io/docs/en/next/babel-plugin-transform-runtime and I think it confirms my thoughts that we should just get rid of the runtime.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be using useBuiltIns: false, not true and using the transform runtime. We should not be shipping polyfills that modify global prototypes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@blowery We are using useBuiltIns: false in the packages (npm) but I was referring to useBuiltIns: true used for Gutenberg.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This raises the question of whether we should keep the runtime transform for the packages. I personally don't see any difference between those polyfills and the remaining ones not included in the runtime (aside from the way they are included), which means I think we should remove all the polyfills and not only the ones added by babel-preset-env

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not quite sure. I followed the configuration from Calypso which was reviewed by @hzoo 😄

It has both @babel/preset-env with useBuiltIns: "entry" (https://github.com/Automattic/wp-calypso/blob/master/babel.config.js#L22) and @babel/plugin-transform-runtime with corejs: false (https://github.com/Automattic/wp-calypso/blob/master/babel.config.js#L51).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still not sure what's the point of @babel/plugin-transform-runtime if you do corejs: false. I guess there are some helpers but aren't these also polyfills?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, there are Babel helpers that are not polyfills. When transpiling classes, for example, Babel uses helper functions with names like _classCallCheck, _possibleConstructorReturn or _inherits. The runtime transform plugin prevents them from being duplicated all the time and imports them from @babel/runtime/helpers instead.

Another thing that is not a CoreJS polyfill is the regenerator runtime used when transpiling generators and async/await.

The CoreJS and regenerator are "polyfills" in a sense that they might be provided by the platform already. Babel helpers never are though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation @jsnajdr it makes sense 👍

corejs: false,
} )
),
presets: map(
babelDefaultConfig.presets,
( preset ) => overrideOptions( preset, '@babel/preset-env', {
modules: 'commonjs',
useBuiltIns: false,
} )
),
}
),
module: Object.assign(
{},
babelDefaultConfig,
{
plugins,
plugins: map(
plugins,
( plugin ) => overrideOptions( plugin, '@babel/plugin-transform-runtime', {
corejs: false,
useESModules: true,
} )
),
presets: map(
babelDefaultConfig.presets,
( preset ) => overrideOptions( preset, '@babel/preset-env', {
modules: false,
useBuiltIns: false,
} )
),
}
),
};
Expand Down
1,337 changes: 485 additions & 852 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
"rememo": "3.0.0"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.56",
"@babel/core": "7.0.0",
"@babel/runtime-corejs2": "7.0.0",
"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
Expand All @@ -72,7 +73,7 @@
"@wordpress/scripts": "file:packages/scripts",
"autoprefixer": "8.2.0",
"babel-eslint": "8.0.3",
"babel-loader": "8.0.0-beta.4",
"babel-loader": "8.0.0",
"chalk": "2.4.1",
"check-node-version": "3.1.1",
"codecov": "3.0.2",
Expand Down
6 changes: 6 additions & 0 deletions packages/a11y/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

## 1.1.0 (2018-07-12)

### New feature
Expand Down
2 changes: 2 additions & 0 deletions packages/a11y/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/a11y --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## speak

Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions. This module is inspired by the `speak` function in wp-a11y.js
Expand Down
2 changes: 1 addition & 1 deletion packages/a11y/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/dom-ready": "file:../dom-ready"
},
"publishConfig": {
Expand Down
5 changes: 5 additions & 0 deletions packages/api-fetch/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
2 changes: 2 additions & 0 deletions packages/api-fetch/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/api-fetch --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Usage

```js
Expand Down
2 changes: 1 addition & 1 deletion packages/api-fetch/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/hooks": "file:../hooks",
"@wordpress/i18n": "file:../i18n"
},
Expand Down
6 changes: 6 additions & 0 deletions packages/autop/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

## 1.1.0 (2018-07-12)

### New Feature
Expand Down
2 changes: 2 additions & 0 deletions packages/autop/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/autop --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

### Usage

Import the desired function(s) from `@wordpress/autop`:
Expand Down
2 changes: 1 addition & 1 deletion packages/autop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56"
"@babel/runtime": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
5 changes: 5 additions & 0 deletions packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 1.1.0 (Unreleased)

### New Feature

- Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).
8 changes: 4 additions & 4 deletions packages/babel-plugin-import-jsx-pragma/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56"
"@babel/runtime": "^7.0.0"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.56",
"@babel/plugin-syntax-jsx": "7.0.0-beta.56"
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.0.0"
},
"peerDependencies": {
"@babel/core": "7.0.0-beta.56"
"@babel/core": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
6 changes: 6 additions & 0 deletions packages/babel-plugin-makepot/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 2.1.0 (Unreleased)

### New Feature

- Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).

## 2.0.0 (2018-07-12)

### Breaking Change
Expand Down
8 changes: 4 additions & 4 deletions packages/babel-plugin-makepot/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"gettext-parser": "^1.3.1",
"lodash": "^4.17.10"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.56",
"@babel/traverse": "7.0.0-beta.56"
"@babel/core": "^7.0.0",
"@babel/traverse": "^7.0.0"
},
"peerDependencies": {
"@babel/core": "7.0.0-beta.56"
"@babel/core": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
6 changes: 6 additions & 0 deletions packages/babel-preset-default/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## 2.1.0 (Unreleased)

### New Feature

- Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).

## 2.0.0 (2018-07-12)

### Breaking Change
Expand Down
14 changes: 7 additions & 7 deletions packages/babel-preset-default/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@
},
"main": "index.js",
"dependencies": {
"@babel/plugin-proposal-async-generator-functions": "7.0.0-beta.56",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.56",
"@babel/plugin-transform-react-jsx": "7.0.0-beta.56",
"@babel/plugin-transform-runtime": "7.0.0-beta.56",
"@babel/preset-env": "7.0.0-beta.56",
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/plugin-proposal-async-generator-functions": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@wordpress/browserslist-config": "file:../browserslist-config",
"babel-core": "^7.0.0-bridge.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-beta.50"
"@babel/core": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
5 changes: 5 additions & 0 deletions packages/blob/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
2 changes: 1 addition & 1 deletion packages/blob/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"main": "build/index.js",
"module": "build-module/index.js",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56"
"@babel/runtime": "^7.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
2 changes: 2 additions & 0 deletions packages/block-library/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/block-library --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Usage

```js
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/autop": "file:../autop",
"@wordpress/blob": "file:../blob",
"@wordpress/blocks": "file:../blocks",
Expand Down
3 changes: 2 additions & 1 deletion packages/blocks/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
## v3.0.0 (Unreleased)
## 3.0.0 (Unreleased)

### Breaking Change

- The `isSharedBlock` function is removed. Use `isReusableBlock` instead.
- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

### Deprecations

Expand Down
10 changes: 10 additions & 0 deletions packages/blocks/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,16 @@ blog.
The following documentation outlines steps you as a developer will need to
follow to add your own custom blocks to WordPress's editor interfaces.

## Installation

Install the module

```bash
npm install @wordpress/bocks --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Getting Started

If you're not already accustomed to working with JavaScript in your WordPress
Expand Down
2 changes: 1 addition & 1 deletion packages/blocks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/autop": "file:../autop",
"@wordpress/blob": "file:../blob",
"@wordpress/block-serialization-spec-parser": "file:../block-serialization-spec-parser",
Expand Down
3 changes: 2 additions & 1 deletion packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
## v3.0.0 (Unreleased)
## 3.0.0 (Unreleased)

### Breaking Change

- `withAPIData` has been removed. Please use the Core Data module or `@wordpress/api-fetch` directly instead.
- `wp.components.Draggable` as a DOM node drag handler has been deprecated. Please, use `wp.components.Draggable` as a wrap component for your DOM node drag handler.
- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

### New Feature

Expand Down
2 changes: 2 additions & 0 deletions packages/components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/components --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Usage

Within Gutenberg, these components can be accessed by importing from the `components` root directory:
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/compose": "file:../compose",
Expand Down
5 changes: 5 additions & 0 deletions packages/compose/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## 2.0.0 (Unreleased)

### Breaking Change

- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
2 changes: 2 additions & 0 deletions packages/compose/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Install the module
npm install @wordpress/compose --save
```

_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._

## Usage

```js
Expand Down
2 changes: 1 addition & 1 deletion packages/compose/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@babel/runtime-corejs2": "7.0.0-beta.56",
"@babel/runtime": "^7.0.0",
"@wordpress/element": "file:../element",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"lodash": "^4.17.10"
Expand Down
Loading