rwr-react_router 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1a3833f3d96ddf37b3fbb317b63d5792732242f3
-  data.tar.gz: cb17d557a4919ff1f8af7922287e84b327577cb3
+  metadata.gz: a82a539d7fa4cc94968d47f181921640262c3e0b
+  data.tar.gz: 01711290a407177f24f836f001b5b356a0cde023
 SHA512:
-  metadata.gz: af6cc16e5dab4b9bfe781b7538ad14aab6896b0efcf37663447d5abd969406ee6b8d5090326bc7df8b33c6ce2175cd178f5095a86b617ce1eae8c82b6e91f07d
-  data.tar.gz: 3326daef28a1425b97d67178dfb947139d7ef39e6dc92ba36d41baf70af7f21e92c58c66b7501fd56098cc3820a8d79eda3d90c0ef2186dbb0cecd1fcf3f09eb
+  metadata.gz: 1f2e3315b1944e2fa4f67672d72ba6c5af94e9680cc87f60ef53028edfe6ce8930db12f86ab1f3427057942f5e8627d701dc0d8e1697c87efeb6485b41b7e0b3
+  data.tar.gz: 125f5b0ac9cebb1f68031efa3d012827c553a0edfd1ce71a6f26a9cd6f797659d935325a024f2a49ac18f49fec9d0db08146220c5349398949441db38d5bb4ce

data/.travis.yml

@@ -22,6 +22,8 @@ matrix:
       env: TEST_SUITE=node
 
 before_script:
+  - nvm install 4.1
+  - nvm use 4.1
   - npm install -g npm@^2.0
   - npm install -g webpack@^1.12.1
   - bundle exec rake setup:$TEST_SUITE

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.0 26 March 2016
+* support server-side render,
+  * handle redirect and missing route Rails side.
+
 ## 0.2.0 21 March 2016
 * support passing props to router.
 

data/README.md

@@ -24,6 +24,13 @@ $ npm install --save rwr-react-router
 import RWRReactRouter from 'rwr-react-router';
 ```
 
+* Register integration in RWR using RWR's IntegrationsManager manager:
+
+```js
+import { integrationsManager } from 'react-webpack-rails';
+integrationsManager.register('react-router', RWRReactRouter.integrationWrapper);
+```
+
 * Register one of your routers:
 ```js
 RWRReactRouter.register('MyRouter', MyRouter);
