feat!: revert Gatsby 5 changes (#959)

.github/workflows/pr_merged.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
           cache: 'yarn'
 
       - name: Install Dependencies

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.github/workflows/validate_pr.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
 
       - name: Cache dependencies
         id: yarn-cache
@@ -43,7 +43,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
 
       - name: Cache dependencies
         id: yarn-cache

.nvmrc

@@ -1 +1 @@
-18
+16

THIRD_PARTY_NOTICES.md

@@ -26,7 +26,7 @@ code, the source code can be found at [https://github.com/newrelic/gatsby-theme-
 * [eslint-plugin-jsx-a11y](#eslint-plugin-jsx-a11y)
 * [eslint-plugin-react-hooks](#eslint-plugin-react-hooks)
 * [eslint](#eslint)
-* [@emotion/jest](#emotion-jest)
+* [jest-emotion](#jest-emotion)
 * [jest-localstorage-mock](#jest-localstorage-mock)
 * [jest](#jest)
 * [lerna](#lerna)
@@ -459,9 +459,9 @@ THE SOFTWARE.
 
 ```
 
-### @emotion/jest
+### jest-emotion
 
-This product includes source derived from [@emotion/jest](https://github.com/emotion-js/emotion/tree/main/packages/jest) ([v10.0.32](https://github.com/emotion-js/emotion/tree/%40emotion/jest%4011.11.0/packages/jest)), distributed under the [MIT License](https://github.com/emotion-js/emotion/blob/%40emotion/jest%4011.11.0/packages/jest/LICENSE):
+This product includes source derived from [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) ([v10.0.32](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion/tree/v10.0.32)), distributed under the [MIT License](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion/blob/v10.0.32/LICENSE):
 
 ```
 MIT License

demo/gatsby-node.js

@@ -11,16 +11,11 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           isDefault
         }
       }
-      allMdx(
-        filter: { internal: { contentFilePath: { regex: "/src/content/" } } }
-      ) {
+      allMdx(filter: { fileAbsolutePath: { regex: "/src/content/" } }) {
         nodes {
+          slug
           fields {
             fileRelativePath
-            slug
-          }
-          internal {
-            contentFilePath
           }
         }
       }
@@ -38,17 +33,15 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     ({ isDefault }) => !isDefault
   );
 
-  const basicTemplate = path.resolve('src/templates/basic.js');
-
   allMdx.nodes.forEach((node) => {
     const {
-      fields: { fileRelativePath, slug },
-      internal: { contentFilePath },
+      slug,
+      fields: { fileRelativePath },
     } = node;
 
     createPage({
       path: slug,
-      component: `${basicTemplate}?__contentFilePath=${contentFilePath}`,
+      component: path.resolve('src/templates/basic.js'),
       context: {
         slug,
         fileRelativePath,
@@ -72,10 +65,8 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
-        crypto: false,
         http: false,
         https: false,
-        url: false,
         zlib: false,
       },
     },

demo/package.json

@@ -10,18 +10,18 @@
     "lint": "eslint src/ --ext .js --ext .mjs"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/mdx": "^1.6.16",
+    "@mdx-js/react": "^1.6.16",
     "@newrelic/gatsby-theme-newrelic": "^3.2.0",
-    "gatsby": "^5.0.0",
-    "gatsby-plugin-mdx": "^5.11.0",
-    "gatsby-plugin-sharp": "^5.0.0",
+    "gatsby": "^4.25.2",
+    "gatsby-plugin-mdx": "^2.10.1",
+    "gatsby-plugin-sharp": "4.25.0",
     "gatsby-remark-autolink-headers": "^4.7.0",
-    "gatsby-remark-images": "^7.12.0",
-    "gatsby-source-filesystem": "^5.0.0",
-    "gatsby-transformer-sharp": "^5.0.0",
+    "gatsby-remark-images": "^5.7.0",
+    "gatsby-source-filesystem": "^4.25.0",
+    "gatsby-transformer-sharp": "4.25.0",
     "github-slugger": "^1.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
-}
+}

demo/src/templates/basic.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { graphql } from 'gatsby';
 import {
   ContributingGuidelines,
@@ -15,10 +15,10 @@ import {
 import GitHubSlugger from 'github-slugger';
 import toString from 'mdast-util-to-string';
 
-const BasicTemplate = ({ data, location, children }) => {
+const BasicTemplate = ({ data, location }) => {
   const slugger = useMemo(() => new GitHubSlugger(), []);
   const {
-    mdx: { frontmatter, fields, relatedResources, mdxAST },
+    mdx: { body, frontmatter, fields, relatedResources, mdxAST },
   } = data;
 
   const headings = useMemo(() => {
@@ -39,11 +39,34 @@ const BasicTemplate = ({ data, location, children }) => {
   return (
     <>
       <SEO location={location} title={frontmatter.title} />
-      <Main>
-        <Title>{frontmatter.title}</Title>
+      <Layout.Main
+        css={css`
+          display: grid;
+          grid-template-areas:
+            'page-title page-tools'
+            'content page-tools';
+          grid-template-columns: minmax(0, 1fr) 320px;
+          grid-column-gap: var(--site-content-padding);
+
+          @media screen and (max-width: 760px) {
+            grid-template-areas:
+              'page-title'
+              'content'
+              'page-tools';
+            grid-template-columns: minmax(0, 1fr);
+          }
+        `}
+      >
+        <h1
+          css={css`
+            grid-area: page-title;
+          `}
+        >
+          {frontmatter.title}
+        </h1>
         <Layout.Content>
           <MarkdownContainer>
-            <MDX>{children}</MDX>
+            <MDX body={body} />
           </MarkdownContainer>
         </Layout.Content>
 
@@ -56,41 +79,20 @@ const BasicTemplate = ({ data, location, children }) => {
           <TableOfContents headings={headings} />
           <RelatedResources resources={relatedResources} />
         </Layout.PageTools>
-      </Main>
+      </Layout.Main>
     </>
   );
 };
 
 BasicTemplate.propTypes = {
-  children: PropTypes.node.isRequired,
   data: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
 };
 
-const Main = styled(Layout.Main)`
-  display: grid;
-  grid-template-areas:
-    'page-title page-tools'
-    'content page-tools';
-  grid-template-columns: minmax(0, 1fr) 320px;
-  grid-column-gap: var(--site-content-padding);
-
-  @media screen and (max-width: 760px) {
-    grid-template-areas:
-      'page-title'
-      'content'
-      'page-tools';
-    grid-template-columns: minmax(0, 1fr);
-  }
-`;
-
-const Title = styled.h1`
-  grid-area: page-title;
-`;
-
 export const pageQuery = graphql`
   query ($slug: String!) {
-    mdx(fields: { slug: { eq: $slug } }) {
+    mdx(slug: { eq: $slug }) {
+      body
       mdxAST
       frontmatter {
         title

jest-preprocess.js

@@ -0,0 +1,3 @@
+module.exports = require('babel-jest').createTransformer({
+  presets: ['babel-preset-gatsby', '@emotion/babel-preset-css-prop'],
+});

jest.config.js

@@ -1,25 +1,18 @@
-/** @type {import('jest').Config} */
-
-// for Date mocks
-process.env.TZ = 'PST';
-
 module.exports = {
-  testEnvironment: 'jsdom',
-  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.m?[jt]sx?$',
   transform: {
-    '^.+\\.m?js$': '<rootDir>/jest-preprocess.mjs',
+    '^.+\\.js$': '<rootDir>/jest-preprocess.js',
   },
   testPathIgnorePatterns: ['node_modules', '\\.cache/'],
   globals: {
     __PATH_PREFIX__: '',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(gatsby|gatsby-plugin-mdx|gatsby-link|gatsby-script|react-use)/)',
+    'node_modules/(?!(gatsby|gatsby-plugin-mdx|gatsby-link|gatsby-script)/)',
   ],
-  setupFiles: ['<rootDir>/loadershim.mjs', 'jest-localstorage-mock'],
-  setupFilesAfterEnv: ['<rootDir>/setup-test-env.mjs'],
-  moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'mjs'],
+  setupFiles: ['<rootDir>/loadershim.js', 'jest-localstorage-mock'],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
   moduleNameMapper: {
     '^@reach/router(.*)': '<rootDir>/node_modules/@gatsbyjs/reach-router$1',
+    '^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1`,
   },
 };

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+};

package.json

@@ -9,31 +9,28 @@
     "clean": "yarn workspace demo clean",
     "start": "yarn workspace demo develop",
     "release": "lerna publish --no-verify-access --conventional-commits --create-release github --no-private",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "test": "jest",
     "test:watch": "yarn test --watch",
     "lint": "lerna run lint",
     "extract-i18n": "yarn workspace @newrelic/gatsby-theme-newrelic extract-i18n"
   },
   "devDependencies": {
-    "@emotion/jest": "^11.11.0",
     "@newrelic/eslint-plugin-newrelic": "^0.3.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
-    "babel-jest": "^29.7.0",
-    "babel-preset-gatsby": "^3.12.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/react-hooks": "^5.1.1",
+    "babel-jest": "^26.3.0",
+    "babel-preset-gatsby": "^0.5.16",
     "eslint": "^7.4.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest": "^26.4.0",
+    "jest-emotion": "^10.0.32",
     "jest-fetch-mock": "^3.0.3",
     "jest-localstorage-mock": "^2.4.3",
     "lerna": "^5.6.2",
     "prettier": "^2.0.5",
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^16.13.1"
   }
 }