Update packages to work with Babel 7 by gziolo · Pull Request #136 · WordPress/packages

gziolo · 2018-06-06T20:50:29Z

This PR follows the migration docs for Babel 7 migration: https://new.babeljs.io/docs/en/next/v7-migration.html.

It is highly influenced by Calypso migration done a few weeks back on a much larger codebase with the help from Babel maintainers: Automattic/wp-calypso#23424.

The most useful hint:

Updated babel-core to the bridge which is necessary for anything having babel as a peer dependency -- aka jest.

It is still not working. Some tests are failing. @aduth or @youknowriad , do you have any quick guess what is causing those failures when running npm run test packages/babel-plugin-makepot/

I have some issues with babel-jest which is no longer working as I would expect. I had to apply "^.+\\.jsx?$": "<rootDir>/packages/scripts/config/babel-transform.js" in the main package.json to make it work. Ideally, it shouldn't be possible at all when overriding Jest config.

gziolo · 2018-06-06T20:52:22Z

package.json

 		],
-		"preset": "@wordpress/jest-preset-default"
+		"preset": "@wordpress/jest-preset-default",
+		"transform": {


We need to find a better way to apply this transform behind the scenes because we will have to apply a similar fix for Gutenberg otherwise.

What's this transform about?

I left a comment in the description:

I have some issues with babel-jest which is no longer working as I would expect. I had to apply "^.+\\.jsx?$": "<rootDir>/packages/scripts/config/babel-transform.js" in the main package.json to make it work. Ideally, it shouldn't be possible at all when overriding Jest config.

The thing is Jest is still on Babel 6 and we try to make it work with Babel 7, but something is broken and I don't see Babel transforms applied properly.

gziolo · 2018-06-06T20:53:11Z

packages/babel-preset-default/package.json

+		"@babel/plugin-transform-react-jsx": "^7.0.0-beta.49",
+		"@babel/plugin-transform-runtime": "^7.0.0-beta.49",
+		"@babel/preset-env": "^7.0.0-beta.49",
+		"@babel/runtime": "^7.0.0-beta.49",


I'm wondering if we shouldn't add @babel/runtime to all package.json file that belong to packages which have it referenced in transpiled code after Babel does its magic.

I'm wondering if we can't just remove the runtime since we're using the polyfills of babel-env

Hmmm, @babel/runtime and core-js are used for requiring code in the transpiled code when using env preset. The latter is the dependency of the previous one.

gziolo · 2018-06-06T20:54:41Z

packages/jest-preset-default/scripts/pegjs-transform.js

@@ -1,16 +0,0 @@
-const pegjs = require( 'pegjs' );


We don't need it outside of Gutenberg.

Could this have a breaking effect that needs to be documented if someone is using @wordpress/jest-preset-default ?

We should include it in the changelog. We can also bump version to 2.0.0 to follow the semantic versioning. I don't think that other code that blocks module in Gutenberg would ever need to use it.

@nerrad, can you confirm it can be removed or should we keep it as long as tests using blocks depend on it?

I think this babel7 change needs a bump to 2.0.0 anyway. I'm wondering if we should update the pragma at the same time to avoid the need for a 3.0.0 later

Hmm, we can flip the pragma handling in Gutenberg, good idea 👍

I still don't totally grok what pegjs is used for (Does it provide the grammar rules for the custom html comments for blocks?). Assuming that's what its for, and it only is required by GB blocks - plugins writing tests can probably just mock any GB blocks in their tests.

gziolo · 2018-06-06T20:55:10Z

packages/jest-preset-default/scripts/setup-globals.js

 	removeListener: () => {},
 } );

-global.window._wpDateSettings = {


@wordpress/date provides its own defaults after @youknowriad did refactoring.

gziolo · 2018-06-06T20:55:48Z

packages/scripts/package.json

 		"@wordpress/babel-preset-default": "^1.3.0",
 		"@wordpress/jest-preset-default": "^1.0.6",
 		"@wordpress/npm-package-json-lint-config": "^1.0.0",
+		"babel-jest": "^23.0.1",


This can be removed, it's already handled in the preset.

gziolo · 2018-06-06T20:56:12Z

scripts/build.js

 * Babel Configuration
 */
-const babelDefaultConfig = require( '../packages/babel-preset-default' );
+const babelDefaultConfig = require( '../packages/babel-preset-default' )();


Babel expects functions in presets in 7.x line.

Now I see:

const isTestEnv = api.env() === 'test';
TypeError: Cannot read property 'env' of undefined

because we need to pass api object to this preset ...

youknowriad · 2018-06-07T08:21:23Z

package.json

 	},
-	"babel": {
-		"presets": "@wordpress/default"
-	},


Why are we removing this, is it useless?

Jest can read Babel from its config, and the script which generates the distribution folders for packages uses the same preset internally. So it isn't necessary anymore - it uses defaults :)

I had to add babel.config.js instead to make everything work 😄

youknowriad · 2018-06-07T08:23:36Z

package.json

 		],
