react_webpack_rails 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 95002a306fa194b5eb678dca9b9837d366db9df0
-  data.tar.gz: e14adcbbec3aab1e87f6025718c111754fc40f96
+  metadata.gz: c981ff55a0491767f0c8b6b521117293422993b1
+  data.tar.gz: 0fa4f59a58b398701a14d16b6dc089977f63edb8
 SHA512:
-  metadata.gz: 8c56369c886b81056e4d774ca417efc81f6a12cad2129b8df634c7cccb4b3f68848a43dcbf02c0d7122488c8255f13261f7be6925dd259878bf094dd6d0064fb
-  data.tar.gz: c7cda2c3749e953e5313ce232392906d2f7285f9b4a4dbd8e9db4f4b801c4c6c197793381f62f0f416d8ad239b7570079e3d5d099d4c4d5465b04f60232a729e
+  metadata.gz: be91c9be8c46a94a70fd0100448e6a2e77b4c8ed4828f78799c4a920d896608d9a13b9ebf6d255f2fc90044e30e79553b0cb3c270338c4b9e42cfc89571d0adc
+  data.tar.gz: fb0566a5a651221b866e4cac13a98eb861d4cd3a70eee3f03941da8a147825cf6853fff45480ee48273193f4a0f82db25d8ab6973125d3586c8522fa20ab3d78

data/.gitignore

@@ -1,9 +1,10 @@
 /.bundle/
 /.yardoc
-/Gemfile.lock
 /_yardoc/
 /coverage/
 /doc/
+/Gemfile.lock
+/node_modules
 /pkg/
 /spec/reports/
 /tmp/
@@ -11,3 +12,4 @@
 
 node_modules
 react_webpack_rails-*.gem
+react_bundle.js

data/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.2.0
+* Added server-side execution of js
+  * Updated package.json generator,
+    * Added dependencies:
+      * http
+      * httpdispatcher
+      * forever
+    * Added npm scripts for running node-server on development/production
+  * Added node server generator (`app/react/node_server.js`)
+  * Updated `app/react/index.js` generator
+  * Added NodeIntegrationRunner service for running JS code on node server.
+* Updated React-integration:
+  * Added server-side render support to npm package
+  * Updated react_component helper
+* fixed props processing
+* Added react_component render
+
+#### migration 0.1.2 -> 0.2.0
+* Make sure you have latest npm package installed. In your package.json:
+```js
+"react_webpack_rails": "0.2.0"
+```
+* In `app/react/index.js` replace `window.RWR = RWR;` with `RWR.run();` - it's required by node environment.
+* Setup node server by running server_side generator.
+```bash
+$ rails generate react_webpack_rails:install:server_side
+```
+
+  ***note***: *generator will ask you to override existing package.json. Don't worry about its content - generator will merge existing package with the one from gem.*
+
 ## 0.1.2 (February 3, 2015)
 * fix camelize_props
 * allow camelize for AMS objects

data/CONTRIBUTING.md