@@ -52,6 +59,29 @@ function RouterWithProps(props) {
 
 Props passed to route will be available under `props.route.yourName`.
 
+### Server side rendering.
+To make router work server-side it need to work on browserHistory. Otherwise, rails don't have access to current route in request. This can be achieved by adding wildcard route to rails routes:
+```ruby
+get '/server_side/' => 'pages#server_side'
+get '/server_side/*path' => 'pages#server_side'
+```
+and setting browserHistory for router:
+```js
+<Router history={browserHistory}>
+  <Route path="/server_side" component={App}>
+    ...
+  </Route>
+</Router>
+```
+**note:** react router will analyze whole path so don't forget to add rails path part to it.
+
+With valid setup simply enable server side by passing `server_side: true` flag in options:
+```erb
+<%= react_router('MyRouter', { foo: :bar }, server_side: true) %>
+```
+
+**note:** rwr-react_router automatically handles matching, redirects and routing errors. Redirects and 404's are passed to Rails and handled there so you will be redirect or get 404 page like in normal Rails app.
+
 ## Contributing
 ## Issues
 

data/Rakefile

@@ -16,10 +16,18 @@ namespace :test do
   task :gem do
     sh %Q(bundle exec rspec spec/rwr-react_router.rb)
   end
+
   desc 'Run rspec for rails4 application'
   task :rails4 do
     Bundler.with_clean_env do
-      sh %Q(cd spec/rails4_dummy_app && npm run build && bundle exec rspec)
+      sh %(
+            cd spec/rails4_dummy_app &&
+            npm run build &&
+            npm run rwr-background-node &&
+            sleep 3 &&
+            bundle exec rspec &&
+            npm run rwr-stop-background-node
+          )
     end
   end
 end

data/js/src/index.js

@@ -1,4 +1,7 @@
+import React from 'react';
+import { match, RouterContext } from 'react-router';
 import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
 import VERSION from './version';
 
 class ReactRouterIntegration {
@@ -27,9 +30,7 @@ class ReactRouterIntegration {
       );
     }
     this.enabled = true;
-    const constructor = this.get(name);
-    const router = typeof(constructor) === 'function' ? constructor(props) : constructor;
-    ReactDOM.render(router, node);
+    ReactDOM.render(this._initializeRouter(name, props), node);
   }
 
   unmount(node) {
@@ -37,6 +38,34 @@ class ReactRouterIntegration {
     this.enabled = false;
   }
 
+  _initializeRouter(name, props) {
+    const constructor = this.get(name);
+    return typeof(constructor) === 'function' ? constructor(props) : constructor;
+  }
+
+  renderRouterToString(routerName, props, href) {
+    const routes = this._initializeRouter(routerName, props);
+    const result = {
+      body: '',
+      code: 0,
+    };
+
+    match({ routes, location: href }, (error, redirectLocation, renderProps) => {
+      if (error) {
+        throw error;
+      } else if (redirectLocation) {
+        result.code = 302;
+        result.redirectUri = `${redirectLocation.pathname}${redirectLocation.search}`;
+      } else if (renderProps) {
+        result.body = ReactDOMServer.renderToString(<RouterContext {...renderProps} />);
+        result.code = 200;
+      } else {
+        result.code = 404;
+      }
+    });
+    return JSON.stringify(result);
+  }
+
   get integrationWrapper() {
     return {
       mount: function _mount(node, payload) {
@@ -46,6 +75,10 @@ class ReactRouterIntegration {
       unmount: function _unmount(node) {
         this.unmount(node);
       }.bind(this),
+
+      nodeRun: function _prerender(payload) {
+        return this.renderRouterToString(payload.name, payload.props, payload.path);
+      }.bind(this),
     };
   }
 }

data/js/src/version.js

@@ -1 +1 @@
-export default '0.2.0';
+export default '0.3.0';

data/lib/react_webpack_rails/react_router_integration/version.rb

@@ -1,5 +1,5 @@
 module ReactWebpackRails
   module ReactRouterIntegration
-    VERSION = '0.2.0'
+    VERSION = '0.3.0'
   end
 end

data/lib/react_webpack_rails/react_router_integration/view_helpers.rb

@@ -1,8 +1,37 @@
 module ReactWebpackRails
   module ReactRouterIntegration
     module ViewHelpers
-      def react_router(name, props = {})
-        react_element('react-router', name: name, props: props)
+      def react_router(name, props = {}, options = {})
+        payload = { name: name, props: props }
+        result = ''
+        if server_side?(options.delete(:server_side))
+          result = execute_router_server_side!(payload, request.path)
+        end
+        react_element('react-router', payload, options) { result }
+      end
+
+      private
+
+      def routing_error(name, path)
+        "RactRouter: No route found in #{name} router for #{path}."
+      end
+
+      def server_side?(server_side)
+        server_side.nil? ? Rails.application.config.react.server_side : server_side
+      end
+
+      def execute_router_server_side!(payload, path)
+        runner = NodeIntegrationRunner.new('react-router', payload.merge(path: path))
+        result = JSON.parse(runner.run)
+
+        case result['code']
+        when 200
+          result['body'].html_safe
+        when 302
+          controller.redirect_to result['redirectUri']
+        else
+          fail ActionController::RoutingError, routing_error(payload[:name], path)
+        end
       end
     end
   end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwr-react-router",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "main": "js/lib/index.js",
   "files": [
@@ -28,7 +28,8 @@
     "react-dom": "^0.14.0"
   },
   "dependencies": {
-    "react-webpack-rails": "^0.1.0"
+    "react-webpack-rails": "^0.1.0",
+    "react-router": "^2.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.4.0",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rwr-react_router
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Rafał Gawlik
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-03-21 00:00:00.000000000 Z
+date: 2016-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler