Add types for FunctionComponent w/o used props

ignatiusreza · ChristianMurphy · web-flow · commit d5bb6b24ed98 · 2021-01-19T09:57:54.000+01:00
Closes GH-26. Reviewed-by: Titus Wormer <tituswormer@gmail.com> Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com> Reviewed-by: Remco Haszing <remcohaszing@gmail.com> Co-authored-by: Christian Murphy <christian.murphy.42@gmail.com>
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,4 +1,4 @@
-// Minimum TypeScript Version: 3.4
+// Minimum TypeScript Version: 3.8
 
 import {Transformer} from 'unified'
 import {Prefix, CreateElementLike} from 'hast-to-hyperscript'
@@ -7,14 +7,20 @@ import {Node} from 'unist'
 declare namespace rehypeReact {
   type FragmentLike<T> = (props: any) => T | null
 
-  interface ComponentProps {
-    [prop: string]: unknown
-    node?: Node
+  type ComponentPropsWithoutNode = Record<string, unknown>
+
+  interface ComponentPropsWithNode extends ComponentPropsWithoutNode {
+    node: Node
   }
 
-  type ComponentLike<T> = (props: ComponentProps) => T | null
+  type ComponentProps = ComponentPropsWithoutNode | ComponentPropsWithNode
+
+  type ComponentLike<
+    T,
+    P extends ComponentPropsWithoutNode = ComponentPropsWithoutNode
+  > = (props: P) => T | null
 
-  interface Options<H extends CreateElementLike> {
+  interface SharedOptions<H extends CreateElementLike> {
     /**
      * How to create elements or components.
      * You should typically pass `React.createElement`
@@ -27,25 +33,37 @@ declare namespace rehypeReact {
      */
     Fragment?: FragmentLike<ReturnType<H>>
 
-    /**
-     * Override default elements (such as `<a>`, `<p>`, etcetera) by passing an object mapping tag names to components
-     */
-    components?: Record<string, ComponentLike<ReturnType<H>>>
-
     /**
      * React key prefix
      *
      * @defaultValue 'h-'
      */
     prefix?: Prefix
-
-    /**
-     * Expose HAST Node objects to `node` prop of react components
-     *
-     * @defaultValue false
-     */
-    passNode?: boolean
   }
+
+  type ComponentOptions<H extends CreateElementLike> =
+    | {
+        /**
+         * Override default elements (such as `<a>`, `<p>`, etcetera) by passing an object mapping tag names to components
+         */
+        components?: Record<
+          string,
+          ComponentLike<ReturnType<H>, ComponentPropsWithNode>
+        >
+        /**
+         * Expose HAST Node objects to `node` prop of react components
+         *
+         * @defaultValue false
+         */
+        passNode: true
+      }
+    | {
+        components?: Record<string, ComponentLike<ReturnType<H>>>
+        passNode?: false
+      }
+
+  type Options<H extends CreateElementLike> = SharedOptions<H> &
+    ComponentOptions<H>
 }
 
 /**
diff --git a/types/rehype-react-test.tsx b/types/rehype-react-test.tsx
@@ -5,6 +5,11 @@ import {h as virtualDomCreateElement} from 'virtual-dom'
 import * as hyperscriptCreateElement from 'hyperscript'
 import Vue from 'vue'
 
+const TypedFunctionalComponent: React.FunctionComponent = () => <>example</>
+const ConflictingTypedFunctionalComponent: React.FunctionComponent<{
+  notARealProp: string
+}> = () => null
+
 // Create element must be provided
 unified().use(rehypeToReact) // $ExpectError
 unified().use(rehypeToReact, {}) // $ExpectError
@@ -43,6 +48,20 @@ unified().use(rehypeToReact, {
   }
 })
 
+unified().use(rehypeToReact, {
+  createElement: React.createElement,
+  components: {
+    div: TypedFunctionalComponent
+  }
+})
+
+unified().use(rehypeToReact, {
+  createElement: React.createElement,
+  components: {
+    div: ConflictingTypedFunctionalComponent // $ExpectError
+  }
+})
+
 unified().use(rehypeToReact, {
   createElement: React.createElement,
   passNode: true
@@ -52,7 +71,16 @@ unified().use(rehypeToReact, {
   createElement: React.createElement,
   passNode: true,
   components: {
-    a: (props: rehypeToReact.ComponentProps) => <a>{props.node}</a>
+    a: (props: rehypeToReact.ComponentPropsWithNode) => <a>{props.node}</a>
+  }
+})
+
+// $ExpectError
+unified().use(rehypeToReact, {
+  createElement: React.createElement,
+  passNode: false,
+  components: {
+    a: (props: rehypeToReact.ComponentPropsWithNode) => <a>{props.node}</a>
   }
 })
 
