react_on_rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c32d5d1549cefdb05c11593b8fc46357c3a2b51a
-  data.tar.gz: c9a61af04d0b81767c48e155a6cd8af8e9081cc4
+  metadata.gz: 6ff4186feb1c1939c00dd049ef22d868aea660f6
+  data.tar.gz: 0b5808c38aeb2a3092ec374e6fa8ff2871849f57
 SHA512:
-  metadata.gz: ebc8347894681090d81c8e1580aebadaf36fc0465ac9635e054362584c737d22d8d659ec4bd8412bd914cd7adb5b1a3a8cdf880fa5ea6db8ff3a3550d39a21a2
-  data.tar.gz: ff1e4ab63b241615882224a88666f8c2dc04ea29133881649ba31f539e816a638851924b85c45003e2dfdfd73506336e428f1cdbfbcc36daff7905a7b3286bbf
+  metadata.gz: 1c3262b0bb0634626438299e5330e4bd4268a743ddb83f795adfbb2a8e29ed3dc9daf4c987dfca29113c68d66d1daf9e2d5b5277bf59b02cb391dfa28ab6f59e
+  data.tar.gz: 0885111f10b06d283bbc39058492a1f5d6e9ff958cc61ba1a4b67ece33a7c78af6006232a1ef380be349d6d7ea8fa2021a022e749574ad9f649fea0107902536

data/.coveralls.yml

@@ -0,0 +1 @@
+service_name: travis-ci

data/.eslintignore

@@ -0,0 +1 @@
+node_modules

data/.eslintrc

@@ -0,0 +1,16 @@
+---
+parser: babel-eslint
+
+extends: eslint-config-airbnb
+
+plugins:
+  - react
+
+env:
+  browser: true
+  node: true
+
+rules:
+  indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
+  react/sort-comp: 0
+  react/jsx-quotes: 0

data/.jscsrc

@@ -0,0 +1,5 @@
+{
+  "preset": "airbnb",
+  "fileExtensions": [".js", ".jsx"],
+  "excludeFiles": ["build/**", "node_modules/**"]
+}

data/.rubocop.yml

@@ -0,0 +1,26 @@
+# This is the configuration used to check the rubocop source code.
+# Check out: https://github.com/bbatsov/rubocop
+
+AllCops:
+  Include:
+    - '**/Rakefile'
+    - '**/config.ru'
+  Exclude:
+    - 'vendor/**/*'
+    - 'spec/fixtures/**/*'
+    - 'node_modules/**/*'
+    - 'db/**/*'
+    - 'db/schema.rb'
+    - 'db/seeds.rb'
+    - 'client/node_modules/**/*'
+    - 'bin/**/*'
+    - !ruby/regexp /old_and_unused\.rb$/
+
+Metrics/LineLength:
+  Max: 120
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/Documentation:
+  Enabled: false

data/.scss-lint.yml

