chore(gatsby-plugin-mdx): Revert "perf(gatsby-plugin-mdx): performance changes" (#26202)

This reverts commit 9e02abe.

Author: pvdz

packages/gatsby-plugin-mdx/gatsby/on-create-node.js

@@ -4,8 +4,9 @@ const babel = require(`@babel/core`)
 const { createContentDigest } = require(`gatsby-core-utils`)
 
 const defaultOptions = require(`../utils/default-options`)
-const createMDXNodeWithScope = require(`../utils/mdx-node-with-scope`)
+const createMDXNode = require(`../utils/create-mdx-node`)
 const { MDX_SCOPES_LOCATION } = require(`../constants`)
+const { findImports } = require(`../utils/gen-mdx`)
 
 const contentDigest = val => createContentDigest(val)
 
@@ -45,14 +46,18 @@ module.exports = async (
 
   const content = await loadNodeContent(node)
 
-  const {
-    mdxNode,
-    scopeIdentifiers,
-    scopeImports,
-  } = await createMDXNodeWithScope({
+  const mdxNode = await createMDXNode({
     id: createNodeId(`${node.id} >>> Mdx`),
     node,
     content,
+  })
+
+  createNode(mdxNode)
+  createParentChildLink({ parent: node, child: mdxNode })
+
+  // write scope files into .cache for later consumption
+  const { scopeImports, scopeIdentifiers } = await findImports({
+    node: mdxNode,
     getNode,
     getNodes,
     reporter,
@@ -64,10 +69,6 @@ module.exports = async (
     createNodeId,
     ...helpers,
   })
-
-  createNode(mdxNode)
-  createParentChildLink({ parent: node, child: mdxNode })
-
   await cacheScope({
     cache,
     scopeIdentifiers,

packages/gatsby-plugin-mdx/loaders/mdx-loader.js

@@ -25,7 +25,7 @@ const debugMore = require(`debug`)(`gatsby-plugin-mdx-info:mdx-loader`)
 
 const genMdx = require(`../utils/gen-mdx`)
 const withDefaultOptions = require(`../utils/default-options`)
-const createMDXNodeWithScope = require(`../utils/mdx-node-with-scope`)
+const createMDXNode = require(`../utils/create-mdx-node`)
 const { createFileNode } = require(`../utils/create-fake-file-node`)
 
 const DEFAULT_OPTIONS = {
@@ -94,7 +94,6 @@ module.exports = async function (content) {
   const {
     getNode: rawGetNode,
     getNodes,
-    getNodesByType,
     reporter,
     cache,
     pathPrefix,
@@ -122,15 +121,11 @@ module.exports = async function (content) {
 
   let mdxNode
   try {
-    // This node attempts to break the chicken-egg problem, where parsing mdx
-    // allows for custom plugins, which can receive a mdx node
-    ;({ mdxNode } = await createMDXNodeWithScope({
+    mdxNode = await createMDXNode({
       id: `fakeNodeIdMDXFileABugIfYouSeeThis`,
       node: fileNode,
       content,
-      options,
-      getNodesByType,
-    }))
+    })
   } catch (e) {
     return callback(e)
   }
@@ -197,7 +192,6 @@ ${contentWithoutFrontmatter}`
     node: { ...mdxNode, rawBody: code },
     getNode,
     getNodes,
-    getNodesByType,
     reporter,
     cache,
     pathPrefix,

packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js

@@ -16,9 +16,9 @@ array: [1,2,3]
 )`,
     namedExports: `export const meta = {author: "chris"}`,
     body: `# Some title
-
+    
 a bit of a paragraph
-
+    
 some content`,
   }
 

packages/gatsby-plugin-mdx/utils/create-mdx-node.js

@@ -1,17 +1,46 @@
-const withDefaultOptions = require(`../utils/default-options`)
-const { getNodesByType } = require(`gatsby/dist/redux/nodes.js`)
-const createMdxNodeWithScope = require(`../utils/mdx-node-with-scope`)
+const { createContentDigest } = require(`gatsby-core-utils`)
 
-async function createMdxNodeLegacy({ id, node, content } = {}) {
-  const nodeWithScope = await createMdxNodeWithScope({
+const mdx = require(`../utils/mdx`)
+const extractExports = require(`../utils/extract-exports`)
+
+module.exports = async ({ id, node, content }) => {
+  let code
+  try {
+    code = await mdx(content)
+  } catch (e) {
+    // add the path of the file to simplify debugging error messages
+    e.message += `${node.absolutePath}: ${e.message}`
+    throw e
+  }
+
+  // extract all the exports
+  const { frontmatter, ...nodeExports } = extractExports(code)
+
+  const mdxNode = {
     id,
-    node,
-    content,
-    getNodesByType,
-    options: withDefaultOptions({ plugins: [] }),
-  })
-  return nodeWithScope.mdxNode
-}
+    children: [],
+    parent: node.id,
+    internal: {
+      content: content,
+      type: `Mdx`,
+    },
+  }
+
+  mdxNode.frontmatter = {
+    title: ``, // always include a title
+    ...frontmatter,
+  }
 
-// This function is deprecated in favor of createMDXNodeWithScope and slated to be dropped in v3
-module.exports = createMdxNodeLegacy
+  mdxNode.excerpt = frontmatter.excerpt
+  mdxNode.exports = nodeExports
+  mdxNode.rawBody = content
+
+  // Add path to the markdown file path
+  if (node.internal.type === `File`) {
+    mdxNode.fileAbsolutePath = node.absolutePath
+  }
+
+  mdxNode.internal.contentDigest = createContentDigest(mdxNode)
+
+  return mdxNode
+}

packages/gatsby-plugin-mdx/utils/gen-mdx.js

@@ -194,10 +194,8 @@ ${code}`
 module.exports = genMDX // Legacy API, drop in v3 in favor of named export
 module.exports.genMDX = genMDX
 
-async function findImportsExports({
+async function findImports({
   node,
-  rawInput,
-  absolutePath = null,
   options,
   getNode,
   getNodes,
@@ -207,7 +205,7 @@ async function findImportsExports({
   pathPrefix,
   ...helpers
 }) {
-  const { data: frontmatter, content } = grayMatter(rawInput)
+  const { content } = grayMatter(node.rawBody)
 
   const gatsbyRemarkPluginsAsremarkPlugins = await getSourcePluginsAsRemarkPlugins(
     {
@@ -228,7 +226,7 @@ async function findImportsExports({
   )
 
   const compilerOptions = {
-    filepath: absolutePath,
+    filepath: node.fileAbsolutePath,
     ...options,
     remarkPlugins: [
       ...options.remarkPlugins,
@@ -238,8 +236,8 @@ async function findImportsExports({
   const compiler = mdx.createCompiler(compilerOptions)
 
   const fileOpts = { contents: content }
-  if (absolutePath) {
-    fileOpts.path = absolutePath
+  if (node.fileAbsolutePath) {
+    fileOpts.path = node.fileAbsolutePath
   }
 
   let mdast = await compiler.parse(fileOpts)
@@ -249,17 +247,16 @@ async function findImportsExports({
   // we don't need to dedupe the symbols here.
   const identifiers = []
   const imports = []
-  const exports = []
 
   mdast.children.forEach(node => {
-    if (node.type === `import`) {
-      const importCode = node.value
-      imports.push(importCode)
-      const bindings = parseImportBindings(importCode)
-      identifiers.push(...bindings)
-    } else if (node.type === `export`) {
-      exports.push(node.value)
-    }
+    if (node.type !== `import`) return
+
+    const importCode = node.value
+
+    imports.push(importCode)
+
+    const bindings = parseImportBindings(importCode)
+    identifiers.push(...bindings)
   })
 
   if (!identifiers.includes(`React`)) {
@@ -268,11 +265,9 @@ async function findImportsExports({
   }
 
   return {
-    frontmatter,
     scopeImports: imports,
-    scopeExports: exports,
     scopeIdentifiers: identifiers,
   }
 }
 
-module.exports.findImportsExports = findImportsExports
+module.exports.findImports = findImports