Added renderToStaticMarkup method

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+# 2.0.0 (January 21st, 2017)
+
+- Fixed issue with render not resolving
+- Added renderToStaticMarkup method
+
 ## 1.1.2 (January 21st, 2017)
 
 - Added support for Webpack 2.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-router-server",
   "author": "Gabriel Bull",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Server Side Rendering library for React Router v4",
   "main": "./build/index.js",
   "keywords": [

src/index.js

@@ -3,4 +3,5 @@ export { default as fetchState } from './components/fetchState';
 export { default as Module } from './components/Module';
 export { default as preload } from './module/preload';
 export { default as renderToString } from './renderer/renderToString';
+export { default as renderToStaticMarkup } from './renderer/renderToStaticMarkup';
 export { default as ServerStateProvider } from './components/ServerStateProvider';

src/renderer/renderPass.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import AsyncRenderer from '../components/AsyncRenderer';
+import removeDuplicateModules from '../utils/removeDuplicateModules';
+
+const renderPass = (context, element, staticMarkup = false) => {
+  context.callback = () => {
+    if (context.finishedLoadingModules && !context.statesRenderPass) {
+      context.statesRenderPass = true;
+      context.renderResult = renderPass(context, element, staticMarkup);
+      if (context.fetchingStates <= 0 && context.modulesLoading <= 0) {
+        context.resolve({
+          html: context.renderResult,
+          state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
+          modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
+        });
+      }
+    } else if (context.finishedLoadingModules && context.statesRenderPass || !context.hasModules) {
+      context.renderResult = renderPass(context, element, staticMarkup);
+      if (context.fetchingStates <= 0 && context.modulesLoading <= 0) {
+        context.resolve({
+          html: context.renderResult,
+          state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
+          modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
+        });
+      }
+    }
+  };
+
+  let component = (
+    <AsyncRenderer context={context}>
+      {element}
+    </AsyncRenderer>
+  )
+  let result;
+  if (staticMarkup) {
+    result = renderToStaticMarkup(component);
+  } else {
+    result = renderToString(component );
+  }
+
+  if (!context.hasModules && !context.hasStates) {
+    context.resolve({
+      html: result,
+      state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
+      modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
+    });
+  }
+  return result;
+};
+
+export default renderPass;

src/renderer/renderToStaticMarkup.js

@@ -0,0 +1,12 @@
+import renderPass from './renderPass';
+
+export default (element) => {
+  return new Promise((resolve, reject) => {
+    const context = {
+      resolve, reject,
+      modulesLoading: 0,
+      fetchingStates: 0
+    };
+    renderPass(context, element, true);
+  });
+};

src/renderer/renderToString.js

@@ -1,47 +1,4 @@
-import * as React from 'react';
-import { renderToString } from 'react-dom/server';
-import AsyncRenderer from '../components/AsyncRenderer';
-import removeDuplicateModules from '../utils/removeDuplicateModules';
-
-const renderPass = (context, element) => {
-  context.callback = () => {
-    if (context.finishedLoadingModules && !context.statesRenderPass) {
-      context.statesRenderPass = true;
-      context.renderResult = renderPass(context, element);
-      if (context.fetchingStates <= 0 && context.modulesLoading <= 0) {
-        context.resolve({
-          html: context.renderResult,
-          state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
-          modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
-        });
-      }
-    } else if (context.finishedLoadingModules && context.statesRenderPass) {
-      context.renderResult = renderPass(context, element);
-      if (context.fetchingStates <= 0 && context.modulesLoading <= 0) {
-        context.resolve({
-          html: context.renderResult,
-          state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
-          modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
-        });
-      }
-    }
-  };
-
-  const result = renderToString(
-    <AsyncRenderer context={context}>
-      {element}
-    </AsyncRenderer>
-  );
-
-  if (!context.hasModules && !context.hasStates) {
-    context.resolve({
-      html: result,
-      state: context.fetchStateResults === undefined ? null : context.fetchStateResults,
-      modules: context.modules === undefined ? null : removeDuplicateModules(context.modules)
-    });
-  }
-  return result;
-};
+import renderPass from './renderPass';
 
 export default (element) => {
   return new Promise((resolve, reject) => {

test/tests/index.js

@@ -5,6 +5,7 @@ import {
   Module,
   preload,
   renderToString,
+  renderToStaticMarkup,
   ServerStateProvider
 } from '../../src/index';
 
@@ -15,6 +16,7 @@ describe('index', () => {
     expect(Module).to.exist;
     expect(preload).to.exist;
     expect(renderToString).to.exist;
+    expect(renderToStaticMarkup).to.exist;
     expect(ServerStateProvider).to.exist;
   });
 });

test/tests/renderer/renderToStaticMarkup.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import renderToStaticMarkup from '../../../src/renderer/renderToStaticMarkup';
+import App from './includes/App';
+
+describe('renderToStaticMarkup', () => {
+  it('should do render to static markup', done => {
+    renderToStaticMarkup(<App/>)
+      .then(({ html, state, modules }) => {
+        expect(html).to.equal('<div><div>foobar</div></div>');
+        expect(state).to.deep.equal({ '1': { message: 'foobar' }});
+        expect(modules).to.have.lengthOf(1);
+        done();
+      })
+  });
+});