react_on_rails 1.0.3 → 1.1.0

data/docs/additional_reading/{generated_client_code.md → react-and-redux.md}

@@ -1,4 +1,5 @@
-# React Syntax
+# Communication between React Components and Redux Reducers
+
 ## Communication Between Components
 See https://facebook.github.io/react/tips/communicate-between-components.html
 

data/docs/additional_reading/react_router.md

@@ -0,0 +1,35 @@
+# Using React Router
+React on Rails supports the use of React Router. Client-side code doesn't need any special configuration for the React on Rails gem. Implement React Router how you normally would. 
+
+However, when attempting to use server-rendering, it is necessary to take steps that prevent rendering when there is a router error or redirect. In these cases, the client code should return an object containing the `error` and a `redirectLocation` instead of the React component. The `react_component` helper method in your Rails view will automatically detect that there was an error/redirect and handle it accordingly.
+
+```js
+const RouterApp = (props, location) => {
+  const store = createStore(props);
+
+  let error;
+  let redirectLocation;
+  let routeProps;
+
+  // See https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md
+  match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
+    error = _error;
+    redirectLocation = _redirectLocation;
+    routeProps = _routeProps;
+  });
+
+  // This tell react_on_rails to skip server rendering any HTML. Note, client rendering
+  // will handle the redirect. What's key is that we don't try to render.
+  // Critical to return the Object properties to match this { error, redirectLocation }
+  if (error || redirectLocation) {
+    return { error, redirectLocation };
+  }
+
+  // Important that you don't do this if you are redirecting or have an error.
+  return (
+    <Provider store={store}>
+      <RoutingContext {...routeProps} />
+    </Provider>
+  );
+};
+```

data/docs/coding-style/linters.md

