Dashboard Build: Use StaticSiteGeneratorPlugin to build Static HTML

_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,24 +12,30 @@ 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 />
 		</Provider>
 	</div>
 );
 
-window.noscriptNotice = Server.renderToStaticMarkup(
+const noscriptNotice = renderToStaticMarkup(
 	<Provider store={ store }>
 		<noscript>
 			<StaticWarning />
 		</noscript>
 	</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,
+} );

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": {

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,42 +26,26 @@ export const watch = function() {
 				log( error );
 				return;
 			}
-			buildStatic( 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 );
-	}
-}

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: {},
+								},
+							},
+						},
+					},
+				},
+			} ),
+		],
+	},
+];