DST-1321 Prop opt out (#152)

* Added the ability to ignore properties

* docs(changeset): Added the ability to 'ignore' a property to avoid the missing converter error. To ignore a property add a comment above the prop and prefix it with @ert-ignore.

* 🚨 Add testcase for type props

* 🔨 Output raw type to props as a string

* 🔨 rename unsupported to raw

Author: danieldelcore

.changeset/wise-bulldogs-repeat.md

@@ -0,0 +1,8 @@
+---
+'extract-react-types': minor
+'babel-plugin-extract-react-types': patch
+'kind2string': patch
+---
+
+Added a safe bail-out for when extract-react-types encounters an unsupported keyword or syntax.
+In that case, the type will be output as a raw string and summary type will be `raw`.

packages/babel-plugin-extract-react-types/index.js

@@ -9,10 +9,11 @@ module.exports = babel => {
           .map(plugin => (Array.isArray(plugin) ? plugin[0] : plugin))
           .find(plugin => plugin === 'flow' || plugin === 'typescript');
 
-        if (typeSystem) {
-          try {
-            let components = findExportedComponents(programPath, typeSystem, state.file.filename);
-            components.forEach(({ name, component }) => {
+        if (!typeSystem) return;
+
+        try {
+          findExportedComponents(programPath, typeSystem, state.file.filename).forEach(
+            ({ name, component }) => {
               // TODO: handle when name is null
               // it will only happen when it's the default export
               // generate something like this
@@ -28,10 +29,10 @@ module.exports = babel => {
                   )
                 );
               }
-            });
-            /* eslint-disable no-empty */
-          } catch (e) {}
-        }
+            }
+          );
+          /* eslint-disable no-empty */
+        } catch (e) {}
       }
     }
   };

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

@@ -161,6 +161,78 @@ Object {
 }
 `;
 
+exports[`TypeScript: Types fallback to raw source when an unsupported type us used (interface) 1`] = `
+Object {
+  "kind": "generic",
+  "name": Object {
+    "kind": "id",
+    "name": "Component",
+    "type": null,
+  },
+  "value": Object {
+    "kind": "object",
+    "members": Array [
+      Object {
+        "key": Object {
+          "kind": "id",
+          "name": "bar",
+        },
+        "kind": "property",
+        "leadingComments": Array [
+          Object {
+            "raw": " bar property docs ",
+            "type": "commentBlock",
+            "value": "bar property docs",
+          },
+        ],
+        "optional": false,
+        "value": Object {
+          "kind": "raw",
+          "name": "keyof Bar",
+        },
+      },
+    ],
+    "referenceIdName": "BarProps",
+  },
+}
+`;
+
+exports[`TypeScript: Types fallback to raw source when an unsupported type us used (type) 1`] = `
+Object {
+  "kind": "generic",
+  "name": Object {
+    "kind": "id",
+    "name": "Component",
+    "type": null,
+  },
+  "value": Object {
+    "kind": "object",
+    "members": Array [
+      Object {
+        "key": Object {
+          "kind": "id",
+          "name": "bar",
+        },
+        "kind": "property",
+        "leadingComments": Array [
+          Object {
+            "raw": " bar property docs ",
+            "type": "commentBlock",
+            "value": "bar property docs",
+          },
+        ],
+        "optional": false,
+        "value": Object {
+          "kind": "raw",
+          "name": "keyof Bar",
+        },
+      },
+    ],
+    "referenceIdName": "BarProps",
+  },
+}
+`;
+
 exports[`TypeScript: follow export default export 1`] = `
 Object {
   "kind": "generic",

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

@@ -27,6 +27,30 @@ const TESTS = [
       class Component extends React.Component<Props> {}
     `
   },
+  {
+    name: 'Types fallback to raw source when an unsupported type us used (interface)',
+    typeSystem: 'typescript',
+    code: `
+      interface BarProps {
+        /* bar property docs */
+        bar: keyof Bar;
+      }
+
+      class Component extends React.Component<BarProps> {}
+    `
+  },
+  {
+    name: 'Types fallback to raw source when an unsupported type us used (type)',
+    typeSystem: 'typescript',
+    code: `
+      type BarProps = {
+        /* bar property docs */
+        bar: keyof Bar;
+      }
+
+      class Component extends React.Component<BarProps> {}
+    `
+  },
   {
     name: 'React.ComponentType',
     typeSystem: 'typescript',

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

@@ -539,7 +539,7 @@ converters.TypeCastExpression = (path, context): K.TypeCastExpression => ({
 
 converters.NumericLiteral = (path): K.Number => ({ kind: 'number', value: path.node.value });
 
-converters.NullLiteral = (path): K.Null => ({ kind: 'null' });
+converters.NullLiteral = (): K.Null => ({ kind: 'null' });
 
 converters.BooleanLiteral = (path): K.Boolean => ({ kind: 'boolean', value: path.node.value });
 
@@ -908,6 +908,17 @@ converters.TSFunctionType = (path, context): K.Generic => ({
   }
 });
 
+function convertMethodCall(path, context): K.Func {
+  const parameters = path.get('parameters').map(p => convertParameter(p, context));
+  const returnType = convert(path.get('typeAnnotation'), context);
+
+  return {
+    kind: 'function',
+    returnType,
+    parameters
+  };
+}
+
 converters.TSMethodSignature = (path, context): K.Property => ({
   kind: 'property',
   optional: !!path.node.optional,
@@ -1217,31 +1228,11 @@ converters.TSTypeQuery = (path, context): K.TypeQuery => ({
   exprName: convert(path.get('exprName'), { ...context, mode: 'value' })
 });
 
-function convertMethodCall(path, context): K.Func {
-  const parameters = path.get('parameters').map(p => convertParameter(p, context));
-  const returnType = convert(path.get('typeAnnotation'), context);
-
-  return {
-    kind: 'function',
-    returnType,
-    parameters
-  };
-}
-
-function mapComment(comment) {
-  return {
-    type: comment.type === 'CommentLine' ? 'commentLine' : 'commentBlock',
-    value: normalizeComment(comment),
-    raw: comment.value
-  };
-}
-
 function attachCommentProperty(source, dest, name) {
   if (!source || !source[name]) return;
   if (!dest[name]) dest[name] = [];
 
-  let comments = source[name].map(mapComment);
-  dest[name] = dest[name].concat(comments);
+  dest[name] = dest[name].concat(parseComment(source[name]));
 }
 
 function attachComments(source, dest) {
@@ -1250,6 +1241,14 @@ function attachComments(source, dest) {
   attachCommentProperty(source, dest, 'innerComments');
 }
 
+function parseComment(commentProperty) {
+  return commentProperty.map(comment => ({
+    type: comment.type === 'CommentLine' ? 'commentLine' : 'commentBlock',
+    value: normalizeComment(comment),
+    raw: comment.value
+  }));
+}
+
 // This function is from mdn:
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples
 const getCircularReplacer = () => {
@@ -1274,8 +1273,27 @@ function convert(path, context) {
   }
 
   const converter = converters[path.type];
-  if (!converter) throw new Error(`Missing converter for: ${path.type}`);
+
+  if (!converter) {
+    const propertySignature = path.find(p => p.isTSPropertySignature() || p.isObjectTypeProperty());
+
+    // Fallback to a raw string if property uses a type without a matching converter
+    if (propertySignature && propertySignature.node) {
+      return {
+        kind: 'raw',
+        name: path.getSource()
+      };
+    }
+
+    throw new Error(
+      `Missing converter for: ${
+        path.type
+      }, see: https://github.com/atlassian/extract-react-types/issues/150`
+    );
+  }
+
   const result = converter(path, context);
