Fix ref in types

Closes GH-668.

Reviewed-by: Remco Haszing <remcohaszing@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>

Author: ChristianMurphy

lib/ast-to-react.js

@@ -3,6 +3,11 @@
  * @typedef {import('react').ComponentType<T>} ComponentType<T>
  */
 
+/**
+ * @template T
+ * @typedef {import('react').ComponentPropsWithoutRef<T>} ComponentPropsWithoutRef<T>
+ */
+
 /**
  * @typedef {import('react').ReactNode} ReactNode
  * @typedef {import('unist').Position} Position
@@ -49,13 +54,13 @@
  *
  * To do: is `data-sourcepos` typeable?
  *
- * @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?: Record<string, unknown>, isHeader: boolean}} TableCellProps
- * @typedef {JSX.IntrinsicElements['tr'] & ReactMarkdownProps & {isHeader: boolean}} TableRowProps
- * @typedef {JSX.IntrinsicElements['ul'] & ReactMarkdownProps & {depth: number, ordered: false}} UnorderedListProps
+ * @typedef {ComponentPropsWithoutRef<'code'> & ReactMarkdownProps & {inline?: boolean}} CodeProps
+ * @typedef {ComponentPropsWithoutRef<'h1'> & ReactMarkdownProps & {level: number}} HeadingProps
+ * @typedef {ComponentPropsWithoutRef<'li'> & ReactMarkdownProps & {checked: boolean|null, index: number, ordered: boolean}} LiProps
+ * @typedef {ComponentPropsWithoutRef<'ol'> & ReactMarkdownProps & {depth: number, ordered: true}} OrderedListProps
+ * @typedef {ComponentPropsWithoutRef<'table'> & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: boolean}} TableCellProps
+ * @typedef {ComponentPropsWithoutRef<'tr'> & ReactMarkdownProps & {isHeader: boolean}} TableRowProps
+ * @typedef {ComponentPropsWithoutRef<'ul'> & ReactMarkdownProps & {depth: number, ordered: false}} UnorderedListProps
  *
  * @typedef {ComponentType<CodeProps>} CodeComponent
  * @typedef {ComponentType<HeadingProps>} HeadingComponent

lib/complex-types.ts

@@ -1,4 +1,4 @@
-import type {ReactNode, ComponentType} from 'react'
+import type {ReactNode, ComponentType, ComponentPropsWithoutRef} from 'react'
 import type {Position} from 'unist'
 import type {Element} from 'hast'
 
@@ -24,5 +24,5 @@ export interface ReactMarkdownProps {
 export type NormalComponents = {
   [TagName in keyof JSX.IntrinsicElements]:
     | keyof JSX.IntrinsicElements
-    | ComponentType<JSX.IntrinsicElements[TagName] & ReactMarkdownProps>
+    | ComponentType<ComponentPropsWithoutRef<TagName> & ReactMarkdownProps>
 }

test/test.jsx

@@ -1161,7 +1161,6 @@ test('should be able to render components with forwardRef in HOC', () => {
   const wrapped = (props) => <a {...props} />
 
   const actual = asHtml(
-    // @ts-expect-error: something up with types for refs.
     <Markdown components={{a: wrapper(wrapped)}}>
       [Link](https://example.com/)
     </Markdown>