-		"preset": "@wordpress/jest-preset-default"
+		"preset": "@wordpress/jest-preset-default",
+		"transform": {


What's this transform about?

youknowriad · 2018-06-07T08:25:27Z

packages/babel-preset-default/index.js

+				targets: {
+					browsers: [ 'extends @wordpress/browserslist-config' ],
+				},
+				useBuiltIns: 'usage',


If we can make this work, this would be a big improvement ❤️

youknowriad · 2018-06-07T08:27:00Z

packages/babel-preset-default/package.json

+		"@babel/plugin-transform-react-jsx": "^7.0.0-beta.49",
+		"@babel/plugin-transform-runtime": "^7.0.0-beta.49",
+		"@babel/preset-env": "^7.0.0-beta.49",
+		"@babel/runtime": "^7.0.0-beta.49",


I'm wondering if we can't just remove the runtime since we're using the polyfills of babel-env

youknowriad · 2018-06-07T08:28:23Z

packages/jest-preset-default/scripts/pegjs-transform.js

@@ -1,16 +0,0 @@
-const pegjs = require( 'pegjs' );


I think this babel7 change needs a bump to 2.0.0 anyway. I'm wondering if we should update the pragma at the same time to avoid the need for a 3.0.0 later

aduth · 2018-06-12T13:28:17Z

packages/babel-preset-default/index.js

+			} ],
+		].filter( Boolean ),
+		plugins: [
+			'@babel/plugin-proposal-object-rest-spread',


Not sure if the Babel core has been updated for it yet, but Rest/Spread was ratified as part of ES2018, so it might be possible to remove this.

https://github.com/tc39/proposals/blob/master/finished-proposals.md

gziolo · 2018-06-14T12:25:59Z

scripts/build.js

-				chalk.green( ' \u21D2 ' ) +
-				path.relative( PACKAGES_DIR, destPath ) +
-				'\n'
+			path.relative( PACKAGES_DIR, file ) +


codecov · 2018-06-14T15:01:44Z

Codecov Report

Merging #136 into master will decrease coverage by 0.88%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #136      +/-   ##
==========================================
- Coverage   67.04%   66.16%   -0.89%     
==========================================
  Files          58       58              
  Lines         698      727      +29     
  Branches      145      151       +6     
==========================================
+ Hits          468      481      +13     
- Misses        187      202      +15     
- Partials       43       44       +1

Impacted Files	Coverage Δ
...kages/jest-preset-default/scripts/setup-globals.js	`80% <ø> (-3.34%)`	⬇️
packages/scripts/config/jest.config.js	`0% <ø> (ø)`	⬆️
packages/scripts/config/babel-transform.js	`0% <ø> (ø)`	⬆️
packages/babel-preset-default/index.js	`100% <100%> (+100%)`	⬆️
.../custom-templated-path-webpack-plugin/src/index.js	`0% <0%> (ø)`	⬆️
packages/scripts/scripts/test-unit-jest.js	`0% <0%> (ø)`	⬆️
packages/i18n/tools/pot-to-php.js	`0% <0%> (ø)`	⬆️
packages/scripts/bin/wp-scripts.js	`0% <0%> (ø)`
packages/hooks/src/createRunHook.js	`96.87% <0%> (+1.87%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c24da3a...426a9dc. Read the comment docs.

ntwb · 2018-07-09T13:16:34Z

Closing this per @gziolo recommendation (work to begin shortly on this directly in the Gutenberg repo)

Update packages to work with Babel 7

a646d88

gziolo added Build Tooling [Status] In Progress [Package] Scripts [Package] Babel preset [Package] Jest preset labels Jun 6, 2018

gziolo self-assigned this Jun 6, 2018

gziolo requested review from aduth, ntwb and youknowriad June 6, 2018 20:50

gziolo commented Jun 6, 2018

View reviewed changes

youknowriad reviewed Jun 7, 2018

View reviewed changes

gziolo mentioned this pull request Jun 7, 2018

Packages: Publish all modules as independent npm packages WordPress/gutenberg#3955

Closed

19 tasks

aduth reviewed Jun 12, 2018

View reviewed changes

gziolo added 2 commits June 13, 2018 18:43

Scripts: Fix Babel transformation for test command

b3ca12b

Build tools: Fix the build script by using Babel loader

5c12ea8

gziolo commented Jun 14, 2018

View reviewed changes

gziolo added 2 commits June 14, 2018 16:57

Babel-plugin-makepot: Fix failing unit tests :)

22f6cf9

Scripts: Bring back removed whitespaces

426a9dc

gziolo mentioned this pull request Jun 22, 2018

Missing : npm install @wordpress/plugins --save WordPress/gutenberg#7460

Closed

nerrad mentioned this pull request Jul 6, 2018

Convert snapshots to use react-test-renderer/shallow (core-blocks/more/test/edit.js) WordPress/gutenberg#7756

Merged

4 tasks

ntwb closed this Jul 9, 2018

gziolo mentioned this pull request Jul 9, 2018

Framework: Update code to work with Babel 7 WordPress/gutenberg#7832

Merged

Conversation

gziolo commented Jun 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gziolo Jun 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gziolo Jun 7, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jun 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ntwb commented Jul 9, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

gziolo commented Jun 6, 2018 •

edited

Loading

gziolo Jun 6, 2018 •

edited

Loading

gziolo Jun 7, 2018 •

edited

Loading

codecov bot commented Jun 14, 2018 •

edited

Loading