react_webpack_rails 0.0.5 → 0.1.0

data/js/test/nodes.spec.js

@@ -0,0 +1,121 @@
+import expect, { spyOn, createSpy } from 'expect';
+import Nodes from '../src/nodes';
+import IntegrationsManager from '../src/integrations-manager';
+
+const { mountNodes, unmountNodes } = Nodes;
+
+const node = {
+  nodeType: 1,
+  nodeName: 'DIV',
+  getAttribute: createSpy().andCall(function (attribute) {
+    return {
+      'data-react-element': 'data-react-component',
+      'data-payload': '{"color":"sampleColor"}',
+      'data-integration-name': 'basicIntegration',
+      'data-options': '{"prerender":false}',
+    }[attribute];
+  }),
+};
+
+describe('Nodes', function () {
+  beforeEach(function () {
+    IntegrationsManager.register(
+      'basicIntegration',
+      {
+        mount: () => {},
+        unmount: () => {},
+      }
+    );
+  });
+
+  afterEach(function () {
+    IntegrationsManager.integrations = {};
+    expect.restoreSpies();
+  });
+
+  describe('#mountNodes', function () {
+    context('when nodes could not be found', function () {
+      beforeEach(function () {
+        global.document = {
+          querySelectorAll: createSpy().andReturn([]),
+        };
+      });
+
+      it('does nothing', function () {
+        const mountSpy = spyOn(IntegrationsManager.get('basicIntegration'), 'mount');
+        mountNodes('[selectorWithoutNodes]');
+
+        expect(mountSpy.calls.length).toEqual(0);
+      });
+    });
+
+    context('when nodes were found', function () {
+      beforeEach(function () {
+        global.document = {
+          querySelectorAll: createSpy().andReturn([node]),
+        };
+      });
+
+      it('uses "data-react-element" as default selector', function () {
+        const documentSpy = spyOn(document, 'querySelectorAll');
+        mountNodes();
+
+        expect(documentSpy.calls.length).toEqual(1);
+        expect(documentSpy).toHaveBeenCalledWith('[data-react-element]');
+      });
+
+      it('mounts nodes', function () {
+        const mountSpy = spyOn(IntegrationsManager.get('basicIntegration'), 'mount');
+        const documentSpy = spyOn(document, 'querySelectorAll');
+        mountNodes('[selectorWithNodes]');
+
+        expect(mountSpy.calls.length).toEqual(1);
+        expect(documentSpy.calls.length).toEqual(1);
+        expect(documentSpy).toHaveBeenCalledWith('[selectorWithNodes]');
+      });
+    });
+  });
+
+  describe('#unmountNodes', function () {
+    context('when nodes could not be found', function () {
+      beforeEach(function () {
+        global.document = {
+          querySelectorAll: createSpy().andReturn([]),
+        };
+      });
+
+      it('does nothing', function () {
+        const unmountSpy = spyOn(IntegrationsManager.get('basicIntegration'), 'unmount');
+        unmountNodes('[selectorWithoutNodes]');
+
+        expect(unmountSpy.calls.length).toEqual(0);
+      });
+    });
+
+    context('when nodes were found', function () {
+      beforeEach(function () {
+        global.document = {
+          querySelectorAll: createSpy().andReturn([node]),
+        };
+      });
+
+      it('uses "data-react-element" as default selector', function () {
+        const documentSpy = spyOn(document, 'querySelectorAll');
+        unmountNodes();
+
+        expect(documentSpy.calls.length).toEqual(1);
+        expect(documentSpy).toHaveBeenCalledWith('[data-react-element]');
+      });
+
+      it('unmounts nodes', function () {
+        const unmountSpy = spyOn(IntegrationsManager.get('basicIntegration'), 'unmount');
+        const documentSpy = spyOn(document, 'querySelectorAll');
+        unmountNodes('[selectorsWithNodes]');
+
+        expect(unmountSpy.calls.length).toEqual(1);
+        expect(documentSpy.calls.length).toEqual(1);
+        expect(documentSpy).toHaveBeenCalledWith('[selectorsWithNodes]');
+      });
+    });
+  });
+});

data/lib/assets/javascripts/react_integration.js.erb

