Use Babel to build React

Size comparison:

```
   raw     gz Compared to master @ 6ed98ec0c8
     =      = build/JSXTransformer.js
-15736  -3247 build/react-with-addons.js
  +287     +7 build/react-with-addons.min.js
-14412  -2887 build/react.js
  +274    +15 build/react.min.js
```

Differences mostly look to be various bits of whitespace that Babel ends up removing during its transforms (https://gist.github.com/spicyj/21ef31f4d95fb7a58daf). In minified files, mostly additions of `"use strict";`.

bin/jsx-internal

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 // -*- mode: js -*-
+// vim: set ft=javascript :
 "use strict";
 
-var transform = require('../main').transform;
+var babel = require('babel-core');
+
 var propagate = require("../vendor/constants").propagate;
 
 require("commoner").version(
@@ -30,7 +32,10 @@ require("commoner").version(
   var constants = context.config.constants || {};
 
   // This is where JSX, ES6, etc. desugaring happens.
-  source = transform(source, {harmony: true, stripTypes: true});
+  source = babel.transform(source, {
+    blacklist: ['spec.functionName', 'validation.react'],
+    filename: id
+  }).code;
 
   // Constant propagation means removing any obviously dead code after
   // replacing constant expressions with literal (boolean) values.

jest/preprocessor.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var ReactTools = require('../main.js');
-
+var babel = require('babel-core');
 var coffee = require('coffee-script');
+
 var tsPreprocessor = require('./ts-preprocessor');
 
 var defaultLibraries = [
@@ -20,6 +20,12 @@ module.exports = {
     if (path.match(/\.ts$/) && !path.match(/\.d\.ts$/)) {
       return ts.compile(src, path);
     }
-    return ReactTools.transform(src, {harmony: true});
+    if (!path.match(/\/node_modules\//)) {
+      return babel.transform(src, {
+        blacklist: ['spec.functionName', 'validation.react'],
+        filename: path
+      }).code;
+    }
+    return src;
   }
 };

package.json

@@ -31,6 +31,7 @@
     "jstransform": "^10.1.0"
   },
   "devDependencies": {
+    "babel-core": "^5.2.7",
     "benchmark": "~1.0.0",
     "browserify": "^9.0.3",
     "bundle-collapser": "^1.1.1",
@@ -70,7 +71,7 @@
   },
   "preferGlobal": true,
   "commonerConfig": {
-    "version": 4
+    "version": 5
   },
   "scripts": {
     "test": "jest",

src/browser/ui/dom/setInnerHTML.js

@@ -67,7 +67,11 @@ if (ExecutionEnvironment.canUseDOM) {
           html[0] === '<' && NONVISIBLE_TEST.test(html)) {
         // Recover leading whitespace by temporarily prepending any character.
         // \uFEFF has the potential advantage of being zero-width/invisible.
-        node.innerHTML = '\uFEFF' + html;
+        // UglifyJS drops U+FEFF chars when parsing, so use String.fromCharCode
+        // in hopes that this is preserved even if "\uFEFF" is transformed to
+        // the actual Unicode character (by Babel, for example).
+        // https://github.com/mishoo/UglifyJS2/blob/v2.4.20/lib/parse.js#L216
+        node.innerHTML = String.fromCharCode(0xFEFF) + html;
 
         // deleteData leaves an empty `TextNode` which offsets the index of all
         // children. Definitely want to avoid this.

src/test/mocks.js

@@ -69,7 +69,7 @@ function makeComponent(metadata) {
 
         instances.push(this);
         calls.push(Array.prototype.slice.call(arguments));
-        if (this instanceof arguments.callee) {
+        if (this instanceof f) {
           // This is probably being called as a constructor
           for (var slot in prototype) {
             // Copy prototype methods to the instance to make
@@ -106,8 +106,8 @@ function makeComponent(metadata) {
         }
 
         // Otherwise use prototype implementation
-        if (returnValue === undefined && arguments.callee._protoImpl) {
-          return arguments.callee._protoImpl.apply(this, arguments);
+        if (returnValue === undefined && f._protoImpl) {
+          return f._protoImpl.apply(this, arguments);
         }
 
         return returnValue;