@@ -0,0 +1,205 @@
+# See http://sass-guidelin.es/#zeros
+
+scss_files:
+  - 'app/assets/stylesheets/**/*.scss'
+  - 'client/assets/stylesheets/**/*.scss'
+
+linters:
+#  BangFormat:
+#    enabled: true
+#    space_before_bang: true
+#    space_after_bang: false
+#
+#  BorderZero:
+#    enabled: true
+#    convention: zero # or `none`
+#
+  ColorKeyword:
+    enabled: false
+  ColorVariable:
+    enabled: false
+#
+#  Comment:
+#    enabled: true
+#
+#  DebugStatement:
+#    enabled: true
+#
+#  DeclarationOrder:
+#    enabled: true
+#
+#  DuplicateProperty:
+#    enabled: true
+#
+#  ElsePlacement:
+#    enabled: true
+#    style: same_line # or 'new_line'
+#
+#  EmptyLineBetweenBlocks:
+#    enabled: true
+#    ignore_single_line_blocks: true
+#
+#  EmptyRule:
+#    enabled: true
+#
+#  FinalNewline:
+#    enabled: true
+#    present: true
+#
+  HexLength:
+    enabled: true
+    style: long
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+#
+#  HexValidation:
+#    enabled: true
+#
+  IdSelector:
+    enabled: true
+#
+#  ImportantRule:
+#    enabled: true
+#
+#  ImportPath:
+#    enabled: true
+#    leading_underscore: false
+#    filename_extension: false
+#
+#  Indentation:
+#    enabled: true
+#    allow_non_nested_indentation: false
+#    character: space # or 'tab'
+#    width: 2
+#
+  LeadingZero:
+    enabled: true
+    style: include_zero
+#
+#  MergeableSelector:
+#    enabled: true
+#    force_nesting: true
+#
+#  NameFormat:
+#    enabled: true
+#    allow_leading_underscore: true
+#    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+#
+#  NestingDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  PlaceholderInExtend:
+#    enabled: true
+#
+#  PropertyCount:
+#    enabled: false
+#    include_nested: false
+#    max_properties: 10
+#
+#  PropertyUnits:
+#    enabled: true
+#    global: [
+#      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+#      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+#      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+#      'deg', 'grad', 'rad', 'turn',            # Angle
+#      'ms', 's',                               # Duration
+#      'Hz', 'kHz',                             # Frequency
+#      'dpi', 'dpcm', 'dppx',                   # Resolution
+#      '%',                                     # Other
+#    ]
+#    properties: {}
+#
+#  PropertySortOrder:
+#    enabled: true
+#    ignore_unspecified: false
+#    separate_groups: false
+#
+#  PropertySpelling:
+#    enabled: true
+#    extra_properties: []
+#
+#  QualifyingElement:
+#    enabled: true
+#    allow_element_with_attribute: false
+#    allow_element_with_class: false
+#    allow_element_with_id: false
+#
+#  SelectorDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  SelectorFormat:
+#    enabled: true
+#    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+#
+#  Shorthand:
+#    enabled: true
+#    allowed_shorthands: [1, 2, 3]
+#
+#  SingleLinePerProperty:
+#    enabled: true
+#    allow_single_line_rule_sets: true
+#
+#  SingleLinePerSelector:
+#    enabled: true
+#
+#  SpaceAfterComma:
+#    enabled: true
+#
+#  SpaceAfterPropertyColon:
+#    enabled: true
+#    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+#
+#  SpaceAfterPropertyName:
+#    enabled: true
+#
+#  SpaceBeforeBrace:
+#    enabled: true
+#    style: space # or 'new_line'
+#    allow_single_line_padding: false
+#
+#  SpaceBetweenParens:
+#    enabled: true
+#    spaces: 0
+#
+#  StringQuotes:
+#    enabled: true
+#    style: single_quotes # or double_quotes
+#
+#  TrailingSemicolon:
+#    enabled: true
+#
+#  TrailingZero:
+#    enabled: false
+#
+#  UnnecessaryMantissa:
+#    enabled: true
+#
+#  UnnecessaryParentReference:
+#    enabled: true
+#
+#  UrlFormat:
+#    enabled: true
+#
+#  UrlQuotes:
+#    enabled: true
+#
+#  VariableForProperty:
+#    enabled: false
+#    properties: []
+#
+#  VendorPrefix:
+#    enabled: true
+#    identifier_list: base
+#    additional_identifiers: []
+#    excluded_identifiers: []
+#
+#  ZeroUnit:
+#    enabled: true
+#
+#  Compass::*:
+#    enabled: false

data/.travis.yml

@@ -1,4 +1,12 @@
 language: ruby
 rvm:
-  - 2.2.2
-before_install: gem install bundler -v 1.10.5
+- 2.2.2
+gemfile:
+- spec/dummy/Gemfile
+install: bundle install
+script:
+- rake run_rspec:gem
+- rake run_rspec:dummy
+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/Dockerfile

@@ -0,0 +1,14 @@
+FROM ruby:2.2.3
+MAINTAINER Dylan Grafmyre <dylan@shakacode.com>
+
+RUN mkdir -p /app
+WORKDIR /app/
+# Setup container for linting with ruby and npm
+RUN gem install rubocop ruby-lint scss_lint
+RUN curl --silent --location https://deb.nodesource.com/setup_0.12 | bash -
+RUN apt-get install -y nodejs
+RUN npm install -g eslint \
+  eslint-config-airbnb \
+  eslint-plugin-react \
+  babel-eslint \
+  jscs

data/README.md

