split client and server logic

Author: Wing Leung

client.js

@@ -0,0 +1 @@
+module.exports = require('./lib/client.js');

server.js

@@ -0,0 +1 @@
+module.exports = require('./lib/server.js');

src/client.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import hypernova, { load } from 'hypernova';
+
+export 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;
+  },
+});
+
+export const renderReactStatic = () => hypernova({
+  server() {},
+
+  client() {},
+});

src/server.js

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

test/renderReact-test.js

@@ -6,6 +6,8 @@ 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';
 
 describe('renderReact', () => {
   let result;
@@ -40,11 +42,81 @@ describe('renderReact', () => {
 
       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);
+
+      sandbox.restore();
+      renderMethod.restore();
+
+      delete global.window;
+      delete global.document;
+
+      done();
+    });
+  });
+});
+
+describe('renderReact client side endpoint', () => {
+  let result;
+  beforeEach(() => {
+    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();
     });
   });
@@ -67,16 +139,32 @@ describe('renderReact', () => {
       global.document = window.document;
 
       // Calling it again for the client.
-      renderReact('ExampleReactComponent', ExampleReactComponent);
+      renderReactClient('ExampleReactComponent', ExampleReactComponent);
 
       assert(renderMethod.calledOnce);
 
       sandbox.restore();
 
+      renderMethod.restore();
+
       delete global.window;
       delete global.document;
 
       done();
     });
   });
 });
+
+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/);
+  });
+});

test/renderReactStatic-test.js

@@ -2,6 +2,7 @@ import { assert } from 'chai';
 
 import ExampleReactComponent from './components/ExampleReactComponent';
 import { renderReactStatic } from '..';
+import { renderReactStatic as renderReactStaticServer } from '../lib/server';
 
 describe('renderReactStatic', () => {
   let result;
@@ -19,3 +20,37 @@ describe('renderReactStatic', () => {
     assert.match(result, /Hello Zack/);
   });
 });
+
+describe('renderReactStatic server side endpoint', () => {
+  let result;
+  beforeEach(() => {
+    result = renderReactStaticServer('ExampleReactComponent', ExampleReactComponent)({ name: 'Zack' });
+  });
+
+  it('exists', () => {
+    assert.isFunction(renderReactStaticServer);
+    assert.equal(renderReactStaticServer.length, 2);
+  });
+
+  it('has correct markup on server', () => {
+    assert.isString(result);
+    assert.match(result, /Hello Zack/);
+  });
+});
+
+describe('renderReactStatic server side endpoint', () => {
+  let result;
+  beforeEach(() => {
+    result = renderReactStaticServer('ExampleReactComponent', ExampleReactComponent)({ name: 'Zack' });
+  });
+
+  it('exists', () => {
+    assert.isFunction(renderReactStaticServer);
+    assert.equal(renderReactStaticServer.length, 2);
+  });
+
+  it('has correct markup on server', () => {
+    assert.isString(result);
+    assert.match(result, /Hello Zack/);
+  });
+});