Properly handle nested resources when rendering the plan

packages/gatsby-recipes/src/graphql-server/server.js

@@ -3,7 +3,7 @@ require(`dotenv`).config()
 const express = require(`express`)
 const chokidar = require(`chokidar`)
 const graphqlHTTP = require(`express-graphql`)
-const { v4: uuidv4 } = require("uuid")
+const { v4: uuidv4 } = require(`uuid`)
 const {
   GraphQLSchema,
   GraphQLObjectType,
@@ -164,7 +164,7 @@ const schema = new GraphQLSchema({
 const app = express()
 const server = createServer(app)
 
-console.log(`listening on localhost:4000`)
+console.log(`listening on localhost:${PORT}`)
 
 app.use(cors())
 

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

@@ -1,7 +1,10 @@
 const ReactReconciler = require(`react-reconciler`)
 const flatted = require(`flatted`)
 
-const debug = require(`debug`)(`recipes-reconciler`)
+const debugInner = require(`debug`)(`recipes-reconciler`)
+const debug = (title, data) => {
+  debugInner(title, JSON.stringify(data, null, 2))
+}
 
 const reconciler = ReactReconciler({
   finalizeInitialChildren(element, type, props) {},
@@ -39,6 +42,7 @@ const reconciler = ReactReconciler({
     return { text }
   },
   commitTextUpdate(textInstance, oldText, newText) {
+    debug(`updating text instance`, text)
     textInstance.text = newText
     return textInstance
   },
@@ -103,8 +107,6 @@ const RecipesRenderer = {
     let container = reconciler.createContainer(currState, false, false)
     reconciler.updateContainer(whatToRender, container, null, null)
 
-    //debug(`render result`, require('circular-json').stringify(currState, null, 2))
-
     return currState
   },
 }

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

@@ -32,50 +32,50 @@ test(`handles nested rendering`, async () => {
         "_stepMetadata": Object {},
         "currentState": "",
         "describe": "Write red.js",
-        "diff": "- Original  - 0
-    + Modified  + 1
+        "diff": "- Original  - 0
+    + Modified  + 1
 
-    + red!",
+    + red!",
         "newState": "red!",
         "resourceChildren": Array [
           Object {
             "_stepMetadata": Object {},
             "currentState": "",
             "describe": "Write blue.js",
-            "diff": "- Original  - 0
-    + Modified  + 1
+            "diff": "- Original  - 0
+    + Modified  + 1
 
-    + blue!",
+    + blue!",
             "newState": "blue!",
             "resourceChildren": Array [
               Object {
                 "_stepMetadata": Object {},
                 "currentState": "",
                 "describe": "Write yellow.js",
-                "diff": "- Original  - 0
-    + Modified  + 1
+                "diff": "- Original  - 0
+    + Modified  + 1
 
-    + yellow!",
+    + yellow!",
                 "newState": "yellow!",
                 "resourceDefinitions": Object {
                   "content": "yellow!",
                   "path": "yellow.js",
                 },
-                "resourceName": undefined,
+                "resourceName": "File",
               },
             ],
             "resourceDefinitions": Object {
               "content": "blue!",
               "path": "blue.js",
             },
-            "resourceName": undefined,
+            "resourceName": "File",
           },
         ],
         "resourceDefinitions": Object {
           "content": "red!",
           "path": "red.js",
         },
-        "resourceName": undefined,
+        "resourceName": "File",
       },
     ]
   `)

packages/gatsby-recipes/src/renderer/transform-to-plan-structure.js

@@ -1,7 +1,13 @@
 const providedResources = require(`../resources`)
 const flatted = require(`flatted`)
 
-const extractPlan = node => {
+const isResource = type => type && (type === `Input` || providedResources[type])
+
+const extractPlan = (node, type) => {
+  if (!isResource(type)) {
+    return null
+  }
+
   let text = {}
   if (node.text) {
     try {
@@ -11,19 +17,7 @@ const extractPlan = node => {
     }
   }
 
-  const { _type: type, _props: props, ...plan } = text
-
-  if (type === `Input`) {
-    return {
-      resourceName: type,
-      resourceDefinitions: props,
-      ...plan,
-    }
-  }
-
-  if (!type || !providedResources[type]) {
-    return null
-  }
+  const { _props: props, ...plan } = text
 
   return {
     resourceName: type,
@@ -32,14 +26,14 @@ const extractPlan = node => {
   }
 }
 
-const transform = (props = {}) => {
+const transform = (props = {}, type) => {
   if (!props.children) {
-    const plan = extractPlan(props)
+    const plan = extractPlan(props, type)
     return plan ? [plan] : []
   }
 
   const plan = props.children.filter(Boolean).reduce((acc, curr) => {
-    const childResourcePlans = transform(curr)
+    const childType = curr.type || type
 
     let currText = {}
     if (curr.text) {
@@ -48,27 +42,29 @@ const transform = (props = {}) => {
       } catch {}
     }
 
-    if (curr._type === `Input`) {
+    if (childType === `Input`) {
       currText.resourceName = `Input`
       return [...acc, currText]
     }
 
-    if (!providedResources[curr.type]) {
-      return [...acc, ...childResourcePlans]
+    if (!providedResources[childType]) {
+      return [...acc, ...transform(curr, childType)]
     }
 
     const [rawResource, ...resourceChildren] = curr.children || []
-    const { _props, _type, ...plan } = JSON.parse(rawResource.text)
+    const { _props, ...plan } = JSON.parse(rawResource.text)
 
     const resourcePlan = {
-      // TODO figure out why do we have to use the mdxType for child components?
-      resourceName: _type || _props?.mdxType,
+      resourceName: childType,
       resourceDefinitions: _props,
       ...plan,
     }
 
     if (resourceChildren.length) {
-      resourcePlan.resourceChildren = transform({ children: resourceChildren })
+      resourcePlan.resourceChildren = transform(
+        { children: resourceChildren },
+        childType
+      )
     }
 
     return [...acc, resourcePlan]
@@ -78,7 +74,6 @@ const transform = (props = {}) => {
 }
 
 module.exports = renderTree => {
-  // console.log(flatted.stringify(renderTree, null, 2))
   const [doc] = renderTree.children
 
   return transform(doc)