react_on_rails 0.1.8 → 1.0.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bc9e4d7fb4efbba5c82f8c056cdc4a25dfd66752
-  data.tar.gz: 4a06b66bf0a5d1b7e88e3bc78d573aafab298994
+  metadata.gz: b275f388735a62982a5056840c44bf0779da6636
+  data.tar.gz: 27d0bfbe15a24476c55c9ba6fa8973213e875f1a
 SHA512:
-  metadata.gz: 4deb110a525ad5bfd570a55ccdedf03807b1cd743126b479773d8d5431e9f4ce5e23204efa881af86b2fc38175c4e27164f98ff79c7489ca0c18b0cb3bf8b943
-  data.tar.gz: 75de61e4804311370c9c86370b079a0456a74e0d638416bf7a65c1333d09a15d745513f090441725ae74d249b15b8b803b5c7692a96d7887729c1ad06b86c789
+  metadata.gz: 168fd64398f5d3e015401652ce81e60fca5a083500cee3bf4645898476fdbc7161f912fe59362e73f633f889f3976de8ff332809a375e9260526b568dd7f4b94
+  data.tar.gz: bccaeff6f9225a65e246c9eeef5a48d97dcb1e8d96acba82afcd8719690eb095d4d1f8a1a577cf896b4ef540150519adc2fe895e8c0cf71e07f95046b846c795

data/.gitignore

@@ -11,8 +11,11 @@
 
 /spec/dummy/client/node_modules
 /spec/dummy/app/assets/javascripts/generated/
+/spec/dummy-react-013/client/node_modules
+/spec/dummy-react-013/app/assets/javascripts/generated/
 
 # RVM
 .ruby-version
 .ruby-gemset
 
+node_modules

data/.jscsrc

@@ -1,5 +1,7 @@
 {
   "preset": "airbnb",
   "fileExtensions": [".js", ".jsx"],
-  "excludeFiles": ["build/**", "node_modules/**"]
+  "excludeFiles": ["**/build/**", "**/node_modules/**", "**/generated/**", "**/docs/**", "**/tmp/**", "**/sample_generated/**"],
+  "requireTrailingComma": { ignoreSingleValue: true, ignoreSingleLine: true },
+  "validateQuoteMarks": false
 }

data/.rubocop.yml

@@ -37,13 +37,17 @@ Lint/HandleExceptions:
 
 # Offense count: 1
 Metrics/AbcSize:
-  Max: 18
+  Max: 23
 
 # Offense count: 1
 # Configuration parameters: CountComments.
 Metrics/ClassLength:
   Max: 114
 
+Metrics/ParameterLists:
+  Max: 5
+  CountKeywordArgs: false
+
 # Offense count: 9
 # Configuration parameters: CountComments.
 Metrics/MethodLength:
@@ -52,11 +56,12 @@ Metrics/MethodLength:
 # Offense count: 1
 # Configuration parameters: CountComments.
 Metrics/ModuleLength:
-  Max: 119
+  Max: 110
 
 # Offense count: 3
 # Configuration parameters: AllowedVariables.
 Style/GlobalVars:
   Exclude:
     - 'spec/dummy/config/environments/development.rb'
+    - 'spec/dummy-react-013/config/environments/development.rb'
 

data/.travis.yml

@@ -1,12 +1,34 @@
 language: ruby
 rvm:
 - 2.2.2
+
 gemfile:
 - spec/dummy/Gemfile
-install: bundle install
+
+env:
+ - export RAILS_ENV=test
+
+install:
+- rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 4.2.0
+- npm install -g npm
+- bundle install
+- cd spec/dummy/client && npm install
+- $(npm bin)/webpack --config webpack.server.js
+- $(npm bin)/webpack --config webpack.client.js
+- cd ../../dummy-react-013/client && npm install
+- $(npm bin)/webpack --config webpack.server.js
+- $(npm bin)/webpack --config webpack.client.js
+
+before_script:
+- cd ../../
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
+
 script:
 - rake run_rspec:gem
