From 82b92bafcc090b8a046062590e310b8fef2be029 Mon Sep 17 00:00:00 2001
From: Wing Leung <wing.leung@vrt.be>
Date: Mon, 9 Oct 2017 18:01:32 +0200
Subject: [PATCH] [New] Use hydrate when possible

---
 package.json             |  8 ++++----
 src/index.js             |  7 ++++++-
 test/renderReact-test.js | 39 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 801c15c..cbc8e0a 100644
--- a/package.json
+++ b/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"
diff --git a/src/index.js b/src/index.js
index f20c119..ae8f72a 100644
--- a/src/index.js
+++ b/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);
+        }
       });
     }
 
diff --git a/test/renderReact-test.js b/test/renderReact-test.js
index 89cbca9..15ce8c6 100644
--- a/test/renderReact-test.js
+++ b/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;