pref(gatsby-plugin-mdx): add lessBabel option, 40% perf win (#27941)

* pref(gatsby-plugin-mdx): add lessBabel option, 40% perf win

* clean up

* Add e2e tests with the lessBabel option

* Add `lessBabel` option to other mdx tests where relevant

Author: pvdz

benchmarks/gabe-fs-mdx/gatsby-config.js

@@ -10,6 +10,11 @@ module.exports = {
         path: `${__dirname}/generated_articles/`,
       },
     },
-    `gatsby-plugin-mdx`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        lessBabel: true,
+      },
+    },
   ],
 }

e2e-tests/mdx-less-babel/.gitignore

@@ -0,0 +1,11 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store
+
+# Cypress output
+cypress/videos/

e2e-tests/mdx-less-babel/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:9000"
+}

e2e-tests/mdx-less-babel/cypress/integration/pages.js

@@ -0,0 +1,38 @@
+/* global cy */
+
+describe(`Pages`, () => {
+    it(`can be created with MDX`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.get(`h2`).invoke(`text`).should(`eq`, `Do you work`)
+    })
+
+    it(`can include shortcode component`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.getTestElement(`shortcode`).contains(`I am an example of a component in MDX.`)
+    })
+
+    it(`can include external import`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.getTestElement(`external`).contains(`Now an external import`)
+    })
+
+    it (`generates slug for mdx in pages dir`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`mdx-slug`).contains(`another`)
+    })
+
+    it (`generates complex slug with md extension`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`md-slug`).contains(`my-blog`)
+    })
+
+    it (`generates a slug with an index file`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`complex-slug`).contains(`about`)
+    })
+
+    it (`generates a slug with a slash`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`embed-slug`).contains(`about/embedded`)
+    })
+})

e2e-tests/mdx-less-babel/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

e2e-tests/mdx-less-babel/cypress/support/index.js

@@ -0,0 +1,16 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import "gatsby-cypress"

e2e-tests/mdx-less-babel/gatsby-config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby MDX e2e`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/posts`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        lessBabel: true,
+        extensions: [`.mdx`, `.md`],
+        defaultLayouts: {
+          default: require.resolve("./src/components/layout.js"),
+        },
+        remarkPlugins: [remarkRequireFilePathPlugin],
+      },
+    },
+  ],
+}
+
+/**
+ * This is a test to ensure that `gatsby-plugin-mdx` correctly pass the `file` argument to the underlying remark plugins.
+ * See #26914 for more info.
+ */
+function remarkRequireFilePathPlugin() {
+  return function transformer(tree, file) {
+    if (!file.dirname) {
+      throw new Error("No directory name for this markdown file!")
+    }
+  }
+}

e2e-tests/mdx-less-babel/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "gatsby-mdx-tester",
+  "description": "Gatsby MDX tester",
+  "version": "1.0.0",
+  "dependencies": {
+    "@mdx-js/mdx": "^1.6.6",
+    "@mdx-js/react": "^1.6.6",
+    "cypress": "^3.1.0",
+    "gatsby": "^2.0.118",
+    "gatsby-plugin-mdx": "^1.2.19",
+    "gatsby-source-filesystem": "^2.3.14",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "theme-ui": "^0.3.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write '**/*.js'",
+    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
+    "serve": "gatsby serve",
+    "cy:open": "cypress open",
+    "cy:run": "(is-ci && cypress run --browser chrome --record) || cypress run --browser chrome"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "gatsby-cypress": "^0.1.7",
+    "is-ci": "^2.0.0",
+    "prettier": "2.0.4",
+    "start-server-and-test": "^1.7.1"
+  }
+}

e2e-tests/mdx-less-babel/src/components/example.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const Example = () => (
+    <div data-testid="shortcode">I am an example of a component in MDX.</div>
+)
+
+export default Example

e2e-tests/mdx-less-babel/src/components/layout.js

@@ -0,0 +1,10 @@
+import React from "react"
+import { MDXProvider } from "@mdx-js/react"
+import Example from "./example"
+
+const shortcodes = { Example }
+export default function Layout({ children }) {
+    return (
+        <MDXProvider components={shortcodes}>{children}</MDXProvider>
+    )
+}

e2e-tests/mdx-less-babel/src/pages/another.mdx

@@ -0,0 +1 @@
+This is to add another source page for slugification.

e2e-tests/mdx-less-babel/src/pages/index.mdx

@@ -0,0 +1,17 @@
+import { Message } from "theme-ui"
+
+Let's go MDX!
+
+## Do you work
+
+- nobody knows
+
+````
+```javascript
+const codefence = true
+```
+````
+
+<Example/>
+
+<Message data-testid="external">Now an external import</Message>

e2e-tests/mdx-less-babel/src/pages/list.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const ListPage = ({ data }) => {
+  const anotherPage = data.another.nodes[0]
+  const blogPage = data.blog.nodes[0]
+  const aboutPage = data.complex.nodes[0]
+  const embedPage = data.embed.nodes[0]
+
+
+  return (
+    <div>
+      <div data-testid="mdx-slug">{anotherPage.slug}</div>
+      <div data-testid="md-slug">{blogPage.slug}</div>
+      <div data-testid="complex-slug">{aboutPage.slug}</div>
+      <div data-testid="embed-slug">{embedPage.slug}</div>
+
+    </div>
+  )
+}
+
+export const query = graphql`
+{
+    another: allMdx(filter: {slug: {eq: "another"}}) {
+      nodes {
+        slug
+      }
+    }
+    blog: allMdx(filter: {slug: {eq: "my-blog"}}) {
+      nodes {
+        slug
+      }
+    }
+    complex: allMdx(filter: {slug: {eq: "about/"}}) {
+      nodes {
+        slug
+      }
+    }
+    embed: allMdx(filter: {slug: {eq: "about/embedded"}}) {
+      nodes {
+        slug
+      }
+    }
+  }
+`
+export default ListPage

e2e-tests/mdx-less-babel/src/posts/about/embedded.mdx

@@ -0,0 +1 @@
+This is a page that should include a slash slug

e2e-tests/mdx-less-babel/src/posts/about/index.mdx

@@ -0,0 +1 @@
+This should be an about page we can access with a nested slug.

e2e-tests/mdx-less-babel/src/posts/my-blog.md

@@ -0,0 +1 @@
+Let's see if we can generate a slug for this too

e2e-tests/mdx/gatsby-config.js

@@ -20,6 +20,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
+        lessBabel: false,
         extensions: [`.mdx`, `.md`],
         defaultLayouts: {
           default: require.resolve("./src/components/layout.js"),

packages/gatsby-plugin-mdx/__tests__/gatsby-node.js

@@ -48,6 +48,7 @@ describe(`pluginOptionsSchema`, () => {
         },
         `gatsby-remark-other-plugin`,
       ],
+      lessBabel: false,
       remarkPlugins: [
         require(`../gatsby-node.js`),
         [require(`../gatsby-node.js`), { target: false }],

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

@@ -90,6 +90,11 @@ exports.pluginOptionsSchema = function ({ Joi }) {
       )
       .default([])
       .description(`Use Gatsby-specific remark plugins`),
+    lessBabel: Joi.boolean()
+      .default(false)
+      .description(
+        "Enable fast parsing mode? This may break certain implied transformation dependencies. Disable if you have problems"
+      ),
     remarkPlugins: Joi.array()
       .items(
         Joi.function(),