Add support for custom factory methods

Author: aaronjensen

README.md

@@ -62,7 +62,14 @@ It must be an array of the transforms you want to use:
       }, {
         // can be an NPM module name or a local path
         "transform": "./src/my-custom-transform"
-      }]
+      }],
+      // you can use custom factory methods,
+      // defaults to: ["React.createClass", "createClass"]
+      "factoryMethods": [
+        "React.createClass",
+        "createClass",
+        "myComponentFactory"
+      ]
     }
   }
 }
@@ -190,10 +197,6 @@ Don’t forget to tag it with `react-transform` keyword on npm.
 * **https://github.com/alexkuz/react-transform-debug-inspector**
 * Feeling inspired? Send a PR!
 
-## Limitations
-
-Currently, it can only locate components of two types: ES6 classes with `render` method and explicit `React.createClass()` calls. I’m open to adding more heuristics for other common patterns, given enough interest.
-
 ## Discussion
 
 You can discuss React Transform and related projects in **#react-transform** channel on [Reactiflux Slack](http://reactiflux.com).

src/index.js

@@ -28,6 +28,7 @@ export default function ({ Plugin, types: t }) {
   const depthKey = '__reactTransformDepth';
   const recordsKey = '__reactTransformRecords';
   const wrapComponentIdKey = '__reactTransformWrapComponentId';
+  const optionsKey = '__reactTransformOptions';
 
   function isRenderMethod(member) {
     return member.kind === 'method' &&
@@ -41,15 +42,28 @@ export default function ({ Plugin, types: t }) {
     return cls.body.body.filter(isRenderMethod).length > 0;
   }
 
-  const isCreateClassCallExpression = t.buildMatchMemberExpression('React.createClass');
+  function isCreateClassCallExpression(node, factoryMethods) {
+    for (const method of factoryMethods) {
+      if (method.indexOf('.') !== -1) {
+        if (t.buildMatchMemberExpression(method)(node.callee)) {
+          return true;
+        }
+      } else {
+        if (node.callee.name === method) {
+          return true;
+        }
+      }
+    }
+  }
+
   /**
    * Does this node look like a createClass() call?
    */
-  function isCreateClass(node) {
+  function isCreateClass(node, factoryMethods = ['React.createClass', 'createClass']) {
     if (!node || !t.isCallExpression(node)) {
       return false;
     }
-    if (!isCreateClassCallExpression(node.callee)) {
+    if (!isCreateClassCallExpression(node, factoryMethods)) {
       return false;
     }
     const args = node.arguments;
@@ -257,7 +271,8 @@ export default function ({ Plugin, types: t }) {
 
       CallExpression: {
         exit(node, parent, scope, file) {
-          if (!isCreateClass(node)) {
+          const { factoryMethods } = this.state[optionsKey];
+          if (!isCreateClass(node, factoryMethods)) {
             return;
           }
 
@@ -273,6 +288,7 @@ export default function ({ Plugin, types: t }) {
 
       Program: {
         enter(node, parent, scope, file) {
+          this.state[optionsKey] = getPluginOptions(file);
           this.state[wrapComponentIdKey] = scope.generateUidIdentifier('wrapComponent');
         },
 
@@ -282,11 +298,12 @@ export default function ({ Plugin, types: t }) {
           }
 
           // Generate a variable holding component records
-          const allTransformOptions = getPluginOptions(file).transforms;
+          const allTransforms = this.state[optionsKey].transforms;
+
           const [recordsId, recordsVar] = defineComponentRecords(scope, this.state);
 
           // Import transformation functions and initialize them
-          const initTransformCalls = allTransformOptions.map(transformOptions =>
+          const initTransformCalls = allTransforms.map(transformOptions =>
             defineInitTransformCall(scope, file, recordsId, transformOptions)
           ).filter(Boolean);
           const initTransformIds = initTransformCalls.map(c => c[0]);

test/fixtures/customFactoryMethod/actual.js

@@ -0,0 +1,7 @@
+var myComponentFactory = require('myComponentFactory');
+
+var A = myComponentFactory({
+  displayName: 'A',
+
+  render() {}
+});

test/fixtures/customFactoryMethod/expected.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _myCustomModuleWrap2 = require('my-custom-module/wrap');
+
+var _myCustomModuleWrap3 = _interopRequireDefault(_myCustomModuleWrap2);
+
+var _react = require('react');
+
+var _myOtherCustomModuleWrap2 = require('my-other-custom-module/wrap');
+
+var _myOtherCustomModuleWrap3 = _interopRequireDefault(_myOtherCustomModuleWrap2);
+
+var _components = {
+  _$A: {
+    displayName: 'A'
+  }
+};
+
+var _reactComponentWrapper = (0, _myCustomModuleWrap3['default'])({
+  filename: '%FIXTURE_PATH%',
+  components: _components,
+  locals: [module],
+  imports: [_react]
+});
+
+var _reactComponentWrapper2 = (0, _myOtherCustomModuleWrap3['default'])({
+  filename: '%FIXTURE_PATH%',
+  components: _components,
+  locals: [],
+  imports: []
+});
+
+function _wrapComponent(uniqueId) {
+  return function (ReactClass) {
+    return _reactComponentWrapper2(_reactComponentWrapper(ReactClass, uniqueId), uniqueId);
+  };
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var myComponentFactory = require('myComponentFactory');
+
+var A = _wrapComponent('_$A')(myComponentFactory({
+  displayName: 'A',
+
+  render: function render() {}
+}));

test/index.js

@@ -24,7 +24,12 @@ describe('finds React components', () => {
               imports: ['react']
             }, {
               transform: 'my-other-custom-module/wrap'
-            }]
+            }],
+            factoryMethods: [
+              'React.createClass',
+              'createClass',
+              'myComponentFactory'
+            ]
           }
         }
       }).code;