Upgrade react (take 2)

The original pull request had some npm packages that were needed to build the site included in dev dependencies, so the build failed.
vim-awesome · May 24, 2016 · 5fcb9ae · 5fcb9ae
1 parent 527a066
commit 5fcb9ae
Show file tree

Hide file tree

Showing 28 changed files with 131 additions and 180 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["react"]
+}
diff --git a/conf/jest_preprocessor.js b/conf/jest_preprocessor.js
diff --git a/conf/webpack.config.js b/conf/webpack.config.js
@@ -31,7 +31,10 @@ module.exports = {
   devtool: 'source-map',
   module: {
     loaders: [
-      { test: /\.jsx$/, loader: "jsx-loader?harmony" }
+      {
+        test: /\.jsx$/,
+        loader: "babel"
+      }
     ]
   },
   plugins: plugins

diff --git a/package.json b/package.json
@@ -6,19 +6,25 @@
     "url": "git://github.com/vim-awesome/vim-awesome.git"
   },
   "devDependencies": {
+    "babel-jest": "^12.0.2",
+    "babel-preset-jest": "^12.0.2",
     "eslint": "^2.4.0",
     "eslint-plugin-react": "^5.1.1",
     "jest-cli": "^12.0.2",
-    "react-tools": "^0.10.0"
+    "react-addons-test-utils": "~15.1.0"
   },
   "dependencies": {
+    "babel-core": "^6.8.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-react": "^6.5.0",
     "jquery": "~2.2.3",
-    "jsx-loader": "~0.10.2",
     "lodash": "^4.12.0",
     "marked": "~0.3.2",
     "moment": "~2.13.0",
-    "react": "~0.10.0",
-    "react-nested-router": "~0.2.0",
+    "react": "~15.1.0",
+    "react-bootstrap": "^0.29.4",
+    "react-dom": "^15.1.0",
+    "react-router": "^2.4.1",
     "store": "~1.3.16",
     "webpack": "~1.13.0"
   },
