DOP-3009: Convert snooty-frontend to use ESM style imports at build time

gatsby-config.js → gatsby-config.mjs

@@ -1,10 +1,13 @@
-const { generatePathPrefix } = require('./src/utils/generate-path-prefix');
-const { siteMetadata } = require('./src/utils/site-metadata');
-const { isGatsbyPreview } = require('./src/utils/is-gatsby-preview');
+import { createRequire } from 'module';
+import { generatePathPrefix } from './src/utils/generate-path-prefix.mjs';
+import { siteMetadata } from './src/utils/site-metadata.mjs';
+import { isGatsbyPreview } from './src/utils/is-gatsby-preview.mjs';
 
 const isPreview = isGatsbyPreview();
 const pathPrefix = !isPreview ? generatePathPrefix(siteMetadata) : undefined;
 
+const require = createRequire(import.meta.url);
+
 console.log('PATH PREFIX', pathPrefix);
 
 // Specifies which plugins to use depending on build environment
@@ -32,8 +35,4 @@ if (!isPreview) {
   });
 }
 
-module.exports = {
-  plugins,
-  pathPrefix,
-  siteMetadata,
-};
+export { plugins, pathPrefix, siteMetadata };

jest.config.js

@@ -36,5 +36,9 @@ module.exports = {
         '^.+\\.jsx?$': `<rootDir>/jest-preprocess.js`,
       },
     },
+    {
+      displayName: 'tests-esm',
+      testMatch: ['<rootDir>/tests/tests-esm/**/*.test.js'],
+    },
   ],
 };

package.json

@@ -50,7 +50,7 @@
     "prettier": "prettier '**/*.{js,jsx,json,md}'",
     "preversion": "npm run ensure-master && npm run format && npm run lint && npm run test",
     "serve": "gatsby serve --prefix-paths",
-    "test": "jest",
+    "test": "jest --ignore-projects tests-esm",
     "test:unit": "jest unit",
     "version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md"
   },
@@ -102,7 +102,7 @@
     "clipboard": "^2.0.8",
     "dotenv": "^8.2.0",
     "eventsource": "^2.0.2",
-    "gatsby": "^5.0.0",
+    "gatsby": "^5.8.0",
     "gatsby-plugin-emotion": "^8.0.0",
     "gatsby-plugin-google-tagmanager": "^5.0.0",
     "gatsby-plugin-layout": "^4.7.0",

plugins/gatsby-source-snooty-preview/gatsby-node.js → plugins/gatsby-source-snooty-preview/gatsby-node.mjs

@@ -1,25 +1,28 @@
-const { getDataStore } = require('gatsby/dist/datastore');
-const path = require('path');
-const stream = require('stream');
-const { promisify } = require('util');
-const pipeline = promisify(stream.pipeline);
-const got = require(`got`);
-const { parser } = require(`stream-json/jsonl/Parser`);
-const { sourceNodes } = require(`./other-things-to-source`);
-const { fetchClientAccessToken } = require('./utils/kanopy-auth.js');
-const { callPostBuildWebhook } = require('./utils/post-build.js');
-const {
+import { getDataStore } from 'gatsby/dist/datastore/index.js';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import stream from 'stream';
+import { promisify } from 'util';
+import got from 'got';
+import { createRequire } from 'module';
+import parser from 'stream-json/jsonl/Parser.js';
+import { sourceNodes as sourceNodesLocal } from './other-things-to-source.mjs';
+import { fetchClientAccessToken } from './utils/kanopy-auth.mjs';
+import { callPostBuildWebhook } from './utils/post-build.mjs';
+import {
   consumeData,
   createSnootyMetadataId,
   KEY_LAST_FETCHED,
   KEY_LAST_CLIENT_ACCESS_TOKEN,
-} = require('./utils/data-consumer.js');
+} from './utils/data-consumer.mjs';
+
+const pipeline = promisify(stream.pipeline);
 
 // Global variable to allow webhookBody from sourceNodes step to be passed down
 // to other Gatsby build steps that might not pass webhookBody natively.
 let currentWebhookBody = {};
 
