Skip to content
This repository has been archived by the owner on Jul 9, 2018. It is now read-only.

Update packages to work with Babel 7 #136

Closed
wants to merge 5 commits into from
Closed

Update packages to work with Babel 7 #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a646d88
Update packages to work with Babel 7
gziolo Jun 6, 2018
b3ca12b
Scripts: Fix Babel transformation for test command
gziolo Jun 13, 2018
5c12ea8
Build tools: Fix the build script by using Babel loader
gziolo Jun 14, 2018
22f6cf9
Babel-plugin-makepot: Fix failing unit tests :)
gziolo Jun 14, 2018
426a9dc
Scripts: Bring back removed whitespaces
gziolo Jun 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function( api ) {
api.cache( true );

return {
presets: [ '@wordpress/babel-preset-default' ],
};
};
10 changes: 4 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"npm": ">=5.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"@babel/core": "^7.0.0-beta.49",
"benchmark": "^2.1.4",
"chalk": "^2.3.2",
"check-node-version": "^3.1.1",
Expand All @@ -19,9 +19,6 @@
"rimraf": "^2.6.1",
"symlink-or-copy": "^1.2.0"
},
"babel": {
"presets": "@wordpress/default"
},
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why are we removing this, is it useless?

Copy link
Member Author

Choose a reason for hiding this comment

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

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 :)

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 had to add babel.config.js instead to make everything work 😄

