From 5b1b8698e8daf0f0b94e987740bc85ee237ef608 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 13 Jan 2016 00:08:45 -0800 Subject: [PATCH 1/4] 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. --- Gemfile | 2 +- Gemfile.lock | 7 ++++--- app/assets/javascripts/application_dev.js | 3 --- app/controllers/pages_controller.rb | 2 +- app/views/pages/index.html.erb | 2 +- app/views/pages/no_router.html.erb | 2 +- app/views/pages/simple.html.erb | 2 +- .../app/bundles/comments/startup/clientGlobals.jsx | 11 ++++++++--- .../app/bundles/comments/startup/serverGlobals.jsx | 12 +++++++----- client/index.jade | 2 +- client/npm-shrinkwrap.json | 5 +++++ client/package.json | 1 + client/webpack.client.base.config.js | 6 ++---- client/webpack.client.rails.build.config.js | 8 +++++++- client/webpack.client.rails.hot.config.js | 4 ++++ client/webpack.server.rails.build.config.js | 7 +------ config/initializers/react_on_rails.rb | 1 - docs/jbuilder.md | 2 +- 18 files changed, 46 insertions(+), 33 deletions(-) diff --git a/Gemfile b/Gemfile index e95b5c36..2c7d4c95 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index e2f298eb..23652a46 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/assets/javascripts/application_dev.js b/app/assets/javascripts/application_dev.js index 45981e68..d5552a07 100644 --- a/app/assets/javascripts/application_dev.js +++ b/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 diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 585ee068..03ba0a7b 100644 --- a/app/controllers/pages_controller.rb +++ b/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 diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb index 5aceab01..bed28134 100644 --- a/app/views/pages/index.html.erb +++ b/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) %> diff --git a/app/views/pages/no_router.html.erb b/app/views/pages/no_router.html.erb index 4537ac8b..27d92631 100644 --- a/app/views/pages/no_router.html.erb +++ b/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) %> diff --git a/app/views/pages/simple.html.erb b/app/views/pages/simple.html.erb index 40691d22..81e85343 100644 --- a/app/views/pages/simple.html.erb +++ b/app/views/pages/simple.html.erb @@ -9,4 +9,4 @@
-<%= react_component('SimpleCommentScreen', {}, generator_function: false, prerender: false) %> +<%= react_component('SimpleCommentScreen', {}, prerender: false) %> diff --git a/client/app/bundles/comments/startup/clientGlobals.jsx b/client/app/bundles/comments/startup/clientGlobals.jsx index ce05dbd5..f3ecc0d0 100644 --- a/client/app/bundles/comments/startup/clientGlobals.jsx +++ b/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, + } +); diff --git a/client/app/bundles/comments/startup/serverGlobals.jsx b/client/app/bundles/comments/startup/serverGlobals.jsx index cb825b2e..8a7d4eaa 100644 --- a/client/app/bundles/comments/startup/serverGlobals.jsx +++ b/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, + } +); diff --git a/client/index.jade b/client/index.jade index 6df9ea4f..bb7c6899 100644 --- a/client/index.jade +++ b/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'); diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json index 81489068..c381390b 100644 --- a/client/npm-shrinkwrap.json +++ b/client/npm-shrinkwrap.json @@ -4074,6 +4074,11 @@ "from": "react-dom@>=0.14.3 <0.15.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.14.5.tgz" }, + "react-on-rails": { + "version": "2.0.0-rc.3", + "from": "react-on-rails@2.0.0-rc.3", + "resolved": "https://registry.npmjs.org/react-on-rails/-/react-on-rails-2.0.0-rc.3.tgz" + }, "react-overlays": { "version": "0.5.4", "from": "react-overlays@>=0.5.2 <0.6.0", diff --git a/client/package.json b/client/package.json index 4a154c5c..adc23c99 100644 --- a/client/package.json +++ b/client/package.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", diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js index 5c0ad1e9..e72fbe96 100644 --- a/client/webpack.client.base.config.js +++ b/client/webpack.client.base.config.js @@ -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?$' }, diff --git a/client/webpack.client.rails.build.config.js b/client/webpack.client.rails.build.config.js index d2d67890..2e59bc9c 100644 --- a/client/webpack.client.rails.build.config.js +++ b/client/webpack.client.rails.build.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' } ); diff --git a/client/webpack.client.rails.hot.config.js b/client/webpack.client.rails.hot.config.js index 6144eff5..54130f65 100644 --- a/client/webpack.client.rails.hot.config.js +++ b/client/webpack.client.rails.hot.config.js @@ -67,6 +67,10 @@ config.module.loaders.push( 'sass', 'sass-resources', ], + }, + { + test: require.resolve('jquery-ujs'), + loader: 'imports?jQuery=jquery' } ); diff --git a/client/webpack.server.rails.build.config.js b/client/webpack.server.rails.build.config.js index 35364f76..fcdcbb5e 100644 --- a/client/webpack.server.rails.build.config.js +++ b/client/webpack.server.rails.build.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' }, ], }, diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb index 41d6c24e..7802e01a 100644 --- a/config/initializers/react_on_rails.rb +++ b/config/initializers/react_on_rails.rb @@ -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. diff --git a/docs/jbuilder.md b/docs/jbuilder.md index f777f805..e1352884 100644 --- a/docs/jbuilder.md +++ b/docs/jbuilder.md @@ -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. From e12e46b5eff9b0d0c9dc19f6a0549ba934bbe593 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 13 Jan 2016 00:57:01 -0800 Subject: [PATCH 2/4] Rename client/server Globals to Registration And remove React and ReactDom from Webpack entry points. --- .../startup/{clientGlobals.jsx => clientRegistration.jsx} | 0 .../startup/{serverGlobals.jsx => serverRegistration.jsx} | 0 client/webpack.client.base.config.js | 4 +--- client/webpack.server.rails.build.config.js | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) rename client/app/bundles/comments/startup/{clientGlobals.jsx => clientRegistration.jsx} (100%) rename client/app/bundles/comments/startup/{serverGlobals.jsx => serverRegistration.jsx} (100%) diff --git a/client/app/bundles/comments/startup/clientGlobals.jsx b/client/app/bundles/comments/startup/clientRegistration.jsx similarity index 100% rename from client/app/bundles/comments/startup/clientGlobals.jsx rename to client/app/bundles/comments/startup/clientRegistration.jsx diff --git a/client/app/bundles/comments/startup/serverGlobals.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx similarity index 100% rename from client/app/bundles/comments/startup/serverGlobals.jsx rename to client/app/bundles/comments/startup/serverRegistration.jsx diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js index e72fbe96..c7e4f05e 100644 --- a/client/webpack.client.base.config.js +++ b/client/webpack.client.base.config.js @@ -17,13 +17,11 @@ 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: { diff --git a/client/webpack.server.rails.build.config.js b/client/webpack.server.rails.build.config.js index fcdcbb5e..2a70cdba 100644 --- a/client/webpack.server.rails.build.config.js +++ b/client/webpack.server.rails.build.config.js @@ -12,7 +12,7 @@ module.exports = { context: __dirname, entry: [ 'babel-polyfill', - './app/bundles/comments/startup/serverGlobals', + './app/bundles/comments/startup/serverRegistration', ], output: { filename: 'server-bundle.js', From 428549fb5c14a0cfaf74b325d205922e9f4ce05e Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 13 Jan 2016 11:28:19 -0800 Subject: [PATCH 3/4] Fix linting issues --- client/webpack.client.rails.build.config.js | 6 ++++-- client/webpack.client.rails.hot.config.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/client/webpack.client.rails.build.config.js b/client/webpack.client.rails.build.config.js index 2e59bc9c..db250632 100644 --- a/client/webpack.client.rails.build.config.js +++ b/client/webpack.client.rails.build.config.js @@ -28,7 +28,9 @@ config.entry.vendor.unshift( config.module.loaders.push( { - test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ + test: /\.jsx?$/, + loader: 'babel-loader', + exclude: /node_modules/, }, { test: /\.css$/, @@ -54,7 +56,7 @@ config.module.loaders.push( }, { test: require.resolve('jquery-ujs'), - loader: 'imports?jQuery=jquery' + loader: 'imports?jQuery=jquery', } ); diff --git a/client/webpack.client.rails.hot.config.js b/client/webpack.client.rails.hot.config.js index 54130f65..5bb9562a 100644 --- a/client/webpack.client.rails.hot.config.js +++ b/client/webpack.client.rails.hot.config.js @@ -70,7 +70,7 @@ config.module.loaders.push( }, { test: require.resolve('jquery-ujs'), - loader: 'imports?jQuery=jquery' + loader: 'imports?jQuery=jquery', } ); From 5347c83b25bcfc8104c5ab42a42eec34abf5dbf1 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 13 Jan 2016 23:56:01 -0800 Subject: [PATCH 4/4] Update to v2.0.0.rc4 --- Gemfile | 2 +- Gemfile.lock | 4 ++-- client/npm-shrinkwrap.json | 5 ++--- client/package.json | 2 +- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/Gemfile b/Gemfile index 2c7d4c95..fbe3439d 100644 --- a/Gemfile +++ b/Gemfile @@ -37,7 +37,7 @@ gem "sdoc", group: :doc # Use Rails Html Sanitizer for HTML sanitization gem "rails-html-sanitizer" -gem "react_on_rails", "2.0.0.rc.3" +gem "react_on_rails", "2.0.0.rc.4" # See https://github.com/sstephenson/execjs#readme for more supported runtimes gem "therubyracer" diff --git a/Gemfile.lock b/Gemfile.lock index 23652a46..69f158d1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -201,7 +201,7 @@ GEM rainbow (2.0.0) rake (10.4.2) rdoc (4.2.0) - react_on_rails (2.0.0.rc.3) + react_on_rails (2.0.0.rc.4) connection_pool execjs (~> 2.5) rails (>= 3.2) @@ -347,7 +347,7 @@ DEPENDENCIES rails-html-sanitizer rails_12factor rainbow - react_on_rails (= 2.0.0.rc.3) + react_on_rails (= 2.0.0.rc.4) rspec-rails rspec-retry rubocop diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json index c381390b..eb9397db 100644 --- a/client/npm-shrinkwrap.json +++ b/client/npm-shrinkwrap.json @@ -4075,9 +4075,8 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.14.5.tgz" }, "react-on-rails": { - "version": "2.0.0-rc.3", - "from": "react-on-rails@2.0.0-rc.3", - "resolved": "https://registry.npmjs.org/react-on-rails/-/react-on-rails-2.0.0-rc.3.tgz" + "version": "2.0.0-rc.4", + "from": "react-on-rails@2.0.0-rc.4" }, "react-overlays": { "version": "0.5.4", diff --git a/client/package.json b/client/package.json index adc23c99..1d086dad 100644 --- a/client/package.json +++ b/client/package.json @@ -69,7 +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-on-rails": "^2.0.0-rc.4", "react-redux": "^4.0.0", "react-router": "^2.0.0-rc4", "redux": "^3.0.4",