react_webpack_rails 0.0.5 → 0.1.0

data/js/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": "airbnb",
+  "globals": {
+    "__RWR_ENV__": true
+  },
+  "env": {
+    "mocha": true
+  },
+  "rules": {
+    func-names: 0
+  }
+}

data/js/src/env.js

@@ -0,0 +1 @@
+export default (typeof __RWR_ENV__ !== 'undefined') ? __RWR_ENV__ : {};

data/js/src/index.js

@@ -0,0 +1,30 @@
+import env from './env';
+import nodes from './nodes';
+import integrationsManager from './integrations-manager';
+import react from './integrations/react';
+import reactRouter from './integrations/react-router';
+import version from './version';
+
+export { react as react };
+export { nodes as nodes };
+export { integrationsManager as integrationsManager };
+export { env as env };
+export { reactRouter as reactRouter };
+
+export default {
+  version: version,
+
+  registerComponent: react.registerComponent,
+  getComponent: react.getComponent,
+  createComponent: react.createComponent,
+  renderComponent: react.renderComponent,
+  unmountComponent: react.unmountComponent,
+
+  renderRouter: reactRouter.renderRouter,
+  registerRouter: reactRouter.registerRouter,
+  unmountRouter: reactRouter.unmountRouter,
+  getRouter: reactRouter.getRouter,
+
+  mountNodes: nodes.mountNodes,
+  unmountNodes: nodes.unmountNodes,
+};

data/js/src/integrations-manager.js

@@ -0,0 +1,22 @@
+import reactIntegration from './integrations/react';
+import reactRouterIntegration from './integrations/react-router';
+
+class IntegrationsManager {
+  constructor() {
+    this.integrations = {
+      'react-component': reactIntegration.integrationWrapper,
+      'react-router': reactRouterIntegration.integrationWrapper,
+    };
+  }
+
+  get(name) {
+    // handle missing one here;
+    return this.integrations[name];
+  }
+
+  register(name, integration) {
+    this.integrations[name] = integration;
+  }
+}
+
+export default new IntegrationsManager;

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

@@ -0,0 +1,48 @@
+import ReactDOM from 'react-dom';
+
+class ReactRouterIntegration {
+  constructor() {
+    this.routers = {};
+    this.enabled = false;
+    this.registerRouter = this.registerRouter.bind(this);
+    this.getRouter = this.getRouter.bind(this);
+    this.renderRouter = this.renderRouter.bind(this);
+  }
+
+  registerRouter(name, route) {
+    this.routers[name] = route;
+  }
+
+  getRouter(name) {
+    return this.routers[name];
+  }
+
+  renderRouter(name, node) {
+    if (this.enabled === true) {
+      throw new Error(
+        `Error when rendering ${name}\n\trenderRouter: can't render more than one router.`
+      );
+    }
+    this.enabled = true;
+    ReactDOM.render(this.getRouter(name), node);
+  }
+
+  unmountRouter(node) {
+    ReactDOM.unmountComponentAtNode(node);
+    this.enabled = false;
+  }
+
+  get integrationWrapper() {
+    return {
+      mount: function _mount(node, payload) {
+        this.renderRouter(payload.name, node);
+      }.bind(this),
+
+      unmount: function _unmount(node) {
+        this.unmountRouter(node);
+      }.bind(this),
+    };
+  }
+}
+
+export default new ReactRouterIntegration;

