Use Babylon for parsing the React component files

We need to use Babel in order to be able to parse ES7 class properties. However,
there is no need to load all of Babel. Babylon, Babel's parser, suffices.

In turns out that almost all handlers and helper methods work well with
Babylon's AST.

Author: fkling

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "async": "^0.9.0",
     "babel-runtime": "^5.7.0",
+    "babylon": "~5.8.3",
     "node-dir": "^0.1.6",
     "nomnom": "^1.8.1",
     "recast": "^0.10.x"
@@ -49,7 +50,8 @@
     "unmockedModulePathPatterns": [
       "tests/utils",
       "recast",
-      "babel"
+      "babel",
+      "babylon"
     ]
   }
 }

src/__tests__/parse-test.js

@@ -8,17 +8,18 @@
  *
  */
 
-"use strict";
+/*global jest, describe, beforeEach, it, expect*/
 
 jest.autoMockOff();
 
 describe('parse', () => {
   var utils;
-  var parse;
+  var parse, ERROR_MISSING_DEFINITION;
 
   beforeEach(() => {
     utils = require('../../tests/utils');
-    parse = require('../parse');
+    // ugly but necessary because ../parse has default and named exports
+    ({default: parse, ERROR_MISSING_DEFINITION} = require('../parse'));
   });
 
   function pathFromSource(source) {
@@ -37,15 +38,10 @@ describe('parse', () => {
 
   it('errors if component definition is not found', () => {
     var resolver = jest.genMockFunction();
-    expect(function() {
-      parse('//empty', resolver);
-    }).toThrow(parse.ERROR_MISSING_DEFINITION);
+    expect(() => parse('//empty', resolver)).toThrow(ERROR_MISSING_DEFINITION);
     expect(resolver).toBeCalled();
 
-    handler = jest.genMockFunction().mockReturnValue([]);
-    expect(function() {
-      parse('//empty', resolver);
-    }).toThrow(parse.ERROR_MISSING_DEFINITION);
+    expect(() => parse('//empty', resolver)).toThrow(ERROR_MISSING_DEFINITION);
     expect(resolver).toBeCalled();
   });
 

src/babylon.js

@@ -0,0 +1,37 @@
+/*
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+
+var babylon = require('babylon');
+
+var options = {
+  sourceType: 'module',
+  strictMode: false,
+  locations: true,
+  ranges: true,
+  ecmaVersion: 7,
+  features: {
+    'es7.classProperties': true,
+    'es7.decorators': true,
+    'es7.comprehensions': true,
+    'es7.asyncFunctions': true,
+    'es7.exportExtensions': true,
+    'es7.trailingFunctionCommas': true,
+    'es7.objectRestSpread': true,
+  },
+  plugins: { jsx: true, flow: true },
+};
+
+export default {
+  parse(src) {
+    var file = babylon.parse(src, options);
+    file.program.comments = file.comments;
+    return file.program;
+  },
+};

src/main.js

@@ -1,25 +1,22 @@
 /*
- *  Copyright (c) 2015, Facebook, Inc.
- *  All rights reserved.
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
  *
  *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant
- *  of patent rights can be found in the PATENTS file in the same directory.
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
- */
-
-/**
  * @flow
+ *
  */
-"use strict";
 
-var handlers = require('./handlers');
-var parse = require('./parse');
-var resolver = require('./resolver');
-var utils = require('./utils');
+import handlers from './handlers';
+import parse from './parse';
+import resolver from './resolver';
+import utils from './utils';
 
-var defaultResolver = resolver.findExportedReactCreateClassCall;
-var defaultHandlers = [
+const defaultResolver = resolver.findExportedReactCreateClassCall;
+const defaultHandlers = [
   handlers.propTypeHandler,
   handlers.propDocBlockHandler,
   handlers.defaultPropsHandler,
@@ -38,11 +35,11 @@ var defaultHandlers = [
  * documentation (from docblocks), default prop values and component
  * documentation (from a docblock).
  */
-function defaultParse(
+function defaultParse( // eslint-disable-line no-unused-vars
   src: string,
   resolver?: ?Resolver,
   handlers?: ?Array<Handler>
-): (Array<Object>|Object) {
+): Array<Object>|Object {
   if (!resolver) {
     resolver = defaultResolver;
   }
@@ -53,8 +50,8 @@ function defaultParse(
   return parse(src, resolver, handlers);
 }
 
-module.exports = {
-  parse: defaultParse,
+export {
+  defaultParse as parse,
   defaultHandlers,
   handlers,
   resolver,

src/parse.js

@@ -1,23 +1,21 @@
 /*
- *  Copyright (c) 2015, Facebook, Inc.
- *  All rights reserved.
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
  *
- *  This source code is licensed under the BSD-style license found in the
- *  LICENSE file in the root directory of this source tree. An additional grant
- *  of patent rights can be found in the PATENTS file in the same directory.
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
- */
-
-/**
  * @flow
+ *
  */
-"use strict";
 
-var Documentation = require('./Documentation');
+import Documentation from './Documentation';
 
-var recast = require('recast');
+import babylon from './babylon';
+import recast from 'recast';
 
-var ERROR_MISSING_DEFINITION = 'No suitable component definition found.';
+const ERROR_MISSING_DEFINITION = 'No suitable component definition found.';
 
 function executeHandlers(handlers, componentDefinitions) {
   return componentDefinitions.map(componentDefinition => {
@@ -47,12 +45,12 @@ function executeHandlers(handlers, componentDefinitions) {
  * an array of documentation objects. If `resolver` returns a single node
  * instead, `parse` will return a documentation object.
  */
-function parse(
+export default function parse(
   src: string,
   resolver: Resolver,
   handlers: Array<Handler>
-): (Array<Object>|Object) {
-  var ast = recast.parse(src);
+): Array<Object>|Object {
+  var ast = recast.parse(src, {esprima: babylon});
   var componentDefinitions = resolver(ast.program, recast);
   var isArray = Array.isArray(componentDefinitions);
 
@@ -65,5 +63,4 @@ function parse(
     executeHandlers(handlers, [componentDefinitions])[0];
 }
 
-module.exports = parse;
-exports.ERROR_MISSING_DEFINITION = ERROR_MISSING_DEFINITION;
+export {ERROR_MISSING_DEFINITION};

src/utils/__tests__/getClassMemberValuePath-test.js

@@ -55,7 +55,7 @@ describe('getClassMemberValuePath', () => {
     });
   });
 
-  xdescribe('ClassProperty', () => {
+  describe('ClassProperty', () => {
     it('finds "normal" class properties', () => {
       var def = statement(`
         class Foo {

src/utils/docblock.js

@@ -33,7 +33,7 @@ function getDocblock(path: NodePath): ?string {
   if (path.node.comments) {
     var comments = path.node.comments.filter(function(comment) {
       return comment.leading &&
-        comment.type === 'Block' &&
+        comment.type === 'CommentBlock' &&
         comment.value.indexOf('*\n') === 0;
     });
     if (comments.length > 0) {

src/utils/isReactComponentClass.js

@@ -21,7 +21,7 @@ function isRenderMethod(node) {
   return types.MethodDefinition.check(node) &&
     !node.computed &&
     !node.static &&
-    node.kind === '' &&
+    (node.kind === '' || node.kind === 'method') &&
     node.key.name === 'render';
 }
 

src/utils/normalizeClassDefinition.js

@@ -30,7 +30,6 @@ var ignore = () => false;
  *
  * is converted to
  *
- * class
  * class MyComponent extends React.Component {
  *   // ...
  *   static propTypes = { ... };

tests/utils.js

@@ -3,6 +3,7 @@
  */
 
 import _recast from 'recast';
+import babylon from '../src/babylon';
 
 function stringify(value) {
   if (Array.isArray(value)) {
@@ -15,7 +16,9 @@ function stringify(value) {
  * Returns a NodePath to the program node of the passed node
  */
 export function parse(src, recast=_recast) {
-  return new recast.types.NodePath(recast.parse(stringify(src)).program);
+  return new recast.types.NodePath(
+    recast.parse(stringify(src), {esprima: babylon}).program
+  );
 }
 
 export function statement(src, recast=_recast) {