Update html-render-webpack-plugin

.changeset/tricky-items-lick.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Update `html-render-webpack-plugin` to v2

config/webpack/plugins/createHtmlRenderPlugin.js

@@ -12,9 +12,7 @@ const {
   publicPath,
 } = require('../../../context');
 
-const getClientStats = (webpackStats) => {
-  return webpackStats.toJson().children.find(({ name }) => name === 'client');
-};
+const getClientStats = (webpackStats) => webpackStats.toJson();
 
 const getCachedClientStats = memoize(getClientStats);
 
@@ -66,9 +64,9 @@ module.exports = () => {
   return new HtmlRenderPlugin({
     renderDirectory: paths.target,
     routes: isStartScript ? getStartRoutes() : getBuildRoutes(),
+    skipAssets: isStartScript,
     transformFilePath: transformOutputPath,
     mapStatsToParams,
-    verbose: false,
     extraGlobals: {
       // This fixes an issue where one of treats deps (@hapi/joek)
       // accesses Buffer globally. Not great...

config/webpack/webpack.config.js

@@ -7,7 +7,6 @@ const LoadablePlugin = require('@loadable/webpack-plugin');
 
 const args = require('../args');
 const config = require('../../context');
-const createHtmlRenderPlugin = require('./plugins/createHtmlRenderPlugin');
 const { bundleAnalyzerPlugin } = require('./plugins/bundleAnalyzer');
 const SkuWebpackPlugin = require('./plugins/sku-webpack-plugin');
 
@@ -36,22 +35,11 @@ const makeWebpackConfig = ({
   isIntegration = false,
   port = 0,
   isDevServer = false,
+  htmlRenderPlugin,
 } = {}) => {
   const isProductionBuild = process.env.NODE_ENV === 'production';
 
   const webpackMode = isProductionBuild ? 'production' : 'development';
-  const shouldRenderHtml = () => {
-    if (isIntegration) {
-      return false;
-    }
-    if (isLibrary) {
-      return isDevServer;
-    }
-    return true;
-  };
-  const renderHtml = shouldRenderHtml();
-  const htmlRenderPlugin =
-    !isDevServer && renderHtml ? createHtmlRenderPlugin() : null;
 
   const envVars = lodash
     .chain(env)
@@ -207,9 +195,9 @@ const makeWebpackConfig = ({
         ],
       },
       plugins: [
-        ...(htmlRenderPlugin ? [htmlRenderPlugin] : []),
-        ...(renderHtml
+        ...(htmlRenderPlugin
           ? [
+              htmlRenderPlugin.statsCollectorPlugin,
               new LoadablePlugin({
                 writeToDisk: false,
                 outputAsset: false,
@@ -282,7 +270,7 @@ const makeWebpackConfig = ({
         ],
       },
       plugins: [
-        ...(htmlRenderPlugin ? [htmlRenderPlugin.render()] : []),
+        ...(htmlRenderPlugin ? [htmlRenderPlugin.rendererPlugin] : []),
         new webpack.DefinePlugin(envVars),
         new webpack.DefinePlugin({
           SKU_LIBRARY_NAME: JSON.stringify(libraryName),

package.json

@@ -121,7 +121,7 @@
     "fs-extra": "^9.0.0",
     "get-port": "^5.0.0",
     "hostile": "^1.3.2",
-    "html-render-webpack-plugin": "1.2",
+    "html-render-webpack-plugin": "^2.0.2",
     "identity-obj-proxy": "^3.0.0",
     "indent-string": "^4.0.0",
     "inquirer": "^7.0.0",

scripts/build.js

@@ -11,13 +11,21 @@ const {
   cleanRenderJs,
 } = require('../lib/buildFileUtils');
 const { run } = require('../lib/runWebpack');
+const createHtmlRenderPlugin = require('../config/webpack/plugins/createHtmlRenderPlugin');
 const makeWebpackConfig = require('../config/webpack/webpack.config');
+const { isLibrary } = require('../context');
 
 (async () => {
   try {
     await ensureTargetDirectory();
     await cleanTargetDirectory();
-    await run(webpack(makeWebpackConfig()));
+    await run(
+      webpack(
+        makeWebpackConfig({
+          htmlRenderPlugin: !isLibrary ? createHtmlRenderPlugin() : undefined,
+        }),
+      ),
+    );
     await cleanRenderJs();
     await copyPublicFiles();
     console.log(green('Sku build complete!'));

scripts/start.js

@@ -7,7 +7,6 @@ const exceptionFormatter = require('exception-formatter');
 const { pathToRegexp } = require('path-to-regexp');
 
 const { checkHosts, getAppHosts } = require('../lib/hosts');
-const createRenderProvider = require('../lib/staticRenderer');
 const allocatePort = require('../lib/allocatePort');
 const openBrowser = require('../lib/openBrowser');
 const {
@@ -19,6 +18,7 @@ const {
   environments,
   isLibrary,
 } = require('../context');
+const createHtmlRenderPlugin = require('../config/webpack/plugins/createHtmlRenderPlugin');
 const makeWebpackConfig = require('../config/webpack/webpack.config');
 
 const localhost = '0.0.0.0';
@@ -29,29 +29,20 @@ const localhost = '0.0.0.0';
     host: localhost,
   });
 
+  const htmlRenderPlugin = createHtmlRenderPlugin();
+
   const config = makeWebpackConfig({
     port: availablePort,
     isDevServer: true,
+    htmlRenderPlugin,
   });
 
   const parentCompiler = webpack(config);
 
-  const clientCompiler = parentCompiler.compilers.find(
-    (c) => c.name === 'client',
-  );
-  const renderCompiler = parentCompiler.compilers.find(
-    (c) => c.name === 'render',
-  );
-
   await checkHosts();
 
   const appHosts = getAppHosts();
 
-  const { renderWhenReady } = createRenderProvider({
-    clientCompiler,
-    renderCompiler,
-  });
-
   const getSiteForHost = (hostname) => {
     if (sites.length === 0) {
       return undefined;
@@ -71,7 +62,6 @@ const localhost = '0.0.0.0';
     allowedHosts: appHosts,
     serveIndex: false,
     after: (app) => {
-      // eslint-disable-next-line consistent-return
       app.get('*', (req, res, next) => {
         const matchingRoute = routes.find(({ route }) =>
           pathToRegexp(route).exec(req.path),
@@ -81,37 +71,33 @@ const localhost = '0.0.0.0';
           return next();
         }
 
-        renderWhenReady(async ({ renderer, webpackStats }) => {
-          try {
-            const html = await renderer({
-              webpackStats,
-              route: matchingRoute.route,
-              routeName: matchingRoute.name,
-              site: getSiteForHost(req.hostname),
-              environment:
-                environments.length > 0 ? environments[0] : undefined,
-            });
-
-            res.send(html);
-          } catch (err) {
-            // Library mode does not have "devServerOnly" entry as it is a UMD
-            const devServerAssets = !isLibrary
-              ? webpackStats.entrypoints.devServerOnly.assets
-              : [];
-
-            const devServerScripts = devServerAssets.map(
-              (asset) => `<script src="/${asset}"></script>`,
-            );
+        htmlRenderPlugin
+          .renderWhenReady({
+            route: matchingRoute.route,
+            routeName: matchingRoute.name,
+            site: getSiteForHost(req.hostname),
+            environment: environments.length > 0 ? environments[0] : undefined,
+          })
+          .then((html) => res.send(html))
+          .catch((renderError) => {
+            let devServerScripts = [];
+
+            if (renderError.webpackStats && !isLibrary) {
+              const webpackStats = renderError.webpackStats.toJson();
+
+              devServerScripts = webpackStats.entrypoints.devServerOnly.assets.map(
+                (asset) => `<script src="/${asset}"></script>`,
+              );
+            }
 
             res.status(500).send(
-              exceptionFormatter(err, {
+              exceptionFormatter(renderError, {
                 format: 'html',
                 inlineStyle: true,
                 basepath: 'webpack://static/./',
               }).concat(...devServerScripts),
             );
-          }
-        });
+          });
       });
     },
   });

yarn.lock

@@ -7699,12 +7699,12 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
-html-render-webpack-plugin@1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/html-render-webpack-plugin/-/html-render-webpack-plugin-1.2.0.tgz#79fde5d36bc6727e7299ff7dcbe1da76f9e39430"
-  integrity sha512-CzEI2ZxxdatoSl/ue4nhG0lcOaEE5Q7xxo7JVNliRUycyNn8TbU8DCGdKLGCGWmTmFOj92pqlMuxTHSVQf6SRA==
+html-render-webpack-plugin@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/html-render-webpack-plugin/-/html-render-webpack-plugin-2.0.3.tgz#3338481e4212bad96905b1b0c73597a369491b1c"
+  integrity sha512-M827QpfzrHGsGGx3gp7ol+GDXRdH9gR3E8Y8gdqB5TEN3Jnp75V6Ww652I1KqO0/DzdqdUPGWUCmjEnbrGtEkw==
   dependencies:
-    chalk "^2.4.2"
+    chalk "^3.0.0"
     eval "^0.1.4"
 
 html-webpack-plugin@^3.2.0: