react_on_rails 4.0.3 → 5.0.0.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +25 -7
  3. data/NEWS.md +1 -1
  4. data/README.md +186 -78
  5. data/app/helpers/react_on_rails_helper.rb +99 -74
  6. data/docs/{additional_reading → additional-reading}/babel.md +0 -0
  7. data/docs/{additional_reading/heroku_deployment.md → additional-reading/heroku-deployment.md} +0 -0
  8. data/docs/additional-reading/hot-reloading-rails-development.md +111 -0
  9. data/docs/additional-reading/installation-overview.md +32 -0
  10. data/docs/{additional_reading/node_dependencies_and_npm.md → additional-reading/node-dependencies-and-npm.md} +0 -0
  11. data/docs/{additional_reading → additional-reading}/rails_view_rendering_from_inline_javascript.md +0 -0
  12. data/docs/{additional_reading → additional-reading}/react-and-redux.md +0 -0
  13. data/docs/{additional_reading/react_router.md → additional-reading/react-router.md} +5 -3
  14. data/docs/{recommended-project-structure.md → additional-reading/recommended-project-structure.md} +22 -0
  15. data/docs/{additional_reading/rspec_configuration.md → additional-reading/rspec-configuration.md} +0 -0
  16. data/docs/{additional_reading/server_rendering_tips.md → additional-reading/server-rendering-tips.md} +0 -0
  17. data/docs/{additional_reading → additional-reading}/tips.md +0 -0
  18. data/docs/{additional_reading → additional-reading}/turbolinks.md +0 -0
  19. data/docs/{additional_reading → additional-reading}/updating-dependencies.md +0 -0
  20. data/docs/{additional_reading → additional-reading}/webpack.md +0 -0
  21. data/docs/{contributing.md → contributor-info/contributing.md} +0 -0
  22. data/docs/{generator_testing.md → contributor-info/generator-testing.md} +0 -0
  23. data/docs/{releasing.md → contributor-info/releasing.md} +0 -0
  24. data/docs/{code_of_conduct.md → misc/code_of_conduct.md} +0 -0
  25. data/docs/{doctrine.md → misc/doctrine.md} +1 -1
  26. data/docs/{rails3.md → misc/rails3.md} +0 -0
  27. data/docs/{tutorial-v2.md → tutorial.md} +4 -4
  28. data/lib/react_on_rails/configuration.rb +6 -3
  29. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
  30. data/lib/react_on_rails/test_helper.rb +1 -1
  31. data/lib/react_on_rails/version.rb +1 -1
  32. data/package.json +1 -1
  33. metadata +26 -27
  34. data/docs/additional_reading/hot-reloading-rails-development.md +0 -32
  35. data/docs/additional_reading/manual_installation.md +0 -117
  36. data/docs/additional_reading/optional_configuration.md +0 -33
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c9fb49d3c4b296dc1fe13485ddaed02e8ff9deef
4
- data.tar.gz: 4892bf3e7e4d8fcbc26dbdfd0f4ae8b19ceee27a
3
+ metadata.gz: 3bf3c827279003fcb63b7afac0f3a2150030365a
4
+ data.tar.gz: e079de13a81c7a183ca3a8afa4897e01889c80cc
5
5
  SHA512:
6
- metadata.gz: dc4746e699ba5668f9f555940a974a3ed8bc0c8eb03902ea4efa4149c9e2f617bcd2a6e1d8fe084a8c03ba8cea14cd0e62fb789a4d71d4a401ab3c0c28519670
7
- data.tar.gz: 45bd9b8d0c417df44666527e64b10dc60116fdf61fee18ced75937d09dd0a98e495f15141e366749b88b7c093d8001991b87dc4ae122b6228b0bd454122d3d2f
6
+ metadata.gz: 7e093bb33fcf55118463fac2220fbb85aedef21ab0440f26638d385dc72b5650a8c3f4451118b48b1df3ecb1353f2d4a87b09ec9b2bb6dfd89819626ed5b4013
7
+ data.tar.gz: 8609c1233213cb536c861523621f913750900dd490895f2bedf38a9d55fe4828412fa8b119076dbb39c83aa858e5ec22f62130d20bb859a930193a5077b883e9
data/CHANGELOG.md CHANGED
@@ -3,18 +3,35 @@ All notable changes to this project will be documented in this file. Items under
3
3
 
