refactor(docs-page): pass scope down to MDX renderer (#437)

* fix: use `this.opts`

* chore: changeset

* chore: TS errors

.changeset/olive-lions-matter.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-docs-page': minor
+---
+
+Refactor internal data loader code. Pass `scope` option to MDX renderer

packages/docs-page/server/index.ts

@@ -18,6 +18,7 @@ interface BaseOpts {
   fallback?: GetStaticPathsResult['fallback']
   revalidate?: number
   product: string
+  scope?: Record<string, $TSFixMe>
 }
 
 export function getStaticGenerationFunctions(
@@ -148,7 +149,10 @@ export function generateStaticProps({
     localContentDir,
     product: product.slug,
     paramId,
+    scope,
+    remarkPlugins,
+    mainBranch,
   })
 
-  return loader.loadStaticProps({ params, remarkPlugins, scope, mainBranch })
+  return loader.loadStaticProps({ params })
 }

packages/docs-page/server/loaders/file-system.ts

@@ -1,5 +1,6 @@
 import path from 'path'
 import fs from 'fs'
+import { GetStaticPropsContext } from 'next'
 import { getPathsFromNavData } from '../get-paths-from-nav-data'
 import { resolveNavData } from '../resolve-nav-data'
 
@@ -14,22 +15,17 @@ import { DataLoader, DataLoaderOpts } from './types'
 interface FileSystemLoaderOpts extends DataLoaderOpts {
   navDataFile: string
   localContentDir: string
-}
-
-export interface FileSystemLoaderContext {
-  params: Record<string, string[]> // {} | { page: ["destroy"] }
   mainBranch?: string // = 'main',
   remarkPlugins?: $TSFixMe[]
-  scope?: Record<string, $TSFixMe> // optional, I think?
+  scope?: Record<string, $TSFixMe>
 }
 
 export default class FileSystemLoader implements DataLoader {
-  opts: FileSystemLoaderOpts
-
-  constructor(opts: FileSystemLoaderOpts) {
-    this.opts = opts
-
+  constructor(public opts: FileSystemLoaderOpts) {
     if (!this.opts.paramId) this.opts.paramId = DEFAULT_PARAM_ID
+    if (!this.opts.mainBranch) this.opts.mainBranch = 'main'
+    if (!this.opts.scope) this.opts.scope = {}
+    if (!this.opts.remarkPlugins) this.opts.remarkPlugins = []
   }
 
   loadStaticPaths = async (): Promise<$TSFixMe> => {
@@ -42,18 +38,15 @@ export default class FileSystemLoader implements DataLoader {
 
   loadStaticProps = async ({
     params,
-    remarkPlugins = [],
-    scope,
-    mainBranch = 'main',
-  }: FileSystemLoaderContext): Promise<$TSFixMe> => {
+  }: GetStaticPropsContext): Promise<$TSFixMe> => {
     const mdxRenderer = (mdx) =>
       renderPageMdx(mdx, {
-        remarkPlugins,
-        scope,
+        remarkPlugins: this.opts.remarkPlugins,
+        scope: this.opts.scope,
       })
     // Build the currentPath from page parameters
     const currentPath = params[this.opts.paramId]
-      ? params[this.opts.paramId].join('/')
+      ? (params[this.opts.paramId] as string[]).join('/')
       : ''
     //  Read in the nav data, and resolve local filePaths
     const navData = await resolveNavData(
@@ -75,7 +68,7 @@ export default class FileSystemLoader implements DataLoader {
     const normalizedFilePath = navNode.filePath
       .split(path.sep)
       .join(path.posix.sep)
-    const githubFileUrl = `https://github.com/hashicorp/${this.opts.product}/blob/${mainBranch}/website/${normalizedFilePath}`
+    const githubFileUrl = `https://github.com/hashicorp/${this.opts.product}/blob/${this.opts.mainBranch}/website/${normalizedFilePath}`
     // Return all the props
     return {
       currentPath,

packages/docs-page/server/loaders/remote-content.ts

@@ -1,5 +1,6 @@
 import moize, { Options } from 'moize'
 import semver from 'semver'
+import { GetStaticPropsContext } from 'next'
 import renderPageMdx from '../../render-page-mdx'
 import {
   fetchNavData,
@@ -13,16 +14,12 @@ import { DEFAULT_PARAM_ID } from '../consts'
 import { DataLoader, DataLoaderOpts } from './types'
 import { getPathsFromNavData } from '../get-paths-from-nav-data'
 
-export interface RemoteContentLoaderContext {
-  params: Record<string, string[]> // {} | { page: ["destroy"] }
-  mainBranch?: string // = 'main',
-  remarkPlugins?: $TSFixMe[]
-  scope?: Record<string, $TSFixMe> // optional, I think?
-}
-
 interface RemoteContentLoaderOpts extends DataLoaderOpts {
   basePath: string
   enabledVersionedDocs?: boolean
+  remarkPlugins?: $TSFixMe[]
+  mainBranch?: string // = 'main',
+  scope?: Record<string, $TSFixMe>
 }
 
 /**
@@ -79,16 +76,15 @@ export function mapVersionList(
 }
 
 export default class RemoteContentLoader implements DataLoader {
-  opts: RemoteContentLoaderOpts
-
-  constructor(opts: RemoteContentLoaderOpts) {
-    this.opts = opts
-
+  constructor(public opts: RemoteContentLoaderOpts) {
     if (typeof this.opts.enabledVersionedDocs === 'undefined')
       this.opts.enabledVersionedDocs =
         process.env.ENABLE_VERSIONED_DOCS?.toString() === 'true'
 
     if (!this.opts.paramId) this.opts.paramId = DEFAULT_PARAM_ID
+    if (!this.opts.mainBranch) this.opts.mainBranch = 'main'
+    if (!this.opts.scope) this.opts.scope = {}
+    if (!this.opts.remarkPlugins) this.opts.remarkPlugins = []
   }
 
   loadStaticPaths = async (): Promise<$TSFixMe> => {
@@ -107,24 +103,21 @@ export default class RemoteContentLoader implements DataLoader {
 
   loadStaticProps = async ({
     params,
-    mainBranch = 'main', // we should pull this from config
-    remarkPlugins = [], // do we really need this?
-    scope, // only used once: https://sourcegraph.hashi-mktg.com/search?q=scope:+lang:javascript+file:website*&patternType=literal this can also be passed to the component
-  }: RemoteContentLoaderContext): Promise<$TSFixMe> => {
+  }: GetStaticPropsContext): Promise<$TSFixMe> => {
     // Build the currentPath from page parameters
     const currentPath = params[this.opts.paramId]
-      ? params[this.opts.paramId].join('/')
+      ? (params[this.opts.paramId] as string[]).join('/')
       : ''
 
     const mdxRenderer = (mdx) =>
       renderPageMdx(mdx, {
-        remarkPlugins,
-        scope,
+        remarkPlugins: this.opts.remarkPlugins,
+        scope: this.opts.scope,
       })
 
     // given: v0.5.x (latest), v0.4.x, v0.3.x
     const [versionFromPath, paramsNoVersion] = stripVersionFromPathParams(
-      params[this.opts.paramId]
+      params[this.opts.paramId] as string[]
     )
 
     const versionMetadataList: VersionMetadataItem[] = await cachedFetchVersionMetadataList(
@@ -181,7 +174,7 @@ export default class RemoteContentLoader implements DataLoader {
       ).isLatest
       if (isLatest) {
         // GitHub only allows you to modify a file if you are on a branch, not a commit
-        githubFileUrl = `https://github.com/hashicorp/${this.opts.product}/blob/${mainBranch}/${document.githubFile}`
+        githubFileUrl = `https://github.com/hashicorp/${this.opts.product}/blob/${this.opts.mainBranch}/${document.githubFile}`
       }
     }