perf(gatsby-plugin-mdx): drop another babel step during sourcing

This Babel step was used to get exports and remark header but we can use the mdast for this purpose, just like for imports. See PR for perf numbers but they are big.
gatsbyjs · Jul 16, 2020 · 89b1d4e · 89b1d4e
1 parent 254b9a9
commit 89b1d4e
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 52 deletions.
diff --git a/packages/gatsby-plugin-mdx/gatsby/on-create-node.js b/packages/gatsby-plugin-mdx/gatsby/on-create-node.js
@@ -6,7 +6,6 @@ const { createContentDigest } = require(`gatsby-core-utils`)
 const defaultOptions = require(`../utils/default-options`)
 const createMDXNode = require(`../utils/create-mdx-node`)
 const { MDX_SCOPES_LOCATION } = require(`../constants`)
-const { findImports } = require(`../utils/gen-mdx`)
 
 const contentDigest = val => createContentDigest(val)
 
@@ -18,6 +17,7 @@ module.exports = async (
     createNodeId,
     getNode,
     getNodes,
+    getNodesByType,
     reporter,
     cache,
     pathPrefix,
@@ -46,20 +46,14 @@ module.exports = async (
 
   const content = await loadNodeContent(node)
 
-  const mdxNode = await createMDXNode({
+  const { mdxNode, scopeIdentifiers, scopeImports } = 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,
+    getNodesByType,
     reporter,
     cache,
     pathPrefix,
@@ -69,6 +63,11 @@ module.exports = async (
     createNodeId,
     ...helpers,
   })
+
+  createNode(mdxNode)
+  createParentChildLink({ parent: node, child: mdxNode })
+
+  // write scope files into .cache for later consumption
   await cacheScope({
     cache,
     scopeIdentifiers,

diff --git a/packages/gatsby-plugin-mdx/loaders/mdx-loader.js b/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
@@ -93,6 +93,7 @@ module.exports = async function (content) {
   const {
     getNode: rawGetNode,
     getNodes,
+    getNodesByType,
     reporter,
     cache,
     pathPrefix,
@@ -120,11 +121,13 @@ module.exports = async function (content) {
 
   let mdxNode
   try {
-    mdxNode = await createMDXNode({
+    ;({ mdxNode } = await createMDXNode({
       id: `fakeNodeIdMDXFileABugIfYouSeeThis`,
       node: fileNode,
       content,
-    })
+      options,
+      getNodesByType,
+    }))
   } catch (e) {
     return callback(e)
   }
@@ -168,6 +171,7 @@ ${contentWithoutFrontmatter}`
     node: { ...mdxNode, rawBody: code },
     getNode,
     getNodes,
+    getNodesByType,
     reporter,
     cache,
     pathPrefix,

diff --git a/packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js b/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`,
   }
 

diff --git a/packages/gatsby-plugin-mdx/utils/create-mdx-node.js b/packages/gatsby-plugin-mdx/utils/create-mdx-node.js
@@ -1,20 +1,18 @@
 const { createContentDigest } = require(`gatsby-core-utils`)
 
-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 { findImportsExports } = require(`../utils/gen-mdx`)
+
+async function createMdxNode({ id, node, content, ...helpers }) {
+  const {
+    frontmatter,
+    scopeImports,
+    scopeExports,
+    scopeIdentifiers,
+  } = await findImportsExports({
+    rawInput: content,
+    absolutePath: node.absolutePath,
+    ...helpers,
+  })
 
   const mdxNode = {
     id,
@@ -24,23 +22,23 @@ module.exports = async ({ id, node, content }) => {
       content: content,
       type: `Mdx`,
     },
+    excerpt: frontmatter.excerpt,
+    exports: scopeExports,
+    rawBody: content,
+    frontmatter: {
+      title: ``, // always include a title
+      ...frontmatter,
+    },
   }
 
-  mdxNode.frontmatter = {
-    title: ``, // always include a title
-    ...frontmatter,
-  }
-
-  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
+  return { mdxNode, scopeIdentifiers, scopeImports }
 }
+
+module.exports = createMdxNode
diff --git a/packages/gatsby-plugin-mdx/utils/gen-mdx.js b/packages/gatsby-plugin-mdx/utils/gen-mdx.js
@@ -47,6 +47,7 @@ async function genMDX(
     options,
     getNode,
     getNodes,
+    getNodesByType,
     reporter,
     cache,
     pathPrefix,
@@ -114,6 +115,7 @@ export const _frontmatter = ${JSON.stringify(data)}`
       //          files,
       getNode,
       getNodes,
+      getNodesByType,
       reporter,
       cache,
       pathPrefix,
@@ -194,8 +196,9 @@ ${code}`
 module.exports = genMDX // Legacy API, drop in v3 in favor of named export
 module.exports.genMDX = genMDX
 
-async function findImports({
-  node,
+async function findImportsExports({
+  rawInput,
+  absolutePath = null,
   options,
   getNode,
   getNodes,
@@ -205,12 +208,12 @@ async function findImports({
   pathPrefix,
   ...helpers
 }) {
-  const { content } = grayMatter(node.rawBody)
+  const stuff = grayMatter(rawInput)
+  const { data: frontmatter, content } = stuff
 
   const gatsbyRemarkPluginsAsremarkPlugins = await getSourcePluginsAsRemarkPlugins(
     {
       gatsbyRemarkPlugins: options.gatsbyRemarkPlugins,
-      mdxNode: node,
       getNode,
       getNodes,
       getNodesByType,
@@ -226,18 +229,19 @@ async function findImports({
   )
 
   const compilerOptions = {
-    filepath: node.fileAbsolutePath,
+    filepath: absolutePath,
     ...options,
     remarkPlugins: [
       ...options.remarkPlugins,
       ...gatsbyRemarkPluginsAsremarkPlugins,
     ],
   }
+
   const compiler = mdx.createCompiler(compilerOptions)
 
   const fileOpts = { contents: content }
-  if (node.fileAbsolutePath) {
-    fileOpts.path = node.fileAbsolutePath
+  if (absolutePath) {
+    fileOpts.path = absolutePath
   }
 
   const mdast = await compiler.parse(fileOpts)
@@ -246,16 +250,19 @@ async function findImports({
   // we don't need to dedupe the symbols here.
   const identifiers = []
   const imports = []
+  const exports = []
 
   mdast.children.forEach(node => {
-    if (node.type !== `import`) return
-
-    const importCode = node.value
+    if (node.type === `import`) {
+      const importCode = node.value
 
-    imports.push(importCode)
+      imports.push(importCode)
 
-    const bindings = parseImportBindings(importCode)
-    identifiers.push(...bindings)
+      const bindings = parseImportBindings(importCode)
+      identifiers.push(...bindings)
+    } else if (node.type === `export`) {
+      exports.push(node.value)
+    }
   })
 
   if (!identifiers.includes(`React`)) {
@@ -264,9 +271,11 @@ async function findImports({
   }
 
   return {
+    frontmatter,
     scopeImports: imports,
+    scopeExports: exports,
     scopeIdentifiers: identifiers,
   }
 }
 
-module.exports.findImports = findImports
+module.exports.findImportsExports = findImportsExports