Add support for SpecialComponents to be any ComponentType

Reviewed-by: Christian Murphy <[email protected]>
Reviewed-by: Titus Wormer <[email protected]>

Closes GH-640.

Author: Methuselah96

lib/ast-to-react.js

@@ -1,3 +1,8 @@
+/**
+ * @template T
+ * @typedef {import('react').ComponentType<T>} ComponentType<T>
+ */
+
 /**
  * @typedef {import('react').ReactNode} ReactNode
  * @typedef {import('unist').Position} Position
@@ -44,33 +49,21 @@
  *
  * To do: is `data-sourcepos` typeable?
  *
- * @callback CodeComponent
- * @param {JSX.IntrinsicElements['code'] & ReactMarkdownProps & {inline?: boolean}} props
- * @returns {ReactNode}
- *
- * @callback HeadingComponent
- * @param {JSX.IntrinsicElements['h1'] & ReactMarkdownProps & {level: number}} props
- * @returns {ReactNode}
- *
- * @callback LiComponent
- * @param {JSX.IntrinsicElements['li'] & ReactMarkdownProps & {checked: boolean|null, index: number, ordered: boolean}} props
- * @returns {ReactNode}
- *
- * @callback OrderedListComponent
- * @param {JSX.IntrinsicElements['ol'] & ReactMarkdownProps & {depth: number, ordered: true}} props
- * @returns {ReactNode}
- *
- * @callback TableCellComponent
- * @param {JSX.IntrinsicElements['table'] & ReactMarkdownProps & {style?: Object.<string, unknown>, isHeader: boolean}} props
- * @returns {ReactNode}
- *
- * @callback TableRowComponent
- * @param {JSX.IntrinsicElements['tr'] & ReactMarkdownProps & {isHeader: boolean}} props
- * @returns {ReactNode}
+ * @typedef {JSX.IntrinsicElements['code'] & ReactMarkdownProps & {inline?: boolean}} CodeProps
+ * @typedef {JSX.IntrinsicElements['h1'] & ReactMarkdownProps & {level: number}} HeadingProps
+ * @typedef {JSX.IntrinsicElements['li'] & ReactMarkdownProps & {checked: boolean|null, index: number, ordered: boolean}} LiProps
+ * @typedef {JSX.IntrinsicElements['ol'] & ReactMarkdownProps & {depth: number, ordered: true}} OrderedListProps
+ * @typedef {JSX.IntrinsicElements['table'] & ReactMarkdownProps & {style?: Object.<string, unknown>, isHeader: boolean}} TableCellProps
+ * @typedef {JSX.IntrinsicElements['tr'] & ReactMarkdownProps & {isHeader: boolean}} TableRowProps
+ * @typedef {JSX.IntrinsicElements['ul'] & ReactMarkdownProps & {depth: number, ordered: false}} UnorderedListProps
  *
- * @callback UnorderedListComponent
- * @param {JSX.IntrinsicElements['ul'] & ReactMarkdownProps & {depth: number, ordered: false}} props
- * @returns {ReactNode}
+ * @typedef {ComponentType<CodeProps>} CodeComponent
+ * @typedef {ComponentType<HeadingProps>} HeadingComponent
+ * @typedef {ComponentType<LiProps>} LiComponent
+ * @typedef {ComponentType<OrderedListProps>} OrderedListComponent
+ * @typedef {ComponentType<TableCellProps>} TableCellComponent
+ * @typedef {ComponentType<TableRowProps>} TableRowComponent
+ * @typedef {ComponentType<UnorderedListProps>} UnorderedListComponent
  *
  * @typedef SpecialComponents
  * @property {CodeComponent|ReactMarkdownNames} code

test/test.jsx

@@ -1195,6 +1195,7 @@ test('should pass `node` as prop to all non-tag/non-fragment components', () =>
     <Markdown
       children={input}
       components={{
+        // @ts-expect-error JSX types currently only handle element returns not string returns
         h1(props) {
           let text = ''
           visit(props.node, 'text', (child) => {