@@ -0,0 +1,17 @@
+# Contributing to React Webpack Rails gem
+
+## Issues
+
+Found a bug in React Webpack Rails? Open an issue on [GitHub Issues](https://github.com/netguru/react_webpack_rails/issues).
+
+## Pull requests
+
+Interested in contributing to React Webpack Rails? That's great, and thank you for your interest!
+
+After checking out the repo, run `bundle exec rake setup:all` to install every environment dependencies.
+
+To get your contributions accepted, make sure:
+
+* All the tests pass. Run `bundle exec rake test:all`.
+* Any new code paths you've added are covered by tests.
+* Describe your changes in pull request (what it adds, how to migrate from previous version etc.)

data/README.md

@@ -2,7 +2,18 @@
 [![Travis CI](https://travis-ci.org/netguru/react_webpack_rails.svg?branch=master)](https://travis-ci.org/netguru/react_webpack_rails)
 
 #### Rails - Webpack setup with React integration.
-Inspired and partially based on https://github.com/reactjs/react-rails/ this gem provides generators and helpers that makes react-webpack-rails integration easy.
+This gem provides easy and convenient way to build modern JavaScript stack on top of Rails applications using [Webpack](http://webpack.github.io/) and [React](https://facebook.github.io/react/).
+
+### Development branch!
+See [0.1-stable](https://github.com/netguru/react_webpack_rails/tree/0.1-stable) for latest release.
+
+## Features
+* [Install Generator](https://github.com/netguru/react_webpack_rails/blob/master/docs/install_generator.md) for quick [Webpack](http://webpack.github.io/) setup.
+* Integrated [react-hot-loader](https://github.com/gaearon/react-hot-loader)
+* ES6/7 support with [bablejs](https://babeljs.io/).
+* Node.js based [server-side JavaScript execution](https://github.com/netguru/react_webpack_rails/blob/master/docs/server_side_rendering.md).
+* [React](https://facebook.github.io/react/) integration with server prerender option.
+* [React-router](https://github.com/rackt/react-router) integration.
 
 ## Installation
 
@@ -81,7 +92,7 @@ By default, `react-webpack-rails` uses Babel Stage 1 - Proposal. If you want to
 
 ```js
 import Component from './components/some-component';
-registerComponent('customComponentName', Component);
+RWR.registerComponent('customComponentName', Component);
 ```
 
 #### Use it in rails view
@@ -94,7 +105,15 @@ registerComponent('customComponentName', Component);
 
 ```js
 const element = $('#my-element');
-renderComponent('customComponentName', {user_id: 1}, element);
+RWR.renderComponent('customComponentName', {user_id: 1}, element);
+```
+
+#### Render component in controller
+
+```ruby
+def action_name
+  render react_component 'customComponentName', props: { user_id: 1 }
+end
 ```
 
 ### Development environment
@@ -123,15 +142,9 @@ or manually:
 #### Deployment
 Check [docs/deployment.md](docs/deployment.md)
 
-## Gem development
-
-After checking out the repo, run `bundle exec rake setup:all` to install dependencies. Then, run `rake` to run the tests (includes gem, test app and node module).
-Run `bundle exec rake -T` to check available development commands.
-
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/netguru/react_webpack_rails.
-
+See the [contribution guide](https://github.com/netguru/react_webpack_rails/blob/master/CONTRIBUTING.md).
 
 ## License
 

data/docs/README.md

@@ -1,12 +1,14 @@
 # Docs
 1. [Api](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md)
-  1. [React](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#React)
+  1.1 [React](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#React)
     * [js: registerComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#registercomponent)
     * [js: createComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getcomponent)
     * [js: renderComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rendercomponent)
     * [js: unmountComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#unmountcomponent)
     * [ruby: react_component](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component)
-  1. [ReactRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ReactRouter)
+  1.2 [ReactRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ReactRouter)
     * [js: getRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getrouter)
     * [js: renderRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#renderrouter)
     * [ruby: react_router](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_router)
+2. [Server-Side Rendering](https://github.com/netguru/react_webpack_rails/blob/master/docs/server_side_rendering.md)
+3. [Install Generator]((https://github.com/netguru/react_webpack_rails/blob/master/docs/install_generator.md))

data/docs/api.md

@@ -79,21 +79,35 @@
 
 
   * ### react_component [ruby]
+    #### helper
 
     ```ruby
     react_component(String component_name[, Object props, Object options])
     ```
 
-    Creates DOM node with props as data attributes in rendered view so RWR can grab it and mount proper component.
+    #### renderer
+
+    ```ruby
+    render react_component String component_name[, Object options])
+    ```
+
+    Creates DOM node with props as data attributes in rendered view, so RWR can grab it and mount proper component.
     Options hash contains customization of React component, such as `tag`, `class`.
+    Also, the options hash is the place where you can override the global server-side rendering setting.
 
-    ##### example:
+    **note:** Props Object will be parsed to JSON. Be careful when passing rails models there - all its data accessible after `.to_json` will be exposed as data-attributes. We recommend using serializers to control it.
+
+    ##### helper example:
 
     ```ruby
-    <%= react_component('MyComponentName', MySerializer.new(my_data), { tag: :ul, class: 'my-class' }) %>
+    <%= react_component('MyComponentName', MySerializer.new(my_data), { tag: :ul, class: 'my-class', server_side: true }) %>
     ```
 
-    **note:** Props Object will be parsed to JSON. Be careful when passing rails models there - all its data accessible after `.to_json` will be exposed as data-attributes. We recommend using serializers to control it.
+    ##### renderer example:
+
+    ```ruby
+    render react_component: 'MyComponentName', props: MySerializer.new(my_data), tag: :ul, server_side: true
+    ```
 
 
 ## ReactRouter

data/docs/install_generator.md

@@ -0,0 +1,55 @@
+Instlall Generator
+=======
+
+`Install` generator is build from 6 independent generators responsible for different parts of installation process. All steps except core generator can be skipped by passing one of possible [options]().
+
+```bash
+$ rails generate react_webpack_rails:install
+```
+
+Install generator run with default options will create following structure:
+
+```
+├── app
+│   ├── react
+│   │   ├── components
+│   │   │   ├── hello-world.jsx (example)
+│   │   │   └── hello-world-test.jsx (example)
+│   │   ├── index.js (core)
+│   │   └── node_server.js (server_side)
+│   ├── views
+│   │   ├── layouts
+│   │   │   └── _react_hot_assets.html.erb (hot_relaod)
+│   │   └── react_examples
+│   │       └── component.html.erb (example)
+│   ├── assets
+│   │   └── javascripts
+│   │       └──react_bundle.js (core)
+│   └── controllers
+│       └── react_examples_controller.rb (example)
+├── webpack
+│   ├── dev.config.js (core)
+│   ├── hot-dev.config.js (hot_reload)
+│   ├── production.config.js (core)
+│   └── tests.config.js (karma_setup)
+├── forever
+│   ├── development.json (server_side)
+│   └── production.json (server_side)
+├── .babelrc (core)
+├── karma.conf.js (karma_setup)
+├── package.json (core)
+└── webpack.config.js (core)
+```
+
+And modify:
+- `config/routes.rb` by adding a route for example component,
+- `app/views/layouts/application.html.erb` by adding hot_reload partial.
+
+### Options
+* *--no-example* - skip example generator
+* *--no-hot-reload* - skip hot_reload generator
+* *--no-server-side* - skip server_side  generator
+* *--no-karma-setup* - skip karma_setup generator
+* *--react-router* - run react_rotuer generator
+
+*Detailed description of generators coming soon...*

data/docs/server_side_rendering.md

@@ -0,0 +1,33 @@
+Server-Side Rendering
+=======
+Server-side processing enables execution of any JavaScript code on the server side. The React integration we have prepared allows you to render React components to string on the server. The integration accepts component name and props, and returns valid HTML ([see API](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component-ruby)). This happens using provided node server. After running RWR install generator, you will find the server code in `app/react/` directory: `node_server.js`. You must ensure it is up and running if you want to use the SSR (or any other server-side processing of JavaScript). We use [Forever](https://github.com/foreverjs/forever) to keep the node server up. It handles watch and reload, and enables running and tracking background processes. Should you use current package.json, there are scripts ready to run:  
+  * running on development:
+    ```bash
+    npm run rwr-node-dev-server
+    ```
+  * running on production (foregroud):
+  ```bash
+    npm run rwr-node-server
+  ```
+  
+To set the node server address, override this option to a string of your choice:
+```ruby
+  Rails.application.config.rwr.node_server_host
+```
+
+### How to use SSR:
+
+```erb
+<%# A view in erb %>
+<%= react_component('HelloWorld', { name: @name }, server_side: true) %>
+```
+`HelloWorld` is the name of the react component, which has to be `import`ed and `registered`ed in your `app/react/index.js` like so:
+```js
+import HelloWorld from './components/hello-world';
+RWR.registerComponent('HelloWorld', HelloWorld);
+```
+`{ name: @name }` is the component's props, and the option `server_side: true` turns SSR on. By default it is set to `false`. You can change it globally by setting the following config option to a Boolean value of your choice:
+```ruby
+Rails.application.config.react.server_side
+```
+This global config may be overridden by passing the `server_side` option to a specific `react_component` invocation.

data/js/src/index.js

@@ -11,20 +11,33 @@ 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,
-};
+
+class RWR {
+  constructor() {
+    this.version = version;
+
+    this.registerComponent = react.registerComponent;
+    this.getComponent = react.getComponent;
+    this.createComponent = react.createComponent;
+    this.renderComponent = react.renderComponent;
+    this.unmountComponent = react.unmountComponent;
+
+    this.renderRouter = reactRouter.renderRouter;
+    this.registerRouter = reactRouter.registerRouter;
+    this.unmountRouter = reactRouter.unmountRouter;
+    this.getRouter = reactRouter.getRouter;
+
+    this.mountNodes = nodes.mountNodes;
+    this.unmountNodes = nodes.unmountNodes;
+  }
+
+  run() {
+    if (typeof(window) !== 'undefined') {
+      window.RWR = this;
+    } else {
+      global.RWR = this;
+    }
+  }
+}
+
+export default new RWR;

data/js/src/integrations-manager.js

@@ -17,6 +17,15 @@ class IntegrationsManager {
   register(name, integration) {
     this.integrations[name] = integration;
   }
+
+  runNodeIntegration(data) {
+    let result = '';
+    const { nodeRun } = this.get(data.integrationName);
+    if (typeof(nodeRun) === 'function') {
+      result = nodeRun(data.payload);
+    }
+    return result;
+  }
 }
 
 export default new IntegrationsManager;

data/js/src/integrations/react.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
 
 class ReactIntegration {
   constructor() {
@@ -9,6 +10,7 @@ class ReactIntegration {
     this.createComponent = this.createComponent.bind(this);
     this.renderComponent = this.renderComponent.bind(this);
     this.unmountComponent = this.unmountComponent.bind(this);
+    this.renderComponentToString = this.renderComponentToString.bind(this);
   }
 
   registerComponent(name, component) {
@@ -33,6 +35,11 @@ class ReactIntegration {
     ReactDOM.unmountComponentAtNode(node);
   }
 
+  renderComponentToString(name, props) {
+    const component = this.createComponent(name, props);
+    return ReactDOMServer.renderToString(component);
+  }
+
   get integrationWrapper() {
     return {
       mount: function _mount(node, payload) {
@@ -42,6 +49,10 @@ class ReactIntegration {
       unmount: function _unmount(node) {
         this.unmountComponent(node);
       }.bind(this),
+
+      nodeRun: function _prerender(payload) {
+        return this.renderComponentToString(payload.name, payload.props);
+      }.bind(this),
     };
   }
 }

data/js/src/version.js

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

data/lib/generators/react_webpack_rails/install/core_generator.rb

@@ -0,0 +1,47 @@
+module ReactWebpackRails
+  module Install
+    class CoreGenerator < Rails::Generators::Base
+      desc 'Create basic files structure, prepare package.json and webpack setup'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :tmp_package,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Force update tmp/package.json instead package.json'
+
+
+      def base
+        copy_file '.babelrc', '.babelrc'
+        create_file 'app/assets/javascripts/react_bundle.js'
+        template 'react/index.js', 'app/react/index.js'
+      end
+
+      def structure
+        create_file 'app/react/components/.keep'
+      end
+
+      def gitignore
+        append_file '.gitignore' do <<-'TEXT'.strip_heredoc
+          /node_modules
+          /app/assets/javascripts/react_bundle.js
+          /app/assets/stylesheets/react_bundle.css
+          TEXT
+        end
+      end
+
+      def package
+        if options.tmp_package
+          copy_file 'packages/core.json', 'tmp/package.json', force: true
+        else
+          copy_file 'packages/core.json', 'package.json'
+        end
+      end
+
+      def webpack
+        copy_file 'webpack.config.js', 'webpack.config.js'
+        copy_file 'webpack/dev.config.js', 'webpack/dev.config.js'
+        copy_file 'webpack/production.config.js', 'webpack/production.config.js'
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install/example_generator.rb

@@ -0,0 +1,34 @@
+module ReactWebpackRails
+  module Install
+    class ExampleGenerator < Rails::Generators::Base
+      desc 'Add example component, its controller and router'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :server_side,
+                   type: :boolean,
+                   default: true,
+                   desc: 'Set server_side: true in example'
+
+      def es6_example
+        copy_file 'react/components/hello-world-test.jsx', 'app/react/components/hello-world-test.jsx'
+        copy_file 'react/components/hello-world.jsx', 'app/react/components/hello-world.jsx'
+        inject_into_file 'app/react/index.js', after: "RWR.run();\n" do <<-'JS'.strip_heredoc
+
+          import HelloWorld from './components/hello-world';
+          RWR.registerComponent('HelloWorld', HelloWorld);
+          JS
+        end
+      end
+
+      def controller_and_view
+        copy_file 'examples/react_examples_controller.rb', 'app/controllers/react_examples_controller.rb'
+        template = "examples/#{options.server_side ? 'ssr-' : ''}component_view.html.erb"
+        copy_file template, 'app/views/react_examples/component.html.erb'
+      end
+
+      def example_route
+        route "get 'react_examples/component', to: 'react_examples#component', as: :component"
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install/hot_reload_generator.rb

@@ -0,0 +1,34 @@
+module ReactWebpackRails
+  module Install
+    require 'generators/react_webpack_rails/merge_helpers'
+
+    class HotReloadGenerator < Rails::Generators::Base
+      include MergeHelpers
+      desc 'Add hot reload setup'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :tmp_package,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Force update tmp/package.json instead package.json'
+
+      def package
+        merge_options = options.tmp_package ? { package_file: 'tmp/package.json', force: true } : {}
+        merge_into_package 'packages/hot-reload.json', merge_options
+      end
+
+      def hot_dev_config
+        copy_file 'webpack/hot-dev.config.js', 'webpack/hot-dev.config.js'
+      end
+
+      def partial
+        copy_file 'partial/_react_hot_assets.html.erb', 'app/views/layouts/_react_hot_assets.html.erb'
+
+        inject_into_file 'app/views/layouts/application.html.erb', after: "<body>\n" do <<-'HTML'.strip_heredoc
+          <%= render 'layouts/react_hot_assets' %>
+        HTML
+        end
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install/karma_setup_generator.rb

@@ -0,0 +1,26 @@
+module ReactWebpackRails
+  module Install
+    require 'generators/react_webpack_rails/merge_helpers'
+
+    class KarmaSetup < Rails::Generators::Base
+      include MergeHelpers
+      desc 'Add karma setup with mocha and except'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :tmp_package,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Force update tmp/package.json instead package.json'
+
+      def package
+        merge_options = options.tmp_package ? { package_file: 'tmp/package.json', force: true } : {}
+        merge_into_package 'packages/js-specs.json', merge_options
+      end
+
+      def karma_config
+        copy_file 'karma.conf.js', 'karma.conf.js'
+        copy_file 'webpack/tests.config.js', 'webpack/tests.config.js'
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install/react_router_generator.rb

@@ -0,0 +1,21 @@
+module ReactWebpackRails
+  module Install
+    require 'generators/react_webpack_rails/merge_helpers'
+
+    class ReactRouterGenerator < Rails::Generators::Base
+      include MergeHelpers
+      desc 'Add react-router setup'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :tmp_package,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Force update tmp/package.json instead package.json'
+
+      def package
+        merge_options = options.tmp_package ? { package_file: 'tmp/package.json', force: true } : {}
+        merge_into_package 'packages/react-router.json', merge_options
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install/server_side_generator.rb

@@ -0,0 +1,30 @@
+module ReactWebpackRails
+  module Install
+    require 'generators/react_webpack_rails/merge_helpers'
+
+    class ServerSideGenerator < Rails::Generators::Base
+      include MergeHelpers
+      desc 'Add and setup node server for server side execution'
+      source_root File.expand_path('../../templates', __FILE__)
+
+      class_option :tmp_package,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Force update tmp/package.json instead package.json'
+
+      def package
+        merge_options = options.tmp_package ? { package_file: 'tmp/package.json', force: true } : {}
+        merge_into_package 'packages/server-side.json', merge_options
+      end
+
+      def forever
+        copy_file 'forever/development.json', 'forever/development.json'
+        copy_file 'forever/production.json', 'forever/production.json'
+      end
+
+      def node_server
+        copy_file 'react/node_server.js', 'app/react/node_server.js'
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/install_generator.rb

@@ -1,34 +1,66 @@
 module ReactWebpackRails
   class InstallGenerator < Rails::Generators::Base
+    desc 'Prepare files necessary to use react-webpack-rails gem in a rails app.'
     source_root File.expand_path('../templates', __FILE__)
-    class_option :example, type: :boolean, default: true, desc: 'Include example component and test files.'
-    class_option :router, type: :boolean, default: true, desc: 'Add and expose react-router globally.'
-
-
-    def generate_layout
-      copy_file '.babelrc', '.babelrc'
-      copy_file 'webpack.config.js', 'webpack.config.js'
-      copy_file 'webpack/dev.config.js', 'webpack/dev.config.js'
-      copy_file 'webpack/hot-dev.config.js', 'webpack/hot-dev.config.js'
-      copy_file 'webpack/production.config.js', 'webpack/production.config.js'
-      copy_file 'karma.conf.js', 'karma.conf.js'
-      copy_file 'webpack/tests.config.js', 'webpack/tests.config.js'
-      copy_file 'partial/_react_hot_assets.html.erb', 'app/views/layouts/_react_hot_assets.html.erb'
-      template 'react/index.js.erb', 'app/react/index.js'
-      create_file 'app/assets/javascripts/react_bundle.js'
-      if options.example
-        copy_file 'react/components/hello-world.jsx', 'app/react/components/hello-world.jsx'
-        copy_file 'react/components/hello-world-test.jsx', 'app/react/components/hello-world-test.jsx'
-      else
-        create_file 'app/react/components/.keep'
-      end
-      template 'package.json.erb', 'package.json'
-    end
-
-    private
-
-    def file_name
-      layout_name.underscore
+
+    class_option :example,
+                 type: :boolean,
+                 default: true,
+                 desc: 'Run example generator.'
+    class_option :server_side,
+                 type: :boolean,
+                 default: true,
+                 desc: 'Run server_side generator'
+    class_option :hot_reload,
+                 type: :boolean,
+                 default: true,
+                 desc: 'Run hot_reload generator'
+    class_option :karma_setup,
+                 type: :boolean,
+                 default: true,
+                 desc: 'Run karma_setup generator'
+    class_option :react_router,
+                 type: :boolean,
+                 default: false,
+                 desc: 'Run react_router generator'
+
+    def generate_core
+      generate 'react_webpack_rails:install:core --tmp-package'
+    end
+
+    def generate_hot_reload
+      return unless options.hot_reload
+      generate 'react_webpack_rails:install:hot_reload --tmp-package'
+    end
+
+    def generate_server_side
+      return unless options.server_side
+      generate 'react_webpack_rails:install:server_side --tmp-package'
+    end
+
+    def generate_karma_setup
+      return unless options.karma_setup
+      generate 'react_webpack_rails:install:karma_setup --tmp-package'
+    end
+
+    def generate_example
+      return unless options.example
+      example_generator = 'react_webpack_rails:install:example'
+      example_generator += ' --server-side' if options.server_side
+      generate example_generator
+    end
+
+    def generate_react_router
+      return unless options.react_router
+      generate 'react_webpack_rails:install:react_router --tmp_package'
+    end
+
+    def copy_package
+      create_file 'package.json', File.read(Rails.root.join('tmp/package.json'))
+    end
+
+    def cleanup
+      remove_file('tmp/package.json')
     end
   end
 end

data/lib/generators/react_webpack_rails/merge_helpers.rb

@@ -0,0 +1,26 @@
+module ReactWebpackRails
+  module Install
+    module MergeHelpers
+      require 'generators/react_webpack_rails/package_merge'
+
+      private
+
+      def load_json(file)
+        JSON.load(Rails.root.join(file))
+      end
+
+      def merge_into_package(file, options = {})
+        package_file = options.fetch(:package_file, 'package.json')
+        copy_file file, "tmp/#{file}"
+
+        extending = load_json("tmp/#{file}")
+        base = load_json(package_file)
+
+        merged = PackageMerge.new(base, extending).merge
+        create_file package_file, JSON.pretty_generate(merged), force: options.fetch(:force, false)
+
+        remove_file("tmp/#{file}")
+      end
+    end
+  end
+end

data/lib/generators/react_webpack_rails/package_merge.rb

@@ -0,0 +1,21 @@
+class PackageMerge
+  def initialize(base, extending)
+    @base_package = base
+    @extending = extending
+  end
+
+  def merge
+    %w(dependencies devDependencies scripts).each do |key|
+      base_package[key] = merge_and_sort_level(key)
+    end
+    base_package
+  end
+
+  private
+
+  attr_accessor :base_package, :extending
+
+  def merge_and_sort_level(key)
+    base_package[key].merge(extending.fetch(key, {})).sort.to_h
+  end
+end

data/lib/generators/react_webpack_rails/templates/examples/component_view.html.erb

@@ -0,0 +1 @@
+<%= react_component('HelloWorld', name: @name) %>

data/lib/generators/react_webpack_rails/templates/examples/react_examples_controller.rb

@@ -0,0 +1,5 @@
+class ReactExamplesController < ApplicationController
+  def component
+    @name = 'test'
+  end
+end

data/lib/generators/react_webpack_rails/templates/examples/ssr-component_view.html.erb

@@ -0,0 +1 @@
+<%= react_component('HelloWorld', { name: @name }, { server_side: true }) %>

data/lib/generators/react_webpack_rails/templates/forever/development.json

@@ -0,0 +1,8 @@
+{
+    "uid": "rwr-node-server",
+    "append": true,
+    "script": "node_server.js",
+    "sourceDir": "./app/react",
+    "watch": true,
+    "watchDirectory": "./app/react"
+}

data/lib/generators/react_webpack_rails/templates/forever/production.json

@@ -0,0 +1,6 @@
+{
+    "uid": "rwr-node-server",
+    "append": true,
+    "script": "node_server.js",
+    "sourceDir": "./app/react"
+}

data/lib/generators/react_webpack_rails/templates/{package.json.erb → packages/core.json}

@@ -1,20 +1,9 @@
 {
-  "name": "<%="#{Rails.application.class.parent_name}"%>",
+  "private": true,
   "devDependencies": {
     "babel-eslint": "^5.0.0-beta6",
     "eslint": "^1.7.3",
     "eslint-plugin-react": "^3.6.3",
-    "expect": "^1.12.2",
-    "karma": "^0.13.13",
-    "karma-chrome-launcher": "^0.2.1",
-    "karma-mocha": "^0.2.0",
-    "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": {
@@ -27,16 +16,12 @@
     "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"
   },
   "scripts": {
-    "test": "karma start",
     "start": "webpack -w --config webpack/dev.config.js",
-    "start-hot-dev": "webpack-dev-server --hot --inline --config webpack/hot-dev.config.js",
     "build": "webpack -p --config webpack/production.config.js"
   },
   "license": "",

data/lib/generators/react_webpack_rails/templates/packages/hot-reload.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "react-hot-loader": "^1.3.0",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "scripts": {
+    "start-hot-dev": "webpack-dev-server --hot --inline --config webpack/hot-dev.config.js"
+  }
+}

data/lib/generators/react_webpack_rails/templates/packages/js-specs.json

@@ -0,0 +1,16 @@
+{
+  "devDependencies": {
+    "expect": "^1.12.2",
+    "karma": "^0.13.13",
+    "karma-chrome-launcher": "^0.2.1",
+    "karma-mocha": "^0.2.0",
+    "karma-sinon": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.6",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.3.4",
+    "sinon": "^1.17.2"
+  },
+  "scripts": {
+    "test": "karma start"
+  }
+}

data/lib/generators/react_webpack_rails/templates/packages/react-router.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-router": "^1.0.0"
+  }
+}

data/lib/generators/react_webpack_rails/templates/packages/server-side.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "forever": "^0.15.0",
+    "http": "*",
+    "httpdispatcher": "^0.4.0"
+  },
+  "scripts": {
+    "rwr-node-dev-server": "forever forever/development.json",
+    "rwr-node-server": "forever -o log/rwr-server-out.log -e log/rwr-server-err.log forever/production.json"
+  }
+}

data/lib/generators/react_webpack_rails/templates/react/components/hello-world.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
-export default class HelloWorld extends React.Component {
+class HelloWorld extends React.Component {
   render() {
-    return <div>Hello World</div>;
+    return(
+      <div>
+        <p>Hello World {this.props.name}</p>
+      </div>
+    );
   }
 }
+
+export default HelloWorld;

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

@@ -0,0 +1,2 @@
+import RWR from 'react-webpack-rails';
+RWR.run();

data/lib/generators/react_webpack_rails/templates/react/node_server.js

@@ -0,0 +1,38 @@
+global.__RWR_ENV__ = {};
+require('babel-core/register');
+const IM = require('react-webpack-rails').integrationsManager;
+require('./index');
+
+const http = require('http');
+const dispatcher = require('httpdispatcher');
+const PORT = 8081;
+
+function handleRequest(request, response){
+  try {
+    console.log(`started: ${request.method} "${request.url}" at ${new Date().toLocaleTimeString()}`);
+    dispatcher.dispatch(request, response);
+  } catch(ex) {
+    console.log(ex)
+    response.writeHead(500);
+    response.end(ex.name + ': ' + ex.message);
+  }
+}
+
+dispatcher.onPost("/run", function(request, response) {
+  try {
+    const data = JSON.parse(request.body);
+    const result = IM.runNodeIntegration(data);
+    response.writeHead(200, {'Content-Type': 'text/plain'});
+    response.end(result);
+  } catch(ex) {
+    console.log(ex)
+    response.writeHead(500);
+    response.end("nodeRun failed:\n" + ex.name + ': ' + ex.message);
+  }
+});
+
+const server = http.createServer(handleRequest);
+
+server.listen(PORT, function(){
+  console.log("Server listening on: http://localhost:%s", PORT);
+});

data/lib/react_webpack_rails.rb

@@ -1,3 +1,9 @@
 require 'react_webpack_rails/version'
-require 'react_webpack_rails/engine' if defined?(Rails)
-require 'react_webpack_rails/railtie' if defined?(Rails)
+if defined?(Rails)
+  require 'react_webpack_rails/engine'
+  require 'react_webpack_rails/railtie'
+  require 'react_webpack_rails/node_helpers'
+  require 'react_webpack_rails/node_integration_runner'
+  require 'react_webpack_rails/errors/base'
+  require 'react_webpack_rails/errors/node_failure'
+end

data/lib/react_webpack_rails/errors/base.rb

@@ -0,0 +1,11 @@
+module Errors
+  class Base < RuntimeError
+    def status
+      fail NotImplementedError
+    end
+
+    def message
+      fail NotImplementedError
+    end
+  end
+end

data/lib/react_webpack_rails/errors/node_failure.rb

@@ -0,0 +1,13 @@
+module Errors
+  class NodeFailure < Base
+    attr_accessor :message
+
+    def initialize(message)
+      @message = message
+    end
+
+    def status
+      500
+    end
+  end
+end

data/lib/react_webpack_rails/node_helpers.rb

@@ -0,0 +1,7 @@
+module ReactWebpackRails
+  module NodeHelpers
+    def node_uri(path = '')
+      URI(Rails.application.config.rwr.node_server_host).merge(path)
+    end
+  end
+end

data/lib/react_webpack_rails/node_integration_runner.rb

@@ -0,0 +1,35 @@
+module ReactWebpackRails
+  class NodeIntegrationRunner
+    include NodeHelpers
+
+    def initialize(integration_name, payload)
+      @integration_name = integration_name
+      @payload = payload
+    end
+
+    def run
+      response = Net::HTTP.start(node_uri.host, node_uri.port) do |http|
+        http.request(request)
+      end
+      if response.code.to_i >= 500
+        fail Errors::NodeFailure, response.body
+      else
+        response.body.force_encoding('utf-8')
+      end
+    end
+
+    private
+
+    attr_reader :integration_name, :payload
+
+    def data_hash
+      { integrationName: integration_name, payload: payload }
+    end
+
+    def request
+      request = Net::HTTP::Post.new(node_uri('run'))
+      request.body = data_hash.to_json
+      request
+    end
+  end
+end

data/lib/react_webpack_rails/railtie.rb

@@ -1,14 +1,35 @@
 require 'react_webpack_rails/view_helpers'
+require 'react_webpack_rails/react_component_renderer'
 
 module ReactWebpackRails
   class Railtie < ::Rails::Railtie
+    # Sensible defaults. Can be overridden in application.rb.
+
+    # gem related config default:
+    config.rwr = ActiveSupport::OrderedOptions.new
+    config.rwr.node_server_host = 'http://localhost:8081/'
+
+    # react integration related config default:
     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.camelize_props = false
+    config.react.server_side = false
     config.react.shared = {}
 
     initializer 'react_webpack_rails.view_helpers' do
       ActionView::Base.send :include, ViewHelpers
     end
+
+    initializer 'react_webpack_rails.add_react_component_renderer' do
+      ActionController::Renderers.add :react_component do |name, options = {}|
+        renderer = ReactWebpackRails::ReactComponentRenderer.new
+        component_options = options.slice(:aria, :class, :data, :id, :tag, :server_side)
+        props = options.delete(:props)
+
+        html = renderer.call(name, props, component_options)
+        render_options = options.merge(inline: html)
+
+        render(render_options)
+      end
+    end
   end
 end

data/lib/react_webpack_rails/react_component_renderer.rb

@@ -0,0 +1,13 @@
+module ReactWebpackRails
+  class ReactComponentRenderer
+    include ReactWebpackRails::ViewHelpers
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+
+    attr_accessor :output_buffer
+
+    def call(name, props, options)
+      react_component(name, props, options)
+    end
+  end
+end

data/lib/react_webpack_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactWebpackRails
-  VERSION = '0.1.2'
+  VERSION = '0.2.0'
 end

data/lib/react_webpack_rails/view_helpers.rb

@@ -11,10 +11,17 @@ module ReactWebpackRails
       content_tag(html_tag, '', html_options, &block)
     end
 
-    def react_component(name, raw_props = {}, options = { ssr: false })
+    def react_component(name, raw_props = {}, options = {})
       props = raw_props.as_json
       props = camelize_props_key(props) if Rails.application.config.react.camelize_props
-      react_element('react-component', { props: props, name: name }, options)
+      if server_side(options.delete(:server_side))
+        result = NodeIntegrationRunner.new('react-component', props: props, name: name).run
+        react_element('react-component', { props: props, name: name }, options) do
+          result.html_safe
+        end
+      else
+        react_element('react-component', { props: props, name: name }, options)
+      end
     end
 
     def react_router(name)
@@ -30,5 +37,9 @@ module ReactWebpackRails
         h
       end
     end
+
+    def server_side(server_side)
+      server_side.nil? ? Rails.application.config.react.server_side : server_side
+    end
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-webpack-rails",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Js part of react_webpack_rails - webpack based React & Rails integration.",
   "main": "js/lib/index.js",
   "files": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_webpack_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Rafał Gawlik
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-02-03 00:00:00.000000000 Z
+date: 2016-02-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -81,6 +81,7 @@ files:
 - ".rspec"
 - ".travis.yml"
 - CHANGELOG.md
+- CONTRIBUTING.md
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -90,6 +91,8 @@ files:
 - docs/README.md
 - docs/api.md
 - docs/deployment.md
+- docs/install_generator.md
+- docs/server_side_rendering.md
 - js/.eslintrc
 - js/src/env.js
 - js/src/index.js
@@ -104,14 +107,32 @@ files:
 - js/test/integrations/react.spec.js
 - js/test/nodes.spec.js
 - lib/assets/javascripts/react_integration.js.erb
+- lib/generators/react_webpack_rails/install/core_generator.rb
+- lib/generators/react_webpack_rails/install/example_generator.rb
+- lib/generators/react_webpack_rails/install/hot_reload_generator.rb
+- lib/generators/react_webpack_rails/install/karma_setup_generator.rb
+- lib/generators/react_webpack_rails/install/react_router_generator.rb
+- lib/generators/react_webpack_rails/install/server_side_generator.rb
 - lib/generators/react_webpack_rails/install_generator.rb
+- lib/generators/react_webpack_rails/merge_helpers.rb
+- lib/generators/react_webpack_rails/package_merge.rb
 - lib/generators/react_webpack_rails/templates/.babelrc
+- lib/generators/react_webpack_rails/templates/examples/component_view.html.erb
+- lib/generators/react_webpack_rails/templates/examples/react_examples_controller.rb
+- lib/generators/react_webpack_rails/templates/examples/ssr-component_view.html.erb
+- lib/generators/react_webpack_rails/templates/forever/development.json
+- lib/generators/react_webpack_rails/templates/forever/production.json
 - lib/generators/react_webpack_rails/templates/karma.conf.js
-- lib/generators/react_webpack_rails/templates/package.json.erb
+- lib/generators/react_webpack_rails/templates/packages/core.json
+- lib/generators/react_webpack_rails/templates/packages/hot-reload.json
+- lib/generators/react_webpack_rails/templates/packages/js-specs.json
+- lib/generators/react_webpack_rails/templates/packages/react-router.json
+- lib/generators/react_webpack_rails/templates/packages/server-side.json
 - lib/generators/react_webpack_rails/templates/partial/_react_hot_assets.html.erb
 - lib/generators/react_webpack_rails/templates/react/components/hello-world-test.jsx
 - lib/generators/react_webpack_rails/templates/react/components/hello-world.jsx
-- lib/generators/react_webpack_rails/templates/react/index.js.erb
+- lib/generators/react_webpack_rails/templates/react/index.js
+- lib/generators/react_webpack_rails/templates/react/node_server.js
 - lib/generators/react_webpack_rails/templates/webpack.config.js
 - lib/generators/react_webpack_rails/templates/webpack/dev.config.js
 - lib/generators/react_webpack_rails/templates/webpack/hot-dev.config.js
@@ -119,7 +140,12 @@ files:
 - lib/generators/react_webpack_rails/templates/webpack/tests.config.js
 - lib/react_webpack_rails.rb
 - lib/react_webpack_rails/engine.rb
+- lib/react_webpack_rails/errors/base.rb
+- lib/react_webpack_rails/errors/node_failure.rb
+- lib/react_webpack_rails/node_helpers.rb
+- lib/react_webpack_rails/node_integration_runner.rb
 - lib/react_webpack_rails/railtie.rb
+- lib/react_webpack_rails/react_component_renderer.rb
 - lib/react_webpack_rails/version.rb
 - lib/react_webpack_rails/view_helpers.rb
 - package.json

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

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