@@ -29,7 +35,6 @@
   "jest": {
     "automock": false,
     "rootDir": "web/static/js",
-    "scriptPreprocessor": "../../../conf/jest_preprocessor.js",
     "testFileExtensions": [
       "js",
       "jsx"

diff --git a/web/static/js/AboutPage.jsx b/web/static/js/AboutPage.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

diff --git a/web/static/js/Category.jsx b/web/static/js/Category.jsx
@@ -1,10 +1,9 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var $ = require("jquery");
 var _ = require("lodash");
 var React = require("react");
+var findDOMNode = require("react-dom").findDOMNode;
 
 var fetchAllCategories = require("./fetchAllCategories.js");
 
@@ -26,7 +25,7 @@ var Category = React.createClass({
   },
 
   componentWillUnmount: function() {
-    $(this.getDOMNode()).find('[title]').tooltip('destroy');
+    $(findDOMNode(this)).find('[title]').tooltip('destroy');
   },
 
   componentDidUpdate: function() {
@@ -35,7 +34,7 @@ var Category = React.createClass({
 
   addBootstrapTooltips: function() {
     _.delay(function() {
-      $(this.getDOMNode()).find('[title]')
+      $(findDOMNode(this)).find('[title]')
         .tooltip('destroy')
         .tooltip({
           animation: false,
@@ -52,7 +51,7 @@ var Category = React.createClass({
   onCategoryClick: function(e) {
     if (this.props.editOnly) {
       e.preventDefault();
-      this.refs.editBtn.getDOMNode().click();
+      this.refs.editBtn.click();
     }
   },
 

diff --git a/web/static/js/Footer.jsx b/web/static/js/Footer.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

diff --git a/web/static/js/NotFound.jsx b/web/static/js/NotFound.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

diff --git a/web/static/js/Page.jsx b/web/static/js/Page.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");
@@ -20,9 +18,9 @@ var Page = React.createClass({
 
   render: function() {
     return <div className="page-container">
-      <Sidebar query={this.props.query} />
+      <Sidebar query={this.props.location.query} />
       <div className="content">
-        {this.props.activeRoute}
+        {this.props.children}
         <Footer />
       </div>
     </div>;

diff --git a/web/static/js/Plugin.jsx b/web/static/js/Plugin.jsx
@@ -1,11 +1,10 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var $ = require("jquery");
 var React = require("react");
 var store = require("store");
-var transitionTo = require("react-nested-router").transitionTo;
+var browserHistory = require("react-router").browserHistory;
+var findDOMNode = require("react-dom").findDOMNode;
 
 var Plugin = React.createClass({
   getInitialState: function() {
@@ -23,22 +22,22 @@ var Plugin = React.createClass({
   },
 
   componentWillUnmount: function() {
-    $(this.getDOMNode()).find('[title]').tooltip('destroy');
+    $(findDOMNode(this)).find('[title]').tooltip('destroy');
   },
 
   componentDidUpdate: function() {
     this.addBootstrapTooltips();
   },
 
   addBootstrapTooltips: function() {
-    $(this.getDOMNode()).find('[title]').tooltip({
+    $(findDOMNode(this)).find('[title]').tooltip({
       animation: false,
       container: 'body'
     });
   },
 
   goToDetailsPage: function() {
-    transitionTo("plugin", {slug: this.props.plugin.slug});
+    browserHistory.push("plugin/" + this.props.plugin.slug);
   },
 
   render: function() {
@@ -53,6 +52,7 @@ var Plugin = React.createClass({
         className={"plugin" + (hasNavFocus ? " nav-focus" : "") +
             (this.state.hasVisited ? " visited" : "")}
         onMouseEnter={this.props.onMouseEnter}>
+      {/* TODO(captbaritone): Use react-router Link */}
       <a href={"/plugin/" + plugin.slug}>
         <h3 className={"plugin-name " + plugin.category}>{plugin.name}</h3>
         {plugin.author && <span className="by">by</span>}

diff --git a/web/static/js/SearchBox.jsx b/web/static/js/SearchBox.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");
@@ -20,7 +18,7 @@ var SearchBox = React.createClass({
     var key = e.keyCode;
     if (tag !== "INPUT" && tag !== "TEXTAREA" &&
         key === KEYCODES.FORWARD_SLASH) {
-      var inputElement = this.refs.input.getDOMNode();
+      var inputElement = this.refs.input;
       inputElement.focus();
       inputElement.select();
       this.props.onFocus();
@@ -30,13 +28,13 @@ var SearchBox = React.createClass({
   handleKeyUp: function(e) {
     var key = e.nativeEvent.keyCode;
     if (key === KEYCODES.ESCAPE || key === KEYCODES.ENTER) {
-      this.refs.input.getDOMNode().blur();
+      this.refs.input.blur();
       this.props.onBlur();
     }
   },
 
   onChange: function() {
-    this.props.onChange(this.refs.input.getDOMNode().value);
+    this.props.onChange(this.refs.input.value);
   },
 
   render: function() {

diff --git a/web/static/js/Sidebar.jsx b/web/static/js/Sidebar.jsx
@@ -1,11 +1,9 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var $ = require("jquery");
 var _ = require("lodash");
 var React = require("react");
-var transitionTo = require("react-nested-router").transitionTo;
+var browserHistory = require("react-router").browserHistory;
 
 var SidebarCategory = require("./SidebarCategory.jsx");
 var utils = require("./utils.js");
@@ -28,20 +26,17 @@ var Sidebar = React.createClass({
 
     // This event is triggered by Bootstrap's collapse widget (which creates the
     // accordion) when a category is expanded.
-    $(this.refs.categories.getDOMNode()).on('show', this.onCategoryShow);
+    $(this.refs.categories).on('show', this.onCategoryShow);
   },
 
   onCategoryShow: function(e) {
     var category = $(e.target).data('category');
-    transitionTo("plugin-list", null, {"q": "cat:" + category});
+    browserHistory.push({query: {"q": "cat:" + category}});
   },
 
   render: function() {
-    var selectedTags = [];
-    if (_.get(this.props, 'query.q')) {
-      selectedTags = utils.getQueriesWithPrefix(this.props.query.q, 'tag');
-    }
-
+    var query = this.props.query.q || '';
+    var selectedTags = utils.getQueriesWithPrefix(query, 'tag');
     var categories = _.reject(this.state.categories, {id: "uncategorized"});
 
     return <div className="sidebar">

diff --git a/web/static/js/SidebarCategory.jsx b/web/static/js/SidebarCategory.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict"
 
 var _ = require("lodash");

diff --git a/web/static/js/Spinner.jsx b/web/static/js/Spinner.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

diff --git a/web/static/js/SubmitPage.jsx b/web/static/js/SubmitPage.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var _ = require("lodash");

diff --git a/web/static/js/Tags.jsx b/web/static/js/Tags.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var $ = require("jquery");
@@ -34,7 +32,7 @@ var Tags = React.createClass({
 
   componentDidUpdate: function() {
     if (this.refs && this.refs.tagInput) {
-      var $input = $(this.refs.tagInput.getDOMNode());
+      var $input = $(this.refs.tagInput);
       if (!this.props.editOnly) {
         $input.focus();
       }
@@ -129,7 +127,7 @@ var Tags = React.createClass({
     var key = e.keyCode;
     if (key === KEYCODES.ENTER || key === KEYCODES.TAB ||
         key === KEYCODES.COMMA) {
-      var $input = $(this.refs.tagInput.getDOMNode());
+      var $input = $(this.refs.tagInput);
       this.addTag($input.val());
       $input.val("");
     }

diff --git a/web/static/js/ThanksForSubmittingPage.jsx b/web/static/js/ThanksForSubmittingPage.jsx
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 "use strict";
 
 var React = require("react");

diff --git a/web/static/js/__tests__/Category-test.jsx b/web/static/js/__tests__/Category-test.jsx
@@ -1,17 +1,14 @@
-/** @jsx React.DOM */
-
 "use strict"
 
 var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 
 var Category = require('../Category.jsx');
 
 describe('Category', function() {
   it('renders without throwing', function() {
-    var container = document.createElement('div');
-    React.renderComponent(
-      <Category />,
-      container
+    TestUtils.renderIntoDocument(
+      <Category />
     );
   });
 });
diff --git a/web/static/js/__tests__/Page-test.jsx b/web/static/js/__tests__/Page-test.jsx
@@ -1,17 +1,15 @@
-/** @jsx React.DOM */
-
 "use strict"
 
 var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 
 var Page = require('../Page.jsx');
 
 describe('Page', function() {
   it('renders without throwing', function() {
-    var container = document.createElement('div');
-    React.renderComponent(
-      <Page />,
-      container
+    TestUtils.renderIntoDocument(
+      // Normally react-routes adds a location. For tests we do it ourselves.
+      <Page location={{query: ''}} />
     );
   });
 });
diff --git a/web/static/js/__tests__/SearchBox-test.jsx b/web/static/js/__tests__/SearchBox-test.jsx
@@ -1,17 +1,14 @@
-/** @jsx React.DOM */
-
 "use strict"
 
 var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 
 var SearchBox = require('../SearchBox.jsx');
 
 describe('SearchBox', function() {
   it('renders without throwing', function() {
-    var container = document.createElement('div');
-    React.renderComponent(
-      <SearchBox />,
-      container
+    TestUtils.renderIntoDocument(
+      <SearchBox />
     );
   });
 });
diff --git a/web/static/js/__tests__/Sidebar-test.jsx b/web/static/js/__tests__/Sidebar-test.jsx
@@ -1,18 +1,15 @@
-/** @jsx React.DOM */
-
 "use strict"
 
 var React = require('react');
+var TestUtils = require('react-addons-test-utils');
 
 var Sidebar = require('../Sidebar.jsx');
 
 describe('Sidebar', function() {
   it('renders without throwing', function() {
     var query = 'cat:code-display tag:css';
-    var container = document.createElement('div');
-    React.renderComponent(
-      <Sidebar query={query} />,
-      container
+    TestUtils.renderIntoDocument(
+      <Sidebar query={query} />
     );
   });
 });