Upgrade to react_on_rails v2

This commit contains the basic steps needed to migrate from 1.x to 2.0
of react_on_rails.

Please see corresponding pull request for more details, as well as the
docs for react_on_rails.

Author: justin808

Gemfile

@@ -37,7 +37,7 @@ gem "sdoc", group: :doc
 # Use Rails Html Sanitizer for HTML sanitization
 gem "rails-html-sanitizer"
 
-gem "react_on_rails"
+gem "react_on_rails", "2.0.0.rc.3"
 
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 gem "therubyracer"

Gemfile.lock

@@ -201,10 +201,11 @@ GEM
     rainbow (2.0.0)
     rake (10.4.2)
     rdoc (4.2.0)
-    react_on_rails (1.2.0)
+    react_on_rails (2.0.0.rc.3)
       connection_pool
       execjs (~> 2.5)
       rails (>= 3.2)
+      rainbow (~> 2.0)
     ref (2.0.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
@@ -346,7 +347,7 @@ DEPENDENCIES
   rails-html-sanitizer
   rails_12factor
   rainbow
-  react_on_rails
+  react_on_rails (= 2.0.0.rc.3)
   rspec-rails
   rspec-retry
   rubocop
@@ -364,4 +365,4 @@ DEPENDENCIES
   web-console
 
 BUNDLED WITH
-   1.10.6
+   1.11.2

app/assets/javascripts/application_dev.js

@@ -17,7 +17,4 @@
 // This one depends on jQuery
 //= require turbolinks
 
-// This will soon be removed as it will be in vendor-bundle with react_on_rails 2.0
-//= require react_on_rails
-
 //= require rails_startup

app/controllers/pages_controller.rb

@@ -7,7 +7,7 @@ def index
     # app/views/pages/index.html.erb:20
     #
     #  <%= react_component('App', render(template: "/comments/index.json.jbuilder"),
-    #     generator_function: true, prerender: true) %>
+    #     prerender: true) %>
     #
     #
     # NOTE: this could be an alternate syntax if you wanted to pass comments as a variable to a partial

app/views/pages/index.html.erb

@@ -3,4 +3,4 @@
 <%= render "header" %>
 
 <%= react_component('RouterApp', render(template: "/comments/index.json.jbuilder"),
-    generator_function: true, prerender: true, raise_on_prerender_error: true) %>
+    prerender: true, raise_on_prerender_error: true) %>

app/views/pages/no_router.html.erb

@@ -3,4 +3,4 @@
 <%= render "header" %>
 
 <%= react_component('App', render(template: "/comments/index.json.jbuilder"),
-    generator_function: true, prerender: false) %>
+    prerender: false) %>

app/views/pages/simple.html.erb

@@ -9,4 +9,4 @@
 </ul>
 <hr/>
 
-<%= react_component('SimpleCommentScreen', {}, generator_function: false, prerender: false) %>
+<%= react_component('SimpleCommentScreen', {}, prerender: false) %>

client/app/bundles/comments/startup/clientGlobals.jsx

@@ -1,7 +1,12 @@
 import App from './ClientApp';
 import RouterApp from './ClientRouterApp';
 import SimpleCommentScreen from '../components/SimpleCommentScreen/SimpleCommentScreen';
+import ReactOnRails from 'react-on-rails';
 
-window.App = App;
-window.RouterApp = RouterApp;
-window.SimpleCommentScreen = SimpleCommentScreen;
+ReactOnRails.register(
+  {
+    App,
+    RouterApp,
+    SimpleCommentScreen,
+  }
+);

client/app/bundles/comments/startup/serverGlobals.jsx

@@ -1,9 +1,11 @@
 // Example of React + Redux
-// Shows the mapping from the exported object to the name used by the server rendering.
 import App from './ServerApp';
 import RouterApp from './ServerRouterApp';
+import ReactOnRails from 'react-on-rails';
 
