From 2722d865506a65d90e248b8c1538f06ee7c8e9c6 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Wed, 15 May 2019 15:13:39 +0200
Subject: [PATCH] Dashboard Build: Use StaticSiteGeneratorPlugin to build
 Static HTML

---
 _inc/client/static.jsx |  14 +++--
 package.json           |   1 +
 tools/builder/react.js |  97 +++--------------------------------
 webpack.config.js      |  52 +++++++++++++++----
 yarn.lock              | 114 +++++++++++++++++++++++++++++++++++++++--
 5 files changed, 172 insertions(+), 106 deletions(-)

diff --git a/_inc/client/static.jsx b/_inc/client/static.jsx
index 7740e8d08ef53..e1a571d2060bf 100644
--- a/_inc/client/static.jsx
+++ b/_inc/client/static.jsx
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import Server from 'react-dom/server';
 import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
 /**
@@ -12,7 +12,7 @@ import store from 'state/redux-store';
 import StaticMain from 'static-main';
 import StaticWarning from 'components/jetpack-notices/static-warning';
 
-window.staticHtml = Server.renderToStaticMarkup(
+const staticHtml = renderToStaticMarkup(
 	<div>
 		<Provider store={ store }>
 			<StaticMain />
@@ -20,7 +20,7 @@ window.staticHtml = Server.renderToStaticMarkup(
 	</div>
 );
 
-window.noscriptNotice = Server.renderToStaticMarkup(
+const noscriptNotice = renderToStaticMarkup(
 	<Provider store={ store }>
 		<noscript>
 			<StaticWarning />
@@ -28,8 +28,14 @@ window.noscriptNotice = Server.renderToStaticMarkup(
 	</Provider>
 );
 
-window.versionNotice = Server.renderToStaticMarkup(
+const versionNotice = renderToStaticMarkup(
 	<Provider store={ store }>
 		<StaticWarning />
 	</Provider>
 );
+
+export default () => ( {
+	'static.html': staticHtml,
+	'static-noscript-notice.html': noscriptNotice,
+	'static-version-notice.html': versionNotice,
+} );
diff --git a/package.json b/package.json
index 29307eca968b5..69796379bb8e1 100644
--- a/package.json
+++ b/package.json
@@ -177,6 +177,7 @@
 		"react-test-renderer": "16.8.6",
 		"sinon": "7.3.1",
 		"sinon-chai": "3.3.0",
+		"static-site-generator-webpack-plugin": "3.4.2",
 		"webpack-cli": "3.3.2"
 	},
 	"engines": {
diff --git a/tools/builder/react.js b/tools/builder/react.js
index 1aabdbd5c8511..8e2692f9d2a44 100644
--- a/tools/builder/react.js
+++ b/tools/builder/react.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import banner from 'gulp-banner';
-import fs from 'fs';
 import log from 'fancy-log';
 import gulp from 'gulp';
 import gulpif from 'gulp-if';
@@ -11,9 +10,7 @@ import PluginError from 'plugin-error';
 import rename from 'gulp-rename';
 import saveLicense from 'uglify-save-license';
 import sourcemaps from 'gulp-sourcemaps';
-import tap from 'gulp-tap';
 import webpack from 'webpack';
-import { JSDOM } from 'jsdom';
 
 function getWebpackConfig() {
 	return require( './../../webpack.config.js' );
@@ -29,7 +26,6 @@ export const watch = function() {
 				log( error );
 				return;
 			}
-			buildStatic( function() {} );
 		} )
 	);
 };
@@ -37,34 +33,19 @@ export const watch = function() {
 gulp.task( 'react:master', function( done ) {
 	const config = getWebpackConfig();
 
-	if ( 'production' !== process.env.NODE_ENV ) {
-		config.plugins.push(
-			new webpack.LoaderOptionsPlugin( {
-				debug: true,
-			} )
-		);
-	}
-
-	return webpack( config ).run(
-		onBuild.bind( this, function( error ) {
-			if ( error ) {
-				done( error );
-				return;
-			}
-
-			buildStatic( done );
-		} )
-	);
+	return webpack( config ).run( onBuild.bind( this, done ) );
 } );
 
 function onBuild( done, err, stats ) {
 	// Webpack doesn't populate err in case the build fails
 	// @see https://github.com/webpack/webpack/issues/708
-	if ( stats.compilation.errors && stats.compilation.errors.length ) {
-		if ( done ) {
-			done( new PluginError( 'webpack', stats.compilation.errors[ 0 ] ) );
-			return; // Otherwise gulp complains about done called twice
-		}
+	const erroringStats = stats.stats.find(
+		( { compilation } ) => compilation.errors && compilation.errors.length
+	);
+
+	if ( erroringStats && done ) {
+		done( new PluginError( 'webpack', erroringStats.compilation.errors[ 0 ] ) );
+		return; // Otherwise gulp complains about done called twice
 	}
 
 	log(
@@ -161,65 +142,3 @@ function onBuild( done, err, stats ) {
 }
 
 export const build = gulp.series( 'react:master' );
-
-function buildStatic( done ) {
-	log( 'Building static HTML from built JS…' );
-	const { window } = new JSDOM();
-	const { document } = new JSDOM( '' ).window;
-
-	global.window = window;
-	global.document = document;
-	global.navigator = window.navigator;
-	global.React = require( 'react' );
-	global.ReactDOM = require( 'react-dom' );
-	global.lodash = require( 'lodash' );
-	global.moment = require( 'moment' );
-
-	window.Initial_State = {
-		dismissedNotices: [],
-		connectionStatus: {
-			devMode: {
-				isActive: false,
-			},
-		},
-		userData: {
-			currentUser: {
-				permissions: {},
-			},
-		},
-	};
-
-	try {
-		// normalize path
-		const path = require.resolve( __dirname + '/../../_inc/build/static.js' );
-
-		// Making sure NodeJS requires this file every time this is called
-		delete require.cache[ path ];
-
-		// Will throw when `path` does not exist, skipping file generation below that depends on `path`.
-		require( path );
-
-		gulp
-			.src( [ '_inc/build/static*' ] )
-			.pipe(
-				tap( function( file ) {
-					fs.unlinkSync( file.path );
-				} )
-			)
-			.on( 'end', function() {
-				fs.writeFileSync( __dirname + '/../../_inc/build/static.html', window.staticHtml );
-				fs.writeFileSync(
-					__dirname + '/../../_inc/build/static-noscript-notice.html',
-					window.noscriptNotice
-				);
-				fs.writeFileSync(
-					__dirname + '/../../_inc/build/static-version-notice.html',
-					window.versionNotice
-				);
-
-				done();
-			} );
-	} catch ( error ) {
-		done( error );
-	}
-}
diff --git a/webpack.config.js b/webpack.config.js
index 381025140a6e8..3d05e24852b06 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,20 +1,14 @@
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const StaticSiteGeneratorPlugin = require( 'static-site-generator-webpack-plugin' );
 const WordPressExternalDependenciesPlugin = require( '@automattic/wordpress-external-dependencies-plugin' );
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const devMode = process.env.NODE_ENV !== 'production';
 
-const webpackConfig = {
+const sharedWebpackConfig = {
 	mode: devMode ? 'development' : 'production',
-	// Entry points point to the javascript module
-	// that is used to generate the script file.
-	// The key is used as the name of the script.
-	entry: {
-		admin: path.join( __dirname, './_inc/client/admin.js' ),
-		static: path.join( __dirname, './_inc/client/static.jsx' ),
-	},
 	output: {
 		path: path.join( __dirname, '_inc/build' ),
 		filename: '[name].js',
@@ -72,9 +66,47 @@ const webpackConfig = {
 			// both options are optional
 			filename: '[name].dops-style.css',
 		} ),
-		new WordPressExternalDependenciesPlugin(),
 	],
 	devtool: devMode ? 'source-map' : false,
 };
 
-module.exports = webpackConfig;
+module.exports = [
+	{
+		...sharedWebpackConfig,
+		// Entry points point to the javascript module
+		// that is used to generate the script file.
+		// The key is used as the name of the script.
+		entry: { admin: path.join( __dirname, './_inc/client/admin.js' ) },
+		plugins: [ ...sharedWebpackConfig.plugins, new WordPressExternalDependenciesPlugin() ],
+	},
+	{
+		...sharedWebpackConfig,
+		// Entry points point to the javascript module
+		// that is used to generate the script file.
+		// The key is used as the name of the script.
+		entry: { static: path.join( __dirname, './_inc/client/static.jsx' ) },
+		output: { ...sharedWebpackConfig.output, libraryTarget: 'commonjs2' },
+		plugins: [
+			...sharedWebpackConfig.plugins,
+			new StaticSiteGeneratorPlugin( {
+				globals: {
+					window: {
+						Initial_State: {
+							dismissedNotices: [],
+							connectionStatus: {
+								devMode: {
+									isActive: false,
+								},
+							},
+							userData: {
+								currentUser: {
+									permissions: {},
+								},
+							},
+						},
+					},
+				},
+			} ),
+		],
+	},
+];
diff --git a/yarn.lock b/yarn.lock
index 7a86db14484ad..6d64ce31d207a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2064,7 +2064,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.4.1, bluebird@^3.5.3:
+bluebird@^3.0.5, bluebird@^3.4.1, bluebird@^3.5.3:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
 
@@ -2435,6 +2435,28 @@ check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
 
+cheerio@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
+  integrity sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash.assignin "^4.0.9"
+    lodash.bind "^4.1.4"
+    lodash.defaults "^4.0.1"
+    lodash.filter "^4.4.0"
+    lodash.flatten "^4.2.0"
+    lodash.foreach "^4.3.0"
+    lodash.map "^4.4.0"
+    lodash.merge "^4.4.0"
+    lodash.pick "^4.2.1"
+    lodash.reduce "^4.4.0"
+    lodash.reject "^4.4.0"
+    lodash.some "^4.4.0"
+
 cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
@@ -3914,6 +3936,13 @@ esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
+eval@^0.1.0:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/eval/-/eval-0.1.3.tgz#051deb8fa00580f452572580e3147f5d4a9bf5a5"
+  integrity sha512-lDBa3hl9YynB+3J7aNPaajAapr+7ZiAylqFeUmx/r9s7I0tkkUJFLw2CQ2oMRYGg/rL7g4IYkZenbKaQGKPnGQ==
+  dependencies:
+    require-like ">= 0.1.1"
+
 event-emitter@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -6558,10 +6587,25 @@ lodash.assign@^4.0.8, lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
+lodash.assignin@^4.0.9:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
+  integrity sha1-uo31+4QesKPoBEIysOJjqNxqKKI=
+
+lodash.bind@^4.1.4:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
+  integrity sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=
+
 lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.defaults@^4.0.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
+
 lodash.defaults@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-2.4.1.tgz#a7e8885f05e68851144b6e12a8f3678026bc4c54"
@@ -6587,11 +6631,16 @@ lodash.escape@~2.4.1:
     lodash._reunescapedhtml "~2.4.1"
     lodash.keys "~2.4.1"
 
+lodash.filter@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
+  integrity sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4=
+
 lodash.find@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
 
-lodash.flatten@^4.4.0:
+lodash.flatten@^4.2.0, lodash.flatten@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
 
@@ -6599,6 +6648,11 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.foreach@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
+  integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -6669,6 +6723,11 @@ lodash.keys@~2.4.1:
     lodash._shimkeys "~2.4.1"
     lodash.isobject "~2.4.1"
 
+lodash.map@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
+  integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
+
 lodash.mapvalues@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
@@ -6689,6 +6748,21 @@ lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
 
+lodash.pick@^4.2.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
+  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
+
+lodash.reduce@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
+  integrity sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs=
+
+lodash.reject@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415"
+  integrity sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU=
+
 lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
@@ -6697,6 +6771,11 @@ lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
 
+lodash.some@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
+  integrity sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -9166,6 +9245,11 @@ require-from-string@^2.0.1, require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
 
+"require-like@>= 0.1.1":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/require-like/-/require-like-0.1.2.tgz#ad6f30c13becd797010c468afa775c0c0a6b47fa"
+  integrity sha1-rW8wwTvs15cBDEaK+ndcDAprR/o=
+
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
@@ -9592,6 +9676,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+source-list-map@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
+  integrity sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=
+
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -9624,7 +9713,7 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -9731,6 +9820,17 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+static-site-generator-webpack-plugin@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-3.4.2.tgz#ad9fd0a4fb8b6f439a7a66018320b459bdb6d916"
+  integrity sha512-39Kn+fZDVjolLYuX5y1rDvksJIW0QEUaEC/AVO/UewNXxGzoSQI1UYnRsL+ocAcN5Yti6d6rJgEL0qZ5tNXfdw==
+  dependencies:
+    bluebird "^3.0.5"
+    cheerio "^0.22.0"
+    eval "^0.1.0"
+    url "^0.11.0"
+    webpack-sources "^0.2.0"
+
 stdout-stream@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
@@ -10725,6 +10825,14 @@ webpack-rtl-plugin@1.8.0:
     rtlcss "^2.0.4"
     webpack-sources "^1.3.0"
 
+webpack-sources@^0.2.0:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
+  integrity sha1-F8Yr+vE8cH+dAsR54Nzd6DgGl/s=
+  dependencies:
+    source-list-map "^1.1.1"
+    source-map "~0.5.3"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"