react_on_rails 11.1.8 → 11.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc +8 -2
  3. data/.prettierignore +1 -0
  4. data/.prettierrc +20 -0
  5. data/.release-it.json +3 -0
  6. data/.travis.yml +10 -9
  7. data/CHANGELOG.md +55 -3
  8. data/CONTRIBUTING.md +2 -10
  9. data/Gemfile +1 -2
  10. data/Gemfile.rails32 +0 -1
  11. data/README.md +20 -11
  12. data/SUMMARY.md +3 -1
  13. data/docs/additional-reading/images.md +1 -1
  14. data/docs/additional-reading/rails_view_rendering_from_inline_javascript.md +2 -1
  15. data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +10 -0
  16. data/docs/api/view-helpers-api.md +12 -8
  17. data/docs/basics/configuration.md +4 -4
  18. data/docs/basics/minitest-configuration.md +31 -0
  19. data/docs/basics/recommended-project-structure.md +1 -1
  20. data/docs/basics/rspec-configuration.md +2 -2
  21. data/docs/basics/upgrading-react-on-rails.md +11 -1
  22. data/docs/misc-pending/code-splitting.md +2 -2
  23. data/docs/testimonials/hvmn.md +3 -3
  24. data/docs/testimonials/resortpass.md +13 -0
  25. data/docs/testimonials/testimonials.md +11 -1
  26. data/docs/tutorial.md +31 -6
  27. data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -0
  28. data/lib/generators/react_on_rails/install_generator.rb +2 -0
  29. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +8 -1
  30. data/lib/react_on_rails.rb +1 -0
  31. data/lib/react_on_rails/assets_precompile.rb +3 -0
  32. data/lib/react_on_rails/configuration.rb +2 -1
  33. data/lib/react_on_rails/git_utils.rb +2 -0
  34. data/lib/react_on_rails/helper.rb +72 -73
  35. data/lib/react_on_rails/json_output.rb +1 -1
  36. data/lib/react_on_rails/locales_to_js.rb +2 -0
  37. data/lib/react_on_rails/react_component/render_options.rb +4 -0
  38. data/lib/react_on_rails/server_rendering_js_code.rb +42 -0
  39. data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +30 -5
  40. data/lib/react_on_rails/utils.rb +1 -1
  41. data/lib/react_on_rails/version.rb +1 -1
  42. data/lib/react_on_rails/version_checker.rb +4 -1
  43. data/lib/react_on_rails/webpacker_utils.rb +4 -1
  44. data/package-scripts.yml +46 -0
  45. data/package.json +24 -15
  46. data/rakelib/release.rake +3 -2
  47. data/react_on_rails.gemspec +1 -1
  48. data/webpackConfigLoader.js +2 -2
  49. data/yarn.lock +4431 -1689
  50. metadata +13 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 060b6f22c90e0e79b6a60244c979aae68cf0aae3d3cc67b171e41a0040a1e229
4
- data.tar.gz: 2667ab4972d468cb44cdc42bb6abc3c0536a4a8f3d6ac346df83b0d1249e12d6
3
+ metadata.gz: a158a8eec25a9277154bcb4a8d884a167974992ba964d2c907fcef1f8066a2b2
4
+ data.tar.gz: 51798297228cf23cb6ca2149631783c8bb6e872462740923fc9ee6ecf41a16fb
5
5
  SHA512:
6
- metadata.gz: fb989846fd0e2c0af268850ead6c293d158e37ed87c12ced4dd09f21380ee8a5d2d5ef95116e264991ec928085f24198519a93b45a2e29f8ff68301c25c899b3
7
- data.tar.gz: 6bda13faa6e598b3b85d13bdaa2842a53f6548aacf6ac9237612c061371f115ec967f87ff7030fbebe1c51af466949e98c6f02db56acfd6b79aa85057caaa5be
6
+ metadata.gz: c3dc59964bbb95cf38b79c556336d10c40dd7407c9ad9ab6ece58e2d57dbf3dc9110b7c65b94420ef3b98b3ec7fac5ebb351722fb80915d59898b80a80e0a59b
7
+ data.tar.gz: 499f3cd3d46b8b2b4d1ac35de78c94139ef8bcc54f474fee579aafd98936b3d930dce7979a51e3750c8a6de8e469372b51be83e5f0097e5a5c42765263664c61
data/.eslintrc CHANGED
@@ -1,8 +1,11 @@
1
1
  ---
2
- extends: eslint-config-shakacode
2
+ extends:
3
+ - eslint-config-shakacode
4
+ - prettier
5
+ - prettier/react
3
6
 
4
7
  plugins:
5
- - react
8
+ - prettier
6
9
 
7
10
  globals:
8
11
  __DEBUG_SERVER_ERRORS__: true
@@ -15,6 +18,9 @@ env:
15
18
 
16
19
  rules:
17
20
  no-console: 0
21
+ function-paren-newline: 0
22
+ object-curly-newline: 0
23
+
18
24
 
19
25
  # https://github.com/benmosher/eslint-plugin-import/issues/340
20
26
  import/no-extraneous-dependencies: 0
@@ -0,0 +1 @@
1
+ node_modules
@@ -0,0 +1,20 @@
1
+ printWidth: 110
2
+ tabWidth: 2
3
+ useTabs: false
4
+ semi: true
5
+ singleQuote: true
6
+ trailingComma: all
7
+ bracketSpacing: true
8
+ jsxBracketSameLine: false
9
+ parser: flow
10
+
11
+ overrides:
12
+ - files: "*.@(css|scss)"
13
+ options:
14
+ parser: css
15
+ singleQuote: false
16
+ printWidth: 120
17
+ - files: "*.@(json)"
18
+ options:
19
+ parser: json
20
+ printWidth: 100
@@ -0,0 +1,3 @@
1
+ {
2
+ "requireCleanWorkingDir": false
3
+ }
@@ -4,10 +4,9 @@ language: ruby
4
4
 
5
5
  rvm:
6
6
  # Rails 5 requires 2.2
7
- - 2.3.1
8
- - 2.4.1
9
- - 2.5.0
10
- - 2.2.6
7
+ - 2.5.3
8
+ - 2.6.0
9
+ - 2.2.10
11
10
  services:
12
11
  - docker
13
12
 
@@ -36,7 +35,7 @@ before_install:
36
35
  - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen scn 1600x1200x16"
37
36
 
38
37
  install:
39
- - travis_retry gem install bundler
38
+ - travis_retry gem install bundler -v '<2' # Ruby 2.2 and Rails 3.2 & 4.2 depend on bundler 1.x.
40
39
  - travis_retry nvm install 8.11.3
41
40
  - node -v
42
41
  - travis_retry npm i -g yarn
@@ -54,13 +53,15 @@ script:
54
53
  matrix:
55
54
  exclude:
56
55
  - gemfile: spec/dummy_no_webpacker/Gemfile.rails32
57
- rvm: 2.3.1
56
+ rvm: 2.3.8
58
57
  - gemfile: spec/dummy_no_webpacker/Gemfile.rails32
59
- rvm: 2.4.1
58
+ rvm: 2.4.5
60
59
  - gemfile: spec/dummy_no_webpacker/Gemfile.rails32
61
- rvm: 2.5.0
60
+ rvm: 2.5.3
61
+ - gemfile: spec/dummy_no_webpacker/Gemfile.rails32
62
+ rvm: 2.6.0
62
63
  - gemfile: spec/dummy/Gemfile
63
- rvm: 2.2.6
64
+ rvm: 2.2.10
64
65
 
65
66
  notifications:
66
67
  slack:
@@ -1,7 +1,7 @@
1
1
  # Change Log
