diff --git a/Gruntfile.js b/Gruntfile.js index 6df6a1ba7..52c8147eb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -20,9 +20,9 @@ var indexTemplate = _.template(indexFile); */ var prodDependencies = [ - '', - '', - '' + '', + '', + '' ]; 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'); diff --git a/package.json b/package.json index 54f69cec7..fc2d1c7b3 100644 --- a/package.json +++ b/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" } } diff --git a/src/js/app/index.js b/src/js/app/index.js index a50e0c742..ddb4f4315 100644 --- a/src/js/app/index.js +++ b/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 } diff --git a/src/js/level/index.js b/src/js/level/index.js index 4bac1b5bc..435407606 100644 --- a/src/js/level/index.js +++ b/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') ); diff --git a/src/js/react_views/CommandHistoryView.jsx b/src/js/react_views/CommandHistoryView.jsx index 7f52dffca..a5f1240b2 100644 --- a/src/js/react_views/CommandHistoryView.jsx +++ b/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} ); - }, + } - 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; diff --git a/src/js/react_views/CommandView.jsx b/src/js/react_views/CommandView.jsx index 4eb55ebff..d887af3c2 100644 --- a/src/js/react_views/CommandView.jsx +++ b/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({ ); - }, + } - renderResult: function() { + renderResult() { if (!this.state.result) { return null; } @@ -126,9 +114,9 @@ var CommandView = React.createClass({ {result} ); - }, + } - 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; diff --git a/src/js/react_views/CommandsHelperBarView.jsx b/src/js/react_views/CommandsHelperBarView.jsx index 4982d56e8..a3c43fe09 100644 --- a/src/js/react_views/CommandsHelperBarView.jsx +++ b/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({ - - propTypes: { - shown: React.PropTypes.bool.isRequired, - onExit: React.PropTypes.func.isRequired - }, +class CommandsHelperBarView extends React.Component { - render: function() { + render() { return ( ); - }, + } - 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; diff --git a/src/js/react_views/HelperBarView.jsx b/src/js/react_views/HelperBarView.jsx index 7f1f4016e..1e63df733 100644 --- a/src/js/react_views/HelperBarView.jsx +++ b/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))} ); - }, + } - 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; diff --git a/src/js/react_views/IntlHelperBarView.jsx b/src/js/react_views/IntlHelperBarView.jsx index e0756dccd..4ec0b17c3 100644 --- a/src/js/react_views/IntlHelperBarView.jsx +++ b/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({ - - propTypes: { - shown: React.PropTypes.bool.isRequired, - onExit: React.PropTypes.func.isRequired - }, +class IntlHelperBarView extends React.Component{ - render: function() { + render() { return ( ); - }, + } - 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; diff --git a/src/js/react_views/LevelToolbarView.jsx b/src/js/react_views/LevelToolbarView.jsx index 4c91b8995..b498df631 100644 --- a/src/js/react_views/LevelToolbarView.jsx +++ b/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 (
); - }, + } - 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; diff --git a/src/js/visuals/animation/index.js b/src/js/visuals/animation/index.js index cd0784c4c..1fa30291e 100644 --- a/src/js/visuals/animation/index.js +++ b/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"); }