Upgrade all packages to React v15+ (#213)

* upgrade `frint-react` to React v15.

* upgrade `frint-react-server` to React v15.

* upgrade `frint-compat` to React v15.

* update `frint-react` docs.

* update docs for React v15 upgrade.

* fix for render tests with latest React v15.6+

Author: fahad19

package.json

@@ -74,11 +74,5 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "webpack": "^2.2.0"
-  },
-  "greenkeeper": {
-    "ignore": [
-      "react",
-      "react-dom"
-    ]
   }
 }

packages/frint-compat/README.md

@@ -40,9 +40,10 @@ Via [unpkg](https://unpkg.com) CDN:
 
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
+<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
 
 <script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script>
 <script src="https://unpkg.com/frint-model@latest/dist/frint-model.min.js"></script>

packages/frint-compat/package.json

@@ -33,12 +33,13 @@
     "frint-react": "^1.4.2",
     "frint-store": "^1.4.2",
     "lodash": "^4.13.1",
-    "react": "^0.14.8",
-    "react-dom": "^0.14.8",
     "rxjs": "^5.2.0"
   },
   "devDependencies": {
-    "frint-test-utils": "^1.3.0"
+    "frint-test-utils": "^1.3.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   },
   "bugs": {
     "url": "https://github.com/Travix-International/frint/issues"

packages/frint-compat/src/PropTypes.js

@@ -1,3 +1,4 @@
-import { PropTypes } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import PropTypes from 'prop-types';
 
 export default PropTypes;

packages/frint-compat/src/Region.spec.js

@@ -262,22 +262,20 @@ describe('frint-compat › components › Region', function () {
     it('should not render Region without any available Core App', function () {
       resetDOM();
 
-      const SampleComponent = React.createClass({
-        render() {
-          return (
-            <div className="sample">
-              <p className="text">Hello</p>
-
-              <Region name="main" />
-            </div>
-          );
-        }
-      });
+      function SampleComponent() {
+        return (
+          <div className="sample">
+            <p className="text">Hello</p>
+
+            <Region name="main" />
+          </div>
+        );
+      }
 
       ReactDOM.render(<SampleComponent />, document.getElementById('root'));
 
       expect(document.querySelector('#root .sample .text').innerHTML).to.equal('Hello');
-      expect(document.querySelector('#root .sample').innerHTML).to.contain('Hello</p><noscript');
+      expect(document.querySelector('#root .sample').innerHTML).to.contain('Hello</p><!-- react-empty:');
     });
 
     // NOTE: removed because the method is dropped in v1.x

packages/frint-compat/src/createComponent.js

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import _ from 'lodash';
 
 /**
  * Module that specifies the createComponent function for creating Components.
@@ -21,30 +23,44 @@ export default function createComponent(options = {}) {
     throw new Error(`Component ${options.name} missing required method: render`);
   }
 
-  return React.createClass({
-    ...options,
+  class GeneratedComponent extends React.Component {
+    static displayName = options.displayName
+      ? options.displayName
+      : options.name || 'GeneratedComponent';
+
+    constructor(...args) {
+      super(...args);
+
+      _.each(options, (v, k) => {
+        this[k] = v;
+
+        if (typeof this[k] === 'function') {
+          this[k].bind(this);
+        }
+      });
+    }
 
     componentWillMount() {
       if (typeof options.beforeMount === 'function') {
         return options.beforeMount.call(this);
       }
 
       return null;
-    },
+    }
 
     componentDidMount() {
       if (typeof options.afterMount === 'function') {
         return options.afterMount.call(this);
       }
 
       return null;
-    },
+    }
 
     componentWillUnmount() {
       if (typeof options.beforeUnmount === 'function') {
         options.beforeUnmount.call(this);
       }
-    },
+    }
 
     /**
      * Returns the root HTML element of the component.
@@ -55,6 +71,8 @@ export default function createComponent(options = {}) {
      */
     getDOMElement() {
       return ReactDOM.findDOMNode(this);
-    },
-  });
+    }
+  }
+
+  return GeneratedComponent;
 }

packages/frint-compat/src/createComponent.spec.js

@@ -18,13 +18,11 @@ describe('frint-compat › createComponent', function () {
   });
 
   it('returns Component that can be rendered to DOM', function () {
-    const MyComponent = createComponent({
-      render() {
-        return (
-          <p id="paragraph">Hello World</p>
-        );
-      }
-    });
+    function MyComponent() {
+      return (
+        <p id="paragraph">Hello World</p>
+      );
+    }
 
     ReactDOM.render(
       <MyComponent />,

packages/frint-compat/src/extendApp.js

@@ -1,5 +1,5 @@
 /* global window */
-/* eslint-disable no-console */
+/* eslint-disable no-console, import/no-extraneous-dependencies */
 import _ from 'lodash';
 import React from 'react';
 

packages/frint-compat/src/getMountableComponent.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, class-methods-use-this */
 import React from 'react';
 import FrintReact from 'frint-react';
 
@@ -9,19 +10,19 @@ export default function makeGetMountableComponent(Frint) {
 
     app.beforeMount();
 
-    const WrapperComponent = React.createClass({
+    class WrapperComponent extends React.Component {
       componentDidMount() {
         app.afterMount();
-      },
+      }
 
       componentWillUnmount() {
         app.beforeUnmount();
-      },
+      }
 
       render() {
         return <ComponentInProvider {...this.props} />;
       }
-    });
+    }
 
     return WrapperComponent;
   }

packages/frint-compat/src/h.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 
 export default React.createElement;