-- rake run_rspec:dummy
+- DRIVER=selenium_firefox rake run_rspec:dummy
+- DRIVER=selenium_firefox rake run_rspec:dummy_react_013
+
 notifications:
   slack:
     secure: LfcUk4AJ4vAxWwRIyw4tFh8QNbYefMwfG/oLfsN3CdRMWMOtCOHR1GGsRhAOlfVVJ/FvHqVqWj5gK7z7CaO5Uvl7rD3/zJ8QzExKx/iH9yWj55iIPuKLzwFNnBwRpFW/cqyU2lFPPRxGD50BUn3c+qybkuSqtKZ6qtTowwqlxLa5iyM3N95aZp7MEIKCP7cPcnHfLbJyP8wBpotp/rtw62eXM2HIRJJwgjcp+n+My7VFR9DnBXNFf6R91aZHM4U4cHHDbu15HFtH8honVrzK1JQdyqMNHga+j04dFuaS7z9Q369/hsELMOBp/227+Pz7ZRfWZFK4UASguOvyeX7RmGTRpTuWLm1XJeUzfsPZVROecaSVQBve+U7F12yKqilt97QlvRXn2EGyBILqvxtFNNR4S9kgAf72/6EFgiM1TKq7i9zy6lVOnagU2+7amq7UeopX1uoFsUfNKMR7YbgV1WjF0IK95UP0b0/7ZOJlPYgi5zzkQi129qAFWSMmxGk+ZpsttHh/tjJtvAh0A3mHq/zb5w4ub/MbSyZqeDUNgGj72QArOWUFSAStQT1ybsVLeDoKPgOvVq7OV1D64rpcHjBXcqOCit8tDZ+TqkFhcYJo2cITSaqE4zJXn+4F5s7So5O8CyfKYQq+kFJCooYGmfgTUckJpGl7eIvKmL4TN9Q=

data/README.md

@@ -5,56 +5,129 @@
 
 Gem Published: https://rubygems.org/gems/react_on_rails
 
