Fix to correctly compile intrinsic types

Co-authored-by: Remco Haszing <remcohaszing@gmail.com>

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

Related to GH-622.
Closes GH-638.

lib/ast-to-react.js

@@ -1,14 +1,15 @@
 /**
- * @typedef {JSX.IntrinsicElements} IntrinsicElements
  * @typedef {import('react').ReactNode} ReactNode
  * @typedef {import('unist').Position} Position
  * @typedef {import('hast').Element} Element
+ * @typedef {import('hast').ElementContent} ElementContent
  * @typedef {import('hast').Root} Root
  * @typedef {import('hast').Text} Text
  * @typedef {import('hast').Comment} Comment
  * @typedef {import('hast').DocType} Doctype
  * @typedef {import('property-information').Info} Info
  * @typedef {import('property-information').Schema} Schema
+ * @typedef {import('./complex-types').ReactMarkdownProps} ReactMarkdownProps
  *
  * @typedef Raw
  * @property {'raw'} type
@@ -21,7 +22,7 @@
  *
  * @callback TransformLink
  * @param {string} href
- * @param {Array.<Comment|Element|Text>} children
+ * @param {Array.<ElementContent>} children
  * @param {string?} title
  * @returns {string}
  *
@@ -33,22 +34,14 @@
  *
  * @callback TransformLinkTarget
  * @param {string} href
- * @param {Array.<Comment|Element|Text>} children
+ * @param {Array.<ElementContent>} children
  * @param {string?} title
  * @returns {string|undefined}
  *
- * @typedef {keyof IntrinsicElements} ReactMarkdownNames
+ * @typedef {keyof JSX.IntrinsicElements} ReactMarkdownNames
  *
  * To do: is `data-sourcepos` typeable?
  *
- * @typedef ReactMarkdownProps
- * @property {Element} node
- * @property {string} key
- * @property {ReactNode[]} children
- * @property {Position?} [sourcePosition] Passed when `options.rawSourcePos` is given
- * @property {number} [index] Passed when `options.includeElementIndex` is given
- * @property {number} [siblingCount] Passed when `options.includeElementIndex` is given
- *
  * @callback CodeComponent
  * @param {JSX.IntrinsicElements['code'] & ReactMarkdownProps & {inline?: boolean}} props
  * @returns {ReactNode}
@@ -92,8 +85,7 @@
  * @property {TableRowComponent|ReactMarkdownNames} tr
  * @property {UnorderedListComponent|ReactMarkdownNames} ul
  *
- * @typedef {{[TagName in keyof IntrinsicElements]: TagName | ((props: IntrinsicElements[TagName] & ReactMarkdownProps) => ReactNode)}} NormalComponents
- * @typedef {Partial<Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents>} Components
+ * @typedef {Partial<Omit<import("./complex-types").NormalComponents, keyof SpecialComponents> & SpecialComponents>} Components
  *
  * @typedef Options
  * @property {boolean} [sourcePos=false]
@@ -145,10 +137,8 @@ export function childrenToReact(context, node) {
       ) {
         children.push(child.value)
       }
-      // @ts-expect-error `raw` nodes are non-standard
     } else if (child.type === 'raw' && !context.options.skipHtml) {
       // Default behavior is to show (encoded) HTML.
-      // @ts-expect-error `raw` nodes are non-standard
       children.push(child.value)
     }
   }
@@ -201,7 +191,7 @@ function toReact(context, node, index, parent) {
   context.schema = parentSchema
 
   // Nodes created by plugins do not have positional info, in which case we use
-  // an object that matches the positon interface.
+  // an object that matches the position interface.
   const position = node.position || {
     start: {line: null, column: null, offset: null},
     end: {line: null, column: null, offset: null}

lib/complex-types.ts

@@ -0,0 +1,28 @@
+import type {ReactNode, ComponentType} from 'react'
+import type {Position} from 'unist'
+import type {Element} from 'hast'
+
+/* File for types which are not handled correctly in JSDoc mode */
+
+export interface ReactMarkdownProps {
+  node: Element
+  children: ReactNode[]
+  /**
+   * Passed when `options.rawSourcePos` is given
+   */
+  sourcePosition?: Position
+  /**
+   * Passed when `options.includeElementIndex` is given
+   */
+  index?: number
+  /**
+   * Passed when `options.includeElementIndex` is given
+   */
+  siblingCount?: number
+}
+
+export type NormalComponents = {
+  [TagName in keyof JSX.IntrinsicElements]:
+    | keyof JSX.IntrinsicElements
+    | ComponentType<JSX.IntrinsicElements[TagName] & ReactMarkdownProps>
+}

test/test.jsx

@@ -757,6 +757,7 @@ test('should pass on raw source position to non-tag components if rawSourcePos o
       rawSourcePos
       rehypePlugins={[raw]}
       components={{
+        // @ts-expect-error JSX types currently only handle element returns not string returns
         em({sourcePosition}) {
           assert.equal(sourcePosition, {
             start: {line: 1, column: 1, offset: 0},