From f0873e53b619f89b55ca3d0cf9f89c5cfaa79130 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 22 Jul 2020 16:31:45 -0700
Subject: [PATCH] Add a --develop command for hot-reloading of recipes

---
 packages/gatsby-cli/src/create-cli.ts | 16 ++++++++++++++--
 packages/gatsby-cli/src/recipes.ts    |  4 +++-
 packages/gatsby-recipes/src/cli.js    | 27 ++++++++++++++++++---------
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/gatsby-cli/src/create-cli.ts b/packages/gatsby-cli/src/create-cli.ts
index 4b5d575fb966e..ea06c5781f76d 100644
--- a/packages/gatsby-cli/src/create-cli.ts
+++ b/packages/gatsby-cli/src/create-cli.ts
@@ -354,9 +354,21 @@ function buildLocalCommands(cli: yargs.Argv, isLocalSite: boolean): void {
   cli.command({
     command: `recipes [recipe]`,
     describe: `[EXPERIMENTAL] Run a recipe`,
+    builder: _ => {
+      _.option(`D`, {
+        alias: `develop`,
+        type: `boolean`,
+        default: false,
+        describe: `Start recipe in develop mode to live-develop your recipe (defaults to false)`,
+      })
+    },
     handler: handlerP(
-      async ({ recipe }: yargs.Arguments<{ recipe: string | undefined }>) => {
-        await recipesHandler(siteInfo.directory, recipe)
+      async ({
+        recipe,
+        develop,
+        ...props
+      }: yargs.Arguments<{ recipe: string | undefined }>) => {
+        await recipesHandler(siteInfo.directory, recipe, develop)
       }
     ),
   })
diff --git a/packages/gatsby-cli/src/recipes.ts b/packages/gatsby-cli/src/recipes.ts
index 79b6504d5b887..a4c35c08b5071 100644
--- a/packages/gatsby-cli/src/recipes.ts
+++ b/packages/gatsby-cli/src/recipes.ts
@@ -3,7 +3,8 @@ import runRecipe, { startGraphQLServer } from "gatsby-recipes"
 
 export async function recipesHandler(
   projectRoot: string,
-  recipe: string | undefined
+  recipe: string | undefined,
+  develop: boolean
 ): Promise<void> {
   trackCli(`RECIPE_RUN`, { name: recipe })
 
@@ -11,6 +12,7 @@ export async function recipesHandler(
 
   return runRecipe({
     recipe,
+    isDevelopMode: develop,
     graphqlPort: graphql.port,
     projectRoot,
   })
diff --git a/packages/gatsby-recipes/src/cli.js b/packages/gatsby-recipes/src/cli.js
index e94502f462c92..bc02d3e74b491 100644
--- a/packages/gatsby-recipes/src/cli.js
+++ b/packages/gatsby-recipes/src/cli.js
@@ -219,12 +219,8 @@ function eliminateNewLines(children) {
 }
 
 // TODO
-// * add a --dev command that keeps it running for hot reloading
-//    * tell user they're in dev mode & give instructions on how to quit
-//    * make it work with any empty mdx file
 // * add a --install command that actually runs the plan
 // * remove all the now unneeded code
-// * add back support for picking a recipe
 
 const ResourceComponent = props => {
   const resource = useResourceByUUID(props._uuid)
@@ -302,7 +298,7 @@ const components = {
         borderStyle="single"
         padding={1}
         flexDirection="column"
-        borderColor="#8a4baf"
+        borderColor="magentaBright"
       >
         {props.children}
       </Box>
@@ -327,7 +323,12 @@ log(
   `======================================= ${new Date().toJSON()}`
 )
 
-module.exports = async ({ recipe, graphqlPort, projectRoot }) => {
+module.exports = async ({
+  recipe,
+  isDevelopMode,
+  graphqlPort,
+  projectRoot,
+}) => {
   try {
     const GRAPHQL_ENDPOINT = `http://localhost:${graphqlPort}/graphql`
 
@@ -357,11 +358,13 @@ module.exports = async ({ recipe, graphqlPort, projectRoot }) => {
         }),
       ],
     })
-    const Plan = ({ state, localRecipe }) => {
+    const Plan = ({ state, localRecipe, isDevelopMode }) => {
       const { exit } = useApp()
       // Exit the app after we render
       useEffect(() => {
-        exit()
+        if (!isDevelopMode) {
+          exit()
+        }
       }, [])
 
       return (
@@ -665,7 +668,13 @@ module.exports = async ({ recipe, graphqlPort, projectRoot }) => {
       // resources:
       // state.context.plan?.filter(p => p.resourceName !== `Input`) || [],
       // })
-      return <Plan state={state} localRecipe={localRecipe} />
+      return (
+        <Plan
+          state={state}
+          localRecipe={localRecipe}
+          isDevelopMode={isDevelopMode}
+        />
+      )
     }
 
     const Wrapper = () => (