webpack-config: Set output.uniqueName (#41315)

* webpack-config: Set `output.uniqueName`

When we removed a bunch of otherwise-useless "name" properties from
`package.json` files, it turns out that caused Webpack to start using
the empty string for its `output.uniqueName`, which may result in
collisions if multiple bundles on a page do the same thing.

To avoid this, read the "name" from composer.json if package.json lacks
one.

Also, since we're now setting `output.uniqueName`, various webpack
configs using `output.library.name` should also set `output.uniqueName`
to maintain the previous behavior.

* Remove for entry.x.library.name

Hopefully Webpack does the right thing on its own for those.

projects/js-packages/boost-score-api/changelog/fix-webpack-uniqueName

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Set webpack `output.uniqueName` to match `output.library.name`, to account for a change in js-packages/webpack-config.
+
+

projects/js-packages/boost-score-api/webpack.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
 		...jetpackWebpackConfig.output,
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'index.js',
+		uniqueName: 'BoostScoreApiLibrary',
 		library: {
 			name: 'BoostScoreApiLibrary',
 			type: 'umd',

projects/js-packages/critical-css-gen/changelog/fix-webpack-uniqueName

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Set webpack `output.uniqueName` to match `output.library.name`, to account for a change in js-packages/webpack-config.
+
+

projects/js-packages/critical-css-gen/tests/data/webpack.config.cjs

@@ -11,6 +11,7 @@ module.exports = {
 		path: path.join( __dirname, '../build' ),
 		filename: 'bundle.js',
 		library: 'CriticalCSSGenerator',
+		uniqueName: 'CriticalCSSGenerator',
 	},
 	resolve: {
 		...jetpackWebpackConfig.resolve,

projects/js-packages/react-data-sync-client/changelog/fix-webpack-uniqueName

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Set webpack `output.uniqueName` to match `output.library.name`, to account for a change in js-packages/webpack-config.
+
+

projects/js-packages/react-data-sync-client/webpack.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
 		...jetpackWebpackConfig.output,
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'index.js',
+		uniqueName: 'ReactDataSyncClient',
 		library: {
 			name: 'ReactDataSyncClient',
 			type: 'umd',

projects/js-packages/svelte-data-sync-client/changelog/fix-webpack-uniqueName

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Set webpack `output.uniqueName` to match `output.library.name`, to account for a change in js-packages/webpack-config.
+
+

projects/js-packages/svelte-data-sync-client/webpack.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
 		...jetpackWebpackConfig.output,
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'index.js',
+		uniqueName: 'SvelteDataSyncClient',
 		library: {
 			name: 'SvelteDataSyncClient',
 			type: 'umd',

projects/js-packages/videopress-core/changelog/fix-webpack-uniqueName

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Set webpack `output.uniqueName` to match `output.library.name`, to account for a change in js-packages/webpack-config.
+
+

projects/js-packages/videopress-core/webpack.config.cjs

@@ -24,6 +24,7 @@ module.exports = {
 		...jetpackWebpackConfig.output,
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'index.js',
+		uniqueName: 'VideoPressCore',
 		library: {
 			name: 'VideoPressCore',
 			type: 'umd',

projects/js-packages/webpack-config/README.md

@@ -93,6 +93,9 @@ This is an object suited for spreading some default values into Webpack's `outpu
 
 - `filename`: `[name].js`.
 - `chunkFilename`: `[name].js?minify=false&ver=[contenthash]`. The content hash serves as a cache buster, while `minify=false` avoids a broken minifier in the WordPress.com environment.
+- `uniqueName`: If `package.json` has a name, that. Otherwise if `composer.json` has a name, that.
+
+Note if you're setting `output.library.name`, you may want to also set `output.uniqueName` to the same string to match Webpack's default behavior.
 
 #### `optimization`
 

projects/js-packages/webpack-config/changelog/fix-webpack-uniqueName

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Set `output.uniqueName` by default. Note this may change output for things setting `output.library.name`.

projects/js-packages/webpack-config/src/webpack.js

@@ -59,6 +59,35 @@ const i18nFilterFunction = file => {
 	return i < 14 || file.startsWith( '@automattic/', i );
 };
 
+const getUniqueName = () => {
+	let dir = process.cwd(),
+		olddir;
+	do {
+		const file = path.join( dir, 'package.json' );
+		if ( fs.existsSync( file ) ) {
+			const cfg = JSON.parse( fs.readFileSync( file, { encoding: 'utf8' } ) );
+			if ( cfg.name ) {
+				return cfg.name;
+			}
+		}
+
+		const file2 = path.join( dir, 'composer.json' );
+		if ( fs.existsSync( file2 ) ) {
+			const cfg = JSON.parse( fs.readFileSync( file2, { encoding: 'utf8' } ) );
+			if ( cfg.name ) {
+				// Prepend an '@' to make it look more like a JS package name.
+				return '@' + cfg.name;
+			}
+			break;
+		}
+
+		olddir = dir;
+		dir = path.dirname( dir );
+	} while ( dir !== olddir );
+
+	throw new Error( 'Cannot determine unique name' );
+};
+
 /****** Options ******/
 
 // See README.md for explanations of all these settings.
@@ -70,6 +99,7 @@ const devtool = isProduction ? false : 'source-map';
 const output = {
 	filename: '[name].js',
 	chunkFilename: '[name].js?minify=false&ver=[contenthash]',
+	uniqueName: getUniqueName(),
 };
 const optimization = {
 	minimize: isProduction,