-exports.createSchemaCustomization = async ({ actions }) => {
+export const createSchemaCustomization = async ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
     type Page implements Node @dontInfer {
@@ -58,7 +61,7 @@ const APIBase = process.env.API_BASE || `https://snooty-data-api.mongodb.com`;
 const GATSBY_CLOUD_SITE_USER = process.env.GATSBY_CLOUD_SITE_USER;
 
 let isFirstRun = true;
-exports.sourceNodes = async ({
+export const sourceNodes = async ({
   actions,
   createNodeId,
   getNode,
@@ -124,7 +127,7 @@ exports.sourceNodes = async ({
     // Since there's a lot of data incoming from the Snooty Data API, we stream
     // the data in chunks and parse them as they come instead of fetching everything
     // as a single JSON response
-    const decode = parser();
+    const decode = new parser();
     decode.on('data', async (_entry) => {
       // Un-nest data
       const entry = _entry.value;
@@ -154,7 +157,7 @@ exports.sourceNodes = async ({
 
   // Source old nodes.
   console.time(`old source nodes`);
-  await sourceNodes({
+  await sourceNodesLocal({
     hasOpenAPIChangelog,
     github_username: GATSBY_CLOUD_SITE_USER,
     createNode,
@@ -167,7 +170,9 @@ exports.sourceNodes = async ({
 };
 
 // Prevent errors when running gatsby build caused by browser packages run in a node environment.
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+export const onCreateWebpackConfig = ({ plugins, actions }) => {
+  const require = createRequire(import.meta.url);
+
   const providePlugins = {
     Buffer: ['buffer', 'Buffer'],
     process: require.resolve('../../stubs/process.js'),
@@ -186,8 +191,9 @@ exports.onCreateWebpackConfig = ({ plugins, actions }) => {
   });
 };
 
-exports.createPages = async ({ actions, createNodeId, getNode, graphql, reporter }) => {
+export const createPages = async ({ actions, createNodeId, getNode, graphql, reporter }) => {
   const { createPage } = actions;
+  const __dirname = dirname(fileURLToPath(import.meta.url));
   const templatePath = path.join(__dirname, `../../src/components/DocumentBodyPreview.js`);
   const result = await graphql(`
     query {
@@ -252,6 +258,6 @@ exports.createPages = async ({ actions, createNodeId, getNode, graphql, reporter
 // Ideally, we would use Gatsby Cloud's Outgoing Notifications feature once it can
 // support passing through custom data from the preview webhook's body (to include the
 // Autobuilder job ID associated with the GC build).
-exports.onPostBuild = async () => {
+export const onPostBuild = async () => {
   await callPostBuildWebhook(currentWebhookBody, 'completed');
 };

plugins/gatsby-source-snooty-preview/other-things-to-source.js → plugins/gatsby-source-snooty-preview/other-things-to-source.mjs

@@ -1,11 +1,11 @@
-const { siteMetadata } = require('../../src/utils/site-metadata');
-const { realmDocumentDatabase } = require('../../src/init/DocumentDatabase.js');
-const { createOpenAPIChangelogNode } = require('../utils/openapi');
-const { createProductNodes } = require('../utils/products');
+import { siteMetadata } from '../../src/utils/site-metadata.mjs';
+import { realmDocumentDatabase } from '../../src/init/DocumentDatabase.mjs';
+import { createOpenAPIChangelogNode } from '../utils/openapi.mjs';
+import { createProductNodes } from '../utils/products.mjs';
 
 // Sources nodes for the preview plugin that are not directly related to data
 // from the Snooty Data API
-exports.sourceNodes = async ({ hasOpenAPIChangelog, createNode, createContentDigest, createNodeId }) => {
+export const sourceNodes = async ({ hasOpenAPIChangelog, createNode, createContentDigest, createNodeId }) => {
   let db = realmDocumentDatabase;
   await db.connect();
   await createProductNodes({ db, createNode, createNodeId, createContentDigest });

plugins/gatsby-source-snooty-preview/utils/data-consumer.js → plugins/gatsby-source-snooty-preview/utils/data-consumer.mjs

@@ -1,6 +1,6 @@
-const { transformBreadcrumbs } = require('../../../src/utils/setup/transform-breadcrumbs.js');
-const { saveStaticFiles, saveFile } = require('../../../src/utils/setup/save-asset-files');
-const { getNestedValue } = require('../../../src/utils/get-nested-value');
+import { transformBreadcrumbs } from '../../../src/utils/setup/transform-breadcrumbs.mjs';
+import { saveStaticFiles, saveFile } from '../../../src/utils/setup/save-asset-files.mjs';
+import { getNestedValue } from '../../../src/utils/get-nested-value.mjs';
 
 const KEY_LAST_FETCHED = 'lastFetched';
 const KEY_LAST_CLIENT_ACCESS_TOKEN = 'lastClientAccessToken';
@@ -177,4 +177,4 @@ const consumeData = async (
   }
 };
 
-module.exports = { consumeData, createSnootyMetadataId, KEY_LAST_FETCHED, KEY_LAST_CLIENT_ACCESS_TOKEN };
+export { consumeData, createSnootyMetadataId, KEY_LAST_FETCHED, KEY_LAST_CLIENT_ACCESS_TOKEN };

plugins/gatsby-source-snooty-preview/utils/kanopy-auth.js → plugins/gatsby-source-snooty-preview/utils/kanopy-auth.mjs

@@ -72,4 +72,4 @@ const fetchClientAccessToken = async (prevToken) => {
   return prevToken;
 };
 
-module.exports = { fetchClientAccessToken };
+export { fetchClientAccessToken };

plugins/gatsby-source-snooty-preview/utils/post-build.js → plugins/gatsby-source-snooty-preview/utils/post-build.mjs

@@ -1,4 +1,4 @@
-const crypto = require('crypto');
+import crypto from 'crypto';
 
 /**
  * Constructs a signature using the payload and Snooty's secret. The signature
@@ -52,4 +52,4 @@ const callPostBuildWebhook = async (webhookBody, status) => {
   console.log('Post-build webhook was successfully called!');
 };
 
-module.exports = { callPostBuildWebhook };
+export { callPostBuildWebhook };

plugins/gatsby-source-snooty-prod/gatsby-node.js → plugins/gatsby-source-snooty-prod/gatsby-node.mjs

@@ -1,16 +1,18 @@
-const path = require('path');
-const { transformBreadcrumbs } = require('../../src/utils/setup/transform-breadcrumbs.js');
-const { saveAssetFiles, saveStaticFiles } = require('../../src/utils/setup/save-asset-files');
-const { validateEnvVariables } = require('../../src/utils/setup/validate-env-variables');
-const { getNestedValue } = require('../../src/utils/get-nested-value');
-const { removeNestedValue } = require('../../src/utils/remove-nested-value.js');
-const { getPageSlug } = require('../../src/utils/get-page-slug');
-const { manifestMetadata, siteMetadata } = require('../../src/utils/site-metadata');
-const { assertTrailingSlash } = require('../../src/utils/assert-trailing-slash');
-const { constructPageIdPrefix } = require('../../src/utils/setup/construct-page-id-prefix');
-const { manifestDocumentDatabase, realmDocumentDatabase } = require('../../src/init/DocumentDatabase.js');
-const { createOpenAPIChangelogNode } = require('../utils/openapi.js');
-const { createProductNodes } = require('../utils/products.js');
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import { transformBreadcrumbs } from '../../src/utils/setup/transform-breadcrumbs.mjs';
+import { saveAssetFiles, saveStaticFiles } from '../../src/utils/setup/save-asset-files.mjs';
+import { validateEnvVariables } from '../../src/utils/setup/validate-env-variables.mjs';
+import { getNestedValue } from '../../src/utils/get-nested-value.mjs';
+import { removeNestedValue } from '../../src/utils/remove-nested-value.mjs';
+import { getPageSlug } from '../../src/utils/get-page-slug.mjs';
+import { manifestMetadata, siteMetadata } from '../../src/utils/site-metadata.mjs';
+import { assertTrailingSlash } from '../../src/utils/assert-trailing-slash.mjs';
+import { constructPageIdPrefix } from '../../src/utils/setup/construct-page-id-prefix.mjs';
+import { manifestDocumentDatabase, realmDocumentDatabase } from '../../src/init/DocumentDatabase.mjs';
+import { createOpenAPIChangelogNode } from '../utils/openapi.mjs';
+import { createProductNodes } from '../utils/products.mjs';
 
 // different types of references
 const PAGES = [];
@@ -76,7 +78,7 @@ const createRemoteMetadataNode = async ({ createNode, createNodeId, createConten
   }
 };
 
-exports.sourceNodes = async ({ actions, createContentDigest, createNodeId }) => {
+export const sourceNodes = async ({ actions, createContentDigest, createNodeId }) => {
   let hasOpenAPIChangelog = false;
   const { createNode } = actions;
 
@@ -174,8 +176,9 @@ exports.sourceNodes = async ({ actions, createContentDigest, createNodeId }) =>
   });
 };
 
-exports.createPages = async ({ actions }) => {
+export const createPages = async ({ actions }) => {
   const { createPage } = actions;
+  const __dirname = dirname(fileURLToPath(import.meta.url));
 
   let repoBranches = null;
   try {
@@ -249,7 +252,9 @@ exports.createPages = async ({ actions }) => {
 };
 
 // Prevent errors when running gatsby build caused by browser packages run in a node environment.
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+export const onCreateWebpackConfig = ({ plugins, actions }) => {
+  const require = createRequire(import.meta.url);
+
   const providePlugins = {
     Buffer: ['buffer', 'Buffer'],
     process: require.resolve('../../stubs/process.js'),
@@ -270,7 +275,7 @@ exports.onCreateWebpackConfig = ({ plugins, actions }) => {
 
 // Remove type inference, as our schema is too ambiguous for this to be useful.
 // https://www.gatsbyjs.com/docs/scaling-issues/#switch-off-type-inference-for-sitepagecontext
-exports.createSchemaCustomization = ({ actions }) => {
+export const createSchemaCustomization = ({ actions }) => {
   actions.createTypes(`
     type Page implements Node @dontInfer {
       page_id: String

plugins/utils/openapi.js → plugins/utils/openapi.mjs

@@ -1,4 +1,4 @@
-const { hideChanges, hideDiffChanges } = require('../../src/components/OpenAPIChangelog/utils/filterHiddenChanges');
+import { hideChanges, hideDiffChanges } from '../../src/components/OpenAPIChangelog/utils/filterHiddenChanges.mjs';
 
 const atlasAdminProdChangelogS3Prefix = 'https://mongodb-mms-prod-build-server.s3.amazonaws.com/openapi/changelog';
 const atlasAdminDevChangelogS3Prefix = 'https://mongodb-mms-build-server.s3.amazonaws.com/openapi/changelog';
@@ -112,6 +112,4 @@ const createOpenAPIChangelogNode = async ({ createNode, createNodeId, createCont
   }
 };
 
-module.exports = {
-  createOpenAPIChangelogNode,
-};
+export { createOpenAPIChangelogNode };

plugins/utils/products.js → plugins/utils/products.mjs

@@ -1,4 +1,4 @@
-const { baseUrl } = require('../../src/utils/base-url');
+import { baseUrl } from '../../src/utils/base-url.mjs';
 
 const createProductNodes = async ({ db, createNode, createNodeId, createContentDigest }) => {
   // Get all MongoDB products for the sidenav
@@ -20,6 +20,4 @@ const createProductNodes = async ({ db, createNode, createNodeId, createContentD
   });
 };
 
-module.exports = {
-  createProductNodes,
-};
+export { createProductNodes };

src/build-constants.mjs

@@ -0,0 +1,6 @@
+const DOCUMENTS_COLLECTION = 'documents';
+const ASSETS_COLLECTION = 'assets';
+const METADATA_COLLECTION = 'metadata';
+const SNOOTY_REALM_APP_ID = 'snooty-koueq';
+
+export { DOCUMENTS_COLLECTION, ASSETS_COLLECTION, METADATA_COLLECTION, SNOOTY_REALM_APP_ID };

src/components/OpenAPIChangelog/utils/filterHiddenChanges.js → src/components/OpenAPIChangelog/utils/filterHiddenChanges.mjs

@@ -43,4 +43,4 @@ const hideDiffChanges = (diffData) => {
   return updatedDiffData.filter((path) => path.changes?.length);
 };
 
-module.exports = { hideChanges, hideDiffChanges };
+export { hideChanges, hideDiffChanges };

src/init/DocumentDatabase.js → src/init/DocumentDatabase.mjs

@@ -1,9 +1,9 @@
-const AdmZip = require('adm-zip');
-const BSON = require('bson');
-const { initRealm } = require('../utils/setup/init-realm');
-const { DOCUMENTS_COLLECTION, METADATA_COLLECTION, ASSETS_COLLECTION } = require('../build-constants');
-const { manifestMetadata, siteMetadata } = require('../utils/site-metadata');
-const { constructBuildFilter } = require('../utils/setup/construct-build-filter');
+import AdmZip from 'adm-zip';
+import BSON from 'bson';
+import { initRealm } from '../utils/setup/init-realm.mjs';
+import { DOCUMENTS_COLLECTION, METADATA_COLLECTION, ASSETS_COLLECTION } from '../build-constants.mjs';
+import { manifestMetadata, siteMetadata } from '../utils/site-metadata.mjs';
+import { constructBuildFilter } from '../utils/setup/construct-build-filter.mjs';
 
 const DB = siteMetadata.database;
 const buildFilter = constructBuildFilter(siteMetadata);
@@ -126,5 +126,7 @@ class RealmDocumentDatabase {
   }
 }
 
-exports.manifestDocumentDatabase = new ManifestDocumentDatabase(process.env.GATSBY_MANIFEST_PATH);
-exports.realmDocumentDatabase = new RealmDocumentDatabase();
+const manifestDocumentDatabase = new ManifestDocumentDatabase(process.env.GATSBY_MANIFEST_PATH);
+const realmDocumentDatabase = new RealmDocumentDatabase();
+
+export { manifestDocumentDatabase, realmDocumentDatabase };

src/utils/assert-trailing-slash.js → src/utils/assert-trailing-slash.mjs

@@ -5,4 +5,4 @@ const assertTrailingSlash = (url) => {
   return `${url}/`;
 };
 
-module.exports.assertTrailingSlash = assertTrailingSlash;
+export { assertTrailingSlash };

src/utils/base-url.js → src/utils/base-url.mjs

@@ -1,4 +1,4 @@
-const { assertTrailingSlash } = require('./assert-trailing-slash');
+import { assertTrailingSlash } from './assert-trailing-slash.mjs';
 const DOTCOM_BASE_URL = 'https://www.mongodb.com';
 const DOTCOM_BASE_PREFIX = `docs`;
 
@@ -59,4 +59,4 @@ const baseUrl = (url = DOTCOM_BASE_URL, options = {}) => {
   return assertTrailingSlash(needsProtocol ? baseUrl.toString() : baseUrl.toString().split('//')[1]);
 };
 
-module.exports = { baseUrl, DOTCOM_BASE_PREFIX, DOTCOM_BASE_URL };
+export { baseUrl, DOTCOM_BASE_PREFIX, DOTCOM_BASE_URL };

src/utils/generate-path-prefix.js → src/utils/generate-path-prefix.mjs

@@ -1,4 +1,4 @@
-const { normalizePath } = require('./normalize-path');
+import { normalizePath } from './normalize-path.mjs';
 
 const generatePathPrefix = (
   { commitHash, parserBranch, patchId, pathPrefix, project: parserProject, snootyBranch, user },
@@ -32,6 +32,4 @@ const generatePathPrefix = (
   return normalizePath(path);
 };
 
-// TODO: switch to ES6 export syntax if Gatsby implements support for ES6 module imports
-// https://github.com/gatsbyjs/gatsby/issues/7810
-module.exports.generatePathPrefix = generatePathPrefix;
+export { generatePathPrefix };

src/utils/get-meta-from-directive.js

@@ -1,4 +1,4 @@
-const { getNestedValue } = require('./get-nested-value');
+import { getNestedValue } from './get-nested-value.mjs';
 
 // Grabs the metadata values in question and returns them as an array
 // for the Meta & TwitterMeta tags
@@ -33,4 +33,4 @@ const getMetaFromDirective = (type, nodes, target) => {
   return collectionOfMetadata;
 };
 
-module.exports.getMetaFromDirective = getMetaFromDirective;
+export { getMetaFromDirective };