Fix or ignore type error

Author: armandabric

.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
 }

package.json

@@ -28,13 +28,13 @@
     "@babel/cli": "7.15.7",
     "@babel/core": "7.15.5",
     "@babel/preset-env": "7.15.6",
-    "@babel/preset-flow": "7.14.5",
     "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-angular": "8.3.4",
-    "@khanacademy/flow-to-ts": "^0.5.2",
     "@types/enzyme": "^3.10.9",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^27.0.2",
     "@types/react": "^17.0.26",
     "@types/react-is": "^17.0.2",
     "babel-eslint": "10.1.0",
@@ -55,7 +55,6 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "esm": "3.2.25",
     "expect": "27.2.3",
-    "flow-bin": "0.119.1",
     "flow-copy-source": "2.0.9",
     "husky": "3.1.0",
     "jest": "27.2.3",
@@ -72,7 +71,7 @@
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-sourcemaps": "0.6.3",
-    "typescript": "4.2.4"
+    "typescript": "4.4.3"
   },
   "peerDependencies": {
     "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1",
@@ -84,8 +83,6 @@
     "react-is": "17.0.2"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.ts"]
   }
 }

src/AnonymousStatelessComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'; // eslint-disable-next-line react/display-name
 
-export default function (props) {
+export default function (props: { children: React.ReactNode }) {
   const { children } = props; // eslint-disable-line react/prop-types
 
   return <div>{children}</div>;

src/formatter/createPropFilter.ts

@@ -5,6 +5,7 @@ export default function createPropFilter(
   if (Array.isArray(filter)) {
     return (key: string) => filter.indexOf(key) === -1;
   } else {
+    // @ts-expect-error: flow to TS
     return (key: string) => filter(props[key], key);
   }
 }

src/formatter/formatFunction.ts

@@ -2,15 +2,21 @@ import type { Options } from './../options';
 
 function noRefCheck() {}
 
-export const inlineFunction = (fn: any): string =>
+type FunctionType = (...args: Array<any>) => any;
+
+export const inlineFunction = (fn: FunctionType): string =>
   fn
     .toString()
     .split('\n')
     .map((line) => line.trim())
     .join('');
-export const preserveFunctionLineBreak = (fn: any): string => fn.toString();
+
+export const preserveFunctionLineBreak = (fn: FunctionType): string =>
+  fn.toString();
+
 const defaultFunctionValue = inlineFunction;
-export default (fn: (...args: Array<any>) => any, options: Options): string => {
+
+export default (fn: FunctionType, options: Options): string => {
   const { functionValue = defaultFunctionValue, showFunctions } = options;
 
   if (!showFunctions && functionValue === defaultFunctionValue) {

src/formatter/formatReactElementNode.ts

@@ -8,7 +8,7 @@ import type { Options } from './../options';
 import type { ReactElementTreeNode } from './../tree';
 
 const compensateMultilineStringElementIndentation = (
-  element,
+  element: any,
   formattedElement: string,
   inline: boolean,
   lvl: number,
@@ -33,7 +33,7 @@ const compensateMultilineStringElementIndentation = (
 };
 
 const formatOneChildren =
-  (inline: boolean, lvl: number, options: Options) => (element) =>
+  (inline: boolean, lvl: number, options: Options) => (element: any) =>
     compensateMultilineStringElementIndentation(
       element,
       formatTreeNode(element, inline, lvl, options),
@@ -42,13 +42,15 @@ const formatOneChildren =
       options
     );
 
-const onlyPropsWithOriginalValue = (defaultProps, props) => (propName) => {
-  const haveDefaultValue = Object.keys(defaultProps).includes(propName);
-  return (
-    !haveDefaultValue ||
-    (haveDefaultValue && defaultProps[propName] !== props[propName])
-  );
-};
+const onlyPropsWithOriginalValue =
+  (defaultProps: Record<string, any>, props: Record<string, any>) =>
+  (propName: string) => {
+    const haveDefaultValue = Object.keys(defaultProps).includes(propName);
+    return (
+      !haveDefaultValue ||
+      (haveDefaultValue && defaultProps[propName] !== props[propName])
+    );
+  };
 
 const isInlineAttributeTooLong = (
   attributes: string[],
@@ -117,7 +119,7 @@ export default (
   let outInlineAttr = out;
   let outMultilineAttr = out;
   let containsMultilineAttr = false;
-  const visibleAttributeNames = [];
+  const visibleAttributeNames: Array<string> = [];
   const propFilter = createPropFilter(props, filterProps);
   Object.keys(props)
     .filter(propFilter)

src/formatter/formatTreeNode.ts

@@ -2,6 +2,7 @@ import formatReactElementNode from './formatReactElementNode';
 import formatReactFragmentNode from './formatReactFragmentNode';
 import type { Options } from './../options';
 import type { TreeNode } from './../tree';
+
 const jsxStopChars = ['<', '>', '{', '}'];
 
 const shouldBeEscaped = (s: string) =>
@@ -53,5 +54,6 @@ export default (
     return formatReactFragmentNode(node, inline, lvl, options);
   }
 
+  // @ts-expect-error: So should never be executed
   throw new TypeError(`Unknow format type "${node.type}"`);
 };

src/formatter/sortObject.ts

@@ -29,11 +29,11 @@ export default function sortObject(value: any): any {
       }
 
       if (key === 'current') {
-        // eslint-disable-next-line no-param-reassign
-        result[key] = '[Circular]';
+        // @ts-expect-error: flow to TS
+        result[key] = '[Circular]'; // eslint-disable-line no-param-reassign
       } else {
-        // eslint-disable-next-line no-param-reassign
-        result[key] = sortObject(value[key]);
+        // @ts-expect-error: flow to TS
+        result[key] = sortObject(value[key]); // eslint-disable-line no-param-reassign
       }
 
       return result;

src/index.ts

@@ -1,10 +1,10 @@
 import formatTree from './formatter/formatTree';
 import parseReactElement from './parser/parseReactElement';
-import type { Element as ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import type { Options } from './options';
 
 const reactElementToJsxString = (
-  element: ReactElement<any>,
+  element: ReactElement<any> | string | number,
   {
     filterProps = [],
     showDefaultProps = true,
@@ -16,13 +16,13 @@ const reactElementToJsxString = (
     sortProps = true,
     maxInlineAttributesLineLength,
     displayName,
-  }: Options = {}
-) => {
+  }: Partial<Options> = {}
+): string => {
   if (!element) {
     throw new Error('react-element-to-jsx-string: Expected a ReactElement');
   }
 
-  const options = {
+  const options: Options = {
     filterProps,
     showDefaultProps,
     showFunctions,
@@ -34,10 +34,12 @@ const reactElementToJsxString = (
     maxInlineAttributesLineLength,
     displayName,
   };
+
   return formatTree(parseReactElement(element, options), options);
 };
 
 export default reactElementToJsxString;
+
 export {
   inlineFunction,
   preserveFunctionLineBreak,

src/options.ts

@@ -1,13 +1,15 @@
-import * as React from 'react';
+import React from 'react';
+
 export type Options = {
   filterProps: string[];
   showDefaultProps: boolean;
   showFunctions: boolean;
-  functionValue: (...args: Array<any>) => any;
+  functionValue?: (...args: Array<any>) => any;
   tabStop: number;
   useBooleanShorthandSyntax: boolean;
   useFragmentShortSyntax: boolean;
   sortProps: boolean;
+
   maxInlineAttributesLineLength?: number;
-  displayName?: (element: React.ReactElement<any>) => string;
+  displayName?: (element: React.ReactElement) => string;
 };

src/parser/parseReactElement.ts

@@ -1,4 +1,4 @@
-import type { Element as ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { Fragment } from 'react';
 import {
   ForwardRef,
@@ -23,7 +23,9 @@ import type { TreeNode } from './../tree';
 
 const supportFragment = Boolean(Fragment);
 
-const getFunctionTypeName = (functionType): string => {
+const getFunctionTypeName = (
+  functionType: (...args: Array<any>) => any
+): string => {
   if (!functionType.name || functionType.name === '_default') {
     return 'No Display Name';
   }
@@ -49,26 +51,32 @@ const getWrappedComponentDisplayName = (Component: any): string => {
 
 // heavily inspired by:
 // https://github.com/facebook/react/blob/3746eaf985dd92f8aa5f5658941d07b6b855e9d9/packages/react-devtools-shared/src/backend/renderer.js#L399-L496
-const getReactElementDisplayName = (element: ReactElement<any>): string => {
+const getReactElementDisplayName = (element: ReactElement): string => {
   switch (true) {
     case typeof element.type === 'string':
+      // @ts-expect-error: flow to TS
       return element.type;
 
     case typeof element.type === 'function':
+      // @ts-expect-error: flow to TS
       if (element.type.displayName) {
+        // @ts-expect-error: flow to TS
         return element.type.displayName;
       }
 
+      // @ts-expect-error: flow to TS
       return getFunctionTypeName(element.type);
 
     case isForwardRef(element):
     case isMemo(element):
       return getWrappedComponentDisplayName(element.type);
 
     case isContextConsumer(element):
+      // @ts-expect-error: flow to TS
       return `${element.type._context.displayName || 'Context'}.Consumer`;
 
     case isContextProvider(element):
+      // @ts-expect-error: flow to TS
       return `${element.type._context.displayName || 'Context'}.Provider`;
 
     case isLazy(element):
@@ -88,19 +96,20 @@ const getReactElementDisplayName = (element: ReactElement<any>): string => {
   }
 };
 
-const noChildren = (propsValue, propName) => propName !== 'children';
+const noChildren = (propsValue: unknown, propName: string) =>
+  propName !== 'children';
 
-const onlyMeaningfulChildren = (children): boolean =>
+const onlyMeaningfulChildren = (children: ReactNode): boolean =>
   children !== true &&
   children !== false &&
   children !== null &&
   children !== '';
 
 const filterProps = (
-  originalProps: {},
-  cb: (arg0: any, arg1: string) => boolean
-) => {
-  const filteredProps = {};
+  originalProps: Record<string, any>,
+  cb: (propsValue: any, propsName: string) => boolean
+): Record<string, any> => {
+  const filteredProps: Record<string, any> = {};
   Object.keys(originalProps)
     .filter((key) => cb(originalProps[key], key))
     .forEach((key) => (filteredProps[key] = originalProps[key]));
@@ -126,7 +135,9 @@ const parseReactElement = (
   const displayName = displayNameFn(element);
   const props = filterProps(element.props, noChildren);
 
+  // @ts-expect-error: flow to TS
   if (element.ref !== null) {
+    // @ts-expect-error: flow to TS
     props.ref = element.ref;
   }
 
@@ -137,21 +148,17 @@ const parseReactElement = (
     props.key = key;
   }
 
+  // @ts-expect-error: flow to TS
   const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
-  const childrens = React.Children.toArray(element.props.children)
+  const children = React.Children.toArray(element.props.children)
     .filter(onlyMeaningfulChildren)
-    .map((child) => parseReactElement(child, options));
+    .map((child: ReactElement<any>) => parseReactElement(child, options));
 
   if (supportFragment && element.type === Fragment) {
-    return createReactFragmentTreeNode(key, childrens);
+    return createReactFragmentTreeNode(key, children);
   }
 
-  return createReactElementTreeNode(
-    displayName,
-    props,
-    defaultProps,
-    childrens
-  );
+  return createReactElementTreeNode(displayName, props, defaultProps, children);
 };
 
 export default parseReactElement;