Support cloneElement calls (#138)

Author: khankuan

src/utils/__tests__/isStatelessComponent-test.js

@@ -71,6 +71,34 @@ describe('isStatelessComponent', () => {
     });
   });
 
+  describe('Stateless Function Components with React.cloneElement', () => {
+    it('accepts simple arrow function components', () => {
+      var def = parse(`
+        var AlphaBetters = require('react');
+        var Foo = ({ children }) => AlphaBetters.cloneElement(children, null);
+      `).get('body', 1).get('declarations', [0]).get('init');
+
+      expect(isStatelessComponent(def)).toBe(true);
+    });
+
+    it('accepts simple function expressions components', () => {
+      var def = parse(`
+        var React = require('react');
+        let Foo = function({ children }) { return React.cloneElement(children, null); };
+      `).get('body', 1).get('declarations', [0]).get('init');
+
+      expect(isStatelessComponent(def)).toBe(true);
+    });
+
+    it('accepts simple function declaration components', () => {
+      var def = parse(`
+        var React = require('react');
+        function Foo ({ children }) { return React.cloneElement(children, null); }
+      `).get('body', 1);
+      expect(isStatelessComponent(def)).toBe(true);
+    });
+  });
+
   describe('Stateless Function Components inside module pattern', () => {
     it('', () => {
       var def = parse(`
@@ -79,19 +107,22 @@ describe('isStatelessComponent', () => {
           Bar() { return <div />; },
           Baz: function() { return React.createElement('div'); },
           ['hello']: function() { return React.createElement('div'); },
-          render() { return 7; }
+          render() { return 7; },
+          world: function({ children }) { return React.cloneElement(children, {}); },
         }
       `).get('body', 1).get('declarations', 0).get('init');
 
       var bar = def.get('properties', 0);
       var baz = def.get('properties', 1);
       var hello = def.get('properties', 2);
       var render = def.get('properties', 3);
+      var world = def.get('properties', 4);
 
       expect(isStatelessComponent(bar)).toBe(true);
       expect(isStatelessComponent(baz)).toBe(true);
       expect(isStatelessComponent(hello)).toBe(true);
       expect(isStatelessComponent(render)).toBe(false);
+      expect(isStatelessComponent(world)).toBe(true);
     });
   });
 
@@ -250,4 +281,3 @@ describe('isStatelessComponent', () => {
     `);
   });
 });
-

src/utils/isReactCloneElementCall.js

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ *
+ * @flow
+ *
+ */
+
+import isReactModuleName from './isReactModuleName';
+import match from './match';
+import recast from 'recast';
+import resolveToModule from './resolveToModule';
+
+var {types: {namedTypes: types}} = recast;
+
+/**
+ * Returns true if the expression is a function call of the form
+ * `React.createElement(...)`.
+ */
+export default function isReactCloneElementCall(path: NodePath): boolean {
+  if (types.ExpressionStatement.check(path.node)) {
+    path = path.get('expression');
+  }
+
+  if (!match(path.node, {callee: {property: {name: 'cloneElement'}}})) {
+    return false;
+  }
+  var module = resolveToModule(path.get('callee', 'object'));
+  return Boolean(module && isReactModuleName(module));
+}

src/utils/isStatelessComponent.js

@@ -13,6 +13,7 @@ import getPropertyValuePath from './getPropertyValuePath';
 import isReactComponentClass from './isReactComponentClass';
 import isReactCreateClassCall from './isReactCreateClassCall';
 import isReactCreateElementCall from './isReactCreateElementCall';
+import isReactCloneElementCall from './isReactCloneElementCall';
 import recast from 'recast';
 import resolveToValue from './resolveToValue';
 
@@ -30,7 +31,8 @@ const validPossibleStatelessComponentTypes = [
 function isJSXElementOrReactCreateElement(path) {
   return (
     path.node.type === 'JSXElement' ||
-    (path.node.type === 'CallExpression' && isReactCreateElementCall(path))
+    (path.node.type === 'CallExpression' && isReactCreateElementCall(path)) ||
+    (path.node.type === 'CallExpression' && isReactCloneElementCall(path))
   );
 }