data/js/src/integrations/react.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class ReactIntegration {
+  constructor() {
+    this.components = {};
+    this.registerComponent = this.registerComponent.bind(this);
+    this.getComponent = this.getComponent.bind(this);
+    this.createComponent = this.createComponent.bind(this);
+    this.renderComponent = this.renderComponent.bind(this);
+    this.unmountComponent = this.unmountComponent.bind(this);
+  }
+
+  registerComponent(name, component) {
+    this.components[name] = component;
+  }
+
+  getComponent(name) {
+    return this.components[name];
+  }
+
+  createComponent(name, props) {
+    const constructor = this.getComponent(name);
+    return React.createElement(constructor, props);
+  }
+
+  renderComponent(name, props, node) {
+    const component = this.createComponent(name, props);
+    ReactDOM.render(component, node);
+  }
+
+  unmountComponent(node) {
+    ReactDOM.unmountComponentAtNode(node);
+  }
+
+  get integrationWrapper() {
+    return {
+      mount: function _mount(node, payload) {
+        this.renderComponent(payload.name, payload.props, node);
+      }.bind(this),
+
+      unmount: function _unmount(node) {
+        this.unmountComponent(node);
+      }.bind(this),
+    };
+  }
+}
+
+export default new ReactIntegration;

data/js/src/nodes.js

@@ -0,0 +1,51 @@
+import IntegrationsManager from './integrations-manager';
+
+const ELEMENT_ATTR = 'data-react-element';
+const PAYLOAD_ATTR = 'data-payload';
+const INTEGRATION_NAME_ATTR = 'data-integration-name';
+const OPTIONS_ATTR = 'data-options';
+
+
+function _findDOMNodes(searchSelector) {
+  const selector = searchSelector || '[' + ELEMENT_ATTR + ']';
+  return document.querySelectorAll(selector);
+}
+
+function _nodeData(node) {
+  const rawPayload = node.getAttribute(PAYLOAD_ATTR);
+  const rawOptions = node.getAttribute(OPTIONS_ATTR);
+
+  return {
+    payload: rawPayload && JSON.parse(rawPayload),
+    options: rawOptions && JSON.parse(rawOptions),
+    integrationName: node.getAttribute(INTEGRATION_NAME_ATTR),
+  };
+}
+
+function _mountNode(node) {
+  const data = _nodeData(node);
+  const mount = IntegrationsManager.get(data.integrationName).mount;
+  if (typeof(mount) === 'function') { mount(node, data.payload); }
+}
+
+function _unmountNode(node) {
+  const data = _nodeData(node);
+  const unmount = IntegrationsManager.get(data.integrationName).unmount;
+  if (typeof(unmount) === 'function') { unmount(node, data.payload); }
+}
+
+export default {
+  mountNodes: function _mountNodes(searchSelector) {
+    const nodes = _findDOMNodes(searchSelector);
+    for (let i = 0; i < nodes.length; ++i) {
+      _mountNode(nodes[i]);
+    }
+  },
+
+  unmountNodes: function _unmountNodes(searchSelector) {
+    const nodes = _findDOMNodes(searchSelector);
+    for (let i = 0; i < nodes.length; ++i) {
+      _unmountNode(nodes[i]);
+    }
+  },
+};

data/js/src/version.js

@@ -0,0 +1 @@
+export default '0.1.0';

data/js/test/env.spec.js

@@ -0,0 +1,10 @@
+import expect from 'expect';
+import subject from '../src/env';
+
+describe('env', function () {
+  context('when global config does not exist', function () {
+    it('sets empty object', function () {
+      expect(subject).toEqual({});
+    });
+  });
+});

data/js/test/integrations-manager.spec.js

@@ -0,0 +1,38 @@
+import expect from 'expect';
+import reactIntegration from '../src/integrations/react';
+import reactRouterIntegration from '../src/integrations/react-router';
+import subject from '../src/integrations-manager';
+
+describe('IntegrationsManager', function () {
+  describe('.constructor', function () {
+    it('by default sets react and react-router integrations', function () {
+      expect(subject.integrations['react-component']).toEqual(
+        reactIntegration.integrationWrapper
+      );
+      expect(subject.integrations['react-router']).toEqual(
+        reactRouterIntegration.integrationWrapper
+      );
+      expect(Object.keys(subject.integrations).length).toEqual(2);
+    });
+  });
+
+  describe('#get', function () {
+    it('returns integration by name', function () {
+      expect(subject.get('react-component')).toEqual(
+        reactIntegration.integrationWrapper
+      );
+    });
+
+    it('returns undefined if name is invalid', function () {
+      expect(subject.get('invalidName')).toBe(undefined);
+    });
+  });
+
+  describe('#register', function () {
+    it('registers integration', function () {
+      subject.register('newIntegration', {});
+
+      expect(subject.integrations.newIntegration).toEqual({});
+    });
+  });
+});

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

