feat(gatsby-recipes): Refactor CLI UI for new one-shot show plan (#25939

)

* feat(gatsby-recipes): Refactor CLI UI for new one-shot show plan

* Restore experimental message + showing list of recipes to run

* Add a --develop command for hot-reloading of recipes

* Add --install command support

* Remove unused code + old pre Ink v3 logging system

* Cleanup + show step count

* Remove console.log

* add key

* small fixes + add script to start dev server

* Add dev instructions for running the recipes graphql server in the foreground

* small fixes

* @babel/standalone caches transforms unless you delete the require cache

* fix linting problems

* Extract shared code into common library

* Checkin useInput beginning

* Ensure that diff html isn't rendered by escaping

* Update providers snapshots, looked like they weren't run with chalk turned off

* Update other snapshots as well

* Begin fixing some lint errors

* Fix some more lint errors

* Fix grabbing the right resource

Co-authored-by: John Otander <johnotander@gmail.com>

package.json

@@ -124,9 +124,7 @@
   "private": true,
   "resolutions": {
     "theme-ui": "0.4.0-alpha.3",
-    "csstype": "2.6.10",
-    "property-information": "5.5.0",
-    "remark-mdx": "^2.0.0-next.3"
+    "csstype": "2.6.10"
   },
   "scripts": {
     "bootstrap": "npm-run-all -s check-versions \"lerna-prepare -- --{@}\" --",

packages/gatsby-cli/src/create-cli.ts

@@ -354,9 +354,25 @@ 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)`,
+      }).option(`I`, {
+        alias: `install`,
+        type: `boolean`,
+        default: false,
+        describe: `Install recipe (defaults to plan mode)`,
+      }),
     handler: handlerP(
-      async ({ recipe }: yargs.Arguments<{ recipe: string | undefined }>) => {
-        await recipesHandler(siteInfo.directory, recipe)
+      async ({
+        recipe,
+        develop,
+        install
+      }: yargs.Arguments<{ recipe: string | undefined, develop: boolean, install: boolean }>) => {
+        await recipesHandler(siteInfo.directory, recipe, develop, install)
       }
     ),
   })

packages/gatsby-cli/src/recipes.ts

@@ -3,14 +3,18 @@ import runRecipe, { startGraphQLServer } from "gatsby-recipes"
 
 export async function recipesHandler(
   projectRoot: string,
-  recipe: string | undefined
+  recipe: string | undefined,
+  develop: boolean,
+  install: boolean
 ): Promise<void> {
   trackCli(`RECIPE_RUN`, { name: recipe })
 
   const graphql = await startGraphQLServer(projectRoot)
 
   return runRecipe({
     recipe,
+    isDevelopMode: develop,
+    isInstallMode: install,
     graphqlPort: graphql.port,
     projectRoot,
   })

packages/gatsby-recipes/README.md

@@ -241,6 +241,8 @@ DEBUG=true node --inspect-brk ./node_modules/.bin/gatsby recipes ./test.mdx
 
 Then, open up Chrome and click the node icon in dev tools.
 
+To see log output from the Recipes graphql server, run in a terminal `node node_modules/gatsby-recipes/dist/graphql-server/start-dev-cli-server.js`
+
 ### Official recipes
 
 MDX source for the official recipes lives at [https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes).

packages/gatsby-recipes/package.json

@@ -20,9 +20,9 @@
     "@graphql-tools/utils": "^6.0.14",
     "@hapi/hoek": "8.x.x",
     "@hapi/joi": "^15.1.1",
-    "@mdx-js/mdx": "^2.0.0-next.3",
-    "@mdx-js/react": "^2.0.0-next.3",
-    "@mdx-js/runtime": "^2.0.0-next.3",
+    "@mdx-js/mdx": "^2.0.0-next.4",
+    "@mdx-js/react": "^2.0.0-next.4",
+    "@mdx-js/runtime": "^2.0.0-next.4",
     "acorn": "^7.2.0",
     "acorn-jsx": "^5.2.0",
     "ansi-html": "^0.0.7",
@@ -51,7 +51,7 @@
     "ink": "next",
     "ink-box": "^1.0.0",
     "ink-link": "^1.1.0",
-    "ink-select-input": "^3.1.2",
+    "ink-select-input": "^4.0.0",
     "ink-spinner": "^4.0.0-0",
     "is-binary-path": "^2.1.0",
     "is-url": "^1.2.4",
@@ -67,8 +67,8 @@
     "react-circular-progressbar": "^2.0.0",
     "react-icons": "^3.0.1",
     "react-reconciler": "^0.25.1",
-    "remark-mdx": "^2.0.0-next.3",
-    "remark-mdxjs": "^2.0.0-next.3",
+    "remark-mdx": "^2.0.0-next.4",
+    "remark-mdxjs": "^2.0.0-next.4",
     "remark-parse": "^6.0.3",
     "remark-stringify": "^8.1.0",
     "resolve-cwd": "^3.0.0",
@@ -114,13 +114,13 @@
     "directory": "packages/gatsby-recipes"
   },
   "resolutions": {
-    "@mdx-js/mdx": "^2.0.0-next.3",
-    "@mdx-js/react": "^2.0.0-next.3",
-    "@mdx-js/runtime": "^2.0.0-next.3",
+    "@mdx-js/mdx": "^2.0.0-next.4",
+    "@mdx-js/react": "^2.0.0-next.4",
+    "@mdx-js/runtime": "^2.0.0-next.4",
     "graphql": "^14.6.0",
     "property-information": "5.5.0",
-    "remark-mdx": "^2.0.0-next.3",
-    "remark-mdxjs": "^2.0.0-next.3"
+    "remark-mdx": "^2.0.0-next.4",
+    "remark-mdxjs": "^2.0.0-next.4"
   },
   "scripts": {
     "build": "babel src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",