From 992f8603e2f373b66ace58303accd1aac1d3f4f2 Mon Sep 17 00:00:00 2001 From: Hongarc Date: Tue, 23 Apr 2019 00:44:32 +0700 Subject: [PATCH 1/4] Add `https:` to cdn file, can test with open file --- Gruntfile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 6df6a1ba..dbeef3c1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -20,9 +20,9 @@ var indexTemplate = _.template(indexFile); */ var prodDependencies = [ - '', - '', - '' + '', + '', + '' ]; var devDependencies = [ From 634d0ad5e00d2e116413f7b1bc6a0411041f2323 Mon Sep 17 00:00:00 2001 From: Hongarc Date: Tue, 23 Apr 2019 00:45:27 +0700 Subject: [PATCH 2/4] Use `uglify-es` instead of `uglify` --- Gruntfile.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index dbeef3c1..52c8147e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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 7ded23c8..281d5a55 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "grunt-browserify": "^5.3.0", "grunt-contrib-clean": "^2.0.0", "grunt-contrib-jshint": "^2.1.0", - "grunt-contrib-uglify": "^4.0.1", + "grunt-contrib-uglify-es": "^3.3.0", "grunt-env": "^0.4.4", "grunt-hash": "^0.5.0", "grunt-jasmine-node": "~0.1.0", From 64eb8ab77301408df2fa22929327fc5a3f4ee8fe Mon Sep 17 00:00:00 2001 From: Hongarc Date: Tue, 23 Apr 2019 00:49:15 +0700 Subject: [PATCH 3/4] migrating old version `react` to last version --- package.json | 3 ++ src/js/app/index.js | 7 +-- src/js/react_views/CommandHistoryView.jsx | 40 ++++++++-------- src/js/react_views/CommandView.jsx | 50 ++++++++++---------- src/js/react_views/CommandsHelperBarView.jsx | 27 ++++++----- src/js/react_views/HelperBarView.jsx | 24 +++++----- src/js/react_views/IntlHelperBarView.jsx | 26 +++++----- src/js/react_views/LevelToolbarView.jsx | 33 ++++++------- src/js/react_views/MainHelperBarView.jsx | 21 ++++---- src/js/visuals/animation/index.js | 2 +- 10 files changed, 124 insertions(+), 109 deletions(-) diff --git a/package.json b/package.json index 281d5a55..0946b25c 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,12 @@ "dependencies": { "backbone": "^1.4.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 a50e0c74..ddb4f431 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/react_views/CommandHistoryView.jsx b/src/js/react_views/CommandHistoryView.jsx index 7f52dffc..eda82fce 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], @@ -28,9 +25,9 @@ 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); - }, + } - 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 4eb55ebf..df7b1f64 100644 --- a/src/js/react_views/CommandView.jsx +++ b/src/js/react_views/CommandView.jsx @@ -1,4 +1,5 @@ var React = require('react'); +var PropTypes = require('prop-types'); var reactUtil = require('../util/reactUtil'); var keyMirror = require('react/lib/keyMirror'); @@ -9,26 +10,20 @@ 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() { + onModelDestroy() { if (!this.isMounted()) { return; } @@ -39,9 +34,9 @@ var CommandView = React.createClass({ } React.unmountComponentAtNode(this.getDOMNode().parentNode); - }, + } - updateStateFromModel: function() { + updateStateFromModel() { var commandJSON = this.props.command.toJSON(); this.setState({ status: commandJSON.status, @@ -49,18 +44,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 +85,9 @@ var CommandView = React.createClass({ ); - }, + } - renderResult: function() { + renderResult() { if (!this.state.result) { return null; } @@ -126,9 +122,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 +137,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 4982d56e..a3c43fe0 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({ +class CommandsHelperBarView extends React.Component { - propTypes: { - shown: React.PropTypes.bool.isRequired, - onExit: React.PropTypes.func.isRequired - }, - - 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 7f1f4016..1e63df73 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 e0756dcc..4ec0b17c 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({ +class IntlHelperBarView extends React.Component{ - propTypes: { - shown: React.PropTypes.bool.isRequired, - onExit: React.PropTypes.func.isRequired - }, - - 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 4c91b899..e3dfe77f 100644 --- a/src/js/react_views/LevelToolbarView.jsx +++ b/src/js/react_views/LevelToolbarView.jsx @@ -1,26 +1,20 @@ 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() { + componentDidMount() { this.setState({ isHidden: this.props.parent.getIsGoalExpanded() }); @@ -33,9 +27,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 cd0784c4..1fa30291 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"); } From 208a6c843a69182e79151659ad5f2c10c1c2fdec Mon Sep 17 00:00:00 2001 From: Hongarc Date: Thu, 25 Apr 2019 10:02:00 +0700 Subject: [PATCH 4/4] fix: correct module instead of `react` --- package.json | 1 + src/js/level/index.js | 7 ++++--- src/js/react_views/CommandHistoryView.jsx | 4 ++-- src/js/react_views/CommandView.jsx | 14 +++----------- src/js/react_views/LevelToolbarView.jsx | 9 +++++++-- 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 0946b25c..539367dc 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ }, "dependencies": { "backbone": "^1.4.0", + "fbjs": "^1.0.0", "flux": "^3.1.3", "jquery": "^3.4.0", "markdown": "^0.5.0", diff --git a/src/js/level/index.js b/src/js/level/index.js index 4bac1b5b..43540760 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 eda82fce..a5f1240b 100644 --- a/src/js/react_views/CommandHistoryView.jsx +++ b/src/js/react_views/CommandHistoryView.jsx @@ -13,7 +13,7 @@ var _subscribeEvents = [ class CommandHistoryView extends React.Component { - componentDidMount() { + componentDidMount() { for (var i = 0; i < _subscribeEvents.length; i++) { this.props.commandCollection.on( _subscribeEvents[i], @@ -24,7 +24,7 @@ class CommandHistoryView extends React.Component { 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() { diff --git a/src/js/react_views/CommandView.jsx b/src/js/react_views/CommandView.jsx index df7b1f64..d887af3c 100644 --- a/src/js/react_views/CommandView.jsx +++ b/src/js/react_views/CommandView.jsx @@ -1,8 +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, @@ -24,16 +25,7 @@ class CommandView extends React.Component{ } onModelDestroy() { - 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); + ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); } updateStateFromModel() { diff --git a/src/js/react_views/LevelToolbarView.jsx b/src/js/react_views/LevelToolbarView.jsx index e3dfe77f..b498df63 100644 --- a/src/js/react_views/LevelToolbarView.jsx +++ b/src/js/react_views/LevelToolbarView.jsx @@ -14,12 +14,17 @@ class LevelToolbarView extends React.Component { }; } + 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; }