Fix PropTypes deprecation warnings (#804)

* Upgrade to react 15.5 Ran the codemod: jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js * Downgrade react-router to v3.0.5 * Add createReactClass import to generatorFunction.test.js * Downgrade babel-loader back to ^6.3.2 in clent package.json.tt
shakacode · Apr 13, 2017 · fe7fdf4 · fe7fdf4
1 parent bd0bbcc
commit fe7fdf4
Show file tree

Hide file tree

Showing 18 changed files with 950 additions and 826 deletions.
diff --git a/...eact_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx b/...eact_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export default class HelloWorld extends React.Component {
   static propTypes = {

diff --git a/lib/generators/react_on_rails/templates/base/base/client/package.json.tt b/lib/generators/react_on_rails/templates/base/base/client/package.json.tt
@@ -14,25 +14,25 @@
   },
   "cacheDirectories": ["node_modules", "client/node_modules"],
   "dependencies": {
-    "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.1",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
     "babel-loader": "^6.3.2",
     "babel-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "es5-shim": "^4.5.9",
     "expose-loader": "^0.7.3",
     "imports-loader": "^0.7.1",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>",
     <%- if options.redux? -%>
-    "react-redux": "^5.0.3",
+    "react-redux": "^5.0.4",
     "redux": "^3.6.0",
     <%- end -%>
-    "webpack": "^2.3.1"
+    "webpack": "^2.3.3"
   },
   "devDependencies": {
   }

diff --git a/...act_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx b/...act_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const HelloWorld = ({ name, updateName }) => (
   <div>

diff --git a/node_package/tests/ComponentRegistry.test.js b/node_package/tests/ComponentRegistry.test.js
@@ -7,6 +7,7 @@
 
 import test from 'tape';
 import React from 'react';
+import createReactClass from 'create-react-class';
 
 import ComponentRegistry from '../src/ComponentRegistry';
 
@@ -22,7 +23,7 @@ test('ComponentRegistry registers and retrieves generator function components',
 
 test('ComponentRegistry registers and retrieves ES5 class components', (assert) => {
   assert.plan(1);
-  const C2 = React.createClass({
+  const C2 = createReactClass({
     render() {
       return <div> WORLD </div>;
     },

diff --git a/node_package/tests/ReactOnRails.test.js b/node_package/tests/ReactOnRails.test.js
@@ -6,12 +6,12 @@
 import test from 'tape';
 import { createStore } from 'redux';
 import React from 'react';
-
+import createReactClass from 'create-react-class';
 import ReactOnRails from '../src/ReactOnRails';
 
 test('ReactOnRails render returns a virtual DOM element for component', (assert) => {
   assert.plan(1);
-  const R1 = React.createClass({
+  const R1 = createReactClass({
     render() {
       return (
         <div> WORLD </div>

diff --git a/node_package/tests/generatorFunction.test.js b/node_package/tests/generatorFunction.test.js
@@ -5,13 +5,14 @@
 
 import test from 'tape';
 import React from 'react';
+import createReactClass from 'create-react-class';
 
 import generatorFunction from '../src/generatorFunction';
 
 test('generatorFunction: ES5 Component recognized as React.Component', (assert) => {
   assert.plan(1);
 
-  const es5Component = React.createClass({
+  const es5Component = createReactClass({
     render() {
       return (<div>ES5 React Component</div>);
     },
@@ -67,7 +68,7 @@ test('generatorFunction: pure component recognized as React.Component', (assert)
 test('generatorFunction: Generator function recognized as such', (assert) => {
   assert.plan(1);
 
-  const foobarComponent = React.createClass({
+  const foobarComponent = createReactClass({
     render() {
       return (<div>Component for Generator Function</div>);
     },

diff --git a/package.json b/package.json
@@ -7,35 +7,37 @@
     "doc": "docs"
   },
   "devDependencies": {
-    "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.1",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "babel-tape-runner": "^2.0.1",
-    "babel-types": "^6.23.0",
+    "babel-types": "^6.24.1",
     "babelify": "^7.3.0",
     "blue-tape": "^1.0.0",
-    "eslint": "^3.16.1",
+    "create-react-class": "^15.5.2",
+    "eslint": "^3.19.0",
     "eslint-config-shakacode": "^14.1.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.0",
-    "flow-bin": "^0.40.0",
-    "jsdom": "^9.11.0",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "eslint-plugin-react": "^6.10.3",
+    "flow-bin": "^0.43.1",
+    "jsdom": "^9.12.0",
+    "prop-types": "^15.5.7",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "react-transform-hmr": "^1.0.4",
     "redux": "^3.6.0",
-    "release-it": "^2.5.4",
+    "release-it": "^2.7.1",
     "tap-spec": "^4.1.1",
     "tape": "^4.6.3",
-    "webpack": "^2.3.1"
+    "webpack": "^2.3.3"
   },
   "peerDependencies": {
     "babel-runtime": ">= 6",

diff --git a/spec/dummy/client/app/components/DeferredRender.jsx b/spec/dummy/client/app/components/DeferredRender.jsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
 
@@ -21,7 +22,7 @@ const DeferredRender = ({ children }) => (
 );
 
 DeferredRender.propTypes = {
-  children: React.PropTypes.node,
+  children: PropTypes.node,
 };
 
 export default DeferredRender;
diff --git a/spec/dummy/client/app/components/HelloWorld.jsx b/spec/dummy/client/app/components/HelloWorld.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import RailsContext from './RailsContext';
 
 // Example of CSS modules.

diff --git a/spec/dummy/client/app/components/HelloWorldContainer.jsx b/spec/dummy/client/app/components/HelloWorldContainer.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 

diff --git a/spec/dummy/client/app/components/HelloWorldES5.jsx b/spec/dummy/client/app/components/HelloWorldES5.jsx
@@ -1,11 +1,13 @@
 /* eslint-disable react/prefer-es6-class */
 
+import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 
 // Super simple example of React component using React.createClass
-const HelloWorldES5 = React.createClass({
+const HelloWorldES5 = createReactClass({
   propTypes: {
-    helloWorldData: React.PropTypes.object,
+    helloWorldData: PropTypes.object,
   },
 
   getInitialState() {

diff --git a/spec/dummy/client/app/components/HelloWorldRedux.jsx b/spec/dummy/client/app/components/HelloWorldRedux.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import RailsContext from './RailsContext';
 
 // Super simple example of the simplest possible React component

diff --git a/spec/dummy/client/app/components/ImageExample/ImageExample.js b/spec/dummy/client/app/components/ImageExample/ImageExample.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import css from './ImageExample.scss';
 
 // Note the global alias for images
@@ -33,7 +34,7 @@ const TestComponent = (props) => (
 );
 
 TestComponent.propTypes = {
-  message: React.PropTypes.string,
+  message: PropTypes.string,
 };
 
 export default TestComponent;
diff --git a/spec/dummy/client/app/components/RailsContext.jsx b/spec/dummy/client/app/components/RailsContext.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function renderContextRows(railsContext) {

diff --git a/spec/dummy/client/app/components/RouterLayout.jsx b/spec/dummy/client/app/components/RouterLayout.jsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
 
@@ -30,7 +31,7 @@ const RouterLayout = ({ children }) => (
 );
 
 RouterLayout.propTypes = {
-  children: React.PropTypes.object,
+  children: PropTypes.object,
 };
 
 export default RouterLayout;
diff --git a/spec/dummy/client/package.json b/spec/dummy/client/package.json
@@ -8,56 +8,57 @@
   },
   "main": "js/app.js",
   "dependencies": {
-    "autoprefixer": "^6.7.6",
-    "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
+    "autoprefixer": "^6.7.7",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.1",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
-    "css-loader": "^0.26.2",
+    "css-loader": "^0.28.0",
     "es5-shim": "^4.5.9",
     "expose-loader": "^0.7.3",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.10.1",
-    "history": "^4.5.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "history": "^4.6.1",
     "imports-loader": "^0.7.1",
-    "jquery": "^3.1.1",
+    "jquery": "^3.2.1",
     "jquery-ujs": "^1.2.2",
-    "loader-utils": "^1.0.2",
+    "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "node-libs-browser": "^2.0.0",
-    "node-sass": "^4.5.0",
-    "postcss-loader": "^1.3.2",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "node-sass": "^4.5.2",
+    "postcss-loader": "^1.3.3",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "react-on-rails": "file:../../..",
-    "react-redux": "^5.0.3",
-    "react-router": "^3.0.2",
+    "react-proptypes": "^0.0.1",
+    "react-redux": "^5.0.4",
+    "react-router": "3.0.5",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",
-    "resolve-url-loader": "^2.0.0",
-    "sass-loader": "^6.0.2",
-    "sass-resources-loader": "1.2.0",
-    "style-loader": "^0.13.2",
+    "resolve-url-loader": "^2.0.2",
+    "sass-loader": "^6.0.3",
+    "sass-resources-loader": "1.2.1",
+    "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
-    "webpack": "^2.3.1"
+    "webpack": "^2.3.3"
   },
   "devDependencies": {
     "babel-plugin-react-transform": "^2.0.2",
-    "body-parser": "^1.16.1",
-    "eslint": "^3.16.1",
+    "body-parser": "^1.17.1",
+    "eslint": "^3.19.0",
     "eslint-config-shakacode": "^14.1.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.0",
-    "fbjs": "^0.8.9",
-    "jsdom": "^9.11.0",
+    "eslint-plugin-react": "^6.10.3",
+    "fbjs": "^0.8.12",
+    "jsdom": "^9.12.0",
     "react-transform-hmr": "^1.0.4",
     "tape": "^4.6.3",
-    "webpack-dev-server": "^2.4.1"
+    "webpack-dev-server": "^2.4.2"
   },
   "browser": {
     "fs": false