Build tools: Clone and build from packages repo.

Instead of requiring the packages individually this commit changes it so the packages are used from the packages repository (gutenberg). This is a solution that makes updating the packages easier, as long as we don't have a monorepo to manage both WordPress & the JavaScript packages together.

Props youknowriad, gziolo, omarreiss, herregroen.
See #45145.


git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43824 602fd350-edb4-49c9-b593-d223f7449a82

.gitignore

@@ -22,6 +22,7 @@ wp-tests-config.php
 /vendor
 /src/wp-includes/js/dist
 /src/wp-includes/css/dist
+/packages
 
 # Files and folders that get created in wp-content
 /src/wp-content/blogs.dir

Gruntfile.js

@@ -1,6 +1,7 @@
 /* jshint node:true */
 /* globals Set */
 var webpackConfig = require( './webpack.config' );
+const { execSync } = require( 'child_process' );
 
 module.exports = function(grunt) {
 	var path = require('path'),
@@ -11,6 +12,8 @@ module.exports = function(grunt) {
  		BANNER_TEXT = '/*! This file is auto-generated */',
 		autoprefixer = require( 'autoprefixer' );
 
+	const packageJson = grunt.file.readJSON( 'package.json' );
+
 	// Load tasks.
 	require('matchdep').filterDev(['grunt-*', '!grunt-legacy-util']).forEach( grunt.loadNpmTasks );
 	// Load legacy utils
@@ -784,6 +787,24 @@ module.exports = function(grunt) {
 		'qunit:compiled'
 	] );
 
+	grunt.registerTask( 'download-packages', function() {
+		const directory = 'packages';
+		const version = packageJson.wordpress.packagesVersion;
+
+		if ( ! grunt.file.exists( directory  ) ) {
+			// Clone gutenberg
+			execSync( `git clone https://github.com/WordPress/gutenberg.git ${ directory }`, { stdio: 'inherit' } );
+		}
+
+		execSync( 'git fetch --tags', { cwd: directory, stdio: 'inherit' } );
+
+		// Make sure we are on the correct version of Gutenberg.
+		execSync( `git reset --hard ${ version }`, { cwd: directory, stdio: 'inherit' } );
+
+		// Install Gutenberg dependencies and build the packages.
+		execSync( 'npm install', { cwd: directory, stdio: 'inherit' } );
+	} );
+
 	grunt.renameTask( 'watch', '_watch' );
 
 	grunt.registerTask( 'watch', function() {

package.json

@@ -50,40 +50,6 @@
 	},
 	"dependencies": {
 		"@babel/polyfill": "^7.0.0",
-		"@wordpress/a11y": "^2.0.2",
-		"@wordpress/api-fetch": "^2.1.0",
-		"@wordpress/autop": "^2.0.2",
-		"@wordpress/blob": "^2.1.0",
-		"@wordpress/block-library": "^2.1.4",
-		"@wordpress/block-serialization-default-parser": "^1.0.1",
-		"@wordpress/blocks": "^4.0.4",
-		"@wordpress/components": "^4.2.1",
-		"@wordpress/compose": "^2.0.5",
-		"@wordpress/core-data": "^2.0.6",
-		"@wordpress/data": "^2.1.4",
-		"@wordpress/date": "^2.0.3",
-		"@wordpress/deprecated": "^2.0.2",
-		"@wordpress/dom": "^2.0.4",
-		"@wordpress/dom-ready": "^2.0.2",
-		"@wordpress/edit-post": "^1.0.4",
-		"@wordpress/editor": "^5.0.1",
-		"@wordpress/element": "^2.1.4",
-		"@wordpress/escape-html": "^1.0.1",
-		"@wordpress/hooks": "^2.0.2",
-		"@wordpress/html-entities": "^2.0.2",
-		"@wordpress/i18n": "^3.0.1",
-		"@wordpress/is-shallow-equal": "^1.1.4",
-		"@wordpress/keycodes": "^2.0.2",
-		"@wordpress/list-reusable-blocks": "^1.1.4",
-		"@wordpress/nux": "^2.0.6",
-		"@wordpress/plugins": "^2.0.5",
-		"@wordpress/redux-routine": "^3.0.3",
-		"@wordpress/rich-text": "^1.0.1",
-		"@wordpress/shortcode": "^2.0.2",
-		"@wordpress/token-list": "^1.0.2",
-		"@wordpress/url": "^2.1.0",
-		"@wordpress/viewport": "^2.0.5",
-		"@wordpress/wordcount": "^2.0.2",
 		"element-closest": "^2.0.2",
 		"formdata-polyfill": "^3.0.12",
 		"lodash": "^4.17.11",
@@ -92,5 +58,11 @@
 		"react": "^16.5.2",
 		"react-dom": "^16.5.2",
 		"whatwg-fetch": "^3.0.0"
+	},
+	"scripts": {
+		"postinstall": "grunt download-packages"
+	},
+	"wordpress": {
+		"packagesVersion": "v4.1.0"
 	}
 }

tools/webpack/packages.js

@@ -16,6 +16,7 @@ const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-web
 const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
 
 const baseDir = join( __dirname, '../../' );
+const PACKAGES_PATH = 'packages/packages';
 
 /**
  * Given a string, returns a new string with dash separators converedd to
@@ -159,7 +160,7 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 	let vendorCopies = mode === "development" ? developmentCopies : [ ...minifiedCopies, ...minifyCopies ];
 
 	let cssCopies = packages.map( ( packageName ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
+		from: join( baseDir, PACKAGES_PATH, `${ packageName }/build-style/*.css` ),
 		to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
 		flatten: true,
 		transform: ( content ) => {
@@ -178,7 +179,7 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 	} ) );
 
 	const phpCopies = Object.keys( phpFiles ).map( ( filename ) => ( {
-		from: join( baseDir, `node_modules/@wordpress/${ filename }` ),
+		from: join( baseDir, PACKAGES_PATH, filename ),
 		to: join( baseDir, `src/${ phpFiles[ filename ] }` ),
 	} ) );
 
@@ -187,7 +188,7 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 
 		entry: packages.reduce( ( memo, packageName ) => {
 			const name = camelCaseDash( packageName );
-			memo[ name ] = join( baseDir, `node_modules/@wordpress/${ packageName }` );
+			memo[ name ] = join( baseDir, PACKAGES_PATH, packageName );
 			return memo;
 		}, {} ),
 		output: {