Improve default Babel preset to include JSX pragma (#13540)

* Include custome JSX pragma support in Babel preset

* Stop using Babel tranpiliation for two packages
babel-plugin-import-jsx-pragma and postcss-themes

* Add engines field to node based packages

babel.config.js

@@ -3,16 +3,6 @@ module.exports = function( api ) {
 
 	return {
 		presets: [ '@wordpress/babel-preset-default' ],
-		plugins: [
-			[
-				'@wordpress/babel-plugin-import-jsx-pragma',
-				{
-					scopeVariable: 'createElement',
-					source: '@wordpress/element',
-					isDefault: false,
-				},
-			],
-		],
 		env: {
 			production: {
 				plugins: [

bin/packages/get-babel-config.js

@@ -10,14 +10,7 @@ const babel = require( '@babel/core' );
 const { options: babelDefaultConfig } = babel.loadPartialConfig( {
 	configFile: '@wordpress/babel-preset-default',
 } );
-const plugins = babelDefaultConfig.plugins;
-if ( ! process.env.SKIP_JSX_PRAGMA_TRANSFORM ) {
-	plugins.push( [ '@wordpress/babel-plugin-import-jsx-pragma', {
-		scopeVariable: 'createElement',
-		source: '@wordpress/element',
-		isDefault: false,
-	} ] );
-}
+const { plugins, presets } = babelDefaultConfig;
 
 const overrideOptions = ( target, targetName, options ) => {
 	if ( get( target, [ 'file', 'request' ] ) === targetName ) {
@@ -37,7 +30,7 @@ const babelConfigs = {
 		{
 			plugins,
 			presets: map(
-				babelDefaultConfig.presets,
+				presets,
 				( preset ) => overrideOptions( preset, '@babel/preset-env', {
 					modules: 'commonjs',
 				} )
@@ -55,7 +48,7 @@ const babelConfigs = {
 				} )
 			),
 			presets: map(
-				babelDefaultConfig.presets,
+				presets,
 				( preset ) => overrideOptions( preset, '@babel/preset-env', {
 					modules: false,
 				} )

bin/packages/get-packages.js

@@ -3,7 +3,7 @@
  */
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { overEvery, compact, includes, negate } = require( 'lodash' );
+const { overEvery } = require( 'lodash' );
 
 /**
  * Absolute path to packages directory.
@@ -12,36 +12,6 @@ const { overEvery, compact, includes, negate } = require( 'lodash' );
  */
 const PACKAGES_DIR = path.resolve( __dirname, '../../packages' );
 
-const {
-	/**
-	 * Comma-separated string of packages to include in build.
-	 *
-	 * @type {string}
-	 */
-	INCLUDE_PACKAGES,
-
-	/**
-	 * Comma-separated string of packages to exclude from build.
-	 *
-	 * @type {string}
-	 */
-	EXCLUDE_PACKAGES,
-} = process.env;
-
-/**
- * Given a comma-separated string, returns a filter function which returns true
- * if the item is contained within as a comma-separated entry.
- *
- * @param {Function} filterFn Filter function to call with item to test.
- * @param {string}   list     Comma-separated list of items.
- *
- * @return {Function} Filter function.
- */
-const createCommaSeparatedFilter = ( filterFn, list ) => {
-	const listItems = list.split( ',' );
-	return ( item ) => filterFn( listItems, item );
-};
-
 /**
  * Returns true if the given base file name for a file within the packages
  * directory is itself a directory.
@@ -62,11 +32,7 @@ function isDirectory( file ) {
  *
  * @return {boolean} Whether to include file in build.
  */
-const filterPackages = overEvery( compact( [
-	isDirectory,
-	INCLUDE_PACKAGES && createCommaSeparatedFilter( includes, INCLUDE_PACKAGES ),
-	EXCLUDE_PACKAGES && createCommaSeparatedFilter( negate( includes ), EXCLUDE_PACKAGES ),
-] ) );
+const filterPackages = overEvery( isDirectory );
 
 /**
  * Returns the absolute path of all WordPress packages

package.json

@@ -150,8 +150,8 @@
 	"scripts": {
 		"prebuild": "npm run check-engines",
 		"clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style",
-		"prebuild:packages": "npm run clean:packages && lerna run build && cross-env INCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes,jest-console SKIP_JSX_PRAGMA_TRANSFORM=1 node ./bin/packages/build.js",
-		"build:packages": "cross-env EXCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,jest-console,postcss-themes node ./bin/packages/build.js",
+		"prebuild:packages": "npm run clean:packages && lerna run build",
+		"build:packages": "node ./bin/packages/build.js",
 		"build": "npm run build:packages && wp-scripts build",
 		"check-engines": "wp-scripts check-engines",
 		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2\" \"wp-scripts check-licenses --dev\"",

packages/babel-plugin-import-jsx-pragma/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Breaking Change
 
 - Plugin skips now adding import JSX pragma when the scope variable is defined for all JSX elements ([#13809](https://github.com/WordPress/gutenberg/pull/13809)). 
+- Stop using Babel transpilation internally and set node 8 as a minimal version required ([#13540](https://github.com/WordPress/gutenberg/pull/13540)).
 
 ## 1.1.0 (2018-09-05)
 

packages/babel-plugin-import-jsx-pragma/src/index.js → packages/babel-plugin-import-jsx-pragma/index.js

@@ -26,15 +26,12 @@ const DEFAULT_OPTIONS = {
  *
  * @return {Object} Babel transform plugin.
  */
-export default function( babel ) {
+module.exports = function( babel ) {
 	const { types: t } = babel;
 
 	function getOptions( state ) {
 		if ( ! state._options ) {
-			state._options = {
-				...DEFAULT_OPTIONS,
-				...state.opts,
-			};
+			state._options = Object.assign( {}, DEFAULT_OPTIONS, state.opts );
 		}
 
 		return state._options;
@@ -106,4 +103,4 @@ export default function( babel ) {
 			},
 		},
 	};
-}
+};

packages/babel-plugin-import-jsx-pragma/package.json

@@ -20,15 +20,13 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
-		"build",
-		"build-module"
+		"index.js"
 	],
-	"main": "build/index.js",
-	"module": "build-module/index.js",
-	"dependencies": {
-		"@babel/runtime": "^7.3.1"
-	},
+	"main": "index.js",
 	"peerDependencies": {
 		"@babel/core": "^7.0.0"
 	},

packages/babel-plugin-import-jsx-pragma/test/index.js

@@ -6,7 +6,7 @@ import { transformSync } from '@babel/core';
 /**
  * Internal dependencies
  */
-import plugin from '../src';
+import plugin from '../';
 
 describe( 'babel-plugin-import-jsx-pragma', () => {
 	function getTransformedCode( source, options = {} ) {

packages/babel-plugin-makepot/package.json

@@ -19,6 +19,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/babel-preset-default/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Breaking Change
 
 - Removed `babel-core` dependency acting as Babel 7 bridge ([#13922](https://github.com/WordPress/gutenberg/pull/13922). Ensure all references to `babel-core` are replaced with `@babel/core` .
+- Preset updated to include `@wordpress/babel-plugin-import-jsx-pragma` plugin integration ([#13540](https://github.com/WordPress/gutenberg/pull/13540)).
 
 ## 3.0.0 (2018-09-30)
 

packages/babel-preset-default/index.js

@@ -15,6 +15,14 @@ module.exports = function( api ) {
 		].filter( Boolean ),
 		plugins: [
 			'@babel/plugin-proposal-object-rest-spread',
+			[
+				'@wordpress/babel-plugin-import-jsx-pragma',
+				{
+					scopeVariable: 'createElement',
+					source: '@wordpress/element',
+					isDefault: false,
+				},
+			],
 			[ '@babel/plugin-transform-react-jsx', {
 				pragma: 'createElement',
 			} ],

packages/babel-preset-default/package.json

@@ -22,6 +22,9 @@
 	"engines": {
 		"node": ">=8"
 	},
+	"files": [
+		"index.js"
+	],
 	"main": "index.js",
 	"dependencies": {
 		"@babel/core": "^7.2.2",
@@ -31,6 +34,7 @@
 		"@babel/plugin-transform-runtime": "^7.2.0",
 		"@babel/preset-env": "^7.3.1",
 		"@babel/runtime": "^7.3.1",
+		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config"
 	},
 	"peerDependencies": {

packages/custom-templated-path-webpack-plugin/package.json

@@ -18,6 +18,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/e2e-test-utils/package.json

@@ -18,6 +18,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/e2e-tests/package.json

@@ -18,6 +18,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
 		"@wordpress/jest-console": "file:../jest-console",

packages/jest-console/package.json

@@ -19,6 +19,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/jest-preset-default/package.json

@@ -21,6 +21,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"scripts",
 		"jest-preset.json"

packages/jest-puppeteer-axe/package.json

@@ -20,6 +20,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/library-export-default-webpack-plugin/package.json

@@ -18,6 +18,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
 		"build",
 		"build-module"

packages/npm-package-json-lint-config/package.json

@@ -18,6 +18,9 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"main": "index.js",
 	"peerDependencies": {
 		"npm-package-json-lint": ">=3.3.1"

packages/postcss-themes/CHANGELOG.md

@@ -0,0 +1,5 @@
+## 2.0.0 (Unreleased)
+
+### Breaking change
+
+- Stop using Babel transpilation internally and set node 8 as a minimal version required ([#13540](https://github.com/WordPress/gutenberg/pull/13540)).

packages/postcss-themes/src/index.js → packages/postcss-themes/index.js

@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 const postcss = require( 'postcss' );
 
 module.exports = postcss.plugin( 'postcss-themes', function( options ) {

packages/postcss-themes/package.json

@@ -21,13 +21,14 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=8"
+	},
 	"files": [
-		"build",
-		"build-module"
+		"index.js"
 	],
-	"main": "build/index.js",
+	"main": "index.js",
 	"dependencies": {
-		"@babel/runtime": "^7.3.1",
 		"autoprefixer": "^9.4.5",
 		"postcss": "^7.0.13",
 		"postcss-color-function": "^4.0.1"

packages/postcss-themes/test/index.js

@@ -6,7 +6,7 @@ import postcss from 'postcss';
 /**
  * Internal dependencies
  */
-import plugin from '../src';
+import plugin from '../';
 
 /**
  * Module constants