frint-react: add hydrate function to frint-react (#427)

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

* Update README

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)

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);
+}

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>');
+  });
+});

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,
 

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',
+    );
+  });
+});