Support MDX provider

[remcohaszing]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

#260 adds support for the components prop. Another common way to inject custom components is using an MDX provider.

Solution

Let the user define which components are provided via a reserved name, let’s call it MDXProvidedComponents. Much like Props, the language server assumes it will be available with some fallback logic. That means a user can write the following code to have the provided components available on a per-file basis. This is needed if multiple MDX providers are used.

// types.ts
import { ReactNode } from 'react'

interface PlanetProps {
  name: string
}

export interface MDXProvidedComponents {
  Planet: (props: PlanetProps) => ReactNode
}

# MDX Document

{/** @typedef {import('./types.js').MDXProvidedComponents} MDXProvidedComponents */}

<Planet name="Saturn" />

TypeScript also supports global types. This means that alternatively, the user can define the type globally and have it available in every document. This is the ideal solution if there’s only one MDX provider in the entire tree.

// types.ts
import { ReactNode } from 'react'

interface PlanetProps {
  name: string
}

declare global {
  interface MDXProvidedComponents {
    Planet: (props: PlanetProps) => ReactNode
  }
}

# MDX Document

<Planet name="Saturn" />

Alternatives

I looked into augmenting @types/mdx, but I don’t think that’s great. The MDXComponents is very loose, allows injecting any key. This is great for the developer DX we’re providing without this more advanced MDX language tooling, but we can do better if the user uses the MDX language server. I.e. it reduces the usefulness of autocomplete and validation.