feat: Improve frontmatter types, pass generic TFrontmatter type throu…

…gh (#342)

README.md

@@ -524,7 +524,8 @@ export default function Home() {
 import { compileMDX } from 'next-mdx-remote/rsc'
 
 export default async function Home() {
-  const { content, frontmatter } = await compileMDX({
+  // Optionally provide a type for your frontmatter object
+  const { content, frontmatter } = await compileMDX<{ title: string }>({
     source: `---
       title: RSC Frontmatter Example
       ---

__tests__/rsc.test.tsx

@@ -0,0 +1,21 @@
+import { compileMDX } from '../rsc'
+
+describe('compileMDX', () => {
+  test('frontmatter types', async () => {
+    const { frontmatter } = await compileMDX<{ title: string }>({
+      source: `---
+title: 'Hello World'
+---
+
+# Hi`,
+      options: {
+        parseFrontmatter: true,
+      },
+    })
+
+    expect(frontmatter.title).toEqual('Hello World')
+
+    // @ts-expect-error -- blah does not exist on the frontmatter type
+    expect(frontmatter.blah).toBeUndefined()
+  })
+})

src/rsc.tsx

@@ -10,10 +10,7 @@ import { VFileCompatible } from 'vfile'
 import { MDXProvider } from '@mdx-js/react'
 import { serialize } from './serialize'
 
-export type MDXRemoteProps = Omit<
-  MDXRemoteSerializeResult,
-  'compiledSource'
-> & {
+export type MDXRemoteProps = {
   source: VFileCompatible
   options?: SerializeOptions
   /**
@@ -27,12 +24,20 @@ export type MDXRemoteProps = Omit<
 
 export { MDXRemoteSerializeResult }
 
-export async function compileMDX({
+export type CompileMDXResult<TFrontmatter = Record<string, unknown>> = {
+  content: React.ReactElement
+  frontmatter: TFrontmatter
+}
+
+export async function compileMDX<TFrontmatter = Record<string, unknown>>({
   source,
   options,
   components = {},
-}: MDXRemoteProps) {
-  const { compiledSource, frontmatter, scope } = await serialize(
+}: MDXRemoteProps): Promise<CompileMDXResult<TFrontmatter>> {
+  const { compiledSource, frontmatter, scope } = await serialize<
+    Record<string, unknown>,
+    TFrontmatter
+  >(
     source,
     options,
     // Enable RSC importSource

src/serialize.ts

@@ -38,15 +38,18 @@ function getCompileOptions(
 /**
  * Parses and compiles the provided MDX string. Returns a result which can be passed into <MDXRemote /> to be rendered.
  */
-export async function serialize(
+export async function serialize<
+  TScope = Record<string, unknown>,
+  TFrontmatter = Record<string, unknown>
+>(
   source: VFileCompatible,
   {
     scope = {},
     mdxOptions = {},
     parseFrontmatter = false,
   }: SerializeOptions = {},
   rsc: boolean = false
-): Promise<MDXRemoteSerializeResult> {
+): Promise<MDXRemoteSerializeResult<TScope, TFrontmatter>> {
   const vfile = new VFile(source)
 
   // makes frontmatter available via vfile.data.matter
@@ -66,8 +69,7 @@ export async function serialize(
 
   return {
     compiledSource,
-    frontmatter:
-      (vfile.data.matter as Record<string, string> | undefined) ?? {},
-    scope,
+    frontmatter: (vfile.data.matter ?? {}) as TFrontmatter,
+    scope: scope as TScope,
   }
 }

src/types.ts

@@ -39,9 +39,9 @@ export type MDXRemoteSerializeResult<
    * For example, in cases where you want to provide template variables to the MDX, like `my name is {name}`,
    * you could provide scope as `{ name: "Some name" }`.
    */
-  scope?: TScope
+  scope: TScope
   /**
    * If parseFrontmatter was set to true, contains any parsed frontmatter found in the MDX source.
    */
-  frontmatter?: TFrontmatter
+  frontmatter: TFrontmatter
 }