react-rails 0.13.0.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 83ce3f640e7f27ac175bc2dd031197ab9f7978e4
-  data.tar.gz: 52408128f938aa4f6a1608fbd0eef1b73213d1d6
+  metadata.gz: ecb96344ad4094e2bb7d7ffe7b45455b807fc7a3
+  data.tar.gz: 8003608ada04a2d20573621278faa29daf6c838c
 SHA512:
-  metadata.gz: a27db732edf425e1e10942ad7768ba5b2bb705c8a3eceae4443dd74541ab9c0871da53cf63d71a57de84af2d393332059c09bb97216d3096d47d124f4b1aa822
-  data.tar.gz: c7fd4405e8da388da7c2c3f9b12ed5de3526596abac96f94ee2b78310e0b66014da7cda9eae6b1dc53577e7ff4b4c32a7564a3910e20c698537f1929db6ed98a
+  metadata.gz: fa90a0d40e3c856840d1b17bc207da5e2bc48f3b1587368eb97c6f4291776253a3b859fca7dbe01da62dd3c1ddd50dc2299bf80c3502bcc513b6e7fb3a9927b7
+  data.tar.gz: b126df93a0c17fba3c78e71433fc77d9688a6d3be7fb3ba45f1e968a24a8caaa151b29a5a9c3cccd29a446ddccf17f8409268c54476b7127ef78319c3ad26dfa

data/README.md

