fix: Use 'main' as default render entry (#10)

* refactor: Use destructoring for constructor parameters

* feat: Allow choice of parallel and serial rendering

* fix: Add timing to render messaging

* fix: Use 'main' as default render entry

* fix: Rename parallelRender to renderConcurrency enum

Author: jahredhope

README.md

@@ -110,6 +110,28 @@ See [examples](#examples) for more details.
 
 # Options
 
+## Option: renderEntry _string_
+
+**default:** "main"
+
+The entry to use when rendering. Override when using [object syntax](https://webpack.js.org/concepts/entry-points/#object-syntax) in webpack entry.
+
+```js
+new HtmlRenderPlugin({
+  renderEntry: "myRender"
+});
+```
+
+**webpack.config.js**
+
+```
+{
+  entry: {
+    myRender: './src/myRender.js',
+  }
+}
+```
+
 ## Option: renderDirectory _string_
 
 The location to create rendered files. Defaults to the rendered assets output.
@@ -185,6 +207,18 @@ In this example, the resulting files will be
 
 - **en-au/about/us/index.html**
 
+## Option: renderConcurrency _string ("serial"|"parallel")_
+
+**default:** `"serial"`
+
+By default each file will be rendered one after the other, creating a simple sequential build log. When renders with significant asynchronous work you may want to have each render run in parallel.
+
+```
+new HtmlRenderPlugin({
+  renderConcurrency: 'parallel'
+});
+```
+
 # Examples
 
 ## Example: Basic
@@ -217,7 +251,7 @@ module.exports = [
     output: {
       filename: "client-[name]-[contenthash].js",
     }
-    entry: { client: path.resolve("src", "client.js") }
+    entry: path.resolve("src", "client.js")
   },
   {
     name: "render",
@@ -227,7 +261,7 @@ module.exports = [
       libraryTarget: "umd2",
       filename: "render-[name]-[contenthash].js",
     },
-    entry: { render: path.resolve("src", "render.js") },
+    entry: render: path.resolve("src", "render.js"),
   }),
 ]
 ```
@@ -284,7 +318,7 @@ module.exports = [
     output: {
       filename: "client-[name]-[contenthash].js",
     }
-    entry: { main: path.resolve("src", "client.js") }
+    entry: path.resolve("src", "client.js")
   },
   {
     name: "render",
@@ -294,7 +328,7 @@ module.exports = [
       libraryTarget: "umd2",
       filename: "render-[name]-[contenthash].js",
     },
-    entry: { render: path.resolve("src", "render.js") },
+    entry: path.resolve("src", "render.js"),
   }),
 ]
 ```
@@ -424,7 +458,7 @@ module.exports = ({ liveReload, mode }) => {
       },
       name: "client",
       target: "web",
-      entry: { client: clientEntry },
+      entry: clientEntry,
       plugins: [
         new ReactLoadablePlugin({
           filename: "react-loadable-manifest.json"
@@ -441,7 +475,7 @@ module.exports = ({ liveReload, mode }) => {
       },
       name: "render",
       target: "node",
-      entry: { render: routes.renderEntry }
+      entry: routes.renderEntry
     })
   ];
 };

src/index.js

