fix: Add support for TSAsExpressions when trying to stringify expressions (#634)

Using a combination of forwardRefs and generics leads to wanting to use type assertions to retain the generic nature of the wrapped class.  This plays rather poorly with propTypes.  After a lot of mucking around I decided to simply assert the desired type when setting propTypes and defaults.

 This leads to code like this:

 ```tsx
 (MenuItem as ComponentObjectOf<typeof MenuItem>).propTypes - {...}
 ```

 This change extends expressionTo.toArray to deal with the typescript expression.

Co-authored-by: Daniel Tschinder <[email protected]>
# Conflicts:
#	src/__tests__/__snapshots__/main-test.js.snap
#	src/utils/__tests__/expressionTo-test.ts

Author: ggascoigne

src/__tests__/__snapshots__/main-test.js.snap

@@ -1611,3 +1611,41 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_43.tsx" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "MenuItem",
+  "methods": Array [],
+  "props": Object {
+    "children": Object {
+      "description": "Menu item contents.",
+      "required": false,
+      "type": Object {
+        "name": "node",
+      },
+    },
+    "classes": Object {
+      "description": "Override or extend the styles applied to the component. See CSS API below for more details.",
+      "required": false,
+      "type": Object {
+        "name": "object",
+      },
+    },
+    "component": Object {
+      "defaultValue": Object {
+        "computed": false,
+        "value": "'li'",
+      },
+      "required": false,
+    },
+    "disableGutters": Object {
+      "defaultValue": Object {
+        "computed": false,
+        "value": "false",
+      },
+      "required": false,
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_43.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatMenuItem, {
+    MenuItemProps as MatMenuItemProps,
+} from '@mui/material/MenuItem';
+
+export type ComponentObjectOf<
+    T extends React.ElementType,
+    P = React.ComponentProps<T>
+> = React.FunctionComponent<P>;
+
+export type MenuItemProps<
+    D extends React.ElementType,
+    P = {}
+> = MatMenuItemProps<D, P>;
+
+const MenuItem = React.forwardRef<MenuItemProps<'li'>>(
+    <C extends React.ElementType>(
+        props: MenuItemProps<C, { component?: C }>,
+        ref: React.Ref<any>
+    ) => {
+        return <MatMenuItem {...props} ref={ref} />;
+    }
+) as unknown as <C extends React.ElementType = 'li'>(
+    props: MenuItemProps<C, { component?: C }>
+) => React.ReactElement;
+
+(MenuItem as ComponentObjectOf<typeof MenuItem>).propTypes = {
+    /** Menu item contents. */
+    children: PropTypes.node,
+    /** Override or extend the styles applied to the component. See CSS API below for more details. */
+    classes: PropTypes.object,
+};
+
+(MenuItem as ComponentObjectOf<typeof MenuItem>).defaultProps = {
+    component: 'li',
+    disableGutters: false,
+};
+
+export default MenuItem;

src/utils/__tests__/expressionTo-test.js

@@ -0,0 +1,54 @@
+import { expression, noopImporter } from '../../../tests/utils';
+import { Array as expressionToArray } from '../expressionTo';
+
+describe('expressionTo', () => {
+  describe('MemberExpression', () => {
+    it('with only identifiers', () => {
+      expect(
+        expressionToArray(expression('foo.bar.baz'), noopImporter),
+      ).toEqual(['foo', 'bar', 'baz']);
+    });
+
+    it('with one computed literal', () => {
+      expect(
+        expressionToArray(expression('foo["bar"].baz'), noopImporter),
+      ).toEqual(['foo', '"bar"', 'baz']);
+    });
+
+    it('with one computed identifier', () => {
+      expect(
+        expressionToArray(expression('foo[bar].baz'), noopImporter),
+      ).toEqual(['foo', 'bar', 'baz']);
+    });
+
+    it('with one computed object', () => {
+      expect(
+        expressionToArray(expression('foo[{ a: "true"}].baz'), noopImporter),
+      ).toEqual(['foo', '{a: "true"}', 'baz']);
+    });
+
+    it('with one computed object with spread', () => {
+      expect(
+        expressionToArray(expression('foo[{ ...a }].baz'), noopImporter),
+      ).toEqual(['foo', '{...a}', 'baz']);
+    });
+
+    it('with one computed object with method', () => {
+      expect(
+        expressionToArray(expression('foo[{ a(){} }].baz'), noopImporter),
+      ).toEqual(['foo', '{a: <function>}', 'baz']);
+    });
+
+    it('with TSAsExpression', () => {
+      expect(
+        expressionToArray(
+          expression('(baz as X).prop', {
+            filename: 'file.ts',
+            parserOptions: { plugins: ['typescript'] },
+          }),
+          noopImporter,
+        ),
+      ).toEqual(['baz', 'prop']);
+    });
+  });
+});

src/utils/expressionTo.js

@@ -42,6 +42,11 @@ function toArray(path: NodePath): Array<string> {
     } else if (t.Identifier.check(node)) {
       result.push(node.name);
       continue;
+    } else if (t.TSAsExpression.check(node)) {
+      if (t.Identifier.check(node.expression)) {
+        result.push(node.expression.name);
+      }
+      continue;
     } else if (t.Literal.check(node)) {
       result.push(node.raw);
       continue;