chore(gatsby-recipes): Move recipe resolving to its own step in state machine (#26280)

Before the parser was sort of overloaded because it
was also tasked with figuring out how to resolve the
recipe. This moves it to a separate step in the state
machine which separates concerns and will set us
up nicely for when we allow recipes to import other
recipes.

Author: johno

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

@@ -3,10 +3,6 @@ const remarkMdx = require(`remark-mdx`)
 const remarkMdxjs = require(`remark-mdxjs`)
 const remarkParse = require(`remark-parse`)
 const remarkStringify = require(`remark-stringify`)
-const fetch = require(`node-fetch`)
-const fs = require(`fs-extra`)
-const isUrl = require(`is-url`)
-const path = require(`path`)
 const visit = require(`unist-util-visit`)
 const remove = require(`unist-util-remove`)
 
@@ -133,56 +129,6 @@ const parse = async src => {
   }
 }
 
-const isRelative = path => {
-  if (path.slice(0, 1) == `.`) {
-    return true
-  }
-
-  return false
-}
-
-const getSource = async (pathOrUrl, projectRoot) => {
-  let recipePath
-  if (isUrl(pathOrUrl)) {
-    const res = await fetch(pathOrUrl)
-    const src = await res.text()
-    return src
-  }
-  if (isRelative(pathOrUrl)) {
-    recipePath = path.join(projectRoot, pathOrUrl)
-  } else {
-    const url = `https://unpkg.com/gatsby-recipes/recipes/${pathOrUrl}`
-    const res = await fetch(url.endsWith(`.mdx`) ? url : url + `.mdx`)
-
-    if (res.status !== 200) {
-      throw new Error(
-        JSON.stringify({
-          fetchError: `Could not fetch ${pathOrUrl} from official recipes`,
-        })
-      )
-    }
-
-    const src = await res.text()
-    return src
-  }
-  if (recipePath.slice(-4) !== `.mdx`) {
-    recipePath += `.mdx`
-  }
-
-  const src = await fs.readFile(recipePath, `utf8`)
-  return src
-}
-
-module.exports = async (recipePath, projectRoot) => {
-  const src = await getSource(recipePath, projectRoot)
-  try {
-    const result = await parse(src)
-    return result
-  } catch (e) {
-    console.log(e)
-    throw e
-  }
-}
-
+module.exports = parse
 module.exports.parse = parse
 module.exports.u = u

packages/gatsby-recipes/src/parser/index.test.js

@@ -6,33 +6,6 @@ const parser = require(`.`)
 const fixturePath = path.join(__dirname, `fixtures/prettier-git-hook.mdx`)
 const fixtureSrc = fs.readFileSync(fixturePath, `utf8`)
 