@@ -1,90 +1,253 @@
-# react-rails [![Build Status](https://travis-ci.org/reactjs/react-rails.png)](https://travis-ci.org/reactjs/react-rails) [![Code Climate](https://codeclimate.com/github/reactjs/react-rails.png)](https://codeclimate.com/github/reactjs/react-rails)
+[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
+[![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
+[![Gemnasium](https://img.shields.io/gemnasium/reactjs/react-rails.svg?style=flat-square)](https://gemnasium.com/reactjs/react-rails)
+[![Code Climate](https://img.shields.io/codeclimate/github/reactjs/react-rails.svg?style=flat-square)](https://codeclimate.com/github/reactjs/react-rails)
 
-react-rails is a ruby gem which makes it easier to use [React](http://facebook.github.io/react/) and [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) in your Ruby on Rails application.
+* * *
 
-This is done in 2 ways:
+# react-rails
 
-1. making it easy to include `react.js` as part of your dependencies in `application.js`.
-2. transforming JSX into regular JS on request, or as part of asset precompilation.
 
+`react-rails` makes it easy to use [React](http://facebook.github.io/react/) and [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) in your Ruby on Rails (3.1+) application. `react-rails` can:
 
-## Installation
+- Provide [various `react` builds](#reactjs-builds) to your asset bundle
+- Transform [`.jsx` in the asset pipeline](#jsx)
+- [Render components into views and mount them](#rendering--mounting) via view helper & `react_ujs`
+- [Render components server-side](#server-rendering) with `prerender: true`.
+- [Generate components](#component-generator) with a Rails generator
 
-We're specifically targeting versions of Ruby on Rails which make use of the asset pipeline, which means Rails 3.1+.
+## Installation
 
-As with all gem dependencies, we strongly recommend adding `react-rails` to your `Gemfile` and using `bundler` to manage your application's dependencies.
+Add `react-rails` to your gemfile:
 
 ```ruby
-# Gemfile
+gem 'react-rails', '~> 1.0'
+```
 
-gem 'react-rails', '~> 0.12.0.0'
+Next, run the installation script.
+
+```bash
+rails g react:install
 ```
 
+This will:
+- create a `components.js` manifest file and a `app/assets/javascripts/components/` directory, where you will put your components
+- place the following in your `application.js`:
+
+  ```js
+  //= require react
+  //= require react_ujs
+  //= require components
+  ```
 
 ## Usage
 
-### react.js
+### React.js builds
 
-In order to use React client-side in your application, you must make sure the browser requests it. One way to do that is to drop `react.js` into `app/assets/javascript/` and by default your application manifest will pick it up. There are downsides to this approach, so we made it even easier. Once you have `react-rails` installed, you can just add a line into your config file (see Configuring) and require react directly in your manifest:
+You can pick which React.js build (development, production, with or without [add-ons]((http://facebook.github.io/react/docs/addons.html))) to serve in each environment by adding a config. Here are the defaults:
+
+```ruby
+# config/environments/development.rb
+MyApp::Application.configure do
+  config.react.variant = :development
+end
 
-You can `require` it in your manifest:
+# config/environments/production.rb
+MyApp::Application.configure do
+  config.react.variant = :production
+end
+```
 
-```js
-// app/assets/application.js
+To include add-ons, use this config:
 
-//= require react
+```ruby
+MyApp::Application.configure do
+  config.react.addons = true # defaults to false
+end
+```
+
+After restarting your Rails server, `//= require react`  will provide the build of React.js which was specified by the configurations.
+
+`react-rails` offers a few other options for versions & builds of React.js. See [VERSIONS.md](https://github.com/reactjs/react-rails/blob/master/VERSIONS.md) for more info about using the `react-source` gem or dropping in your own copies of React.js.
+
+### JSX
+
+After installing `react-rails`, restart your server. Now, `.js.jsx` files will be transformed in the asset pipeline.
+
+You can use JSX `--harmony` or `--strip-types` options by adding a configuration:
+
+```ruby
+config.react.jsx_transform_options = {
+  harmony: true,
+  strip_types: true, # for removing Flow type annotations
+}
+```
+
+To use CoffeeScript, create `.js.jsx.coffee` files and embed JSX inside backticks, for example:
+
+```coffee
+Component = React.createClass
+  render: ->
+    `<ExampleComponent videos={this.props.videos} />`
 ```
 
-Alternatively, you can include it directly as a separate script tag:
+### Rendering & mounting
+
+`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript driver (`react_ujs`) which work together to put React components on the page. You should require the UJS driver in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks))
+
+The __view helper__ puts a `div` on the page with the requested component class & props. For example:
 
 ```erb
-# app/views/layouts/application.erb.html
+<%= react_component('HelloMessage', name: 'John') %>
+<!-- becomes: -->
+<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
+```
+
+On page load, the __`react_ujs` driver__ will scan the page and mount components using `data-react-class` and `data-react-props`. Before page unload, it will unmount components (if you want to disable this behavior, remove `data-react-class` attribute in `componentDidMount`).
+
+`react_ujs` uses Turbolinks events if they're available, otherwise, it uses native events. __Turbolinks >= 2.4.0__ is recommended because it exposes better events.
 
-<%= javascript_include_tag "react" %>
+The view helper's signature is
+
+```ruby
+react_component(component_class_name, props={}, html_options={})
 ```
 
+- `component_class_name` is a string which names a globally-accessible component class. It may have dots (eg, `"MyApp.Header.MenuItem"`).
+- `props` is either an object that responds to `#to_json` or an already-stringified JSON object (eg, made with Jbuilder, see note below)
+- `html_options` may include:
+  - `tag:` to use an element other than a `div` to embed `data-react-class` and `-props`.
+  - `prerender: true` to render the component on the server.
+  - `**other` Any other arguments (eg `class:`, `id:`) are passed through to [`content_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
 
-### JSX
 
-To transform your JSX into JS, simply create `.js.jsx` files. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
+### Server rendering
+
+To render components on the server, pass `prerender: true` to `react_component`:
 
+```erb
+<%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>
+<!-- becomes: -->
+<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}">
+  <h1>Hello, John!</h1>
+</div>
+```
+
+_(It will be also be mounted by the UJS on page load.)_
 
-## Configuring
+There are some requirements for this to work:
 
-### Variants
+- `react-rails` must load your code. By convention, it uses `components.js`, which was created by the install task. This file must include your components _and_ their dependencies (eg, Underscore.js).
+- Your components must be accessible in the global scope. If you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
 
-There are 2 variants available. `:development` gives you the unminified version of React. This provides extra debugging and error prevention. `:production` gives you the minified version of React which strips out comments and helpful warnings, and minifies.
+  ```coffee
+  # @ is `window`:
+  @Component = React.createClass
+    render: ->
+      `<ExampleComponent videos={this.props.videos} />`
+  ```
+- Your code can't reference `document`. Prerender processes don't have access to `document`, so jQuery and some other libs won't work in this environment :(
+
+You can configure your pool of JS virtual machines and specify where it should load code:
 
 ```ruby
-# config/environments/development.rb
+# config/environments/application.rb
+# These are the defaults if you dont specify any yourself
 MyApp::Application.configure do
-  config.react.variant = :development
+  # renderer pool size:
+  config.react.max_renderers = 10
+  # prerender timeout, in seconds:
+  config.react.timeout = 20
+  # where to get React.js source:
+  config.react.react_js = lambda { File.read(::Rails.application.assets.resolve('react.js')) }
+  # array of filenames that will be requested from the asset pipeline
+  # and concatenated:
+  config.react.component_filenames = ['components.js']
+  # server-side console.log, console.warn, and console.error messages will be replayed on the client
+  # (you can set this to `true` in config/enviroments/development.rb to replay in development only)
+  config.react.replay_console = false
 end
+```
 
-# config/environments/production.rb
-MyApp::Application.configure do
-  config.react.variant = :production
-end
+### Component generator
+
+react-rails ships with a Rails generator to help you get started with a simple component scaffold. You can run it using `rails generate react:component ComponentName`. The generator takes an optional list of arguments for default propTypes, which follow the conventions set in the [Reusable Components](http://facebook.github.io/react/docs/reusable-components.html) section of the React documentation.
+
+For example:
+
+```shell
+rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
 ```
 
-### Add-ons
+would generate the following in `app/assets/javascripts/components/post.js.jsx`:
+
+```jsx
+var Post = React.createClass({
+  propTypes: {
+    title: React.PropTypes.string,
+    body: React.PropTypes.string,
+    published: React.PropTypes.bool,
+    publishedBy: React.PropTypes.instanceOf(Person)
+  },
+
+  render: function() {
+    return (
+      <div>
+        <div>Title: {this.props.title}</div>
+        <div>Body: {this.props.body}</div>
+        <div>Published: {this.props.published}</div>
+        <div>Published By: {this.props.published_by}</div>
+      </div>
+    );
+  }
+});
+```
+
+The generator can use the following arguments to create basic propTypes:
+
+  * any
+  * array
+  * bool
+  * element
+  * func
+  * number
+  * object
+  * node
+  * shape
+  * string
+
+The following additional arguments have special behavior:
 
-Beginning with React v0.5, there is another type of build. This build ships with some "add-ons" that might be useful - [take a look at the React documentation for details](http://facebook.github.io/react/docs/addons.html). In order to make these available, we've added another configuration (which defaults to `false`).
+  * `instanceOf` takes an optional class name in the form of {className}
+  * `oneOf` behaves like an enum, and takes an optional list of strings in the form of `'name:oneOf{one,two,three}'`.
+  * `oneOfType` takes an optional list of react and custom types in the form of `'model:oneOfType{string,number,OtherType}'`
+
+Note that the arguments for `oneOf` and `oneOfType` must be enclosed in single quotes to prevent your terminal from expanding them into an argument list.
+
+### Jbuilder & react-rails
+
+If you use Jbuilder to pass JSON string to `react_component`, make sure your JSON is a stringified hash, not an array. This is not the Rails default -- you should add the root node yourself. For example:
 
 ```ruby
-MyApp::Application.configure do
-  config.react.addons = true
+# BAD: returns a stringified array
+json.array!(@messages) do |message|
+  json.extract! message, :id, :name
+  json.url message_url(message, format: :json)
 end
-```
 
+# GOOD: returns a stringified hash
+json.messages(@messages) do |message|
+  json.extract! message, :id, :name
+  json.url message_url(message, format: :json)
+end
+```
 
 ## CoffeeScript
 
-It is possible to use JSX with CoffeeScript. We need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
+It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow `/* */` style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
 
 ```coffee
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`
 ```
-

data/lib/assets/javascripts/react_ujs.js.erb

@@ -0,0 +1,104 @@
+/*globals React, Turbolinks*/
+
+// Unobtrusive scripting adapter for React
+;(function(document, window) {
+  // jQuery is optional. Use it to support legacy browsers.
+  var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
+
+  // create the  namespace
+  window.ReactRailsUJS = {
+    CLASS_NAME_ATTR: 'data-react-class',
+    PROPS_ATTR: 'data-react-props',
+    RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
+    // helper method for the mount and unmount methods to find the
+    // `data-react-class` DOM elements
+    findDOMNodes: function(searchSelector) {
+      // we will use fully qualified paths as we do not bind the callbacks
+      var selector;
+      if (typeof searchSelector === 'undefined') {
+        var selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+      } else {
+        var selector = searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+      }
+
+      if ($) {
+        return $(selector);
+      } else {
+        return document.querySelectorAll(selector);
+      }
+    },
+
+    mountComponents: function(searchSelector) {
+      var nodes = window.ReactRailsUJS.findDOMNodes(searchSelector);
+
+      for (var i = 0; i < nodes.length; ++i) {
+        var node = nodes[i];
+        var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
+
+        // Assume className is simple and can be found at top-level (window).
+        // Fallback to eval to handle cases like 'My.React.ComponentName'.
+        var constructor = window[className] || eval.call(window, className);
+        var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
+        var props = propsJson && JSON.parse(propsJson);
+
+        React.render(React.createElement(constructor, props), node);
+      }
+    },
+
+    unmountComponents: function(searchSelector) {
+      var nodes = window.ReactRailsUJS.findDOMNodes(searchSelector);
+
+      for (var i = 0; i < nodes.length; ++i) {
+        var node = nodes[i];
+
+        React.unmountComponentAtNode(node);
+      }
+    }
+  };
+
+  // functions not exposed publicly
+  function handleTurbolinksEvents () {
+    var handleEvent;
+    var unmountEvent;
+
+    if ($) {
+      handleEvent = function(eventName, callback) {
+        $(document).on(eventName, callback);
+      };
+
+    } else {
+      handleEvent = function(eventName, callback) {
+        document.addEventListener(eventName, callback);
+      };
+    }
+
+    if (Turbolinks.EVENTS) {
+      unmountEvent = Turbolinks.EVENTS.BEFORE_UNLOAD;
+    } else {
+      unmountEvent = 'page:receive';
+      Turbolinks.pagesCached(0);
+
+      if (window.ReactRailsUJS.RAILS_ENV_DEVELOPMENT) {
+        console.warn('The Turbolinks cache has been disabled (Turbolinks >= 2.4.0 is recommended). See https://github.com/reactjs/react-rails/issues/87 for more information.');
+      }
+    }
+    handleEvent('page:change', function() {window.ReactRailsUJS.mountComponents()});
+    handleEvent(unmountEvent, function() {window.ReactRailsUJS.unmountComponents()});
+  }
+
+  function handleNativeEvents() {
+    if ($) {
+      $(function() {window.ReactRailsUJS.mountComponents()});
+      $(window).unload(function() {window.ReactRailsUJS.unmountComponents()});
+    } else {
+      document.addEventListener('DOMContentLoaded', function() {window.ReactRailsUJS.mountComponents()});
+      window.addEventListener('unload', function() {window.ReactRailsUJS.unmountComponents()});
+    }
+  }
+
+  if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
+    handleTurbolinksEvents();
+  } else {
+    handleNativeEvents();
+  }
+})(document, window);

data/lib/generators/react/component_generator.rb

@@ -0,0 +1,127 @@
+module React
+  module Generators
+    class ComponentGenerator < ::Rails::Generators::NamedBase
+      source_root File.expand_path '../../templates', __FILE__
+      desc <<-DESC.strip_heredoc
+      Description:
+          Scaffold a react component into app/assets/javascripts/components.
+          The generated component will include a basic render function and a PropTypes
+          hash to help with development.
+
+      Available field types:
+
+          Basic prop types do not take any additional arguments. If you do not specify
+          a prop type, the generic node will be used. The basic types available are:
+
+          any
+          array
+          bool
+          element
+          func
+          number
+          object
+          node
+          shape
+          string
+
+          Special PropTypes take additional arguments in {}, and must be enclosed in
+          single quotes to keep bash from expanding the arguments in {}.
+
+          instanceOf
+          takes an optional class name in the form of {className}
+
+          oneOf
+          behaves like an enum, and takes an optional list of strings that will
+          be allowed in the form of 'name:oneOf{one,two,three}'.
+
+          oneOfType.
+          oneOfType takes an optional list of react and custom types in the form of
+          'model:oneOfType{string,number,OtherType}'
+
+      Examples:
+          rails g react:component person name
+          rails g react:component restaurant name:string rating:number owner:instanceOf{Person}
+          rails g react:component food 'kind:oneOf{meat,cheese,vegetable}'
+          rails g react:component events 'location:oneOfType{string,Restaurant}'
+      DESC
+
+      argument :attributes,
+               :type => :array,
+               :default => [],
+               :banner => "field[:type] field[:type] ..."
+
+      REACT_PROP_TYPES = {
+        "node" =>        'React.PropTypes.node',
+        "bool" =>        'React.PropTypes.bool',
+        "boolean" =>     'React.PropTypes.bool',
+        "string" =>      'React.PropTypes.string',
+        "number" =>      'React.PropTypes.number',
+        "object" =>      'React.PropTypes.object',
+        "array" =>       'React.PropTypes.array',
+        "shape" =>       'React.PropTypes.shape({})',
+        "element" =>     'React.PropTypes.element',
+        "func" =>        'React.PropTypes.func',
+        "function" =>    'React.PropTypes.func',
+        "any" =>         'React.PropTypes.any',
+
+        "instanceOf" => ->(type) {
+          'React.PropTypes.instanceOf(%s)' % type.to_s.camelize
+        },
+
+        "oneOf" => ->(*options) {
+          enums = options.map{|k| "'#{k.to_s}'"}.join(',')
+          'React.PropTypes.oneOf([%s])' % enums
+        },
+
+        "oneOfType" => ->(*options) {
+          types = options.map{|k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
+          'React.PropTypes.oneOfType([%s])' % types
+        },
+      }
+
+      def create_component_file
+        extension = "js.jsx"
+        file_path = File.join('app/assets/javascripts/components', "#{file_name}.#{extension}")
+        template("component.#{extension}", file_path)
+      end
+
+      private
+
+       def parse_attributes!
+         self.attributes = (attributes || []).map do |attr|
+           name, type, options = "", "", ""
+           options_regex = /(?<options>{.*})/
+
+           name, type = attr.split(':')
+
+           if matchdata = options_regex.match(type)
+             options = matchdata[:options]
+             type = type.gsub(options_regex, '')
+           end
+
+           { :name => name, :type => lookup(type, options) }
+         end
+       end
+
+       def self.lookup(type = "node", options = "")
+         react_prop_type = REACT_PROP_TYPES[type]
+         if react_prop_type.blank?
+           if type =~ /^[[:upper:]]/
+             react_prop_type = REACT_PROP_TYPES['instanceOf']
+           else
+             react_prop_type = REACT_PROP_TYPES['node']
+           end
+         end
+
+         options = options.to_s.gsub(/[{}]/, '').split(',')
+
+         react_prop_type = react_prop_type.call(*options) if react_prop_type.respond_to? :call
+         react_prop_type
+       end
+
+       def lookup(type = "node", options = "")
+         self.class.lookup(type, options)
+       end
+    end
+  end
+end

data/lib/generators/react/install_generator.rb

@@ -0,0 +1,58 @@
+module React
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root File.expand_path '../../templates', __FILE__
+
+      desc 'Create default react.js folder layout and prep application.js'
+
+      class_option :skip_git,
+        type: :boolean,
+        aliases: '-g',
+        default: false,
+        desc: 'Skip Git keeps'
+
+      def create_directory
+        empty_directory 'app/assets/javascripts/components'
+        create_file 'app/assets/javascripts/components/.gitkeep' unless options[:skip_git]
+      end
+
+      def inject_react
+        require_react = "//= require react\n"
+
+        if manifest.exist?
+          manifest_contents = File.read(manifest)
+
+          if manifest_contents.include? 'require turbolinks'
+            inject_into_file manifest, require_react, {after: "//= require turbolinks\n"}
+          elsif manifest_contents.include? 'require_tree'
+            inject_into_file manifest, require_react, {before: '//= require_tree'}
+          else
+            append_file manifest, require_react
+          end
+        else
+          create_file manifest, require_react
+        end
+      end
+
+      def inject_components
+        inject_into_file manifest, "//= require components\n", {after: "//= require react\n"}
+      end
+
+      def inject_react_ujs
+        inject_into_file manifest, "//= require react_ujs\n", {after: "//= require react\n"}
+      end
+
+      def create_components
+        components_js = "//= require_tree ./components\n"
+        components_file = File.join(*%w(app assets javascripts components.js))
+        create_file components_file, components_js
+      end
+
+      private
+
+      def manifest
+        Pathname.new(destination_root).join('app/assets/javascripts', 'application.js')
+      end
+    end
+  end
+end

data/lib/generators/templates/component.js.jsx

@@ -0,0 +1,23 @@
+var <%= file_name.camelize %> = React.createClass({
+<% if attributes.size > 0 -%>
+  propTypes: {
+<% attributes.each_with_index do |attribute, idx| -%>
+    <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
+<% end -%>
+  },
+<% end -%>
+
+  render: function() {
+<% if attributes.size > 0 -%>
+    return (
+      <div>
+<% attributes.each do |attribute| -%>
+        <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name] %>}</div>
+<% end -%>
+      </div>
+    );
+<% else -%>
+    return <div />;
+<% end -%>
+  }
+});

data/lib/react-rails.rb

@@ -1,3 +1,5 @@
 require 'react/jsx'
+require 'react/renderer'
 require 'react/rails'
+require 'react/console'
 

data/lib/react/console.rb

@@ -0,0 +1,30 @@
+module React
+  class Console
+    def self.polyfill_js
+      # Overwrite global `console` object with something that can capture messages
+      # to return to client later for debugging
+      <<-JS
+      var console = { history: [] };
+      ['error', 'log', 'info', 'warn'].forEach(function (fn) {
+        console[fn] = function () {
+          console.history.push({level: fn, arguments: Array.prototype.slice.call(arguments)});
+        };
+      });
+      JS
+    end
+
+    def self.replay_as_script_js
+      <<-JS
+      (function (history) {
+        if (history && history.length > 0) {
+          result += '\\n<scr'+'ipt>';
+          history.forEach(function (msg) {
+            result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+          });
+          result += '\\n</scr'+'ipt>';
+        }
+      })(console.history);
+      JS
+    end
+  end
+end

data/lib/react/jsx.rb

@@ -1,21 +1,36 @@
 require 'execjs'
 require 'react/source'
 require 'react/jsx/template'
+require 'rails'
 
 module React
   module JSX
+    mattr_accessor :transform_options
+
     def self.context
-      # TODO: create React::Source::contents_for
-      contents =
-        # If execjs uses therubyracer, there is no 'global'. Make sure
-        # we have it so JSX script can work properly.
-        'var global = global || this;' +
-        File.read(React::Source.bundled_path_for('JSXTransformer.js'))
-      @context ||= ExecJS.compile(contents)
+      # lazily loaded during first request and reloaded every time when in dev or test
+      unless @context && ::Rails.env.production?
+        contents =
+          # If execjs uses therubyracer, there is no 'global'. Make sure
+          # we have it so JSX script can work properly.
+          'var global = global || this;' +
+
+          # search for transformer file using sprockets - allows user to override
+          # this file in his own application
+          File.read(::Rails.application.assets.resolve('JSXTransformer.js'))
+
+        @context = ExecJS.compile(contents)
+      end
+
+      @context
     end
 
-    def self.transform(code)
-      result = context.call('JSXTransformer.transform', code)
+    def self.transform(code, options={})
+      js_options = {
+        stripTypes: options[:strip_types],
+        harmony: options[:harmony],
+      }
+      result = context.call('JSXTransformer.transform', code, js_options)
       return result['code']
     end
   end

data/lib/react/jsx/template.rb

@@ -9,8 +9,8 @@ module React
       def prepare
       end
 
-      def evaluate(scopre, locals, &block)
-        @output ||= JSX::transform(data)
+      def evaluate(scope, locals, &block)
+        @output ||= JSX::transform(data, JSX.transform_options)
       end
     end
   end

data/lib/react/rails.rb

@@ -1,2 +1,3 @@
 require 'react/rails/railtie'
 require 'react/rails/engine'
+require 'react/rails/view_helper'

data/lib/react/rails/engine.rb

@@ -1,7 +1,7 @@
 module React
   module Rails
     class Engine < ::Rails::Engine
-      initializer "react_rails.setup_engine", :after => "sprockets.environment", :group => :all do |app|
+      initializer "react_rails.setup_engine", :group => :all do |app|
         app.assets.register_engine '.jsx', React::JSX::Template
       end
     end

data/lib/react/rails/railtie.rb

@@ -5,32 +5,83 @@ module React
     class Railtie < ::Rails::Railtie
       config.react = ActiveSupport::OrderedOptions.new
 
-      initializer "react_rails.setup_vendor", :after => "sprockets.environment", group: :all do |app|
-        variant = app.config.react.variant
+      # Sensible defaults. Can be overridden in application.rb
+      config.react.variant = (::Rails.env.production? ? :production : :development)
+      config.react.addons = false
+      config.react.jsx_transform_options = {}
+      # Server-side rendering
+      config.react.max_renderers = 10
+      config.react.timeout = 20 #seconds
+      config.react.react_js = lambda {File.read(::Rails.application.assets.resolve('react.js'))}
+      config.react.component_filenames = ['components.js']
 
+      # Watch .jsx files for changes in dev, so we can reload the JS VMs with the new JS code.
+      initializer "react_rails.add_watchable_files", group: :all do |app|
+        app.config.watchable_files.concat Dir["#{app.root}/app/assets/javascripts/**/*.jsx*"]
+      end
+
+      # Include the react-rails view helper lazily
+      initializer "react_rails.setup_view_helpers", group: :all do |app|
+        React::JSX.transform_options = app.config.react.jsx_transform_options
+        ActiveSupport.on_load(:action_view) do
+          include ::React::Rails::ViewHelper
+        end
+      end
+
+      initializer "react_rails.setup_vendor", group: :all do |app|
         # Mimic behavior of ember-rails...
         # We want to include different files in dev/prod. The unminified builds
         # contain console logging for invariants and logging to help catch
         # common mistakes. These are all stripped out in the minified build.
-        if variant = app.config.react.variant || ::Rails.env.test?
-          variant ||= :development
-          addons = app.config.react.addons || false
-
-          # Copy over the variant into a path that sprockets will pick up.
-          # We'll always copy to 'react.js' so that no includes need to change.
-          # We'll also always copy of JSXTransformer.js
-          tmp_path = app.root.join('tmp/react-rails')
-          filename = 'react' + (addons ? '-with-addons' : '') + (variant == :production ? '.min.js' : '.js')
-          FileUtils.mkdir_p(tmp_path)
-          FileUtils.cp(::React::Source.bundled_path_for(filename),
-                       tmp_path.join('react.js'))
-          FileUtils.cp(::React::Source.bundled_path_for('JSXTransformer.js'),
-                       tmp_path.join('JSXTransformer.js'))
-
-          # Make sure it can be found
-          app.assets.append_path(tmp_path)
+
+        # Copy over the variant into a path that sprockets will pick up.
+        # We'll always copy to 'react.js' so that no includes need to change.
+        # We'll also always copy of JSXTransformer.js
+        tmp_path = app.root.join('tmp/react-rails')
+        filename = 'react' +
+                   (app.config.react.addons ? '-with-addons' : '') +
+                   (app.config.react.variant == :production ? '.min.js' : '.js')
+        FileUtils.mkdir_p(tmp_path)
+        FileUtils.cp(::React::Source.bundled_path_for(filename),
+                     tmp_path.join('react.js'))
+        FileUtils.cp(::React::Source.bundled_path_for('JSXTransformer.js'),
+                     tmp_path.join('JSXTransformer.js'))
+        app.assets.prepend_path tmp_path
+
+        # Allow overriding react files that are not based on environment
+        # e.g. /vendor/assets/react/JSXTransformer.js
+        dropin_path = app.root.join("vendor/assets/react")
+        app.assets.prepend_path dropin_path if dropin_path.exist?
+
+        # Allow overriding react files that are based on environment
+        # e.g. /vendor/assets/react/development/react.js
+        dropin_path_env = app.root.join("vendor/assets/react/#{app.config.react.variant}")
+        app.assets.prepend_path dropin_path_env if dropin_path_env.exist?
+      end
+
+
+      config.after_initialize do |app|
+        # Server Rendering
+        # Concat component_filenames together for server rendering
+        app.config.react.components_js = lambda {
+          app.config.react.component_filenames.map do |filename|
+            app.assets[filename].to_s
+          end.join(";")
+        }
+
+        do_setup = lambda do
+          cfg = app.config.react
+          React::Renderer.setup!( cfg.react_js, cfg.components_js, cfg.replay_console,
+                                {:size => cfg.max_renderers, :timeout => cfg.timeout})
         end
+
+        do_setup.call
+
+        # Reload the JS VMs in dev when files change
+        ActionDispatch::Reloader.to_prepare(&do_setup)
       end
+
+
     end
   end
 end

data/lib/react/rails/version.rb

@@ -1,8 +1,6 @@
 module React
   module Rails
-    # Version numbers will track react-source, but we'll add another level so
-    # that we can increment, but have some amount of stability.
-    VERSION = '0.13.0.0'
+    # If you change this, make sure to update VERSIONS.md
+    VERSION = '1.0.0'
   end
 end
-

data/lib/react/rails/view_helper.rb

@@ -0,0 +1,28 @@
+module React
+  module Rails
+    module ViewHelper
+
+      # Render a UJS-type HTML tag annotated with data attributes, which
+      # are used by react_ujs to actually instantiate the React component
+      # on the client.
+      #
+      def react_component(name, args = {}, options = {}, &block)
+        options = {:tag => options} if options.is_a?(Symbol)
+        block = Proc.new{concat React::Renderer.render(name, args)} if options[:prerender]
+
+        html_options = options.reverse_merge(:data => {})
+        html_options[:data].tap do |data|
+          data[:react_class] = name
+          data[:react_props] = React::Renderer.react_props(args) unless args.empty?
+        end
+        html_tag = html_options[:tag] || :div
+        
+        # remove internally used properties so they aren't rendered to DOM
+        html_options.except!(:tag, :prerender)
+        
+        content_tag(html_tag, '', html_options, &block)
+      end
+
+    end
+  end
+end

data/lib/react/renderer.rb

@@ -0,0 +1,83 @@
+require 'connection_pool'
+
+module React
+  class Renderer
+
+    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")
+        super(message)
+      end
+    end
+
+    cattr_accessor :pool
+
+    def self.setup!(react_js, components_js, replay_console, args={})
+      args.assert_valid_keys(:size, :timeout)
+      @@react_js = react_js
+      @@components_js = components_js
+      @@replay_console = replay_console
+      @@pool.shutdown{} if @@pool
+      reset_combined_js!
+      default_pool_options = {:size =>10, :timeout => 20}
+      @@pool = ConnectionPool.new(default_pool_options.merge(args)) { self.new }
+    end
+
+    def self.render(component, args={})
+      @@pool.with do |renderer|
+        renderer.render(component, args)
+      end
+    end
+
+    def self.react_props(args={})
+      if args.is_a? String
+        args
+      else
+        args.to_json
+      end
+    end
+
+    def context
+      @context ||= ExecJS.compile(self.class.combined_js)
+    end
+
+    def render(component, args={})
+      react_props = React::Renderer.react_props(args)
+      jscode = <<-JS
+        (function () {
+          var result = React.renderToString(React.createElement(#{component}, #{react_props}));
+          #{@@replay_console ? React::Console.replay_as_script_js : ''}
+          return result;
+        })()
+      JS
+      context.eval(jscode).html_safe
+    rescue ExecJS::ProgramError => e
+      raise PrerenderError.new(component, react_props, e)
+    end
+
+
+    private
+
+    def self.setup_combined_js
+      <<-JS
+        var global = global || this;
+        var self = self || this;
+        var window = window || this;
+        #{React::Console.polyfill_js}
+        #{@@react_js.call};
+        React = global.React;
+        #{@@components_js.call};
+      JS
+    end
+
+    def self.reset_combined_js!
+      @@combined_js = setup_combined_js
+    end
+
+    def self.combined_js
+      @@combined_js
+    end
+
+  end
+end

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: react-rails
 version: !ruby/object:Gem::Version
-  version: 0.13.0.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Paul O’Shannessy
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-10 00:00:00.000000000 Z
+date: 2015-04-07 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: appraisal
+  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'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -25,7 +39,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 1.2.2
 - !ruby/object:Gem::Dependency
-  name: appraisal
+  name: coffee-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -39,14 +53,98 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: coffee-rails
+  name: es5-shim-rails
   requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.5
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.5
+- !ruby/object:Gem::Dependency
+  name: jbuilder
+  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'
+- !ruby/object:Gem::Dependency
+  name: poltergeist
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.3.3
   type: :development
   prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.3.3
+- !ruby/object:Gem::Dependency
+  name: test-unit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+- !ruby/object:Gem::Dependency
+  name: turbolinks
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+- !ruby/object:Gem::Dependency
+  name: coffee-script-source
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+- !ruby/object:Gem::Dependency
+  name: connection_pool
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -84,16 +182,16 @@ dependencies:
   name: react-source
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.13.0
+        version: '0.13'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.13.0
+        version: '0.13'
 description: Compile your JSX on demand or precompile for production.
 email:
 - paul@oshannessy.com
@@ -103,14 +201,21 @@ extra_rdoc_files: []
 files:
 - LICENSE
 - README.md
+- lib/assets/javascripts/react_ujs.js.erb
+- lib/generators/react/component_generator.rb
+- lib/generators/react/install_generator.rb
+- lib/generators/templates/component.js.jsx
 - lib/react-rails.rb
+- lib/react/console.rb
 - lib/react/jsx.rb
 - lib/react/jsx/template.rb
 - lib/react/rails.rb
 - lib/react/rails/engine.rb
 - lib/react/rails/railtie.rb
 - lib/react/rails/version.rb
-homepage: https://github.com/facebook/react-rails
+- lib/react/rails/view_helper.rb
+- lib/react/renderer.rb
+homepage: https://github.com/reactjs/react-rails
 licenses:
 - APL 2.0
 metadata: {}
@@ -130,7 +235,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: React/JSX adapter for the Ruby on Rails asset pipeline.