More hot reloading fixes (#3769)

* use createPage singleton in dev-404-page

closes #3551

* write to a temp file and rename

decrease the chance of reading from an incomplete file

cc #3094 #3201

* change dev-404-page to implement createPagesStatefully

* update the jest snapshot

packages/gatsby/src/bootstrap/__tests__/__snapshots__/load-plugins.js.snap

@@ -6,7 +6,7 @@ Array [
     "id": "Plugin dev-404-page",
     "name": "dev-404-page",
     "nodeAPIs": Array [
-      "createPages",
+      "createPagesStatefully",
     ],
     "pluginOptions": Object {
       "plugins": Array [],
@@ -103,7 +103,7 @@ Array [
     "id": "Plugin dev-404-page",
     "name": "dev-404-page",
     "nodeAPIs": Array [
-      "createPages",
+      "createPagesStatefully",
     ],
     "pluginOptions": Object {
       "plugins": Array [],

packages/gatsby/src/internal-plugins/dev-404-page/gatsby-node.js

@@ -1,18 +1,21 @@
 const path = require(`path`)
 const fs = require(`fs-extra`)
+const chokidar = require(`chokidar`)
 
-exports.createPages = async ({ store, boundActionCreators }) => {
+exports.createPagesStatefully = async ({ store, boundActionCreators }, options, done) => {
   if (process.env.NODE_ENV !== `production`) {
     const { program } = store.getState()
     const { createPage } = boundActionCreators
-    const currentPath = path.join(__dirname, `./raw_dev-404-page.js`)
-    const newPath = path.join(program.directory, `.cache`, `dev-404-page.js`)
-
-    await fs.copy(currentPath, newPath)
-
+    const source = path.join(__dirname, `./raw_dev-404-page.js`)
+    const destination = path.join(program.directory, `.cache`, `dev-404-page.js`)
+    const copy = () => fs.copy(source, destination)
+    await copy()
     createPage({
-      component: newPath,
+      component: destination,
       path: `/dev-404-page/`,
     })
+    chokidar.watch(source)
+      .on(`change`, () => copy())
+      .on(`ready`, () => done())
   }
 }

packages/gatsby/src/internal-plugins/query-runner/pages-writer.js

@@ -131,16 +131,17 @@ const preferDefault = m => m && m.default || m
     .join(`,\n`)}
 }`
 
+  const writeAndMove = (file, data) => {
+    const destination = joinPath(program.directory, `.cache`, file)
+    const tmp = `${destination}.${Date.now()}`
+    return fs.writeFile(tmp, data)
+      .then(() => fs.move(tmp, destination, { overwrite: true }))
+  }
+
   return await Promise.all([
-    fs.writeFile(
-      joinPath(program.directory, `.cache/pages.json`),
-      JSON.stringify(pagesData, null, 4)
-    ),
-    fs.writeFile(`${program.directory}/.cache/sync-requires.js`, syncRequires),
-    fs.writeFile(
-      joinPath(program.directory, `.cache/async-requires.js`),
-      asyncRequires
-    ),
+    writeAndMove(`pages.json`, JSON.stringify(pagesData, null, 4)),
+    writeAndMove(`sync-requires.js`, syncRequires),
+    writeAndMove(`async-requires.js`, asyncRequires),
   ])
 }