From b605222ce48290715a5618acb164a14059f4f547 Mon Sep 17 00:00:00 2001
From: Rafael Bardini <rbardini@users.noreply.github.com>
Date: Tue, 10 Jul 2018 17:02:20 +0200
Subject: [PATCH] frint-react: add `hydrate` function to `frint-react` (#427)

* Add `hydrate` function to `frint-react`

* Update README
---
 packages/frint-react/README.md           |  7 +++++
 packages/frint-react/src/hydrate.js      | 11 ++++++++
 packages/frint-react/src/hydrate.spec.js | 36 ++++++++++++++++++++++++
 packages/frint-react/src/index.js        |  2 ++
 packages/frint-react/src/index.spec.js   | 23 +++++++++++++++
 5 files changed, 79 insertions(+)
 create mode 100644 packages/frint-react/src/hydrate.js
 create mode 100644 packages/frint-react/src/hydrate.spec.js
 create mode 100644 packages/frint-react/src/index.spec.js

diff --git a/packages/frint-react/README.md b/packages/frint-react/README.md
index 0254818e..a0ae35f8 100644
--- a/packages/frint-react/README.md
+++ b/packages/frint-react/README.md
@@ -16,6 +16,7 @@
   - [Multi-instance Apps](#multi-instance-apps)
 - [API](#api)
   - [render](#render)
+  - [hydrate](#hydrate)
   - [observe](#observe)
   - [Region](#region)
   - [RegionService](#regionservice)
@@ -477,6 +478,12 @@ Renders a Root App in target DOM node.
 1. `app` (`App`): The Root App instance.
 1. `node` (`Element`): The DOM Element where you want your App to render.
 
+## hydrate
+
+> hydrate(app, node)
+
+Hydrates a Root App in target DOM node.
+
 ## observe
 
 > observe(fn)(MyComponent)
diff --git a/packages/frint-react/src/hydrate.js b/packages/frint-react/src/hydrate.js
new file mode 100644
index 00000000..9b68f8ef
--- /dev/null
+++ b/packages/frint-react/src/hydrate.js
@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies, global-require */
+import React from 'react';
+
+import getMountableComponent from './components/getMountableComponent';
+
+export default function hydrate(app, node) {
+  const MountableComponent = getMountableComponent(app);
+  const ReactDOM = require('react-dom');
+
+  return ReactDOM.hydrate(<MountableComponent />, node);
+}
diff --git a/packages/frint-react/src/hydrate.spec.js b/packages/frint-react/src/hydrate.spec.js
new file mode 100644
index 00000000..cdffeac1
--- /dev/null
+++ b/packages/frint-react/src/hydrate.spec.js
@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies, func-names */
+/* globals describe, document, it, beforeEach, resetDOM */
+import { expect } from 'chai';
+import React from 'react';
+import { createApp } from 'frint';
+
+import hydrate from './hydrate';
+
+describe('frint-react › hydrate', function () {
+  function TestComponent() {
+    return <p>Hello World from TestApp!</p>;
+  }
+
+  const TestApp = createApp({
+    name: 'TestApp',
+    providers: [
+      {
+        name: 'component',
+        useValue: TestComponent,
+      },
+    ],
+  });
+
+  beforeEach(function () {
+    resetDOM();
+  });
+
+  it('hydrates app to DOM', function () {
+    const app = new TestApp();
+    const rootEl = document.getElementById('root');
+    hydrate(app, rootEl);
+
+    expect(rootEl.innerHTML)
+      .to.contain('Hello World from TestApp!</p>');
+  });
+});
diff --git a/packages/frint-react/src/index.js b/packages/frint-react/src/index.js
index d858a19e..946b76a5 100644
--- a/packages/frint-react/src/index.js
+++ b/packages/frint-react/src/index.js
@@ -1,4 +1,5 @@
 import render from './render';
+import hydrate from './hydrate';
 import streamProps from './streamProps';
 import isObservable from './isObservable';
 
@@ -13,6 +14,7 @@ import ReactHandler from './handlers/ReactHandler';
 
 export default {
   render,
+  hydrate,
   streamProps,
   isObservable,
 
diff --git a/packages/frint-react/src/index.spec.js b/packages/frint-react/src/index.spec.js
new file mode 100644
index 00000000..b48a1ec6
--- /dev/null
+++ b/packages/frint-react/src/index.spec.js
@@ -0,0 +1,23 @@
+/* eslint-disable import/no-extraneous-dependencies, func-names */
+/* global describe, it */
+import { expect } from 'chai';
+
+import index from './index';
+
+describe('frint-react › index', function () {
+  it('exports an object with the required keys', function () {
+    expect(index).to.be.an('object');
+    expect(index).to.have.all.keys(
+      'render',
+      'hydrate',
+      'streamProps',
+      'isObservable',
+      'getMountableComponent',
+      'observe',
+      'Region',
+      'Provider',
+      'RegionService',
+      'ReactHandler',
+    );
+  });
+});