How to specify the type of JS Expressions in MDX (with MDX LSP)?

[guyutongxue]

I'm working on a project that uses MDX to describe a set of e2e testing operations. In this setup, each Markdown list item (<li>) is converted—using a custom JSX factory and runtime—into either a prompt for an LLM agent or a function to be executed manually or programmatically. For example:

- Click button 'Add To-do'
- Input 'Coding' into the input box
- {async ({ page }) => {
     const btn = await page.$("#confirm");
     await btn.click();
   }}
- [...continue steps, omitted]

However, when using the mdx-analyzer language server with the checkMdx option enabled, I'm running into a TypeScript error. Specifically, the TypeScript checker cannot determine the type of the children prop for the default MDX <li> element, so it issues an error at the function signature:

   {async ({ page }) => {
//           ^~ Binding element 'page' implicitly has an 'any' type.

What I'm trying to do is specify the type of the children prop for the built-in <li> element in MDX, so that TypeScript can correctly check functions provided as children. Ideally, I want to define something like:

namespace JSX {
    interface IntrinsicElements {
        li: { children?: string | ((context: { page: PuppeteerPage }) => Promise<void>) }
    }
}

Is there a way to achieve this, so that TypeScript will recognize the correct type inside MDX files? Any suggestions would be appreciated—thank you! 🙏

[remcohaszing]

Hi @guyutongxue 👋

All markdown syntax is considered JSX fragments. The only reason is that this simply hasn’t come up yet. The current approach is sufficient for most JSX frameworks. Your use case makes sense though. The fix should also be fairly easy. Please report this bug in mdx-analyzer. 🙂

I am currently very busy though, so I simply don’t have the time to fix it anytime soon. But if you can fix it, I may be able to slip in some time to review and release it.