[New] Use hydrate when possible

package.json

@@ -45,8 +45,8 @@
   "homepage": "https://github.com/airbnb/hypernova-react#readme",
   "peerDependencies": {
     "hypernova": "^2.0.0",
-    "react": "0.14.x || >= 15.x",
-    "react-dom": "0.14.x || >= 15.x"
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -62,8 +62,8 @@
     "jsdom": "^9.12.0",
     "mocha": "^4.0.1",
     "prop-types": "^15.6.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16",
     "rimraf": "^2.6.2",
     "sinon": "^4.1.2",
     "sinon-sandbox": "^1.0.2"

src/index.js

@@ -18,7 +18,12 @@ export const renderReact = (name, component) => hypernova({
       payloads.forEach((payload) => {
         const { node, data } = payload;
         const element = React.createElement(component, data);
-        ReactDOM.render(element, node);
+
+        if (ReactDOM.hydrate) {
+          ReactDOM.hydrate(element, node);
+        } else {
+          ReactDOM.render(element, node);
+        }
       });
     }
 

test/renderReact-test.js

@@ -1,5 +1,7 @@
 import jsdom from 'jsdom';
 import { assert } from 'chai';
+import sinon from 'sinon';
+import ReactDOM from 'react-dom';
 
 import ExampleReactComponent from './components/ExampleReactComponent';
 import { renderReact } from '..';
@@ -20,7 +22,7 @@ describe('renderReact', () => {
     assert.match(result, /Hello Desmond/);
   });
 
-  it('calls hypernova.client', (done) => {
+  it('calls hypernova.client (hydrate method)', (done) => {
     jsdom.env(result, (err, window) => {
       if (err) {
         done(err);
@@ -30,9 +32,44 @@ describe('renderReact', () => {
       global.window = window;
       global.document = window.document;
 
+      const hydrateMethod = sinon.spy(ReactDOM, 'hydrate');
+
+      // Calling it again for the client.
+      renderReact('ExampleReactComponent', ExampleReactComponent);
+
+      assert(hydrateMethod.calledOnce);
+
+      delete global.window;
+      delete global.document;
+
+      hydrateMethod.restore();
+
+      done();
+    });
+  });
+
+  it('calls hypernova.client (render method)', (done) => {
+    jsdom.env(result, (err, window) => {
+      if (err) {
+        done(err);
+        return;
+      }
+
+      const sandbox = sinon.createSandbox();
+      sandbox.stub(ReactDOM, 'hydrate').value(undefined);
+
+      const renderMethod = sinon.spy(ReactDOM, 'render');
+
+      global.window = window;
+      global.document = window.document;
+
       // Calling it again for the client.
       renderReact('ExampleReactComponent', ExampleReactComponent);
 
+      assert(renderMethod.calledOnce);
+
+      sandbox.restore();
+
       delete global.window;
       delete global.document;