Update react-docgen

website/react-docgen/README.md

@@ -1,9 +1,9 @@
- # react-docs-generator
+# react-docgen
 
-`react-docs-generator` extracts information from React components with which
+`react-docgen` extracts information from React components with which
 you can generate documentation for those components.
 
-It uses esprima-fb to parse the provided files into an AST, looks for React
+It uses [recast][] to parse the provided files into an AST, looks for React
 component definitions, and inspects the `propTypes` and `getDefaultProps`
 declarations. The output is a JSON blob with the extracted information.
 
@@ -16,18 +16,18 @@ is a limit to what is statically analyzable.
 Install the module directly from npm:
 
 ```
-npm install -g react-docs-generator
+npm install -g react-docgen
 ```
 
 ## CLI
 
-Installing the module adds a `react-docs` executable which allows you do convert
+Installing the module adds a `react-docgen` executable which allows you do convert
 a single file, multiple files or an input stream. We are trying to make the
 executable as versatile as possible so that it can be integrated into many
 workflows.
 
 ```
-Usage: react-docs [path]... [options]
+Usage: react-docgen [path]... [options]
 
 path     A component file or directory. If no path is provided it reads from stdin.
 
@@ -46,7 +46,7 @@ If a directory is passed, it is recursively traversed.
 The tool can also be used programmatically to extract component information:
 
 ```js
-var reactDocs = require('react-docs-generator');
+var reactDocs = require('react-docgen');
 var componentInfo reactDocs.parseSource(src);
 ```
 
@@ -160,6 +160,7 @@ The structure of the JSON blob / JavaScript object is as follows:
       "type": {
         "name": "<typeName>",
         ["value": <typeValue>]
+        ["raw": string]
       },
       "required": boolean,
       "description": string,
@@ -173,3 +174,5 @@ The structure of the JSON blob / JavaScript object is as follows:
   ["composes": <componentNames>]
 }
 ```
+
+[recast]: https://github.com/benjamn/recast

website/react-docgen/bin/react-docgen.js

@@ -10,7 +10,7 @@
  */
 
 var argv = require('nomnom')
-  .script('react-docs')
+  .script('react-docgen')
   .help(
     'Extract meta information from React components.\n' +
     'If a directory is passed, it is recursively traversed.'

website/react-docgen/lib/Documentation.js

@@ -17,6 +17,7 @@ type PropDescriptor = {
   type?: {
     name: string;
     value?: any;
+    raw?: string;
   };
   required?: boolean;
   defaultValue?: any;

website/react-docgen/lib/handlers/__tests__/propTypeHandler-test.js

@@ -152,7 +152,7 @@ describe('React documentation parser', function() {
     expect(result).toEqual(expectedResult);
   });
 
-  it.only('detects complex prop types', function() {
+  it('detects complex prop types', function() {
     var source = getSource([
       '{',
       '  propTypes: {',
@@ -197,9 +197,10 @@ describe('React documentation parser', function() {
         oneOfType_custom_prop: {
           type: {
             name:'union',
-            value: [
-              {name: 'custom'}
-            ]
+            value: [{
+              name: 'custom',
+              raw: 'xyz'
+            }]
           },
           required: false
         },
@@ -231,7 +232,10 @@ describe('React documentation parser', function() {
           type: {
             name: 'shape',
             value: {
-              foo: {name: 'custom'},
+              foo: {
+                name: 'custom',
+                raw: 'xyz'
+              },
             }
           },
           required: false
@@ -368,7 +372,8 @@ describe('React documentation parser', function() {
     var source = getSource([
       '{',
       '  propTypes: {',
-      '    custom_prop: function() {}',
+      '    custom_prop: function() {},',
+      '    custom_prop2: () => {}',
       '  }',
       '}'
     ].join('\n'));
@@ -377,7 +382,17 @@ describe('React documentation parser', function() {
       description: '',
       props: {
         custom_prop: {
-          type: {name: 'custom'},
+          type: {
+            name: 'custom',
+            raw: 'function() {}'
+          },
+          required: false
+        },
+        custom_prop2: {
+          type: {
+            name: 'custom',
+            raw: '() => {}'
+          },
           required: false
         }
       }
@@ -409,7 +424,10 @@ describe('React documentation parser', function() {
           required: false
         },
         custom_propB: {
-          type: {name: 'custom'},
+          type: {
+            name: 'custom',
+            raw: 'Prop.bool.isRequired'
+          },
           required: false
         }
       }

website/react-docgen/lib/handlers/defaultValueHandler.js

@@ -30,7 +30,7 @@ function getDefaultValue(path) {
   } else {
     path = resolveToValue(path);
     node = path.node;
-    defaultValue = expressionTo.String(path);
+    defaultValue = recast.print(path).code;
   }
   if (typeof defaultValue !== 'undefined') {
     return {

website/react-docgen/lib/handlers/propTypeHandler.js

@@ -19,9 +19,10 @@ var expressionTo = require('../utils/expressionTo');
 var getNameOrValue = require('../utils/getNameOrValue');
 var getPropertyName = require('../utils/getPropertyName');
 var isReactModuleName = require('../utils/isReactModuleName');
+var recast = require('recast');
 var resolveToModule = require('../utils/resolveToModule');
 var resolveToValue = require('../utils/resolveToValue');
-var types = require('recast').types.namedTypes;
+var types = recast.types.namedTypes;
 
 var simplePropTypes = {
   array: 1,
@@ -146,8 +147,11 @@ var propTypes = {
  */
 function getPropType(path) {
   var node = path.node;
-  if (types.FunctionExpression.check(node) || !isPropTypesExpression(path)) {
-    return {name: 'custom'};
+  if (types.Function.check(node) || !isPropTypesExpression(path)) {
+    return {
+      name: 'custom',
+      raw: recast.print(path).code
+    };
   }
 
   var expressionParts = [];