add initialize prop to LocaizeProvider to support SSR (#127)

Author: Ryan Johnson

src/LocalizeProvider.js

@@ -7,7 +7,9 @@ import {
   getOptions,
   getTranslationsForActiveLanguage,
   type LocalizeState,
-  type Action
+  type Action,
+  INITIALIZE,
+  InitializePayload
 } from './localize';
 import {
   LocalizeContext,
@@ -23,6 +25,7 @@ type LocalizeProviderState = {
 export type LocalizeProviderProps = {
   store?: Store<any, any>,
   getState?: Function,
+  initialize?: InitializePayload,
   children: any
 };
 
@@ -43,8 +46,16 @@ export class LocalizeProvider extends Component<
 
     this.getContextPropsSelector = getContextPropsFromState(dispatch);
 
+    const initialState =
+      this.props.initialize !== undefined
+        ? localizeReducer(undefined, {
+            type: INITIALIZE,
+            payload: this.props.initialize
+          })
+        : localizeReducer(undefined, ({}: any));
+
     this.state = {
-      localize: localizeReducer(undefined, ({}: any))
+      localize: initialState
     };
   }
 

src/index.d.ts

@@ -4,7 +4,6 @@ import {
   Component as ReactComponent,
   ComponentType
 } from 'react';
-import { Store } from 'redux';
 
 export as namespace ReactLocalizeRedux;
 
@@ -81,8 +80,9 @@ export interface LocalizeContextProps {
 }
 
 export interface LocalizeProviderProps {
-  store?: Store<any>;
+  store?: any;
   getState?: (state: any) => LocalizeState;
+  initialize?: InitializePayload;
   children: any;
 }
 

src/localize.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import { combineReducers } from 'redux';
 import { flatten } from 'flat';
 import {
   createSelector,

src/utils.js

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { type Store } from 'redux';
-import { flatten } from 'flat';
 import {
   defaultTranslateOptions,
   type MultipleLanguageTranslation

tests/LocalizeProvider.test.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import ReactDOMServer from "react-dom/server";
 import Enzyme, { shallow, mount } from 'enzyme';
 import { createStore, combineReducers } from 'redux';
 import Adapter from 'enzyme-adapter-react-16';
 import { Map } from 'immutable'
 import { LocalizeProvider } from '../src/LocalizeProvider';
 import { localizeReducer } from '../src/localize';
-import { getTranslate, getLanguages, initialize } from '../src';
+import { getTranslate, getLanguages, initialize, withLocalize, Translate } from '../src';
 import { defaultTranslateOptions } from '../src/localize';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -86,4 +87,56 @@ describe('<LocalizeProvider />', () => {
       )
     }).not.toThrow();
   });
+
+  it('should work with SSR', () => {
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+
+        this.props.initialize({
+          languages: [
+            { name: "English", code: "en" },
+            { name: "French", code: "fr" }
+          ],
+          translation: {
+            hello: ['hello', 'alo']
+          },
+          options: {
+            defaultLanguage: "en",
+            renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup
+          }
+        });
+      }
+
+      render() {
+        return (
+          <div>
+            <Translate id="hello" />
+          </div>
+        );
+      }
+    }
+
+    const LocalizedApp = withLocalize(App);
+
+    const result = ReactDOMServer.renderToString(
+      <LocalizeProvider initialize={{
+        languages: [
+          { name: "English", code: "en" },
+          { name: "French", code: "fr" }
+        ],
+        translation: {
+          hello: ['hello', 'alo']
+        },
+        options: {
+          defaultLanguage: "en",
+          renderToStaticMarkup: ReactDOMServer.renderToStaticMarkup
+        }
+      }}>
+        <LocalizedApp />
+      </LocalizeProvider>
+    );
+
+    expect(result).toEqual('<div>hello</div>');
+  });
 });