4
4
  Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
5
5
  ## [Unreleased]
6
+
7
+ ## [5.0.0] - 2016-03-27
8
+
9
+ ##### Added
10
+ - Added `railsContext`, an object which gets passed always as the second parameter to both react component and redux store generator functions, both for server and client rendering. This provides data like the current locale, the pathname, etc. The data values are customizable by a new configuration called `rendering_extension` where you can create a module with a method called `rendering_extension`. This allows you to add additional values to the Rails Context. Implement one static method called `custom_context(view_context)` and return a Hash. See [#345](https://github.com/shakacode/react_on_rails/pull/345) by [justin808](https://github.com/justin808)
11
+
12
+ ##### Changed
13
+ - Previously, you could pass arbitrary additional html attributes to react_component. Now, you need to pass them in as a named parameter `html_options` to react_component.
14
+
15
+ ##### Breaking Changes
16
+ - You must provide named attributes, including `props` for view helper `react_compnent`.
17
+
6
18
  ## [4.0.3] - 2016-03-17
19
+
7
20
  ##### Fixed
8
- - `ReactOnRailsHelper#react_compnent`: Invalid deprecation message when called with only one paramter, the component name.
21
+ - `ReactOnRailsHelper#react_component`: Invalid deprecation message when called with only one paramter, the component name.
22
+
9
23
  ## [4.0.2] - 2016-03-17
24
+
10
25
  ##### Fixed
11
26
  - `ReactOnRails::Controller#redux_store`: 2nd parameter changed to a named parameter `props` for consistency.
12
27
 
13
28
  ## [4.0.1] - 2016-03-16
29
+
14
30
  ##### Fixed
15
31
  - Switched to `heroku buildpacks:set` syntax rather than using a `.buildpacks` file, which is deprecated. See [#319](https://github.com/shakacode/react_on_rails/pull/319) by [esauter5](https://github.com/esauter5). Includes both generator and doc updates.
16
32
 
17
33
  ## [4.0.0] - 2016-03-14
34
+
18
35
  ##### Added
19
36
  - [spec/dummy](spec/dummy) is a full sample app of React on Rails techniques **including** the hot reloading of assets from Rails!
20
37
  - Added helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` to support hot reloading Rails. See the [README.md](./README.md) for more details and see the example application in `spec/dummy`. Also see how this is used in the [tutorial: application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb#L6)
@@ -90,7 +107,7 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
90
107
  <%= react_component("ReduxSharedStoreApp", props: {}, prerender: false, trace: true) %>
91
108
  ```
92
109
  You'll get a deprecation message to change this.
93
- - Renamed `ReactOnRails.configure_rspec_to_compile_assets` to `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. The code has also been optimized to check for whether or not the compiled webpack bundles are up to date or not and will not run if not necessary. If you are using non-standard directories for your generated webpack assets (`app/assets/javascripts/generated` and `app/assets/stylesheets/generated`) or have additional directories you wish the helper to check, you need to update your ReactOnRails configuration accordingly. See [documentation](https://github.com/shakacode/react_on_rails/blob/master/docs/additional_reading/rspec_configuration.md) for how to do this. [#253](https://github.com/shakacode/react_on_rails/pull/253).
110
+ - Renamed `ReactOnRails.configure_rspec_to_compile_assets` to `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. The code has also been optimized to check for whether or not the compiled webpack bundles are up to date or not and will not run if not necessary. If you are using non-standard directories for your generated webpack assets (`app/assets/javascripts/generated` and `app/assets/stylesheets/generated`) or have additional directories you wish the helper to check, you need to update your ReactOnRails configuration accordingly. See [documentation](https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rspec_configuration.md) for how to do this. [#253](https://github.com/shakacode/react_on_rails/pull/253).
94
111
  - You have to call `ReactOnRails.register` to register react components. This was deprecated in v2. [#273](https://github.com/shakacode/react_on_rails/pull/273).
95
112
 
96
113
  ##### Migration Steps v2 to v3
@@ -110,7 +127,7 @@ RSpec.configure do |config|
110
127
 
111
128
  ## [2.2.0] - 2016-01-29
112
129
  ##### Added
113
- - New JavaScript API for debugging TurboLinks issues. Be sure to see [turbolinks docs](docs/additional_reading/turbolinks.md). `ReactOnRails.setOptions({ traceTurbolinks: true });`. Removed the file `debug_turbolinks` added in 2.1.1. See [#243](https://github.com/shakacode/react_on_rails/pull/243).
130
+ - New JavaScript API for debugging TurboLinks issues. Be sure to see [turbolinks docs](docs/additional-reading/turbolinks.md). `ReactOnRails.setOptions({ traceTurbolinks: true });`. Removed the file `debug_turbolinks` added in 2.1.1. See [#243](https://github.com/shakacode/react_on_rails/pull/243).
114
131
 
115
132
  ## [2.1.1] - 2016-01-28
116
133
 
@@ -119,12 +136,12 @@ RSpec.configure do |config|
119
136
 
120
137
  ##### Added
121
138
  - `ReactOnRails.render` returns a virtualDomElement Reference to your React component's backing instance. See [#234](https://github.com/shakacode/react_on_rails/pull/234).
122
- - `debug_turbolinks` helper for debugging turbolinks issues. See [turbolinks](docs/additional_reading/turbolinks.md).
139
+ - `debug_turbolinks` helper for debugging turbolinks issues. See [turbolinks](docs/additional-reading/turbolinks.md).
123
140
  - Enhanced regression testing for non-turbolinks apps. Runs all tests for dummy app with turbolinks both disabled and enabled.
124
141
 
125
142
  ## [2.1.0] - 2016-01-26
126
143
  ##### Added
127
- - Added EnsureAssetsCompiled feature so that you do not accidentally run tests without properly compiling the JavaScript bundles. Add a line to your `rails_helper.rb` file to check that the latest Webpack bundles have been generated prior to running tests that may depend on your client-side code. See [docs](docs/additional_reading/rspec_configuration.md) for more detailed instructions. [#222](https://github.com/shakacode/react_on_rails/pull/222)
144
+ - Added EnsureAssetsCompiled feature so that you do not accidentally run tests without properly compiling the JavaScript bundles. Add a line to your `rails_helper.rb` file to check that the latest Webpack bundles have been generated prior to running tests that may depend on your client-side code. See [docs](docs/additional-reading/rspec_configuration.md) for more detailed instructions. [#222](https://github.com/shakacode/react_on_rails/pull/222)
128
145
  - Added [migration guide](https://github.com/shakacode/react_on_rails#migrate-from-react-rails) for migrating from React-Rails. [#219](https://github.com/shakacode/react_on_rails/pull/219)
129
146
  - Added [React on Rails Doctrine](docs/doctrine.md) to docs. Discusses the project's motivations, conventions, and principles. [#220](https://github.com/shakacode/react_on_rails/pull/220)
130
147
  - Added ability to skip `display:none` style in the generated content tag for a component. Some developers may want to disable inline styles for security reasons. See generated config [initializer file](lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb#L27) for example on setting `skip_display_none`. [#218](https://github.com/shakacode/react_on_rails/pull/218)
@@ -133,7 +150,7 @@ RSpec.configure do |config|
133
150
  - Changed message when running the dev (a.k.a. "express" server). [#227](https://github.com/shakacode/react_on_rails/commit/543ae70254d0c7b477e2c92af86f40746e58a431)
134
151
 
135
152
  ##### Fixed
136
- - Fixed handling of Turbolinks. Code was checking that Turbolinks was installed when it was not yet because some setups load Turbolinks after the bundles. The changes to the code will check if Turbolinks is installed after the page loaded event fires. Code was also added to allow easy debugging of Turbolinks, which should be useful when v5 of Turbolinks is released shortly. Details of how to configure Turbolinks with troubleshooting were added to docs/additional_reading/turbolinks.md. [#221](https://github.com/shakacode/react_on_rails/pull/221)
153
+ - Fixed handling of Turbolinks. Code was checking that Turbolinks was installed when it was not yet because some setups load Turbolinks after the bundles. The changes to the code will check if Turbolinks is installed after the page loaded event fires. Code was also added to allow easy debugging of Turbolinks, which should be useful when v5 of Turbolinks is released shortly. Details of how to configure Turbolinks with troubleshooting were added to docs/additional-reading/turbolinks.md. [#221](https://github.com/shakacode/react_on_rails/pull/221)
137
154
  - Fixed issue with already initialized constant warning appearing when starting a Rails server [#226](https://github.com/shakacode/react_on_rails/pull/226)
138
155
  - Fixed to make backwards compatible with Ruby v2.0 and updated all Ruby and Node dependencies.
139
156
 
@@ -230,7 +247,8 @@ Best done with Object destructing:
230
247
 
231
248
  ##### Fixed
232
249
  - Fix several generator related issues.
233
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/4.0.3...master
250
+ [Unreleased]: https://github.com/shakacode/react_on_rails/compare/5.0.0...master
251
+ [5.0.0]: https://github.com/shakacode/react_on_rails/compare/4.0.3...5.0.0
234
252
  [4.0.3]: https://github.com/shakacode/react_on_rails/compare/4.0.2...4.0.3
235
253
  [4.0.2]: https://github.com/shakacode/react_on_rails/compare/4.0.1...4.0.2
236
254
  [4.0.1]: https://github.com/shakacode/react_on_rails/compare/4.0.0...4.0.1
data/NEWS.md CHANGED
@@ -20,7 +20,7 @@
20
20
  3. Support for Turbolinks 5!
21
21
  * There was a fatal error when using the lastest version of Redux for server rendering. See [Redux #1335](https://github.com/reactjs/redux/issues/1335). See [diff 3.1.6...3.1.4](https://github.com/reactjs/redux/commit/e2e14d26f09ca729ae0555442f50fcfc45bfb423#diff-1fdf421c05c1140f6d71444ea2b27638). Workaround for server rendering: Use Redux 3.1.7 or upgrade to React On Rails v2.3.0. [this commit](https://github.com/shakacode/react_on_rails/commit/59f1e68d3d233775e6abc63bff180ea59ac2d79e) on [PR #244](https://github.com/shakacode/react_on_rails/pull/244/).
22
22
  * 2.x Highlights:
23
- 1. Fixed a **critical** problem with TurboLinks. Be sure to see [turbolinks docs](docs/additional_reading/turbolinks.md) for more information on how to debug TurboLinks issues.
23
+ 1. Fixed a **critical** problem with TurboLinks. Be sure to see [turbolinks docs](docs/additional-reading/turbolinks.md) for more information on how to debug TurboLinks issues.
24
24
  2. Provides a convenient helper to ensure that JavaScript assets are compiled before running tests.
25
25
  * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
26
26
  * [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for "React on Rails". [Click here](http://www.shakacode.com/work/index.html) for more information.
data/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![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
3
  # NEWS
4
+ * [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
4
5
  * Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.
5
6
  * 2016-03-17: **4.0.3** Shipped! Includes using the new Heroku buildpack steps, several smaller changes detailed in the [CHANGELOG.md](./CHANGELOG.md).
6
7
  * 2016-03-14: **4.0.0** Highlights
@@ -13,7 +14,7 @@
13
14
  * *See [NEWS.md](NEWS.md) for the full news history.*
14
15
 
15
16
  # NOTES
16
- * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
17
+ * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. For more information on how to setup hot reloading in a Rails app, see [Hot Reloading of Assets For Rails Development](docs/additional-reading/hot-reloading-rails-development.md).
17
18
  * [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for "React on Rails". [Click here](http://www.shakacode.com/work/index.html) for more information.
18
19
  * Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724).
19
20
 
@@ -24,7 +25,7 @@
24
25
  React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well, also with server rendering. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
25
26
 
26
27
  Be sure to see:
27
-
28
+ * [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
28
29
  * [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
29
30
  * [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
30
31
  * [Projects](PROJECTS.md) using React on Rails. Please submit yours!
@@ -71,15 +72,17 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
71
72
  + [Features](#features)
72
73
  + [Why Webpack?](#why-webpack)
73
74
  + [Getting Started](#getting-started)
75
+ - [Installation Summary](#installation-summary)
76
+ - [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
74
77
  + [How it Works](#how-it-works)
75
78
  - [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
76
79
  - [Building the Bundles](#building-the-bundles)
80
+ - [Rails Context)(#rails-context)
77
81
  - [Globally Exposing Your React Components](#globally-exposing-your-react-components)
78
82
  - [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
79
83
  - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
80
- - [Redux](#redux)
84
+ - [Hot Reloading View Helpers](#hot-reloading-view-helpers)
81
85
  - [React-Router](#react-router)
82
- - [Bootstrap Integration](#bootstrap-integration)
83
86
  + [Generator](#generator)
84
87
  - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
85
88
  - [Redux](#redux)
@@ -106,7 +109,7 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
106
109
  ---
107
110
 
108
111
  ## Features
109
- Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/rails/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:
112
+ Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:
110
113
 
111
114
  + [Redux](https://github.com/reactjs/redux)
112
115
  + [Webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html) with [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
@@ -133,7 +136,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
133
136
  1. Add the following to your Gemfile and bundle install:
134
137
 
135
138
  ```ruby
136
- gem "react_on_rails", "~> 3"
139
+ gem "react_on_rails", "~> 4"
137
140
  ```
138
141
 
139
142
  2. See help for the generator:
@@ -162,6 +165,14 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
162
165
 
163
166
  5. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world)
164
167
 
168
+ ### Installation Summary
169
+
170
+ See the [Installation Overview](docs/additional-reading/installation-overview.md) for a concise set summary of what's in a React on Rails installation.
171
+
172
+ ### Initializer Configuration
173
+
174
+ Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
175
+
165
176
  ## NPM
166
177
  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:
167
178
 
@@ -198,6 +209,84 @@ Each time you change your client code, you will need to re-generate the bundles
198
209
 
199
210
  On Heroku deploys, the `lib/assets.rake` file takes care of running webpack during deployment. If you have used the provided generator, these bundles will automatically be added to your `.gitignore` in order 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.
200
211
 
212
+ ### Rails Context
213
+ When you use a "generator function" to create react components or you used shared redux stores, you get 2 params passed to your function:
214
+
215
+ 1. Props that you pass in the view helper of either `react_component` or `redux_store`
216
+ 2. Rails contextual information, such as the current pathname. You can customize this in your config file.
217
+
218
+ This information should be the same regardless of either client or server side rendering.
219
+
220
+ While you could manually pass this information in as "props", the rails_context is a convenience because it's pass consistently to all invocations of generator functions.
221
+
222
+ So if you register your generator function `MyAppComponent`, it will get called like:
223
+
224
+ ```js
225
+ reactComponent = MyAppComponent(props, railsContext);
226
+ ```
227
+ and for a store:
228
+
229
+ ```js
230
+ reduxStore = MyReduxStore(props, railsContext);
231
+ ```
232
+
233
+ The `railsContext` has: (see implementation in file react_on_rails_helper.rb for method rails_context for the definitive list).
234
+
235
+ ```ruby
236
+ {
237
+ # URL settings
238
+ href: request.original_url,
239
+ location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
240
+ scheme: uri.scheme, # http
241
+ host: uri.host, # foo.com
242
+ pathname: uri.path, # /posts
243
+ search: uri.query, # id=30&limit=5
244
+
245
+ # Locale settings
246
+ i18nLocale: I18n.locale,
247
+ i18nDefaultLocale: I18n.default_locale,
248
+ httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
249
+ }
250
+ ```
251
+
252
+ #### Use Cases
253
+ ##### Needing the current url path for server rendering
254
+ 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. This could be added to props, or ReactOnRails can add this automatically as another param to the generator function (or maybe an additional object, where we'll consider other additional bits of system info from Rails, like maybe the locale, later).
255
+
256
+ ##### Needing the I18n.locale
257
+ Suppose you want to server render your react components with a the current Rails locale. We need to pass the I18n.locale to the view rendering.
258
+
259
+
260
+ #### Customization of the rails_context
261
+ You can customize the values passed in the rails_context in your `config/initializers/react_on_rails.rb`
262
+
263
+
264
+ Set the class for the `rendering_extension`:
265
+
266
+ ```ruby
267
+ config.rendering_extension = RenderingExtension
268
+ ```
269
+
270
+ Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
271
+
272
+ ```ruby
273
+ module RenderingExtension
274
+
275
+ # Return a Hash that contains custom values from the view context that will get merged with
276
+ # the standard rails_context values and passed to all calls to generator functions used by the
277
+ # react_component and redux_store view helpers
278
+ def self.custom_context(view_context)
279
+ {
280
+ somethingUseful: view_context.session[:something_useful]
281
+ }
282
+ end
283
+ end
284
+ ```
285
+
286
+ In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls.
287
+
288
+ Since you can't access the rails session from JavaScript (or other values available in the view rendering context), this might useful.
289
+
201
290
  ### Globally Exposing Your React Components
202
291
  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**.
203
292
 
@@ -222,23 +311,32 @@ Place your JavaScript code inside of the provided `client/app` folder. Use modul
222
311
 
223
312
  In general, you may want different initialization for your server rendered components.
224
313
 
314
+ See below section on how to setup redux stores that allow multiple components to talk to the same store.
315
+
225
316
  ## ReactOnRails View Helpers API
226
317
  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.
227
318
 
228
319
  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).
229
320
 
230
321
  ### react_component
231
- `react_component(component_name, options = {})`
322
+ `react_component(component_name,
323
+ props: {},
324
+ prerender: nil,
325
+ trace: nil,
326
+ replay_console: nil,
327
+ raise_on_prerender_error: nil,
328
+ id: nil,
329
+ html_options: {})`
232
330
 
233
331
  + **component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, or a generator function that returns a React component.
234
332
  + **options:**
235
333
  + **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.
236
334
  + **prerender:** enable server-side rendering of component. Set to false when debugging!
237
- + **router_redirect_callback:** Use this option if you want to provide a custom handler for redirects on server rendering. If you don't specify this, we'll simply change the rendered output to a script that sets window.location to the new route. Set this up exactly like a generator_function. Your function will take one parameter, containing all the values that react-router gives on a redirect request, such as pathname, search, etc.
335
+ + **id:** Id for the div. This will get assigned automatically if you do not provide an id.
336
+ + **html_options:** Any other html options to get placed on the added div for the component.
238
337
  + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise.
239
338
  + **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.
240
339
  + **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.
241
- + Any other options are passed to the content tag, including the id
242
340
 
243
341
  ### redux_store
244
342
  #### Controller Extension
@@ -265,7 +363,7 @@ Note, you don't need to separately initialize your redux store. However, it's re
265
363
  2. You want to place the props to hydrate the client side stores at the very end of your HTML, so the browser can render all earlier HTML first. This is particularly useful if your props will be large.
266
364
 
267
365
  ### Generator Functions
268
- Why would you create a function that returns a React compnent? 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.
366
+ 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.
269
367
 
270
368
  ### server_render_js
271
369
  `server_render_js(js_expression, options = {})`
@@ -359,7 +457,6 @@ these params are optional, and support either a single value, or an array.
359
457
 
360
458
  **env_stylesheet_link_tag(args = {})**
361
459
 
362
-
363
460
  ## Generator
364
461
  The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off.
365
462
 
@@ -387,7 +484,7 @@ Description:
387
484
  Create react on rails files for install generator.
388
485
  ```
389
486
 
390
- For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/blob/master/README.md). Each pull request shows a git "diff" that highlights the changes that the generator has made. Another good option is to create a simple test app per the [Tutorial for v2.0](docs/tutorial-v2.md).
487
+ For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/blob/master/README.md). Each pull request shows a git "diff" that highlights the changes that the generator has made. Another good option is to create a simple test app per the [Tutorial](docs/tutorial.md).
391
488
 
392
489
  ### Understanding the Organization of the Generated Client Code
393
490
  The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of *domains*.
@@ -405,64 +502,11 @@ If you have used the `--redux` generator option, you will notice the familiar ad
405
502
 
406
503
  Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
407
504
 
408
- #### Multiple React Components on a Page with One Store
409
- 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 an a notifications counter in a header. As each notifications 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.
410
-
411
- Suppose the Redux store is called `appStore`, and you have 3 React components that each need to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
412
-
413
- You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note, this is a **storeCreator**, meaning that it is a function that takes props and returns a store:
414
-
415
- ```
416
- ReactOnRails.registerStore({
417
- appStore
418
- });
419
- ```
420
-
421
- When registering your component with React on Rails, you can get the store via `ReactOnRails.getStore`:
422
-
423
- ```js
424
- // getStore will initialize the store if not already initialized, so creates or retrieves store
425
- const appStore = ReactOnRails.getStore("appStore");
426
- return (
427
- <Provider store={appStore}>
428
- <CommentsApp />
429
- </Provider>
430
- );
431
- ```
432
-
433
- 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.
434
-
435
- **app/views/layouts/application.html.erb**
436
- ```erb
437
- ...
438
- <%= redux_store("appStore", props: @react_props) %>;
439
- <%= react_component("NavbarApp") %>
440
- yield
441
- ...
442
- ```
443
-
444
- Components are created as [stateless function(al) components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions). Since you can pass in initial props via the helper `redux_store`, you do not need to pass any props directly to the component. Instead, the component hydrates by connecting to the store.
445
-
446
- **_comments.html.erb**
447
- ```erb
448
- <%= react_component("CommentsApp") %>
449
- ```
450
-
451
- **_blogs.html.erb**
452
- ```erb
453
- <%= react_component("BlogsApp") %>
454
- ```
455
-
456
- *Note:* You will not be doing any partial updates to the Redux store when loading a new page. When the page content loads, React on Rails will rehydrate a new version of the store with whatever props are placed on the page.
457
-
458
505
  ### Using Images and Fonts
459
506
  The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory.
460
507
 
461
508
  Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
462
509
 
463
- ### React Router
464
- [React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See the examples in [spec/dummy/apps/views/react_router](spec/dummy/apps/views/react_router) and follow to the JavaScript code in the [client/app/startup/ServerRouterApp.jsx](client/app/startup/ServerRouterApp.jsx). Additionally, see the `react_component` helper option `router_redirect_callback`.
465
-
466
510
  ### Bootstrap Integration
467
511
  React on Rails ships with Twitter Bootstrap already integrated into the build. Note that the generator removes `require_tree` in both the application.js and application.css.scss files. This is to ensure the correct load order for the bootstrap integration, and is usually a good idea in general. You will therefore need to explicitly require your files.
468
512
 
@@ -517,6 +561,68 @@ rake lint:ruby # Run ruby-lint as shell
517
561
  rake lint:scss # See docs for task 'scss_lint'
518
562
  ```
519
563
 
564
+ ## Multiple React Components on a Page with One Store
565
+ 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 an a notifications counter in a header. As each notifications 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.
566
+
567
+ Suppose the Redux store is called `appStore`, and you have 3 React components that each need to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
568
+
569
+ You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note, this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
570
+
571
+ ```
572
+ function appStore(props, railsContext) {
573
+ // Create a hydrated redux store, using props and the railsContext (object with
574
+ // Rails contextual information).
575
+ return myAppStore;
576
+ }
577
+
578
+ ReactOnRails.registerStore({
579
+ appStore
580
+ });
581
+ ```
582
+
583
+ When registering your component with React on Rails, you can get the store via `ReactOnRails.getStore`:
584
+
585
+ ```js
586
+ // getStore will initialize the store if not already initialized, so creates or retrieves store
587
+ const appStore = ReactOnRails.getStore("appStore");
588
+ return (
589
+ <Provider store={appStore}>
590
+ <CommentsApp />
591
+ </Provider>
592
+ );
593
+ ```
594
+
595
+ 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.
596
+
597
+ **app/views/layouts/application.html.erb**
598
+ ```erb
599
+ ...
600
+ <%= redux_store("appStore", props: @react_props) %>;
601
+ <%= react_component("NavbarApp") %>
602
+ yield
603
+ ...
604
+ ```
605
+
606
+ Components are created as [stateless function(al) components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions). Since you can pass in initial props via the helper `redux_store`, you do not need to pass any props directly to the component. Instead, the component hydrates by connecting to the store.
607
+
608
+ **_comments.html.erb**
609
+ ```erb
610
+ <%= react_component("CommentsApp") %>
611
+ ```
612
+
613
+ **_blogs.html.erb**
614
+ ```erb
615
+ <%= react_component("BlogsApp") %>
616
+ ```
617
+
618
+ *Note:* You will not be doing any partial updates to the Redux store when loading a new page. When the page content loads, React on Rails will rehydrate a new version of the store with whatever props are placed on the page.
619
+
620
+ ## React Router
621
+ [React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See:
622
+
623
+ 1. [React on Rails docs for react-router](docs/additional-reading/react-router.md)
624
+ 1. Examples in [spec/dummy/app/views/react_router](spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).
625
+
520
626
  ## Developing with the Webpack Dev Server
521
627
  One of the benefits of using webpack is access to [webpack's dev server](https://webpack.github.io/docs/webpack-dev-server.html) and its [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) functionality.
522
628
 
@@ -551,20 +657,22 @@ If you are using [react-rails](https://github.com/reactjs/react-rails) in your p
551
657
  Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline.
552
658
 
553
659
  ## Additional Reading
660
+ + [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
554
661
  + [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
555
- + [Babel](docs/additional_reading/babel.md)
556
- + [Heroku Deployment](docs/additional_reading/heroku_deployment.md)
557
- + [Manual Installation](docs/additional_reading/manual_installation.md)
558
- + [Node Dependencies and NPM](docs/additional_reading/node_dependencies_and_npm.md)
559
- + [Optional Configuration](docs/additional_reading/optional_configuration.md)
560
- + [React Router](docs/additional_reading/react_router.md)
561
- + [RSpec Configuration](docs/additional_reading/rspec_configuration.md)
562
- + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
563
- + [Rails View Rendering from Inline JavaScript](docs/additional_reading/rails_view_rendering_from_inline_javascript.md)
564
- + [Tips](docs/additional_reading/tips.md)
662
+ + [Installation Overview](docs/additional-reading/installation-overview.md)
663
+ + [Babel](docs/additional-reading/babel.md)
664
+ + [Heroku Deployment](docs/additional-reading/heroku-deployment.md)
665
+ + [Manual Installation](docs/additional-reading/manual-installation.md)
666
+ + [Hot Reloading of Assets For Rails Development](docs/additional-reading/hot-reloading-rails-development.md)
667
+ + [Node Dependencies and NPM](docs/additional-reading/node-dependencies-and-npm.md)
668
+ + [React Router](docs/additional-reading/react-router.md)
669
+ + [RSpec Configuration](docs/additional-reading/rspec_configuration.md)
670
+ + [Server Rendering Tips](docs/additional-reading/server_rendering_tips.md)
671
+ + [Rails View Rendering from Inline JavaScript](docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
672
+ + [Tips](docs/additional-reading/tips.md)
565
673
  + [Tutorial for v2.0](docs/tutorial-v2.md), deployed [here](https://shakacode-react-on-rails.herokuapp.com/).
566
- + [Turbolinks](docs/additional_reading/turbolinks.md)
567
- + [Webpack Configuration](docs/additional_reading/webpack.md)
674
+ + [Turbolinks](docs/additional-reading/turbolinks.md)
675
+ + [Webpack Configuration](docs/additional-reading/webpack.md)
568
676
  + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
569
677
  + [Changelog](CHANGELOG.md)
570
678
  + [Projects](PROJECTS.md)
@@ -586,7 +694,7 @@ Note: If you have components from react-rails you want to use, then you will nee
586
694
  ## Contributing
587
695
  Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/code_of_conduct.md)).
588
696
 
589
- See [Contributing](docs/contributing.md) to get started.
697
+ See [Contributing](docs/contributor-info/contributing.md) to get started.
590
698
 
591
699
  ## License
592
700
  The gem is available as open source under the terms of the [MIT License](docs/LICENSE).