@@ -1,6 +1,9 @@
+[![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails)
+[![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
+[![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails)
 # React On Rails
 
-Published: https://rubygems.org/gems/react_on_rails
+Gem Published: https://rubygems.org/gems/react_on_rails
 
 See [Action Plan for v1.0](https://github.com/shakacode/react_on_rails/issues/1)
 
@@ -16,108 +19,242 @@ Supports:
 6. Server side rendering with fragment caching
 7. react-router for client side rendering (and maybe server side eventually)
 
-# Authors
-The Shaka Code team!
+# 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!
+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
+5. If this project is interesting to you, email me at justin@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.
 
-1. [Justin Gordon](https://github.com/justin808/)
-2. [Samnang Chhun](https://github.com/samnang)
-3. [Alex Fedoseev](https://github.com/alexfedoseev)
+## Application Installation
 
-And based on the work of the [react-rails gem](https://github.com/reactjs/react-rails)
+Add these lines to your application's Gemfile, sustituting your preferable JavaScript engine.
 
-# Key Info
-Currently being implemented in 3 production projects (not yet live).
+```ruby
+gem "react_on_rails"
+gem "therubyracer"
+```
 
-1. https://github.com/justin808/react-webpack-rails-tutorial/
-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. Lots of work to do in terms of docs, tests
-5. If this project is interesting to you, email me at justin@shakacode.com. We're looking for great
-developers that want to work with Rails + React with a distributed, worldwide team.
+And then execute:
 
+    $ bundle
+
+## Usage
+
+*See section below titled "Try it out"*
+
+### Helper Method
+The main API is a helper:
+
+```ruby
+  react_component(component_name, props = {}, options = {})
+```
+  
+Params are:
+
+* **react_component_name**: can be a React component, created using a ES6 class, or React.createClass,
+  or a `generator function` that returns a React component
+   
+  using ES6
+  ```javascript
+  let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
+  ```       
+     
+  or using ES5
+  ```javascript
+  var MyReactComponentApp = function(props) { return <YourReactComponent {...props}/>; }
+  ```
+  Exposing the react_component_name is necessary to both a plain ReactComponent as well as
+     a generator:
+   For client rendering, expose the react_component_name on window:
+   
+  ```javascript
+  window.MyReactComponentApp = MyReactComponentApp;
+  ```       
+  For server rendering, export the react_component_name on global:
+  ```javascript
+  global.MyReactComponentApp = MyReactComponentApp;
+  ```       
+  See `spec/dummy/client/app/startup/serverGlobals.jsx` and 
+  `spec/dummy/client/app/startup/ClientApp.jsx` for examples of this.
+  
+* **props**: Ruby Hash which contains the properties to pass to the react object
+
+* **options:**
+  * **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!
+  * **trace**: <true/false> set to true to print additional debugging information in the browser default is true for development, off otherwise 
+  * **replay_console**: <true/false> Default is true. False will disable echoing server rendering logs, which can make troubleshooting server rendering difficult.
+
+## JavaScript
+
+1. Configure your webpack configuration to create the file used for server rendering if you plan to
+   do server rendering.
+2. Follow the examples in `spec/dummy/client/app/startup/clientGlobals.jsx` to expose your react components
+   for client side rendering.
+   ```ruby   
+   import HelloWorld from '../components/HelloWorld';
+   window.HelloWorld = HelloWorld;
+   ```   
+3. Follow the examples in `spec/dummy/client/app/startup/serverGlobals.jsx` to expose your react components
+   for client side rendering.
+   ```ruby
+   import HelloWorld from '../components/HelloWorld';
+   global.HelloWorld = HelloWorld;
+   ```
+
+## Optional Configuration   
+
+Create a file `config/react_on_rails.rb` to override any defaults. If you don't specify this file,
+the default options are below.
+
+The `server_bundle_js_file` must correspond to the bundle you want to use for server rendering.
 
-# Try it out!
+```ruby
+# Shown below are the defaults for configuration
+ReactOnRails.configure do |config|
+  # Client bundles are configured in application.js
+  # Server bundle is a single file for all server rendering of components.
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server.js" # This is the default
+
+  # Below options can be overriden by passing to the helper method.
+  config.prerender = false # default is false
+  config.generator_function = false # default is false, meaning that you expose ReactComponents directly
+  config.trace = Rails.env.development? # default is true for development, off otherwise
+
+  # For server rendering. This can be set to false so that server side messages are discarded.
+  config.replay_console = true # Default is true. Be cautious about turning this off.
+end
+```
+
+# Try it out in the simple sample app
 Contributions and pull requests welcome!
 
-1. Setup and run the test app. There's no database.
+1. Setup and run the test app in `spec/dummy`. Note, there's no database.
   ```bash
   cd spec/dummy
   bundle
   npm i
-  foreman start 
-  ``` 
+  foreman start
+  ```
 2. Caching is turned for development mode. Open the console and run `Rails.cache.clear` to clear
   the cache. Note, even if you stop the server, you'll still have the cache entries around.
 3. Visit http://localhost:3000
 4. Notice that the first time you hit the page, you'll see a message that server is rendering.
    See `spec/dummy/app/views/pages/index.html.erb:17` for the generation of that message.
+5. Look at the layouts in `spec/dummy/app/views/pages` for samples of usage.
 5. Open up the browser console and see some tracing.
 6. Open up the source for the page and see the server rendered code.
-7. If you want to turn off server caching, run the server like: 
+7. If you want to turn off server caching, run the server like:
    `export RAILS_USE_CACHE=N && foreman start`
 8. If you click back and forth between the about and react page links, you can see the rails console
    log as well as the browser console to see what's going on with regards to server rendering and
    caching.
 
 # Key Tips
-1. See sample app in `spec/dummy` for how to set this up. 
+1. See sample app in `spec/dummy` for how to set this up. See note below on ensuring you 
+   **DO NOT RUN `rails s` and instead     run `foreman start`. 
+2. Test out the different options and study the JSX samples in `spec/dummy/client/app/startup`.
+3. Experiment with changing the settings on the `render_component` helper calls in the ERB files.
 2. The file used for server rendering is hard coded as `generated/server.js`
    (assets/javascripts/generated/server.js).
-3. If you're only doing client rendering, you still *MUST* create an empty version of this file. This
-   will soon change so that this is not necessary.
-3. The default for rendering right now is `prerender: false`. **NOTE:**  Server side rendering does 
-   not work for some components, namely react-router, that use an async setup for server rendering. 
-   You can configure the default for prerender in your config. 
-4. The API for objects exposed differs from the react-rails gem in that you expose a function that
-   returns a react component. We'll be changing that to take either a function or a React component.
-
-# Example Configuration, config/react_on_rails.rb
+3. The default for rendering right now is `prerender: false`. **NOTE:**  Server side rendering does
+   not work for some components, namely react-router, that use an async setup for server rendering.
+   You can configure the default for prerender in your config.
+4. You can expose either a React component or a function that returns a React component. If you 
+   wish to create a React component via a function, rather than simply props, then you need to set 
+   the property "generator" on that function to true. When that is done, the function is invoked 
+   with a single parameter of "props", and that function should return a React element.
+5. Be sure you can first render your react component client only before you try to debug server
+   rendering!
+4. Open up the HTML source and take a look at the generated HTML and the JavaScript to see what's
+   going on under the covers. Not that when server rendering is turned on, then you'll see the
+   server rendered react components. When server rendering is turned off, then you'll only see
+   the `div` element where the inline JavaScript will render the component. You might also notice
+   how the props you pass (a Ruby Hash) becomes inline JavaScript on the HTML page.
+
+TODO: Check if this is true still: If you're only doing client rendering, you still *MUST* create an empty version of this file. This
+will soon change so that this is not necessary.
+
+## JavaScript Runtime Configuration
+See this [discussion on JavaScript performance](https://github.com/shakacode/react_on_rails/issues/21).
+The net result is that you want to add this line to your Gemfile to get therubyracer as your default
+JavaScript engine.
+
 ```ruby
-   ReactOnRails.configure do |config|
-     config.bundle_js_file = "app/assets/javascripts/generated/server.js" # This is the default
-     config.prerender = true # default is false
-   end
+gem "therubyracer"
 ```
 
-
 ## References
 * [Making the helper for server side rendering work with JS created by Webpack] (https://github.com/reactjs/react-rails/issues/301#issuecomment-133098974)
 * [Add Demonstration of Server Side Rendering](https://github.com/justin808/react-webpack-rails-tutorial/issues/2)
 * [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)
 
-## Installation
 
-Add this line to your application's Gemfile:
+## Development Setup for Gem Contributors
 
-```ruby
-gem 'react_on_rails'
-```
+### 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. 
 
-And then execute:
+### 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. 
 
-    $ bundle
+### 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).
 
-Or install it yourself as:
+### RSpec Testing
+Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within `spec/dummy`.
 
-    $ gem install react_on_rails
+If you run `rspec` at the top level, you'll see this message: `require': cannot load such file -- rails_helper (LoadError)`
 
-## Usage
+### Debugging
+Start the sample app like this for some debug printing:
+```bash
+TRACE_REACT_ON_RAILS=true && foreman start
+```
 
-PENDING. See `spec/dummy` for the sample app. 
+### 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. 
 
-## Development
+* [Install Docker Toolbox for Mac](https://www.docker.com/toolbox)
+* [Install Docker Compose for Linux](https://docs.docker.com/compose/install/)
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+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.
 
-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).
+### 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.
 
-
 ## 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
+
+# Authors
+The Shaka Code team!
+
+1. [Justin Gordon](https://github.com/justin808/)
+2. [Samnang Chhun](https://github.com/samnang)
+3. [Alex Fedoseev](https://github.com/alexfedoseev)
+
+And based on the work of the [react-rails gem](https://github.com/reactjs/react-rails)

data/Rakefile

@@ -1,6 +1,91 @@
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
+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 }
+  end
+
+  desc "Run RSpec for spec/dummy only"
+  task :dummy do
+    sh %{ cd spec/dummy && rspec }
+  end
+
+  task run_rspec: [:gem, :dummy] do
+    puts "Completed all RSpec tests"
+  end
+end
+desc "Runs all tests. Run `rake -D run_rspec` to see all available test options"
+task run_rspec: ["run_rspec:run_rspec"]
+
+task default: :run_rspec
+
+namespace :lint do
+
+  desc "Run Rubocop as shell"
+  task :rubocop do
+    sh "rubocop ."
+  end
+
+  desc "Run ruby-lint as shell"
+  task :ruby do
+    sh "ruby-lint app spec lib"
+  end
+
+  desc "Run scss-lint as shell"
+  task :scss do
+    sh "scss-lint ."
+  end
+
+  desc "Run eslint as shell"
+  task :eslint do
+    sh "eslint . --ext .jsx and .js"
+  end
+
+  desc "Run jscs from shell"
+  task :jscs do
+    sh "jscs ."
+  end
+
+  task lint: [:eslint, :rubocop, :ruby, :jscs, :scss] 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"]
+
+namespace :docker do
+  desc "Run Rubocop linter from docker"
+  task :rubocop do
+    sh "docker-compose run lint rake lint:rubocop"
+  end
+
+  desc "Run ruby-lint linter from docker"
+  task :ruby do
+    sh "docker-compose run lint rake lint:ruby"
+  end
+
+  desc "Run scss-lint linter from docker"
+  task :scss do
+    sh"docker-compose run lint rake lint:scss"
+  end
+
+  desc "Run eslint linter from docker"
+  task :eslint do
+    sh "docker-compose run lint rake lint:eslint"
+  end
+
+  desc "Run jscs linter from docker"
+  task :jscs do
+    sh "docker-compose run lint rake lint:jscs"
+  end
+  desc "Run all linting from docker"
+  task :lint do
+    sh "docker-compose run lint rake lint"
+  end
+end
+
+desc "Runs all linters from docker. Run `rake -D docker` to see all available lint options"
+task docker: ["docker:lint"]
 
-RSpec::Core::RakeTask.new(:spec)
 
-task :default => :spec

data/app/helpers/react_on_rails_helper.rb

@@ -2,132 +2,198 @@ require 'react_on_rails/react_renderer'
 
 module ReactOnRailsHelper
 
-  # component_name: React component name
+  # react_component_name: can be a React component, created using a ES6 class, or
+  #   React.createClass, or a
+  #     `generator function` that returns a React component
+  #       using ES6
+  #          let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
+  #       or using ES5
+  #          var MyReactComponentApp = function(props) { return <YourReactComponent {...props}/>; }
+  #    Exposing the react_component_name is necessary to both a plain ReactComponent as well as
+  #      a generator:
+  #    For client rendering, expose the react_component_name on window:
+  #      window.MyReactComponentApp = MyReactComponentApp;
+  #    For server rendering, export the react_component_name on global:
+  #      global.MyReactComponentApp = MyReactComponentApp;
+  #    See spec/dummy/client/app/startup/serverGlobals.jsx and
+  #      spec/dummy/client/app/startup/ClientApp.jsx for examples of this
   # props: Ruby Hash which contains the properties to pass to the react object
   #
-  # Naming Conventions:
-  # Suppose your component is named "App" (can be anything)
-  # 1. Inside app/startup/ServerApp.jsx, setup the component for server rendering. This is used by
-  #    the global exports in step 2
-  # 2. Component_name is changed to CamelizedUpper for the exposed component,
-  #    so we have App as the exposed global (see app/startup/serverGlobals.jsx)
-  # 3. Inside app/startup/ClientApp.jsx, you want to export a function that generates
-  #    your component, and when you generate the component, you must use this naming convention
-  #    to get the data.
-  #    App(__appData__)
-  #    That way it gets the data you pass from the Rails helper.
-  #
   #  options:
-  #    prerender: <true/false> defaults to true
-  #    trace: <true/false> defaults to false, set to true to print additional info
+  #    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!
+  #    trace: <true/false> set to true to print additional debugging information in the browser
+  #           default is true for development, off otherwise
+  #    replay_console: <true/false> Default is true. False will disable echoing server rendering
+  #                    logs, which can make troubleshooting server rendering difficult.
   def react_component(component_name, props = {}, options = {})
+    # Create the JavaScript and HTML to allow either client or server rendering of the
+    # react_component.
+    #
     # Create the JavaScript setup of the global to initialize the client rendering
     # (re-hydrate the data). This enables react rendered on the client to see that the
     # server has already rendered the HTML.
-    @react_component_index ||= 0
-    prerender = options.fetch(:prerender) { ReactOnRails.configuration.prerender }
-    trace = options.fetch(:trace, false)
-
-    dataVariable = "__#{component_name.camelize(:lower)}Data#{@react_component_index}__"
-    reactComponent = component_name.camelize
-    domId = "#{component_name}-react-component-#{@react_component_index}"
-    @react_component_index += 1
-
+    # We use this react_component_index in case we have the same component multiple times on the page.
+    react_component_index = next_react_component_index
+    react_component_name = component_name.camelize # Not sure if we should be doing this (JG)
+    dom_id = "#{component_name}-react-component-#{react_component_index}"
+
+    # Setup the page_loaded_js, which is the same regardless of prerendering or not!
+    # The reason is that React is smart about not doing extra work if the server rendering did its job.
+    data_variable_name = "__#{component_name.camelize(:lower)}Data#{react_component_index}__"
     turbolinks_loaded = Object.const_defined?(:Turbolinks)
-    install_render_events = turbolinks_loaded ? turbolinks_bootstrap(domId) : non_turbolinks_bootstrap
-
+    install_render_events = turbolinks_loaded ? turbolinks_bootstrap(dom_id) : non_turbolinks_bootstrap
     page_loaded_js = <<-JS
-      (function() {
-        window.#{dataVariable} = #{props.to_json};
-        #{define_render_if_dom_node_present(reactComponent, dataVariable, domId, trace)}
-        #{install_render_events}
-      })();
+(function() {
+  window.#{data_variable_name} = #{props.to_json};
+  #{define_render_if_dom_node_present(react_component_name, data_variable_name, dom_id, trace(options), generator_function(options))}
+  #{install_render_events}
+})();
     JS
 
     data_from_server_script_tag = javascript_tag(page_loaded_js)
 
     # Create the HTML rendering part
-    if prerender
+    server_rendered_html =
+      server_rendered_react_component_html(options, props, react_component_name)
+
+    rendered_output = content_tag(:div,
+                                  server_rendered_html,
+                                  id: dom_id)
+
+    # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
+    <<-HTML.html_safe
+#{data_from_server_script_tag}
+#{rendered_output}
+    HTML
+  end
+
+  def next_react_component_index
+    @react_component_index ||= -1
+    @react_component_index += 1
+  end
+
+  def server_rendered_react_component_html(options, props, react_component_name)
+    if prerender(options)
       render_js_expression = <<-JS
-          renderReactComponent(this.#{reactComponent}, #{props.to_json})
+        (function(React) {
+          var reactElement = #{render_js_react_element(react_component_name, props.to_json, generator_function(options))};
+          return React.renderToString(reactElement);
+        })(this.React);
       JS
-      server_rendered_react_component_html = render_js(render_js_expression)
+      # create the server generated html of the react component with props
+      options[:react_component_name] = react_component_name
+      server_rendered_react_component_html =
+        render_js(render_js_expression, options)
     else
       server_rendered_react_component_html = ""
     end
-
-    rendered_output = content_tag(:div,
-                                  server_rendered_react_component_html,
-                                  id: domId)
-
-    <<-HTML.strip_heredoc.html_safe
-      #{data_from_server_script_tag}
-      #{rendered_output}
-    HTML
+    server_rendered_react_component_html
   end
 
   # Takes javascript code and returns the output from it. This is called by react_component, which
   # sets up the JS code for rendering a react component.
   # This method could be used by itself to render the output of any javascript that returns a
   # string of proper HTML.
-  def render_js(js_expression)
-    ReactOnRails::ReactRenderer.new.render_js(js_expression).html_safe
+  def render_js(js_expression, options = {})
+    ReactOnRails::ReactRenderer.new(options).render_js(js_expression,
+                                                       options).html_safe
   end
 
   private
 
-  def debug_js(react_component, data_variable, dom_id, trace)
+  def trace(options)
+    options.fetch(:trace) { ReactOnRails.configuration.trace }
+  end
+
+  def generator_function(options)
+    options.fetch(:generator_function) { ReactOnRails.configuration.generator_function }
+  end
+
+  def prerender(options)
+    options.fetch(:prerender) { ReactOnRails.configuration.prerender }
+  end
+
+  def debug_js(react_component_name, data_variable, dom_id, trace)
     if trace
-      <<-JS.strip_heredoc
-        console.log("CLIENT SIDE RENDERED #{react_component} with dataVariable #{data_variable} to dom node with id: #{dom_id}");
+      <<-JS
+console.log("CLIENT SIDE RENDERED #{react_component_name} with data_variable #{data_variable} to dom node with id: #{dom_id}");
       JS
     else
       ""
     end
   end
 
-  def define_render_if_dom_node_present(react_component, data_variable, dom_id, trace)
-    <<-JS.strip_heredoc
-      var renderIfDomNodePresent = function() {
-        var domNode = document.getElementById('#{dom_id}');
-        if (domNode) {
-          #{debug_js(react_component, data_variable, dom_id, trace)}
-          var reactComponent = #{react_component}(#{data_variable});
-          React.render(reactComponent, domNode);
-        }
-      }
+  # react_component_name: See app/helpers/react_on_rails_helper.rb:5
+  # props_string: is either the variable name used to hold the props (client side) or the
+  #   stringified hash of props from the Ruby server side. In terms of the view helper, one is
+  #   simply passing in the Ruby Hash of props.
+  #
+  # Returns the JavaScript code to generate a React element.
+  def render_js_react_element(react_component_name, props_string, generator_function)
+    # "this" is defined by the calling context which is "global" in the execJs
+    # environment or window in the client side context.
+    js_create_element = if generator_function
+                          "#{react_component_name}(props)"
+                        else
+                          "React.createElement(#{react_component_name}, props)"
+                        end
+
+    <<-JS
+(function(React) {
+  var props = #{props_string};
+  return #{js_create_element};
+})(this.React);
+    JS
+  end
+
+  def define_render_if_dom_node_present(react_component_name, data_variable, dom_id, trace, generator_function)
+    inner_js_code = <<-JS_CODE
+    var domNode = document.getElementById('#{dom_id}');
+    if (domNode) {
+      #{debug_js(react_component_name, data_variable, dom_id, trace)}
+      var reactElement = #{render_js_react_element(react_component_name, data_variable, generator_function)};
+      React.render(reactElement, domNode);
+    }
+    JS_CODE
+
+    <<-JS
+var renderIfDomNodePresent = function() {
+  #{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(inner_js_code, react_component_name)}
+}
     JS
   end
 
   def non_turbolinks_bootstrap
-    <<-JS.strip_heredoc
-      document.addEventListener("DOMContentLoaded", function(event) {
-        console.log("DOMContentLoaded event fired");
-        renderIfDomNodePresent();
-      });
+    <<-JS
+document.addEventListener("DOMContentLoaded", function(event) {
+  console.log("DOMContentLoaded event fired");
+  renderIfDomNodePresent();
+});
     JS
   end
 
   def turbolinks_bootstrap(dom_id)
-    <<-JS.strip_heredoc
-      var turbolinksInstalled = typeof(Turbolinks) !== 'undefined';
-      if (!turbolinksInstalled) {
-        console.warn("WARNING: NO TurboLinks detected in JS, but it's in your Gemfile");
-        #{non_turbolinks_bootstrap}
-      } else {
-        function onPageChange(event) {
-          var removePageChangeListener = function() {
-            document.removeEventListener("page:change", onPageChange);
-            document.removeEventListener("page:before-unload", removePageChangeListener);
-            var domNode = document.getElementById('#{dom_id}');
-            React.unmountComponentAtNode(domNode);
-          };
-          document.addEventListener("page:before-unload", removePageChangeListener);
-
-          renderIfDomNodePresent();
-        }
-        document.addEventListener("page:change", onPageChange);
-      }
+    <<-JS
+var turbolinksInstalled = typeof(Turbolinks) !== 'undefined';
+if (!turbolinksInstalled) {
+  console.warn("WARNING: NO TurboLinks detected in JS, but it's in your Gemfile");
+  #{non_turbolinks_bootstrap}
+} else {
+  function onPageChange(event) {
+    var removePageChangeListener = function() {
+      document.removeEventListener("page:change", onPageChange);
+      document.removeEventListener("page:before-unload", removePageChangeListener);
+      var domNode = document.getElementById('#{dom_id}');
+      React.unmountComponentAtNode(domNode);
+    };
+    document.addEventListener("page:before-unload", removePageChangeListener);
+
+    renderIfDomNodePresent();
+  }
+  document.addEventListener("page:change", onPageChange);
+}
     JS
   end
 end

data/docker-compose.yml

@@ -0,0 +1,5 @@
+lint:
+  build: .
+  working_dir: /app/
+  volumes:
+    - '.:/app/'

data/lib/react_on_rails/configuration.rb

@@ -5,17 +5,24 @@ module ReactOnRails
 
   def self.configuration
     @configuration ||= Configuration.new(
-      bundle_js_file: "app/assets/javascripts/generated/server.js",
-      prerender: false
+      server_bundle_js_file: "app/assets/javascripts/generated/server.js",
+      prerender: false,
+      replay_console: true,
+      generator_function: false,
+      trace: Rails.env.development?
     )
   end
 
   class Configuration
-    attr_accessor :bundle_js_file, :prerender
+    attr_accessor :server_bundle_js_file, :prerender, :replay_console, :generator_function, :trace
 
-    def initialize(bundle_js_file:, prerender:)
-      self.bundle_js_file = bundle_js_file
+    def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
+                   generator_function: nil, trace: nil)
+      self.server_bundle_js_file = server_bundle_js_file
       self.prerender = prerender
+      self.replay_console = replay_console
+      self.generator_function = generator_function
+      self.trace = Rails.env.development?
     end
   end
 end

data/lib/react_on_rails/react_renderer.rb

@@ -1,41 +1,134 @@
+# Kudos to react-rails for how to do the polyfill of the console!
+# https://github.com/reactjs/react-rails/blob/master/lib/react/server_rendering/sprockets_renderer.rb
+
 module ReactOnRails
   class ReactRenderer
+    # Reimplement console methods for replaying on the client
+    CONSOLE_POLYFILL = <<-JS
+var console = { history: [] };
+['error', 'log', 'info', 'warn'].forEach(function (level) {
+  console[level] = function () {
+    console.history.push({level: level, arguments: Array.prototype.slice.call(arguments)});
+  };
+});
+    JS
 
-    # "this" does not need a closure as it refers to the "this" defined by the
-    # calling the calling context which is the "this" in the execJs environment.
-    def render_js_react_component
-      <<-JS.strip_heredoc
-      function renderReactComponent(componentClass, props) {
-        return this.React.renderToString(
-         componentClass(props)
-        );
-      }
+    # Script to write to the browser console.
+    # NOTE: result comes from enclosing closure and is the server generated HTML
+    # that we intend to write to the browser. Thus, the script tag will get executed right after
+    # the HTML is rendered.
+    CONSOLE_REPLAY = <<-JS
+var history = console.history;
+if (history && history.length > 0) {
+  result += '\\n<script>';
+  history.forEach(function (msg) {
+    result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+  });
+  result += '\\n</script>';
+}
+    JS
+
+    DEBUGGER = <<-JS
+      if (typeof window !== 'undefined') { debugger; }
+    JS
+
+    def base_js_code
+      <<-JS
+        #{CONSOLE_POLYFILL}
+        #{bundle_js_code};
       JS
     end
 
-    def initialize
-      js_code = "#{bundle_js_code};\n#{render_js_react_component}"
-      @context = ExecJS.compile(js_code)
+    def initialize(options)
+      @context = ExecJS.compile(base_js_code)
+      @replay_console = options.fetch(:replay_console) { ReactOnRails.configuration.replay_console }
     end
 
-    # Returns a html_safe string of HTML for direct insertion on the page by evaluating a js_code.
-    # Note, js_code does not have to be based on React.
-    def render_js(js_code)
-      js_code_wrapper = <<-JS.strip_heredoc
-      (function () {
-        return #{js_code}
-      })()
+    # js_code: JavaScript expression that returns a string.
+    # Returns a string of HTML for direct insertion on the page by evaluating js_code.
+    #   Note, js_code does not have to be based on React.
+    # Calling code will probably call 'html_safe' on return value before rendering to the view.
+    def render_js(js_code, options = {})
+      component_name = options.fetch(:react_component_name, "")
+
+      result_js_code = "result = #{js_code}"
+
+      js_code_wrapper = <<-JS
+(function () {
+  var result = '';
+  #{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(result_js_code, component_name)}
+  #{after_render};
+  return result;
+})()
       JS
 
-      # This is the html from the JavaScript. Whatever calls this will probably call 'html_safe'
-      # on the string.
+      trace_rails_on_maui = ENV["TRACE_REACT_ON_RAILS"].present? # Set to anything to print generated code.
+      if trace_rails_on_maui
+        puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
+        puts "react_renderer.rb: 92"
+        puts "js_code_wrapper = #{js_code_wrapper.ai}"
+        puts "wrote file tmp/server-generated.js"
+        File.write('tmp/server-generated.js', js_code_wrapper)
+        puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
+      end
+
       @context.eval(js_code_wrapper)
     end
 
+    def self.wrap_code_with_exception_handler(js_code, component_name)
+      <<-JS
+      try {
+        #{js_code}
+      }
+      catch(e) {
+        var lineOne =
+              'ERROR: You specifed the option generator_function (could be in your defaults) to be\\n';
+        var lastLine =
+              'A generator function takes a single arg of props and returns a ReactElement.';
+
+        var msg = '';
+        var shouldBeGeneratorError = lineOne +
+              'false, but the react component \\'#{component_name}\\' seems to be a generator function.\\n' +
+        lastLine;
+        var reMatchShouldBeGeneratorError = /Can't add property context, object is not extensible/;
+        if (reMatchShouldBeGeneratorError.test(e.message)) {
+          msg += shouldBeGeneratorError + '\\n\\n';
+        console.error(shouldBeGeneratorError);
+        }
+
+        var shouldBeGeneratorError = lineOne +
+              'true, but the react component \\'#{component_name}\\' is not a generator function.\\n' +
+        lastLine;
+        var reMatchShouldNotBeGeneratorError = /Cannot call a class as a function/;
+        if (reMatchShouldNotBeGeneratorError.test(e.message)) {
+          msg += shouldBeGeneratorError + '\\n\\n';
+        console.error(shouldBeGeneratorError);
+        }
+
+        console.error('SERVER SIDE: Exception in server side rendering!');
+        if (e.fileName) {
+          console.error('SERVER SIDE: location: ' + e.fileName + ':' + e.lineNumber);
+        }
+        console.error('SERVER SIDE: message: ' + e.message);
+        console.error('SERVER SIDE: stack: ' + e.stack);
+        msg += 'SERVER SIDE 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);
+        result = React.renderToString(reactElement);
+      }
+      JS
+    end
+
     private
 
+    def after_render
+      @replay_console ? CONSOLE_REPLAY : ""
+    end
+
     def bundle_js_code
-      js_file = Rails.root.join(ReactOnRails.configuration.bundle_js_file)
+      js_file = Rails.root.join(ReactOnRails.configuration.server_bundle_js_file)
       File.read(js_file)
     end
   end

data/lib/react_on_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactOnRails
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/react_on_rails.gemspec

@@ -25,4 +25,5 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "bundler", "~> 1.10"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "rspec"
+  spec.add_development_dependency "coveralls"
 end

data/ruby-lint.yml

@@ -0,0 +1,22 @@
+# Not currently using ruby-lint
+---
+presenter: syntastic
+
+directories:
+  - app
+  - lib
+  - spec
+
+ignore_paths:
+  - client
+  - node_modules
+
+analysis_classes:
+  #  - argument_amount
+  - pedantics
+  - shadowing_variables
+  # Too many false positives for these
+  #  - undefined_methods
+  #  - undefined_variables
+  #  - unused_variables
+  - useless_equality_checks

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-01 00:00:00.000000000 Z
+date: 2015-09-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -80,6 +80,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: coveralls
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: See README.md
 email:
 - justin@shakacode.com
@@ -87,20 +101,29 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".coveralls.yml"
+- ".eslintignore"
+- ".eslintrc"
 - ".gitignore"
+- ".jscsrc"
 - ".rspec"
+- ".rubocop.yml"
+- ".scss-lint.yml"
 - ".travis.yml"
 - CODE_OF_CONDUCT.md
+- Dockerfile
 - Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
 - app/helpers/react_on_rails_helper.rb
+- docker-compose.yml
 - lib/react_on_rails.rb
 - lib/react_on_rails/configuration.rb
 - lib/react_on_rails/react_renderer.rb
 - lib/react_on_rails/version.rb
 - react_on_rails.gemspec
+- ruby-lint.yml
 homepage: https://github.com/shakacode/react_on_rails
 licenses:
 - MIT