rwr-redux 0.1.1 → 0.2.0

data/js/src/integrations/redux-container.js

@@ -0,0 +1,69 @@
+import { createElement } from 'react';
+import { Provider } from 'react-redux';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { renderToString } from 'react-dom/server';
+
+import ReduxStore from './redux-store';
+
+class ReduxContainer {
+  constructor() {
+    this.containers = {};
+
+    this.registerContainer = this.registerContainer.bind(this);
+  }
+
+  registerContainer(name, container) {
+    this.containers[name] = container;
+  }
+
+  getContainer(name) {
+    return this.containers[name];
+  }
+
+  createContainer(name) {
+    const constructor = this.getContainer(name);
+    return createElement(constructor);
+  }
+
+  createRootComponent(name, storeName) {
+    const container = this.createContainer(name);
+    const store = ReduxStore.getStore(storeName);
+
+    return createElement(Provider, { store }, container);
+  }
+
+  renderContainer(name, node, storeName) {
+    const rootComponent = this.createRootComponent(name, storeName);
+    render(rootComponent, node);
+  }
+
+  unmountContainer(node) {
+    unmountComponentAtNode(node);
+  }
+
+  renderContainerToString(name, storeName) {
+    const rootComponent = this.createRootComponent(name, storeName);
+    const result = renderToString(rootComponent);
+
+    return JSON.stringify({ body: result });
+  }
+
+  get integrationWrapper() {
+    return {
+      mount: function _mount(node, payload) {
+        this.renderContainer(payload.name, node, payload.storeName);
+      }.bind(this),
+
+      unmount: function _unmount(node) {
+        this.unmountContainer(node);
+      }.bind(this),
+
+      nodeRun: function _prerender(payload) {
+        const { name, storeName } = payload;
+        return this.renderContainerToString(name, storeName);
+      }.bind(this),
+    };
+  }
+}
+
+export default new ReduxContainer;