"jest": {
"collectCoverageFrom": [
"packages/*/**/*.js"
Expand Down Expand Up @@ -50,13 +47,14 @@
},
"scripts": {
"build-clean": "rimraf ./packages/*/build ./packages/*/build-module",
"prebuild": "npm-run-all check-engines build-clean",
"prebuild": "run-s check-engines build-clean",
"build": "node ./scripts/build.js",
"check-engines": "check-node-version --package",
"create-symlinks": "node ./scripts/create-symlinks.js",
"lerna-bootstrap": "lerna bootstrap --hoist",
"lint:pkg-json": "wp-scripts lint-pkg-json ./packages",
"postinstall": "npm-run-all lerna-bootstrap create-symlinks build",
"preinstall": "npx rimraf ./node_modules/@wordpress/*",
"postinstall": "run-s lerna-bootstrap create-symlinks build",
"pretest": "npm run lint:pkg-json",
"test": "wp-scripts test-unit-js",
"test:coverage": "npm run test -- --coverage",
Expand Down
6 changes: 3 additions & 3 deletions packages/babel-plugin-makepot/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
"module": "build-module/index.js",
"dependencies": {
"gettext-parser": "^1.3.1",
"lodash": "^4.17.5"
"lodash": "^4.17.10"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-traverse": "^6.26.0"
"@babel/core": "^7.0.0-beta.49",
"@babel/traverse": "^7.0.0-beta.49"
},
"publishConfig": {
"access": "public"
Expand Down
8 changes: 4 additions & 4 deletions packages/babel-plugin-makepot/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* External dependencies
*/
import { transform } from 'babel-core';
import traverse from 'babel-traverse';
import { transformSync } from '@babel/core';
import traverse from '@babel/traverse';

/**
* Internal dependencies
Expand Down Expand Up @@ -46,7 +46,7 @@ describe( 'babel-plugin', () => {
describe( '.getTranslatorComment()', () => {
function getCommentFromString( string ) {
let comment;
traverse( transform( string ).ast, {
traverse( transformSync( string, { ast: true } ).ast, {
CallExpression( path ) {
comment = getTranslatorComment( path );
},
Expand Down Expand Up @@ -95,7 +95,7 @@ describe( 'babel-plugin', () => {
describe( '.getNodeAsString()', () => {
function getNodeAsStringFromArgument( source ) {
let string;
traverse( transform( source ).ast, {
traverse( transformSync( source, { ast: true } ).ast, {
CallExpression( path ) {
string = getNodeAsString( path.node.arguments[ 0 ] );
},
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-preset-default/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ babel script.js --presets @wordpress/default
#### Via Node API

```js
require( 'babel-core' ).transform( 'code', {
require( '@babel/core' ).transform( 'code', {
presets: [ '@wordpress/default' ]
} );
```
Expand Down
44 changes: 24 additions & 20 deletions packages/babel-preset-default/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
const isTestEnv = env === 'test';
module.exports = function( api ) {
const isTestEnv = api.env() === 'test';

module.exports = {
presets: [
! isTestEnv && [ require( 'babel-preset-env' ), {
modules: false,
targets: {
browsers: [ 'extends @wordpress/browserslist-config' ],
},
} ],
isTestEnv && [ require( 'babel-preset-env' ) ],
].filter( Boolean ),
plugins: [
require( 'babel-plugin-transform-object-rest-spread' ),
[ require( 'babel-plugin-transform-react-jsx' ), {
pragma: 'wp.element.createElement',
} ],
require( 'babel-plugin-transform-async-generator-functions' ),
! isTestEnv && require( 'babel-plugin-transform-runtime' ),
].filter( Boolean ),
return {
presets: [
! isTestEnv && [ '@babel/preset-env', {
modules: false,
targets: {
browsers: [ 'extends @wordpress/browserslist-config' ],
},
useBuiltIns: 'usage',
Copy link
Collaborator

Choose a reason for hiding this comment

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

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

} ],
isTestEnv && [ '@babel/preset-env', {
useBuiltIns: 'usage',
} ],
].filter( Boolean ),
plugins: [
'@babel/plugin-proposal-object-rest-spread',
Copy link
Member

Choose a reason for hiding this comment

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

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

[ '@babel/plugin-transform-react-jsx', {
pragma: 'wp.element.createElement',
} ],
'@babel/plugin-proposal-async-generator-functions',
! isTestEnv && '@babel/plugin-transform-runtime',
].filter( Boolean ),
};
};
12 changes: 7 additions & 5 deletions packages/babel-preset-default/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,14 @@
"node": ">=8"
},
"dependencies": {
"@babel/plugin-proposal-async-generator-functions": "^7.0.0-beta.49",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.49",
"@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",
Copy link
Member Author

@gziolo gziolo Jun 6, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

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.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm wondering if we can't just remove the runtime since we're using the polyfills of babel-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.

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.

"@wordpress/browserslist-config": "^2.1.4",
"babel-plugin-transform-async-generator-functions": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1"
"babel-core": "7.0.0-bridge.0"
},
"publishConfig": {
"access": "public"
Expand Down
2 changes: 1 addition & 1 deletion packages/i18n/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"dependencies": {
"gettext-parser": "^1.3.1",
"jed": "^1.1.1",
"lodash": "^4.17.5",
"lodash": "^4.17.10",
"memize": "^1.0.5"
},
"publishConfig": {
Expand Down
2 changes: 1 addition & 1 deletion packages/jest-console/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"module": "build-module/index.js",
"dependencies": {
"jest-matcher-utils": "^22.4.0",
"lodash": "^4.17.4"
"lodash": "^4.17.10"
},
"peerDependencies": {
"jest": ">=22"
Expand Down
4 changes: 0 additions & 4 deletions packages/jest-preset-default/jest-preset.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,5 @@
"**/test/*.js"
],
"timers": "fake",
"transform": {
"^.+\\.jsx?$": "babel-jest",
"\\.pegjs$": "<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/pegjs-transform.js"
},
"verbose": true
}
5 changes: 2 additions & 3 deletions packages/jest-preset-default/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,10 @@
"main": "index.js",
"dependencies": {
"@wordpress/jest-console": "^1.0.7",
"babel-jest": "^22.1.0",
"babel-jest": "^23.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest-enzyme": "^4.0.2",
"pegjs": "^0.10.0"
"jest-enzyme": "^6.0.1"
},
"peerDependencies": {
"jest": ">=22"
Expand Down
16 changes: 0 additions & 16 deletions packages/jest-preset-default/scripts/pegjs-transform.js
View file
Open in desktop

This file was deleted.

32 changes: 0 additions & 32 deletions packages/jest-preset-default/scripts/setup-globals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,6 @@ global.window.matchMedia = () => ( {
removeListener: () => {},
} );

global.window._wpDateSettings = {
Copy link
Member Author

Choose a reason for hiding this comment

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

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

formats: {
date: 'j F Y',
datetime: 'j F Y G \h i \m\i\n',
time: 'G \h i \m\i\n',
},
l10n: {
locale: 'en',
meridiem: {
am: 'am',
AM: 'AM',
pm: 'pm',
PM: 'PM',
},
months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdays: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
relative: {
future: '%s from now',
past: '%s ago',
},
},
timezone: {
offset: '-5',
string: 'America/New_York',
},
};

// Setup fake localStorage
const storage = {};
global.window.localStorage = {
Expand All @@ -51,6 +22,3 @@ global.window.localStorage = {

// UserSettings global
global.window.userSettings = { uid: 1 };

// Mock jQuery
global.window.jQuery = { holdReady() {} };
2 changes: 1 addition & 1 deletion packages/scripts/config/babel-transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
const babelJest = require( 'babel-jest' );

module.exports = babelJest.createTransformer( {
presets: [ '@wordpress/default' ],
presets: [ '@wordpress/babel-preset-default' ],
} );
4 changes: 3 additions & 1 deletion packages/scripts/config/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ const jestConfig = {
};

const hasBabelConfig = hasProjectFile( '.babelrc' ) ||
hasProjectFile( 'babelrc.json' ) ||
hasProjectFile( 'babelrc.js' ) ||
hasPackageProp( 'babel' );

if ( ! hasBabelConfig ) {
jestConfig.transform = {
'^.+\\.js$': path.join( __dirname, 'babel-transform' ),
'^.+\\.jsx?$': path.join( __dirname, 'babel-transform' ),
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@wordpress/jest-preset-default": "^1.0.6",
"@wordpress/npm-package-json-lint-config": "^1.0.0",
"cross-spawn": "^5.1.0",
"jest": "^22.4.0",
"jest": "^23.1.0",
"npm-package-json-lint": "^3.0.1",
"read-pkg-up": "^3.0.0",
"resolve-bin": "^0.4.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/wordcount/package.json
View file
Open in desktop
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": {
"lodash": "^4.17.4"
"lodash": "^4.17.10"
},
"publishConfig": {
"access": "public"
Expand Down
23 changes: 13 additions & 10 deletions scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
const fs = require( 'fs' );
const path = require( 'path' );
const glob = require( 'glob' );
const babel = require( 'babel-core' );
const babel = require( '@babel/core' );
const chalk = require( 'chalk' );
const mkdirp = require( 'mkdirp' );

Expand All @@ -30,20 +30,23 @@ const ERROR = chalk.reset.inverse.bold.red( ' ERROR ' );
/**
* Babel Configuration
*/
const babelDefaultConfig = require( '../packages/babel-preset-default' );
babelDefaultConfig.babelrc = false;
const { options: babelDefaultConfig } = babel.loadPartialConfig( {
presets: [ '@wordpress/babel-preset-default' ],
} );
const presetEnvConfig = babelDefaultConfig.presets[ 0 ][ 1 ];
const babelConfigs = {
main: Object.assign(
{},
babelDefaultConfig,
{ presets: [
[ 'env', Object.assign(
{},
presetEnvConfig,
{ modules: 'commonjs' },
) ],
] }
{
presets: [
[ '@babel/preset-env', Object.assign(
{},
presetEnvConfig,
{ modules: 'commonjs' },
) ],
]
}
),
module: babelDefaultConfig,
};
Expand Down