Fix development and productions builds

- Built JS files to the `js/dist` folder to match the location in the zip
- Separate entry for the externals that could self-reference
- Improve code style in the webpack config

.gitignore

@@ -87,5 +87,6 @@ test.sh
 ############
 /languages/
 /js/vendor/*
+/js/dist/*
 /css/dist/*
 /packages/*/dist

Gruntfile.js

@@ -35,7 +35,7 @@ module.exports = function( grunt ) {
 			grunt: "config/grunt/",
 			images: "images/",
 			js: "packages/js/src/",
-			jsDist: "packages/js/dist/",
+			jsDist: "js/dist/",
 			languages: "languages/",
 			logs: "logs/",
 			svnCheckoutDir: ".wordpress-svn",

config/grunt/task-config/copy.js

@@ -111,6 +111,7 @@ module.exports = {
 					"frontend/**",
 					"images/**",
 					"inc/**",
+					"<%= paths.jsDist %>/**/*.js",
 					"languages/**",
 					"src/**",
 					"lib/**",
@@ -133,12 +134,6 @@ module.exports = {
 				],
 				dest: "<%= files.artifact %>",
 			},
-			{
-				expand: true,
-				cwd: "packages",
-				src: [ "js/dist/**/*.js" ],
-				dest: "<%= files.artifact %>",
-			},
 		],
 	},
 };

config/grunt/task-config/webpack.js