@@ -1,169 +1,88 @@
-/*globals React, Turbolinks*/
-
-// from https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb
-// Unobtrusive scripting adapter for React
-;(function(document, window) {
-  // jQuery is optional. Use it to support legacy browsers.
-  var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
-
-  var _ReactDOM = function () {
-    if(typeof window.ReactDOM !== 'undefined'){
-      return window.ReactDOM;
-    };
-    if(parseFloat(window.React.version) >= 0.14) {
-      console.warn("ReactDOM is missing. Make sure it's exposed in app/react/index.js");
-    };
-    return window.React;
-  }
-
-  // create the  namespace
-  window.ReactRailsUJS = {
-    CLASS_NAME_ATTR: 'data-react-class',
-    PROPS_ATTR: 'data-react-props',
-    ROUTER_FLAG: 'data-react-router',
-    RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
-    reactComponents: {},
-    reactRouters: {},
-    // helper method for the mount and unmount methods to find the
-    // `data-react-class` DOM elements
-    _findDOMNodes: function(searchSelector) {
-      // we will use fully qualified paths as we do not bind the callbacks
-      var selector;
-      if (typeof searchSelector === 'undefined') {
-        var selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
-      } else {
-        var selector = searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
-      }
-
-      if ($) {
-        return $(selector);
-      } else {
-        return document.querySelectorAll(selector);
-      }
-    },
-
-    registerComponent: function (name, component) {
-      window.ReactRailsUJS.reactComponents[name] = component;
-    },
-
-    getComponent: function(name) {
-      return window.ReactRailsUJS.reactComponents[name];
-    },
-
-    createComponent: function (name, props) {
-      var constructor = window.ReactRailsUJS.getComponent(name);
-      return React.createElement(constructor, props);
-    },
-
-    renderComponent: function (name, props, element) {
-      var component = window.ReactRailsUJS.createComponent(name, props);
-      _ReactDOM().render(component, element);
-    },
-
-    unmountComponent: function (node) {
-      _ReactDOM().unmountComponentAtNode(node);
-    },
-
-    registerRouter: function(name, routes) {
-      window.ReactRailsUJS.reactRouters[name] = routes;
-    },
-
-    getRouter: function(name) {
-      return window.ReactRailsUJS.reactRouters[name];
-    },
-
-    renderRouter: function(name, element) {
-      if(window.ReactRailsUJS.routerEnabled == true){
-        throw new Error("Error when renering " + name + "router: can't render more than one router.")
-      }
-      window.ReactRailsUJS.routerEnabled = true;
-      var router = window.ReactRailsUJS.getRouter(name);
-      _ReactDOM().render(router, element);
-    },
-
-    mountComponents: function(searchSelector) {
-      var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
-
-      for (var i = 0; i < nodes.length; ++i) {
-        var node = nodes[i];
-        var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
-        var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
-        try {
-          var isRouter = JSON.parse(node.getAttribute(window.ReactRailsUJS.ROUTER_FLAG));
-        } catch(error) {
-          var isRouter = false
-        }
-        var props = propsJson && JSON.parse(propsJson);
-        if (isRouter) {
-          window.ReactRailsUJS.renderRouter(className, node)
-        } else {
-          window.ReactRailsUJS.renderComponent(className, props, node)
-        }
-      }
-    },
-
-    unmountComponents: function(searchSelector) {
-      var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
-      window.ReactRailsUJS.routerEnabled = false;
-      for (var i = 0; i < nodes.length; ++i) {
-        var node = nodes[i];
-        window.ReactRailsUJS.unmountComponent(node);
-      }
-    }
-  };
-
-  // expose helpers globally
-  window.registerComponent = ReactRailsUJS.registerComponent;
-  window.getComponent = ReactRailsUJS.getComponent;
-  window.createComponent = ReactRailsUJS.createComponent;
-  window.renderComponent = ReactRailsUJS.renderComponent;
-  window.unmountComponent = ReactRailsUJS.unmountComponent;
-
-  window.registerRouter = ReactRailsUJS.registerRouter;
-  window.getRouter = ReactRailsUJS.getRouter;
-  window.renderRouter = ReactRailsUJS.renderRouter;
-
-  // functions not exposed publicly
-  function handleTurbolinksEvents () {
-    var handleEvent;
+var __RWR_ENV__ = {
+  name: "<%=Rails.env%>",
+  config: <%=JSON(Rails.application.config.react.shared)%>
+};
+
+function deprecatedError(helperName) {
+  var lines = [
+    helperName + ' was removed.',
+    'use RWR.' + helperName + ' instead.',
+    'check react_webpack_rails changelog for details.'
+  ]
+  console.error(lines.join("\n"));
+}
+
+function registerComponent() {
+  deprecatedError('registerComponent');
+}
+
+function getComponent() {
+  deprecatedError('getComponent');
+}
+
+function createComponent() {
+  deprecatedError('createComponent');
+}
+
+function renderComponent() {
+  deprecatedError('renderComponent');
+}
+
+function unmountComponent() {
+  deprecatedError('unmountComponent');
+}
+
+function renderRouter() {
+  deprecatedError('renderRouter');
+}
+
+function registerRouter() {
+  deprecatedError('registerRouter');
+}
+
+function unmountRouter() {
+  deprecatedError('unmountRouter');
+}
+
+function getRouter() {
+  deprecatedError('getRouter');
+}
+
+var RWRhandlers = {
+  _mountNodes: function _mountNodes() {
+    RWR.mountNodes();
+  },
+
+  _unmountNodes: function _unmountNodes() {
+    RWR.unmountNodes();
+  },
+
+  _handleEvent: function(eventName, callback) {
+    document.addEventListener(eventName, callback);
+  },
+
+  handleTurbolinksEvents: function handleTurbolinksEvents() {
     var unmountEvent;
 
-    if ($) {
-      handleEvent = function(eventName, callback) {
-        $(document).on(eventName, callback);
-      };
-
-    } else {
-      handleEvent = function(eventName, callback) {
-        document.addEventListener(eventName, callback);
-      };
-    }
-
     if (Turbolinks.EVENTS) {
       unmountEvent = Turbolinks.EVENTS.BEFORE_UNLOAD;
     } else {
       unmountEvent = 'page:receive';
       Turbolinks.pagesCached(0);
-
-      if (window.ReactRailsUJS.RAILS_ENV_DEVELOPMENT) {
-        console.warn('The Turbolinks cache has been disabled (Turbolinks >= 2.4.0 is recommended). See https://github.com/reactjs/react-rails/issues/87 for more information.');
-      }
     }
-    handleEvent('page:change', function() {window.ReactRailsUJS.mountComponents()});
-    handleEvent(unmountEvent, function() {window.ReactRailsUJS.unmountComponents()});
-  }
+    RWRhandlers._handleEvent('page:change', RWRhandlers._mountNodes);
+    RWRhandlers._handleEvent(unmountEvent, RWRhandlers._unmountNodes);
+  },
 
-  function handleNativeEvents() {
-    if ($) {
-      $(function() {window.ReactRailsUJS.mountComponents()});
-    } else {
-      document.addEventListener('DOMContentLoaded', function() {window.ReactRailsUJS.mountComponents()});
-    }
-  }
+  handleNativeEvents: function handleNativeEvents() {
+    document.addEventListener('DOMContentLoaded', RWRhandlers._mountNodes);
+  },
+};
 
+(function reactMain() {
   if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
-    handleTurbolinksEvents();
+    RWRhandlers.handleTurbolinksEvents();
   } else {
-    handleNativeEvents();
+    RWRhandlers.handleNativeEvents();
   }
 })(document, window);

data/lib/generators/react_webpack_rails/templates/.babelrc

@@ -1,3 +1,3 @@
 {
-  "stage": 1
+  "presets": ["stage-1", "es2015", "react"]
 }

data/lib/generators/react_webpack_rails/templates/karma.conf.js

@@ -16,7 +16,7 @@ module.exports = function (config) {
           {
             test: /\.jsx?$/,
             exclude: /node_modules/,
-            loader: 'babel-loader'
+            loader: 'babel'
           }]
       },
       watch: true,

