Build: Support watching SVG icons to generate TSX

bin/packages/build-worker.js

@@ -8,10 +8,12 @@ const babel = require( '@babel/core' );
 const makeDir = require( 'make-dir' );
 const sass = require( 'sass' );
 const postcss = require( 'postcss' );
+
 /**
  * Internal dependencies
  */
 const getBabelConfig = require( './get-babel-config' );
+const iconsBuildUtils = require( '../../packages/icons/lib/build-worker-utils' );
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -179,6 +181,14 @@ async function buildJS( file ) {
 	}
 }
 
+// This build task is only meant for regenerating icons in the icons library at
+// packages/icons/src/library. Let it delegate to that package's own handler.
+async function buildSVG( file ) {
+	if ( ! ( await iconsBuildUtils.buildSVG( file ) ) ) {
+		throw new Error( `No handler for SVG file: ${ file }` );
+	}
+}
+
 /**
  * Object of build tasks per file extension.
  *
@@ -189,6 +199,7 @@ const BUILD_TASK_BY_EXTENSION = {
 	'.js': buildJS,
 	'.ts': buildJS,
 	'.tsx': buildJS,
+	'.svg': buildSVG,
 };
 
 module.exports = async ( file, callback ) => {

bin/packages/watch.js

@@ -64,7 +64,8 @@ function isSourceFile( filename ) {
 		.replace( /\\/g, '/' );
 
 	return (
-		/\/src\/.+\.(js|json|scss|ts|tsx)$/.test( relativePath ) &&
+		// Include .svg for automatic generation of icons in packages/icons
+		/\/src\/.+\.(js|json|scss|ts|tsx|svg)$/.test( relativePath ) &&
 		! [
 			/\/(benchmark|__mocks__|__tests__|test|storybook|stories|e2e-test-utils-playwright)\/.+/,
 			/.\.(spec|test)\.js$/,

packages/icons/lib/build-worker-utils.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const { promisify } = require( 'util' );
+const execFile = promisify( require( 'child_process' ).execFile );
+
+/**
+ * Internal dependencies
+ */
+const { generateTsxFiles } = require( './generate-library' );
+
+const ICON_LIBRARY_DIR = path.join( __dirname, '..', 'src', 'library' );
+
+/**
+ * A build-worker task to be used by the monorepo's watcher-builder.
+ *
+ * @see bin/packages/build-worker.js
+ *
+ * @param {string} file File to build.
+ */
+async function buildSVG( file ) {
+	if ( path.dirname( file ) !== ICON_LIBRARY_DIR ) {
+		return false;
+	}
+
+	const FgRed = '\x1b[31m';
+	const Reset = '\x1b[0m';
+
+	try {
+		await execFile( 'git', [ 'ls-files', '--error-unmatch', file ] );
+	} catch {
+		throw new Error(
+			`${ FgRed }Cannot generate icon from untracked SVG file '${ path.basename(
+				file
+			) }'.${ Reset }
+${ FgRed }Please add it to Git, then restart:${ Reset }
+
+${ FgRed }	git add ${ path.relative( '', file ) }${ Reset }
+${ FgRed }	npm run dev${ Reset }
+`
+		);
+	}
+
+	await generateTsxFiles( [ path.basename( file ) ] );
+	return true;
+}
+
+module.exports = { buildSVG };

packages/icons/bin/generate-library.js → packages/icons/lib/generate-library.js

@@ -70,12 +70,16 @@ async function cleanup() {
 }
 
 // Generate src/library/*.tsx based on the available SVG files.
-async function generateTsxFiles() {
-	const svgFiles = ( await readdir( ICON_LIBRARY_DIR ) ).filter( ( file ) =>
-		// Stricter than just checking for SVG suffix, thereby avoiding hidden
-		// files and characters that would get in the way of camel-casing.
-		file.match( /^[a-z0-9--]+\.svg$/ )
-	);
+async function generateTsxFiles( svgFiles ) {
+	if ( svgFiles ) {
+		// Argument passed by caller at ./build-worker-utils.js
+	} else {
+		svgFiles = ( await readdir( ICON_LIBRARY_DIR ) ).filter( ( file ) =>
+			// Stricter than just checking for SVG suffix, thereby avoiding hidden
+			// files and characters that would get in the way of camel-casing.
+			file.match( /^[a-z0-9--]+\.svg$/ )
+		);
+	}
 
 	await Promise.all(
 		svgFiles.map( async ( svgFile ) => {
@@ -189,4 +193,10 @@ ${ jsxContent }
 `;
 }
 
-main();
+if ( module === require.main ) {
+	main();
+}
+
+module.exports = {
+	generateTsxFiles,
+};

packages/icons/package.json

@@ -39,6 +39,6 @@
 	},
 	"scripts": {
 		"prelint": "npm run build",
-		"build": "node bin/generate-library"
+		"build": "node lib/generate-library"
 	}
 }