From 7f672de49ce360c45fd443e98e28357f51b4c658 Mon Sep 17 00:00:00 2001 From: John Otander Date: Tue, 21 Jul 2020 12:31:46 -0600 Subject: [PATCH 1/2] Don't hardcode port --- packages/gatsby-recipes/src/graphql-server/server.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-recipes/src/graphql-server/server.js b/packages/gatsby-recipes/src/graphql-server/server.js index 7bdeb93c678ff..96ea8b58c3ea9 100644 --- a/packages/gatsby-recipes/src/graphql-server/server.js +++ b/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()) From cf9895b2a568113de9b57a393381da256c7f3ca8 Mon Sep 17 00:00:00 2001 From: John Otander Date: Tue, 21 Jul 2020 13:53:16 -0600 Subject: [PATCH 2/2] Ensure that nested resource get resourceName populated --- .../gatsby-recipes/src/renderer/reconciler.js | 8 ++-- .../src/renderer/render.test.js | 24 +++++----- .../renderer/transform-to-plan-structure.js | 45 +++++++++---------- 3 files changed, 37 insertions(+), 40 deletions(-) diff --git a/packages/gatsby-recipes/src/renderer/reconciler.js b/packages/gatsby-recipes/src/renderer/reconciler.js index 733f03265ddb1..ec4bae80738bd 100644 --- a/packages/gatsby-recipes/src/renderer/reconciler.js +++ b/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 }, } diff --git a/packages/gatsby-recipes/src/renderer/render.test.js b/packages/gatsby-recipes/src/renderer/render.test.js index 6e47b3c5b037d..eccebf3821b12 100644 --- a/packages/gatsby-recipes/src/renderer/render.test.js +++ b/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", }, ] `) diff --git a/packages/gatsby-recipes/src/renderer/transform-to-plan-structure.js b/packages/gatsby-recipes/src/renderer/transform-to-plan-structure.js index 83a07b9f19bf6..2c67a575c316d 100644 --- a/packages/gatsby-recipes/src/renderer/transform-to-plan-structure.js +++ b/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)