Extract reusable part of Webpack config and put in @wordpress/scripts

package.json

@@ -75,7 +75,6 @@
 		"@wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
 		"@wordpress/postcss-themes": "file:packages/postcss-themes",
 		"@wordpress/scripts": "file:packages/scripts",
-		"babel-loader": "8.0.5",
 		"benchmark": "2.1.4",
 		"browserslist": "4.4.1",
 		"chalk": "2.4.1",
@@ -104,6 +103,7 @@
 		"node-watch": "0.6.0",
 		"pegjs": "0.10.0",
 		"phpegjs": "1.0.0-beta7",
+		"postcss": "7.0.13",
 		"react-dom": "16.6.3",
 		"react-test-renderer": "16.6.3",
 		"redux": "4.0.0",
@@ -113,13 +113,10 @@
 		"shallow-equal": "1.0.0",
 		"shallow-equals": "1.0.0",
 		"shallowequal": "1.1.0",
-		"source-map-loader": "0.2.3",
 		"sprintf-js": "1.1.1",
 		"stylelint-config-wordpress": "13.1.0",
 		"uuid": "3.3.2",
 		"webpack": "4.8.3",
-		"webpack-bundle-analyzer": "3.0.2",
-		"webpack-livereload-plugin": "2.1.1",
 		"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"
 	},
 	"npmPackageJsonLintConfig": {

packages/block-serialization-default-parser/test/index.js

@@ -6,7 +6,8 @@ import path from 'path';
 /**
  * WordPress dependencies
  */
-import { jsTester, phpTester } from '@wordpress/block-serialization-spec-parser';
+// eslint-disable-next-line no-restricted-syntax
+import { jsTester, phpTester } from '@wordpress/block-serialization-spec-parser/shared-tests';
 
 /**
  * Internal dependencies

packages/block-serialization-spec-parser/CHANGELOG.md

@@ -1,6 +1,12 @@
-## 2.1.0 (Unreleased)
+## 3.0.0 (Unreleased)
 
-- A `parser.php` file generated from the PEGJS grammar is now included.
+## Breaking Change
+
+- A `parser.js` file generated from the PEGJS grammar is now outputted in commonjs format.
+
+## New Feature
+
+- A `parser.php` file generated from the PEGJS grammar is now added upon installation.
 
 ## 2.0.2 (2018-12-12)
 

packages/block-serialization-spec-parser/package.json

@@ -18,12 +18,16 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"main": "parser.js",
+	"dependencies": {
+		"pegjs": "^0.10.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
 	"scripts": {
 		"build": "concurrently \"npm run build:js\" \"npm run build:php\"",
-		"build:js": "pegjs --format umd -o ./parser.js ./grammar.pegjs",
+		"build:js": "pegjs --format commonjs -o ./parser.js ./grammar.pegjs",
 		"build:php": "node bin/create-php-parser.js"
 	}
 }

packages/block-serialization-spec-parser/test/index.js

@@ -6,7 +6,8 @@ import path from 'path';
 /**
  * Internal dependencies
  */
-import { jsTester, phpTester, parse } from '../';
+import { parse } from '../';
+import { jsTester, phpTester } from '../shared-tests';
 
 describe( 'block-serialization-spec-parser-js', jsTester( parse ) );
 

packages/scripts/config/webpack.config.js

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
+const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
+const path = require( 'path' );
+
+/**
+ * Internal dependencies
+ */
+const { camelCaseDash } = require( '../utils' );
+
+/**
+ * Converts @wordpress/* string request into request object.
+ *
+ * Note this isn't the same as camel case because of the
+ * way that numbers don't trigger the capitalized next letter.
+ *
+ * @example
+ * formatRequest( '@wordpress/api-fetch' );
+ * // { this: [ 'wp', 'apiFetch' ] }
+ * formatRequest( '@wordpress/i18n' );
+ * // { this: [ 'wp', 'i18n' ] }
+ *
+ * @param {string} request Request name from import statement.
+ * @return {Object} Request object formatted for further processing.
+ */
+const formatRequest = ( request ) => {
+	// '@wordpress/api-fetch' -> [ '@wordpress', 'api-fetch' ]
+	const [ , name ] = request.split( '/' );
+
+	// { this: [ 'wp', 'apiFetch' ] }
+	return {
+		this: [ 'wp', camelCaseDash( name ) ],
+	};
+};
+
+const wordpressExternals = ( context, request, callback ) => {
+	if ( /^@wordpress\//.test( request ) ) {
+		callback( null, formatRequest( request ), 'this' );
+	} else {
+		callback();
+	}
+};
+
+const externals = [
+	{
+		react: 'React',
+		'react-dom': 'ReactDOM',
+		moment: 'moment',
+		jquery: 'jQuery',
+		lodash: 'lodash',
+		'lodash-es': 'lodash',
+	},
+	wordpressExternals,
+];
+
+const isProduction = process.env.NODE_ENV === 'production';
+const mode = isProduction ? 'production' : 'development';
+
+const config = {
+	mode,
+	entry: {
+		index: path.resolve( process.cwd(), 'src', 'index.js' ),
+	},
+	output: {
+		filename: '[name].js',
+		path: path.resolve( process.cwd(), 'build' ),
+	},
+	externals,
+	resolve: {
+		alias: {
+			'lodash-es': 'lodash',
+		},
+	},
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: require.resolve( 'source-map-loader' ),
+				enforce: 'pre',
+			},
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: require.resolve( 'babel-loader' ),
+			},
+		],
+	},
+	plugins: [
+		// WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content
+		// as convenient interactive zoomable treemap.
+		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
+		// WP_LIVE_RELOAD_PORT global variable changes port on which live reload works
+		// when running watch mode.
+		! isProduction && new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ),
+	].filter( Boolean ),
+	stats: {
+		children: false,
+	},
+};
+
+if ( ! isProduction ) {
+	// WP_DEVTOOL global variable controls how source maps are generated.
+	// See: https://webpack.js.org/configuration/devtool/#devtool.
+	config.devtool = process.env.WP_DEVTOOL || 'source-map';
+}
+
+module.exports = config;

packages/scripts/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/eslint-plugin": "file:../eslint-plugin",
 		"@wordpress/jest-preset-default": "file:../jest-preset-default",
 		"@wordpress/npm-package-json-lint-config": "file:../npm-package-json-lint-config",
+		"babel-loader": "^8.0.5",
 		"chalk": "^2.4.1",
 		"check-node-version": "^3.1.1",
 		"cross-spawn": "^5.1.0",
@@ -45,10 +46,13 @@
 		"puppeteer": "1.6.1",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
+		"source-map-loader": "^0.2.4",
 		"stylelint": "^9.10.1",
 		"stylelint-config-wordpress": "^13.1.0",
 		"webpack": "4.8.3",
-		"webpack-cli": "^3.1.2"
+		"webpack-bundle-analyzer": "^3.0.3",
+		"webpack-cli": "^3.1.2",
+		"webpack-livereload-plugin": "^2.2.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/scripts/scripts/build.js

@@ -32,4 +32,3 @@ if ( hasWebpackConfig ) {
 	console.log( 'Webpack config file is missing.' );
 	process.exit( 1 );
 }
-

packages/scripts/utils/index.js

@@ -18,8 +18,12 @@ const {
 const {
 	hasPackageProp,
 } = require( './package' );
+const {
+	camelCaseDash,
+} = require( './string' );
 
 module.exports = {
+	camelCaseDash,
 	fromConfigRoot,
 	getCliArg,
 	getCliArgs,