react_on_rails 8.0.2 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintignore +2 -0
  3. data/.gitignore +2 -2
  4. data/.rubocop.yml +5 -0
  5. data/.travis.yml +12 -1
  6. data/CHANGELOG.md +185 -6
  7. data/CONTRIBUTING.md +2 -2
  8. data/Gemfile +6 -2
  9. data/Gemfile.rails32 +74 -0
  10. data/KUDOS.md +5 -0
  11. data/README.md +200 -84
  12. data/Rakefile +11 -1
  13. data/app/helpers/react_on_rails_helper.rb +1 -1
  14. data/docs/additional-reading/asset-pipeline.md +20 -0
  15. data/docs/additional-reading/hot-reloading-rails-development.md +4 -75
  16. data/docs/additional-reading/node-server-rendering.md +2 -166
  17. data/docs/additional-reading/rails-assets-relative-paths.md +3 -1
  18. data/docs/additional-reading/rails-engine-integration.md +1 -1
  19. data/docs/additional-reading/rspec-configuration.md +7 -24
  20. data/docs/api/ruby-api-hot-reload-view-helpers.md +2 -2
  21. data/{lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt → docs/basics/configuration.md} +80 -41
  22. data/docs/basics/generator.md +0 -5
  23. data/docs/basics/installation-overview.md +6 -5
  24. data/docs/contributor-info/generator-testing.md +0 -9
  25. data/docs/tutorial.md +31 -34
  26. data/lib/generators/USAGE +0 -4
  27. data/lib/generators/react_on_rails/base_generator.rb +43 -76
  28. data/lib/generators/react_on_rails/dev_tests_generator.rb +7 -5
  29. data/lib/generators/react_on_rails/install_generator.rb +5 -10
  30. data/lib/generators/react_on_rails/react_no_redux_generator.rb +10 -9
  31. data/lib/generators/react_on_rails/react_with_redux_generator.rb +27 -17
  32. data/lib/generators/react_on_rails/templates/.eslintrc +2 -0
  33. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -0
  34. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +5 -0
  35. data/lib/generators/react_on_rails/templates/base/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +1 -2
  36. data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -1
  37. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +12 -0
  38. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +41 -0
  39. data/lib/generators/react_on_rails/templates/dev_tests/.eslintrc +25 -0
  40. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -1
  41. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
  42. data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +2 -0
  43. data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/startup/HelloWorldApp.jsx +1 -3
  44. data/lib/react_on_rails/configuration.rb +21 -16
  45. data/lib/react_on_rails/git_utils.rb +9 -3
  46. data/lib/react_on_rails/prerender_error.rb +15 -9
  47. data/lib/react_on_rails/server_rendering_pool/exec.rb +21 -8
  48. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
  49. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +3 -1
  50. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +12 -8
  51. data/lib/react_on_rails/test_helper.rb +7 -6
  52. data/lib/react_on_rails/utils.rb +77 -16
  53. data/lib/react_on_rails/version.rb +1 -1
  54. data/lib/react_on_rails/version_checker.rb +2 -1
  55. data/lib/tasks/assets.rake +12 -4
  56. data/package.json +25 -21
  57. data/rakelib/dummy_apps.rake +9 -0
  58. data/rakelib/example_type.rb +4 -70
  59. data/rakelib/examples.rake +5 -55
  60. data/rakelib/node_package.rake +1 -0
  61. data/rakelib/release.rake +9 -1
  62. data/rakelib/run_rspec.rake +24 -5
  63. data/react_on_rails.gemspec +2 -1
  64. data/webpackConfigLoader.js +45 -72
  65. data/yarn.lock +638 -252
  66. metadata +36 -26
  67. data/lib/generators/react_on_rails/node_generator.rb +0 -24
  68. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -2
  69. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt +0 -15
  70. data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
  71. data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -9
  72. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -36
  73. data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +0 -77
  74. data/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml +0 -27
  75. data/lib/generators/react_on_rails/templates/base/base/package.json.tt +0 -8
  76. data/lib/generators/react_on_rails/templates/node/base/client/node/package.json +0 -10
  77. data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +0 -105
  78. /data/lib/generators/react_on_rails/templates/base/base/{client/app/bundles/HelloWorld/startup/registration.jsx.tt → app/javascript/packs/registration.js.tt} +0 -0
  79. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx → app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.js} +0 -0
  80. /data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +0 -0
  81. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx → app/javascript/bundles/HelloWorld/constants/helloWorldConstants.js} +0 -0
  82. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx → app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.js} +0 -0
  83. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx → app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.js} +0 -0
  84. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/store/helloWorldStore.jsx → app/javascript/bundles/HelloWorld/store/helloWorldStore.js} +0 -0
