From fd83bda53cf1f5e06f75932bf23c8b5fbce60fab Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sat, 28 Aug 2021 14:43:06 -0400
Subject: [PATCH] Allow SpecialComponents to be any ComponentType

---
 lib/ast-to-react.js | 45 +++++++++++++++++++--------------------------
 test/test.jsx       |  1 +
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/lib/ast-to-react.js b/lib/ast-to-react.js
index 940f69fc..b02da8f4 100644
--- a/lib/ast-to-react.js
+++ b/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
diff --git a/test/test.jsx b/test/test.jsx
index 6910b975..18d05d84 100644
--- a/test/test.jsx
+++ b/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) => {