+
   attachComments(path.node, result);
   return result;
 }
@@ -1304,10 +1322,7 @@ function getContext(
   }
 
   /* $FlowFixMe - need to update types in babylon-options */
-  const parserOpts = createBabylonOptions({
-    stage: 2,
-    plugins
-  });
+  const parserOpts = createBabylonOptions({ stage: 2, plugins });
 
   return { resolveOptions, parserOpts };
 }
@@ -1320,7 +1335,6 @@ export function extractReactTypes(
 ) {
   const { resolveOptions, parserOpts } = getContext(typeSystem, filename, inputResolveOptions);
   const file = createBabelFile(code, { parserOpts, filename });
-
   return convert(file.path, { resolveOptions, parserOpts });
 }
 
@@ -1388,11 +1402,7 @@ function exportedComponents(programPath, componentsToFind: 'all' | 'default', co
             context,
             firstArg.get('params.0.typeAnnotation')
           );
-          components.push({
-            name,
-            path,
-            component
-          });
+          components.push({ name, path, component });
           return;
         }
 

packages/kind2string/src/index.js

@@ -65,9 +65,10 @@ const converters = {
   custom: (type: any, mode: string): string => type.value.toString(),
   any: (type: K.Any, mode: string): string => type.kind,
   void: (type: K.Void, mode: string): 'undefined' => 'undefined',
-  literal: (type: any, mode: string): string => `${type.kind}`,
+  literal: (type: any, mode: string): string => type.kind,
   mixed: (type: K.Mixed, mode: string): string => type.kind,
   null: (type: K.Null, mode: string): 'null' => 'null',
+  unknown: (type: K.Unknown): string => type.kind,
   logicalExpression: (type, mode: string): string => {
     return `${convert(type.left)} ${type.operator} ${convert(type.right)}`;
   },
@@ -76,9 +77,7 @@ const converters = {
     return `${type.operator}${space}${convert(type.argument)}`;
   },
 
-  id: (type: K.Id, mode: string): string => {
-    return type.name;
-  },
+  id: (type: K.Id, mode: string): string => type.name,
   // TODO - this is not right and needs to be improved
   opaqueType: (type: K.OpaqueType, mode: string): string => {
     return convert(type.id);
@@ -314,7 +313,10 @@ from file: ${convert(type.source, mode)}`
   tuple: (type: K.Tuple, mode: string): string => `[${mapConvertAndJoin(type.types)}]`,
   typeQuery: (type: K.TypeQuery): string => {
     return type.exprName ? `typeof ${type.exprName.name}` : `${type.kind}`;
-  }
+  },
+
+  // ERT - Misc
+  raw: (type: any): string => type.name
 };
 
 function convert(type: any, mode: string = 'value') {