@@ -1,4 +1,3 @@
-/* global require */
 const webpackConfig = require( "../../webpack/webpack.config" );
 
 module.exports = ( grunt ) => {

config/webpack/externals.js

@@ -1,19 +1,17 @@
-const {
-	camelCaseDash,
-} = require( "@wordpress/dependency-extraction-webpack-plugin/lib/util" );
+const { camelCaseDash } = require( "@wordpress/dependency-extraction-webpack-plugin/lib/util" );
 
 const externals = {
 	// This is necessary for Gutenberg to work.
 	tinymce: "window.tinymce",
 
-	yoastseo: "window.yoast.analysis",
-
 	// General dependencies that we have.
 	jed: "window.yoast.jed",
 	lodash: "window.lodash",
 	"lodash-es": "window.lodash",
 	react: "React",
 	"react-dom": "ReactDOM",
+
+	// Possible self-reference due to the exposing in `src/externals`.
 	redux: "window.yoast.redux",
 	"react-redux": "window.yoast.reactRedux",
 	"styled-components": "window.yoast.styledComponents",
@@ -60,24 +58,23 @@ const yoastPackages = Object.keys( dependencies )
 	.filter(
 		( packageName ) =>
 			packageName.startsWith( YOAST_PACKAGE_NAMESPACE ) ||
-			legacyYoastPackages.includes( packageName )
+			legacyYoastPackages.includes( packageName ),
 	);
 
 /**
- * Convert packages to externals configuration.
+ * Convert Yoast packages to externals configuration.
  */
-// Yoast Packages.
 const yoastExternals = yoastPackages.reduce( ( memo, packageName ) => {
-	let useablePackageName = packageName.replace( YOAST_PACKAGE_NAMESPACE, "" );
+	let usablePackageName = packageName.replace( YOAST_PACKAGE_NAMESPACE, "" );
 
 	// Handle the difference between yoast-components and @yoast/components.
-	useablePackageName = ( useablePackageName === "components" ) ? "components-new" : useablePackageName;
-	useablePackageName = ( useablePackageName === "yoast-components" ) ? "components" : useablePackageName;
+	usablePackageName = ( usablePackageName === "components" ) ? "components-new" : usablePackageName;
+	usablePackageName = ( usablePackageName === "yoast-components" ) ? "components" : usablePackageName;
 
 	// Handle yoastseo as analysis reference.
-	useablePackageName = ( useablePackageName === "yoastseo" ) ? "analysis" : useablePackageName;
+	usablePackageName = ( usablePackageName === "yoastseo" ) ? "analysis" : usablePackageName;
 
-	memo[ packageName ] = `window.yoast.${ camelCaseDash( useablePackageName ) }`;
+	memo[ packageName ] = `window.yoast.${ camelCaseDash( usablePackageName ) }`;
 	return memo;
 }, {} );
 

config/webpack/paths.js

@@ -1,7 +1,6 @@
-/* global require, module */
 const path = require( "path" );
 
-const jsDistPath = path.resolve( "packages", "js", "dist" );
+const jsDistPath = path.resolve( "js", "dist" );
 const jsSrcPath = path.resolve( "packages", "js", "src" );
 const cssDistPath = path.resolve( "css", "dist" );
 
@@ -18,7 +17,7 @@ const entry = {
 	"dynamic-blocks": "./dynamic-blocks.js",
 	"edit-page": "./edit-page.js",
 	"editor-modules": "./editor-modules.js",
-	"elementor": "./elementor.js",
+	elementor: "./elementor.js",
 	"filter-explanation": "./filter-explanation.js",
 	"help-scout-beacon": "./help-scout-beacon.js",
 	indexation: "./indexation.js",

config/webpack/webpack.config.js

@@ -1,14 +1,10 @@
 const CaseSensitivePathsPlugin = require( "case-sensitive-paths-webpack-plugin" );
+const { mapValues, isString } = require( "lodash" );
 const path = require( "path" );
-const mapValues = require( "lodash/mapValues" );
-const isString = require( "lodash/isString" );
-
-const paths = require( "./paths" );
-const BundleAnalyzerPlugin = require( "webpack-bundle-analyzer" ).BundleAnalyzerPlugin;
 const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );
-
-const { externals, yoastExternals, wordpressExternals } = require( './externals' );
-const { YOAST_PACKAGE_NAMESPACE } = require( './externals' );
+const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" );
+const { externals, yoastExternals, wordpressExternals, YOAST_PACKAGE_NAMESPACE } = require( "./externals" );
+const paths = require( "./paths" );
 
 const root = path.join( __dirname, "../../" );
 const mainEntry = mapValues( paths.entry, entry => {
@@ -107,11 +103,9 @@ module.exports = function( env ) {
 
 	const plugins = [
 		new CaseSensitivePathsPlugin(),
-		new MiniCssExtractPlugin(
-			{
-				filename: "css/dist/monorepo-" + pluginVersionSlug + ".css",
-			}
-		),
+		new MiniCssExtractPlugin( {
+			filename: "css/dist/monorepo-" + pluginVersionSlug + ".css",
+		} ),
 	];
 
 	const base = {
@@ -166,42 +160,57 @@ module.exports = function( env ) {
 				},
 			],
 		},
-		externals,
 		optimization: {
 			runtimeChunk: {
 				name: "commons",
 			},
 		},
 	};
 
+	const externalsAvoidingSelfReference = { ...externals };
+	// Remove possible self-referencing externals.
+	delete externalsAvoidingSelfReference[ "draft-js" ];
+	delete externalsAvoidingSelfReference.jed;
+	delete externalsAvoidingSelfReference.redux;
+	delete externalsAvoidingSelfReference[ "react-redux" ];
+	delete externalsAvoidingSelfReference[ "styled-components" ];
+
 	const config = [
 		{
 			...base,
 			entry: {
 				...mainEntry,
-				"styled-components": path.join( paths.jsSrc, "externals/styled-components.js" ),
-				redux: path.join( paths.jsSrc, "externals/redux.js" ),
-				jed: path.join( paths.jsSrc, "externals/jed.js" ),
-				"draft-js": path.join( paths.jsSrc, "externals/draft-js.js" ),
 			},
 			externals: {
 				...externals,
 				...yoastExternals,
 				...wordpressExternals,
 			},
-			plugins: addBundleAnalyzer( [
-				...plugins,
-			] ),
+			plugins: addBundleAnalyzer( plugins ),
 		},
 
-		// Config for files that should not use any externals at all.
+		// Externals that should avoid self-reference.
 		{
 			...base,
-			output: {
-				path: paths.jsDist,
-				filename: "[name]-" + pluginVersionSlug + ".js",
-				jsonpFunction: "yoastWebpackJsonp",
+			entry: {
+				"draft-js": path.join( paths.jsSrc, "externals/draft-js.js" ),
+				jed: path.join( paths.jsSrc, "externals/jed.js" ),
+				redux: path.join( paths.jsSrc, "externals/redux.js" ),
+				"styled-components": path.join( paths.jsSrc, "externals/styled-components.js" ),
+			},
+			externals: {
+				...externalsAvoidingSelfReference,
+				wordpressExternals,
+			},
+			plugins: addBundleAnalyzer( plugins ),
+			optimization: {
+				runtimeChunk: false,
 			},
+		},
+
+		// Config for files that should not use any externals at all.
+		{
+			...base,
 			entry: {
 				"babel-polyfill": path.join( paths.jsSrc, "externals/babel-polyfill.js" ),
 			},
@@ -213,12 +222,6 @@ module.exports = function( env ) {
 		// Config for the analysis web worker.
 		{
 			...base,
-			externals: {},
-			output: {
-				path: paths.jsDist,
-				filename: outputFilename,
-				jsonpFunction: "yoastWebpackJsonp",
-			},
 			entry: {
 				"analysis-worker": path.join( paths.jsSrc, "analysis-worker.js" ),
 				analysis: path.join( paths.jsSrc, "externals/analysis.js" ),
@@ -247,35 +250,33 @@ module.exports = function( env ) {
 	 *
 	 * These all need to have all -other- externals configured, but not their self.
 	 */
-	for (const [key, value] of Object.entries(yoastExternals)) {
-		const yoastExternalsExcludingCurrent = Object.assign({}, yoastExternals);
+	for ( const [ key ] of Object.entries( yoastExternals ) ) {
+		const yoastExternalsExcludingCurrent = Object.assign( {}, yoastExternals );
 		// Remove the current external to avoid self-reference.
-		delete yoastExternalsExcludingCurrent[key];
+		delete yoastExternalsExcludingCurrent[ key ];
 
-		const packageName = key.replace( YOAST_PACKAGE_NAMESPACE, '' );
+		const packageName = key.replace( YOAST_PACKAGE_NAMESPACE, "" );
 
-		config.push({
+		config.push( {
 			...base,
 			entry: {
-				[packageName]: path.join( paths.jsSrc, "externals/yoast/" + packageName + ".js" ),
+				[ packageName ]: path.join( paths.jsSrc, "externals/yoast/" + packageName + ".js" ),
 			},
 			output: {
 				path: path.resolve(),
-				filename: "packages/js/dist/yoast/[name]-" + pluginVersionSlug + ".js",
+				filename: "js/dist/yoast/[name]-" + pluginVersionSlug + ".js",
 				jsonpFunction: "yoastWebpackJsonp",
 			},
 			externals: {
 				...externals,
 				...yoastExternalsExcludingCurrent,
 				...wordpressExternals,
 			},
-			plugins: addBundleAnalyzer([
-				...plugins,
-			]),
+			plugins: addBundleAnalyzer( plugins ),
 			optimization: {
 				runtimeChunk: false,
 			},
-		});
+		} );
 	}
 
 	if ( env.environment === "development" ) {