@@ -7,25 +7,39 @@ const returnEmptyObject = () => ({});
 const defaultTransformFilePath = ({ route }) => route;
 
 module.exports = class HtmlRenderPlugin {
-  constructor(opts = {}) {
-    this.clientBuilding = false;
-    this.renderBuilding = false;
-    this.log = (...args) =>
-      (opts.log || console.log)(chalk.blue("HtmlRenderPlugin:"), ...args);
-    this.logError = (...args) =>
-      (opts.log || console.log)(chalk.red("🚨 HtmlRenderPlugin:"), ...args);
-    this.renderEntry = opts.renderEntry || "render";
-    this.routes = opts.routes || [""];
-    this.verbose = opts.verbose || false;
-    this.transformFilePath = opts.transformFilePath || defaultTransformFilePath;
-    this.mapStatsToParams = opts.mapStatsToParams || returnEmptyObject;
-    this.renderDirectory = opts.renderDirectory || "dist";
+  constructor({
+    log = console.log,
+    verbose = false,
+    routes = [""],
+    mapStatsToParams = returnEmptyObject,
+    renderDirectory = "dist",
+    renderConcurrency = false,
+    transformFilePath = defaultTransformFilePath,
+    renderEntry = "main"
+  } = {}) {
+    this.log = log;
+    this.mapStatsToParams = mapStatsToParams;
+    this.renderDirectory = renderDirectory;
+    this.renderEntry = renderEntry;
+    this.routes = routes;
+    this.transformFilePath = transformFilePath;
+    this.verbose = verbose;
+    this.renderConcurrency = renderConcurrency;
+
     this.onRender = this.onRender.bind(this);
+    this.logError = this.logError.bind(this);
+    this.trace = this.trace.bind(this);
   }
-  async onRender() {
+  logError(...args) {
+    this.log(chalk.red("🚨 HtmlRenderPlugin:"), ...args);
+  }
+  trace(...args) {
     if (this.verbose) {
-      this.log(`Starting render`);
+      this.log(chalk.blue("HtmlRenderPlugin:"), ...args);
     }
+  }
+  async onRender() {
+    this.trace(`Starting render`);
 
     const renderStats = this.renderCompilation.getStats();
 
@@ -37,17 +51,17 @@ module.exports = class HtmlRenderPlugin {
 
     try {
       await renderHtml({
-        routes: this.routes,
+        mapStatsToParams: this.mapStatsToParams,
+        renderConcurrency: this.renderConcurrency,
         renderCompilation: this.renderCompilation,
-        webpackStats,
-        renderStats: renderStats.toJson(),
-        transformFilePath: this.transformFilePath,
         renderCompiler: this.renderCompiler,
         renderDirectory: this.renderDirectory,
         renderEntry: this.renderEntry,
-        mapStatsToParams: this.mapStatsToParams,
-        verbose: this.verbose,
-        log: this.log
+        renderStats: renderStats.toJson(),
+        routes: this.routes,
+        trace: this.trace,
+        transformFilePath: this.transformFilePath,
+        webpackStats
       });
     } catch (error) {
       this.logError("An error occured rendering HTML", error);
@@ -92,21 +106,17 @@ module.exports = class HtmlRenderPlugin {
       childCompiler.hooks.afterEmit.tapPromise(
         hookOptions,
         async compilation => {
-          if (this.verbose) {
-            this.log(`Compiler emitted assets for ${childCompiler.name}`);
-          }
           this.clientCompilation = compilation;
           if (compilersRunning > 0 || compilersToRun > 0) {
-            if (this.verbose) {
-              this.log(
-                `Assets emitted for ${
-                  childCompiler.name
-                }. Waiting for ${compilersRunning ||
-                  compilersToRun} other compilers`
-              );
-            }
+            this.trace(
+              `Assets emitted for ${
+                childCompiler.name
+              }. Waiting for ${compilersRunning ||
+                compilersToRun} other compilers`
+            );
             return;
           }
+          this.trace(`Assets emitted for ${childCompiler.name}`);
           return this.onRender();
         }
       );

src/renderHtml.js

@@ -2,23 +2,23 @@ const path = require("path");
 const chalk = require("chalk");
 const createRenderer = require("./createRenderer");
 
+const timeSince = startTime => `${(Date.now() - startTime) / 1000}s`;
+
 module.exports = async function renderHtml({
+  mapStatsToParams,
+  renderConcurrency,
   routes,
   renderEntry,
   renderDirectory,
   renderStats,
-  webpackStats,
   renderCompiler,
   renderCompilation,
-  mapStatsToParams,
+  trace,
   transformFilePath,
-  verbose,
-  log
+  webpackStats
 }) {
   const renderFile = renderStats.assetsByChunkName[renderEntry];
-  if (verbose) {
-    log("Render file:", { renderFile });
-  }
+  trace("Render file:", { renderFile });
   if (!renderFile) {
     throw new Error(
       `Unable to find renderEntry ${renderEntry} in assets ${Object.keys(
@@ -36,9 +36,7 @@ module.exports = async function renderHtml({
       `Unable to find render function. File ${renderFile}. Recieved ${typeof renderFunc}.`
     );
   }
-  if (verbose) {
-    log(`Renderer created`);
-  }
+  trace(`Renderer created`);
 
   async function emitFile(dir, content) {
     await new Promise((resolve, reject) =>
@@ -61,11 +59,10 @@ module.exports = async function renderHtml({
   }
 
   async function render(routeValue) {
+    const startRenderTime = Date.now();
     const routeData =
       typeof routeValue === "string" ? { route: routeValue } : routeValue;
-    if (verbose) {
-      log(`Starting render`, routeData);
-    }
+    trace(`Starting render`, routeData);
     if (typeof routeData.route !== "string") {
       throw new Error(
         `Missing route in ${JSON.stringify(
@@ -76,9 +73,7 @@ module.exports = async function renderHtml({
     const relativeFilePath = transformFilePath(routeData);
     const includesHtmlInFilePath = relativeFilePath.substr(-5) === ".html";
     if (!path.isAbsolute(renderDirectory)) {
-      console.log({ renderDirectory });
       renderDirectory = path.resolve(renderDirectory);
-      console.log({ renderDirectory });
     }
     const newFilePath = includesHtmlInFilePath
       ? path.join(renderDirectory, relativeFilePath)
@@ -111,9 +106,14 @@ module.exports = async function renderHtml({
     }
 
     await emitFile(newFilePath, renderResult);
-    if (verbose) {
-      log(`Successfully created asset ${newFilePath}`);
-    }
+    trace(
+      `Successfully created ${newFilePath} (${timeSince(startRenderTime)})`
+    );
+  }
+  if (renderConcurrency === "parallel") {
+    return Promise.all(routes.map(render));
+  }
+  for (const route of routes) {
+    await render(route);
   }
-  return Promise.all(routes.map(render));
 };

tests/test-cases/async/__snapshots__/async.test.js.snap

@@ -14,3 +14,44 @@ Object {
 </html>",
 }
 `;
+
+exports[`Render asyncronously should render a multiple files at once 1`] = `
+Object {
+  "pageA": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageA\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "pageB": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageB\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+  "pageC": Object {
+    "index.html": "<html>
+<body>
+  Rendered with:&nbsp;
+  <code>[
+    {
+      \\"route\\": \\"pageC\\"
+    }
+  ]</code>
+</body>
+</html>",
+  },
+}
+`;

tests/test-cases/async/async.test.js

@@ -23,4 +23,25 @@ describe("Render asyncronously", () => {
       done();
     });
   });
+  it("should render a multiple files at once", async done => {
+    const compiler = webpack(config);
+
+    const memoryFs = new MemoryFS();
+    compiler.outputFileSystem = memoryFs;
+
+    compiler.apply(
+      new HtmlRenderPlugin({
+        parallelRender: true,
+        routes: ["pageA", "pageB", "pageC"],
+        renderDirectory
+      })
+    );
+
+    compiler.run(error => {
+      expect(error).toBe(null);
+      const contents = getDirContentsSync(renderDirectory, { fs: memoryFs });
+      expect(contents).toMatchSnapshot();
+      done();
+    });
+  });
 });

tests/test-cases/async/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = [
     name: "client",
     target: "web",
     mode: "production",
-    entry: { client: paths.clientEntry },
+    entry: paths.clientEntry,
     output: {
       filename: "client-[name]-[contenthash].js"
     }
@@ -21,7 +21,7 @@ module.exports = [
     name: "render",
     target: "node",
     mode: "production",
-    entry: { render: paths.renderEntry },
+    entry: paths.renderEntry,
     output: {
       libraryExport: "default",
       library: "static",

tests/test-cases/basic/basic.test.js

@@ -64,6 +64,7 @@ describe("Render HTML", () => {
       done();
     });
   });
+
   it("should render routes with extra information", async done => {
     const compiler = webpack(config);