How can you type check React props with this plugin?

[vb]

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

I want to have a system where the author can't render a React component in mdx with the wrong props.

Example

// Component.tsx

export const Component = ({ name, age }: { name: string, age: number }) => {
  return ...
}

import { Component } from './Component'

## Component

<Component name="vb" age={35} /> // ✅
<Component name="vb" />          // ❌ Missing mandatory prop
<Component name={35} age={35} /> // ❌ Wrong type for name

Solution

I'd get an eslint error when I try to render a React component in mdx with bad props

Alternatives

I guess this is done together with plugin:@typescript-eslint?

[remcohaszing]

Type checking isn't done by ESLint. MDX type checking is available in MDX analyzer instead. (Though it's still early stage)

[JounQin]

https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files

This package maybe help, I'll do some research recently.

[karlhorky]

Would also love if full type checking was in the toolchain somewhere - checking for the components provided through MDXProvider, as also mentioned in the mdx-analyzer discussion:

• https://github.com/orgs/mdx-js/discussions/2396#:~:text=for%20the%20components%20we%20provide%20through%20a%20MDXProvider

Our use case: checking whether a value of a particular slug is valid and failing CI if invalid (currently set to a union of string literals in TS):

- 🎥 slides: <LectureSlideDeck slug="js-fundamentals" />

[karlhorky]

For anyone looking for the current research on CLI TypeScript type checking in *.mdx files, some current research and first implementation experiments can be found here:

• Add CLI mdx-analyzer#292
• Add a CLI for type checking volarjs/volar.js#145

Keywords: command line, CLI, terminal, Volar.js, MDX Analyzer