benchmarks(mdx): add new baseline mdx benchmark

benchmarks/mdx2/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

benchmarks/mdx2/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.cache/
+public/
+.env
+generated_articles
+.DS_Store

benchmarks/mdx2/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  endOfLine: "lf",
+  semi: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+}

benchmarks/mdx2/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Peter van der Zee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

benchmarks/mdx2/README.md

@@ -0,0 +1,31 @@
+# MDX Benchmark
+
+This is a baseline benchmark for tracking MDX performance.
+
+The site can generate an arbitrary amount of super simple pages. Each page has a small header, imports a file, and has two small paragraphs of random text. No images, because we want to benchmark MDX.
+
+This uses the local file system plugin, though we might switch to sourcing from csv since that has a more efficient internal representation (fewer `File` nodes).
+
+## Install
+
+Run `yarn` or `npm install`
+
+## Usage
+
+You can start a benchmark run like this:
+
+```shell
+CI=1 N=1000 M=2 yarn bench
+```
+
+- `CI=1`: this enables the fastest reporter, with simplest output, that we have
+- `N=1000`: instructs the run to build a site of 1000 pages
+- `M=2`: instructs nodejs to use up to 2gb of memory for its long term storage
+- Deletes generates files from previous run
+- Generates `N` pages with pseudo-random content
+- Runs `gatsby clean`
+- Runs `gatsby build`
+
+The default `yarn bench` will build 512 pages with 1gb memory.
+
+There is also `yarn bench:inspect` for debugging with the Chrome devtools.

benchmarks/mdx2/gatsby-browser.js

@@ -0,0 +1 @@
+import "./styles.css"

benchmarks/mdx2/gatsby-config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  siteMetadata: {
+    siteTitle: `Gatsby MDX Benchmark`,
+  },
+  plugins: [
+    // Skip the plugin if NBR is set
+    ...process.env.NBR ? [] : [`gatsby-plugin-benchmark-reporting`],
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "articles",
+        path: `${__dirname}/generated_articles/`,
+      },
+    },
+    `gatsby-plugin-mdx`,
+  ],
+}

benchmarks/mdx2/gatsby-node.js

@@ -0,0 +1,69 @@
+const path = require("path")
+const { createFilePath } = require("gatsby-source-filesystem")
+
+exports.onCreateNode = (args) => {
+  const { node, actions, getNode, ...rest } = args;
+  const { createNodeField } = actions
+
+  if (node.internal.type === "Mdx") {
+    const value = createFilePath({ node, getNode })
+
+    createNodeField({
+      name: "path",
+      node,
+      value,
+    })
+  }
+}
+
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const progress = reporter.createProgress(`(userland gatsby-node) createPages`)
+  console.time("(userland gatsby-node) total exports.createPages")
+  progress.setStatus("initial graphl query")
+
+  const { createPage } = actions
+
+  console.time("(userland gatsby-node) initial graphql query")
+  const result = await graphql(`
+    query {
+      allMdx {
+        edges {
+          node {
+            id
+            fields {
+              path
+            }
+          }
+        }
+      }
+    }
+  `)
+  console.timeEnd("(userland gatsby-node) initial graphql query")
+
+  if (result.errors) {
+    reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query')
+  }
+
+  console.time("(userland gatsby-node) created pages")
+
+  const posts = result.data.allMdx.edges
+
+  progress.start()
+  progress.total = posts.length
+  progress.setStatus("Calling createPage for all pages")
+
+  posts.forEach(({ node }) => {
+    createPage({
+      path: node.fields.path,
+      component: path.resolve(`./src/templates/article.js`),
+      context: { id: node.id },
+    })
+    progress.tick(1)
+  })
+
+  console.timeEnd("(userland gatsby-node) created pages")
+  console.timeEnd("(userland gatsby-node) total exports.createPages")
+
+  progress.done()
+}

benchmarks/mdx2/gen.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const path = require('path')
+const faker = require(`faker`)
+
+const N = parseInt(process.env.N, 10) || 100;
+
+let n = 0;
+function createArticle(n, sentence, slug) {
+  return `---
+articleNumber: ${n}
+title: "${sentence.replace(/"/g, '\\"')}"
+path: '${slug}'
+date: ${faker.date.recent(1000).toISOString().slice(0, 10)}
+---
+
+import { Link } from "gatsby"
+
+export const author = "Fred Flintstone"
+export default props => <main {...props} />
+
+<Link to="/">Go Home</Link>
+
+${faker.lorem.paragraphs(2)}
+  `;
+}
+
+console.log('Start of gen')
+
+if (fs.existsSync('./generated_articles')) {
+  TODO // count existing folders. If they are less than given number, just amend to them. Otherwise abort and require a rimraf
+} else {
+  fs.mkdirSync('./generated_articles', {recursive: true});
+}
+
+console.log('Now generating ' + N + ' articles');
+for (let i=0; i<N; ++i) {
+  const sentence = faker.lorem.sentence();
+  const slug = faker.helpers.slugify(sentence).toLowerCase();
+  fs.writeFileSync(path.join('./generated_articles', slug + '.mdx'), createArticle(i, sentence, slug))
+}
+console.log('Finished generating ' + N + ' articles');
+console.log('End of gen')
+

