diff --git a/docs/getting-started/ClientRendering.md b/docs/getting-started/ClientRendering.md
index 563c9de..7b82dda 100644
--- a/docs/getting-started/ClientRendering.md
+++ b/docs/getting-started/ClientRendering.md
@@ -20,5 +20,18 @@ import { Resolver } from "react-resolver";
Resolver.render(
() => ,
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(
+ () => ,
+ document.getElementById("app")
+);
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 86510e5..b9b8263 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
"test": "test"
},
"peerDependencies": {
- "react": "^0.14.6 || ^15.0.0-0 || ^16.0.0",
- "react-dom": "^0.14.6 || ^15.0.0-0 || ^16.0.0"
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
},
"devDependencies": {
"babel": "5.8.34",
@@ -16,6 +16,7 @@
"gitbook-cli": "2.3.0",
"gitbook-plugin-prism": "^1.1.0",
"gitbook-plugin-todo": "0.1.2",
+ "jsdom": "^9.12.0",
"mocha": "2.3.4",
"prop-types": "^15.5.8",
"react": "^16.0.0",
diff --git a/src/Resolver.js b/src/Resolver.js
index 9a22de8..3f8a35f 100644
--- 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((
+
+ {render}
+
+ ), node);
+
+ delete window[PAYLOAD];
+ }
+
static resolve = function(render, initialData = {}) {
const queue = [];
renderToStaticMarkup(
{
queue.push(promise);
- return Promise.resolve(true);
+ return Promise.resolve(true);
})}>
{render}
diff --git a/test/mocha.opts b/test/mocha.opts
index d001861..61b97de 100644
--- 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
index 40b4149..0aeff0f 100644
--- 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(() => (), document.getElementById("resolver"))
+ })
+
+ it("browser hydrateRender", () => {
+ return Resolver.hydrateRender(() => (), document.getElementById("resolver"))
+ })
+
+ it("browser render markup", function() {
+ Resolver.render(() => (), document.getElementById("resolver"));
+ const markup = document.getElementById("resolver").innerHTML;
+ assert.equal(markup, "testRender
");
+ });
+
+ it("browser hydrateRender markup", function() {
+ Resolver.hydrateRender(() => (), document.getElementById("resolver"))
+ const markup = document.getElementById("resolver").innerHTML;
+ assert.equal(markup, "testHydrateRender
");
+ });
+
+ });
});
diff --git a/test/setup.js b/test/setup.js
new file mode 100644
index 0000000..acd7dd5
--- /dev/null
+++ b/test/setup.js
@@ -0,0 +1,20 @@
+var jsdom = require("jsdom").jsdom;
+var document = jsdom("");
+var window = document.defaultView;
+
+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);
\ No newline at end of file