Pass through properties to top-level MDX component

.jest/utils.tsx

@@ -11,13 +11,11 @@ export async function renderStatic(
     components,
     scope,
     mdxOptions,
-    minifyOptions,
     parseFrontmatter,
   }: SerializeOptions & Pick<MDXRemoteProps, 'components'> = {}
 ): Promise<string> {
   const mdxSource = await serialize(mdx, {
     mdxOptions,
-    minifyOptions,
     parseFrontmatter,
   })
 

__tests__/serialize.test.tsx

@@ -47,6 +47,18 @@ describe('serialize', () => {
     expect(result).toMatchInlineSnapshot(`"<p>test</p>"`)
   })
 
+  test('with scope props', async () => {
+    const result = await renderStatic('<p>{props.baz}</p>', {
+      scope: {
+        bar: 'test',
+        props: {
+          baz: 'test2',
+        },
+      },
+    })
+    expect(result).toMatchInlineSnapshot(`"<p>test2</p>"`)
+  })
+
   test('with custom provider', async () => {
     const TestContext = React.createContext(null)
 

src/index.tsx

@@ -26,7 +26,7 @@ declare global {
 
 export type MDXRemoteProps = MDXRemoteSerializeResult & {
   /**
-   * A object mapping names to React components.
+   * An object mapping names to React components.
    * The key used will be the name accessible to MDX.
    *
    * For example: `{ ComponentName: Component }` will be accessible in the MDX as `<ComponentName/>`.
@@ -46,7 +46,7 @@ export { MDXRemoteSerializeResult }
 export function MDXRemote({
   compiledSource,
   frontmatter,
-  scope,
+  scope: scopeWithProps,
   components = {},
   lazy,
 }: MDXRemoteProps) {
@@ -67,6 +67,8 @@ export function MDXRemote({
   }, [])
 
   const Content: React.ElementType = useMemo(() => {
+    const { props = {}, ...scope } = scopeWithProps || {}
+
     // if we're ready to render, we can assemble the component tree and let React do its thing
     // first we set up the scope which has to include the mdx custom
     // create element function as well as any components we're using
@@ -88,8 +90,10 @@ export function MDXRemote({
       keys.concat(`${compiledSource}`)
     )
 
-    return hydrateFn.apply(hydrateFn, values).default
-  }, [scope, compiledSource])
+    const Component = hydrateFn.apply(hydrateFn, values).default
+
+    return () => <Component {...props} />
+  }, [scopeWithProps, compiledSource])
 
   if (!isReadyToRender) {
     // If we're not ready to render, return an empty div to preserve SSR'd markup