@@ -0,0 +1,133 @@
+import expect, { spyOn } from 'expect';
+import ReactDOM from 'react-dom';
+import subject from '../../src/integrations/react-router';
+
+const HelloRouter = {};
+
+describe('ReactIntegration', function () {
+  afterEach(function () {
+    subject.routers = {};
+    subject.enabled = false;
+  });
+
+  describe('.constructor', function () {
+    it('intializes empty components dictionary', function () {
+      expect(subject.routers).toEqual({});
+    });
+
+    it('by default sets router presence flag to false', function () {
+      expect(subject.enabled).toBe(false);
+    });
+  });
+
+  describe('#registerRouter', function () {
+    it('adds router to the routers storage', function () {
+      subject.registerRouter('HelloRouter', HelloRouter);
+      expect(subject.routers.HelloRouter).toBe(HelloRouter);
+    });
+  });
+
+  describe('#getRouter', function () {
+    it('returns route by name', function () {
+      subject.registerRouter('HelloRouter', HelloRouter);
+      expect(subject.getRouter('HelloRouter')).toBe(HelloRouter);
+    });
+
+    it('returns undefined if route is not found', function () {
+      expect(subject.getRouter('HelloRouter')).toBe(undefined);
+    });
+  });
+
+  describe('#renderRouter', function () {
+    beforeEach(function () {
+      subject.registerRouter('HelloRouter', HelloRouter);
+    });
+
+    context('when router is present', function () {
+      it('throws an error', function () {
+        expect(function () {
+          subject.renderRouter('HelloRouter', { node: 'someNode' });
+        })
+        .withContext(subject.enabled = true)
+        .toThrow(/Error when rendering HelloRouter/);
+      });
+    });
+
+    context('when router does not exist', function () {
+      let ReactDOMSpy;
+      const node = { nodeType: 1, nodeName: 'DIV' };
+      beforeEach(function () {
+        ReactDOMSpy = spyOn(ReactDOM, 'render');
+      });
+
+      afterEach(function () {
+        expect.restoreSpies();
+      });
+
+      it('sets router presence flag to true', function () {
+        subject.renderRouter('HelloRouter', node);
+
+        expect(subject.enabled).toBe(true);
+      });
+
+      it('calls ReactDOM renderer once', function () {
+        subject.renderRouter('HelloRouter', { nodeType: 1, nodeName: 'DIV' });
+
+        expect(ReactDOMSpy.calls.length).toEqual(1);
+        expect(ReactDOMSpy).toHaveBeenCalledWith(HelloRouter, { nodeType: 1, nodeName: 'DIV' });
+      });
+    });
+  });
+
+  describe('#unmountRouter', function () {
+    let ReactDOMSpy;
+    beforeEach(function () {
+      ReactDOMSpy = spyOn(ReactDOM, 'unmountComponentAtNode');
+    });
+
+    afterEach(function () {
+      expect.restoreSpies();
+    });
+
+    it('unmounts router component at specified node', function () {
+      subject.unmountRouter({ node: 'someNode' });
+
+      expect(ReactDOMSpy.calls.length).toEqual(1);
+      expect(ReactDOMSpy).toHaveBeenCalledWith({ node: 'someNode' });
+    });
+
+    it('allows to add new router', function () {
+      subject.unmountRouter({ node: 'someNode' });
+      expect(subject.enabled).toBe(false);
+    });
+  });
+
+  describe('#integrationWrapper', function () {
+    const node = { nodeType: 1, nodeName: 'DIV' };
+
+    describe('function mount', function () {
+      it('calls renderComponent', function () {
+        const mountSpy = spyOn(subject, 'renderRouter');
+
+        const payload = { name: 'routerName' };
+        subject.integrationWrapper.mount(node, payload);
+
+        expect(mountSpy.calls.length).toEqual(1);
+        expect(mountSpy).toHaveBeenCalledWith(
+          'routerName',
+          { nodeType: 1, nodeName: 'DIV' }
+        );
+      });
+    });
+
+    describe('function unmount', function () {
+      it('calls unmountComponent', function () {
+        const unmountSpy = spyOn(subject, 'unmountRouter');
+        subject.integrationWrapper.unmount(node);
+
+        expect(unmountSpy.calls.length).toEqual(1);
+        expect(unmountSpy).toHaveBeenCalledWith({ nodeType: 1, nodeName: 'DIV' });
+      });
+    });
+  });
+});

