From 9e13e1d765ab52d93c3d70a7e76e2645a9b7f8ea Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 21 Mar 2018 19:07:48 -0400
Subject: [PATCH] Framework: Use CustomTemplatedPathPlugin updated for Webpack
 4 (#5687)

---
 package-lock.json |  9 ++++++
 package.json      |  1 +
 webpack.config.js | 71 +++++++++++++----------------------------------
 3 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9652026b5e54..96e5d4c1b964c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -393,6 +393,15 @@
 			"integrity": "sha512-qYfKfxrksXWSfrmU+JGixKskVytdKWXv5vIYxzXojl2V6OOs/j2Crspi2Hona0Iv5LTUdg02WX7X1rPlmQHmLg==",
 			"dev": true
 		},
+		"@wordpress/custom-templated-path-webpack-plugin": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/custom-templated-path-webpack-plugin/-/custom-templated-path-webpack-plugin-1.0.0.tgz",
+			"integrity": "sha512-7GDENg5juXusGye4JqKAjfAr1EcKNNmJ6GUnnUrdOkXgjnT5CoAw2ADJxvtALtl4vx6o/nqzJxp9YQ/bZi85Dg==",
+			"dev": true,
+			"requires": {
+				"escape-string-regexp": "1.0.5"
+			}
+		},
 		"@wordpress/dom-ready": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-1.0.3.tgz",
diff --git a/package.json b/package.json
index 2e92290a7a97f..1250411eed7ef 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
 	},
 	"devDependencies": {
 		"@wordpress/babel-preset-default": "1.1.1",
+		"@wordpress/custom-templated-path-webpack-plugin": "1.0.0",
 		"@wordpress/jest-preset-default": "1.0.3",
 		"@wordpress/scripts": "1.1.0",
 		"autoprefixer": "6.7.7",
diff --git a/webpack.config.js b/webpack.config.js
index 0129d875e9368..dba06b641d958 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,9 +3,14 @@
  */
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
-const { reduce, escapeRegExp, get } = require( 'lodash' );
+const { get } = require( 'lodash' );
 const { basename } = require( 'path' );
 
+/**
+ * WordPress dependencies
+ */
+const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
+
 // Main CSS loader for everything but blocks..
 const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
 	filename: './[basename]/build/style.css',
@@ -104,54 +109,6 @@ const externals = {
 	};
 } );
 
-/**
- * Webpack plugin for handling specific template tags in Webpack configuration
- * values like those supported in the base Webpack functionality (e.g. `name`).
- *
- * @see webpack.TemplatedPathPlugin
- */
-class CustomTemplatedPathPlugin {
-	/**
-	 * CustomTemplatedPathPlugin constructor. Initializes handlers as a tuple
-	 * set of RegExp, handler, where the regular expression is used in matching
-	 * a Webpack asset path.
-	 *
-	 * @param {Object.<string,Function>} handlers Object keyed by tag to match,
-	 *                                            with function value returning
-	 *                                            replacement string.
-	 *
-	 * @return {void}
-	 */
-	constructor( handlers ) {
-		this.handlers = reduce( handlers, ( result, handler, key ) => {
-			const regexp = new RegExp( `\\[${ escapeRegExp( key ) }\\]`, 'gi' );
-			return [ ...result, [ regexp, handler ] ];
-		}, [] );
-	}
-
-	/**
-	 * Webpack plugin application logic.
-	 *
-	 * @param {Object} compiler Webpack compiler
-	 *
-	 * @return {void}
-	 */
-	apply( compiler ) {
-		compiler.plugin( 'compilation', ( compilation ) => {
-			compilation.mainTemplate.plugin( 'asset-path', ( path, data ) => {
-				for ( let i = 0; i < this.handlers.length; i++ ) {
-					const [ regexp, handler ] = this.handlers[ i ];
-					if ( regexp.test( path ) ) {
-						return path.replace( regexp, handler( path, data ) );
-					}
-				}
-
-				return path;
-			} );
-		} );
-	}
-}
-
 const config = {
 	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
 
@@ -167,7 +124,7 @@ const config = {
 		}, {} )
 	),
 	output: {
-		filename: '[name]/build/index.js',
+		filename: '[basename]/build/index.js',
 		path: __dirname,
 		library: [ 'wp', '[name]' ],
 		libraryTarget: 'this',
@@ -224,7 +181,19 @@ const config = {
 		} ),
 		new CustomTemplatedPathPlugin( {
 			basename( path, data ) {
-				const rawRequest = get( data, [ 'chunk', 'entryModule', 'rawRequest' ] );
+				let rawRequest;
+
+				const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
+				switch ( entryModule.type ) {
+					case 'javascript/auto':
+						rawRequest = entryModule.rawRequest;
+						break;
+
+					case 'javascript/esm':
+						rawRequest = entryModule.rootModule.rawRequest;
+						break;
+				}
+
 				if ( rawRequest ) {
 					return basename( rawRequest );
 				}