flow-api-translator 0.15.1 → 0.17.0

package/dist/flowDefToTSDef.js

@@ -16,10 +16,10 @@ exports.flowDefToTSDef = flowDefToTSDef;
 
 var FlowESTree = _interopRequireWildcard(require("hermes-estree"));
 
-var _hermesTransform = require("hermes-transform");
-
 var TSESTree = _interopRequireWildcard(require("./utils/ts-estree-ast-types"));
 
+var _hermesTransform = require("hermes-transform");
+
 var _ErrorUtils = require("./utils/ErrorUtils");
 
 var _DocblockUtils = require("./utils/DocblockUtils");
@@ -30,6 +30,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function constructFlowNode(node) {
+  // $FlowFixMe[prop-missing]
+  return node;
+}
+
 const cloneJSDocCommentsToNewNode = // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
 _hermesTransform.cloneJSDocCommentsToNewNode;
 const makeCommentOwnLine = // $FlowExpectedError[incompatible-cast] - trust me this re-type is 100% safe
@@ -40,7 +45,19 @@ function isValidReactImportOrGlobal(id) {
   return VALID_REACT_IMPORTS.has(id.name) || id.name.startsWith('React$');
 }
 
-let shouldAddReactImport = null;
+let shouldAddReactImport = null; // Returns appropriate Identifier for `React` import.
+// If a global is in use, set a flag to indicate that we should add the import.
+
+function getReactIdentifier(hasReactImport) {
+  if (shouldAddReactImport !== false) {
+    shouldAddReactImport = !hasReactImport;
+  }
+
+  return {
+    type: 'Identifier',
+    name: `React`
+  };
+}
 
 function flowDefToTSDef(originalCode, ast, scopeManager, opts) {
   const tsBody = [];
@@ -178,10 +195,10 @@ const getTransforms = (originalCode, scopeManager, opts) => {
     return globalScope;
   })();
 
