react_on_rails 5.2.0 → 6.0.0.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/.travis.yml +1 -0
  4. data/CHANGELOG.md +31 -0
  5. data/PROJECTS.md +11 -2
  6. data/README.md +33 -203
  7. data/app/helpers/react_on_rails_helper.rb +32 -49
  8. data/docs/additional-reading/heroku-deployment.md +2 -35
  9. data/docs/additional-reading/node-server-rendering.md +30 -0
  10. data/docs/additional-reading/rails-assets.md +19 -0
  11. data/docs/additional-reading/rspec-configuration.md +38 -4
  12. data/docs/additional-reading/webpack-dev-server.md +16 -0
  13. data/docs/additional-reading/webpack.md +0 -10
  14. data/docs/api/javascript-api.md +37 -0
  15. data/docs/api/ruby-api-hot-reload-view-helpers.md +42 -0
  16. data/docs/api/ruby-api.md +3 -0
  17. data/docs/basics/generator.md +49 -0
  18. data/docs/{additional-reading → basics}/installation-overview.md +0 -0
  19. data/docs/basics/migrating-from-react-rails.md +17 -0
  20. data/docs/contributor-info/contributing.md +11 -0
  21. data/docs/{coding-style → contributor-info}/linters.md +0 -0
  22. data/lib/generators/USAGE +3 -95
  23. data/lib/generators/react_on_rails/base_generator.rb +10 -43
  24. data/lib/generators/react_on_rails/dev_tests_generator.rb +17 -1
  25. data/lib/generators/react_on_rails/install_generator.rb +0 -6
  26. data/lib/generators/react_on_rails/react_no_redux_generator.rb +3 -17
  27. data/lib/generators/react_on_rails/react_with_redux_generator.rb +4 -21
  28. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +2 -2
  29. data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +3 -4
  30. data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt +1 -11
  31. data/lib/generators/react_on_rails/templates/base/base/client/node/package.json +10 -0
  32. data/lib/generators/react_on_rails/templates/base/base/client/node/server.js +82 -0
  33. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +3 -20
  34. data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +58 -0
  35. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt +60 -26
  36. data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake.tt +1 -4
  37. data/lib/generators/react_on_rails/templates/base/base/lib/tasks/load_test.rake +8 -0
  38. data/lib/generators/react_on_rails/templates/base/base/package.json.tt +0 -12
  39. data/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb +1 -1
  40. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +1 -0
  41. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +1 -7
  42. data/lib/generators/react_on_rails/templates/{base/base/client/app/bundles/HelloWorld/startup/clientRegistration.jsx.tt → no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt} +7 -1
  43. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/{HelloWorldAppClient.jsx.tt → HelloWorldApp.jsx.tt} +5 -1
  44. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx +1 -5
  45. data/lib/react_on_rails.rb +2 -1
  46. data/lib/react_on_rails/configuration.rb +17 -5
  47. data/lib/react_on_rails/react_component/options.rb +76 -0
  48. data/lib/react_on_rails/server_rendering_pool.rb +9 -151
  49. data/lib/react_on_rails/server_rendering_pool/exec.rb +166 -0
  50. data/lib/react_on_rails/server_rendering_pool/node.rb +77 -0
  51. data/lib/react_on_rails/test_helper.rb +1 -6
  52. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +4 -77
  53. data/lib/react_on_rails/test_helper/node_process_launcher.rb +12 -0
  54. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +4 -28
  55. data/lib/react_on_rails/version.rb +1 -1
  56. data/lib/tasks/assets.rake +115 -0
  57. data/package.json +2 -1
  58. data/rakelib/example_type.rb +3 -10
  59. data/rakelib/examples_config.yml +2 -2
  60. data/react_on_rails.gemspec +1 -0
  61. metadata +41 -20
  62. data/lib/generators/react_on_rails/templates/base/base/REACT_ON_RAILS.md +0 -16
  63. data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -3
  64. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js +0 -65
  65. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.rails.config.js +0 -53
  66. data/lib/generators/react_on_rails/templates/base/server_rendering/client/app/bundles/HelloWorld/startup/serverRegistration.jsx +0 -4
  67. data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js +0 -39
  68. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +0 -6
  69. data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -6
  70. data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js +0 -21
  71. data/lib/generators/react_on_rails/templates/redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -19
  72. data/lib/react_on_rails/test_helper/webpack_process_checker.rb +0 -54
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c1fb981f3321f2cf6d28a3a3c1550bf60db230df
4
- data.tar.gz: fdde71cf3cd95b818f030002e213dcc48885cb86
3
+ metadata.gz: eccbfc7edbe4d39c8b80673c50d25c2c3e21ab9c
4
+ data.tar.gz: 2eb9f721f5b67a58e7d3c392614042c6a4a3b8c4
5
5
  SHA512:
6
- metadata.gz: 12dcf6e3bb24210b14cd40ca74643c548d88b592291465bdb427d1eb26b9028ff7eab7e0afa1c95f1f3becd2d175117f83a1d9a0f290337804cf74a7838cc7a0
7
- data.tar.gz: 946fe32089268078bb1c7ce4bc1ed6e785572ee2d75f88239d2d586c70e21eab5b7afeb35608dc2a188cf14f06f7d85f4a6136677f9c62c43916e2402ffdd2b1
6
+ metadata.gz: 55115761bd37dc567a886ed5092b4d7101f166d5ec2741c816f26e59248a979fb378373a0189c6cb0fb31c1be98d553b188ea2145bb6b30afc0c844a2ba178da
7
+ data.tar.gz: b63c6519d7f9b75a8fa71ff7e73ff354ecc13afa6aa206952ff96719cd9736ea8e511137d48f96f98e558031ed89a0c0754fd5843a10459d08b889b85bd09a1d
data/.gitignore CHANGED
@@ -28,3 +28,5 @@ npm-debug.*
28
28
  spec/dummy/client/npm-debug.log.*
29
29
 
30
30
  /gen-examples
31
+
32
+ .DS_Store
data/.travis.yml CHANGED
@@ -44,3 +44,4 @@ script:
44
44
  notifications:
45
45
  slack:
46
46
  secure: LfcUk4AJ4vAxWwRIyw4tFh8QNbYefMwfG/oLfsN3CdRMWMOtCOHR1GGsRhAOlfVVJ/FvHqVqWj5gK7z7CaO5Uvl7rD3/zJ8QzExKx/iH9yWj55iIPuKLzwFNnBwRpFW/cqyU2lFPPRxGD50BUn3c+qybkuSqtKZ6qtTowwqlxLa5iyM3N95aZp7MEIKCP7cPcnHfLbJyP8wBpotp/rtw62eXM2HIRJJwgjcp+n+My7VFR9DnBXNFf6R91aZHM4U4cHHDbu15HFtH8honVrzK1JQdyqMNHga+j04dFuaS7z9Q369/hsELMOBp/227+Pz7ZRfWZFK4UASguOvyeX7RmGTRpTuWLm1XJeUzfsPZVROecaSVQBve+U7F12yKqilt97QlvRXn2EGyBILqvxtFNNR4S9kgAf72/6EFgiM1TKq7i9zy6lVOnagU2+7amq7UeopX1uoFsUfNKMR7YbgV1WjF0IK95UP0b0/7ZOJlPYgi5zzkQi129qAFWSMmxGk+ZpsttHh/tjJtvAh0A3mHq/zb5w4ub/MbSyZqeDUNgGj72QArOWUFSAStQT1ybsVLeDoKPgOvVq7OV1D64rpcHjBXcqOCit8tDZ+TqkFhcYJo2cITSaqE4zJXn+4F5s7So5O8CyfKYQq+kFJCooYGmfgTUckJpGl7eIvKmL4TN9Q=
47
+
data/CHANGELOG.md CHANGED
@@ -2,11 +2,42 @@
2
2
  All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
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
6
  ## [Unreleased]
