feat(gatsby): decouple html activities (#28648)

Author: wardpeet

packages/gatsby/src/commands/build-html.ts

@@ -88,7 +88,7 @@ export const buildRenderer = async (
   return doBuildRenderer(program, config, stage)
 }
 
-const deleteRenderer = async (rendererPath: string): Promise<void> => {
+export const deleteRenderer = async (rendererPath: string): Promise<void> => {
   try {
     await fs.remove(rendererPath)
     await fs.remove(`${rendererPath}.map`)
@@ -143,7 +143,7 @@ class BuildHTMLError extends Error {
   }
 }
 
-const doBuildPages = async (
+export const doBuildPages = async (
   rendererPath: string,
   pagePaths: Array<string>,
   activity: IActivity,
@@ -166,6 +166,7 @@ const doBuildPages = async (
   }
 }
 
+// TODO remove in v4 - this could be a "public" api
 export const buildHTML = async ({
   program,
   stage,
@@ -181,7 +182,5 @@ export const buildHTML = async ({
 }): Promise<void> => {
   const rendererPath = await buildRenderer(program, stage, activity.span)
   await doBuildPages(rendererPath, pagePaths, activity, workerPool)
-  if (stage !== `develop-html`) {
-    await deleteRenderer(rendererPath)
-  }
+  await deleteRenderer(rendererPath)
 }

packages/gatsby/src/commands/build.ts

@@ -4,7 +4,7 @@ import signalExit from "signal-exit"
 import fs from "fs-extra"
 import telemetry from "gatsby-telemetry"
 
-import { buildHTML } from "./build-html"
+import { doBuildPages, buildRenderer, deleteRenderer } from "./build-html"
 import { buildProductionBundle } from "./build-javascript"
 import { bootstrap } from "../bootstrap"
 import apiRunnerNode from "../utils/api-runner-node"
@@ -231,6 +231,20 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
     }
   }
 
+  const buildSSRBundleActivityProgress = report.activityTimer(
+    `Building HTML renderer`,
+    { parentSpan: buildSpan }
+  )
+  buildSSRBundleActivityProgress.start()
+  let pageRenderer: string
+  try {
+    pageRenderer = await buildRenderer(program, Stage.BuildHTML, buildSpan)
+  } catch (err) {
+    buildActivityTimer.panic(structureWebpackErrors(Stage.BuildHTML, err))
+  } finally {
+    buildSSRBundleActivityProgress.end()
+  }
+
   const buildHTMLActivityProgress = report.createProgress(
     `Building static HTML for pages`,
     pagePaths.length,
@@ -241,13 +255,12 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
   )
   buildHTMLActivityProgress.start()
   try {
-    await buildHTML({
-      program,
-      stage: Stage.BuildHTML,
+    await doBuildPages(
+      pageRenderer,
       pagePaths,
-      activity: buildHTMLActivityProgress,
-      workerPool,
-    })
+      buildHTMLActivityProgress,
+      workerPool
+    )
   } catch (err) {
     let id = `95313` // TODO: verify error IDs exist
     const context = {
@@ -271,6 +284,12 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
   }
   buildHTMLActivityProgress.end()
 
+  try {
+    await deleteRenderer(pageRenderer)
+  } catch (err) {
+    // pass through
+  }
+
   let deletedPageKeys: Array<string> = []
   if (process.env.GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES) {
     const deletePageDataActivityTimer = report.activityTimer(

packages/gatsby/src/utils/start-server.ts

@@ -113,16 +113,15 @@ module.exports = {
 
   // Remove the following when merging GATSBY_EXPERIMENTAL_DEV_SSR
   const directoryPath = withBasePath(directory)
-  const { buildHTML } = require(`../commands/build-html`)
+  const { buildRenderer, doBuildPages } = require(`../commands/build-html`)
   const createIndexHtml = async (activity: ActivityTracker): Promise<void> => {
     try {
-      await buildHTML({
+      const rendererPath = await buildRenderer(
         program,
-        stage: Stage.DevelopHTML,
-        pagePaths: [`/`],
-        workerPool,
-        activity,
-      })
+        Stage.DevelopHTML,
+        activity.span
+      )
+      await doBuildPages(rendererPath, [`/`], activity, workerPool)
     } catch (err) {
       if (err.name !== `WebpackError`) {
         report.panic(err)
@@ -139,9 +138,10 @@ module.exports = {
   }
   const indexHTMLActivity = report.phantomActivity(`building index.html`, {})
 
+  let pageRenderer: string
   if (process.env.GATSBY_EXPERIMENTAL_DEV_SSR) {
     const { buildRenderer } = require(`../commands/build-html`)
-    await buildRenderer(program, Stage.DevelopHTML)
+    pageRenderer = await buildRenderer(program, Stage.DevelopHTML)
     const { initDevWorkerPool } = require(`./dev-ssr/render-dev-html`)
     initDevWorkerPool()
   } else {
@@ -495,7 +495,7 @@ module.exports = {
             // Let renderDevHTML figure it out.
             page: undefined,
             store,
-            htmlComponentRendererPath: `${program.directory}/public/render-page.js`,
+            htmlComponentRendererPath: pageRenderer,
             directory: program.directory,
           })
           const status = process.env.GATSBY_EXPERIMENTAL_DEV_SSR ? 404 : 200