data/README.md CHANGED
@@ -1,49 +1,87 @@
1
1
  [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Codeship Status for shakacode/react_on_rails](https://app.codeship.com/projects/cec6c040-971f-0134-488f-0a5146246bd8/status?branch=master)](https://app.codeship.com/projects/187011) [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
2
2
 
3
- The Docs here on `master` refer to 8.0.0 including support for [webpacker_lite](https://github.com/shakacode/webpacker_lite)!
4
- *Use the [7.0.4 docs](https://github.com/shakacode/react_on_rails/tree/7.0.4) to refer to the older asset pipeline way.*
3
+ *If this projects helps you, please give us a star!*
4
+
5
+ [rails/webpacker](https://github.com/rails/webpacker) just shipped 3.0. This now enables me to ship version 9.0. See [PR #908](https://github.com/shakacode/react_on_rails/pull/908) for more details.
6
+
7
+ # React on Rails v9 is based on Webpacker 3.0!
8
+
9
+ * See the updated [Tutorial](https://github.com/shakacode/react_on_rails/blob/rails-webpacker/docs/tutorial.md).
10
+ * See the [CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/rails-webpacker/CHANGELOG.md) for migration instructions.
11
+
12
+ ## Steps to a New App with rails/webpacker v3 plus React on Rails v9.beta:
13
+ 1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory.
14
+ 2. Add beta gem version: `gem 'react_on_rails', '~> 9.0.0.beta.12'`
15
+ 3. Run the generator: `rails generate react_on_rails:install`
16
+ 4. Start the app: `foreman start -f Procfile.dev`
17
+ 5. Visit http://localhost:3000/hello_world
18
+
19
+ Turn on HMR (Hot reloading)
20
+ 1. Edit `config/webpacker.yml` and set `hmr: true`
21
+ 2. Start the app: `foreman start -f Procfile.dev-server`
22
+ 3. Visit http://localhost:3000/hello_world
23
+ 4. Edit `app/javascript/bundles/HelloWorld/components/HelloWorld.jsx`, hit save, and see the screen update.
24
+
25
+ ---------------
26
+
27
+ ## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
28
+
29
+ Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
5
30
 
6
- **[VERSION 8.0.0](https://rubygems.org/gems/react_on_rails/versions/8.0.0.beta.3)** has shipped with [webpacker_lite](https://github.com/shakacode/webpacker_lite) support! [react-webpack-rails-tutorial PR #395](https://github.com/shakacode/react-webpack-rails-tutorial/pull/395) shows the changes needed to migrate from the Asset Pipeline to Webpacker Lite. For more information, see my article: [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92). Per recent discussions, we may [eventually merge Webpacker Lite changes back into Webpacker](https://github.com/rails/webpacker/issues/464). If so, any changes will be minor if you're using Webpacker Lite.
31
+ * **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
32
+ * [Front-End Sadness to Happiness: The React on Rails Story at GORUCO 2017](https://blog.shakacode.com/front-end-sadness-to-happiness-the-react-on-rails-story-at-goruco-2017-d63b8fd26ca4)
7
33
 
8
- **For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**
34
+ We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
9
35
 
10
- **Speaking!**: Justin is speaking [GORUCO](http://goruco.com/#speakers) on Saturday, June 24, 2017 in NYC: "Front-End Sadness to Happiness: The React on Rails Story". [Email Justin](mailto:justin@shakacode.com) to give this talk at your local meetup or company. [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to be notified of local and *online* presentations of this talk. See the dates of other talks [here](https://forum.shakacode.com/t/talks-on-react-on-rails-june-2017/891).
36
+ * Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).
37
+ * Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
38
+ * Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).
39
+ * Augmenting your team to get your product completed more efficiently and quickly.
11
40
 
12
- **Aloha from Justin Gordon** ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails, including conversion of AngularJs to React. Please [contact me](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based [coaching](http://www.shakacode.com/work/shakacode-coaching-plan.pdf) for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
41
+ My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
13
42
 
14
- I'm offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
43
+ If any of this resonates with you, please email me, [justin@shakacode.com](mailto:justin@shakacode.com). I offer a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.
15
44
 
16
- Whether you have a new project or need help on an existing project, feel free to contact me directly at [justin@shakacode.com](mailto:justin@shakacode.com) and thanks in advance for any referrals!
45
+ We are **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Friends and Guests](https://www.friendsandguests.com).
17
46
 
18
- Your support keeps this project going!
47
+ I appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team [front-end happiness in the Rails world](https://www.youtube.com/watch?v=SGkTvKRPYrk).
19
48
 
20
- (Want to become a contributor? We're hiring! Want to join a 100% remote-first team? [Contact us](mailto:contact@shakacode.com) for a Slack room invite and let us know that you want to contribute.)
49
+ Aloha and best wishes from the ShakaCode team!
50
+
51
+ ------
21
52
 
22
53
  # Community
23
- Please [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send a monthly summary including announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
54
+ Please [**click to subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
24
55
 
25
56
  [![2017-01-31_14-16-56](https://cloud.githubusercontent.com/assets/1118459/22490211/f7a70418-e7bf-11e6-9bef-b3ccd715dbf8.png)](https://app.mailerlite.com/webforms/landing/l1d9x5)
26
57
 
27
- * **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room!
58
+ * **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
28
59
  * **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
29
60
  * **[@ShakaCode on Twitter](https://twitter.com/shakacode)**
61
+ * For a live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [www.reactrails.com](http://www.reactrails.com).
62
+
63
+ ------
30
64
 
31
65
  # Testimonials
32
66
  From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
67
+
33
68
  ![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)
34
69
 
35
70
  For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
36
71
 
72
+ -------
73
+
37
74
  # Articles, Videos, and Podcasts
38
75
 
39
76
  ### Articles
40
77
 
78
+ * [Front-End Sadness to Happiness: The React on Rails Story at GORUCO 2017](https://blog.shakacode.com/front-end-sadness-to-happiness-the-react-on-rails-story-at-goruco-2017-d63b8fd26ca4)
41
79
  * [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92)
42
80
  * [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
43
81
  * [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
44
82
 
45
83
  ### Videos
46
-
84
+ 1. [GORUCO 2017: Front-End Sadness to Happiness: The React on Rails Story by Justin Gordon](https://www.youtube.com/watch?v=SGkTvKRPYrk)
47
85
  1. [egghead.io: Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
48
86
  1. [egghead.io: Creating a redux component with React on Rails](https://egghead.io/lessons/react-add-redux-state-management-to-a-react-on-rails-project)
49
87
  1. [React On Rails Tutorial Series](https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU)
@@ -54,11 +92,17 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
54
92
  ### Podcasts
55
93
  * [284 Ruby Rogues: React on Rails with Justin Gordon and Rob Wise](https://devchat.tv/ruby-rogues/284-rr-react-on-rails-with-justin-gordon-and-rob-wise)
56
94
 
95
+ ------
96
+
57
97
  # NEWS
58
- * 2017-04-25: 7.0.0 Shipped! Performance improvements! Please upgrade! Only "breaking" change is that you have to update both the node module and the Ruby gem.
59
- * 2017-04-09: 8.0.0 beta work to include webpacker_lite gem has begun. See [#786](https://github.com/shakacode/react_on_rails/issues/786).
98
+ * **[VERSION 9.0.0.beta (branch)](https://github.com/shakacode/react_on_rails/tree/rails-webpacker) shipped!** This version depends on Webpacker directly. See the [CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/rails-webpacker/CHANGELOG.md) for migration instructions.
99
+ * [VERSION 8.1.0](https://rubygems.org/gems/react_on_rails/) shipped with [webpacker_lite](https://github.com/shakacode/webpacker_lite) (soon [**webpacker**](https://github.com/rails/webpacker/issues/464#issuecomment-310986140) support! [react-webpack-rails-tutorial PR #395](https://github.com/shakacode/react-webpack-rails-tutorial/pull/395) shows the changes needed to migrate from the Asset Pipeline to Webpacker Lite. For more information, see my article: [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92). Per recent discussions, we [will merge Webpacker Lite changes back into Webpacker](https://github.com/rails/webpacker/issues/464#issuecomment-310986140). There's no reason to wait for this. The upgrade will eventually be trivial.
100
+ * The Docs here on `master` refer to 8.1.0 including support for [webpacker_lite](https://github.com/shakacode/webpacker_lite). The docs on [on the 9.0.0 beta branch](https://github.com/shakacode/react_on_rails/tree/rails-webpacker) refer to using Webpacker rather than Webpacker Lite.
101
+ *Use the [7.0.4 docs](https://github.com/shakacode/react_on_rails/tree/7.0.4) to refer to the older asset pipeline way.*
60
102
  * *See [NEWS.md](NEWS.md) for more notes over time.*
61
103
 
104
+ ------
105
+
62
106
  # React on Rails
63
107
 
64
108
  **Project Objective**: To provide an opinionated and optimal framework for integrating Ruby on Rails with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://facebook.github.io/react/), [**Redux**](https://github.com/reactjs/redux), [**React-Router**](https://github.com/reactjs/react-router). This differs significantly from typical Rails architecture. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. If you are interested in implementing React using traditional Rails architecture, see [react-rails](https://github.com/reactjs/react-rails).
@@ -70,7 +114,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
70
114
  + [Features](#features)
71
115
  + [Why Webpack?](#why-webpack)
72
116
  + [Getting Started](#getting-started)
73
- - [Installation Summary](#installation-summary)
117
+ - [Installation Overview](#installation-overview)
74
118
  - [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
75
119
  - [Including your React Component in your Rails Views](#including-your-react-component-in-your-rails-views)
76
120
  - [I18n](#i18n)
@@ -83,7 +127,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
83
127
  - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
84
128
  - [React-Router](#react-router)
85
129
  - [Deployment](#deployment)
86
- + [Integration with Node](#integration-with-node)
130
+ + [Integration with Node.js for Server Rendering](#user-content-integration-with-nodejs-for-server-rendering)
87
131
  + [Additional Documentation](#additional-documentation)
88
132
  + [Contributing](#contributing)
89
133
  + [License](#license)
@@ -103,7 +147,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac
103
147
 
104
148
  ## Why Webpack?
105
149
 
106
- Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker_lite](https://github.com/shakacode/webpacker_lite) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
150
+ Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
107
151
 
108
152
  This usage of webpack fits neatly and simply into existing Rails apps. You can include React components on a Rails view with a simple helper.
109
153
 
@@ -121,10 +165,18 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
121
165
  1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `client/package.json` file.
122
166
 
123
167
  ```ruby
124
- gem "react_on_rails", "8.0.0"
168
+ gem "react_on_rails", "9.0.0"
169
+ gem "webpacker", "~> 3.0"
125
170
  ```
126
171
 
127
- 2. Commit this to git (you cannot run the generator unless you do this or pass the option `--ignore-warnings`).
172
+ 2. Run the following 2 commands to install Webpacker with React:
173
+ ```
174
+ bundle exec rails webpacker:install
175
+ bundle exec rails webpacker:install:react
176
+
177
+ ```
178
+
179
+ 2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
128
180
 
129
181
  3. See help for the generator:
130
182
 
@@ -138,13 +190,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
138
190
  rails generate react_on_rails:install
139
191
  ```
140
192
 
141
- 5. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
142
-
143
- ```bash
144
- bundle && yarn
145
- ```
146
-
147
- 6. Ensure that you have `foreman` installed: `gem install foreman`.
193
+ 5. Ensure that you have `foreman` installed: `gem install foreman`.
148
194
 
149
195
  7. Start your Rails server:
150
196
 
@@ -175,7 +221,7 @@ Configure the `config/initializers/react_on_rails.rb`. You can adjust some neces
175
221
  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>
176
222
  ```
177
223
 
178
- + The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld," you would register it with the following lines:
224
+ + The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld", you would register it with the following lines:
179
225
 
180
226
  ```js
181
227
  import ReactOnRails from 'react-on-rails';
@@ -208,12 +254,17 @@ See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
208
254
  ## NPM
209
255
  All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command:
210
256
 
211
- ```
257
+ ```bash
212
258
  cd client && yarn add react-on-rails
213
259
  ```
214
260
 
215
261
  That will install the latest version and update your package.json.
216
262
 
263
+ ## Webpacker Configuration
264
+
265
+ React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
266
+
267
+
217
268
  ## How it Works
218
269
  The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
219
270
 
@@ -226,14 +277,14 @@ Now the server will interpret your JavaScript using [ExecJS](https://github.com/
226
277
 
227
278
  In the following screenshot you can see the 3 parts of React on Rails rendering:
228
279
 
229
- 1. A hidden HTML div that contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to convert take this data and build initialize React components.
280
+ 1. A hidden HTML div contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to take this data and build initialize React components.
230
281
  2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component
231
- 3. Additional JavaScript is placed to console log any messages, such as server rendering errors. Note, these server side logs can be configured to only be sent to the server logs.
282
+ 3. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note, these server side logs can be configured only to be sent to the server logs.
232
283
 
233
284
  **Note**:
234
285
 
235
286
  * If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
236
- * The below image is not yet updated for version 7.0.0 which uses a `<script>` tag for the props. Instead of a hidden div, we have the props inside of the a `<script>` tag.
287
+ * The below image is not yet updated for version 7.0.0 which uses a `<script>` tag for the props. Instead of a hidden div, we have the props inside of the `<script>` tag.
237
288
 
238
289
  ![Comparison of a normal React Component with its server-rendered version](https://cloud.githubusercontent.com/assets/1118459/12607542/a959d5c8-c48a-11e5-8187-2433d543ccaa.png)
239
290
 
@@ -244,28 +295,60 @@ On production deployments that use asset precompilation, such as Heroku deployme
244
295
 
245
296
  If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
246
297
 
247
- ### Rails Context
248
- When you use a "generator function" to create react components (or renderedHtml on the server) or you used shared redux stores, you get 2 params passed to your function:
249
298
 
250
- 1. Props that you pass in the view helper of either `react_component` or `redux_store`
251
- 2. Rails contextual information, such as the current pathname. You can customize this in your config file.
299
+ ### Generator Functions
300
+ Why would you create a function that returns a React component rather than simply an Object that is a React class?
301
+
302
+ 1. You need access to the `railsContext`. See documentation for the railsContext in terms of why you might need it. You **need** a generator function to access the `railsContext`.
303
+ 1. You may want the ability to use the passed-in props to initialize a redux store or set up react-router
304
+ 1. You may want to return different components depending on what's in the props.
305
+
306
+ ReactOnRails will automatically detect a registered generator function. Thus, there is no difference between registering a React Component versus a "generator function."
307
+
308
+ Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }.
309
+
310
+ For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
311
+ { renderedHtml: { componentHtml, customKey1, customKey2} }
312
+
313
+ ### Rails Context and Generator Functions
314
+ When you use a "generator function" to create react components (or renderedHtml on the server), or you used shared redux stores, you get two params passed to your function that creates a React component:
252
315
 
253
- This information (`props` and `railsContext`) should be the same regardless of either client or server side rendering.
316
+ 1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
317
+ 2. `railsContext`: Rails contextual information, such as the current pathname. You can customize this in your config file. **Note**: The `railsContext` is not related to the concept of a ["context" for React components](https://facebook.github.io/react/docs/context.html#how-to-use-context).
254
318
 
255
- While you could manually pass the `railsContext` information in as "props", the `rails_context` is a convenience because it's passed consistently to all invocations of generator functions.
319
+ This parameters (`props` and `railsContext`) will be the same regardless of either client or server side rendering, except for the key `serverSide` based on whether or not you are server rendering.
320
+
321
+ While you could manually configure your Rails code to pass the "`railsContext` information" with the rest of your "props", the `railsContext` is a convenience because it's passed consistently to all invocations of generator functions.
322
+
323
+ For example, suppose you create a "generator function" called MyAppComponent.
324
+
325
+ ```js
326
+ import React from 'react';
327
+ const MyAppComponent = (props, railsContext) => (
328
+ <div>
329
+ <p>props are: {JSON.stringify(props)}</p>
330
+ <p>railsContext is: {JSON.stringify(railsContext)}
331
+ </p>
332
+ </div>
333
+ );
334
+ export default MyAppComponent;
335
+ ```
336
+
337
+ *Note: you will get a React browser console warning if you try to serverRender this since the value of `serverSide` will be different for server rendering.*
256
338
 
257
339
  So if you register your generator function `MyAppComponent`, it will get called like:
258
340
 
259
341
  ```js
260
342
  reactComponent = MyAppComponent(props, railsContext);
261
343
  ```
262
- and for a store:
344
+
345
+ and, similarly, any redux store always initialized with 2 parameters:
263
346
 
264
347
  ```js
265
348
  reduxStore = MyReduxStore(props, railsContext);
266
349
  ```
267
350
 
268
- Note, you never make these calls. This is what React on Rails does when either server or client rendering. You'll be defining functions that take these params and return a React component or a Redux Store.
351
+ Note, you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it.
269
352
 
270
353
  (Note, see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
271
354
 
@@ -289,9 +372,29 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](h
289
372
  }
290
373
  ```
291
374
 
375
+ #### Why the railsContext is only passed to generator functions
376
+ There's no reason that the railsContext would ever get passed to your React component unless the value is explicitly put into the props used for rendering. If you create a react component, rather than a generator function, for use by React on Rails, then you get whatever props are passed in from the view helper, which **does not include the Rails Context**. It's trivial to wrap your component in a "generator function" to return a new component that takes both:
377
+
378
+ ```js
379
+ import React from 'react';
380
+ import AppComponent from './AppComponent';
381
+ const AppComponentWithRailsContext = (props, railsContext) => (
382
+ <AppComponent {...{...props, railsContext}}/>
383
+ )
384
+ export default AppComponentWithRailsContext;
385
+ ```
386
+
387
+ Consider this line in depth:
388
+
389
+ ```js
390
+ <AppComponent {...{ ...props, railsContext }}/>
391
+ ```
392
+
393
+ The outer `{...` is for the [JSX spread operator for attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) and the innner `{...` is for the [Spread in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals).
394
+
292
395
  #### Use Cases
293
- ##### Needing the current url path for server rendering
294
- Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server render the code, you will need to know the current URL/path if that is what you want your logic to be based on. The new `railsContext` has this information so the application of an "active" class can be done server side.
396
+ ##### Needing the current URL path for server rendering
397
+ Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server-render the code, your code will need to know the current URL/path. The new `railsContext` has this information. Your application will apply something like an "active" class on the server rendering.
295
398
 
296
399
  ##### Configuring different code for server side rendering
297
400
  Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
@@ -326,12 +429,12 @@ end
326
429
  In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
327
430
 
328
431
  ### Globally Exposing Your React Components
329
- Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **expose your components globally and then mount them with helpers inside of your Rails views**.
432
+ Place your JavaScript code inside of the default `app/javascript` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
330
433
 
331
- This is an example of how to expose a component to the `react_component` view helper.
434
+ This is how to expose a component to the `react_component` view helper.
332
435
 
333
436
  ```javascript
334
- // client/app/bundles/HelloWorld/startup/HelloWorld.jsx
437
+ // app/javascript/packs/hello-world-bundle.js
335
438
  import HelloWorld from '../components/HelloWorld';
336
439
  import ReactOnRails from 'react-on-rails';
337
440
  ReactOnRails.register({ HelloWorld });
@@ -339,27 +442,17 @@ This is an example of how to expose a component to the `react_component` view he
339
442
 
340
443
  #### Different Server-Side Rendering Code (and a Server Specific Bundle)
341
444
 
342
- You may want different initialization for your server rendered components. For example, if you have animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this!
445
+ You may want different initialization for your server-rendered components. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this!
343
446
 
344
- If you do want different code to run, you'd setup a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
345
-
346
- #### Generator Functions
347
- Why would you create a function that returns a React component? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
348
-
349
- Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }.
350
-
351
- For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top level property of renderedHtml. Inside this Object, place a key called componentHtml, along with any other needed keys. This is useful when you using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
352
- { renderedHtml: { componentHtml, customKey1, customKey2} }
447
+ If you want different code to run, you'd set up a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
353
448
 
354
449
  #### Renderer Functions
355
- A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to manually render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
450
+ A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
356
451
 
357
- Renderer functions are not meant to be used on the server, since there's no DOM on the server. Instead, use a generator function. Attempting to server render with a renderer function will cause an error.
452
+ Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a generator function. Attempting to server render with a renderer function will cause an error.
358
453
 
359
454
  ## ReactOnRails View Helpers API
360
- Once the bundled files have been generated in your `app/assets/webpack` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
361
-
362
- This is how you actually render the React components you exposed to `window` inside of `clientRegistration` (and `global` inside of `serverRegistration` if you are server rendering).
455
+ Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, `react_component`.
363
456
 
364
457
  ### react_component
365
458
  ```ruby
@@ -373,19 +466,19 @@ react_component(component_name,
373
466
  html_options: {})
374
467
  ```
375
468
 
376
- + **component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, a generator function that returns a React component (or only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a renderer function that manually renders a React component to the dom (client side only).
469
+ + **component_name:** Can be a React component, created using an ES6 class or a generator function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only).
377
470
  + **options:**
378
471
  + **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
379
- + **prerender:** enable server-side rendering of component. Set to false when debugging!
472
+ + **prerender:** enable server-side rendering of a component. Set to false when debugging!
380
473
  + **id:** Id for the div, will be used to attach the React component. This will get assigned automatically if you do not provide an id. Must be unique.
381
- + **html_options:** Any other html options to get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with styling of `display:inline-block`.
382
- + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note, on the client you will so both the railsContext and your props. On the server, you only see the railsContext being logged.
383
- + **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of logging_on_server set to true, you'll still see the errors on the server.
474
+ + **html_options:** Any other HTML options get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with the styling of `display:inline-block`.
475
+ + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note, on the client, you will see both the `railsContext` and your props. On the server, you only see the `railsContext` being logged.
476
+ + **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of `logging_on_server` set to true, you'll still see the errors on the server.
384
477
  + **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
385
478
 
386
479
  ### redux_store
387
480
  #### Controller Extension
388
- Include the module ReactOnRails::Controller in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
481
+ Include the module `ReactOnRails::Controller` in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
389
482
 
390
483
  `redux_store(store_name, props: {})`
391
484
 
@@ -399,28 +492,28 @@ For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://git
399
492
  #### View Helper
400
493
  `redux_store(store_name, props: {})`
401
494
 
402
- Same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note, you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
495
+ This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note, you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
403
496
 
404
497
  `redux_store_hydration_data`
405
498
 
406
- Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
499
+ Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client-side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
407
500
 
408
501
  #### Redux Store Notes
409
- Note, you don't need to separately initialize your redux store. However, it's recommended for the two following use cases:
502
+ Note, you don't need to initialize your redux store. You can pass the props to your React component in a "generator function." However, consider using the `redux_store` helper for the two following use cases:
410
503
 
411
- 1. You want to have multiple components that access the same store.
504
+ 1. You want to have multiple React components accessing the same store at once.
412
505
  2. You want to place the props to hydrate the client side stores at the very end of your HTML so that the browser can render all earlier HTML first. This is particularly useful if your props will be large.
413
506
 
414
507
  ### server_render_js
415
508
  `server_render_js(js_expression, options = {})`
416
509
 
417
- + js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught and console messages handled properly
510
+ + js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught, and console messages will be handled properly
418
511
  + Currently, the only option you may pass is `replay_console` (boolean)
419
512
 
420
513
  This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly.
421
514
 
422
515
  ## Multiple React Components on a Page with One Store
423
- You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. In addition, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
516
+ You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
424
517
 
425
518
  Suppose the Redux store is called `appStore`, and you have 3 React components that each needs to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
426
519
 
@@ -450,7 +543,7 @@ return (
450
543
  );
451
544
  ```
452
545
 
453
- From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note, for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. This means in this case that Rails controllers would set `@react_props` to the properties to hydrate the Redux store.
546
+ From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note, for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
454
547
 
455
548
  **app/views/layouts/application.html.erb**
456
549
  ```erb
@@ -480,7 +573,7 @@ See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
480
573
 
481
574
  #### Using Rails built-in CSRF protection in JavaScript
482
575
 
483
- Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails is offerring two helpers that can be used as following for POST, PUT or DELETE requests:
576
+ Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails provides two helpers that can be used as following for POST, PUT or DELETE requests:
484
577
 
485
578
  ```js
486
579
  import ReactOnRails from 'react-on-rails';
@@ -495,7 +588,7 @@ header = ReactOnRails.authenticityHeaders(otherHeader);
495
588
  If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX calls, then these helpers are not needed because the [jquery-ujs](https://github.com/rails/jquery-ujs) library updates header automatically, see [jquery-ujs documentation](https://robots.thoughtbot.com/a-tour-of-rails-jquery-ujs#cross-site-request-forgery-protection).
496
589
 
497
590
  ## React Router
498
- [React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See:
591
+ [React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
499
592
 
500
593
  1. [React on Rails docs for react-router](./docs/additional-reading/react-router.md)
501
594
  1. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
@@ -504,12 +597,12 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
504
597
  ## Deployment
505
598
  * Version 6.0 puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb).
506
599
  * `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
507
- * `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
600
+ * `build_production_command`: Set to nil to turn off the precompilation of the js assets.
508
601
  * See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
509
- * If you're using the node server for server rendering, you may want to do your own AWS install. We'll have more docs on this in the future. [Get in touch](mailto:justin@shakacode.com) if you're keenly interested in this feature.
510
602
 
511
- ## Integration with Node
512
- Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains. We've found that using ExecJS with [mini_racer](https://github.com/discourse/mini_racer) to be "fast enough" so far. That being said, we've heard of other large websites using Node.js for better server rendering performance. See [Node.js for Server Rendering](./docs/additional-reading/node-server-rendering.md) for more information.
603
+ ## Integration with Node.js for Server Rendering
604
+
605
+ If you want to use a node server for server rendering, [get in touch](mailto:justin@shakacode.com). ShakaCode has built a premium Node rendering server for React on Rails.
513
606
 
514
607
  ## Additional Documentation
515
608
  **Try out our new [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference!**
@@ -541,6 +634,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
541
634
  + **Development**
542
635
  + [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
543
636
  + [Installation Overview](./docs/basics/installation-overview.md)
637
+ + [Configuration](./docs/basics/configuration.md)
544
638
  + [Migration from react-rails](./docs/basics/migrating-from-react-rails.md)
545
639
  + [Recommended Project Structure](./docs/additional-reading/recommended-project-structure.md)
546
640
  + [Generator Tips](./docs/basics/generator.md)
@@ -606,19 +700,41 @@ The following companies support open source, and ShakaCode uses their products!
606
700
  * [JetBrains](https://www.jetbrains.com/)
607
701
  * [![2017-02-21_22-35-32](https://cloud.githubusercontent.com/assets/1118459/23203304/1261e468-f886-11e6-819e-93b1a3f17da4.png)](https://www.browserstack.com)
608
702
 
703
+ *If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
704
+
609
705
  # FINAL NOTES
610
706
  * See [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
611
707
  * Follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) on Twitter for updates on releases. We've also got a forum category dedicated to [react_on_rails](https://forum.shakacode.com/c/rails/reactonrails).
612
- * Please [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send a monthly summary including announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
708
+ * Please [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
613
709
 
614
710
  [![2017-01-31_14-16-56](https://cloud.githubusercontent.com/assets/1118459/22490211/f7a70418-e7bf-11e6-9bef-b3ccd715dbf8.png)](https://app.mailerlite.com/webforms/landing/l1d9x5)
615
711
 
616
712
  ---
617
713
 
618
- Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
714
+ *Identical to top of page*
715
+
716
+ ## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
717
+
718
+ Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
719
+
720
+ * **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
721
+ * *[Click here for talk slides](http://www.shakacode.com/talks).*
722
+
723
+ We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
724
+
725
+ * Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).
726
+ * Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
727
+ * Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).
728
+ * Augmenting your team to get your product completed more efficiently and quickly.
729
+
730
+ My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
731
+
732
+ If any of this resonates with you, please email me, [justin@shakacode.com](mailto:justin@shakacode.com). I offer a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.
733
+
734
+ We are **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Friends and Guests](https://www.friendsandguests.com).
619
735
 
620
- We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
736
+ I appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team [front-end happiness in the Rails world](https://www.youtube.com/watch?v=SGkTvKRPYrk).
621
737
 
622
- Whether you have a new project or need help on an existing project, feel free to contact me directly at [justin@shakacode.com](mailto:justin@shakacode.com) and thanks in advance for any referrals!
738
+ Aloha and best wishes from the ShakaCode team!
623
739
 
624
- Your support keeps this project going.
740
+ ------
data/Rakefile CHANGED
@@ -3,12 +3,19 @@
3
3
  # Rake will automatically load any *.rake files inside of the "rakelib" folder
4
4
  # See rakelib/
5
5
  tasks = %w[run_rspec lint]
6
+ prepare_for_ci = %w[node_package dummy_apps]
7
+
6
8
  if ENV["USE_COVERALLS"] == "TRUE"
7
9
  require "coveralls/rake/task"
8
10
  Coveralls::RakeTask.new
9
11
  tasks << "coveralls:push"
10
12
  end
11
13
 
14
+ if File.basename(ENV["BUNDLE_GEMFILE"] || "") == "Gemfile.rails32"
15
+ tasks = %w[run_rspec:gem_rails32 run_rspec:dummy_no_webpacker]
16
+ prepare_for_ci = %w[node_package dummy_apps:dummy_no_webpacker]
17
+ end
18
+
12
19
  desc "Run all tests and linting"
13
20
  task default: tasks
14
21
 
@@ -16,4 +23,7 @@ desc "All actions but no examples, good for local developer run."
16
23
  task all_but_examples: ["run_rspec:all_but_examples", "lint"]
17
24
 
18
25
  desc "Prepare for ci, including node_package, dummy app, and generator examples"
19
- task prepare_for_ci: %w[node_package dummy_apps examples]
26
+ task prepare_for_ci: prepare_for_ci
27
+
28
+ desc "Runs prepare_for_ci and tasks"
29
+ task ci: [:prepare_for_ci, *tasks]
data/app/helpers/react_on_rails_helper.rb CHANGED
@@ -183,7 +183,7 @@ module ReactOnRailsHelper
183
183
  end
184
184
 
185
185
  def sanitized_props_string(props)
186
- props.is_a?(String) ? ERB::Util.json_escape(props) : props.to_json
186
+ ReactOnRails::JsonOutput.escape(props.is_a?(String) ? props : props.to_json)
187
187
  end
188
188
 
189
189
  # Helper method to take javascript expression and returns the output from evaluating it.