7
+ ##### Breaking Changes
8
+ - Added automatic compilation of assets at precompile is now done by ReactOnRails. Thus, you don't need to provide your own assets.rake file that does the precompilation.
9
+ [#398](https://github.com/shakacode/react_on_rails/pull/398).
10
+ - Migration: you can either
11
+
12
+ 1. Specify a `config/react_on_rails` setting for `npm_build_production_command` to be nil to turn this feature off.
13
+ 2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
14
+
15
+ Here is the addition to the generated config file:
16
+ ```ruby
17
+ # This configures the script to run to build the production assets by webpack. Set this to nil
18
+ # if you don't want react_on_rails building this file for you.
19
+ config.npm_build_production_command = "npm run build:production"
20
+ ```
21
+
22
+ ##### Fixed
23
+ - Fixed errors when server rendered props contain \u2028 or \u2029 characters [#375](https://github.com/shakacode/react_on_rails/pull/375) by [mariusandra]
24
+
25
+ ##### Added
26
+ - Non-digested version of assets in public folder [#413](https://github.com/shakacode/react_on_rails/pull/413) by [alleycat-at-git]
27
+
28
+ ##### Changed
29
+ - Only one webpack config is generated for server and client config. Package.json files were changed to reflect this [#398](https://github.com/shakacode/react_on_rails/pull/398).
30
+ - Added npm_build_test_command to allow developers to change what npm command is automatically run from rspec [#398](https://github.com/shakacode/react_on_rails/pull/398).
31
+ - Replace URI with Addressable gem. See [#405](https://github.com/shakacode/react_on_rails/pull/405) by [lucke84]
32
+
33
+ ##### Removed
34
+ - Server rendering is no longer an option in the generator and is always accessible [#398](https://github.com/shakacode/react_on_rails/pull/398).
35
+ - removed lodash, jquery, and loggerMiddleware from the generated code [#398](https://github.com/shakacode/react_on_rails/pull/398).
6
36
 
7
37
  ## [5.2.0] - 2016-04-08
8
38
  ##### Added
9
39
  - Support for React 15.0 to react_on_rails. See [#379](https://github.com/shakacode/react_on_rails/pull/379) by [brucek](https://github.com/brucek).
40
+ - Support for Node.js server side rendering. See [#380](https://github.com/shakacode/react_on_rails/pull/380) by [alleycat](https://github.com/alleycat-at-git) and [doc](https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/node-server-rendering.md)
10
41
 
11
42
  ##### Removed
12
43
  - Generator removals to simplify installer. See [#363](https://github.com/shakacode/react_on_rails/pull/363) by [jbhatab](https://github.com/jbhatab).
data/PROJECTS.md CHANGED
@@ -2,13 +2,22 @@
2
2
 
3
3
  *Please add your project to this list.*
4
4
 
5
- ## Commercial Products
5
+ ## Commercial Products Live
6
6
  * **[Blink Inc](https://www.blinkinc.com)**: Website and more built by [ShakaCode](http://www.shakacode.com).
7
+ * **[Madrone Analytics](http://madroneco.com/)**: The original client of [ShakaCode](http://www.shakacode.com) that led to the development of React on Rails, as described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
8
+ * **[Deliveroo](https://deliveroo.co.uk/)**: The leading food delivery site in Europe has gone live with React on Rails, with multi-lingual JavaScript support!*
9
+ ![2016-05-03_19-18-34](https://cloud.githubusercontent.com/assets/1118459/15027253/91fd151a-11de-11e6-93e3-720518995fe0.png)
10
+
11
+
12
+
13
+
14
+
15
+ ## Commercial Products in Development
7
16
  * **[GuavaPass](https://guavapass.com/)**: Coaching client of [ShakaCode](http://www.shakacode.com) and React on Rails fan!
8
17
  * **Friends and Guests**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Social Network Connecting Hosts and Guests". *Coming soon!*
9
- * **[Madrone Analytics](http://madroneco.com/)**: The original client of [ShakaCode](http://www.shakacode.com) that led to the development of React on Rails, as described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
10
18
  * **[Pivotal Tracker](http://www.pivotaltracker.com/)**: The first (and most-loved) agile project management tool built on Rails. React on Rails has greatly simplified integration and workflow for our React components in Rails!
11
19
  * **[Confident Financial Solutions](https://www.mycfsapp.com/)**: Auto Repair Financing to help people get back on the road and back to life.
20
+ * **[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using react-on-rails from the homepage to infinity!
12
21
 
13
22
  --------
14
23
 
data/README.md CHANGED
@@ -1,15 +1,18 @@
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
- * 2016-04-08: 5.2.0 Released! Support for React 15.0 and upates to the Generator. See the [CHANGELOG.md](./CHANGELOG.md) for details.
4
+ * 2016-04-08: 5.2.0 Released! Support for React 15.0 and updates to the Generator. See the [CHANGELOG.md](./CHANGELOG.md) for details.
5
5
  * [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
6
- * 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors.
7
- * *See [NEWS.md](NEWS.md) for the full news history.*
6
+ * 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page and add your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors.
7
+ * *See [NEWS.md](NEWS.md) for more notes over time.*
8
8
 
9
9
  # NOTES
10
10
  * 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).
11
11
  * [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.
12
- * Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724).
12
+ * Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) and see [slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
13
+ * [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).
14
+ * [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours!
15
+ * On Twitter, follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) for updates on releases.
13
16
 
14
17
  # React on Rails
15
18
 
@@ -17,13 +20,6 @@
17
20
 
18
21
  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!
19
22
 
20
- Be sure to see:
21
- * [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
22
- * [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
23
- * [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).
24
- * [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours!
25
- * On Twitter, follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) for updates on releases.
26
-
27
23
  ## Including your React Component in your Rails Views
28
24
  Please see [Getting Started](#getting-started) for how to set up your Rails project for React on Rails to understand how `react_on_rails` can see your ReactComponents.
29
25
 
@@ -75,10 +71,6 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
75
71
  - [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
76
72
  - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
77
73
  - [React-Router](#react-router)
78
- + [Generator](#generator)
79
- - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
80
- - [Redux](#redux)
81
- - [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store)
82
74
  + [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server)
83
75
  + [Migrate From react-rails](#migrate-from-react-rails)
84
76
  + [Additional Reading](#additional-reading)
@@ -144,7 +136,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
144
136
 
145
137
  ### Installation Summary
146
138
 
147
- See the [Installation Overview](docs/additional-reading/installation-overview.md) for a concise set summary of what's in a React on Rails installation.
139
+ See the [Installation Overview](docs/basics/installation-overview.md) for a concise set summary of what's in a React on Rails installation.
148
140
 
149
141
  ### Initializer Configuration
150
142
 
@@ -169,8 +161,6 @@ In most cases, you should use the `prerender: false` (default behavior) with the
169
161
 
170
162
  Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [therubyracer](https://github.com/cowboyd/therubyracer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you.
171
163
 
172
- Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering.
173
-
174
164
  In the following screenshot you can see the 3 parts of React on Rails rendering:
175
165
 
176
166
  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.
@@ -207,7 +197,9 @@ and for a store:
207
197
  reduxStore = MyReduxStore(props, railsContext);
208
198
  ```
209
199
 
210
- Note, you never make these calls. This is what React on Rails does when either server or client rendering.
200
+ Note, you never make these calls. This is what React on Rails does when either server or client rendering. You'll be definining functions that take take these params and return a React component or a Redux Store.
201
+
202
+ (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.)
211
203
 
212
204
  The `railsContext` has: (see implementation in file react_on_rails_helper.rb for method rails_context for the definitive list).
213
205
 
@@ -218,7 +210,7 @@ The `railsContext` has: (see implementation in file react_on_rails_helper.rb for
218
210
  location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
219
211
  scheme: uri.scheme, # http
220
212
  host: uri.host, # foo.com
221
- port: uri.port,
213
+ port: uri.port,
222
214
  pathname: uri.path, # /posts
223
215
  search: uri.query, # id=30&limit=5
224
216
 
@@ -226,7 +218,7 @@ The `railsContext` has: (see implementation in file react_on_rails_helper.rb for
226
218
  i18nLocale: I18n.locale,
227
219
  i18nDefaultLocale: I18n.default_locale,
228
220
  httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"],
229
-
221
+
230
222
  # Other
231
223
  serverSide: boolean # Are we being called on the server or client? NOTE, if you conditionally
232
224
  # render something different on the server than the client, then React will only show the
@@ -241,6 +233,9 @@ Suppose you want to display a nav bar with the current navigation link highlight
241
233
  ##### Needing the I18n.locale
242
234
  Suppose you want to server render your react components with localization applied given the current Rails locale. The `railsContext` contains the I18n.locale.
243
235
 
236
+ ##### Configuring different code for server side rendering
237
+ Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
238
+
244
239
  #### Customization of the rails_context
245
240
  You can customize the values passed in the `railsContext` in your `config/initializers/react_on_rails.rb`. Here's how.
246
241
 
@@ -273,28 +268,20 @@ In this case, a prop and value for `somethingUseful` will go into the railsConte
273
268
  ### Globally Exposing Your React Components
274
269
  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**.
275
270
 
276
- + *Normal Mode (JavaScript is Rendered on client):*
277
-
278
- If you are not server rendering, `clientRegistration.jsx` will have
279
-
280
- ```javascript
281
- import HelloWorld from '../components/HelloWorld';
282
- import ReactOnRails from 'react-on-rails';
283
- ReactOnRails.register({ HelloWorld });
284
- ```
285
- + *Server-Side Rendering:*
286
-
287
- If you are server rendering, `serverRegistration.jsx` will have this. Note, you might be initializing HelloWorld with version specialized for server rendering.
271
+ This is an example of how to expose a component to the `react_component` view helper.
288
272
 
289
273
  ```javascript
274
+ // client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx
290
275
  import HelloWorld from '../components/HelloWorld';
291
276
  import ReactOnRails from 'react-on-rails';
292
277
  ReactOnRails.register({ HelloWorld });
293
278
  ```
294
279
 
295
- In general, you may want different initialization for your server rendered components.
280
+ #### Different Server-Side Rendering Code (and a Server Specific Bundle)
296
281
 
297
- See below section on how to setup redux stores that allow multiple components to talk to the same store.
282
+ 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!
283
+
284
+ 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. 'serverHelloWorldApp.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
298
285
 
299
286
  ## ReactOnRails View Helpers API
300
287
  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.
@@ -302,14 +289,16 @@ Once the bundled files have been generated in your `app/assets/webpack` folder a
302
289
  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).
303
290
 
304
291
  ### react_component
305
- `react_component(component_name,
292
+ ```ruby
293
+ react_component(component_name,
306
294
  props: {},
307
295
  prerender: nil,
308
296
  trace: nil,
309
297
  replay_console: nil,
310
298
  raise_on_prerender_error: nil,
311
299
  id: nil,
312
- html_options: {})`
300
+ html_options: {})
301
+ ```
313
302
 
314
303
  + **component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, or a generator function that returns a React component.
315
304
  + **options:**
@@ -356,136 +345,6 @@ Why would you create a function that returns a React component? For example, you
356
345
 
357
346
  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.
358
347
 
359
- ## ReactOnRails JavaScript API
360
- The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRails.js) file. Here's a quick summary. No guarantees that this won't be outdated!
361
-
362
- ```js
363
- /**
364
- * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
365
- * find you components for rendering.
366
- * @param components (key is component name, value is component)
367
- */
368
- register(components)
369
-
370
- /**
371
- * Allows registration of store generators to be used by multiple react components on one Rails
372
- * view. store generators are functions that take one arg, props, and return a store. Note that
373
- * the setStore API is different in tha it's the actual store hydrated with props.
374
- * @param stores (key is store name, value is the store generator)
375
- */
376
- registerStore(stores)
377
-
378
- /**
379
- * Allows retrieval of the store by name. This store will be hydrated by any Rails form props.
380
- * Pass optional param throwIfMissing = false if you want to use this call to get back null if the
381
- * store with name is not registered.
382
- * @param name
383
- * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
384
- * there is no store with the given name.
385
- * @returns Redux Store, possibly hydrated
386
- */
387
- getStore(name, throwIfMissing = true )
388
-
389
- /**
390
- * Set options for ReactOnRails, typically before you call ReactOnRails.register
391
- * Available Options:
392
- * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
393
- */
394
- setOptions(options)
395
- ```
396
-
397
- ## Hot Reloading View Helpers
398
- The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
399
-
400
- The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array.
401
-
402
- static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
403
-
404
- ```erb
405
- <%= env_stylesheet_link_tag(static: 'application_static',
406
- hot: 'application_non_webpack',
407
- media: 'all',
408
- 'data-turbolinks-track' => true) %>
409
-
410
- <!-- These do not use turbolinks, so no data-turbolinks-track -->
411
- <!-- This is to load the hot assets. -->
412
- <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
413
- 'http://localhost:3500/app-bundle.js']) %>
414
-
415
- <!-- These do use turbolinks -->
416
- <%= env_javascript_include_tag(static: 'application_static',
417
- hot: 'application_non_webpack',
418
- 'data-turbolinks-track' => true) %>
419
- ```
420
-
421
- See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb)
422
-
423
- **env_javascript_include_tag(args = {})**
424
-
425
- Helper to set CSS assets depending on if we want static or "hot", which means from the Webpack dev server.
426
-
427
- In this example, application_non_webpack is simply a CSS asset pipeline file which includes styles not placed in the webpack build.
428
-
429
- We don't need styles from the webpack build, as those will come via the JavaScript include tags.
430
-
431
- The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
432
- these params are optional, and support either a single value, or an array.
433
-
434
- ```erb
435
- <%= env_stylesheet_link_tag(static: 'application_static',
436
- hot: 'application_non_webpack',
437
- media: 'all',
438
- 'data-turbolinks-track' => true) %>
439
- ```
440
-
441
- **env_stylesheet_link_tag(args = {})**
442
-
443
- ## Generator
444
- 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.
445
-
446
- Run `rails generate react_on_rails:install --help` for descriptions of all available options:
447
-
448
- ```
449
- Usage:
450
- rails generate react_on_rails:install [options]
451
-
452
- Options:
453
- -R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example
454
- -S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering
455
-
456
- Runtime options:
457
- -f, [--force] # Overwrite files that already exist
458
- -p, [--pretend], [--no-pretend] # Run but do not make any changes
459
- -q, [--quiet], [--no-quiet] # Suppress status output
460
- -s, [--skip], [--no-skip] # Skip files that already exist
461
-
462
- Description:
463
- Create react on rails files for install generator.
464
- ```
465
-
466
- 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).
467
-
468
- ### Understanding the Organization of the Generated Client Code
469
- 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*.
470
-
471
- Inside of the generated "HelloWorld" domain you will find the following folders:
472
-
473
- + `startup`: two types of files, one that return a container component and implement any code that differs between client and server code (if using server-rendering), and a `clientRegistration` file that exposes the aforementioned files (as well as a `serverRegistration` file if using server rendering). These registration files are what webpack is using as an entry point.
474
- + `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components").
475
- + `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
476
-
477
- You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
478
-
479
- ### Redux
480
- If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
481
-
482
- 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`.
483
-
484
- ### Using Images and Fonts
485
- 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.
486
-
487
- 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.
488
-
489
348
  ## Multiple React Components on a Page with One Store
490
349
  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.
491
350
 
@@ -493,7 +352,7 @@ Suppose the Redux store is called `appStore`, and you have 3 React components th
493
352
 
494
353
  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:
495
354
 
496
- ```
355
+ ```js
497
356
  function appStore(props, railsContext) {
498
357
  // Create a hydrated redux store, using props and the railsContext (object with
499
358
  // Rails contextual information).
@@ -548,43 +407,13 @@ Components are created as [stateless function(al) components](https://facebook.g
548
407
  1. [React on Rails docs for react-router](docs/additional-reading/react-router.md)
549
408
  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).
550
409
 
551
- ## Developing with the Webpack Dev Server
552
- 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.
553
-
554
- The webpack dev server with HMR will apply changes from the code (or styles!) to the browser as soon as you save whatever file you're working on. You won't need to reload the page, and your data will still be there. Start foreman as normal (it boots up the Rails server *and* the webpack HMR dev server at the same time).
555
-
556
- ```bash
557
- foreman start -f Procfile.dev
558
- ```
559
-
560
- Open your browser to [localhost:3000](http://localhost:3000). Whenever you make changes to your JavaScript code in the `client` folder, they will automatically show up in the browser. Hot module replacement is already enabled by default.
561
-
562
- Note that **React-related error messages are typically significantly more helpful when encountered in the dev server** than the Rails server as they do not include noise added by the React on Rails gem.
563
-
564
- ### Adding Additional Routes for the Dev Server
565
- As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in `client/server.js`. See our example `server.js` from our [tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fserver-express.js).
566
-
567
- ## Migrate From react-rails
568
- If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails).
569
-
570
- - Remove the 'react-rails' gem from your Gemfile.
571
-
572
- - Remove the generated lines for react-rails in your application.js file.
573
-
574
- ```
575
- //= require react
576
- //= require react_ujs
577
- //= require components
578
- ```
579
-
580
- - Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started.
581
-
582
- 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.
583
-
584
410
  ## Additional Reading
411
+ + [JavaScript API](docs/api/javascript-api.md)
412
+ + [Ruby API](docs/api/ruby-api.md)
413
+ + [Setting up Hot Reloading during Rails Development, API docs](docs/api/ruby-api-hot-reload-view-helpers.md)
585
414
  + [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
586
415
  + [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
587
- + [Installation Overview](docs/additional-reading/installation-overview.md)
416
+ + [Installation Overview](docs/basics/installation-overview.md)
588
417
  + [Babel](docs/additional-reading/babel.md)
589
418
  + [Heroku Deployment](docs/additional-reading/heroku-deployment.md)
590
419
  + [Manual Installation](docs/additional-reading/manual-installation.md)
@@ -601,6 +430,7 @@ Note: If you have components from react-rails you want to use, then you will nee
601
430
  + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
602
431
  + [Changelog](CHANGELOG.md)
603
432
  + [Projects](PROJECTS.md)
433
+ + [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server)
604
434
 
605
435
  ## Demos
606
436
  + [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).