@wordpress/dependency-extraction-webpack-plugin 3.2.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

@@ -7,6 +7,7 @@ const webpack = require( 'webpack' );
 // In webpack 5 there is a `webpack.sources` field but for webpack 4 we have to fallback to the `webpack-sources` package.
 const { RawSource } = webpack.sources || require( 'webpack-sources' );
 const json2php = require( 'json2php' );
+const isWebpack4 = webpack.version.startsWith( '4.' );
 
 /**
  * Internal dependencies
@@ -16,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
@@ -41,7 +46,9 @@ class DependencyExtractionWebpackPlugin {
 		// Offload externalization work to the ExternalsPlugin.
 		this.externalsPlugin = new webpack.ExternalsPlugin(
 			'window',
-			this.externalizeWpDeps.bind( this )
+			isWebpack4
+				? this.externalizeWpDeps.bind( this )
+				: this.externalizeWpDepsV5.bind( this )
 		);
 	}
 
@@ -70,6 +77,10 @@ class DependencyExtractionWebpackPlugin {
 		return callback();
 	}
 
+	externalizeWpDepsV5( { context, request }, callback ) {
+		return this.externalizeWpDeps( context, request, callback );
+	}
+
 	mapRequestToDependency( request ) {
 		// Handle via options.requestToHandle first
 		if ( typeof this.options.requestToHandle === 'function' ) {
@@ -104,116 +115,170 @@ class DependencyExtractionWebpackPlugin {
 	apply( compiler ) {
 		this.externalsPlugin.apply( compiler );
 
-		compiler.hooks.emit.tap( this.constructor.name, ( compilation ) => {
-			const {
-				combineAssets,
-				combinedOutputFile,
-				injectPolyfill,
-				outputFormat,
-			} = this.options;
-
-			const combinedAssetsData = {};
-
-			// Process each entry point independently.
-			for ( const [
-				entrypointName,
-				entrypoint,
-			] of compilation.entrypoints.entries() ) {
-				const entrypointExternalizedWpDeps = new Set();
-				if ( injectPolyfill ) {
-					entrypointExternalizedWpDeps.add( 'wp-polyfill' );
+		if ( isWebpack4 ) {
+			compiler.hooks.emit.tap( this.constructor.name, ( compilation ) =>
+				this.addAssets( compilation, compiler )
+			);
+		} else {
+			compiler.hooks.thisCompilation.tap(
+				this.constructor.name,
+				( compilation ) => {
+					compilation.hooks.processAssets.tap(
+						{
+							name: this.constructor.name,
+							stage:
+								compiler.webpack.Compilation
+									.PROCESS_ASSETS_STAGE_ADDITIONAL,
+						},
+						() => this.addAssets( compilation, compiler )
+					);
 				}
+			);
+		}
+	}
 
-				const processModule = ( { userRequest } ) => {
-					if ( this.externalizedDeps.has( userRequest ) ) {
-						const scriptDependency = this.mapRequestToDependency(
-							userRequest
-						);
-						entrypointExternalizedWpDeps.add( scriptDependency );
-					}
-				};
-
-				// Search for externalized modules in all chunks.
-				for ( const chunk of entrypoint.chunks ) {
-					for ( const chunkModule of chunk.modulesIterable ) {
-						processModule( chunkModule );
-						// loop through submodules of ConcatenatedModule
-						if ( chunkModule.modules ) {
-							for ( const concatModule of chunkModule.modules ) {
-								processModule( concatModule );
-							}
+	addAssets( compilation, compiler ) {
+		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.
+		for ( const [
+			entrypointName,
+			entrypoint,
+		] of compilation.entrypoints.entries() ) {
+			const entrypointExternalizedWpDeps = new Set();
+			if ( injectPolyfill ) {
+				entrypointExternalizedWpDeps.add( 'wp-polyfill' );
+			}
+
+			const processModule = ( { userRequest } ) => {
+				if ( this.externalizedDeps.has( userRequest ) ) {
+					const scriptDependency = this.mapRequestToDependency(
+						userRequest
+					);
+					entrypointExternalizedWpDeps.add( scriptDependency );
+				}
+			};
+
+			// Search for externalized modules in all chunks.
+			for ( const chunk of entrypoint.chunks ) {
+				const modulesIterable = isWebpack4
+					? chunk.modulesIterable
+					: compilation.chunkGraph.getChunkModules( chunk );
+				for ( const chunkModule of modulesIterable ) {
+					processModule( chunkModule );
+					// loop through submodules of ConcatenatedModule
+					if ( chunkModule.modules ) {
+						for ( const concatModule of chunkModule.modules ) {
+							processModule( concatModule );
 						}
 					}
 				}
+			}
 
-				const runtimeChunk = entrypoint.getRuntimeChunk();
-
-				const assetData = {
-					// Get a sorted array so we can produce a stable, stringified representation.
-					dependencies: Array.from(
-						entrypointExternalizedWpDeps
-					).sort(),
-					version: runtimeChunk.hash,
-				};
-
-				const assetString = this.stringify( assetData );
-
-				// Determine a filename for the asset file.
-				const [ filename, query ] = entrypointName.split( '?', 2 );
-				const buildFilename = compilation.getPath(
-					compiler.options.output.filename,
-					{
-						chunk: runtimeChunk,
-						filename,
-						query,
-						basename: basename( filename ),
-						contentHash: createHash( 'md4' )
-							.update( assetString )
-							.digest( 'hex' ),
-					}
-				);
-
-				if ( combineAssets ) {
-					combinedAssetsData[ buildFilename ] = assetData;
-					continue;
+			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: entrypointChunk.hash,
+			};
+
+			const assetString = this.stringify( assetData );
+
+			// Determine a filename for the asset file.
+			const [ filename, query ] = entrypointName.split( '?', 2 );
+			const buildFilename = compilation.getPath(
+				compiler.options.output.filename,
+				{
+					chunk: entrypointChunk,
+					filename,
+					query,
+					basename: basename( filename ),
+					contentHash: createHash( 'md4' )
+						.update( assetString )
+						.digest( 'hex' ),
 				}
+			);
 
-				const assetFilename = buildFilename.replace(
+			if ( combineAssets ) {
+				combinedAssetsData[ buildFilename ] = assetData;
+				continue;
+			}
+
+			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.push( assetFilename );
 			}
 
-			if ( combineAssets ) {
-				// Assert the `string` type for output path.
-				// The type indicates the option may be `undefined`.
-				// However, at this point in compilation, webpack has filled the options in if
-				// they were not provided.
-				const outputFolder = /** @type {{path:string}} */ ( compiler
-					.options.output ).path;
-
-				const assetsFilePath = path.resolve(
-					outputFolder,
-					combinedOutputFile ||
-						'assets.' + ( outputFormat === 'php' ? 'php' : 'json' )
-				);
-				const assetsFilename = path.relative(
-					outputFolder,
-					assetsFilePath
-				);
+			// Add source and file into compilation for webpack to output.
+			compilation.assets[ assetFilename ] = new RawSource( assetString );
+			entrypointChunk.files[ isWebpack4 ? 'push' : 'add' ](
+				assetFilename
+			);
+		}
 
-				// Add source into compilation for webpack to output.
-				compilation.assets[ assetsFilename ] = new RawSource(
-					this.stringify( combinedAssetsData )
-				);
-			}
-		} );
+		if ( combineAssets ) {
+			// Assert the `string` type for output path.
+			// The type indicates the option may be `undefined`.
+			// However, at this point in compilation, webpack has filled the options in if
+			// they were not provided.
+			const outputFolder = /** @type {{path:string}} */ ( compiler.options
+				.output ).path;
+
+			const assetsFilePath = path.resolve(
+				outputFolder,
+				combinedOutputFile ||
+					'assets.' + ( outputFormat === 'php' ? 'php' : 'json' )
+			);
+			const assetsFilename = path.relative(
+				outputFolder,
+				assetsFilePath
+			);
+
+			// Add source into compilation for webpack to output.
+			compilation.assets[ assetsFilename ] = new RawSource(
+				this.stringify( combinedAssetsData )
+			);
+		}
 	}
 }
 

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.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": "743b70f86f1e75fd66a583bf659f2b2fe5daf1cc"
+	"gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
 }