feat: up to date dependencies , migrate react

Gruntfile.js

@@ -20,9 +20,9 @@ var indexTemplate = _.template(indexFile);
  */
 
 var prodDependencies = [
-  '<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>',
-  '<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>',
-  '<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>'
+  '<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>',
+  '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>',
+  '<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>'
 ];
 
 var devDependencies = [
@@ -232,7 +232,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-shell-spawn');
   grunt.loadNpmTasks('grunt-jasmine-node');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-uglify-es');
   grunt.loadNpmTasks('grunt-react');
   grunt.loadNpmTasks('grunt-env');
 

package.json

@@ -16,10 +16,10 @@
     "browserify": "^13.0.0",
     "contributor-faces": "^1.0.2",
     "grunt": "^1.0.4",
-    "grunt-browserify": "^4.0.1",
-    "grunt-contrib-clean": "~0.5.0",
-    "grunt-contrib-jshint": "~0.7.2",
-    "grunt-contrib-uglify": "~0.2.7",
+    "grunt-browserify": "^5.3.0",
+    "grunt-contrib-clean": "^2.0.0",
+    "grunt-contrib-jshint": "^2.1.0",
+    "grunt-contrib-uglify-es": "^3.3.0",
     "grunt-env": "^0.4.4",
     "grunt-hash": "~0.5.0",
     "grunt-jasmine-node": "~0.1.0",
@@ -30,11 +30,15 @@
     "prompt": "^1.0.0"
   },
   "dependencies": {
-    "backbone": "~1.1.2",
-    "flux": "^2.0.1",
-    "markdown": "~0.4.0",
-    "q": "~0.8.11",
-    "react": "^0.13.1",
+    "backbone": "^1.4.0",
+    "fbjs": "^1.0.0",
+    "flux": "^3.1.3",
+    "jquery": "^3.4.0",
+    "markdown": "^0.5.0",
+    "prop-types": "^15.7.2",
+    "q": "^1.5.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "underscore": "~1.4.3"
   }
 }

src/js/app/index.js

@@ -1,6 +1,7 @@
 var Backbone = require('backbone');
 var EventEmitter = require('events').EventEmitter;
 var React = require('react');
+var ReactDOM = require('react-dom');
 
 var util = require('../util');
 var intl = require('../intl');
@@ -251,7 +252,7 @@ var initDemo = function(sandbox) {
   }
   if (params.hasOwnProperty('STARTREACT')) {
     /*
-    React.render(
+    ReactDOM.render(
       React.createElement(CommandView, {}),
       document.getElementById(params['STARTREACT'])
       );*/
@@ -315,11 +316,11 @@ function CommandUI() {
     el: $('#commandLineBar')
   });
 