data/js/test/integrations/react.spec.js

@@ -0,0 +1,96 @@
+import expect, { spyOn } from 'expect';
+import React, { PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import subject from '../../src/integrations/react';
+
+class HelloComponent extends React.Component {
+  static propTypes() {
+    return {
+      username: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    return (<div>Hello World! {this.props.username}</div>);
+  }
+}
+
+describe('ReactIntegration', function () {
+  afterEach(function () {
+    subject.components = {};
+  });
+
+  describe('.constructor', function () {
+    it('intializes empty components dictionary', function () {
+      expect(subject.components).toEqual({});
+    });
+  });
+
+  describe('#registerComponent', function () {
+    it('adds component to the components storage', function () {
+      subject.registerComponent('HelloWorld', HelloComponent);
+      expect(subject.components.HelloWorld).toBe(HelloComponent);
+    });
+  });
+
+  describe('#getComponent', function () {
+    it('returns component by name', function () {
+      subject.registerComponent('HelloWorld', HelloComponent);
+      expect(subject.getComponent('HelloWorld')).toBe(HelloComponent);
+    });
+
+    it('returns undefined if component is not found', function () {
+      expect(subject.getComponent('HelloWorld')).toBe(undefined);
+    });
+  });
+
+  describe('#createComponent', function () {
+    it('creates component with given props', function () {
+      subject.registerComponent('HelloWorld', HelloComponent);
+      const component = subject.createComponent('HelloWorld', { username: 'testUser' });
+
+      expect(component.props).toEqual({ username: 'testUser' });
+      expect(component.type).toBe(HelloComponent);
+    });
+  });
+
+  describe('#unmountComponent', function () {
+    it('unmount component at specified node', function () {
+      const node = { nodeType: 1, nodeName: 'DIV' };
+      const unmountSpy = spyOn(ReactDOM, 'unmountComponentAtNode');
+      subject.unmountComponent(node);
+
+      expect(unmountSpy.calls.length).toEqual(1);
+      expect(unmountSpy).toHaveBeenCalledWith({ nodeType: 1, nodeName: 'DIV' });
+    });
+  });
+
+  describe('#integrationWrapper', function () {
+    const node = { nodeType: 1, nodeName: 'DIV' };
+
+    describe('function mount', function () {
+      it('calls renderComponent', function () {
+        const payload = { name: 'componentName', props: { username: 'testUser' } };
+        const mountSpy = spyOn(subject, 'renderComponent');
+        subject.integrationWrapper.mount(node, payload);
+
+        expect(mountSpy.calls.length).toEqual(1);
+        expect(mountSpy).toHaveBeenCalledWith(
+          'componentName',
+          { username: 'testUser' },
+          { nodeType: 1, nodeName: 'DIV' }
+        );
+      });
+    });
+
+    describe('function unmount', function () {
+      it('calls unmountComponent', function () {
+        const unmountSpy = spyOn(subject, 'unmountComponent');
+        subject.integrationWrapper.unmount(node);
+
+        expect(unmountSpy.calls.length).toEqual(1);
+        expect(unmountSpy).toHaveBeenCalledWith({ nodeType: 1, nodeName: 'DIV' });
+      });
+    });
+  });
+});