-// There are network calls being made and thoses tests often doesn't finish
-// within default 5s timeout on CI
-jest.setTimeout(100000)
-
-test(`fetches a recipe from unpkg when official short form`, async () => {
-  const result = await parser(`theme-ui`)
-
-  expect(result.stepsAsMdx[0]).toMatch(`# Setup Theme UI`)
-  expect(result.stepsAsMdx[1]).toMatch(`Installs packages`)
-  expect(result.stepsAsMdx[1]).toMatch(`<NPMPackage`)
-  expect(result.stepsAsMdx[1]).toMatch(`_uuid="`)
-})
-
-test(`fetches a recipe from unpkg when official short form and .mdx`, async () => {
-  const result = await parser(`theme-ui.mdx`)
-
-  expect(result).toBeTruthy()
-})
-
-test(`raises an error when the recipe isn't known`, async () => {
-  try {
-    await parser(`theme-uiz`)
-  } catch (e) {
-    expect(e).toBeTruthy()
-  }
-})
-
 test(`partitions the MDX into steps`, async () => {
   const result = await parser.parse(fixtureSrc)
 

packages/gatsby-recipes/src/recipe-machine/index.js

@@ -6,15 +6,17 @@ const createPlan = require(`../create-plan`)
 const applyPlan = require(`../apply-plan`)
 const validateSteps = require(`../validate-steps`)
 const parser = require(`../parser`)
+const resolveRecipe = require(`../resolve-recipe`)
 
 const recipeMachine = Machine(
   {
     id: `recipe`,
-    initial: `parsingRecipe`,
+    initial: `resolvingRecipe`,
     context: {
       recipePath: null,
       projectRoot: null,
       recipe: ``,
+      recipeSrc: ``,
       stepsAsMdx: [],
       exports: [],
       plan: [],
@@ -23,28 +25,50 @@ const recipeMachine = Machine(
       inputs: {},
     },
     states: {
-      parsingRecipe: {
+      resolvingRecipe: {
         invoke: {
-          id: `parseRecipe`,
+          id: `resolveRecipe`,
           src: async (context, _event) => {
-            debug(`parsingRecipe`)
-
-            let result
             if (context.src) {
-              result = await parser.parse(context.src)
+              return context.src
             } else if (context.recipePath && context.projectRoot) {
-              result = await parser(context.recipePath, context.projectRoot)
-            } else {
-              throw new Error(
-                JSON.stringify({
-                  validationError: `A recipe must be specified`,
-                })
+              const recipe = await resolveRecipe(
+                context.recipePath,
+                context.projectRoot
               )
+              return recipe
+            } else {
+              throw new Error(`A recipe must be specified`)
             }
-
+          },
+          onError: {
+            target: `doneError`,
+            actions: assign({
+              error: (context, _event) => {
+                debug(`error resolving recipe`)
+                return {
+                  error: `Could not resolve recipe "${context.recipePath}"`,
+                }
+              },
+            }),
+          },
+          onDone: {
+            target: `parsingRecipe`,
+            actions: assign({
+              recipeSrc: (_context, event) => event.data,
+            }),
+          },
+        },
+      },
+      parsingRecipe: {
+        invoke: {
+          id: `parseRecipe`,
+          src: async (context, _event) => {
+            debug(`parsingRecipe`)
+            const parsed = await parser.parse(context.recipeSrc)
             debug(`parsedRecipe`)
 
-            return result
+            return parsed
           },
           onError: {
             target: `doneError`,

packages/gatsby-recipes/src/recipe-machine/index.test.js

@@ -77,4 +77,23 @@ describe(`recipe-machine`, () => {
 
     service.start()
   })
+
+  it(`fetches official recipes from unpkg`, done => {
+    const initialContext = {
+      recipePath: `theme-ui`,
+      projectRoot: `/Users/fake`,
+      currentStep: 0,
+    }
+    const service = interpret(
+      recipeMachine.withContext(initialContext)
+    ).onTransition(state => {
+      if (state.value === `presentPlan`) {
+        expect(state.context.plan.length).toBeGreaterThan(1)
+        service.stop()
+        done()
+      }
+    })
+
+    service.start()
+  })
 })

packages/gatsby-recipes/src/resolve-recipe.js

@@ -0,0 +1,44 @@
+const fs = require(`fs-extra`)
+const path = require(`path`)
+const isUrl = require(`is-url`)
+const fetch = require(`node-fetch`)
+
+const isRelative = path => {
+  if (path.slice(0, 1) == `.`) {
+    return true
+  }
+
+  return false
+}
+
+module.exports = async (pathOrUrl, projectRoot) => {
+  let recipePath
+  if (isUrl(pathOrUrl)) {
+    const res = await fetch(pathOrUrl)
+    const src = await res.text()
+    return src
+  }
+  if (isRelative(pathOrUrl)) {
+    recipePath = path.join(projectRoot, pathOrUrl)
+  } else {
+    const url = `https://unpkg.com/gatsby-recipes/recipes/${pathOrUrl}`
+    const res = await fetch(url.endsWith(`.mdx`) ? url : url + `.mdx`)
+
+    if (res.status !== 200) {
+      throw new Error(
+        JSON.stringify({
+          fetchError: `Could not fetch ${pathOrUrl} from official recipes`,
+        })
+      )
+    }
+
+    const src = await res.text()
+    return src
+  }
+  if (recipePath.slice(-4) !== `.mdx`) {
+    recipePath += `.mdx`
+  }
+
+  const src = await fs.readFile(recipePath, `utf8`)
+  return src
+}