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

How can you type check React props with this plugin? #464

Open
4 tasks done
vb opened this issue May 22, 2023 · 4 comments
Open
4 tasks done

How can you type check React props with this plugin? #464

vb opened this issue May 22, 2023 · 4 comments
Labels
👀 no/external This makes more sense somewhere else 👎 phase/no Post cannot or will not be acted on

Comments

@vb
Copy link

vb commented May 22, 2023

Initial checklist

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
Copy link
Member

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

@remcohaszing remcohaszing closed this as not planned Won't fix, can't repro, duplicate, stale May 22, 2023
@remcohaszing remcohaszing added 👀 no/external This makes more sense somewhere else 👎 phase/no Post cannot or will not be acted on labels May 22, 2023
@JounQin
Copy link
Member

JounQin commented Aug 3, 2023

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

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

@JounQin JounQin reopened this Aug 3, 2023
@karlhorky
Copy link

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:

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
Copy link

karlhorky commented Jul 24, 2024

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👀 no/external This makes more sense somewhere else 👎 phase/no Post cannot or will not be acted on
Development

No branches or pull requests

4 participants