Merge pull request #198 from shakacode/react_on_rails_v2

React on rails v2

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.4"
 
 # 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.4)
       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.4)
   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 renamed to client/app/bundles/comments/startup/clientRegistration.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

@@ -0,0 +1,11 @@
+// Example of React + Redux
+import App from './ServerApp';
+import RouterApp from './ServerRouterApp';
+import ReactOnRails from 'react-on-rails';
+
+ReactOnRails.register(
+  {
+    App,
+    RouterApp,
+  }
+);

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

@@ -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/index.jade

@@ -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.4",
     "react-redux": "^4.0.0",
     "react-router": "^2.0.0-rc4",
     "redux": "^3.0.4",

client/npm-shrinkwrap.json

@@ -17,19 +17,19 @@ module.exports = {
     vendor: [
       'babel-polyfill',
       'jquery',
-      'react',
-      'react-dom',
     ],
 
     // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
     app: [
-      './app/bundles/comments/startup/clientGlobals',
+      './app/bundles/comments/startup/clientRegistration',
     ],
   },
   resolve: {
     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 +59,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/package.json

@@ -27,7 +27,11 @@ 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 +53,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.base.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.build.config.js

@@ -11,9 +11,8 @@ module.exports = {
   // the project dir
   context: __dirname,
   entry: [
-    'react',
-    'react-dom/server',
-    './app/bundles/comments/startup/serverGlobals',
+    'babel-polyfill',
+    './app/bundles/comments/startup/serverRegistration',
   ],
   output: {
     filename: 'server-bundle.js',
@@ -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.client.rails.hot.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.

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

@@ -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.