data/lib/generators/react_webpack_rails/templates/package.json.erb

@@ -1,7 +1,7 @@
 {
   "name": "<%="#{Rails.application.class.parent_name}"%>",
   "devDependencies": {
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^5.0.0-beta6",
     "eslint": "^1.7.3",
     "eslint-plugin-react": "^3.6.3",
     "expect": "^1.12.2",
@@ -11,19 +11,25 @@
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.6",
     "karma-webpack": "^1.7.0",
+    "mocha": "^2.3.4",
+    "sinon": "^1.17.2",
     "react-hot-loader": "^1.3.0",
     "webpack-dev-server": "^1.12.1",
     "webpack-notifier": "^1.2.1"
   },
   "dependencies": {
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
+    "babel-core": "^6.4.0",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-1": "^6.3.13",
     "extract-text-webpack-plugin": "^0.8.2",
     "node-sass": "^3.3.3",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
 <%= options.router ? '    "react-router": "1.0.0-rc3",' : ''%>
     "react-tools": "*",
+    "react-webpack-rails": "0.1.0",
     "sass-loader": "^3.0.0",
     "webpack": "^1.12.1"
   },

data/lib/generators/react_webpack_rails/templates/react/index.js.erb

@@ -1,12 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-window.React = React;
-window.ReactDOM = ReactDOM;
+import RWR from 'react-webpack-rails';
+window.RWR = RWR;
 <% if options.example %>
 import HelloWorld from './components/hello-world';
-registerComponent('HelloWorld', HelloWorld);
+RWR.registerComponent('HelloWorld', HelloWorld);
 <% else %>
 // example usage:
 // import HelloWorld from './components/hello-world';
-// registerComponent('HelloWorld', HelloWorld);
+// RWR.registerComponent('HelloWorld', HelloWorld);
 <% end %>

data/lib/generators/react_webpack_rails/templates/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = {
         key: 'jsx',
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
-        loaders: ['babel-loader']
+        loader: 'babel'
       },
       {
         key: 'scss',

data/lib/react_webpack_rails/railtie.rb

@@ -2,6 +2,11 @@ require 'react_webpack_rails/view_helpers'
 
 module ReactWebpackRails
   class Railtie < ::Rails::Railtie
+    config.react = ActiveSupport::OrderedOptions.new
+    # Sensible defaults. Can be overridden in application.rb
+    config.react.camelize_props = false # pass in an underscored hash but get a camelized hash
+    config.react.shared = {}
+
     initializer 'react_webpack_rails.view_helpers' do
       ActionView::Base.send :include, ViewHelpers
     end