fix: Make sure frontmatter types flow through to MDXRemote (#351)

.jest/utils.tsx

@@ -25,10 +25,10 @@ export async function renderStatic(
   mdx: VFileCompatible,
   {
     components,
-    scope,
+    scope = {},
     mdxOptions,
     parseFrontmatter,
-  }: SerializeOptions & Pick<MDXRemoteProps, 'components'> = {}
+  }: Partial<SerializeOptions & Pick<MDXRemoteProps, 'components'>> = {}
 ): Promise<string> {
   const mdxSource = await serialize(mdx, {
     mdxOptions,
@@ -55,7 +55,7 @@ export async function getPathToPackedPackage() {
 
 // Create a temporary directory from one of our fixtures to run isolated tests in
 // Handles installing the locally-packed next-mdx-remote
-export async function createTmpTestDir(fixture) {
+export async function createTmpTestDir(fixture: string) {
   const tmpDir = await fs.promises.mkdtemp(
     path.join(os.tmpdir(), `next-mdx-remote-${fixture}-`)
   )
@@ -93,8 +93,8 @@ export function createDescribe(
   fn: ({ dir }: { dir: () => string; browser: () => Browser }) => void
 ): void {
   describe(name, () => {
-    let tmpDir
-    let browser
+    let tmpDir: string
+    let browser: Browser
 
     beforeAll(async () => {
       tmpDir = await createTmpTestDir(options.fixture)
@@ -187,7 +187,7 @@ export function readOutputFile(dir: string, name: string) {
 
 // Serves the out directory relative to the provided dir on port 1235
 // TODO: we should just use next start
-export function serveStatic(dir): Promise<Server> {
+export function serveStatic(dir: string): Promise<Server> {
   return new Promise((resolve) => {
     const server = http.createServer((req, res) =>
       handler(req, res, {

.npmignore

@@ -6,3 +6,4 @@ babel.config.js
 src
 .circleci
 *.tgz
+global.d.ts

__tests__/integration.test.tsx

@@ -14,6 +14,7 @@ import {
   startDevServer,
   stopDevServer,
 } from '../.jest/utils'
+import { ChildProcess } from 'child_process'
 
 jest.setTimeout(30000)
 
@@ -89,7 +90,7 @@ createDescribe(
   'hydration - dev server',
   { fixture: 'basic' },
   ({ dir, browser }) => {
-    let childProcess
+    let childProcess: ChildProcess
 
     beforeAll(async () => {
       childProcess = await startDevServer(dir())
@@ -121,7 +122,7 @@ createDescribe(
   'hydration - dev server - rsc',
   { fixture: 'rsc' },
   ({ dir, browser }) => {
-    let childProcess
+    let childProcess: ChildProcess
 
     beforeAll(async () => {
       childProcess = await startDevServer(dir())

__tests__/serialize.test.tsx

@@ -13,6 +13,10 @@ import { MDXRemote } from '../'
 import { serialize } from '../serialize'
 import { renderStatic } from '../.jest/utils'
 
+interface Frontmatter {
+  hello: string
+}
+
 describe('serialize', () => {
   test('minimal', async () => {
     const result = await renderStatic('foo **bar**')
@@ -22,7 +26,7 @@ describe('serialize', () => {
   test('with component', async () => {
     const result = await renderStatic('foo <Test name="test" />', {
       components: {
-        Test: ({ name }) => <span>hello {name}</span>,
+        Test: ({ name }: { name: string }) => <span>hello {name}</span>,
       },
     })
     expect(result).toMatchInlineSnapshot(`"<p>foo <span>hello test</span></p>"`)
@@ -118,7 +122,7 @@ export const bar = 'bar'`)
 
   test('fragments', async () => {
     const components = {
-      Test: ({ content }) => content,
+      Test: ({ content }: { content: string }) => <>{content}</>,
     }
 
     const result = await renderStatic(
@@ -129,6 +133,22 @@ export const bar = 'bar'`)
   })
 
   test('parses frontmatter - serialize result', async () => {
+    const result = await serialize<Record<string, unknown>, Frontmatter>(
+      `---
+hello: world
+---
+
+# Hello`,
+      { parseFrontmatter: true }
+    )
+
+    // Validating type correctness here, this should not error
+    expect(<MDXRemote {...result} />).toBeTruthy()
+
+    expect(result.frontmatter?.hello).toEqual('world')
+  })
+
+  test('parses frontmatter - serialize result - no types', async () => {
     const result = await serialize(
       `---
 hello: world
@@ -138,6 +158,9 @@ hello: world
       { parseFrontmatter: true }
     )
 
+    // Validating type correctness here, this should not error
+    expect(<MDXRemote {...result} />).toBeTruthy()
+
     expect(result.frontmatter?.hello).toEqual('world')
   })
 

global.d.ts

@@ -0,0 +1 @@
+declare module '@hashicorp/remark-plugins'

package.json

@@ -30,6 +30,7 @@
     "@types/node": "^16.11.6",
     "@types/puppeteer": "^5.4.4",
     "@types/react": "^17.0.33",
+    "@types/react-dom": "^18.0.11",
     "@types/rmfr": "^2.0.1",
     "@types/serve-handler": "^6.1.1",
     "cheerio": "^1.0.0-rc.10",
@@ -41,8 +42,8 @@
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
     "puppeteer": "^10.4.0",
-    "react-dom": "^18.2.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "release": "^6.3.0",
     "rmfr": "^2.0.0",
     "rollup": "^2.59.0",
@@ -86,7 +87,9 @@
     "release:patch": "release patch && npm publish",
     "prepublishOnly": "npm run build",
     "pretest": "mkdir -p ./dist && npm run build && npm pack --pack-destination ./dist",
-    "test": "jest"
+    "test": "npm run test:types && npm run test:js",
+    "test:js": "jest",
+    "test:types": "tsc -p . --noEmit"
   },
   "types": "index.d.ts",
   "type": "module"

rollup.config.js

@@ -28,6 +28,7 @@ export default [
         tsconfig: './tsconfig.json',
         declaration: true,
         declarationDir: './dist',
+        exclude: ['./__tests__/**/*'],
       }),
       resolve(),
       {
@@ -62,6 +63,7 @@ export default [
         tsconfig: './tsconfig.json',
         declaration: true,
         declarationDir: './dist',
+        exclude: ['./__tests__/**/*'],
       }),
       json(),
       resolve(),
@@ -80,6 +82,7 @@ export default [
         tsconfig: './tsconfig.json',
         declaration: true,
         declarationDir: './dist',
+        exclude: ['./__tests__/**/*'],
       }),
       json(),
       resolve(),

src/index.tsx

@@ -29,7 +29,10 @@ declare global {
   }
 }
 
-export type MDXRemoteProps = MDXRemoteSerializeResult & {
+export type MDXRemoteProps<
+  TScope = Record<string, unknown>,
+  TFrontmatter = Record<string, unknown>
+> = MDXRemoteSerializeResult<TScope, TFrontmatter> & {
   /**
    * A object mapping names to React components.
    * The key used will be the name accessible to MDX.
@@ -48,13 +51,13 @@ export { MDXRemoteSerializeResult }
 /**
  * Renders compiled source from next-mdx-remote/serialize.
  */
-export function MDXRemote({
+export function MDXRemote<TScope, TFrontmatter>({
   compiledSource,
   frontmatter,
   scope,
   components = {},
   lazy,
-}: MDXRemoteProps) {
+}: MDXRemoteProps<TScope, TFrontmatter>) {
   const [isReadyToRender, setIsReadyToRender] = useState(
     !lazy || typeof window === 'undefined'
   )

tsconfig.json

@@ -14,6 +14,5 @@
     "declarationDir": "./dist",
     "outDir": "./dist"
   },
-  "exclude": ["__tests__"],
-  "include": ["./src", "types.d.ts"]
+  "include": ["./src", "types.d.ts", "__tests__", "global.d.ts"]
 }