✨ forwardRef wrapped in a memo now works with type inference (#163)

Author: danieldelcore

packages/extract-react-types/__snapshots__/converters-typescript.test.js.snap

@@ -452,6 +452,34 @@ Object {
 }
 `;
 
+exports[`TypeScript: memo wrapping forwardRef, with inferred types 1`] = `
+Object {
+  "kind": "generic",
+  "name": Object {
+    "kind": "id",
+    "name": "MyComponent",
+    "type": null,
+  },
+  "value": Object {
+    "kind": "object",
+    "members": Array [
+      Object {
+        "key": Object {
+          "kind": "id",
+          "name": "foo",
+        },
+        "kind": "property",
+        "optional": false,
+        "value": Object {
+          "kind": "string",
+        },
+      },
+    ],
+    "referenceIdName": "MyComponentProps",
+  },
+}
+`;
+
 exports[`TypeScript: ts any 1`] = `
 Object {
   "kind": "object",

packages/extract-react-types/converters-typescript.test.js

@@ -601,6 +601,23 @@ const TESTS = [
 
     export default MyComponent;
   `
+  },
+  {
+    name: 'memo wrapping forwardRef, with inferred types',
+    typeSystem: 'typescript',
+    code: `
+    import React, { forwardRef, memo } from 'react';
+
+    type MyComponentProps = {
+      foo: string,
+    }
+
+    const MyComponent = memo(forwardRef<HTMLElement, MyComponentProps>((props, ref) => {
+      return <span>Foo</span>;
+    }));
+
+    export default MyComponent;
+  `
   }
 ];
 

packages/extract-react-types/src/index.js

@@ -1389,7 +1389,6 @@ function exportedComponents(programPath, componentsToFind: 'all' | 'default', co
         );
 
         components.push({ name, path, component });
-
         return;
       }
 
@@ -1401,7 +1400,6 @@ function exportedComponents(programPath, componentsToFind: 'all' | 'default', co
         );
 
         components.push({ name, path, component });
-
         return;
       }
 
@@ -1419,6 +1417,23 @@ function exportedComponents(programPath, componentsToFind: 'all' | 'default', co
           return;
         }
 
+        const genericTypeParamsTEMP = firstArg.get('typeParameters');
+
+        if (
+          isMemo &&
+          isSpecialReactComponentType(firstArg, 'forwardRef') &&
+          genericTypeParamsTEMP.node
+        ) {
+          const component = convertReactComponentFunction(
+            genericTypeParams,
+            context,
+            genericTypeParamsTEMP.get('params.1')
+          );
+
+          components.push({ name, path, component });
+          return;
+        }
+
         if (isMemo && isSpecialReactComponentType(firstArg, 'forwardRef')) {
           const innerFirstArg = firstArg.get('arguments')[0];
           if (innerFirstArg.isFunctionExpression() || innerFirstArg.isArrowFunctionExpression()) {
@@ -1427,11 +1442,7 @@ function exportedComponents(programPath, componentsToFind: 'all' | 'default', co
               innerFirstArg,
               innerFirstArg.get('params.0.typeAnnotation')
             );
-            components.push({
-              name,
-              path,
-              component
-            });
+            components.push({ name, path, component });
           }
         }
       }