Adding a codemod for transforming createElement function calls to JSX

README.md

@@ -15,6 +15,10 @@ APIs.
 
 ### Included Scripts
 
+`create-element-to-jsx` converts calls to `React.createElement` into JSX elements.
+
+  * `jscodeshift -t react-codemod/transforms/create-element-to-jsx.js <file>`
+
 `findDOMNode` updates `this.getDOMNode()` or `this.refs.foo.getDOMNode()`
 calls inside of `React.createClass` components to `React.findDOMNode(foo)`. Note
 that it will only look at code inside of `React.createClass` calls and only

test/__tests__/create-element-to-jsx-test.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2013-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.
+ *
+ */
+
+'use strict';
+
+describe('create-element-to-jsx', () => {
+
+  it('transforms correctly', () => {
+    test('create-element-to-jsx', 'create-element-to-jsx-single-element');
+
+    test('create-element-to-jsx', 'create-element-to-jsx-props');
+
+    test('create-element-to-jsx', 'create-element-to-jsx-children-literal');
+
+    test('create-element-to-jsx', 'create-element-to-jsx-children');
+
+    test('create-element-to-jsx', 'create-element-to-jsx-spread');
+
+    test('create-element-to-jsx', 'create-element-to-jsx-no-react');
+  });
+
+});

test/create-element-to-jsx-children-literal.js

@@ -0,0 +1,3 @@
+var React = require('React');
+
+React.createElement('div', null, 'foo');

test/create-element-to-jsx-children-literal.output.js

@@ -0,0 +1,3 @@
+var React = require('React');
+
+<div>foo</div>;

test/create-element-to-jsx-children.js

@@ -0,0 +1,12 @@
+var React = require('React');
+
+var a = React.createElement(
+  Foo,
+  null,
+  React.createElement('div', { foo: 'bar' }),
+  React.createElement(
+    'span',
+    null,
+    'blah'
+  )
+);

test/create-element-to-jsx-children.output.js

@@ -0,0 +1,3 @@
+var React = require('React');
+
+var a = <Foo><div foo="bar" /><span>blah</span></Foo>;

test/create-element-to-jsx-no-react.js

@@ -0,0 +1,3 @@
+var React = require('foo');
+
+React.createElement(Foo, 'la');

test/create-element-to-jsx-props.js

@@ -0,0 +1,6 @@
+var React = require('React');
+
+function foo() {
+  var a = React.createElement(Foo, { foo: 'bar', bar: this.state.baz });
+  var b = React.createElement('div', { foo: 'bar', bar: this.state.baz });
+}

test/create-element-to-jsx-props.output.js

@@ -0,0 +1,6 @@
+var React = require('React');
+
+function foo() {
+  var a = <Foo foo="bar" bar={this.state.baz} />;
+  var b = <div foo="bar" bar={this.state.baz} />;
+}

test/create-element-to-jsx-single-element.js

@@ -0,0 +1,4 @@
+var React = require('React');
+
+var a = React.createElement(Foo, null);
+var b = React.createElement('div', null);

test/create-element-to-jsx-single-element.output.js

@@ -0,0 +1,4 @@
+var React = require('React');
+
+var a = <Foo />;
+var b = <div />;

test/create-element-to-jsx-spread.js

@@ -0,0 +1,3 @@
+var React = require('React');
+
+React.createElement(Foo, {foo: 'bar', ...someObject});

test/create-element-to-jsx-spread.output.js

@@ -0,0 +1,3 @@
+var React = require('React');
+
+<Foo foo="bar" {...someObject} />;

transforms/create-element-to-jsx.js

@@ -0,0 +1,86 @@
+module.exports = function(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const ReactUtils = require('./utils/ReactUtils')(j);
+
+  const convertObjectExpressionToJSXAttributes = (objectExpression) => {
+    if (!objectExpression.properties) {
+      return [];
+    }
+
+    const attributes = objectExpression.properties.map((property) => {
+      if (property.type === 'SpreadProperty') {
+        return j.jsxSpreadAttribute(property.argument);
+      }  else if (property.type === 'Property') {
+        const propertyValueType = property.value.type;
+
+        let value;
+        if (propertyValueType === 'Literal') {
+          value = j.literal(property.value.value);
+        } else if (propertyValueType === 'MemberExpression') {
+          value = j.jsxExpressionContainer(property.value);
+        }
+
+        return j.jsxAttribute(
+          j.jsxIdentifier(property.key.name),
+          value
+        );
+      }
+    });
+
+    return attributes;
+  };
+
+  const convertNodeToJSX = (node) => {
+    const args = node.value.arguments;
+
+    const elementType = args[0].type;
+    const elementName = elementType === 'Literal' ? args[0].value : args[0].name;
+    const props = args[1];
+
+    const attributes = convertObjectExpressionToJSXAttributes(props);
+
+    const children = node.value.arguments.slice(2).map((child, index) => {
+      if (child.type === 'Literal') {
+        return j.literal(child.value);
+      }
+
+      return convertNodeToJSX(node.get('arguments', index + 2));
+    });
+
+    const openingElement = j.jsxOpeningElement(j.jsxIdentifier(elementName), attributes);
+
+    if (children.length) {
+      return j.jsxElement(
+        openingElement,
+        j.jsxClosingElement(j.jsxIdentifier(elementName)),
+        children
+      );
+    } else {
+      openingElement.selfClosing = true;
+      return j.jsxElement(openingElement);
+    }
+  };
+
+  if (ReactUtils.hasReact(root)) {
+    const mutations = root
+      .find(j.CallExpression, {
+        callee: {
+          object: {
+            name: 'React',
+          },
+          property: {
+            name: 'createElement',
+          },
+        },
+      })
+      .replaceWith(convertNodeToJSX)
+      .size();
+
+    if (mutations) {
+      return root.toSource();
+    }
+  }
+
+  return null;
+};