WIP: Introducing wp-scripts in cgb-scripts to replace webpack

packages/cgb-scripts/package.json

@@ -30,6 +30,7 @@
 		"cgb-scripts": "./bin/cgb-scripts.js"
 	},
 	"dependencies": {
+		"@wordpress/scripts": "^7.1.2",
 		"autoprefixer": "^7.2.4",
 		"babel-core": "^6.25.0",
 		"babel-eslint": "^8.2.1",

packages/cgb-scripts/scripts/start.js

@@ -23,9 +23,11 @@ process.on( 'unhandledRejection', err => {
 const ora = require( 'ora' );
 const chalk = require( 'chalk' );
 const webpack = require( 'webpack' );
+const spawn = require( 'cgb-dev-utils/crossSpawn' );
 const config = require( '../config/webpack.config.dev' );
 const resolvePkg = require( 'resolve-pkg' );
 const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } );
+const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } );
 const clearConsole = require( cgbDevUtilsPath + '/clearConsole' );
 const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' );
 
@@ -56,65 +58,71 @@ const spinner = new ora( { text: '' } );
 // Create the production build and print the deployment instructions.
 async function build( webpackConfig ) {
 	// Compiler Instance.
-	const compiler = await webpack( webpackConfig );
+	// const compiler = await webpack( webpackConfig );
+	const result = spawn.sync(
+		wpScripts,
+		['start'],
+		{ stdio: 'inherit' }
+	);
+	console.log( result );
 
 	// Run the compiler.
-	compiler.watch( {}, ( err, stats ) => {
-		clearConsole();
-
-		if ( err ) {
-			return console.log( err );
-		}
-
-		// Get the messages formatted.
-		const messages = formatWebpackMessages( stats.toJson( {}, true ) );
-
-		// If there are errors just show the errors.
-		if ( messages.errors.length ) {
-			// Only keep the first error. Others are often indicative
-			// of the same problem, but confuse the reader with noise.
-			if ( messages.errors.length > 1 ) {
-				messages.errors.length = 1;
-			}
-
-			// Clear success messages.
-			clearConsole();
-
-			// Formatted errors.
-			console.log( '\n❌ ', chalk.black.bgRed( ' Failed to compile. \n' ) );
-			const logErrors = console.log( '\n👉 ', messages.errors.join( '\n\n' ) );
-			console.log( '\n' );
-			spinner.start( chalk.dim( 'Watching for changes... let\'s fix this... (Press CTRL + C to stop).' ) );
-			return logErrors;
-		}
-
-		// CI.
-		if (
-			process.env.CI &&
-			( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) &&
-			messages.warnings.length
-		) {
-			console.log(
-				chalk.yellow(
-					'\nTreating warnings as errors because process.env.CI = true.\n' +
-						'Most CI servers set it automatically.\n'
-				)
-			);
-			return console.log( messages.warnings.join( '\n\n' ) );
-		}
-
-		// Start the build.
-		console.log( `\n${ chalk.dim( 'Let\'s build and compile the files...' ) }` );
-		console.log( '\n✅ ', chalk.black.bgGreen( ' Compiled successfully! \n' ) );
-		console.log(
-			chalk.dim( '   Note that the development build is not optimized. \n' ),
-			chalk.dim( '  To create a production build, use' ),
-			chalk.green( 'npm' ),
-			chalk.white( 'run build\n\n' ),
-			chalk.dim( '👌  Support Awais via VSCode Power User at https://VSCode.pro →\n\n' )
-		);
-		return spinner.start( `${ chalk.dim( 'Watching for changes... (Press CTRL + C to stop).' ) }` );
-	} );
+	// compiler.watch( {}, ( err, stats ) => {
+	// 	clearConsole();
+
+	// 	if ( err ) {
+	// 		return console.log( err );
+	// 	}
+
+	// 	// Get the messages formatted.
+	// 	const messages = formatWebpackMessages( stats.toJson( {}, true ) );
+
+	// 	// If there are errors just show the errors.
+	// 	if ( messages.errors.length ) {
+	// 		// Only keep the first error. Others are often indicative
+	// 		// of the same problem, but confuse the reader with noise.
+	// 		if ( messages.errors.length > 1 ) {
+	// 			messages.errors.length = 1;
+	// 		}
+
+	// 		// Clear success messages.
+	// 		clearConsole();
+
+	// 		// Formatted errors.
+	// 		console.log( '\n❌ ', chalk.black.bgRed( ' Failed to compile. \n' ) );
+	// 		const logErrors = console.log( '\n👉 ', messages.errors.join( '\n\n' ) );
+	// 		console.log( '\n' );
+	// 		spinner.start( chalk.dim( 'Watching for changes... let\'s fix this... (Press CTRL + C to stop).' ) );
+	// 		return logErrors;
+	// 	}
+
+	// 	// CI.
+	// 	if (
+	// 		process.env.CI &&
+	// 		( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) &&
+	// 		messages.warnings.length
+	// 	) {
+	// 		console.log(
+	// 			chalk.yellow(
+	// 				'\nTreating warnings as errors because process.env.CI = true.\n' +
+	// 					'Most CI servers set it automatically.\n'
+	// 			)
+	// 		);
+	// 		return console.log( messages.warnings.join( '\n\n' ) );
+	// 	}
+
+	// 	// Start the build.
+	// 	console.log( `\n${ chalk.dim( 'Let\'s build and compile the files...' ) }` );
+	// 	console.log( '\n✅ ', chalk.black.bgGreen( ' Compiled successfully! \n' ) );
+	// 	console.log(
+	// 		chalk.dim( '   Note that the development build is not optimized. \n' ),
+	// 		chalk.dim( '  To create a production build, use' ),
+	// 		chalk.green( 'npm' ),
+	// 		chalk.white( 'run build\n\n' ),
+	// 		chalk.dim( '👌  Support Awais via VSCode Power User at https://VSCode.pro →\n\n' )
+	// 	);
+	// 	return spinner.start( `${ chalk.dim( 'Watching for changes... (Press CTRL + C to stop).' ) }` );
+	// } );
 }
 
 build( config );

packages/create-guten-block/app/npmInstallScripts.js

@@ -45,7 +45,7 @@ module.exports = ( blockName, blockDir, isCanary ) => {
 	}
 	// Install latest exact version of cgb-scripts.
 	return new Promise( async resolve => {
-		await execa( 'npm', [ 'install', 'cgb-scripts', '--save', '--save-exact', '--silent' ] );
+		await execa( 'npm', [ 'install', '../packages/cgb-scripts', '--save', '--save-exact', '--silent' ] );
 		resolve( true );
 	} );
 };