2
2
  All notable changes to this project's source code will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version. NOTE: major versions of the npm module and the gem must be kept in sync.
3
3
 
4
- Migration instructions for the major updates can be found [here](docs/basics/upgrading-react-on-rails.md#upgrading-to-version-9.md). Some smaller migration information can be found here.
4
+ Migration instructions for the major updates can be found [here](docs/basics/upgrading-react-on-rails.md#upgrading-to-version-9.md). Some smaller migration information can be found here.
5
5
 
6
6
  ## Need Help Migrating?
7
7
  If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for information about our [ShakaCode Pro Support](https://www.shakacode.com/work/shakacode-pro-support.pdf).
@@ -15,6 +15,54 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
15
15
  Changes since last non-beta release.
16
16
 
17
17
  *Please add entries here for your pull requests that are not yet released.*
18
+ ### [11.3.1] - 2020-10-01
19
+ #### Fixed
20
+ Update the init per backport of 12.0.3. [PR 1331](https://github.com/shakacode/react_on_rails/pull/1331)
21
+ by [justin808](https://github.com/justin808).
22
+
23
+ * Should fix issue 1330.
24
+ * Component not loading in Chrome, DOMContentLoaded not called.
25
+ * https://github.com/shakacode/react_on_rails/issues/1330
26
+
27
+ So long as the document is not loading, we can assume:
28
+ The document has finished loading and the document has been parsed
29
+ but sub-resources such as images, stylesheets and frames are still loading.
30
+ If lazy asynch loading is used, such as with loadable-components, then the init
31
+ function will install some handler that will properly know when to do hyrdation.
32
+
33
+
34
+ ### [11.3.0] - 2019-04-20
35
+ #### Added
36
+ - Added method for retrieving any option from `render_options` [PR 1213](https://github.com/shakacode/react_on_rails/pull/1213)
37
+ by [ashgaliyev](https://github.com/ashgaliyev).
38
+
39
+ - html_options can now has option for 'tag' to add dynamically html element. like this: `html_options: { tag: "span" }`.
40
+ [PR 1208](https://github.com/shakacode/react_on_rails/pull/1208) by [tahsin352](https://github.com/tahsin352).
41
+
42
+ ### [11.2.2] - 2018-12-24
43
+ #### Improved
44
+ - rails_context can more easily be called from controller methods. The mandatory param of server_side has been made optional.
45
+
46
+ ### [11.2.1] - 2018-12-06
47
+ ## MIGRATION for v11.2
48
+ - If using **React on Rails Pro**, upgrade react_on_rails_pro to a version >= 1.3.
49
+
50
+ #### Improved
51
+ - To support React v16, updated API for manually calling `ReactOnRails.render(name, props, domNodeId, hydrate)`. Added 3rd @param hydrate Pass truthy to update server rendered html. Default is falsey Any truthy values calls hydrate rather than render. [PR 1159](https://github.com/shakacode/react_on_rails/pull/1159) by [justin808](https://github.com/justin808) and [coopersamuel](https://github.com/coopersamuel).
52
+
53
+ - Enabled the use of webpack-dev-server with Server-side rendering. [PR 1173](https://github.com/shakacode/react_on_rails/pull/1173) by [justin808](https://github.com/justin808) and [judahmeek](https://github.com/judahmeek).
54
+
55
+ #### Changed
56
+ - Changed the default for:
57
+ ```rb
58
+ config.raise_on_prerender_error = Rails.env.development?
59
+ ```
60
+
61
+ Thus, developers will need to fix server rendering errors before continuing.
62
+ [PR 1145](https://github.com/shakacode/react_on_rails/pull/1145) by [justin808](https://github.com/justin808).
63
+
64
+ ### 11.2.0 - 2018-12-06
65
+ Do not use. Unpublished. Caused by an issue with the release script.
18
66
 
19
67
  ### [11.1.8] - 2018-10-14
20
68
 
@@ -50,7 +98,7 @@ Changes since last non-beta release.
50
98
 
51
99
  #### Fixed
52
100
  - Tests now properly exit if the config.build_test_command fails!
53
- - Source path for project using Webpacker would default to "app/javascript" even if when the node_modules
101
+ - Source path for project using Webpacker would default to "app/javascript" even if when the node_modules
54
102
  directory was set to "client". Fix now makes the configuration of this crystal clear.
55
103
  - renamed method RenderOptions.has_random_dom_id? to RenderOptions.random_dom_id? for rubocop rule.
56
104
  [PR 1133](https://github.com/shakacode/react_on_rails/pull/1133) by [justin808](https://github.com/justin808)
@@ -839,7 +887,11 @@ Best done with Object destructing:
839
887
  ##### Fixed
840
888
  - Fix several generator related issues.
841
889
 
842
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.1.8...master
890
+ [Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.3.1...master
891
+ [11.3.1]: https://github.com/shakacode/react_on_rails/compare/11.3.0...11.3.1
892
+ [11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
893
+ [11.2.2]: https://github.com/shakacode/react_on_rails/compare/11.2.1...11.2.2
894
+ [11.2.1]: https://github.com/shakacode/react_on_rails/compare/11.1.8...11.2.1
843
895
  [11.1.8]: https://github.com/shakacode/react_on_rails/compare/11.1.7...11.1.8
844
896
  [11.1.7]: https://github.com/shakacode/react_on_rails/compare/11.1.6...11.1.7
845
897
  [11.1.6]: https://github.com/shakacode/react_on_rails/compare/11.1.5...11.1.6
@@ -107,7 +107,7 @@ cd spec/dummy
107
107
  yarn
108
108
  ```
109
109
 
110
- Note, yarn will run the `postinstall` script of `spec/dummy/client` which runs `yarn link` to setup a sym link to the parent package.
110
+ Note, yarn will run the `postinstall` script of `spec/dummy/client` which runs `yarn link` to set up a sym link to the parent package.
111
111
 
112
112
  #### Example: Testing NPM changes with the dummy app
113
113
  1. Add `console.log('Hello!')` [here](https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.js#L181) in `react_on_rails/node_package/src/clientStartup.js` to confirm we're getting an update to the node package.
@@ -127,14 +127,6 @@ _Note: running `npm i` automatically builds the npm package before installing. H
127
127
  ### Prereqs
128
128
  After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
129
129
 
130
- Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
131
-
132
- ```sh
133
- yarn global add phantomjs-prebuilt
134
- ```
135
-
136
- Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
137
-
138
130
  ### Local Node Package
139
131
  Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the dummy app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
140
132
 
@@ -171,7 +163,7 @@ spec/dummy.
171
163
 
172
164
  ```sh
173
165
  # Optionally change default selenium_firefox driver
174
- export DRIVER=poltergeist
166
+ export DRIVER=selenium_firefox
175
167
  cd react_on_rails/
176
168
  yarn run dummy:spec
177
169
  ```
data/Gemfile CHANGED
@@ -30,12 +30,11 @@ gem "web-console", group: :development
30
30
  # below are copied from spec/dummy/Gemfile
31
31
  gem "capybara"
32
32
  gem "capybara-screenshot"
33
- gem "chromedriver-helper"
34
33
  gem "launchy"
35
- gem "poltergeist"
36
34
  gem "rspec-rails"
37
35
  gem "rspec-retry"
38
36
  gem "selenium-webdriver"
37
+ gem "webdrivers", "~> 3.0"
39
38
  gem "webpacker"
40
39
 
41
40
  gem "equivalent-xml", github: "mbklein/equivalent-xml"
@@ -65,7 +65,6 @@ group :test do
65
65
  gem "chromedriver-helper"
66
66
  gem "generator_spec"
67
67
  gem "launchy"
68
- gem "poltergeist"
69
68
  gem "rspec-rails"
70
69
  gem "rspec-retry"
71
70
  gem "selenium-webdriver"
data/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # ReactOnRails
2
2
 
3
- [![License](https://img.shields.io/badge/license-mit-green.svg)](./LICENSE.md) [![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) [![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)
3
+ [![License](https://img.shields.io/badge/license-mit-green.svg)](./LICENSE.md) [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/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) [![](https://ruby-gem-downloads-badge.herokuapp.com/react_on_rails?type=total)](https://rubygems.org/gems/react_on_rails)
4
4
 
5
5
  React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
6
6
 
7
- Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? [Contact me](mailto:justin@shakacode.com).
7
+ Interested in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable with server side rendering? [Contact Justin Gordon](mailto:justin@shakacode.com).
8
8
 
9
9
  # Intro
10
10
 
@@ -17,12 +17,13 @@ To provide an opinionated and optimal framework for integrating Ruby on Rails wi
17
17
  Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?
18
18
 
19
19
  1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
20
- 1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate 1request to your API.
21
- 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration.
20
+ 1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
21
+ 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration with server-side-rendering.
22
22
  1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
23
- 1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests.
23
+ 1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests. _(and for [Minitest](docs/basics/minitest-configuration.md))._
24
24
  1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com/).
25
- 1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example)
25
+ 1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example).
26
+
26
27
 
27
28
  See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
28
29
 
@@ -34,9 +35,9 @@ _Requires creating a free account._
34
35
 
35
36
  React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails.
36
37
 
37
- ![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)
38
+ [![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
38
39
 
39
- * [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
40
+ * [HVMN Testimonial, by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
40
41
  * [HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
41
42
  * [Egghead React on Rails Pro Deployment Highlights](https://github.com/shakacode/react_on_rails/wiki/Egghead-React-on-Rails-Pro-Deployment-Highlights)
42
43
 
@@ -63,6 +64,10 @@ Please [email me (Justin Gordon), the creator of React on Rails](mailto:justin@s
63
64
 
64
65
  > The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
65
66
 
67
+ [ResortPass Testimonial, by Leora Juster, December 10, 2018](./docs/testimonials/resortpass.md)
68
+
69
+ > Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds.
70
+
66
71
  From Kyle Maune of Cooper Aerial, May 4, 2018
67
72
 
68
73
  ![image](https://user-images.githubusercontent.com/1118459/40891236-9b0b406e-671d-11e8-80ee-c026dbd1d5a2.png)
@@ -90,7 +95,7 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
90
95
  1. Do the quick [tutorial](docs/tutorial.md).
91
96
  2. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
92
97
  3. Look at [spec/dummy](spec/dummy), a simple, no DB example.
93
- 3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full featured example live at [www.reactrails.com](http://www.reactrails.com).
98
+ 3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://www.reactrails.com).
94
99
 
95
100
  ## Basic Installation
96
101
 
@@ -266,7 +271,7 @@ ReactOnRails will automatically detect a registered generator function. Thus, th
266
271
 
267
272
  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 }. Make sure you use this function with `react_component_hash`.
268
273
 
269
- 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:
274
+ 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:
270
275
 
271
276
  ```js
272
277
  { renderedHtml: { componentHtml, customKey1, customKey2} }
@@ -321,10 +326,14 @@ Bug reports and pull requests are welcome. See [Contributing](CONTRIBUTING.md) t
321
326
 
322
327
  # Supporters
323
328
 
324
- The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HawaiiChee.com](https://www.hawaiichee.com), and we use [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers.
329
+ The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HawaiiChee.com](https://www.hawaiichee.com), [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers, and [CodersRank](https://codersrank.io/) to find candidates for our team.
325
330
 
326
331
  [![Scout](https://user-images.githubusercontent.com/1118459/41828269-106b40f8-77d0-11e8-8d19-9c4b167ef9d8.png)](https://scoutapp.com/)
327
332
  [![BrowserStack](https://cloud.githubusercontent.com/assets/1118459/23203304/1261e468-f886-11e6-819e-93b1a3f17da4.png)](https://www.browserstack.com)
333
+ [![CodersRank](https://user-images.githubusercontent.com/1118459/55040254-ad8a7b00-4fcb-11e9-8936-c6765eb30698.png)](https://codersrank.io/?utm_source=github&utm_medium=banner&utm_campaign=shakacode)
334
+
335
+ ## Clubhouse
336
+ I've just moved ShakaCode's development to [ClubHouse](https://clubhouse.io/) from Trello. We're going to be doing this with all our projects. If you want to **try ClubHouse and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfd30S). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/blog/clubhouse-referral-program-5f614bb437c3). By using our [referral code](http://r.clbh.se/mvfd30S) you'll be supporting ShakaCode and, thus, React on Rails!
328
337
 
329
338
  *If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
330
339
 
data/SUMMARY.md CHANGED
@@ -14,6 +14,7 @@
14
14
  + [Deployment](docs/basics/deployment.md).
15
15
  + [React on Rails Internationalization (I18n, localization)](docs/basics/i18n.md)
16
16
  + [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md)
17
+ + [Minitest Configuration](docs/basics/minitest-configuration.md)
17
18
  + [Upgrading React on Rails](docs/basics/upgrading-react-on-rails.md)
18
19
 
19
20
  ## **API**
@@ -26,6 +27,7 @@
26
27
  + [Generator Details](docs/basics/generator-details.md)
27
28
  + [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
28
29
  + [Manual Installation Overview](docs/misc-pending/manual-installation-overview.md)
30
+ + [Upgrading from rails/webpacker v3 to v4](docs/additional-reading/upgrade-webpacker-v3-to-v4.md)
29
31
 
30
32
  ## **Rails**
31
33
  + [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)
@@ -39,7 +41,7 @@
39
41
  + [Babel](./docs/additional-reading/babel.md)
40
42
  + [React Router](./docs/additional-reading/react-router.md)
41
43
  + [React & Redux](./docs/additional-reading/react-and-redux.md)
42
- + [Webpack Tips](./docs/additional-reading/webpack-tips.md)
44
+ + [Webpack Tips](./docs/additional-reading/webpack.md)
43
45
  + [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
44
46
  + [Code Splitting](docs/misc-pending/code-splitting.md)
45
47
  + [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
@@ -39,7 +39,7 @@ const assetLoaderRules = [
39
39
 
40
40
 
41
41
 
42
- A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.js](../../spec/dummy/client/app/components/ImageExample/ImageExample.js)
42
+ A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](../../spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
43
43
 
44
44
  You are free to use images either in image tags or as background images in SCSS files. You can
45
45
  use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as
@@ -12,9 +12,10 @@ You can easily render React components in your JavaScript with `render` method t
12
12
  * @param name Name of your registered component
13
13
  * @param props Props to pass to your component
14
14
  * @param domNodeId
15
+ * @param hydrate [optional] Pass truthy to update server rendered html. Default is falsy
15
16
  * @returns {virtualDomElement} Reference to your component's backing instance
16
17
  */
17
- ReactOnRails.render(componentName, props, elementId)
18
+ ReactOnRails.render(componentName, props, domNodeId)
18
19
  ```
19
20
 
20
21
  ## Why do we need this?
@@ -0,0 +1,10 @@
1
+ # Upgrading rails/webpacker v3.5 to v4
2
+
3
+ The following steps can be followed to update a Webpacker v3.5 app to v4.
4
+
5
+ 1. Update the gem `webpacker` and the package `@rails/webpacker`
6
+ 1. Merge changes from the new default [.babelrc](../lib/install/config/.babelrc) to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
7
+ 1. Copy the file [.browserslistrc](../lib/install/config/.browserslistrc) to `/`.
8
+ 1. Merge any differences between [config/webpacker.yml](../lib/install/config/webpacker.yml) and your `/config/webpacker.yml`.
9
+
10
+ Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).
@@ -10,21 +10,25 @@ Once the bundled files have been generated in your `app/assets/webpack` folder a
10
10
  ```ruby
11
11
  react_component(component_name,
12
12
  props: {},
13
- prerender: nil,
14
- trace: nil,
15
- replay_console: nil,
16
- raise_on_prerender_error: nil,
17
- id: nil,
13
+ prerender: nil)
18
14
  html_options: {})
19
15
  ```
20
16
 
17
+ Uncommonly used options:
18
+ ```
19
+ trace: nil,
20
+ replay_console: nil,
21
+ raise_on_prerender_error: nil,
22
+ id: nil,
23
+ ```
24
+
21
25
  - **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).
22
26
  All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../basics/configuration.md).
23
27
  - **general options:**
24
28
  - **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.
25
29
  - **prerender:** enable server-side rendering of a component. Set to false when debugging!
26
30
  - **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.
27
- - **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`.
31
+ - **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`. You may also use an option of `tag: "span"` to replace the use of the default DIV tag to be a SPAN tag.
28
32
  - **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Only on the **client side** will you will see the `railsContext` and your props.
29
33
  - **random_dom_id:** True to automatically generate random dom ids when using multiple instances of the same React component on one Rails view.
30
34
  - **options if prerender (server rendering) is true:**
@@ -41,7 +45,7 @@ adding meta-tags to a page. It is exactly like react_component except for the fo
41
45
 
42
46
  1. `prerender: true` is automatically added to options, as this method doesn't make sense for
43
47
  client only rendering.
44
- 2. Your JavaScript for server rendering must return an Object for the key `server_rendered_html`.
48
+ 2. Your JavaScript generator function for server rendering must return an Object rather than a React Component.
45
49
  3. Your view code must expect an object and not a string.
46
50
 
47
51
  Here is an example of ERB view code:
@@ -89,7 +93,7 @@ end %>
89
93
 
90
94
  ### rails_context
91
95
 
92
- You can call `rails_context(server_side: true | false)` from your controller or view to see what values are are in the Rails Context. Pass true or false depending on whether you want to see the server side or the client side rails_context.
96
+ You can call `rails_context` or `rails_context(server_side: true|false)` from your controller or view to see what values are are in the Rails Context. Pass true or false depending on whether you want to see the server side or the client side rails_context. Typically, for computing cache keys, you should leave server_side as the default true. When calling this from a controller method, use `helpers.rails_context`.
93
97
 
94
98
  ------------
95
99
 
@@ -124,7 +124,6 @@ ReactOnRails.configure do |config|
124
124
  # While you may configure this to be the same as your client bundle file, this file is typically
125
125
  # different. Note, be sure to include the exact file name with the ".js" if you are not hashing this file.
126
126
  # If you are hashing this file (supposing you are using the same file for client rendering), then
127
- #
128
127
  # you should include a name that matches your bundle name in your webpack config.
129
128
  config.server_bundle_js_file = "server-bundle.js"
130
129
 
@@ -145,10 +144,11 @@ ReactOnRails.configure do |config|
145
144
  #
146
145
  config.logging_on_server = true
147
146
 
148
- # Default is to false to NOT raise exception on server if the JS code throws.
149
- # Reason is that it's easier to debug this when you get the error over to the client.
147
+ # Default is true only for development? to raise exception on server if the JS code throws for
148
+ # server rendering. The reason is that the server logs will show the error and force you to fix
149
+ # any server rendering issues immediately during development.
150
150
  #
151
- config.raise_on_prerender_error = false
151
+ config.raise_on_prerender_error = Rails.env.development?
152
152
 
153
153
  ################################################################################
154
154
  # Server Renderer Configuration for ExecJS