[create-block] Add npmDevDependencies as a template variable. (#39723)

* Add npmDevDependencies as a template variable. Update messaging to show what packages are being installed. * Update changelog. * Update docs. * Corrects the logic around when to install dependencies. * Clearer changelog. * Update packages/create-block/CHANGELOG.md Co-authored-by: David Gwyer <dgwyer@users.noreply.github.com> Co-authored-by: David Gwyer <dgwyer@users.noreply.github.com>
WordPress · Mar 25, 2022 · 41325b9 · 41325b9
1 parent a4c8730
commit 41325b9
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 22 deletions.
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### New Features
+-    Add `npmDevDependencies` template variable to allow definition of `devDependencies` as part of a template ([#39723](https://github.com/WordPress/gutenberg/pull/39723)).
+
 ## 3.0.0 (2022-03-03)
 
 ### Breaking Changes

diff --git a/packages/create-block/README.md b/packages/create-block/README.md
@@ -202,6 +202,7 @@ The following configurable variables are used with the template files. Template
 -   `wpEnv` (default: `false`) – enables integration with the `@wordpress/env` package and adds the `env` script to the `package.json`.
 -   `customScripts` (default: {}) – the list of custom scripts to add to `package.json` . It also allows overriding default scripts.
 -   `npmDependencies` (default: `[]`) – the list of remote npm packages to be installed in the project with [`npm install`](https://docs.npmjs.com/cli/v8/commands/npm-install) when `wpScripts` is enabled.
+-   `npmDevDependencies` (default: `[]`) – the list of remote npm packages to be installed in the project with [`npm install --save-dev`](https://docs.npmjs.com/cli/v8/commands/npm-install) when `wpScripts` is enabled.
 
 **Plugin header fields** ([learn more](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/)):
 

diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js
@@ -22,6 +22,7 @@ module.exports = async ( {
 	wpEnv,
 	wpScripts,
 	npmDependencies,
+	npmDevDependencies,
 	customScripts,
 } ) => {
 	const cwd = join( process.cwd(), slug );
@@ -58,30 +59,66 @@ module.exports = async ( {
 		)
 	);
 
-	if ( wpScripts && size( npmDependencies ) ) {
-		info( '' );
-		info(
-			'Installing npm dependencies. It might take a couple of minutes...'
-		);
-		for ( const packageArg of npmDependencies ) {
-			try {
-				const { type } = npmPackageArg( packageArg );
-				if (
-					! [ 'git', 'tag', 'version', 'range', 'remote' ].includes(
-						type
-					)
-				) {
-					throw new Error(
-						`Provided package type "${ type }" is not supported.`
+	/**
+	 * Helper to determine if we can install this package.
+	 *
+	 * @param {string} packageArg The package to install.
+	 */
+	function checkDependency( packageArg ) {
+		const { type } = npmPackageArg( packageArg );
+		if (
+			! [ 'git', 'tag', 'version', 'range', 'remote' ].includes( type )
+		) {
+			throw new Error(
+				`Provided package type "${ type }" is not supported.`
+			);
+		}
+	}
+
+	if ( wpScripts ) {
+		if ( size( npmDependencies ) ) {
+			info( '' );
+			info(
+				'Installing npm dependencies. It might take a couple of minutes...'
+			);
+			for ( const packageArg of npmDependencies ) {
+				try {
+					checkDependency( packageArg );
+					info( '' );
+					info( `Installing "${ packageArg }".` );
+					await command( `npm install ${ packageArg }`, {
+						cwd,
+					} );
+				} catch ( { message } ) {
+					info( '' );
+					info(
+						`Skipping "${ packageArg }" npm dependency. Reason:`
+					);
+					error( message );
+				}
+			}
+		}
+
+		if ( size( npmDevDependencies ) ) {
+			info( '' );
+			info(
+				'Installing npm devDependencies. It might take a couple of minutes...'
+			);
+			for ( const packageArg of npmDevDependencies ) {
+				try {
+					checkDependency( packageArg );
+					info( '' );
+					info( `Installing "${ packageArg }".` );
+					await command( `npm install ${ packageArg } --save-dev`, {
+						cwd,
+					} );
+				} catch ( { message } ) {
+					info( '' );
+					info(
+						`Skipping "${ packageArg }" npm dev dependency. Reason:`
 					);
+					error( message );
 				}
-				await command( `npm install ${ packageArg }`, {
-					cwd,
-				} );
-			} catch ( { message } ) {
-				info( '' );
-				info( `Skipping "${ packageArg }" npm dependency. Reason:` );
-				error( message );
 			}
 		}
 	}

diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
@@ -36,6 +36,7 @@ module.exports = async (
 		wpScripts,
 		wpEnv,
 		npmDependencies,
+		npmDevDependencies,
 		customScripts,
 		folderName,
 		editorScript,
@@ -74,6 +75,7 @@ module.exports = async (
 		wpScripts,
 		wpEnv,
 		npmDependencies,
+		npmDevDependencies,
 		customScripts,
 		folderName,
 		editorScript,