@wordpress/dependency-extraction-webpack-plugin 3.2.2-next.5df0cd52b7.0 → 3.2.3-next.33ec3857e2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 3.2.2-next.0 (2021-12-20)
+
+-   Add the optional `externalizedReportFile` option ([#35106](https://github.com/WordPress/gutenberg/pull/35106)).
+
 ## 3.0.0 (2021-01-21)
 
 ### Breaking Changes

package/README.md

@@ -107,6 +107,13 @@ module.exports = {
 
 The output format for the generated asset file. There are two options available: 'php' or 'json'.
 
+##### `outputFilename`
+
+- Type: string | function
+- Default: null
+
+The filename for the generated asset file. Accepts the same values as the Webpack `output.filename` option.
+
 ##### `combineAssets`
 
 -   Type: boolean
@@ -135,6 +142,14 @@ Pass `useDefaults: false` to disable the default request handling.
 
 Force `wp-polyfill` to be included in each entry point's dependency list. This would be the same as adding `import '@wordpress/polyfill';` to each entry point.
 
+##### `externalizedReport`
+
+-   Type: boolean | string
+-   Default: `false`
+
+Report all externalized dependencies as an array in JSON format. It could be used for further manual or automated inspection.
+You can provide a filename, or set it to `true` to report to a default `externalized-dependencies.json`.
+
 ##### `requestToExternal`
 
 -   Type: function

package/lib/index.js

@@ -17,14 +17,18 @@ const {
 	defaultRequestToHandle,
 } = require( './util' );
 
+const defaultExternalizedReportFileName = 'externalized-dependencies.json';
+
 class DependencyExtractionWebpackPlugin {
 	constructor( options ) {
 		this.options = Object.assign(
 			{
 				combineAssets: false,
 				combinedOutputFile: null,
+				externalizedReport: false,
 				injectPolyfill: false,
 				outputFormat: 'php',
+				outputFilename: null,
 				useDefaults: true,
 			},
 			options
@@ -137,10 +141,26 @@ class DependencyExtractionWebpackPlugin {
 		const {
 			combineAssets,
 			combinedOutputFile,
+			externalizedReport,
 			injectPolyfill,
 			outputFormat,
+			outputFilename,
 		} = this.options;
 
+		// Dump actually externalized dependencies to a report file.
+		if ( externalizedReport ) {
+			const externalizedReportFile =
+				typeof externalizedReport === 'string'
+					? externalizedReport
+					: defaultExternalizedReportFileName;
+			compilation.emitAsset(
+				externalizedReportFile,
+				new RawSource(
+					JSON.stringify( Array.from( this.externalizedDeps ).sort() )
+				)
+			);
+		}
+
 		const combinedAssetsData = {};
 
 		// Process each entry point independently.
@@ -178,12 +198,14 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
-			const runtimeChunk = entrypoint.getRuntimeChunk();
+			const entrypointChunk = isWebpack4
+				? entrypoint.chunks.find( ( c ) => c.name === entrypointName )
+				: entrypoint.getEntrypointChunk();
 
 			const assetData = {
 				// Get a sorted array so we can produce a stable, stringified representation.
 				dependencies: Array.from( entrypointExternalizedWpDeps ).sort(),
-				version: runtimeChunk.hash,
+				version: entrypointChunk.hash,
 			};
 
 			const assetString = this.stringify( assetData );
@@ -193,7 +215,7 @@ class DependencyExtractionWebpackPlugin {
 			const buildFilename = compilation.getPath(
 				compiler.options.output.filename,
 				{
-					chunk: runtimeChunk,
+					chunk: entrypointChunk,
 					filename,
 					query,
 					basename: basename( filename ),
@@ -208,14 +230,30 @@ class DependencyExtractionWebpackPlugin {
 				continue;
 			}
 
-			const assetFilename = buildFilename.replace(
-				/\.js$/i,
-				'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
-			);
+			let assetFilename;
+
+			if ( outputFilename ) {
+				assetFilename = compilation.getPath( outputFilename, {
+					chunk: entrypointChunk,
+					filename,
+					query,
+					basename: basename( filename ),
+					contentHash: createHash( 'md4' )
+						.update( assetString )
+						.digest( 'hex' ),
+				} );
+			} else {
+				assetFilename = buildFilename.replace(
+					/\.js$/i,
+					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' )
+				);
+			}
 
 			// Add source and file into compilation for webpack to output.
 			compilation.assets[ assetFilename ] = new RawSource( assetString );
-			runtimeChunk.files[ isWebpack4 ? 'push' : 'add' ]( assetFilename );
+			entrypointChunk.files[ isWebpack4 ? 'push' : 'add' ](
+				assetFilename
+			);
 		}
 
 		if ( combineAssets ) {

package/lib/types.d.ts

@@ -11,8 +11,10 @@ declare interface DependencyExtractionWebpackPluginOptions {
 	injectPolyfill?: boolean;
 	useDefaults?: boolean;
 	outputFormat?: 'php' | 'json';
+	outputFilename?: string | Function,
 	requestToExternal?: ( request: string ) => string | string[] | undefined;
 	requestToHandle?: ( request: string ) => string | undefined;
 	combinedOutputFile?: string | null;
 	combineAssets?: boolean;
+	externalizedReportFile?: string | undefined;
 }

package/lib/util.js

@@ -34,6 +34,10 @@ function defaultRequestToExternal( request ) {
 			return 'ReactDOM';
 	}
 
+	if ( request.includes( 'react-refresh/runtime' ) ) {
+		return 'ReactRefreshRuntime';
+	}
+
 	if ( BUNDLED_PACKAGES.includes( request ) ) {
 		return undefined;
 	}
@@ -66,6 +70,10 @@ function defaultRequestToHandle( request ) {
 			return 'lodash';
 	}
 
+	if ( request.includes( 'react-refresh/runtime' ) ) {
+		return 'wp-react-refresh-runtime';
+	}
+
 	if ( request.startsWith( WORDPRESS_NAMESPACE ) ) {
 		return 'wp-' + request.substring( WORDPRESS_NAMESPACE.length );
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "3.2.2-next.5df0cd52b7.0",
+	"version": "3.2.3-next.33ec3857e2.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
 	"types": "lib/types.d.ts",
 	"dependencies": {
 		"json2php": "^0.0.4",
-		"webpack-sources": "^2.2.0"
+		"webpack-sources": "^3.2.2"
 	},
 	"peerDependencies": {
 		"webpack": "^4.8.3 || ^5.0.0"
@@ -38,5 +38,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "558d577d12bec15f05e694eb49a094836d885cca"
+	"gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
 }