data/js/src/integrations/redux-router.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { createElement } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { renderToString } from 'react-dom/server';
+import { Provider } from 'react-redux';
+import { Router, match, RouterContext, createMemoryHistory, browserHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+
+import ReduxStore from './redux-store';
+
+class ReduxRouter {
+  constructor() {
+    this.routes = {};
+
+    this.registerRoutes = this.registerRoutes.bind(this);
+  }
+
+  registerRoutes(name, routes) {
+    this.routes[name] = routes;
+  }
+
+  getRoutes(name) {
+    return this.routes[name];
+  }
+
+  createRootRouter(name, storeName) {
+    const routes = this.getRoutes(name);
+    const store = ReduxStore.getStore(storeName);
+    const history = syncHistoryWithStore(browserHistory, store);
+
+    return createElement(Provider, { store },
+      createElement(Router, { history }, routes)
+    );
+  }
+
+  unmountRouter(node) {
+    unmountComponentAtNode(node);
+  }
+
+  renderRouter(node, name, storeName) {
+    const rootRouter = this.createRootRouter(name, storeName);
+    render(rootRouter, node);
+  }
+
+  renderRouterToString(name, storeName, path) {
+    const routes = this.getRoutes(name);
+    const memoryHistory = createMemoryHistory(path);
+    const store = ReduxStore.getStore(storeName);
+    const history = syncHistoryWithStore(memoryHistory, store);
+
+    const result = {
+      body: '',
+      code: 0,
+    };
+
+    match({ history, routes, location: path }, (error, redirectLocation, renderProps) => {
+      if (error) {
+        throw error;
+      } else if (redirectLocation) {
+        result.code = 302;
+        result.redirectUri = `${redirectLocation.pathname}${redirectLocation.search}`;
+      } else if (renderProps) {
+        result.body = renderToString(
+          <Provider store={store}>
+            <RouterContext {...renderProps}/>
+          </Provider>
+        );
+        result.code = 200;
+      } else {
+        result.code = 404;
+      }
+    });
+
+    return JSON.stringify(result);
+  }
+
+  get integrationWrapper() {
+    return {
+      mount: function _mount(node, payload) {
+        const { name, storeName } = payload;
+        this.renderRouter(node, name, storeName);
+      }.bind(this),
+
+      unmount: function _unmount(node) {
+        this.unmountRouter(node);
+      }.bind(this),
+
+      nodeRun: function _nodeRun(payload) {
+        const { name, storeName, path } = payload;
+        return this.renderRouterToString(name, storeName, path);
+      }.bind(this),
+    };
+  }
+}
+
+export default new ReduxRouter;

data/js/src/integrations/redux-store.js

@@ -0,0 +1,50 @@
+import { isFunction, isReduxStore } from '../utils/validators';
+
+class ReduxStore {
+  constructor() {
+    this.registeredStores = {};
+    this.mountedStores = {};
+    this.defaultStore = null;
+
+    this.registerStore = this.registerStore.bind(this);
+    this.getStore = this.getStore.bind(this);
+    this.mountStore = this.mountStore.bind(this);
+  }
+
+  registerStore(name, store) {
+    isFunction(store, `Error when registering '${name}' store: must be a function.`);
+    this.registeredStores[name] = store;
+  }
+
+  mountStore(name, props) {
+    const store = this.registeredStores[name];
+    isFunction(store, `Error when mounting '${name}' store: must be a function.`);
+
+    const storeObject = store(props);
+    isReduxStore(storeObject, `Error when mounting '${name}' store: must be a valid Redux store.`);
+    this.mountedStores[name] = storeObject;
+    this.defaultStore = storeObject;
+  }
+
+  getStore(name) {
+    if (name) {
+      return this.mountedStores[name];
+    }
+
+    return this.defaultStore;
+  }
+
+  get integrationWrapper() {
+    return {
+      mount: function _mount(_, payload) {
+        this.mountStore(payload.name, payload.props);
+      }.bind(this),
+
+      nodeRun: function _mount(payload) {
+        this.mountStore(payload.name, payload.props);
+      }.bind(this),
+    };
+  }
+}
+
+export default new ReduxStore;

data/js/src/version.js

@@ -1 +1 @@
-export default '0.1.0-alpha1';
+export default '0.2.0';

data/js/test/helpers/redux-router.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { createStore, combineReducers } from 'redux';
+import { Route, Redirect } from 'react-router';
+import { routerReducer } from 'react-router-redux';
+
+import ReduxStore from '../../src/integrations/redux-store';
+
+class AppComponent extends React.Component {
+  render() {
+    return <div>App Component</div>;
+  }
+}
+
+const routes = (
+  <Route path="/" component={AppComponent}>
+    <Redirect from="home" to="/" />
+  </Route>
+);
+
+const fakeReducer = combineReducers({ routing: routerReducer });
+const store = function (initialState) {
+  return createStore(fakeReducer, initialState);
+};
+
+const registerRoutesAndMountStore = (subject) => {
+  subject.registerRoutes('RoutesName', routes);
+  ReduxStore.registerStore('StoreName', store);
+  ReduxStore.mountStore('StoreName', {});
+};
+
+export {
+  routes,
+  registerRoutesAndMountStore,
+};

data/js/test/index.spec.js

@@ -0,0 +1,19 @@
+import expect from 'expect';
+import subject from '../src/index';
+
+describe('RWRRedux', function () {
+  it('has correct properites', function () {
+    expect(subject.version).toBeA('string');
+
+    expect(subject.registerStore).toBeA('function');
+    expect(subject.mountStore).toBeA('function');
+    expect(subject.getStore).toBeA('function');
+    expect(subject.storeIntegrationWrapper).toBeA('object');
+
+    expect(subject.registerContainer).toBeA('function');
+    expect(subject.containerIntegrationWrapper).toBeA('object');
+
+    expect(subject.registerRoutes).toBeA('function');
+    expect(subject.routerIntegrationWrapper).toBeA('object');
+  });
+});

data/js/test/integrations/redux-container.spec.js

@@ -0,0 +1,163 @@
+import expect, { spyOn } from 'expect';
+import { createStore } from 'redux';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+
+import subject from '../../src/integrations/redux-container';
+import ReduxStore from '../../src/integrations/redux-store';
+
+class AppContainer extends React.Component {
+  render() {
+    return <div>AppContainer</div>;
+  }
+}
+
+const fakeReducer = function () {};
+const store = function (initialState) {
+  return createStore(fakeReducer, initialState);
+};
+
+function resetConstructor() {
+  subject.containers = {};
+  expect.restoreSpies();
+}
+
+describe('ReduxContainer', function () {
+  before(function () {
+    resetConstructor();
+  });
+
+  afterEach(function () {
+    resetConstructor();
+  });
+
+  describe('.constructor', function () {
+    it('initialize empty containers object', function () {
+      expect(subject.containers).toEqual({});
+    });
+  });
+
+  describe('#registerContainer', function () {
+    it('adds container to the storage', function () {
+      subject.registerContainer('AppContainer', AppContainer);
+
+      expect(subject.containers.AppContainer).toEqual(AppContainer);
+    });
+  });
+
+  describe('#getContainer', function () {
+    it('returns container by name', function () {
+      subject.registerContainer('AppContainer', AppContainer);
+
+      expect(subject.getContainer('AppContainer')).toEqual(AppContainer);
+    });
+  });
+
+  describe('#createContainer', function () {
+    it('creates redux container', function () {
+      subject.registerContainer('AppContainer', AppContainer);
+      const container = subject.createContainer('AppContainer');
+
+      expect(React.isValidElement(container)).toBe(true);
+      expect(container.type).toBe(AppContainer);
+    });
+  });
+
+  describe('#createRootComponent', function () {
+    it('creates redux root component', function () {
+      const initialState = { fake: 'state' };
+      ReduxStore.registerStore('StoreName', store);
+      ReduxStore.mountStore('StoreName', initialState);
+
+      subject.registerContainer('AppContainer', AppContainer);
+      const rootComponent = subject.createRootComponent('AppContainer', 'ValidStore');
+
+      expect(React.isValidElement(rootComponent)).toBe(true);
+    });
+  });
+
+  describe('#renderContainer', function () {
+    it('calls #createRootComponent and ReactDOM.render functions', function () {
+      const subjectSpy = spyOn(subject, 'createRootComponent');
+      const reactSpy = spyOn(ReactDOM, 'render');
+
+      subject.renderContainer('ContainerName', 'node', 'StoreName');
+
+      expect(subjectSpy.calls.length).toEqual(1);
+      expect(subjectSpy).toHaveBeenCalledWith('ContainerName', 'StoreName');
+      expect(reactSpy.calls.length).toEqual(1);
+    });
+  });
+
+  describe('#unmountContainer', function () {
+    it('calls #unmountComponentAtNode', function () {
+      const node = { nodeType: 1, nodeName: 'DIV' };
+      const unmountSpy = spyOn(ReactDOM, 'unmountComponentAtNode');
+
+      subject.unmountContainer(node);
+
+      expect(unmountSpy.calls.length).toEqual(1);
+      expect(unmountSpy).toHaveBeenCalledWith(node);
+    });
+  });
+
+  describe('#renderContainerToString', function () {
+    it('calls #createRootComponent and ReactDOM.renderToString', function () {
+      const subjectSpy = spyOn(subject, 'createRootComponent');
+      const reactSpy = spyOn(ReactDOMServer, 'renderToString');
+
+      subject.renderContainerToString('ContainerName', 'StoreName');
+
+      expect(subjectSpy.calls.length).toEqual(1);
+      expect(subjectSpy).toHaveBeenCalledWith('ContainerName', 'StoreName');
+      expect(reactSpy.calls.length).toEqual(1);
+    });
+
+    it('returns JSON.stringify result', function () {
+      const initialState = { fake: 'state' };
+      ReduxStore.registerStore('StoreName', store);
+      ReduxStore.mountStore('StoreName', initialState);
+      subject.registerContainer('AppContainer', AppContainer);
+
+      const result = subject.renderContainerToString('AppContainer', 'StoreName');
+
+      expect(JSON.parse(result).body).toNotEqual(null);
+    });
+  });
+
+  describe('#integrationWrapper', function () {
+    const node = { nodeType: 1, nodeName: 'DIV' };
+    const payload = { name: 'ContainerName', storeName: 'StoreName' };
+
+    describe('mount', function () {
+      it('calls #renderContainer', function () {
+        const mountSpy = spyOn(subject, 'renderContainer');
+        subject.integrationWrapper.mount(node, payload);
+
+        expect(mountSpy.calls.length).toEqual(1);
+        expect(mountSpy).toHaveBeenCalledWith(payload.name, node, payload.storeName);
+      });
+    });
+
+    describe('unmount', function () {
+      it('calls #unmountContainer', function () {
+        const unmountSpy = spyOn(subject, 'unmountContainer');
+        subject.integrationWrapper.unmount(node);
+
+        expect(unmountSpy.calls.length).toEqual(1);
+        expect(unmountSpy).toHaveBeenCalledWith(node);
+      });
+    });
+
+    describe('nodeRun', function () {
+      it('calls #renderContainerToString', function () {
+        const nodeRunSpy = spyOn(subject, 'renderContainerToString');
+        subject.integrationWrapper.nodeRun(payload);
+
+        expect(nodeRunSpy.calls.length).toEqual(1);
+        expect(nodeRunSpy).toHaveBeenCalledWith(payload.name, payload.storeName);
+      });
+    });
+  });
+});

data/js/test/integrations/redux-router.spec.js

@@ -0,0 +1,147 @@
+import expect, { spyOn } from 'expect';
+import ReactDOM from 'react-dom';
+
+import subject from '../../src/integrations/redux-router';
+import { routes, registerRoutesAndMountStore } from '../helpers/redux-router';
+
+function resetConstructor() {
+  subject.routes = {};
+  expect.restoreSpies();
+}
+
+describe('ReduxRouter', function () {
+  before(function () {
+    resetConstructor();
+  });
+
+  afterEach(function () {
+    resetConstructor();
+  });
+
+  describe('.constructor', function () {
+    it('initialize empty routes object', function () {
+      expect(subject.routes).toEqual({});
+    });
+  });
+
+  describe('#registerRoutes', function () {
+    it('adds routes to the storage', function () {
+      subject.registerRoutes('RoutesName', routes);
+
+      expect(subject.routes.RoutesName).toEqual(routes);
+    });
+  });
+
+  describe('#getRoutes', function () {
+    it('returns routes by name', function () {
+      subject.registerRoutes('RoutesName', routes);
+
+      expect(subject.getRoutes('RoutesName')).toEqual(routes);
+    });
+  });
+
+  describe('#unmountRouter', function () {
+    it('calls #unmountComponentAtNode', function () {
+      const node = { nodeType: 1, nodeName: 'DIV' };
+      const unmountSpy = spyOn(ReactDOM, 'unmountComponentAtNode');
+
+      subject.unmountRouter(node);
+
+      expect(unmountSpy.calls.length).toEqual(1);
+      expect(unmountSpy).toHaveBeenCalledWith(node);
+    });
+  });
+
+  describe('#renderRouter', function () {
+    it('calls createRootRouter and render functions', function () {
+      const subjectSpy = spyOn(subject, 'createRootRouter').andReturn('router');
+      const reactSpy = spyOn(ReactDOM, 'render');
+
+      subject.renderRouter('node', 'RouterName', 'StoreName');
+
+      expect(subjectSpy.calls.length).toEqual(1);
+      expect(subjectSpy).toHaveBeenCalledWith('RouterName', 'StoreName');
+      expect(reactSpy.calls.length).toEqual(1);
+      expect(reactSpy).toHaveBeenCalledWith('router', 'node');
+    });
+  });
+
+  describe('#renderRouterToString', function () {
+    const renderRouterToString = (path) => {
+      const result = subject.renderRouterToString('RoutesName', 'StoreName', path);
+      return JSON.parse(result);
+    };
+
+    beforeEach(function () {
+      registerRoutesAndMountStore(subject);
+    });
+
+    context('when router can match location', function () {
+      it('returns string component and 200 status code', function () {
+        const validPath = '/';
+        const result = renderRouterToString(validPath);
+
+        expect(result.code).toEqual(200);
+        expect(result.body).toInclude('App Component');
+      });
+    });
+
+    context('when router returns redirectLocation', function () {
+      it('returns 302 status code and redirectUri', function () {
+        const redirectPath = '/home';
+        const result = renderRouterToString(redirectPath);
+
+        expect(result.code).toEqual(302);
+        expect(result.body).toEqual('');
+        expect(result.redirectUri).toEqual('/');
+      });
+    });
+
+    context('when router can not match location', function () {
+      it('returns 404 status code', function () {
+        const invalidPath = '/path';
+        const result = renderRouterToString(invalidPath);
+
+        expect(result.code).toEqual(404);
+        expect(result.body).toEqual('');
+      });
+    });
+  });
+
+  describe('#integrationWrapper', function () {
+    const node = { nodeType: 1, nodeName: 'DIV' };
+    const payload = { name: 'RouterName', storeName: 'StoreName', path: '/path' };
+
+    describe('#mount', function () {
+      it('calls #renderRouter', function () {
+        const { name, storeName } = payload;
+        const mountSpy = spyOn(subject, 'renderRouter');
+        subject.integrationWrapper.mount(node, payload);
+
+        expect(mountSpy.calls.length).toEqual(1);
+        expect(mountSpy).toHaveBeenCalledWith(node, name, storeName);
+      });
+    });
+
+    describe('#unmount', function () {
+      it('calls #unmountRouter', function () {
+        const unmountSpy = spyOn(subject, 'unmountRouter');
+        subject.integrationWrapper.unmount(node);
+
+        expect(unmountSpy.calls.length).toEqual(1);
+        expect(unmountSpy).toHaveBeenCalledWith(node);
+      });
+    });
+
+    describe('#nodeRun', function () {
+      it('calls #renderRouterToString', function () {
+        const { name, storeName, path } = payload;
+        const nodeRunSpy = spyOn(subject, 'renderRouterToString');
+        subject.integrationWrapper.nodeRun(payload);
+
+        expect(nodeRunSpy.calls.length).toEqual(1);
+        expect(nodeRunSpy).toHaveBeenCalledWith(name, storeName, path);
+      });
+    });
+  });
+});