-  React.render(
+  ReactDOM.render(
     React.createElement(MainHelperBarView),
     document.getElementById('helperBarMount')
   );
-  React.render(
+  ReactDOM.render(
     React.createElement(
       CommandHistoryView,
       { commandCollection: this.commandCollection }

src/js/level/index.js

@@ -1,11 +1,12 @@
 var Q = require('q');
+var React = require('react');
+var ReactDOM = require('react-dom');
 
 var util = require('../util');
 var Main = require('../app');
 var intl = require('../intl');
 var log = require('../log');
 
-var React = require('react');
 var Errors = require('../util/errors');
 var Sandbox = require('../sandbox/').Sandbox;
 var GlobalStateActions = require('../actions/GlobalStateActions');
@@ -139,7 +140,7 @@ var Level = Sandbox.extend({
         parent: this
       }
     );
-    React.render(
+    ReactDOM.render(
       this.levelToolbar,
       document.getElementById('levelToolbarMount')
     );
@@ -543,7 +544,7 @@ var Level = Sandbox.extend({
   },
 
   die: function() {
-    React.unmountComponentAtNode(
+    ReactDOM.unmountComponentAtNode(
       document.getElementById('levelToolbarMount')
     );
 

src/js/react_views/CommandHistoryView.jsx

@@ -1,6 +1,8 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+
 var CommandView = require('../react_views/CommandView.jsx');
 var Main = require('../app');
-var React = require('react');
 
 var _subscribeEvents = [
   'add',
@@ -9,14 +11,9 @@ var _subscribeEvents = [
   'all'
 ];
 
-var CommandHistoryView = React.createClass({
+class CommandHistoryView extends React.Component {
 
-  propTypes: {
-    // the backbone command model collection
-    commandCollection: React.PropTypes.object.isRequired
-  },
-
-  componentDidMount: function() {
+  componentDidMount() {
     for (var i = 0; i < _subscribeEvents.length; i++) {
       this.props.commandCollection.on(
         _subscribeEvents[i],
@@ -27,10 +24,10 @@ var CommandHistoryView = React.createClass({
 
     this.props.commandCollection.on('change', this.scrollDown, this);
     Main.getEvents().on('commandScrollDown', this.scrollDown, this);
-    Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
-  },
+    Main.getEvents().on('clearOldCommands', () => this.clearOldCommands(), this);
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     for (var i = 0; i < _subscribeEvents.length; i++) {
       this.props.commandCollection.off(
         _subscribeEvents[i],
@@ -38,13 +35,13 @@ var CommandHistoryView = React.createClass({
         this
       );
     }
-  },
+  }
 
-  updateFromCollection: function() {
+  updateFromCollection() {
     this.forceUpdate();
-  },
+  }
 
-  render: function() {
+  render() {
     var allCommands = [];
     this.props.commandCollection.each(function(command, index) {
       allCommands.push(
@@ -60,9 +57,9 @@ var CommandHistoryView = React.createClass({
         {allCommands}
       </div>
     );
-  },
+  }
 
-  scrollDown: function() {
+  scrollDown() {
     var cD = document.getElementById('commandDisplay');
     var t = document.getElementById('terminal');
 
@@ -81,9 +78,9 @@ var CommandHistoryView = React.createClass({
     if (shouldScroll) {
       t.scrollTop = t.scrollHeight;
     }
-  },
+  }
 
-  clearOldCommands: function() {
+  clearOldCommands() {
     // go through and get rid of every command that is "processed" or done
     var toDestroy = [];
 
@@ -100,6 +97,11 @@ var CommandHistoryView = React.createClass({
     this.scrollDown();
   }
 
-});
+}
+
+CommandHistoryView.propTypes = {
+  // the backbone command model collection
+  commandCollection: PropTypes.object.isRequired
+};
 
 module.exports = CommandHistoryView;

src/js/react_views/CommandView.jsx

@@ -1,7 +1,9 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
+var PropTypes = require('prop-types');
 
 var reactUtil = require('../util/reactUtil');
-var keyMirror = require('react/lib/keyMirror');
+var keyMirror = require('fbjs/lib/keyMirror');
 
 var STATUSES = keyMirror({
   inqueue: null,
@@ -9,39 +11,24 @@ var STATUSES = keyMirror({
   finished: null
 });
 
-var CommandView = React.createClass({
+class CommandView extends React.Component{
 
-  propTypes: {
-    // the backbone command model
-    command: React.PropTypes.object.isRequired,
-    id: React.PropTypes.string,
-  },
-
-  componentDidMount: function() {
+  componentDidMount() {
     this.props.command.on('change', this.updateStateFromModel, this);
     this.props.command.on('destroy', this.onModelDestroy, this);
     this.updateStateFromModel();
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.props.command.off('change', this.updateStateFromModel, this);
     this.props.command.off('destroy', this.onModelDestroy, this);
-  },
-
-  onModelDestroy: function() {
-    if (!this.isMounted()) {
-      return;
-    }
-    if (!this.getDOMNode) {
-      // WTF -- only happens in casperjs tests weirdly
-      console.error('this.getDOMNode not a function?');
-      return;
   }
 
-    React.unmountComponentAtNode(this.getDOMNode().parentNode);
-  },
+  onModelDestroy() {
+    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
+  }
 
-  updateStateFromModel: function() {
+  updateStateFromModel() {
     var commandJSON = this.props.command.toJSON();
     this.setState({
       status: commandJSON.status,
@@ -49,18 +36,19 @@ var CommandView = React.createClass({
       warnings: commandJSON.warnings,
       result: commandJSON.result
     });
-  },
+  }
 
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       status: STATUSES.inqueue,
       rawStr: 'git commit',
       warnings: [],
       result: ''
     };
-  },
+  }
 
-  render: function() {
+  render() {
     var commandClass = reactUtil.joinClasses([
       this.state.status,
       'commandLine',
@@ -89,9 +77,9 @@ var CommandView = React.createClass({
         </div>
       </div>
     );
-  },
+  }
 
-  renderResult: function() {
+  renderResult() {
     if (!this.state.result) {
       return null;
     }
@@ -126,9 +114,9 @@ var CommandView = React.createClass({
         {result}
       </div>
     );
-  },
+  }
 
-  renderFormattedWarnings: function() {
+  renderFormattedWarnings() {
     var warnings = this.state.warnings;
     var result = [];
     for (var i = 0; i < warnings.length; i++) {
@@ -141,6 +129,12 @@ var CommandView = React.createClass({
     }
     return result;
   }
-});
+};
+
+CommandView.propTypes = {
+  // the backbone command model
+  command: PropTypes.object.isRequired,
+  id: PropTypes.string,
+};
 
 module.exports = CommandView;

src/js/react_views/CommandsHelperBarView.jsx

@@ -1,31 +1,27 @@
+var React = require('react');
+var PropTypes = require('prop-types');
 var HelperBarView = require('../react_views/HelperBarView.jsx');
 var Main = require('../app');
-var React = require('react');
 
 var log = require('../log');
 
-var CommandsHelperBarView = React.createClass({
+class CommandsHelperBarView extends React.Component {
 
-  propTypes: {
-    shown: React.PropTypes.bool.isRequired,
-    onExit: React.PropTypes.func.isRequired
-  },
-
-  render: function() {
+  render() {
     return (
       <HelperBarView
         items={this.getItems()}
         shown={this.props.shown}
       />
     );
-  },
+  }
 
-  fireCommand: function(command) {
+  fireCommand(command) {
     log.viewInteracted('commandHelperBar');
     Main.getEventBaton().trigger('commandSubmitted', command);
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       text: 'Levels',
       onClick: function() {
@@ -64,6 +60,11 @@ var CommandsHelperBarView = React.createClass({
     }];
   }
 
-});
+};
+
+CommandsHelperBarView.propTypes = {
+  shown: PropTypes.bool.isRequired,
+  onExit: PropTypes.func.isRequired
+};
 
 module.exports = CommandsHelperBarView;

src/js/react_views/HelperBarView.jsx

@@ -1,16 +1,11 @@
 var React = require('react');
+var PropTypes = require('prop-types');
 
 var reactUtil = require('../util/reactUtil');
 
-var HelperBarView = React.createClass({
+class HelperBarView extends React.Component {
 
-  propTypes: {
-    className: React.PropTypes.string,
-    shown: React.PropTypes.bool.isRequired,
-    items: React.PropTypes.array.isRequired
-  },
-
-  render: function() {
+  render() {
     var topClassName = reactUtil.joinClasses([
       'helperBar',
       'transitionAll',
@@ -32,9 +27,9 @@ var HelperBarView = React.createClass({
         }.bind(this))}
       </div>
     );
-  },
+  }
 
-  renderItem: function(item, index) {
+  renderItem(item, index) {
     var testID = item.icon || item.testID ||
       item.text.toLowerCase();
     if (item.newPageLink) {
@@ -63,6 +58,13 @@ var HelperBarView = React.createClass({
     );
   }
 
-});
+};
+
+HelperBarView.propTypes = {
+  className: PropTypes.string,
+  shown: PropTypes.bool.isRequired,
+  items: PropTypes.array.isRequired
+};
+
 
 module.exports = HelperBarView;

src/js/react_views/IntlHelperBarView.jsx

@@ -1,32 +1,29 @@
+var PropTypes = require('prop-types');
+
 var HelperBarView = require('../react_views/HelperBarView.jsx');
 var Main = require('../app');
 var React = require('react');
 
 var log = require('../log');
 
-var IntlHelperBarView = React.createClass({
+class IntlHelperBarView extends React.Component{
 
-  propTypes: {
-    shown: React.PropTypes.bool.isRequired,
-    onExit: React.PropTypes.func.isRequired
-  },
-
-  render: function() {
+  render() {
     return (
       <HelperBarView
         items={this.getItems()}
         shown={this.props.shown}
       />
     );
-  },
+  }
 
-  fireCommand: function(command) {
+  fireCommand(command) {
     log.viewInteracted('intlSelect');
     Main.getEventBaton().trigger('commandSubmitted', command);
     this.props.onExit();
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       text: 'Git Branching',
       testID: 'english',
@@ -107,6 +104,11 @@ var IntlHelperBarView = React.createClass({
     }];
   }
 
-});
+};
+
+IntlHelperBarView.propTypes = {
+  shown: PropTypes.bool.isRequired,
+  onExit: PropTypes.func.isRequired
+}
 
 module.exports = IntlHelperBarView;

src/js/react_views/LevelToolbarView.jsx

@@ -1,31 +1,30 @@
 var React = require('react');
-var PropTypes = React.PropTypes;
+var PropTypes = require('prop-types');
 
 var intl = require('../intl');
 var reactUtil = require('../util/reactUtil');
 
-var LevelToolbarView = React.createClass({
+class LevelToolbarView extends React.Component {
 
-  propTypes: {
-    name: PropTypes.string.isRequired,
-    onGoalClick: PropTypes.func.isRequired,
-    onObjectiveClick: PropTypes.func.isRequired,
-    parent: PropTypes.object.isRequired
-  },
-
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       isHidden: true,
       isGoalExpanded: this.props.parent.getIsGoalExpanded()
     };
-  },
+  }
 
-  componentDidMount: function() {
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  componentDidMount() {
+    this._isMounted = true;
     this.setState({
-      isHidden: this.props.parent.getIsGoalExpanded()
+      isHidden: this.props.parent.getIsGoalExpanded(),
+      isGoalExpanded: this.props.parent.getIsGoalExpanded()
     });
     this.props.parent.on('goalToggled', function() {
-      if (!this.isMounted()) {
+      if (!this._isMounted) {
         return;
       }
 
@@ -33,9 +32,9 @@ var LevelToolbarView = React.createClass({
         isGoalExpanded: this.props.parent.getIsGoalExpanded()
       });
     }.bind(this));
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div className={reactUtil.joinClasses([
           'toolbar',
@@ -78,6 +77,13 @@ var LevelToolbarView = React.createClass({
     );
   }
 
-});
+};
+
+LevelToolbarView.propTypes = {
+  name: PropTypes.string.isRequired,
+  onGoalClick: PropTypes.func.isRequired,
+  onObjectiveClick: PropTypes.func.isRequired,
+  parent: PropTypes.object.isRequired
+}
 
 module.exports = LevelToolbarView;

src/js/react_views/MainHelperBarView.jsx

@@ -14,15 +14,16 @@ var BARS = keyMirror({
   COMMANDS: null
 });
 
-var MainHelperBarView = React.createClass({
+class MainHelperBarView extends React.Component {
 
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       shownBar: BARS.SELF
     };
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         <HelperBarView
@@ -40,15 +41,15 @@ var MainHelperBarView = React.createClass({
         />
       </div>
     );
-  },
+  }
 
-  showSelf: function() {
+  showSelf() {
     this.setState({
       shownBar: BARS.SELF
     });
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       icon: 'question-sign',
       onClick: function() {
@@ -74,6 +75,6 @@ var MainHelperBarView = React.createClass({
     }];
   }
 
-});
+};
 
 module.exports = MainHelperBarView;

src/js/visuals/animation/index.js

@@ -55,7 +55,7 @@ var AnimationQueue = Backbone.Model.extend({
   },
 
   add: function(animation) {
-    if (!animation instanceof Animation) {
+    if (!(animation instanceof Animation)) {
       throw new Error("Need animation not something else");
     }