Support the components prop

[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

MDX allows to use the components prop to pass custom components.

{/* Greeting.mdx */}

Hello <Person name={name} />

import Greeting from './Greeting.mdx'

<Greeting components={{ Person: props => props.name }} name="Gary" />

The MDX code will be transformed to the following JSX before sending to TypeScript:

{/* Greeting.mdx */}

/**
 * Render the MDX contents.
 *
 * @param {MDXContentProps} props
 *   The props that have been passed to the MDX component.
 */
export default function MDXContent() {
  return <>
{/* Greeting.mdx */}
      <Person name={name} />
<>
}

// @ts-ignore
/** @typedef {Props} MDXContentProps */

Solution

We can extract all MDX elements and generate types for them to some extent. Components may be injected by a provider hook, so they should always be optional.

/**
 * @typedef {Props & { readonly components?: {
 *   readonly Person?: ((props: { name?: any }) => JSX.Element | null) | JSX.ClassComponent<{ name?: any }> | // XXX
 * } }} MDXContentProps
 */

• Lower case components and JSX.IntrinsicElements
• Function components
• Class components
• Components in nested objects

Alternatives

🤷

[remcohaszing]

New plan: Let the user explicitly define which components may be passed via DefinitelyTyped/DefinitelyTyped#67374. It’s still possible to override them locally using the Props typedef.