concept approved making further improvements

Author: wingleung

src/client.js

@@ -2,31 +2,42 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import hypernova, { load } from 'hypernova';
 
-export const renderReact = (name, component) => hypernova({
+const renderReactClient = (name, component) => {
+  const payloads = load(name);
+
+  if (payloads) {
+    payloads.forEach((payload) => {
+      const { node, data } = payload;
+      const element = React.createElement(component, data);
+
+      if (ReactDOM.hydrate) {
+        ReactDOM.hydrate(element, node);
+      } else {
+        ReactDOM.render(element, node);
+      }
+    });
+  }
+
+  return component;
+};
+
+const renderReact = (name, component) => hypernova({
   server() {},
 
   client() {
-    const payloads = load(name);
-
-    if (payloads) {
-      payloads.forEach((payload) => {
-        const { node, data } = payload;
-        const element = React.createElement(component, data);
-
-        if (ReactDOM.hydrate) {
-          ReactDOM.hydrate(element, node);
-        } else {
-          ReactDOM.render(element, node);
-        }
-      });
-    }
-
-    return component;
+    return renderReactClient(name, component);
   },
 });
 
-export const renderReactStatic = () => hypernova({
+/* istanbul ignore next */
+const renderReactStatic = () => hypernova({
   server() {},
 
   client() {},
 });
+
+export {
+  renderReactClient,
+  renderReact,
+  renderReactStatic,
+};

src/index.js

@@ -1,39 +1,20 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactDOMServer from 'react-dom/server';
-import hypernova, { serialize, load } from 'hypernova';
+import hypernova from 'hypernova';
+import { renderReactClient } from './client';
+import { renderReactServer, renderReactStaticServer } from './server';
 
 export const renderReact = (name, component) => hypernova({
   server() {
-    return (props) => {
-      const contents = ReactDOMServer.renderToString(React.createElement(component, props));
-      return serialize(name, contents, props);
-    };
+    return renderReactServer(name, component);
   },
 
   client() {
-    const payloads = load(name);
-
-    if (payloads) {
-      payloads.forEach((payload) => {
-        const { node, data } = payload;
-        const element = React.createElement(component, data);
-
-        if (ReactDOM.hydrate) {
-          ReactDOM.hydrate(element, node);
-        } else {
-          ReactDOM.render(element, node);
-        }
-      });
-    }
-
-    return component;
+    return renderReactClient(name, component);
   },
 });
 
 export const renderReactStatic = (name, component) => hypernova({
   server() {
-    return props => ReactDOMServer.renderToStaticMarkup(React.createElement(component, props));
+    return renderReactStaticServer(name, component);
   },
 
   client() {},

src/server.js

@@ -2,21 +2,33 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import hypernova, { serialize } from 'hypernova';
 
-export const renderReact = (name, component) => hypernova({
+const renderReactServer = (name, component) => (props) => {
+  const contents = ReactDOMServer.renderToString(React.createElement(component, props));
+  return serialize(name, contents, props);
+};
+
+const renderReactStaticServer = (name, component) => props =>
+  ReactDOMServer.renderToStaticMarkup(React.createElement(component, props));
+
+const renderReact = (name, component) => hypernova({
   server() {
-    return (props) => {
-      const contents = ReactDOMServer.renderToString(React.createElement(component, props));
-      return serialize(name, contents, props);
-    };
+    return renderReactServer(name, component);
   },
 
-  client() { },
+  client() {},
 });
 
-export const renderReactStatic = (name, component) => hypernova({
+const renderReactStatic = (name, component) => hypernova({
   server() {
-    return props => ReactDOMServer.renderToStaticMarkup(React.createElement(component, props));
+    return renderReactStaticServer(name, component);
   },
 
   client() {},
 });
+
+export {
+  renderReactServer,
+  renderReactStaticServer,
+  renderReact,
+  renderReactStatic,
+};

test/renderReact-test.js

@@ -1,151 +1,48 @@
 import jsdom from 'jsdom';
 import { assert } from 'chai';
 import sinon from 'sinon';
-import ReactDOM from 'react-dom';
-import ifReact from 'enzyme-adapter-react-helper/build/ifReact';
 
 import ExampleReactComponent from './components/ExampleReactComponent';
 import { renderReact } from '..';
-import { renderReact as renderReactClient } from '../lib/client';
-import { renderReact as renderReactServer } from '../lib/server';
+import * as renderReactClientModule from '../lib/client';
+import * as renderReactServerModule from '../lib/server';
 
 describe('renderReact', () => {
-  let result;
-  beforeEach(() => {
-    result = renderReact('ExampleReactComponent', ExampleReactComponent)({ name: 'Desmond' });
-  });
-
   it('exists', () => {
     assert.isFunction(renderReact);
     assert.equal(renderReact.length, 2);
   });
 
-  it('has correct markup on server', () => {
-    assert.isString(result);
-    assert.match(result, /Hello Desmond/);
-  });
-
-  ifReact('>= 16', it, it.skip)('calls hypernova.client (hydrate method)', (done) => {
-    jsdom.env(result, (err, window) => {
-      if (err) {
-        done(err);
-        return;
-      }
-
-      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);
-
-      hydrateMethod.restore();
-
-      delete global.window;
-      delete global.document;
-
-      done();
-    });
-  });
-
-  it('calls hypernova.client (render method)', (done) => {
-    jsdom.env(result, (err, window) => {
-      if (err) {
-        done(err);
-        return;
-      }
-
-      const sandbox = sinon.createSandbox();
-      if (ReactDOM.hydrate) {
-        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);
+  it('calls renderReactServer', () => {
+    const renderReactServerSpy = sinon.spy(renderReactServerModule, 'renderReactServer');
 
-      sandbox.restore();
-      renderMethod.restore();
+    renderReact('ExampleReactComponent', ExampleReactComponent)({ name: 'Desmond' });
 
-      delete global.window;
-      delete global.document;
+    assert(renderReactServerSpy.calledOnce, `renderReactServer was not called once but ${renderReactServerSpy.callCount} times`);
 
-      done();
-    });
+    renderReactServerSpy.restore();
   });
-});
 
-describe('renderReact client side endpoint', () => {
-  let result;
-  beforeEach(() => {
-    result = renderReact('ExampleReactComponent', ExampleReactComponent)({ name: 'Desmond' });
-  });
+  it('calls renderReactClient', (done) => {
+    const result = renderReact('ExampleReactComponent', ExampleReactComponent)({ name: 'Desmond' });
 
-  it('exists', () => {
-    assert.isFunction(renderReactClient);
-    assert.equal(renderReactClient.length, 2);
-  });
-
-  ifReact('>= 16', it, it.skip)('calls hypernova.client (hydrate method)', (done) => {
     jsdom.env(result, (err, window) => {
       if (err) {
         done(err);
         return;
       }
 
-      global.window = window;
-      global.document = window.document;
-
-      const hydrateMethod = sinon.spy(ReactDOM, 'hydrate');
-
-      // Calling it again for the client.
-      renderReactClient('ExampleReactComponent', ExampleReactComponent);
-
-      assert(hydrateMethod.calledOnce);
-
-      hydrateMethod.restore();
-
-      delete global.window;
-      delete global.document;
-
-      done();
-    });
-  });
-
-  it('calls hypernova.client (render method)', (done) => {
-    jsdom.env(result, (err, window) => {
-      if (err) {
-        done(err);
-        return;
-      }
-
-      const sandbox = sinon.createSandbox();
-      if (ReactDOM.hydrate) {
-        sandbox.stub(ReactDOM, 'hydrate').value(undefined);
-      }
-
-      const renderMethod = sinon.spy(ReactDOM, 'render');
+      const renderReactClientSpy = sinon.spy(renderReactClientModule, 'renderReactClient');
 
       global.window = window;
       global.document = window.document;
 
       // Calling it again for the client.
-      renderReactClient('ExampleReactComponent', ExampleReactComponent);
-
-      assert(renderMethod.calledOnce);
+      renderReact('ExampleReactComponent', ExampleReactComponent);
 
-      sandbox.restore();
+      assert(renderReactClientSpy.calledOnce, `renderReactClient was not called once but ${renderReactClientSpy.callCount} times`);
 
-      renderMethod.restore();
+      renderReactClientSpy.restore();
 
       delete global.window;
       delete global.document;
@@ -154,17 +51,3 @@ describe('renderReact client side endpoint', () => {
     });
   });
 });
-
-describe('renderReact server side endpoint', () => {
-  it('exists', () => {
-    assert.isFunction(renderReactServer);
-    assert.equal(renderReactServer.length, 2);
-  });
-
-  it('has correct markup on server', () => {
-    const result = renderReactServer('ExampleReactComponent', ExampleReactComponent)({ name: 'Desmond' });
-
-    assert.isString(result);
-    assert.match(result, /Hello Desmond/);
-  });
-});