react_on_rails 13.0.2 → 13.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/main.yml +6 -2
- data/CHANGELOG.md +44 -4
- data/Gemfile.development_dependencies +2 -4
- data/README.md +44 -19
- data/docs/additional-details/migrating-from-react-rails.md +1 -1
- data/docs/api/javascript-api.md +9 -0
- data/docs/api/view-helpers-api.md +2 -1
- data/docs/{guides/getting-started.md → getting-started.md} +8 -2
- data/docs/guides/client-vs-server-rendering.md +4 -2
- data/docs/guides/configuration.md +19 -5
- data/docs/guides/file-system-based-automated-bundle-generation.md +189 -0
- data/docs/guides/i18n.md +71 -83
- data/docs/guides/rails-webpacker-react-integration-options.md +8 -8
- data/docs/guides/react-server-rendering.md +1 -1
- data/docs/guides/tutorial.md +10 -4
- data/docs/home.md +1 -1
- data/docs/javascript/server-rendering-tips.md +0 -3
- data/lib/generators/react_on_rails/base_generator.rb +0 -1
- data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +1 -1
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +13 -0
- data/lib/react_on_rails/configuration.rb +11 -33
- data/lib/react_on_rails/helper.rb +37 -2
- data/lib/react_on_rails/locales/base.rb +24 -1
- data/lib/react_on_rails/packs_generator.rb +298 -0
- data/lib/react_on_rails/react_component/render_options.rb +4 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +0 -6
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +2 -0
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +19 -3
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/webpacker_utils.rb +14 -0
- data/lib/react_on_rails.rb +1 -0
- data/lib/tasks/generate_packs.rake +11 -0
- data/package.json +2 -2
- data/yarn.lock +5 -5
- metadata +6 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 763474ed712a00d925c374048aca65cef79aa72ababa1ab3b06d00c8eb8ede2a
|
|
4
|
+
data.tar.gz: 47cb351a79b2aca23615ae60b5b9d8e2f4300b7d1e92abf04b67ed7d7ac54a18
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ddff41744b61108f731644f8e4d7e7f9e059ee25a656baf60ac4b9e58ad7da8e90bc047a8d2e0d91d2caf3947080a8afa305a4c9ce75a1e29635da61c3b78e4c
|
|
7
|
+
data.tar.gz: 8030fdb57740f229e97e6545d360c61f6fbdcad4d8a2b227d11b21693ff0ee10774d92c3b8076610724f9ba9f8eb8d5cf10271c3e9f0726022a1a57968afe363
|
data/.github/workflows/main.yml
CHANGED
|
@@ -8,13 +8,17 @@ jobs:
|
|
|
8
8
|
matrix:
|
|
9
9
|
ruby: [2.7]
|
|
10
10
|
node: [14]
|
|
11
|
-
runs-on: ubuntu-
|
|
11
|
+
runs-on: ubuntu-20.04
|
|
12
12
|
steps:
|
|
13
13
|
- uses: actions/checkout@v2
|
|
14
14
|
- name: Setup Ruby
|
|
15
15
|
uses: ruby/setup-ruby@v1
|
|
16
16
|
with:
|
|
17
17
|
ruby-version: ${{ matrix.ruby }}
|
|
18
|
+
# libyaml-dev is needed for psych v5
|
|
19
|
+
# this gem depends on sdoc which depends on rdoc which depends on psych
|
|
20
|
+
- name: Fix dependency for libyaml-dev
|
|
21
|
+
run: sudo apt install libyaml-dev
|
|
18
22
|
- name: Setup Node
|
|
19
23
|
uses: actions/setup-node@v2-beta
|
|
20
24
|
with:
|
|
@@ -73,7 +77,7 @@ jobs:
|
|
|
73
77
|
ruby: [2.7]
|
|
74
78
|
node: [14]
|
|
75
79
|
rake_task: ['run_rspec:all_dummy', 'run_rspec:all_but_examples', 'run_rspec:examples']
|
|
76
|
-
runs-on: ubuntu-
|
|
80
|
+
runs-on: ubuntu-20.04
|
|
77
81
|
steps:
|
|
78
82
|
- uses: actions/checkout@v2
|
|
79
83
|
- name: Setup Ruby
|
data/CHANGELOG.md
CHANGED
|
@@ -16,10 +16,47 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
|
|
|
16
16
|
Changes since last non-beta release.
|
|
17
17
|
|
|
18
18
|
*Please add entries here for your pull requests that are not yet released.*
|
|
19
|
+
|
|
20
|
+
### [13.2.0] - 2022-12-23
|
|
21
|
+
|
|
22
|
+
### Fixed
|
|
23
|
+
- Fix reactOnRailsPageUnloaded when there is no component on the page. Important for apps using both hotwire and react_on_rails. [PR 1498](https://github.com/shakacode/react_on_rails/pull/1498) by [NhanHo](https://github.com/NhanHo).
|
|
24
|
+
- Fixing wrong type. The throwIfMissing param of getStore should be optional as it defaults to true. [PR 1480](https://github.com/shakacode/react_on_rails/pull/1480) by [wouldntsavezion](https://github.com/wouldntsavezion).
|
|
25
|
+
|
|
26
|
+
### Added
|
|
27
|
+
- Exposed `reactHydrateOrRender` utility via [PR 1481](https://github.com/shakacode/react_on_rails/pull/1481) by [vaukalak](https://github.com/vaukalak).
|
|
28
|
+
|
|
29
|
+
### [13.1.0] - 2022-08-20
|
|
30
|
+
|
|
31
|
+
#### Improved
|
|
32
|
+
- Removed addition of `mini_racer` gem by default. [PR 1453](https://github.com/shakacode/react_on_rails/pull/1453) by [vtamara](https://github.com/vtamara) and [tomdracz](https://github.com/tomdracz).
|
|
33
|
+
|
|
34
|
+
Using `mini_racer` makes most sense when deploying or building in environments that do not have Javascript runtime present. Since `react_on_rails` requires Node.js, there's no reason to override `ExecJS` runtime with `mini_racer`.
|
|
35
|
+
|
|
36
|
+
To migrate this change, remove `mini_racer` gem from your `Gemfile` and test your app for correct behaviour. You can continue using `mini_racer` and it will be still picked as the default `ExecJS` runtime, if present in your app `Gemfile`.
|
|
37
|
+
|
|
38
|
+
- Upgraded the example test app in `spec/dummy` to React 18. [PR 1463](https://github.com/shakacode/react_on_rails/pull/1463) by [alexeyr](https://github.com/alexeyr).
|
|
39
|
+
|
|
40
|
+
- Added file-system-based automatic bundle generation feature. [PR 1455](https://github.com/shakacode/react_on_rails/pull/1455) by [pulkitkkr](https://github.com/pulkitkkr).
|
|
41
|
+
|
|
42
|
+
#### Fixed
|
|
43
|
+
- Correctly unmount roots under React 18. [PR 1466](https://github.com/shakacode/react_on_rails/pull/1466) by [alexeyr](https://github.com/alexeyr).
|
|
44
|
+
|
|
45
|
+
- Fixed the `You are importing hydrateRoot from "react-dom" [...] You should instead import it from "react-dom/client"` warning under React 18 ([#1441](https://github.com/shakacode/react_on_rails/issues/1441)). [PR 1460](https://github.com/shakacode/react_on_rails/pull/1460) by [alexeyr](https://github.com/alexeyr).
|
|
46
|
+
|
|
47
|
+
In exchange, you may see a warning like this when building a Webpack bundle under React 16:
|
|
48
|
+
```
|
|
49
|
+
WARNING in ./node_modules/react-on-rails/node_package/lib/reactHydrateOrRender.js19:25-52
|
|
50
|
+
Module not found: Error: Can't resolve 'react-dom/client' in '/home/runner/work/react_on_rails/react_on_rails/spec/dummy/node_modules/react-on-rails/node_package/lib'
|
|
51
|
+
@ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js 34:45-78
|
|
52
|
+
@ ./client/app/packs/client-bundle.js 5:0-42 32:0-23 35:0-21 59:0-26
|
|
53
|
+
```
|
|
54
|
+
It can be safely [suppressed](https://webpack.js.org/configuration/other-options/#ignorewarnings) in your Webpack configuration.
|
|
55
|
+
|
|
19
56
|
### [13.0.2] - 2022-03-09
|
|
20
57
|
#### Fixed
|
|
21
58
|
- React 16 doesn't support version property, causing problems loading React on Rails. [PR 1435](https://github.com/shakacode/react_on_rails/pull/1435) by [justin808](https://github.com/justin808).
|
|
22
|
-
|
|
59
|
+
|
|
23
60
|
### [13.0.1] - 2022-02-09
|
|
24
61
|
#### Improved
|
|
25
62
|
- Updated the default generator. [PR 1431](https://github.com/shakacode/react_on_rails/pull/1431) by [justin808](https://github.com/justin808).
|
|
@@ -29,7 +66,7 @@ Changes since last non-beta release.
|
|
|
29
66
|
- Removed webpacker as a dependency. Add gem Shakapacker to your project, and update your package.json to also use shakapacker.
|
|
30
67
|
|
|
31
68
|
#### Fixed
|
|
32
|
-
-
|
|
69
|
+
- Proper throwing of exceptions.
|
|
33
70
|
- Default configuration better handles test env.
|
|
34
71
|
|
|
35
72
|
### [12.6.0] - 2022-01-22
|
|
@@ -63,7 +100,7 @@ Changes since last non-beta release.
|
|
|
63
100
|
|
|
64
101
|
- Ability to stop React on Rails from modifying or creating the `assets:precompile` task. [PR 1371](https://github.com/shakacode/react_on_rails/pull/1371) by [justin808](https://github.com/justin808). Thanks to [elstgav](https://github.com/elstgav) for [the suggestion](https://github.com/shakacode/react_on_rails/issues/1368)!
|
|
65
102
|
|
|
66
|
-
-
|
|
103
|
+
- Added the ability to have render functions return a promise to be awaited by React on Rails Pro Node Renderer. [PR 1380](https://github.com/shakacode/react_on_rails/pull/1380) by [judahmeek](https://github.com/judahmeek)
|
|
67
104
|
|
|
68
105
|
### [12.3.0] - 2021-07-26
|
|
69
106
|
#### Added
|
|
@@ -1014,7 +1051,10 @@ Best done with Object destructing:
|
|
|
1014
1051
|
##### Fixed
|
|
1015
1052
|
- Fix several generator related issues.
|
|
1016
1053
|
|
|
1017
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.0
|
|
1054
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.2.0...master
|
|
1055
|
+
[13.2.0]: https://github.com/shakacode/react_on_rails/compare/13.1.0...13.2.0
|
|
1056
|
+
[13.1.0]: https://github.com/shakacode/react_on_rails/compare/13.0.2...13.1.0
|
|
1057
|
+
[13.0.2]: https://github.com/shakacode/react_on_rails/compare/13.0.1...13.0.2
|
|
1018
1058
|
[13.0.1]: https://github.com/shakacode/react_on_rails/compare/13.0.0...13.0.1
|
|
1019
1059
|
[13.0.0]: https://github.com/shakacode/react_on_rails/compare/12.6.0...13.0.0
|
|
1020
1060
|
[12.6.0]: https://github.com/shakacode/react_on_rails/compare/12.5.2...12.6.0
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
gem "shakapacker", ">= 6.
|
|
3
|
+
gem "shakapacker", ">= 6.4.0"
|
|
4
4
|
gem "bootsnap", require: false
|
|
5
5
|
gem "rails", "~> 7.0"
|
|
6
6
|
gem "sqlite3"
|
|
7
7
|
gem "sass-rails", "~> 6.0"
|
|
8
8
|
gem "uglifier"
|
|
9
9
|
gem "jquery-rails"
|
|
10
|
-
gem "puma"
|
|
10
|
+
gem "puma", "~> 5.0"
|
|
11
11
|
|
|
12
12
|
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
|
|
13
13
|
gem "turbolinks" if ENV["DISABLE_TURBOLINKS"].nil? || ENV["DISABLE_TURBOLINKS"].strip.empty?
|
|
@@ -21,8 +21,6 @@ gem "sprockets", "~> 4.0"
|
|
|
21
21
|
|
|
22
22
|
gem "amazing_print"
|
|
23
23
|
|
|
24
|
-
gem "mini_racer", ">= 0.6.2"
|
|
25
|
-
|
|
26
24
|
group :development, :test do
|
|
27
25
|
gem "listen"
|
|
28
26
|
gem "pry"
|
data/README.md
CHANGED
|
@@ -9,7 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
-
[](LICENSE.md)
|
|
12
|
+
[](LICENSE.md)[](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)
|
|
13
|
+
|
|
14
|
+
[](https://github.com/shakacode/react_on_rails/actions/workflows/main.yml)
|
|
15
|
+
[](https://github.com/shakacode/react_on_rails/actions/workflows/package-js-tests.yml)
|
|
16
|
+
[](https://github.com/shakacode/react_on_rails/actions/workflows/rspec-package-specs.yml)
|
|
17
|
+
[](https://github.com/shakacode/react_on_rails/actions/workflows/lint-js-and-ruby.yml)
|
|
13
18
|
|
|
14
19
|
# News
|
|
15
20
|
* ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
|
|
@@ -27,7 +32,7 @@ This project is maintained by the software consulting firm [ShakaCode](https://w
|
|
|
27
32
|
Are you interested in optimizing your webpack setup for React on Rails including code
|
|
28
33
|
splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and
|
|
29
34
|
[loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
|
|
30
|
-
We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu is serving millions of SSR requests per day React on Rails.
|
|
35
|
+
We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu is serving millions of SSR requests per day with React on Rails.
|
|
31
36
|
|
|
32
37
|
Check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/). For more information, feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails.
|
|
33
38
|
|
|
@@ -43,9 +48,12 @@ To provide a high performance framework for integrating Ruby on Rails with React
|
|
|
43
48
|
|
|
44
49
|
Given that `rails/webpacker` gem already provides basic React integration, why would you use "React on Rails"?
|
|
45
50
|
|
|
51
|
+
1. Automatic configuration of what bundles are added to the page based on what React components are on the page. This results in faster browser loading time via smaller bundle sizes.
|
|
52
|
+
1. Keep up with the latest changes of different versions of React. React 18 is supported.
|
|
46
53
|
1. 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.
|
|
47
|
-
|
|
54
|
+
Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or it's predecessor [rails/webpacker](https://github.com/rails/webpacker)).
|
|
48
55
|
1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
|
|
56
|
+
1. [Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure `javascript_pack_tags` and `stylesheet_pack_tags` on your layouts based on what’s shown. “It just works!”](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md)
|
|
49
57
|
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering.
|
|
50
58
|
1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n)
|
|
51
59
|
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+depth%3Aall/).
|
|
@@ -65,7 +73,7 @@ _Requires creating a free account._
|
|
|
65
73
|
|
|
66
74
|
## Prerequisites
|
|
67
75
|
|
|
68
|
-
Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
|
|
76
|
+
Ruby on Rails >=5, rails/webpacker >= 4.2 or shakapacker > 6, Ruby >= 2.7
|
|
69
77
|
|
|
70
78
|
# Support
|
|
71
79
|
|
|
@@ -81,24 +89,41 @@ Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
|
|
|
81
89
|
|
|
82
90
|
Bug reports and pull requests are welcome. See [Contributing](https://github.com/shakacode/react_on_rails/tree/master/CONTRIBUTING.md) to get started, and the [list of help wanted issues](https://github.com/shakacode/react_on_rails/labels/contributions%3A%20up%20for%20grabs%21).
|
|
83
91
|
|
|
84
|
-
# Supporters
|
|
85
|
-
|
|
86
|
-
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 [HiChee.com](https://HiChee.com), [Rails AutoScale](https://railsautoscale.com) to scale the dynos of HiChee, and [HoneyBadger](https://www.honeybadger.io/) to monitor application errors. We love [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers. [Status Hero](https://statushero.com/) keeps the team posted on daily progress; it's so much better than live standups.
|
|
87
|
-
|
|
88
|
-
[](https://www.jetbrains.com/ruby/)
|
|
89
|
-
[](https://scoutapp.com/)
|
|
90
|
-
[](https://railsautoscale.com/)
|
|
91
|
-
[](https://www.browserstack.com)
|
|
92
|
-
[](https://www.honeybadger.io/)
|
|
93
|
-
[](https://statushero.com/)
|
|
94
|
-
|
|
95
|
-
ShakaCode's favorite project tracking tool is [Shortcut](https://shortcut.com/). If you want to **try Shortcut and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/referral/). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
|
|
96
|
-
|
|
97
|
-
Aloha and best wishes from Justin and the ShakaCode team!
|
|
98
|
-
|
|
99
92
|
# Work with Us
|
|
100
93
|
ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)!
|
|
101
94
|
|
|
102
95
|
# License
|
|
103
96
|
|
|
104
97
|
The gem is available as open source under the terms of the [MIT License](https://github.com/shakacode/react_on_rails/tree/master/LICENSE.md).
|
|
98
|
+
|
|
99
|
+
# Supporters
|
|
100
|
+
|
|
101
|
+
<a href="https://www.jetbrains.com">
|
|
102
|
+
<img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
|
|
103
|
+
</a>
|
|
104
|
+
<a href="https://scoutapp.com">
|
|
105
|
+
<picture>
|
|
106
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881147-0d077438-3978-40da-ace9-4f650d2efe2e.png">
|
|
107
|
+
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png">
|
|
108
|
+
<img alt="ScoutAPM" src="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png" height="120px">
|
|
109
|
+
</picture>
|
|
110
|
+
</a>
|
|
111
|
+
<br />
|
|
112
|
+
<a href="https://www.browserstack.com">
|
|
113
|
+
<picture>
|
|
114
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881122-407dcc29-df78-4b20-a9ad-f597b56f6cdb.png">
|
|
115
|
+
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png">
|
|
116
|
+
<img alt="BrowserStack" src="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png" height="55px">
|
|
117
|
+
</picture>
|
|
118
|
+
</a>
|
|
119
|
+
<a href="https://railsautoscale.com">
|
|
120
|
+
<img src="https://user-images.githubusercontent.com/4244251/184881144-95c2c25c-9879-4069-864d-4e67d6ed39d2.png" alt="Rails Autoscale" height="55px">
|
|
121
|
+
</a>
|
|
122
|
+
<a href="https://www.honeybadger.io">
|
|
123
|
+
<img src="https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png" alt="Honeybadger" height="55px">
|
|
124
|
+
</a>
|
|
125
|
+
|
|
126
|
+
<br />
|
|
127
|
+
<br />
|
|
128
|
+
|
|
129
|
+
The following companies support our open source projects, and ShakaCode uses their products!
|
|
@@ -11,7 +11,7 @@ If you are using [react-rails](https://github.com/reactjs/react-rails) in your p
|
|
|
11
11
|
//= require components
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
- Follow our getting started guide
|
|
14
|
+
- Follow our [getting started guide](https://www.shakacode.com/react-on-rails/docs/getting-started/).
|
|
15
15
|
|
|
16
16
|
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.
|
|
17
17
|
|
data/docs/api/javascript-api.md
CHANGED
|
@@ -58,6 +58,15 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
|
|
|
58
58
|
*/
|
|
59
59
|
getStore(name, throwIfMissing = true )
|
|
60
60
|
|
|
61
|
+
/**
|
|
62
|
+
* Renders or hydrates the react element passed. In case react version is >=18 will use the new api.
|
|
63
|
+
* @param domNode
|
|
64
|
+
* @param reactElement
|
|
65
|
+
* @param hydrate if true will perform hydration, if false will render
|
|
66
|
+
* @returns {Root|ReactComponent|ReactElement|null}
|
|
67
|
+
*/
|
|
68
|
+
reactHydrateOrRender(domNode, reactElement, hydrate)
|
|
69
|
+
|
|
61
70
|
/**
|
|
62
71
|
* Set options for ReactOnRails, typically before you call ReactOnRails.register
|
|
63
72
|
* Available Options:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# View and Controller Helpers
|
|
2
2
|
## View Helpers API
|
|
3
3
|
|
|
4
|
-
Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, `react_component
|
|
4
|
+
Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component).
|
|
5
5
|
|
|
6
6
|
------------
|
|
7
7
|
|
|
@@ -27,6 +27,7 @@ Uncommonly used options:
|
|
|
27
27
|
- **general options:**
|
|
28
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.
|
|
29
29
|
- **prerender:** enable server-side rendering of a component. Set to false when debugging!
|
|
30
|
+
- **auto_load_bundle:** will automatically load the bundle for component by calling `append_javascript_pack_tag` and `append_stylesheet_pack_tag` under the hood.
|
|
30
31
|
- **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.
|
|
31
32
|
- **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.
|
|
32
33
|
- **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.
|
|
@@ -9,7 +9,10 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
|
|
|
9
9
|
|
|
10
10
|
## Basic Installation
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
These steps assume that you've got a rails application with webpacker (e.g. one
|
|
13
|
+
generated using `rails new my_app --javascript=webpack`). If your
|
|
14
|
+
application is not yet set up to use webpacker, please see
|
|
15
|
+
[the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/).*
|
|
13
16
|
|
|
14
17
|
1. Add the `react_on_rails` gem to Gemfile:
|
|
15
18
|
|
|
@@ -39,12 +42,15 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
|
|
|
39
42
|
With the code from running the React on Rails generator above:
|
|
40
43
|
|
|
41
44
|
1. Edit `app/views/hello_world/index.html.erb` and set the `prerender` option to `true`.
|
|
45
|
+
|
|
46
|
+
You may need to use `Node` as your js runtime environment by setting `EXECJS_RUNTIME=Node` into your environment variables.
|
|
47
|
+
|
|
42
48
|
2. Refresh the page.
|
|
43
49
|
|
|
44
50
|
Below is the line where you turn server rendering on by setting `prerender` to true:
|
|
45
51
|
|
|
46
52
|
```erb
|
|
47
|
-
<%= react_component("HelloWorld", props: @hello_world_props, prerender:
|
|
53
|
+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
|
|
48
54
|
```
|
|
49
55
|
|
|
50
56
|
Note, if you got an error in your console regarding "ReferenceError: window is not defined",
|
|
@@ -4,9 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
|
|
6
6
|
|
|
7
|
-
Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client.
|
|
7
|
+
Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. By default, ExecJS uses the Node.js runtime. You can use alternative runtimes as outlined in [ExecJS readme](https://github.com/rails/execjs/blob/master/README.md).
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Note: if you use the [mini_racer](https://github.com/rubyjs/mini_racer) runtime and run into a `ReferenceError: TextEncoder is not defined` error, see [this comment](https://github.com/shakacode/react_on_rails/issues/1457#issuecomment-1165026717) for a solution.
|
|
10
|
+
|
|
11
|
+
If you want to maximize the performance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
|
|
10
12
|
|
|
11
13
|
If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
|
|
12
14
|
|
|
@@ -137,19 +137,33 @@ ReactOnRails.configure do |config|
|
|
|
137
137
|
################################################################################
|
|
138
138
|
# Server Renderer Configuration for ExecJS
|
|
139
139
|
################################################################################
|
|
140
|
-
# The default server rendering is ExecJS,
|
|
140
|
+
# The default server rendering is ExecJS, by default using Node.js runtime
|
|
141
141
|
# If you wish to use an alternative Node server rendering for higher performance,
|
|
142
142
|
# contact justin@shakacode.com for details.
|
|
143
143
|
#
|
|
144
144
|
# For ExecJS:
|
|
145
145
|
# You can configure your pool of JS virtual machines and specify where it should load code:
|
|
146
|
-
# On MRI, use `
|
|
147
|
-
# (see
|
|
146
|
+
# On MRI, use `node.js` runtime for the best performance
|
|
147
|
+
# (see https://github.com/shakacode/react_on_rails/issues/1438)
|
|
148
|
+
# Also see https://github.com/shakacode/react_on_rails/issues/1457#issuecomment-1165026717 if using `mini_racer`
|
|
148
149
|
# On MRI, you'll get a deadlock with `pool_size` > 1
|
|
149
150
|
# If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
|
|
150
151
|
config.server_renderer_pool_size = 1 # increase if you're on JRuby
|
|
151
152
|
config.server_renderer_timeout = 20 # seconds
|
|
152
153
|
|
|
154
|
+
################################################################################
|
|
155
|
+
################################################################################
|
|
156
|
+
# FILE SYSTEM BASED COMPONENT REGISTRY
|
|
157
|
+
################################################################################
|
|
158
|
+
# components_subdirectory is the name of the subdirectory matched to detect and register components automatically
|
|
159
|
+
# The default is nil. You can enable the feature by updating it in the next line.
|
|
160
|
+
config.components_subdirectory = "ror_components"
|
|
161
|
+
|
|
162
|
+
# For automated component registry, `render_component` view helper method tries to load bundle for component from
|
|
163
|
+
# generated directory. default is false, you can pass option at the time of individual usage or update the default
|
|
164
|
+
# in the following line
|
|
165
|
+
config.auto_load_bundle = false
|
|
166
|
+
|
|
153
167
|
################################################################################
|
|
154
168
|
# I18N OPTIONS
|
|
155
169
|
################################################################################
|
|
@@ -173,7 +187,7 @@ ReactOnRails.configure do |config|
|
|
|
173
187
|
################################################################################
|
|
174
188
|
################################################################################
|
|
175
189
|
# CLIENT RENDERING OPTIONS
|
|
176
|
-
# Below options can be
|
|
190
|
+
# Below options can be overridden by passing options to the react_on_rails
|
|
177
191
|
# `render_component` view helper method.
|
|
178
192
|
################################################################################
|
|
179
193
|
# default is false
|
|
@@ -212,7 +226,7 @@ ReactOnRails.configure do |config|
|
|
|
212
226
|
#
|
|
213
227
|
# Define the files we need to check for webpack compilation when running tests.
|
|
214
228
|
# The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
|
|
215
|
-
# However, if you are
|
|
229
|
+
# However, if you are generating a server bundle that is NOT hashed (present in manifest.json),
|
|
216
230
|
# then include the file in this list like this:
|
|
217
231
|
config.webpack_generated_files = %w( server-bundle.js manifest.json )
|
|
218
232
|
# Note, be sure NOT to include your server-bundle.js if it is hashed, or else React on Rails will
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
# File-System-Based Automated Bundle Generation
|
|
2
|
+
|
|
3
|
+
To use the automated bundle generation feature introduced in React on Rails v13.1.0, please upgrade to use [Shakapacker v6.5.1](https://github.com/shakacode/shakapacker/tree/v6.5.1) at least. If you are currently using webpacker, please follow the migration steps available [here](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md).
|
|
4
|
+
|
|
5
|
+
## Configuration
|
|
6
|
+
|
|
7
|
+
### Enable nested_entries for Shakapacker
|
|
8
|
+
To use the automated bundle generation feature, set `nested_entries: true` in the `webpacker.yml` file like this.
|
|
9
|
+
The generated files will go in a nested directory.
|
|
10
|
+
|
|
11
|
+
```yml
|
|
12
|
+
default:
|
|
13
|
+
...
|
|
14
|
+
nested_entries: true
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
For more details, see [Configuration and Code](https://github.com/shakacode/shakapacker#configuration-and-code) section in [shakapacker](https://github.com/shakacode/shakapacker/).
|
|
18
|
+
|
|
19
|
+
### Configure Components Subdirectory
|
|
20
|
+
`components_subdirectory` is the name of the matched directories containing components that will be automatically registered for use by the view helpers.
|
|
21
|
+
For example, configure `config/initializers/react_on_rails` to set the name for `components_subdirectory`.·
|
|
22
|
+
|
|
23
|
+
```rb
|
|
24
|
+
config.components_subdirectory = "ror_components"
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Now all React components inside the directories called `ror_components` will automatically be registered for usage with [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) helper methods provided by React on Rails.
|
|
28
|
+
|
|
29
|
+
### Configure `auto_load_bundle` Option
|
|
30
|
+
|
|
31
|
+
For automated component registry, [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper method tries to load generated bundle for component from the generated directory automatically per `auto_load_bundle` option. `auto_load_bundle` option in `config/initializers/react_on_rails` configures the default value that will be passed to component helpers. The default is `false`, and the parameter can be passed explicitly for each call.
|
|
32
|
+
|
|
33
|
+
You can change the value in `config/initializers/react_on_rails` by updating it as follows:
|
|
34
|
+
|
|
35
|
+
```rb
|
|
36
|
+
config.auto_load_bundle = true
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Update `.gitignore` file
|
|
40
|
+
React on Rails automatically generates pack files for components to be registered in the `packs/generated` directory. To avoid committing generated files into the version control system, please update `.gitignore` to have
|
|
41
|
+
|
|
42
|
+
```gitignore
|
|
43
|
+
# Generated React on Rails packs
|
|
44
|
+
app/javascript/packs/generated
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
*Note: the directory might be different depending on the `source_entry_path` in `config/webpacker.yml`.*
|
|
48
|
+
|
|
49
|
+
## Usage
|
|
50
|
+
|
|
51
|
+
### Basic usage
|
|
52
|
+
|
|
53
|
+
#### Background
|
|
54
|
+
If the `webpacker.yml` file is configured as instructed [here](https://github.com/shakacode/shakapacker#configuration-and-code), with the following configurations
|
|
55
|
+
|
|
56
|
+
```yml
|
|
57
|
+
default: &default
|
|
58
|
+
source_path: app/javascript
|
|
59
|
+
source_entry_path: packs
|
|
60
|
+
public_root_path: public
|
|
61
|
+
public_output_path: packs
|
|
62
|
+
nested_entries: true
|
|
63
|
+
# And more
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
the directory structure will look like this
|
|
67
|
+
```
|
|
68
|
+
app/javascript:
|
|
69
|
+
└── packs: # sets up webpack entries
|
|
70
|
+
│ └── application.js # references FooComponentOne.jsx, BarComponentOne.jsx and BarComponentTwo.jsx in `../src`
|
|
71
|
+
└── src: # any directory name is fine. Referenced files need to be under source_path
|
|
72
|
+
│ └── Foo
|
|
73
|
+
│ │ └── ...
|
|
74
|
+
│ │ └── FooComponentOne.jsx
|
|
75
|
+
│ └── Bar
|
|
76
|
+
│ │ └── ...
|
|
77
|
+
│ │ └── BarComponentOne.jsx
|
|
78
|
+
│ │ └── BarComponentTwo.jsx
|
|
79
|
+
└── stylesheets:
|
|
80
|
+
│ └── my_styles.css
|
|
81
|
+
└── images:
|
|
82
|
+
└── logo.svg
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Previously, many applications would use one pack (webpack entrypoint) for many components. In this example, the`application.js` file manually registers server components, `FooComponentOne`, `BarComponentOne` and `BarComponentTwo`.
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
import ReactOnRails from 'react-on-rails';
|
|
89
|
+
import FooComponentOne from '../src/Foo/FooComponentOne';
|
|
90
|
+
import BarComponentOne from '../src/Foo/BarComponentOne';
|
|
91
|
+
import BarComponentTwo from '../src/Foo/BarComponentTwo';
|
|
92
|
+
|
|
93
|
+
ReactOnRails.register({ FooComponentOne, BarComponentOne, BarComponentTwo });
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Your layout would contain:
|
|
97
|
+
|
|
98
|
+
```erb
|
|
99
|
+
<%= javascript_pack_tag 'application' %>
|
|
100
|
+
<%= stylesheet_pack_tag 'application' %>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
Suppose, you want to use bundle splitting to minimize unnecessary javascript loaded on each page, you would put each of your components in the `packs` directory.
|
|
105
|
+
```
|
|
106
|
+
app/javascript:
|
|
107
|
+
└── packs: # sets up webpack entries
|
|
108
|
+
│ └── FooComponentOne.jsx # Internally uses ReactOnRails.register
|
|
109
|
+
│ └── BarComponentOne.jsx # Internally uses ReactOnRails.register
|
|
110
|
+
│ └── BarComponentTwo.jsx # Internally uses ReactOnRails.register
|
|
111
|
+
└── src: # any directory name is fine. Referenced files need to be under source_path
|
|
112
|
+
│ └── Foo
|
|
113
|
+
│ │ └── ...
|
|
114
|
+
│ └── Bar
|
|
115
|
+
│ │ └── ...
|
|
116
|
+
└── stylesheets:
|
|
117
|
+
│ └── my_styles.css
|
|
118
|
+
└── images:
|
|
119
|
+
└── logo.svg
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The tricky part is to figure out which bundles to load on any Rails view. [Shakapacker's `append_stylesheet_pack_tag` and `append_javascript_pack_tag` view helpers](https://github.com/shakacode/shakapacker#view-helper-append_javascript_pack_tag-and-append_stylesheet_pack_tag) enables Rails views to specify needed bundles for use by layout's call to `javascript_pack_tag` and `stylesheet_pack_tag`.
|
|
123
|
+
|
|
124
|
+
#### Solution
|
|
125
|
+
|
|
126
|
+
File-system-based automated pack generation simplifies this process with a new option for the view helpers. The steps to use it in this example are:
|
|
127
|
+
|
|
128
|
+
1. Remove parameters passed directly to `javascript_pack_tag` and `stylesheet_pack_tag`.
|
|
129
|
+
2. Remove parameters passed directly to `append_javascript_pack_tag` and `append_stylesheet_pack_tag`.
|
|
130
|
+
|
|
131
|
+
Your layout would now contain:
|
|
132
|
+
|
|
133
|
+
```erb
|
|
134
|
+
<%= javascript_pack_tag %>
|
|
135
|
+
<%= stylesheet_pack_tag %>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
3. Create a directory structure as mentioned below:
|
|
139
|
+
|
|
140
|
+
```
|
|
141
|
+
app/javascript:
|
|
142
|
+
└── packs
|
|
143
|
+
└── src:
|
|
144
|
+
│ └── Foo
|
|
145
|
+
│ │ └── ...
|
|
146
|
+
│ │ └── ror_components # configured as `components_subdirectory`
|
|
147
|
+
│ │ └── FooComponentOne.jsx
|
|
148
|
+
│ └── Bar
|
|
149
|
+
│ │ └── ...
|
|
150
|
+
│ │ └── ror_components # configured as `components_subdirectory`
|
|
151
|
+
│ │ │ └── BarComponentOne.jsx
|
|
152
|
+
│ │ │ └── BarComponentTwo.jsx
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
4. You no longer need to register these React components nor directly add their bundles. For example you can have a Rails view using three components:
|
|
156
|
+
|
|
157
|
+
```erb
|
|
158
|
+
<%= react_component("FooComponentOne", {}, auto_load_bundle: true) %>
|
|
159
|
+
<%= react_component("BarComponentOne", {}, auto_load_bundle: true) %>
|
|
160
|
+
<%= react_component("BarComponentTwo", {}, auto_load_bundle: true) %>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
If `FooComponentOne` uses multiple HTML strings for server rendering, the [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper can be used on the Rails view, as illustrated below.
|
|
164
|
+
|
|
165
|
+
```erb
|
|
166
|
+
<% foo_component_one_data = react_component_hash("FooComponentOne",
|
|
167
|
+
prerender: true,
|
|
168
|
+
auto_load_bundle: true
|
|
169
|
+
props: {}
|
|
170
|
+
) %>
|
|
171
|
+
<% content_for :title do %>
|
|
172
|
+
<%= foo_component_one_data['title'] %>
|
|
173
|
+
<% end %>
|
|
174
|
+
<%= foo_component_one_data["componentHtml"] %>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
The default value of the `auto_load_bundle` parameter can be specified by setting `config.auto_load_bundle` in `config/initializers/react_on_rails.rb` and thus removed from each call to `react_component`.
|
|
178
|
+
|
|
179
|
+
### Server Rendering and Client Rendering Components
|
|
180
|
+
|
|
181
|
+
If server rendering is enabled, the component will be registered for usage both in server and client rendering. In order to have separate definitions for client and server rendering, name the component files as `ComponentName.server.jsx` and `ComponentName.client.jsx`. The `ComponentName.server.jsx` file will be used for server rendering and the `ComponentName.client.jsx` file for client rendering. If you don't want the component rendered on the server, you should only have the `ComponentName.client.jsx` file.
|
|
182
|
+
|
|
183
|
+
*Note: If specifying separate definitions for client and server rendering, please make sure to delete the generalized `ComponentName.jsx` file.*
|
|
184
|
+
|
|
185
|
+
### Using Automated Bundle Generation Feature with already defined packs
|
|
186
|
+
|
|
187
|
+
To use the Automated Bundle Generation feature with already defined packs, `config/initializers/react_on_rails` should explicitly be configured with `config.auto_load_bundle = false` and you can explicitly pass `auto_load_bundle` option in [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) for the components using this feature.
|
|
188
|
+
|
|
189
|
+
|