Refactor to use TypeScript `@import` JSDoc tags

[remcohaszing]

Initial checklist

• [x] I read the support docs
• [x] I read the contributing guide
• [x] I agree to follow the code of conduct
• [x] I searched issues and couldn’t find anything (or linked relevant results below)
• [x] If applicable, I’ve added docs and tests

Description of changes

Previously we used @typedef tags to simulate type imports. The problem is that are not really imports. They define and export a new type. We now use @import introduced by TypeScript 5.5 to actually import types.

The pattern using @typedef is still used in index files to export types.

This change also replaces the type casting inside MDX files with definitions of the Props types.

This also replaces usage of the global JSX namespace with proper types. For TypeScript<5.1 the correct return type of React components is ReactElement, for Preact VNode. For TypeScript>=5.1, the correct return type for React components is ReactNode, for Preact ComponentChildren.

ReactElement / VNode and are compatible with TypeScript>=5.1. This is why those are used for public facing APIs, but ReactNode / ComponentChildren is used for internal components.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mdx	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 25, 2024 7:52pm

[wooorm]

In this PR, I saw the existing code:

// Register MDX nodes in mdast:
/// <reference types="remark-mdx" />

I think we can now change, and recommend @import {} from 'remark-mdx?

[wooorm]

Thanks :)