benchmarks/mdx2/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "mdx2",
+  "private": true,
+  "description": "Benchmark site for testing baseline mdx perf",
+  "author": "Peter van der Zee <pvdz@github>",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "bench": "rm -rf generated_articles; gatsby clean; N=${N:-512} node gen.js; NBR=1 node --max_old_space_size=${M:-2}000 node_modules/.bin/gatsby build",
+    "bench:inspect": "rm -rf generated_articles; gatsby clean; N=${N:-512} node gen.js; NBR=1 node --inspect --max_old_space_size=${M:-2}000 node_modules/.bin/gatsby build",
+    "build": "gatsby build",
+    "clean": "gatsby clean",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "1.6.6",
+    "@mdx-js/react": "1.6.6",
+    "faker": "^4.1.0",
+    "front-matter": "4.0.2",
+    "gatsby": "2.24.2",
+    "gatsby-plugin-benchmark-reporting": "*",
+    "gatsby-plugin-mdx": "1.2.25",
+    "gatsby-plugin-page-creator": "2.3.10",
+    "gatsby-source-filesystem": "2.3.18",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "remark-react": "^7.0.1"
+  },
+  "devDependencies": {
+    "prettier": "2.0.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby/tree/master/benchmarks/mdx2"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}

benchmarks/mdx2/src/components/layout_1.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const Layout = ({ children }) => (
+  <>
+    <header>
+      <h1>Header A</h1>
+    </header>
+    <main>{children}</main>
+  </>
+)
+
+export default Layout

benchmarks/mdx2/src/components/layout_2.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+const Layout = ({ children }) => (
+  <>
+    <header>
+      <h1>Header B</h1>
+    </header>
+    <main>{children}</main>
+  </>
+)
+
+export default Layout

benchmarks/mdx2/src/pages/#index.js#

@@ -0,0 +1,40 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import Layout from "../components/layout_1"
+
+const Index = ({ data }) => {
+  return (
+    <Layout>
+      {data.site.siteMetadata.siteTitle}
+      <ul>
+        { data?.articles?.nodes.map((article) => (
+          <li key={article.fields.path}>
+            <Link to={article.fields.path}>{article.frontmatter.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  )
+}
+
+export default Index
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        siteTitle
+      }
+    }
+    articles: allMdx(limit: 100) {
+      nodes {
+        frontmatter {
+          title
+        }
+        fields {
+          path
+        }
+      }
+    }
+  }
+`

benchmarks/mdx2/src/pages/index.js

@@ -0,0 +1,40 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import Layout from "../components/layout_1"
+
+const Index = ({ data }) => {
+  return (
+    <Layout>
+      {data.site.siteMetadata.siteTitle}
+      <ul>
+        {data?.articles?.nodes.map((article) => (
+          <li key={article.fields.path}>
+            <Link to={article.fields.path}>{article.frontmatter.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  )
+}
+
+export default Index
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        siteTitle
+      }
+    }
+    articles: allMdx(limit: 100) {
+      nodes {
+        frontmatter {
+          title
+        }
+        fields {
+          path
+        }
+      }
+    }
+  }
+`

benchmarks/mdx2/src/templates/article.js

@@ -0,0 +1,34 @@
+import React from "react"
+import { graphql, Link } from "gatsby"
+import Layout from "../components/layout_1"
+import { MDXRenderer } from "gatsby-plugin-mdx"
+
+const Article = ({ data }) => {
+  const { body } = data.mdx
+  const { mdx } = data
+
+  return (
+    <Layout>
+      <Link to="/">Go back to index page</Link>
+      <div>
+        <h1>{mdx.frontmatter.title}</h1>
+        <div>
+          <MDXRenderer>{body}</MDXRenderer>
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query MdxQuery($id: String!) {
+    mdx(id: { eq: $id }) {
+      body
+      frontmatter {
+        title
+      }
+    }
+  }
+`
+
+export default Article