@@ -0,0 +1,64 @@
+# Linters
+These linters support the [ShakaCode Style Guidelines](./style.md)
+
+## Autofix!
+
+If you haven't tried the autofix options for `jscs` and `rubocop`, you're seriously missing out!
+
+1. Be **SURE** you have a clean git status, as you'll want to review what the autofix does to your code!
+2. **Rubocop:**  Be sure to be in the right directory where you have Ruby files, probably the top level of your Rails project.
+  ```
+  rubocop -a
+  ```
+
+3. **JSCS:**: Be sure to be in the right directory where you have JS files.
+  ```
+  jscs -x .
+  ```
+
+Autofixing is a **HUGE** time saver!
+
+## ESLint
+
+### Configuring Rules
+
+Rules are configured with a 0, 1 or 2. Setting a rule to 0 is turning it off, setting it to 1 triggers a warning if that rule is violated, and setting it to 2 triggers an error.
+
+Rules can also take a few additional options. In this case, the rule can be set to an array, the first item of which is the 0/1/2 flag and the rest are options.
+
+See file [.eslintrc](../../client/.eslintrc) for examples of configuration
+
+### Specify/Override rules in code
+
+Rules can also be specified in the code file to be linted, as JavaScript comments. This can be useful when the rule is a one-off or is a override to a project-wide rule.
+
+For example, if your file assumes a few globals and you have the no-undef rule set in the .eslintrc file, you might want to relax the rule in the current file.
+
+```
+/* global $, window, angular */
+// rest of code
+```
+
+It's also useful to disable ESLint for particular lines or blocks of lines.
+
+```
+console.log('console.log not allowed'); // eslint-disable-line
+
+alert('alert not allowed'); // eslint-disable-line no-alert
+
+/* eslint-disable no-console, no-alert */
+console.log('more console.log');
+alert('more alert');
+/* eslint-enable no-console, no-alert */
+```
+
+You can disable all rules for a line or block, or only specific rules, as shown above.
+
+### Useful Reference Links
+
+* [Configuring ESLint](http://eslint.org/docs/user-guide/configuring.html#configuring-rules)
+* [ESLint quick start](http://untilfalse.com/eslint-quick-start/)
+* [RuboCop][https://github.com/bbatsov/rubocop]
+* [ESLint][http://eslint.org/] 
+* [JSCS][https://github.com/jscs-dev/node-jscs]
+

data/docs/coding-style/style.md

@@ -0,0 +1,42 @@
+# Code Style
+This document describes the coding style of [ShakaCode](http://www.shakacode.com). Yes, it's opinionated, as all style guidelines should be. We shall put as little as possible into this guide and instead rely on:
+
+* Use of linters with our standard linter configuration.
+* References to existing style guidelines that support the linter configuration.
+* Anything additional goes next.
+
+## Client Side JavaScript and React
+* Use [Redux](https://github.com/rackt/redux) for your flux store.
+* Use [Lodash](https://lodash.com/) rather than Underscore.
+* Place all JavaScript for the client app in `/client`
+* Organize your app into high level domains which map to JavaScript bundles. These are like mini-apps that live within your entire app. Create directories named like `/client/app/<bundle>` and configure Webpack to generate different corresponding bundles.
+* Carefully organize your React components into [Smart and Dumb Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ygdkh1l7b):
+   1. "dumb" components that live in the `/client/app/<bundle>/components/` directories. These components should take props, including values and callbacks, and should not talk directly to Redux or any AJAX endpoints.
+   2. "smart" components that live in the `/client/app/<bundle>/containers/` directory. These components will talk to the Redux store and AJAX endpoints.
+* Place common code shared across bundles in `/client/app/libs` and configure Webpack to generate a common bundle for this one.
+* Prefix Immutable.js variable names and properties with `$$`. By doing this, you will clearly know that you are dealing with an Immutable.js object and not a standard JavaScript Object or Array.
+* Use ES6 classes rather than `React.createClass`.
+* Bind callbacks passed to react components with `_.bindAll` in the constructor unless you need to bind additional parameters. In that case, you can call `_.bind` within the rendering.
+
+## Style Guides to Follow
+Follow these style guidelines per the linter configuration. Basically, lint your code and if you have questions about the suggested fixes, look here:
+
+### Ruby Coding Standards
+* [RailsOnMaui Ruby Coding Standards](https://github.com/justin808/ruby)
+* [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
+
+### JavaScript Coding Standards
+* [AirBnb Javascript](https://github.com/airbnb/javascript)
+* [JSDoc](http://usejsdoc.org/)
+
+### Git coding Standards
+* [Git Coding Standards](http://chlg.co/1GV2m9p)
+
+### Sass Coding Standards
+* [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
+* [Github Front End Guidelines](http://primercss.io/guidelines/)
+
+# Git Usage
+* Follow a github-flow model where you branch off of master for features.
+* Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
+* Run hosted CI and code coverage.

data/docs/contributing.md

@@ -8,19 +8,10 @@
 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. 
+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).
+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.
 
 ### 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`.
@@ -31,6 +22,7 @@ After running a test, you can view the coverage results SimpleCov reports by ope
 
 ### Debugging
 Start the sample app like this for some debug printing:
+
 ```bash
 TRACE_REACT_ON_RAILS=true && foreman start
 ```
@@ -40,7 +32,6 @@ In your Rails app add this gem with a path to your fork.
 
 ```
 gem 'react_on_rails', path: '/your_fork'
-gem 'therubyracer'
 ```
 
 The main installer can be run with ```rails generate react_on_rails:install```
@@ -48,43 +39,24 @@ The main installer can be run with ```rails generate react_on_rails:install```
 ### Testing the Generator
 The generators are covered by generator tests using Rails's generator testing helpers, but it never hurts to do a sanity check and explore the API. See [generator_testing_script.md](generator_testing_script.md) for a script on how to run the generator on a fresh project.
 
-## 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. 
+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.
+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 initial 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:lint` 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.
+Run `rake -D docker` to see all docker linting commands for rake. `rake docker:lint` will run all linters. For individual rake linting commands please refer to `rake -D docker` for the list.
+
+You can run specific linting for directories or files by using `docker-compose run lint rubocop (file path or directory)`, etc.
+
 `docker-compose run lint bash` sets you up to run from the container command line. 
 
 ### Docker CI - Test and Linting
-Docker CI and Tests containers have a xvfd server automatically started for headless browser testing with selenium and firefox.
+Docker CI and Tests containers have a xvfd server automatically started for headless browser testing with selenium and Firefox.
 
-Run `docker-compose build ci` to build the ci container. Run `docker-compose run ci` to start all
-rspec test and linting. `docker-compose run --entrypoint=/bin/bash` will override the default ci action and place
-you inside the ci container in a bash session. This is what is run on Travis-ci.
+Run `docker-compose build ci` to build the CI container. Run `docker-compose run ci` to start all rspec tests and linting. `docker-compose run --entrypoint=/bin/bash` will override the default CI action and place you inside the CI container in a bash session. This is what is run on Travis-CI.
 
-Run `docker-compose build tests` to build the tests container. Run `docker-compose run tests` to start all
-rspec tests. 
+Run `docker-compose build tests` to build the tests container. Run `docker-compose run tests` to start all rspec tests.

data/docs/generator_testing_script.md

@@ -15,7 +15,6 @@ Edit the Gemfile, adding these 2 lines:
 
 ```ruby
 gem 'react_on_rails', path: '../react_on_rails'
-gem 'therubyracer'
 ```
 
 Note the relative path to the react_on_rails gem.

data/docs/install_and_releasing.md

@@ -0,0 +1,24 @@
+### 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).
+
+## 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
+```
+
+## Testing the Gem before Release from a Rails App
+If you want to test the gem with an application before you release a new version of the gem, you can specify the path to your local version via your test app's Gemfile:
+
+```ruby
+gem "react_on_rails", path: "../path-to-react-on-rails"
+```
+
+Note that you will need to bundle install after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.

data/docs/sample_generated_js/README.md

@@ -0,0 +1,4 @@
+Files in this directory show what JS is generated for client and server rendering.
+
+* [client-generated.js](./client-generated.js)
+* [server-generated.js](./server-generated.js)

data/docs/sample_generated_js/server-generated.js

@@ -1,11 +1,25 @@
 (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
+  var htmlResult = '';
+  var consoleReplayScript = '';
+  var hasErrors = false;
+
+  try {
+    htmlResult =
+      (function() {
+        return this.HelloString.world();
+      })();
+  } catch(e) {
+    htmlResult = ReactOnRails.handleError({e: e, componentName: null,
+      jsCode: 'this.HelloString.world()', serverSide: true});
+    hasErrors = true;
+  }
+
+  consoleReplayScript = ReactOnRails.buildConsoleReplay();
+
+  return JSON.stringify({
+      html: htmlResult,
+      consoleReplayScript: consoleReplayScript,
+      hasErrors: hasErrors
   });
-})();
+
+})()

data/lib/generators/react_on_rails/base_generator.rb

@@ -4,7 +4,7 @@ include GeneratorHelper
 
 module ReactOnRails
   module Generators
-    class BaseGenerator < Rails::Generators::Base
+    class BaseGenerator < Rails::Generators::Base # rubocop:disable Metrics/ClassLength
       hide!
       source_root(File.expand_path("../templates", __FILE__))
 
@@ -71,21 +71,22 @@ module ReactOnRails
 
           // bootstrap-sprockets depends on generated/vendor-bundle for jQuery.
           //= require bootstrap-sprockets
+
         DATA
 
-        application_js_path = "app/assets/javascripts/application.js"
-        application_js = dest_file_exists?(application_js_path) || dest_file_exists?(application_js_path + ".coffee")
-        if application_js
-          prepend_to_file(application_js, data)
+        app_js_path = "app/assets/javascripts/application.js"
+        found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?(app_js_path + ".coffee")
+        if found_app_js
+          prepend_to_file(found_app_js, data)
         else
-          puts_setup_file_error("#{application_js} or #{application_js}.coffee", data)
+          create_file(app_js_path, data)
         end
       end
 
       def strip_application_js_of_incompatible_sprockets_statements
         application_js = File.join(destination_root, "app/assets/javascripts/application.js")
         gsub_file(application_js, "//= require jquery_ujs", "")
-        gsub_file(application_js, "//= require jquery", "")
+        gsub_file(application_js, %r{//= require jquery$}, "")
         gsub_file(application_js, "//= require_tree .", "")
       end
 
@@ -123,6 +124,10 @@ module ReactOnRails
            client/package.json).each { |file| template(base_path + file + ".tt", file) }
       end
 
+      def add_base_gems_to_gemfile
+        append_to_file("Gemfile", "\ngem 'therubyracer', platforms: :ruby\n")
+      end
+
       def template_client_globals_file
         filename = options.server_rendering? ? "clientGlobals.jsx" : "globals.jsx"
         location = "client/app/bundles/HelloWorld/startup"

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js.tt

@@ -4,6 +4,9 @@
 const webpack = require('webpack');
 const path = require('path');
 
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
 module.exports = {
 
   // the project dir
@@ -32,6 +35,12 @@ module.exports = {
   },
   plugins: [
 
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(NODE_ENV),
+      },
+    }),
+
     // https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
     new webpack.optimize.CommonsChunkPlugin({
 

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.rails.config.js

@@ -7,8 +7,6 @@
 const webpack = require('webpack');
 const config = require('./webpack.client.base.config');
 
-const devBuild = process.env.NODE_ENV !== 'production';
-
 config.output = {
   filename: '[name]-bundle.js',
   path: '../app/assets/javascripts/generated',
@@ -34,11 +32,6 @@ if (devBuild) {
   module.exports.devtool = 'eval-source-map';
 } else {
   config.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('production'),
-      },
-    }),
     new webpack.optimize.DedupePlugin()
   );
   console.log('Webpack production build for Rails'); // eslint-disable-line no-console

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/linters.rake.tt

@@ -76,8 +76,8 @@ if %w(development test).include? Rails.env
     <%- end -%>
 
     <%- enabled_linters = [] -%>
-    <%- enabled_linters << %i(rubocop ruby) if options.ruby_linters? -%>
-    <%- enabled_linters << %i(js scss) unless options.skip_js_linters? -%>
+    <%- enabled_linters << %i(rubocop ruby scss) if options.ruby_linters? -%>
+    <%- enabled_linters << %i(js) unless options.skip_js_linters? -%>
     task lint: <%= enabled_linters.flatten %> do
       puts "Completed all linting"
     end

data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js

@@ -1,8 +1,11 @@
-// Wbpack configuration for server bundle
+// Webpack configuration for server bundle
 
 const webpack = require('webpack');
 const path = require('path');
 
+const devBuild = process.env.NODE_ENV !== 'production';
+const nodeEnv = devBuild ? 'development' : 'production';
+
 module.exports = {
 
   // the project dir

data/lib/generators/react_on_rails/templates/js_linters/client/.eslintrc

@@ -6,12 +6,43 @@ extends: eslint-config-airbnb
 plugins:
   - react
 
+globals:
+  __DEBUG_SERVER_ERRORS__: true
+  __SERVER_ERRORS__: true
+
 env:
   browser: true
   node: true
+  mocha: true
 
 rules:
+  ### Variables
+  no-undef: 2
+  no-unused-vars: [2, { vars: all, args: none }]
+
+  ### Stylistic issues
   indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
-  react/sort-comp: 0
-  react/jsx-quotes: 1
-  id-length: [2, {"exceptions": ["e", "i", "_"]}]
+  id-length: [1, { min: 2, exceptions: [_, e, i, k, v] }]
+
+  ### React
+  jsx-quotes: [1, prefer-double]
+  react/display-name: 0
+  react/jsx-boolean-value: [1, always]
+  react/jsx-curly-spacing: [1, never]
+  react/jsx-no-duplicate-props: [2, { ignoreCase: true }]
+  react/jsx-no-undef: 2
+  react/jsx-sort-prop-types: 0
+  react/jsx-sort-props: 0
+  react/jsx-uses-react: 2
+  react/jsx-uses-vars: 2
+  react/no-danger: 0
+  react/no-did-mount-set-state: 1
+  react/no-did-update-set-state: 0
+  react/no-multi-comp: 2
+  react/no-unknown-property: 2
+  react/prop-types: 1
+  react/react-in-jsx-scope: 2
+  react/require-extension: [1, { extensions: [.js, .jsx] }]
+  react/self-closing-comp: 2
+  react/sort-comp: 0                                                            # Should be 1. `statics` should be on top.
+  react/wrap-multilines: 2