From 41325b983feabcc46615cd6b1a8a5efe64c5a9f0 Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Fri, 25 Mar 2022 13:24:44 -0400
Subject: [PATCH] [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>
---
 packages/create-block/CHANGELOG.md            |  3 +
 packages/create-block/README.md               |  1 +
 .../create-block/lib/init-package-json.js     | 81 ++++++++++++++-----
 packages/create-block/lib/scaffold.js         |  2 +
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 2dab87b9a5367..3c12e04171810 100644
--- 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
index d55926b75dc63..b7769488a6d02 100644
--- 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
index 94608207fd935..834b42f3d53d1 100644
--- 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
index b9de1bcd42246..a13b742ae9a23 100644
--- 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,