diff --git a/Gemfile b/Gemfile index e95b5c36..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" +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 e2f298eb..69f158d1 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.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 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/clientRegistration.jsx similarity index 56% rename from client/app/bundles/comments/startup/clientGlobals.jsx rename to client/app/bundles/comments/startup/clientRegistration.jsx index ce05dbd5..f3ecc0d0 100644 --- a/client/app/bundles/comments/startup/clientGlobals.jsx +++ b/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, + } +); diff --git a/client/app/bundles/comments/startup/serverGlobals.jsx b/client/app/bundles/comments/startup/serverGlobals.jsx deleted file mode 100644 index cb825b2e..00000000 --- a/client/app/bundles/comments/startup/serverGlobals.jsx +++ /dev/null @@ -1,9 +0,0 @@ -// 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'; - -// We can use the node global object for exposing. -// NodeJs: https://nodejs.org/api/globals.html#globals_global -global.App = App; -global.RouterApp = RouterApp; diff --git a/client/app/bundles/comments/startup/serverRegistration.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx new file mode 100644 index 00000000..8a7d4eaa --- /dev/null +++ b/client/app/bundles/comments/startup/serverRegistration.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, + } +); 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..eb9397db 100644 --- a/client/npm-shrinkwrap.json +++ b/client/npm-shrinkwrap.json @@ -4074,6 +4074,10 @@ "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.4", + "from": "react-on-rails@2.0.0-rc.4" + }, "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..1d086dad 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.4", "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..c7e4f05e 100644 --- a/client/webpack.client.base.config.js +++ b/client/webpack.client.base.config.js @@ -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?$' }, diff --git a/client/webpack.client.rails.build.config.js b/client/webpack.client.rails.build.config.js index d2d67890..db250632 100644 --- a/client/webpack.client.rails.build.config.js +++ b/client/webpack.client.rails.build.config.js @@ -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', } ); diff --git a/client/webpack.client.rails.hot.config.js b/client/webpack.client.rails.hot.config.js index 6144eff5..5bb9562a 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..2a70cdba 100644 --- a/client/webpack.server.rails.build.config.js +++ b/client/webpack.server.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' }, ], }, 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.