-See [Action Plan for v1.0](https://github.com/shakacode/react_on_rails/issues/1)
+Live example, including server rendering + redux: http://www.reactrails.com/
+Sponsored by [ShakaCode.com](http://www.shakacode.com/)
 
-Feedback and pull-requests encouraged! Thanks in advance!
+See [Action Plan for v1.0](https://github.com/shakacode/react_on_rails/issues/1). We're ready v1.0.
+
+Feedback and pull-requests encouraged! Thanks in advance! We've got a private slack channel to discuss react + webpack + rails. [Email us for an invite contact@shakacode.com](mailto: contact@shakacode.com).
 
 Supports:
 
 1. Rails
 2. Webpack
-3. React
+3. React, both v0.14 and v0.13.
 4. Redux
 5. Turbolinks
 6. Server side rendering with fragment caching
-7. react-router for client side rendering (and maybe server side eventually)
+7. react-router for client side rendering (and server side very soon)
 
 ## OPEN ISSUES
-1. We've got many open issues. However, none of these should stop you from using this gem if you're using React + Webpack with Rails, especially if you are client rendering.
-2. Almost all the open issues are nice to haves like more tests, or some things that would be nice to have for server rendering.
-3. If you want to work on any of the open issues, please comment on the issue. My team is mentoring anybody that's trying to help with the issues. We've got a private slack room for discussing React + Webpack with Rails.
-4. Longer term, we hope to put in many conveniences into this gem, in terms of Webpack + Rails integration.
+1. Almost all the open issues are nice to haves like more tests.
+2. If you want to work on any of the open issues, please comment on the issue. My team is mentoring anybody that's trying to help with the issues.
+3. Longer term, we hope to put in many conveniences into this gem, in terms of Webpack + Rails integration. We're open to suggestions.
 
 ## Links
-1. https://github.com/justin808/react-webpack-rails-tutorial/ See https://github.com/shakacode/react-webpack-rails-tutorial/pull/84 for how we integrated it!
+1. See https://github.com/shakacode/react-webpack-rails-tutorial/ for how to integrate it!
 2. http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/
-3. http://forum.railsonmaui.com
-4. Interested in consulting for implementing React with Rails, [email us! contact@shakacode.com](mailto: contact@shakacode.com).
-5. If this project is interesting to you, [email us! contact@shakacode.com](mailto: contact@shakacode.com). We're looking for great
-developers that want to work with Rails + React with a distributed, worldwide team, for our own
-products, client work, and open source.
+3. http://forum.shakacode.com
+4. If you're looking for consulting on a project using React and Rails, [email us! contact@shakacode.com](mailto: contact@shakacode.com)? You can first join our slack room for some free advice.
+5. We're looking for great developers that want to work with Rails + React with a distributed, worldwide team, for our own
+products, client work, and open source. [More info here](http://www.shakacode.com/about/index.html#work-with-us).
 
 ## How is different than the [react-rails gem](https://github.com/reactjs/react-rails)?
 1. `react_on_rails` depends on [webpack](http://webpack.github.io/). `react-rails` integrates closely with sprockets and
     helps you integrate JSX and the react code into a Rails project.
-2. Likewise, using Webpack as show in the [react-webpack-rails-tutorial](https://github.com/justin808/react-webpack-rails-tutorial/)
+2. Likewise, using Webpack as shown in the [react-webpack-rails-tutorial](https://github.com/justin808/react-webpack-rails-tutorial/)
    does involve some extra setup. However, we feel that tight and simple integration with the node ecosystem is more than
    worth any minor setup costs.
 3. `react-rails` depends on `jquery-ujs` for client side rendering. `react_on_rails` has it's own JS code that does not
    depend on jquery.
 
-## Application Installation
+## Installation Checklist
+1. Include the gems `react_on_rails` and `therubyracer` like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/361f4338ebb39a5d3934b00cb6d6fcf494773000/Gemfile#L42) and run `bundle`. Note, you can sustitute your preferable JavaScript engine.
+  
+  ```ruby
+  gem "react_on_rails"
+  gem "therubyracer"
+  ```
+1. Globally expose React in your webpack config like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.base.config.js#L31):
+  
+  ```javascript
+    module: {
+      loaders: [
+        // React is necessary for the client rendering:
+        {test: require.resolve('react'), loader: 'expose?React'},
+    ```
+1. Require `react_on_rails` in your `application.js` like  [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/361f4338ebb39a5d3934b00cb6d6fcf494773000/app/assets/javascripts/application.js#L15). It possibly should come after you require `turbolinks`:
+  
+  ```
+  //= require react_on_rails
+  ```
+1. Expose your client globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/clientGlobals.jsx#L3):
+  
+   ```javascript
+   import App from './ClientApp';
+   window.App = App;
+   ```
+1. Put your client globals file as webpack entry points like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.rails.config.js#L22). Similar pattern for server rendering.
+  
+  ```javascript
+  config.entry.app.push('./app/startup/clientGlobals');
+  ```
+1. See customization of configuration options below.  
 
-Add these lines to your application's Gemfile, sustituting your preferable JavaScript engine.
+### Additional Steps For Server Rendering (option `prerender` shown below)
+See the next section for a sample webpack.server.rails.config.js.
+1. Expose your server globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/serverGlobals.jsx#L7)
+   
+   ```javascript
+   import App from './ServerApp';
+   global.App = App;
+   ```
+2. Make the server globals file an entry point in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L7)
 
-```ruby
-gem "react_on_rails"
-gem "therubyracer"
-```
+   ```javascript
+   entry: ['./app/startup/serverGlobals'],
+   ```
+3. Ensure the name of your ouput file (shown [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L9)) of your server bundle corresponds to the configuration of the gem. The default path is `app/assets/javascripts/generated`. See below for customization of configuration variables.
+4. Expose `React` in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.config.js#L23)
 
-And then execute:
+#### Sample webpack.server.rails.config.js (ONLY for server rendering)
+Be sure to check out the latest example version of [client/webpack.server.rails.config.js](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.config.js).
 
-    $ bundle
+```javascript
+  // Common webpack configuration for server bundle
+
+module.exports = {
+
+  // the project dir
+  context: __dirname,
+  entry: ['./app/startup/serverGlobals'],
+  output: {
+    filename: 'server-bundle.js',
+    path: '../app/assets/javascripts/generated',
+
+    // CRITICAL to set libraryTarget: 'this' for enabling Rails to find the exposed modules IF you
+    //   use the "expose" webpackfunctionality. See startup/serverGlobals.jsx.
+    // NOTE: This is NOT necessary if you use the syntax of global.MyComponent = MyComponent syntax.
+    // See http://webpack.github.io/docs/configuration.html#externals for documentation of this option
+    //libraryTarget: 'this',
+  },
+  resolve: {
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', 'config.js'],
+  },
+  module: {
+    loaders: [
+      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
+
+      // React is necessary for the client rendering:
+      { test: require.resolve('react'), loader: 'expose?React' },
+      { test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' },
+    ],
+  },
+};
+```
 
 ## What Happens?
 
@@ -100,8 +173,12 @@ Params are:
   If you're curious as to what the gem generates for the server and client rendering, see [`spec/dummy/client/app/startup/serverGlobals.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/server-generated.js)
   and [`spec/dummy/client/app/startup/ClientReduxApp.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/client-generated.js) for examples of this. Note, this is not the code that you are providing. You can see the client code by viewing the page source.
   
-* **props**: [hash] Properties to pass to the react object
+* **props**: [hash | string of json] Properties to pass to the react object. See this example if you're using Jbuilder: [react-webpack-rails-tutorial view rendering props using jBuilder](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app/views/pages/index.html.erb#L20)
 
+```erb
+<%= react_component('App', render(template: "/comments/index.json.jbuilder"),
+    generator_function: true, prerender: true) %>
+```
 * **options:** [hash]
   * **generator_function**: <true/false> default is false, set to true if you want to use a generator function rather than a React Component.
   * **prerender**: <true/false> set to false when debugging!
@@ -238,81 +315,24 @@ gem "therubyracer"
 * [Charlie Marsh's article "Rendering React Components on the Server"](http://www.crmarsh.com/react-ssr/)
 * [Node globals](https://nodejs.org/api/globals.html#globals_global)
 
-
-## Development Setup for Gem Contributors
-
-### Initial Setup
-After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), 
-cd to `spec/dummy` and run `bin/setup` to install dependencies.  
-You can also run `bin/console` for an interactive prompt that will allow you to experiment. 
-
-### Starting the Dummy App
-To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. 
-If you don't do this, then `webpack` will not generate a new bundle, 
-and you will be seriously confused when you change JavaScript and the app does not change. 
-
-### Install and Release
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, 
-update the version number in `version.rb`, and then run `bundle exec rake release`, 
-which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
-
-### RSpec Testing
-Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within `spec/dummy`.
-
-If you run `rspec` at the top level, you'll see this message: `require': cannot load such file -- rails_helper (LoadError)`
-
-### Debugging
-Start the sample app like this for some debug printing:
-```bash
-TRACE_REACT_ON_RAILS=true && foreman start
-```
-
 ### Generated JavaScript
 
 1. See spec/dummy/spec/sample_generated_js/server-generated.js to see the JavaScript for typical server rendering.
 2. See spec/dummy/spec/sample_generated_js/client-generated.js to see the JavaScript for typical client rendering.
 
-### Linting
-All linting is performed from the docker container. You will need docker and docker-compose installed
-locally to lint code changes via the lint container. 
-
-* [Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
-* [Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
-
-Once you have docker and docker-compose running locally, run `docker-compose build lint`. This will build
-the `reactonrails_lint` docker image and docker-compose `lint` container. The inital build is slow,
-but after the install, startup is very quick.
-
-### Linting Commands
-Run `rake -D docker` to see all docker linting commands for rake. `rake docker` will run all linters.
-For individual rake linting commands please refer to `rake -D docker` for the list.
-You can run specfic linting for directories or files by using `docker-compose run lint rubocop (file path or directory)`, etc.
-`docker-compose run lint /bin/bash` sets you up to run from the container command line. 
-
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/shakacode/react_on_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](contributor-covenant.org) code of conduct.
 
+More [tips on contributing here](docs/Contributing.md)
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
 
-## Updating New Versions of the Gem
-
-See https://github.com/svenfuchs/gem-release
-
-```bash
-gem bump
-cd spec/dummy
-bundle
-git commit -am "Updated Gemfile.lock"
-cd ../..
-gem tag
-gem release
-```
-
 # Authors
-The Shaka Code team!
+
+[The Shaka Code team!](http://www.shakacode.com/about/)
 
 1. [Justin Gordon](https://github.com/justin808/)
 2. [Samnang Chhun](https://github.com/samnang)

data/Rakefile

@@ -3,7 +3,7 @@ require "fileutils"
 namespace :run_rspec do
   desc "Run RSpec for top level only"
   task :gem do
-    sh %( rspec --exclude-pattern "spec/dummy/**/*_spec.rb" spec )
+    sh %( rspec spec/react_on_rails_spec.rb )
   end
 
   desc "Run RSpec for spec/dummy only"
@@ -11,7 +11,12 @@ namespace :run_rspec do
     sh %( cd spec/dummy && rspec )
   end
 
-  task run_rspec: [:gem, :dummy] do
+  desc "Run RSpec for spec/dummy only"
+  task :dummy_react_013 do
+    sh %( cd spec/dummy-react-013 && rspec )
+  end
+
+  task run_rspec: [:gem, :dummy, :dummy_react_013] do
     puts "Completed all RSpec tests"
   end
 end
@@ -43,13 +48,15 @@ namespace :lint do
 
   desc "Run jscs from shell"
   task :jscs do
-    sh "jscs -e ."
+    sh "jscs -e -v ."
   end
 
-  task lint: [:eslint, :rubocop, :ruby, :jscs, :scss] do
+  desc "Run all eslint, jscs, rubocop linters. Skip ruby-lint and scss"
+  task lint: [:eslint, :jscs, :rubocop] do
     puts "Completed all linting"
   end
 end
+
 desc "Runs all linters. Run `rake -D lint` to see all available lint options"
 task lint: ["lint:lint"]
 
@@ -86,3 +93,6 @@ end
 
 desc "Runs all linters from docker. Run `rake -D docker` to see all available lint options"
 task docker: ["docker:lint"]
+
+desc "Run all tests and linting"
+task ci: %w(docker run_rspec)

data/app/assets/javascripts/react_on_rails.js

@@ -18,36 +18,42 @@
         if (domNode) {
           var reactElement = createReactElement(componentName, propsVarName, props,
             domId, trace, generatorFunction);
-          React.render(reactElement, domNode);
+          provideClientReact().render(reactElement, domNode);
         }
       }
       catch (e) {
-        handleError(e, componentName);
+        ReactOnRails.handleError({
+          e: e,
+          componentName: componentName,
+          serverSide: false,
+        });
       }
     };
 
-    var turbolinksInstalled = typeof(Turbolinks) !== 'undefined';
+    var turbolinksInstalled = (typeof Turbolinks !== 'undefined');
     if (!expectTurboLinks || (!turbolinksInstalled && expectTurboLinks)) {
       if (expectTurboLinks) {
-        console.warn("WARNING: NO TurboLinks detected in JS, but it's in your Gemfile");
+        console.warn('WARNING: NO TurboLinks detected in JS, but it is in your Gemfile');
       }
-      document.addEventListener("DOMContentLoaded", function(event) {
+
+      document.addEventListener('DOMContentLoaded', function(event) {
         renderIfDomNodePresent();
       });
     } else {
       function onPageChange(event) {
         var removePageChangeListener = function() {
-          document.removeEventListener("page:change", onPageChange);
-          document.removeEventListener("page:before-unload", removePageChangeListener);
+          document.removeEventListener('page:change', onPageChange);
+          document.removeEventListener('page:before-unload', removePageChangeListener);
           var domNode = document.getElementById(domId);
-          React.unmountComponentAtNode(domNode);
+          provideClientReact().unmountComponentAtNode(domNode);
         };
-        document.addEventListener("page:before-unload", removePageChangeListener);
+
+        document.addEventListener('page:before-unload', removePageChangeListener);
 
         renderIfDomNodePresent();
       }
 
-      document.addEventListener("page:change", onPageChange);
+      document.addEventListener('page:change', onPageChange);
     }
   };
 
@@ -65,31 +71,27 @@
     try {
       var reactElement = createReactElement(componentName, propsVarName, props,
         domId, trace, generatorFunction);
-      htmlResult = React.renderToString(reactElement);
+      htmlResult = provideServerReact().renderToString(reactElement);
     }
     catch (e) {
-      htmlResult = handleError(e, componentName);
+      htmlResult = ReactOnRails.handleError({
+        e: e,
+        componentName: componentName,
+        serverSide: true,
+      });
     }
 
     consoleReplay = ReactOnRails.buildConsoleReplay();
     return JSON.stringify([htmlResult, consoleReplay]);
   };
 
-  function createReactElement(componentName, propsVarName, props, domId, trace, generatorFunction) {
-    if (trace) {
-      console.log('RENDERED ' + componentName + ' with data_variable ' +
-        propsVarName + ' to dom node with id: ' + domId);
-    }
-
-    if (generatorFunction) {
-      return this[componentName](props);
-    } else {
-      return React.createElement(this[componentName], props);
-    }
-  }
-
   // Passing either componentName or jsCode
-  function handleError(e, componentName, jsCode) {
+  ReactOnRails.handleError = function(options) {
+    var e = options.e;
+    var componentName = options.componentName;
+    var jsCode = options.jsCode;
+    var serverSide = options.serverSide;
+
     var lineOne =
       'ERROR: You specified the option generator_function (could be in your defaults) to be\n';
     var lastLine =
@@ -125,15 +127,17 @@
     if (e.fileName) {
       console.error('location: ' + e.fileName + ':' + e.lineNumber);
     }
+
     console.error('message: ' + e.message);
     console.error('stack: ' + e.stack);
-    msg += 'Exception in rendering!\n' +
-      (e.fileName ? '\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
-      '\nMessage: ' + e.message + '\n\n' + e.stack;
-
-    var reactElement = React.createElement('pre', null, msg);
-    return React.renderToString(reactElement);
-  }
+    if (serverSide) {
+      msg += 'Exception in rendering!\n' +
+        (e.fileName ? '\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
+        '\nMessage: ' + e.message + '\n\n' + e.stack;
+      var reactElement = React.createElement('pre', null, msg);
+      return provideServerReact().renderToString(reactElement);
+    }
+  };
 
   ReactOnRails.buildConsoleReplay = function() {
     var consoleReplay = '';
@@ -145,9 +149,39 @@
         consoleReplay += '\nconsole.' + msg.level + '.apply(console, ' +
           JSON.stringify(msg.arguments) + ');';
       });
+
       consoleReplay += '\n</script>';
     }
 
     return consoleReplay;
+  };
+
+  function createReactElement(componentName, propsVarName, props, domId, trace, generatorFunction) {
+    if (trace) {
+      console.log('RENDERED ' + componentName + ' with data_variable ' +
+        propsVarName + ' to dom node with id: ' + domId);
+    }
+
+    if (generatorFunction) {
+      return this[componentName](props);
+    } else {
+      return React.createElement(this[componentName], props);
+    }
+  }
+
+  function provideClientReact() {
+    if (typeof ReactDOM === 'undefined') {
+      return React;
+    }
+
+    return ReactDOM;
+  }
+
+  function provideServerReact() {
+    if (typeof ReactDOMServer === 'undefined') {
+      return React;
+    }
+
+    return ReactDOMServer;
   }
 }.call(this));

data/app/helpers/react_on_rails_helper.rb

@@ -53,7 +53,7 @@ module ReactOnRailsHelper
     data_variable_name = "__#{component_name.camelize(:lower)}Data#{react_component_index}__"
     turbolinks_loaded = Object.const_defined?(:Turbolinks)
     # NOTE: props might include closing script tag that might cause XSS
-    props_string = props.is_a?(String) ? props : props.to_json
+    props_string = sanitized_props_string(props)
     page_loaded_js = <<-JS
 (function() {
   window.#{data_variable_name} = #{props_string};
@@ -89,10 +89,14 @@ module ReactOnRailsHelper
     <<-HTML.html_safe
 #{data_from_server_script_tag}
 #{rendered_output}
-#{replay_console(options) ? console_script : ""}
+#{replay_console(options) ? console_script : ''}
     HTML
   end
 
+  def sanitized_props_string(props)
+    props.is_a?(String) ? json_escape(props) : props.to_json
+  end
+
   # Helper method to take javascript expression and returns the output from evaluating it.
   # If you have more than one line that needs to be executed, wrap it in an IIFE.
   # JS exceptions are caught and console messages are handled properly.
@@ -108,7 +112,8 @@ module ReactOnRailsHelper
         return #{js_expression};
       })();
   } catch(e) {
-    htmlResult = handleError(e, null, '#{escape_javascript(js_expression)}');
+    htmlResult = ReactOnRails.handleError({e: e, componentName: null,
+      jsCode: '#{escape_javascript(js_expression)}', serverSide: true});
   }
 
   consoleReplay = ReactOnRails.buildConsoleReplay();
@@ -117,7 +122,12 @@ module ReactOnRailsHelper
     JS
 
     result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
-    "#{result[0]}\n#{result[1]}".html_safe
+
+    # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
+    <<-HTML.html_safe
+    #{result[0]}
+    #{replay_console(options) ? result[1] : ''}
+    HTML
   end
 
   private

data/docs/Contributing.md

@@ -0,0 +1,66 @@
+# Tips for Contributors
+
+## Development Setup for Gem Contributors
+
+### Checklist before Committing
+1. `rake ci`: runs all linters and specs (you need Docker setup, see below)
+2. Did you need any more tests for your change?
+3. Did you document your change? Update the README.md?
+
+### Initial Setup
+After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), 
+cd to `spec/dummy` and run `bin/setup` to install dependencies.  
+You can also run `bin/console` for an interactive prompt that will allow you to experiment. 
+
+### Starting the Dummy App
+To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. 
+If you don't do this, then `webpack` will not generate a new bundle, 
+and you will be seriously confused when you change JavaScript and the app does not change. 
+
+### Install and Release
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, 
+update the version number in `version.rb`, and then run `bundle exec rake release`, 
+which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+### RSpec Testing
+Run `rake` for testing the gem and `spec/dummy` and `spec/dummy-react-013`. Otherwise, the `rspec` command only works for testing within the sample apps, like `spec/dummy`.
+
+If you run `rspec` at the top level, you'll see this message: `require': cannot load such file -- rails_helper (LoadError)`
+
+### Debugging
+Start the sample app like this for some debug printing:
+```bash
+TRACE_REACT_ON_RAILS=true && foreman start
+```
+
+
+## Updating New Versions of the Gem
+
+See https://github.com/svenfuchs/gem-release
+
+```bash
+gem bump
+cd spec/dummy
+bundle
+git commit -am "Updated Gemfile.lock"
+cd ../..
+gem tag
+gem release
+```
+
+### Linting
+All linting is performed from the docker container. You will need docker and docker-compose installed
+locally to lint code changes via the lint container. 
+
+* [Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
+* [Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
+
+Once you have docker and docker-compose running locally, run `docker-compose build lint`. This will build
+the `reactonrails_lint` docker image and docker-compose `lint` container. The inital build is slow,
+but after the install, startup is very quick.
+
+### Linting Commands
+Run `rake -D docker` to see all docker linting commands for rake. `rake docker` will run all linters.
+For individual rake linting commands please refer to `rake -D docker` for the list.
+You can run specfic linting for directories or files by using `docker-compose run lint rubocop (file path or directory)`, etc.
+`docker-compose run lint /bin/bash` sets you up to run from the container command line. 

data/docs/README.md

@@ -0,0 +1 @@
+## PENDING: ADD DOCS HERE

data/docs/sample_generated_js/client-generated.js

@@ -0,0 +1,12 @@
+(function() {
+  window.__helloWorldData0__ = {"helloWorldData":{"name":"Mr. Server Side Rendering"}};
+  ReactOnRails.clientRenderReactComponent({
+    componentName: 'HelloWorld',
+    domId: 'HelloWorld-react-component-0',
+    propsVarName: '__helloWorldData0__',
+    props: window.__helloWorldData0__,
+    trace: true,
+    generatorFunction: false,
+    expectTurboLinks: true
+  });
+})();

data/docs/sample_generated_js/server-generated.js

@@ -0,0 +1,11 @@
+(function() {
+  var props = {"helloWorldData":{"name":"Mr. Server Side Rendering"}};
+  return ReactOnRails.serverRenderReactComponent({
+    componentName: 'HelloWorld',
+    domId: 'HelloWorld-react-component-0',
+    propsVarName: '__helloWorldData0__',
+    props: props,
+    trace: true,
+    generatorFunction: false
+  });
+})();

data/lib/react_on_rails/server_rendering_pool.rb

@@ -1,62 +1,20 @@
-require 'connection_pool'
+require "connection_pool"
 
-# Based on the react-rails gem
+# Based on the react-rails gem.
+# None of these methods should be called directly.
+# See app/helpers/react_on_rails_helper.rb
 module ReactOnRails
   class ServerRenderingPool
     def self.reset_pool
       options = { size: ReactOnRails.configuration.server_renderer_pool_size,
                   timeout: ReactOnRails.configuration.server_renderer_pool_size }
-      @@js_context_pool = ConnectionPool.new(options) { create_js_context }
+      @js_context_pool = ConnectionPool.new(options) { create_js_context }
     end
 
-    def self.eval_js(js_code)
-      @@js_context_pool.with do |js_context|
-        result = js_context.eval(js_code)
-        js_context.eval(CLEAR_CONSOLE)
-        result
-      end
-    end
-
-    def self.create_js_context
-      server_js_file = ReactOnRails.configuration.server_bundle_js_file
-      if server_js_file.present? && File.exist?(server_js_file)
-        bundle_js_code = File.read(server_js_file)
-        base_js_code = <<-JS
-#{CONSOLE_POLYFILL}
-#{bundle_js_code};
-#{::Rails.application.assets['react_on_rails.js'].to_s};
-        JS
-        ExecJS.compile(base_js_code)
-      else
-        if server_js_file.present?
-          Rails.logger.warn("You specified server rendering JS file: #{server_js_file}, but it cannot be read.")
-        end
-        ExecJS.compile("")
-      end
-    end
-
-    CLEAR_CONSOLE = <<-JS
-      console.history = []
-    JS
-
-    # Reimplement console methods for replaying on the client
-    CONSOLE_POLYFILL = <<-JS
-var console = { history: [] };
-['error', 'log', 'info', 'warn'].forEach(function (level) {
-  console[level] = function () {
-    var argArray = Array.prototype.slice.call(arguments);
-    if (argArray.length > 0) {
-      argArray[0] = '[SERVER] ' + argArray[0];
-    }
-    console.history.push({level: level, arguments: argArray});
-  };
-});
-    JS
-
     class PrerenderError < RuntimeError
       def initialize(component_name, props, js_message)
         message = ["Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}",
-                    js_message.backtrace.join("\n")].join("\n")
+                   js_message.backtrace.join("\n")].join("\n")
         super(message)
       end
     end
@@ -69,13 +27,7 @@ var console = { history: [] };
     # js_code MUST RETURN json stringify array of two elements
     # Calling code will probably call 'html_safe' on return value before rendering to the view.
     def self.server_render_js_with_console_logging(js_code)
-      if ENV["TRACE_REACT_ON_RAILS"].present? # Set to anything to print generated code.
-        puts "Z" * 80
-        puts "react_renderer.rb: 92"
-        puts "wrote file tmp/server-generated.js"
-        File.write("tmp/server-generated.js", js_code)
-        puts "Z" * 80
-      end
+      trace_messsage(js_code)
 
       json_string = eval_js(js_code)
       # element 0 is the html, element 1 is the script tag for the server console output
@@ -89,13 +41,67 @@ var console = { history: [] };
         if console_script_lines
           console_script_lines.each do |line|
             match = re.match(line)
-            if match
-              Rails.logger.info { "[react_on_rails] #{match[:msg]}" }
-            end
+            Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
           end
         end
       end
       result
     end
+
+    class << self
+      private
+
+      def trace_messsage(js_code)
+        return unless ENV["TRACE_REACT_ON_RAILS"].present?
+        # Set to anything to print generated code.
+        puts "Z" * 80
+        puts "react_renderer.rb: 92"
+        puts "wrote file tmp/server-generated.js"
+        File.write("tmp/server-generated.js", js_code)
+        puts "Z" * 80
+      end
+
+      def eval_js(js_code)
+        @js_context_pool.with do |js_context|
+          result = js_context.eval(js_code)
+          js_context.eval("console.history = []")
+          result
+        end
+      end
+
+      def create_js_context
+        server_js_file = ReactOnRails.configuration.server_bundle_js_file
+        if server_js_file.present? && File.exist?(server_js_file)
+          bundle_js_code = File.read(server_js_file)
+          base_js_code = <<-JS
+#{console_polyfill}
+          #{bundle_js_code};
+#{::Rails.application.assets['react_on_rails.js']};
+          JS
+          ExecJS.compile(base_js_code)
+        else
+          if server_js_file.present?
+            Rails.logger.warn("You specified server rendering JS file: #{server_js_file}, but it cannot be read.")
+          end
+          ExecJS.compile("")
+        end
+      end
+
+      # Reimplement console methods for replaying on the client
+      def console_polyfill
+        <<-JS
+var console = { history: [] };
+['error', 'log', 'info', 'warn'].forEach(function (level) {
+  console[level] = function () {
+    var argArray = Array.prototype.slice.call(arguments);
+    if (argArray.length > 0) {
+      argArray[0] = '[SERVER] ' + argArray[0];
+    }
+    console.history.push({level: level, arguments: argArray});
+  };
+});
+        JS
+      end
+    end
   end
 end

data/lib/react_on_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactOnRails
-  VERSION = "0.1.8"
+  VERSION = "1.0.0.pre"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 1.0.0.pre
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-29 00:00:00.000000000 Z
+date: 2015-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -148,6 +148,10 @@ files:
 - app/assets/javascripts/react_on_rails.js
 - app/helpers/react_on_rails_helper.rb
 - docker-compose.yml
+- docs/Contributing.md
+- docs/README.md
+- docs/sample_generated_js/client-generated.js
+- docs/sample_generated_js/server-generated.js
 - lib/react_on_rails.rb
 - lib/react_on_rails/configuration.rb
 - lib/react_on_rails/server_rendering_pool.rb
@@ -169,9 +173,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.4.8