-// We can use the node global object for exposing.
-// NodeJs: https://nodejs.org/api/globals.html#globals_global
-global.App = App;
-global.RouterApp = RouterApp;
+ReactOnRails.register(
+  {
+    App,
+    RouterApp,
+  }
+);

client/index.jade

@@ -11,4 +11,4 @@ html
     script(src="vendor-bundle.js")
     script(src="app-bundle.js")
     script.
-      ReactDOM.render(RouterApp(!{props}), document.getElementById('app'));
+      ReactOnRails.render("RouterApp", !{props}, 'app');

client/npm-shrinkwrap.json

@@ -69,6 +69,7 @@
     "react-addons-pure-render-mixin": "^0.14.3",
     "react-bootstrap": "^0.28.1",
     "react-dom": "^0.14.3",
+    "react-on-rails": "^2.0.0-rc.3",
     "react-redux": "^4.0.0",
     "react-router": "^2.0.0-rc4",
     "redux": "^3.0.4",

client/package.json

@@ -30,6 +30,8 @@ module.exports = {
     extensions: ['', '.js', '.jsx'],
     alias: {
       libs: path.join(process.cwd(), 'app', 'libs'),
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom'),
     },
   },
   plugins: [
@@ -59,10 +61,6 @@ module.exports = {
       { test: /\.(ttf|eot)$/, loader: 'file' },
       { test: /\.(jpe?g|png|gif|svg|ico)$/, loader: 'url?limit=10000' },
 
-      // React is necessary for the client rendering
-      { test: require.resolve('react'), loader: 'expose?React' },
-      { test: require.resolve('react-dom'), loader: 'expose?ReactDOM' },
-      { test: require.resolve('jquery-ujs'), loader: 'imports?jQuery=jquery' },
       { test: require.resolve('jquery'), loader: 'expose?jQuery' },
       { test: require.resolve('jquery'), loader: 'expose?$' },
 

client/webpack.client.base.config.js

@@ -27,7 +27,9 @@ config.entry.vendor.unshift(
 // See webpack.common.config for adding modules common to both the webpack dev server and rails
 
 config.module.loaders.push(
-  { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
+  {
+    test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/
+  },
   {
     test: /\.css$/,
     loader: ExtractTextPlugin.extract(
@@ -49,6 +51,10 @@ config.module.loaders.push(
   {
     test: require.resolve('react'),
     loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
+  },
+  {
+    test: require.resolve('jquery-ujs'),
+    loader: 'imports?jQuery=jquery'
   }
 );
 

client/webpack.client.rails.build.config.js

@@ -67,6 +67,10 @@ config.module.loaders.push(
       'sass',
       'sass-resources',
     ],
+  },
+  {
+    test: require.resolve('jquery-ujs'),
+    loader: 'imports?jQuery=jquery'
   }
 );
 

client/webpack.client.rails.hot.config.js

@@ -11,8 +11,7 @@ module.exports = {
   // the project dir
   context: __dirname,
   entry: [
-    'react',
-    'react-dom/server',
+    'babel-polyfill',
     './app/bundles/comments/startup/serverGlobals',
   ],
   output: {
@@ -49,10 +48,6 @@ module.exports = {
           'sass-resources',
         ],
       },
-
-      // React is necessary for the client rendering:
-      { test: require.resolve('react'), loader: 'expose?React' },
-      { test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' },
     ],
   },
 

client/webpack.server.rails.build.config.js

@@ -8,7 +8,6 @@
 
   # Below options can be overriden by passing to the helper method.
   config.prerender = true # default is false
-  config.generator_function = true # 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/initializers/react_on_rails.rb

@@ -3,7 +3,7 @@ There's a bunch of gotchas with using [Jbuilder](https://github.com/rails/jbuild
 
 ```erb
 <%= react_component('App', render(template: "/comments/index.json.jbuilder"),
-    generator_function: true, prerender: true) %>
+    prerender: true) %>
 ```
 
 However, if you try to set the value of the JSON string inside of the controller, then you will run into several issues with rendering the Jbuilder template from the controller. See the notes in this the example code for app/controllers/pages_controller.rb.