Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Improve frontmatter types, pass generic TFrontmatter type through #342

Merged
merged 5 commits into from
Feb 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
---
Expand Down
21 changes: 21 additions & 0 deletions __tests__/rsc.test.tsx
Original file line number Diff line number Diff line change
@@ -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()
})
})
19 changes: 12 additions & 7 deletions src/rsc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
/**
Expand All @@ -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
Expand Down
12 changes: 7 additions & 5 deletions src/serialize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
}
}
4 changes: 2 additions & 2 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
thiskevinwang marked this conversation as resolved.
Show resolved Hide resolved
}