-  function isReactImport(id) {
+  function isReactImport(scopeNode, name) {
     let currentScope = (() => {
       let scope = null;
-      let node = id;
+      let node = scopeNode;
 
       while (!scope && node) {
         scope = scopeManager.acquire(node, true);
@@ -198,7 +215,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
     const variableDef = (() => {
       while (currentScope != null) {
         for (const variable of currentScope.variables) {
-          if (variable.defs.length && variable.name === id.name) {
+          if (variable.defs.length && variable.name === name) {
             return variable;
           }
         }
@@ -230,7 +247,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
 
       case 'ImplicitGlobalVariable':
         {
-          return VALID_REACT_IMPORTS.has(id.name);
+          return VALID_REACT_IMPORTS.has(name);
         }
       // TODO Handle:
       // const React = require('react');
@@ -616,7 +633,22 @@ const getTransforms = (originalCode, scopeManager, opts) => {
         return transform.VoidTypeAnnotation(node);
 
       case 'TypePredicate':
-        return unsupportedAnnotation(node, node.type);
+        return transform.TypePredicateAnnotation(node);
+
+      case 'ConditionalTypeAnnotation':
+        return transform.ConditionalTypeAnnotation(node);
+
+      case 'InferTypeAnnotation':
+        return transform.InferTypeAnnotation(node);
+
+      case 'KeyofTypeAnnotation':
+        return transform.KeyofTypeAnnotation(node);
+
+      case 'TypeOperator':
+        return transform.TypeOperator(node);
+
+      case 'ComponentTypeAnnotation':
+        return transform.ComponentTypeAnnotation(node);
 
       default:
         throw unexpectedTranslationError(node, `Unhandled type ${node.type}`);
@@ -897,6 +929,21 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 exportKind: 'value'
               }];
             }
+          // TS doesn't support direct default export for declare'd functions
+
+          case 'DeclareComponent':
+            {
+              const functionDecl = transform.DeclareComponent(declaration);
+              const name = declaration.id.name;
+              return [functionDecl, {
+                type: 'ExportDefaultDeclaration',
+                declaration: {
+                  type: 'Identifier',
+                  name
+                },
+                exportKind: 'value'
+              }];
+            }
           // Flow's declare export default Identifier is ambiguous.
           // the Identifier might reference a type, or it might reference a value
           // - If it's a value, then that's all good, TS supports that.
@@ -1024,6 +1071,12 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                   exportKind: 'value'
                 }];
 
+              case 'DeclareComponent':
+                return [{
+                  declaration: transform.DeclareComponent(node.declaration),
+                  exportKind: 'value'
+                }];
+
               case 'DeclareFunction':
                 return [{
                   declaration: transform.DeclareFunction(node.declaration),
@@ -1092,6 +1145,113 @@ const getTransforms = (originalCode, scopeManager, opts) => {
       }
     },
 
+    DeclareComponent(node) {
+      const id = transform.Identifier(node.id, false);
+      const typeParameters = node.typeParameters == null ? undefined : transform.TypeParameterDeclaration(node.typeParameters);
+      const params = transform.ComponentTypeParameters(node.params, node.rest); // TS cannot support `renderType` so we always use ReactNode as the return type.
+
+      const hasReactImport = isReactImport(node, 'React');
+      const returnType = {
+        type: 'TSTypeAnnotation',
+        // If no rendersType we assume its ReactNode type.
+        typeAnnotation: {
+          type: 'TSTypeReference',
+          typeName: {
+            type: 'TSQualifiedName',
+            left: getReactIdentifier(hasReactImport),
+            right: {
+              type: 'Identifier',
+              name: `ReactNode`
+            }
+          },
+          typeParameters: undefined
+        }
+      };
+      return {
+        type: 'TSDeclareFunction',
+        async: false,
+        body: undefined,
+        declare: true,
+        expression: false,
+        generator: false,
+        id: {
+          type: 'Identifier',
+          name: id.name
+        },
+        params,
+        returnType: returnType,
+        typeParameters: typeParameters
+      };
+    },
+
+    ComponentTypeParameters(params, rest) {
+      if (params.length === 0 && rest != null) {
+        return [{
+          type: 'Identifier',
+          name: 'props',
+          typeAnnotation: {
+            type: 'TSTypeAnnotation',
+            typeAnnotation: transformTypeAnnotationType(rest.typeAnnotation)
+          },
+          optional: false
+        }];
+      }
+
+      const flowPropsType = [];
+
+      if (rest != null) {
+        flowPropsType.push(constructFlowNode({
+          type: 'ObjectTypeSpreadProperty',
+          argument: rest.typeAnnotation,
+          range: rest.range,
+          loc: rest.loc
+        }));
+      }
+
+      for (let i = 0; i < params.length; i++) {
+        var _param$name;
+
+        const param = params[i];
+        flowPropsType.push(constructFlowNode({
+          type: 'ObjectTypeProperty',
+          kind: 'init',
+          method: false,
+          optional: param.optional,
+          variance: null,
+          proto: false,
+          static: false,
+          key: (_param$name = param.name) != null ? _param$name : constructFlowNode({
+            type: 'Identifier',
+            name: `$$PARAM_${i}$$`,
+            optional: false,
+            typeAnnotation: null
+          }),
+          value: param.typeAnnotation,
+          range: param.range,
+          loc: param.loc
+        }));
+      }
+
+      const tsPropsObjectType = transform.ObjectTypeAnnotation(constructFlowNode({
+        type: 'ObjectTypeAnnotation',
+        inexact: false,
+        exact: true,
+        properties: flowPropsType,
+        indexers: [],
+        callProperties: [],
+        internalSlots: []
+      }));
+      return [{
+        type: 'Identifier',
+        name: 'props',
+        typeAnnotation: {
+          type: 'TSTypeAnnotation',
+          typeAnnotation: tsPropsObjectType
+        },
+        optional: false
+      }];
+    },
+
     DeclareFunction(node) {
       // the function information is stored as an annotation on the ID...
       const id = transform.Identifier(node.id, false);
@@ -1483,7 +1643,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
             return {
               type: 'TSImportType',
               isTypeOf: true,
-              parameter: moduleName,
+              argument: moduleName,
               qualifier: null,
               typeParameters: null
             };
@@ -1589,6 +1749,36 @@ const getTransforms = (originalCode, scopeManager, opts) => {
             };
           }
 
+        case '$ReadOnlyMap':
+          {
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'Identifier',
+                name: 'ReadonlyMap'
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: assertHasExactlyNTypeParameters(1)
+              }
+            };
+          }
+
+        case '$ReadOnlySet':
+          {
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'Identifier',
+                name: 'ReadonlySet'
+              },
+              typeParameters: {
+                type: 'TSTypeParameterInstantiation',
+                params: assertHasExactlyNTypeParameters(1)
+              }
+            };
+          }
+
         case '$Values':
           {
             // `$Values<T>` => `T[keyof T]`
@@ -1642,22 +1832,9 @@ const getTransforms = (originalCode, scopeManager, opts) => {
 
 
       const validReactImportOrGlobal = isValidReactImportOrGlobal(baseId);
-      const reactImport = isReactImport(baseId);
-
-      if (validReactImportOrGlobal || reactImport) {
-        // Returns appropriate Identifier for `React` import.
-        // If a global is in use, set a flag to indicate that we should add the import.
-        const getReactIdentifier = () => {
-          if (shouldAddReactImport !== false) {
-            shouldAddReactImport = !reactImport;
-          }
-
-          return {
-            type: 'Identifier',
-            name: `React`
-          };
-        };
+      const hasReactImport = isReactImport(baseId, baseId.name);
 
+      if (validReactImportOrGlobal || hasReactImport) {
         switch (fullTypeName) {
           // TODO: In flow this is `ChildrenArray<T> = T | $ReadOnlyArray<ChildrenArray<T>>`.
           // The recursive nature of it is rarely needed, so we're simplifying this for now
@@ -1706,7 +1883,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: 'Component'
@@ -1727,7 +1904,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: getReactIdentifier(),
+                left: getReactIdentifier(hasReactImport),
                 right: {
                   type: 'Identifier',
                   name: `Context`
@@ -1748,7 +1925,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: getReactIdentifier(),
+                left: getReactIdentifier(hasReactImport),
                 right: {
                   type: 'Identifier',
                   name: 'Key'
@@ -1766,7 +1943,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: `ElementType`
@@ -1785,7 +1962,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: `ReactNode`
@@ -1803,7 +1980,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: `ReactElement`
@@ -1824,7 +2001,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: getReactIdentifier(),
+                left: getReactIdentifier(hasReactImport),
                 right: {
                   type: 'Identifier',
                   name: `ElementRef`
@@ -1845,7 +2022,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
               type: 'TSTypeReference',
               typeName: {
                 type: 'TSQualifiedName',
-                left: getReactIdentifier(),
+                left: getReactIdentifier(hasReactImport),
                 right: {
                   type: 'Identifier',
                   name: `Fragment`
@@ -1884,7 +2061,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: 'ComponentType'
@@ -1949,7 +2126,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: 'ComponentType'
@@ -1971,7 +2148,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                 type: 'TSTypeReference',
                 typeName: {
                   type: 'TSQualifiedName',
-                  left: getReactIdentifier(),
+                  left: getReactIdentifier(hasReactImport),
                   right: {
                     type: 'Identifier',
                     name: 'ComponentProps'
@@ -2009,7 +2186,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                     type: 'TSTypeReference',
                     typeName: {
                       type: 'TSQualifiedName',
-                      left: getReactIdentifier(),
+                      left: getReactIdentifier(hasReactImport),
                       right: {
                         type: 'Identifier',
                         name: `ComponentProps`
@@ -2042,7 +2219,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
                     type: 'TSTypeReference',
                     typeName: {
                       type: 'TSQualifiedName',
-                      left: getReactIdentifier(),
+                      left: getReactIdentifier(hasReactImport),
                       right: {
                         type: 'Identifier',
                         name: 'Ref'
@@ -2277,10 +2454,35 @@ const getTransforms = (originalCode, scopeManager, opts) => {
     },
 
     ObjectTypeAnnotation(node) {
-      // we want to preserve the source order of the members
+      if (node.properties.length === 1 && node.properties[0].type === 'ObjectTypeMappedTypeProperty') {
+        var _prop$variance;
+
+        // Mapped Object Object types must not have other object properties.
+        const prop = node.properties[0];
+        const tsProp = {
+          type: 'TSMappedType',
+          typeParameter: {
+            type: 'TSTypeParameter',
+            name: {
+              type: 'Identifier',
+              name: prop.keyTparam.name
+            },
+            constraint: transformTypeAnnotationType(prop.sourceType),
+            in: false,
+            out: false
+          },
+          readonly: ((_prop$variance = prop.variance) == null ? void 0 : _prop$variance.kind) === 'plus',
+          optional: prop.optional === 'Optional',
+          typeAnnotation: transformTypeAnnotationType(prop.propType),
+          nameType: null
+        };
+        return tsProp;
+      } // we want to preserve the source order of the members
       // unfortunately flow has unordered properties storing things
       // so store all elements with their start index and sort the
       // list afterward
+
+
       const members = [];
 
       for (const callProp of node.callProperties) {
@@ -2316,8 +2518,7 @@ const getTransforms = (originalCode, scopeManager, opts) => {
           }
 
           if (property.type === 'ObjectTypeMappedTypeProperty') {
-            // TODO - Support mapped types
-            return unsupportedAnnotation(property, 'object type with mapped type property');
+            return unsupportedAnnotation(property, 'object type with mapped type property along with other properties');
           }
 
           members.push({
@@ -2784,6 +2985,93 @@ const getTransforms = (originalCode, scopeManager, opts) => {
       return {
         type: 'TSVoidKeyword'
       };
+    },
+
+    ConditionalTypeAnnotation(node) {
+      return {
+        type: 'TSConditionalType',
+        checkType: transformTypeAnnotationType(node.checkType),
+        extendsType: transformTypeAnnotationType(node.extendsType),
+        trueType: transformTypeAnnotationType(node.trueType),
+        falseType: transformTypeAnnotationType(node.falseType)
+      };
+    },
+
+    TypePredicateAnnotation(node) {
+      return {
+        type: 'TSTypePredicate',
+        asserts: node.asserts,
+        parameterName: transform.Identifier(node.parameterName, false),
+        typeAnnotation: node.typeAnnotation && {
+          type: 'TSTypeAnnotation',
+          typeAnnotation: transformTypeAnnotationType(node.typeAnnotation)
+        }
+      };
+    },
+
+    InferTypeAnnotation(node) {
+      return {
+        type: 'TSInferType',
+        typeParameter: transform.TypeParameter(node.typeParameter)
+      };
+    },
+
+    KeyofTypeAnnotation(node) {
+      return {
+        type: 'TSTypeOperator',
+        operator: 'keyof',
+        typeAnnotation: transformTypeAnnotationType(node.argument)
+      };
+    },
+
+    TypeOperator(node) {
+      switch (node.operator) {
+        case 'renders':
+          {
+            const hasReactImport = isReactImport(node, 'React');
+            return {
+              type: 'TSTypeReference',
+              typeName: {
+                type: 'TSQualifiedName',
+                left: getReactIdentifier(hasReactImport),
+                right: {
+                  type: 'Identifier',
+                  name: `ReactNode`
+                }
+              },
+              typeParameters: undefined
+            };
+          }
+      }
+    },
+
+    ComponentTypeAnnotation(node) {
+      const typeParameters = node.typeParameters == null ? undefined : transform.TypeParameterDeclaration(node.typeParameters);
+      const params = transform.ComponentTypeParameters(node.params, node.rest); // TS cannot support `renderType` so we always use ReactNode as the return type.
+
+      const hasReactImport = isReactImport(node, 'React');
+      const returnType = {
+        type: 'TSTypeAnnotation',
+        // If no rendersType we assume its ReactNode type.
+        typeAnnotation: {
+          type: 'TSTypeReference',
+          typeName: {
+            type: 'TSQualifiedName',
+            left: getReactIdentifier(hasReactImport),
+            right: {
+              type: 'Identifier',
+              name: `ReactNode`
+            }
+          },
+          typeParameters: undefined
+        }
+      };
+      return {
+        type: 'TSFunctionType',
+        typeParameters,
+        params,
+        returnType
+      };
     }
 
   }; // wrap each transform so that we automatically preserve jsdoc comments