fix(gatsby-recipes): fix for when recipes have multiple NPMPackageJSON resources (#26281)

* fix(gatsby-recipes): restrict changes to package.json to one at a time

* Add message for npmpackagejson + make install output denser

* update snapshots

Author: KyleAMathews

packages/gatsby-recipes/src/cli/index.js

@@ -441,19 +441,23 @@ export default async ({
     const Installing = ({ state }) => (
       <Div>
         {state.context.plan.map((p, i) => (
-          <Div key={`${p.resourceName}-${i}`}>
-            <Text italic>{p.resourceName}:</Text>
+          <Box
+            textWrap="wrap"
+            flexDirection="column"
+            key={`${p.resourceName}-${i}`}
+          >
             <Text>
+              {p.isDone ? `✔ ` : <Spinner.default />}
               {` `}
-              {p.isDone ? `✅ ` : <Spinner.default />}
+              <Text italic>{p.resourceName}:</Text>
               {` `}
               {p.isDone ? p._message : p.describe}
               {` `}
               {state.context.elapsed > 0 && (
                 <Text>({state.context.elapsed / 1000}s elapsed)</Text>
               )}
             </Text>
-          </Div>
+          </Box>
         ))}
       </Div>
     )

packages/gatsby-recipes/src/providers/npm/__snapshots__/package-json.test.js.snap

@@ -2,11 +2,10 @@
 
 exports[`packageJson resource e2e package resource test: PackageJson create 1`] = `
 Object {
+  "_message": "Wrote key \\"husky\\" to package.json",
   "id": "husky",
   "name": "husky",
-  "value": "{
-  \\"hooks\\": {}
-}",
+  "value": "\\"{/n  /\\"hooks/\\": {}/n}\\"",
 }
 `;
 
@@ -41,13 +40,10 @@ exports[`packageJson resource e2e package resource test: PackageJson destroy 1`]
 
 exports[`packageJson resource e2e package resource test: PackageJson update 1`] = `
 Object {
+  "_message": "Wrote key \\"husky\\" to package.json",
   "id": "husky",
   "name": "husky",
-  "value": "{
-  \\"hooks\\": {
-    \\"pre-commit\\": \\"lint-staged\\"
-  }
-}",
+  "value": "\\"{/n  /\\"hooks/\\": {/n    /\\"pre-commit/\\": /\\"lint-staged/\\"/n  }/n}\\"",
 }
 `;
 
@@ -56,26 +52,22 @@ Object {
   "currentState": "{
   \\"name\\": \\"test\\",
   \\"scripts\\": {},
-  \\"husky\\": {
-    \\"hooks\\": {}
-  }
+  \\"husky\\": \\"{/n  /\\"hooks/\\": {}/n}\\"
 }",
   "describe": "Add husky to package.json",
-  "diff": "- Original  - 3
-+ Modified  + 5
+  "diff": "- Original  - 1
++ Modified  + 3
 
+@@ -1,6 +1,8 @@
   Object {
--   \\"husky\\": Object {
--     \\"hooks\\": Object {},
--   },
-+   \\"husky\\": \\"{
+    \\"husky\\": \\"{
+-   /\\"hooks/\\": {}
 +   /\\"hooks/\\": {
 +     /\\"pre-commit/\\": /\\"lint-staged/\\"
 +   }
-+ }\\",
+  }\\",
     \\"name\\": \\"test\\",
-    \\"scripts\\": Object {},
-  }",
+    \\"scripts\\": Object {},",
   "id": "husky",
   "name": "husky",
   "newState": "{
@@ -88,6 +80,7 @@ Object {
 
 exports[`packageJson resource handles object values 1`] = `
 Object {
+  "_message": "Wrote key \\"husky\\" to package.json",
   "id": "husky",
   "name": "husky",
   "value": "{

packages/gatsby-recipes/src/providers/npm/package-json.js

@@ -5,6 +5,63 @@ const getDiff = require(`../utils/get-diff`)
 
 const resourceSchema = require(`../resource-schema`)
 
+class Deferred {
+  constructor(name) {
+    this._promise = new Promise((resolve, reject) => {
+      // assign the resolve and reject functions to `this`
+      // making them usable on the class instance
+      this.resolve = resolve
+      this.reject = reject
+    })
+    this.name = name
+    // bind `then` and `catch` to implement the same interface as Promise
+    this.then = this._promise.then.bind(this._promise)
+    this.catch = this._promise.catch.bind(this._promise)
+    this[Symbol.toStringTag] = `Promise`
+  }
+}
+let writesQueue = new Map()
+let paused = false
+const checkWritesQueue = async root =>
+  new Promise((resolve, reject) => {
+    setTimeout(async () => {
+      if (writesQueue.size > 0) {
+        await processWritesQueue(root)
+        resolve()
+      } else {
+        paused = false
+      }
+    }, 100)
+  })
+
+const processWritesQueue = async root => {
+  const toProcess = [...writesQueue.entries()]
+  writesQueue = new Map()
+  const pkg = await readPackageJson(root)
+  toProcess.forEach(change => {
+    pkg[change[0]] = change[1].value
+  })
+
+  await writePackageJson(root, pkg)
+  toProcess.forEach(change => {
+    change[1].dfd.resolve()
+  })
+  await checkWritesQueue(root)
+}
+
+const enqueueWrite = (root, change) => {
+  const dfd = new Deferred(change[0])
+  writesQueue.set(change[0], { value: change[1], dfd })
+
+  // If we're not paused, write immediately
+  if (!paused) {
+    paused = true
+    processWritesQueue(root)
+  }
+
+  return dfd
+}
+
 const readPackageJson = async root => {
   const fullPath = path.join(root, `package.json`)
   const contents = await fs.readFile(fullPath, `utf8`)
@@ -19,10 +76,7 @@ const writePackageJson = async (root, obj) => {
 }
 
 const create = async ({ root }, { name, value }) => {
-  const pkg = await readPackageJson(root)
-  pkg[name] = typeof value === `string` ? JSON.parse(value) : value
-
-  await writePackageJson(root, pkg)
+  await enqueueWrite(root, [name, value])
 
   return await read({ root }, name)
 }
@@ -38,6 +92,7 @@ const read = async ({ root }, id) => {
     id,
     name: id,
     value: JSON.stringify(pkg[id], null, 2),
+    _message: `Wrote key "${id}" to package.json`,
   }
 }
 

packages/gatsby-recipes/src/renderer/render.js

@@ -173,8 +173,14 @@ const handleResource = (resourceName, context, props) => {
         resolve(cachedValue)
         updateResource(cachedValue)
       } else {
+        // if (fn == `create`) {
+        // console.log(`start creating resource:`, { context, props })
+        // }
         resources[resourceName][fn](context, props)
           .then(result => {
+            // if (fn == `create`) {
+            // console.log(`finish creating resource:`, { props })
+            // }
             updateResource(result)
             inFlightCache.set(cacheKey, false)
             return result