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.
- checksums.yaml +4 -4
- data/.eslintrc +8 -2
- data/.prettierignore +1 -0
- data/.prettierrc +20 -0
- data/.release-it.json +3 -0
- data/.travis.yml +10 -9
- data/CHANGELOG.md +55 -3
- data/CONTRIBUTING.md +2 -10
- data/Gemfile +1 -2
- data/Gemfile.rails32 +0 -1
- data/README.md +20 -11
- data/SUMMARY.md +3 -1
- data/docs/additional-reading/images.md +1 -1
- data/docs/additional-reading/rails_view_rendering_from_inline_javascript.md +2 -1
- data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +10 -0
- data/docs/api/view-helpers-api.md +12 -8
- data/docs/basics/configuration.md +4 -4
- data/docs/basics/minitest-configuration.md +31 -0
- data/docs/basics/recommended-project-structure.md +1 -1
- data/docs/basics/rspec-configuration.md +2 -2
- data/docs/basics/upgrading-react-on-rails.md +11 -1
- data/docs/misc-pending/code-splitting.md +2 -2
- data/docs/testimonials/hvmn.md +3 -3
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +11 -1
- data/docs/tutorial.md +31 -6
- data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -0
- data/lib/generators/react_on_rails/install_generator.rb +2 -0
- data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +8 -1
- data/lib/react_on_rails.rb +1 -0
- data/lib/react_on_rails/assets_precompile.rb +3 -0
- data/lib/react_on_rails/configuration.rb +2 -1
- data/lib/react_on_rails/git_utils.rb +2 -0
- data/lib/react_on_rails/helper.rb +72 -73
- data/lib/react_on_rails/json_output.rb +1 -1
- data/lib/react_on_rails/locales_to_js.rb +2 -0
- data/lib/react_on_rails/react_component/render_options.rb +4 -0
- data/lib/react_on_rails/server_rendering_js_code.rb +42 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +30 -5
- data/lib/react_on_rails/utils.rb +1 -1
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +4 -1
- data/lib/react_on_rails/webpacker_utils.rb +4 -1
- data/package-scripts.yml +46 -0
- data/package.json +24 -15
- data/rakelib/release.rake +3 -2
- data/react_on_rails.gemspec +1 -1
- data/webpackConfigLoader.js +2 -2
- data/yarn.lock +4431 -1689
- metadata +13 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a158a8eec25a9277154bcb4a8d884a167974992ba964d2c907fcef1f8066a2b2
|
|
4
|
+
data.tar.gz: 51798297228cf23cb6ca2149631783c8bb6e872462740923fc9ee6ecf41a16fb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c3dc59964bbb95cf38b79c556336d10c40dd7407c9ad9ab6ece58e2d57dbf3dc9110b7c65b94420ef3b98b3ec7fac5ebb351722fb80915d59898b80a80e0a59b
|
|
7
|
+
data.tar.gz: 499f3cd3d46b8b2b4d1ac35de78c94139ef8bcc54f474fee579aafd98936b3d930dce7979a51e3750c8a6de8e469372b51be83e5f0097e5a5c42765263664c61
|
data/.eslintrc
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
extends:
|
|
2
|
+
extends:
|
|
3
|
+
- eslint-config-shakacode
|
|
4
|
+
- prettier
|
|
5
|
+
- prettier/react
|
|
3
6
|
|
|
4
7
|
plugins:
|
|
5
|
-
-
|
|
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
|
data/.prettierignore
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
node_modules
|
data/.prettierrc
ADDED
|
@@ -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
|
data/.release-it.json
ADDED
data/.travis.yml
CHANGED
|
@@ -4,10 +4,9 @@ language: ruby
|
|
|
4
4
|
|
|
5
5
|
rvm:
|
|
6
6
|
# Rails 5 requires 2.2
|
|
7
|
-
- 2.3
|
|
8
|
-
- 2.
|
|
9
|
-
- 2.
|
|
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.
|
|
56
|
+
rvm: 2.3.8
|
|
58
57
|
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
|
59
|
-
rvm: 2.4.
|
|
58
|
+
rvm: 2.4.5
|
|
60
59
|
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
|
61
|
-
rvm: 2.5.
|
|
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.
|
|
64
|
+
rvm: 2.2.10
|
|
64
65
|
|
|
65
66
|
notifications:
|
|
66
67
|
slack:
|
data/CHANGELOG.md
CHANGED
|
@@ -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
|
|
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
|
data/CONTRIBUTING.md
CHANGED
|
@@ -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
|
|
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=
|
|
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"
|
data/Gemfile.rails32
CHANGED
data/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# ReactOnRails
|
|
2
2
|
|
|
3
|
-
[](./LICENSE.md) [](https://travis-ci.org/shakacode/react_on_rails) [](./LICENSE.md) [](https://travis-ci.org/shakacode/react_on_rails) [](https://badge.fury.io/rb/react_on_rails) [](https://badge.fury.io/js/react-on-rails) [](https://codeclimate.com/github/shakacode/react_on_rails) [](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [](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
|
-
|
|
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
|
|
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
|
-
|
|
38
|
+
[](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
|
|
38
39
|
|
|
39
|
-
* [HVMN Testimonial,
|
|
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
|
|
|
@@ -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
|
|
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
|
|
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),
|
|
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
|
[](https://scoutapp.com/)
|
|
327
332
|
[](https://www.browserstack.com)
|
|
333
|
+
[](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
|
|
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.
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
149
|
-
#
|
|
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 =
|
|
151
|
+
config.raise_on_prerender_error = Rails.env.development?
|
|
152
152
|
|
|
153
153
|
################################################################################
|
|
154
154
|
# Server Renderer Configuration for ExecJS
|