Fix up a number of issues in react-components.

Summary:
- Removed all lint errors
- Removed all usage of Underscore (this makes it so that react-components.js no longer depends on corelibs-legacy.js!)
- Upgrade to use the latest version of React
- Upgraded all dev dependencies to latest versions
- Fixed issues in react-live-editor and brought in that code:
Khan/react-live-editor@9a805f8

Test Plan:
- Confirmed that "make test" passes and runs without warnings.
- Confirmed that "make" runs.
- Confirmed that the docs/index.html page loads without errors or warnings *

* i18n.js seems to produce errors in the demo page, specifically:

"Invariant Violation: $_(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."

It works fine in the tests, I'm not sure what's up! The implementation also seems to be the same as what we have in webapp, I'm assuming that it's an issue with the code editor and how the code is being dynamically compiled.

Reviewers: emily, alex

Reviewed By: alex

Differential Revision: https://phabricator.khanacademy.org/D32383

Author: jeresig

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["latest", "react"]
+}

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "react-live-editor"]
 	path = react-live-editor
-	url = https://github.com/joelburget/react-live-editor.git
+	url = https://github.com/Khan/react-live-editor

Makefile

@@ -22,16 +22,16 @@ pages: docs
 	git checkout master
 
 bundle.js: jsdeps
-	./node_modules/.bin/browserify -t [ reactify --es6 ] js/*.jsx -o bundle.js
+	./node_modules/.bin/browserify -t [ babelify --presets [ es2015 react ] ] js/*.jsx -o bundle.js
 
 docs/index.html: pydeps
 	./make_template.py
 
 docs/preview-bundle.js: jsdeps
-	./node_modules/.bin/browserify -d -t [ reactify --es6 ] reactify-components.jsx -o docs/preview-bundle.js
+	./node_modules/.bin/browserify -d -t [ babelify --presets [ es2015 react ] ] reactify-components.jsx -o docs/preview-bundle.js
 
 watch-preview: jsdeps
-	./node_modules/.bin/watchify -d -t [ reactify --es6 ] js/*.jsx reactify-components.jsx -o docs/preview-bundle.js
+	./node_modules/.bin/watchify -d -t [ babelify --presets [ es2015 react ] ] js/*.jsx reactify-components.jsx -o docs/preview-bundle.js
 
 test: jsdeps
-	./node_modules/.bin/mocha --reporter spec --compilers jsx:test/compiler.js -r test/test-helper.js test/*test.jsx
+	./node_modules/.bin/mocha --reporter spec --compilers jsx:babel-register -r test/test-helper.js test/*test.jsx

examples/i18n.jsx

@@ -2,7 +2,7 @@ var translated = <$_ first="Motoko" last="Kusanagi">
     Hello, %(first)s %(last)s!
 </$_>;
 
-var link = <a href="javascript:void 0;" onClick={this._markTooHard}>
+var link = <a href="javascript:void 0;">
     <$_>Click here</$_>
 </a>;
 

js/backbone-mixin.jsx

@@ -1,8 +1,3 @@
-/* TODO(emily): fix these lint errors (http://eslint.org/docs/rules): */
-/* eslint-disable comma-dangle, no-var */
-/* To fix, remove an entry above, run ka-lint, and fix errors. */
-
-var _ = require('underscore');
 /* WARNING - DEPRECATED
  *
  * We recommend that you don't use this mixin. It's not idiomatic react and
@@ -15,10 +10,10 @@ var _ = require('underscore');
  * BackboneMixin - automatic binding and unbinding for react classes mirroring
  * backbone models and views. Example:
  *
- *     var Model = Backbone.Model.extend({ ... });
- *     var Collection = Backbone.Collection.extend({ ... });
+ *     const Model = Backbone.Model.extend({ ... });
+ *     const Collection = Backbone.Collection.extend({ ... });
  *
- *     var Example = React.createClass({
+ *     const Example = React.createClass({
  *         mixins: [BackboneMixin],
  *         getBackboneModels: function() {
  *             return [this.model, this.collection];
@@ -30,7 +25,7 @@ var _ = require('underscore');
  *
  * This binds *and* unbinds the events.
  */
-var BackboneMixin = {
+const BackboneMixin = {
     componentDidMount: function() {
         this._backboneModels = this.getBackboneModels();
         this._validateModelArray(this._backboneModels);
@@ -44,11 +39,23 @@ var BackboneMixin = {
 
     // The backbone models may have changed - rebind to the new ones
     componentDidUpdate: function(nextProps, nextState) {
-        var previousModels = this._backboneModels;
-        var currentModels = this._backboneModels = this.getBackboneModels();
+        const previousModels = this._backboneModels;
+        const currentModels = this._backboneModels = this.getBackboneModels();
+
+        const oldModels = [];
+        const newModels = [];
+
+        for (const model of previousModels) {
+            if (currentModels.indexOf(model) < 0) {
+                oldModels.push(model);
+            }
+        }
 
-        var oldModels = _(previousModels).difference(currentModels);
-        var newModels = _(currentModels).difference(previousModels);
+        for (const model of currentModels) {
+            if (previousModels.indexOf(model) < 0) {
+                newModels.push(model);
+            }
+        }
 
         this._unbind(oldModels);
         this._bind(newModels);
@@ -78,11 +85,11 @@ var BackboneMixin = {
     },
 
     _validateModelArray: function(backboneModels) {
-        if (!_.isArray(backboneModels)) {
+        if (!Array.isArray(backboneModels)) {
             throw new Error("getBackboneModels must return an array. " +
                 "get this " + backboneModels + " out of here.");
         }
-    }
+    },
 };
 
 module.exports = BackboneMixin;

js/blur-input.jsx

@@ -1,8 +1,4 @@
-/* TODO(emily): fix these lint errors (http://eslint.org/docs/rules): */
-/* eslint-disable comma-dangle, no-var, react/jsx-closing-bracket-location, react/jsx-sort-prop-types, react/sort-comp */
-/* To fix, remove an entry above, run ka-lint, and fix errors. */
-
-var React = require("react");
+const React = require("react");
 
 /* You know when you want to propagate input to a parent...
  * but then that parent does something with the input...
@@ -16,22 +12,16 @@ var React = require("react");
  * Enough melodrama. Its an input that only sends changes
  * to its parent on blur.
  */
-var BlurInput = React.createClass({
+const BlurInput = React.createClass({
     propTypes: {
+        className: React.PropTypes.string,
+        style: React.PropTypes.any,
         value: React.PropTypes.string.isRequired,
-        onChange: React.PropTypes.func.isRequired
+        onChange: React.PropTypes.func.isRequired,
     },
     getInitialState: function() {
         return {value: this.props.value};
     },
-    render: function() {
-        return <input
-            {...this.props}
-            type="text"
-            value={this.state.value}
-            onChange={this.handleChange}
-            onBlur={this.handleBlur} />;
-    },
     componentWillReceiveProps: function(nextProps) {
         this.setState({value: nextProps.value});
     },
@@ -40,7 +30,17 @@ var BlurInput = React.createClass({
     },
     handleBlur: function(e) {
         this.props.onChange(e.target.value);
-    }
+    },
+    render: function() {
+        return <input
+            className={this.props.className}
+            style={this.props.style}
+            type="text"
+            value={this.state.value}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
+        />;
+    },
 });
 
 module.exports = BlurInput;

js/button-group.jsx

@@ -1,13 +1,3 @@
-/* TODO(emily): fix these lint errors (http://eslint.org/docs/rules): */
-/* eslint-disable comma-dangle, indent, no-var, react/jsx-closing-bracket-location, react/jsx-indent-props, react/jsx-sort-prop-types, react/sort-comp */
-/* To fix, remove an entry above, run ka-lint, and fix errors. */
-
-var React = require('react');
-var ReactDOM = require("react-dom");
-var _ = require('underscore');
-var styles = require('./styles.js');
-var css = require("aphrodite").css;
-
 /* ButtonGroup is an aesthetically pleasing group of buttons.
  *
  * The class requires these properties:
@@ -27,66 +17,72 @@ var css = require("aphrodite").css;
  * Requires stylesheets/perseus-admin-package/editor.less to look nice.
  */
 
-var ButtonGroup = React.createClass({
+const React = require('react');
+const ReactDOM = require("react-dom");
+const styles = require('./styles.js');
+const css = require("aphrodite").css;
+
+const ButtonGroup = React.createClass({
     propTypes: {
         value: React.PropTypes.any,
         buttons: React.PropTypes.arrayOf(React.PropTypes.shape({
             value: React.PropTypes.any.isRequired,
             content: React.PropTypes.node,
-            title: React.PropTypes.string
+            title: React.PropTypes.string,
         })).isRequired,
         onChange: React.PropTypes.func.isRequired,
-        allowEmpty: React.PropTypes.bool
+        allowEmpty: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
         return {
             value: null,
-            allowEmpty: true
+            allowEmpty: true,
         };
     },
 
-    render: function() {
-        var value = this.props.value;
-        var buttons = _(this.props.buttons).map((button, i) => {
-                return <button title={button.title}
-                        type="button"
-                        id={"" + i}
-                        ref={"button" + i}
-                        key={"" + i}
-                        className={css(
-                            styles.button.buttonStyle,
-                            button.value === value &&
-                                styles.button.selectedStyle
-                        )}
-                        onClick={this.toggleSelect.bind(this, button.value)}>
-                    {button.content || "" + button.value}
-                </button>;
-            });
-
-        var outerStyle = {
-            display: 'inline-block',
-        };
-        return <div style={outerStyle}>
-            {buttons}
-        </div>;
-    },
-
     focus: function() {
         ReactDOM.findDOMNode(this).focus();
         return true;
     },
 
     toggleSelect: function(newValue) {
-        var value = this.props.value;
+        const value = this.props.value;
 
         if (this.props.allowEmpty) {
             // Select the new button or unselect if it's already selected
             this.props.onChange(value !== newValue ? newValue : null);
         } else {
             this.props.onChange(newValue);
         }
-    }
+    },
+
+    render: function() {
+        const value = this.props.value;
+        const buttons = this.props.buttons.map((button, i) => {
+            return <button title={button.title}
+                type="button"
+                id={"" + i}
+                ref={"button" + i}
+                key={"" + i}
+                className={css(
+                    styles.button.buttonStyle,
+                    button.value === value &&
+                        styles.button.selectedStyle
+                )}
+                onClick={this.toggleSelect.bind(this, button.value)}
+            >
+                {button.content || "" + button.value}
+            </button>;
+        });
+
+        const outerStyle = {
+            display: 'inline-block',
+        };
+        return <div style={outerStyle}>
+            {buttons}
+        </div>;
+    },
 });
 
 module.exports = ButtonGroup;

js/drag-target.jsx

@@ -1,10 +1,3 @@
-/* TODO(emily): fix these lint errors (http://eslint.org/docs/rules): */
-/* eslint-disable comma-dangle, no-var, react/jsx-closing-bracket-location, react/jsx-sort-prop-types, react/prop-types, react/sort-comp */
-/* To fix, remove an entry above, run ka-lint, and fix errors. */
-
-var React = require('react');
-var _ = require('underscore');
-
 /* This component makes its children a drag target. Example:
  *
  *     <DragTarget onDrop={this.handleDrop}>Drag to me</DragTarget>
@@ -28,36 +21,25 @@ var _ = require('underscore');
 // Other extensions:
 // * custom styles for global drag and dragOver
 // * only respond to certain types of drags (only images for instance)!
-var DragTarget = React.createClass({
+
+const React = require('react');
+
+const DragTarget = React.createClass({
     propTypes: {
         onDrop: React.PropTypes.func.isRequired,
         component: React.PropTypes.any,  // component type
-        shouldDragHighlight: React.PropTypes.func
-    },
-    render: function() {
-        var opacity = this.state.dragHover ? {"opacity": 0.3} : {};
-        var Component = this.props.component;
-
-        return (
-            <Component
-                {...this.props}
-                style={_.extend({}, this.props.style, opacity)}
-                onDrop={this.handleDrop}
-                onDragEnd={this.handleDragEnd}
-                onDragOver={this.handleDragOver}
-                onDragEnter={this.handleDragEnter}
-                onDragLeave={this.handleDragLeave} />
-        );
-    },
-    getInitialState: function() {
-        return {dragHover: false};
+        shouldDragHighlight: React.PropTypes.func,
+        style: React.PropTypes.any,
     },
     getDefaultProps: function() {
         return {
             component: "div",
-            shouldDragHighlight: () => true
+            shouldDragHighlight: () => true,
         };
     },
+    getInitialState: function() {
+        return {dragHover: false};
+    },
     handleDrop: function(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -75,7 +57,22 @@ var DragTarget = React.createClass({
     },
     handleDragEnter: function(e) {
         this.setState({dragHover: this.props.shouldDragHighlight(e)});
-    }
+    },
+    render: function() {
+        const opacity = this.state.dragHover ? {"opacity": 0.3} : {};
+        const Component = this.props.component;
+
+        return (
+            <Component
+                style={Object.assign({}, this.props.style, opacity)}
+                onDrop={this.handleDrop}
+                onDragEnd={this.handleDragEnd}
+                onDragOver={this.handleDragOver}
+                onDragEnter={this.handleDragEnter}
+                onDragLeave={this.handleDragLeave}
+            />
+        );
+    },
 });
 
 module.exports = DragTarget;