Build: Append the hash of the build to block.json for CSS cache busting purposes. (#580)

* Append the hash of the build to block.json for cache busting purposes.

* Whitespace standardisation.

* Use `glob` to find all `block.json` files in each project

* Only run the version replacement over files in build

---------

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>

Author: dd32

bin/build.js

@@ -5,6 +5,8 @@
  */
 const chalk = require( 'chalk' );
 const fs = require( 'fs' ); // eslint-disable-line id-length
+const { sync: glob } = require( 'fast-glob' );
+const { hashElement } = require( 'folder-hash' );
 const path = require( 'path' );
 const postcss = require( 'postcss' );
 const rtlcss = require( 'rtlcss' );
@@ -88,6 +90,43 @@ async function maybeBuildPostCSS( inputDir, outputDir ) {
 	}
 }
 
+/**
+ * Update the block.json version field with the hash of the build.
+ *
+ * @param {string} basePath
+ */
+async function setBlockVersion( basePath ) {
+	const project = path.basename( basePath );
+
+	// Find any block.json files under the project's `build` dir.
+	const files = glob( '**/build/**/block.json', {
+		absolute: true,
+		cwd: basePath,
+	} );
+
+	if ( ! files.length ) {
+		console.log( chalk.red( `Couldn't find block.json for ${ project }` ) );
+		return;
+	}
+
+	const options = {
+		algo: 'sha1',
+		encoding: 'hex',
+	};
+
+	const hash = await hashElement( basePath, options );
+
+	files.forEach( ( blockJson ) => {
+		const blockJsonContents = require( blockJson );
+		blockJsonContents.version = blockJsonContents.version?.replace( /(^|-)[0-9a-f]{40}$/, '' ) || '';
+		blockJsonContents.version += ( blockJsonContents.version ? '-' : '' ) + hash.hash;
+
+		fs.writeFileSync( blockJson, JSON.stringify( blockJsonContents, null, '\t' ) );
+	} );
+
+	console.log( chalk.green( `block.json version set for ${ project } to ${ hash.hash }` ) );
+}
+
 // If we have more paths that need building, we could switch this to an array.
 const projectPath = path.join( path.dirname( __dirname ), 'mu-plugins/blocks' );
 const cliProjects = process.argv.slice( 2 );
@@ -115,6 +154,8 @@ projects.forEach( async ( file ) => {
 		await maybeBuildBlock( path.resolve( path.join( basePath, 'src' ) ), outputDir );
 
 		await maybeBuildPostCSS( path.resolve( path.join( basePath, 'postcss' ) ), outputDir );
+
+		await setBlockVersion( basePath );
 	} catch ( error ) {
 		console.log( chalk.red( `Error in ${ file }:` ), error.message );
 	}

package.json

@@ -64,6 +64,8 @@
 	},
 	"dependencies": {
 		"@googlemaps/markerclusterer": "^2.4.0",
+		"fast-glob": "^3.3.2",
+		"folder-hash": "^4.0.4",
 		"google-map-react": "^2.2.1",
 		"locutus": "^2.0.16",
 		"lodash.debounce": "^4.0.8",

yarn.lock

@@ -4340,9 +4340,9 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
@@ -5416,6 +5416,14 @@ flatted@^3.2.9:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
+folder-hash@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/folder-hash/-/folder-hash-4.0.4.tgz#f5ffa14e9fc6f3213598f6a367207adf7d419edc"
+  integrity sha512-zEyYH+UsHEfJJcCRSf9ai5I4CTZwZ8ObONRuEI5hcEmJY5pS0FUWKruX9mMnYJrgC7MlPFDYnGsK1R+WFYjLlQ==
+  dependencies:
+    debug "^4.3.3"
+    minimatch "~5.1.2"
+
 follow-redirects@^1.0.0, follow-redirects@^1.15.4:
   version "1.15.5"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz"
@@ -7660,6 +7668,13 @@ minimatch@~3.0.5:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@~5.1.2:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz"