add hydrateRender to Resolver

Daryl Thayil · Daryl Thayil · commit 1ff5e96b6a39 · 2018-07-07T10:10:53.000-07:00
Lets us take advantage of the ReactDOM.hydrate method
diff --git a/docs/getting-started/ClientRendering.md b/docs/getting-started/ClientRendering.md
@@ -20,5 +20,18 @@ import { Resolver } from "react-resolver";
 Resolver.render(
   () => <Router ... />,
   document.getElementById("app")
-); 
+);
 ```
+
+If you want to take advantage of the `hydrate()` method available on `ReactDOM` [React Dom Docs]('https://reactjs.org/docs/react-dom.html#hydrate'), `Resolver` supports this with the `hydrateRender()` method.
+
+Use this just like `Resolver.render()`;
+
+```js
+import { Resolver } from "react-resolver";
+
+Resolver.hydrateRender(
+  () => <Router ... />,
+  document.getElementById("app")
+);
+```
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "gitbook-cli": "2.3.0",
     "gitbook-plugin-prism": "^1.1.0",
     "gitbook-plugin-todo": "0.1.2",
+    "jsdom": "^11.11.0",
     "mocha": "2.3.4",
     "prop-types": "^15.5.8",
     "react": "^16.0.0",
diff --git a/src/Resolver.js b/src/Resolver.js
@@ -45,13 +45,23 @@ export default class Resolver extends React.Component {
     delete window[PAYLOAD];
   }
 
+  static hydrateRender = function(render, node, data = window[PAYLOAD]) {
+    ReactDOM.hydrate((
+      <Resolver data={data}>
+        {render}
+      </Resolver>
+    ), node);
+
+    delete window[PAYLOAD];
+  }
+
   static resolve = function(render, initialData = {}) {
     const queue = [];
 
     renderToStaticMarkup(
       <Resolver data={initialData} onResolve={((promise) => {
         queue.push(promise);
-        return Promise.resolve(true); 
+        return Promise.resolve(true);
       })}>
         {render}
       </Resolver>
diff --git a/test/mocha.opts b/test/mocha.opts
@@ -1,4 +1,5 @@
 --compilers js:babel/register
+--require ./test/setup.js
 --recursive
 --reporter spec
 --ui bdd
diff --git a/test/resolve.test.js b/test/resolve.test.js
@@ -68,4 +68,28 @@ describe("@resolve", function() {
       );
     });
   });
+
+  context("browser render and hydrateRender", function() {
+
+    it("browser render", () => {
+      return Resolver.render(() => (<Test actual="testRender" expected="testRender" />), document.getElementById("resolver"))
+    })
+
+    it("browser hydrateRender", () => {
+      return Resolver.hydrateRender(() => (<Test actual="testHydrateRender" expected="testHydrateRender" />), document.getElementById("resolver"))
+    })
+
+    it("browser render markup", function() {
+      Resolver.render(() => (<Test actual="testRender" expected="testRender" />), document.getElementById("resolver"));
+      const markup = document.getElementById("resolver").innerHTML;
+      assert.equal(markup, "<pre>testRender</pre>");
+    });
+
+    it("browser hydrateRender markup", function() {
+      Resolver.hydrateRender(() => (<Test actual="testHydrateRender" expected="testHydrateRender" />), document.getElementById("resolver"))
+      const markup = document.getElementById("resolver").innerHTML;
+      assert.equal(markup, "<pre>testHydrateRender</pre>");
+    });
+
+  });
 });
diff --git a/test/setup.js b/test/setup.js
@@ -0,0 +1,21 @@
+const { JSDOM } = require('jsdom');
+
+const jsdom = new JSDOM('<!doctype html><html><body><div id="resolver"/></body></html>');
+const { window } = jsdom;
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === 'undefined')
+    .reduce((result, prop) => ({
+      ...result,
+      [prop]: Object.getOwnPropertyDescriptor(src, prop)
+    }), {});
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js'
+};
+copyProps(window, global);
