react-rails 2.4.7 → 2.7.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +99 -10
- data/LICENSE +0 -0
- data/README.md +304 -41
- data/lib/assets/javascripts/JSXTransformer.js +0 -0
- data/lib/assets/javascripts/react_ujs.js +1 -507
- data/lib/assets/react-source/development/react-server.js +166 -6795
- data/lib/assets/react-source/development/react.js +184 -21874
- data/lib/assets/react-source/production/react-server.js +2 -22
- data/lib/assets/react-source/production/react.js +2 -24
- data/lib/generators/react/component_generator.rb +91 -15
- data/lib/generators/react/install_generator.rb +22 -4
- data/lib/generators/templates/component.es6.jsx +0 -0
- data/lib/generators/templates/component.js.jsx +0 -0
- data/lib/generators/templates/component.js.jsx.coffee +0 -0
- data/lib/generators/templates/component.js.jsx.tsx +36 -0
- data/lib/generators/templates/react_server_rendering.rb +0 -0
- data/lib/generators/templates/server_rendering.js +0 -0
- data/lib/generators/templates/server_rendering_pack.js +3 -3
- data/lib/react/jsx/babel_transformer.rb +0 -0
- data/lib/react/jsx/jsx_transformer.rb +0 -0
- data/lib/react/jsx/processor.rb +0 -0
- data/lib/react/jsx/sprockets_strategy.rb +1 -1
- data/lib/react/jsx/template.rb +0 -0
- data/lib/react/jsx.rb +0 -0
- data/lib/react/rails/asset_variant.rb +0 -0
- data/lib/react/rails/component_mount.rb +7 -0
- data/lib/react/rails/controller_lifecycle.rb +0 -0
- data/lib/react/rails/controller_renderer.rb +0 -0
- data/lib/react/rails/railtie.rb +1 -0
- data/lib/react/rails/test_helper.rb +23 -0
- data/lib/react/rails/version.rb +1 -1
- data/lib/react/rails/view_helper.rb +0 -0
- data/lib/react/rails.rb +0 -0
- data/lib/react/server_rendering/bundle_renderer/console_polyfill.js +0 -0
- data/lib/react/server_rendering/bundle_renderer/console_replay.js +0 -0
- data/lib/react/server_rendering/bundle_renderer/console_reset.js +0 -0
- data/lib/react/server_rendering/bundle_renderer/timeout_polyfill.js +0 -0
- data/lib/react/server_rendering/bundle_renderer.rb +0 -0
- data/lib/react/server_rendering/environment_container.rb +0 -0
- data/lib/react/server_rendering/exec_js_renderer.rb +0 -0
- data/lib/react/server_rendering/manifest_container.rb +0 -0
- data/lib/react/server_rendering/webpacker_manifest_container.rb +4 -4
- data/lib/react/server_rendering/yaml_manifest_container.rb +0 -0
- data/lib/react/server_rendering.rb +0 -0
- data/lib/react-rails.rb +6 -0
- data/lib/react.rb +6 -4
- metadata +55 -12
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2fb970443961197a3c1c24fda2fa12f4072dd4f596d7254adac40d11ac13a9cb
|
4
|
+
data.tar.gz: d85049088bb5d4166894641cca4bd4599f967fe43f504e501a3ce7232f38faff
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 608ab0b73247bc4310f6a78f525e73ecaeb89d1bdb1b2be5170b6d5054e356e9bc6abaa5f54bf2b403fa727b1828542ce347e922fba49bbe7e0a91d938728e23
|
7
|
+
data.tar.gz: 35c53e0d3e63a16ad7c505a83e7d77255f87715e4ebca890e3103eb4e14101993f3d25c0b1bea56eaff3071e0e83d397292036bc4162169cecfee7e5843ac84e
|
data/CHANGELOG.md
CHANGED
@@ -1,13 +1,99 @@
|
|
1
1
|
# react-rails
|
2
2
|
|
3
|
+
If you need help upgrading `react-rails`, `webpacker` to `shakapacker`, or JS packages, contact justin@shakacode.com. The ShakaCode.com team is helping to maintain this Ruby gem. You also might want to consider the [react_on_rails](https://github.com/shakacode/react_on_rails) gem.
|
4
|
+
|
5
|
+
[#1209 2.7 Release Discussion](https://github.com/reactjs/react-rails/issues/1209)
|
6
|
+
|
7
|
+
## Unreleased
|
8
|
+
Changes since last non-beta release.
|
9
|
+
|
10
|
+
_Please add entries here for your pull requests that are not yet released._
|
11
|
+
|
12
|
+
## [2.7.1] - 2023-05-19
|
13
|
+
|
14
|
+
#### Bug Fixes
|
15
|
+
- Fix ReactDomClient initialization error during SSR. #1278
|
16
|
+
|
17
|
+
## [2.7.0] - 2023-05-06
|
18
|
+
|
19
|
+
#### New Features
|
20
|
+
- Camelizes keys with primitive values, in addition to hashes #946
|
21
|
+
- Expose alternative implementations for `ReactUJS.getConstructor` #1050
|
22
|
+
- Include turbolinks in dev and update webdrivers #1174
|
23
|
+
- Add support for multiple `require.context` with addition of `useContexts` #1144
|
24
|
+
- Update many dependencies
|
25
|
+
|
26
|
+
#### Bug Fixes
|
27
|
+
- Fix installation crash caused by absolute path for `source_entry_path` in default `config/webpacker.yml` coming from `shakapacker` version 6.x - #1216
|
28
|
+
- Fix warning for loading `react-dom` in React 18 - #1269
|
29
|
+
|
30
|
+
## 2.6.2
|
31
|
+
|
32
|
+
#### New Features
|
33
|
+
|
34
|
+
- React 16.14
|
35
|
+
- Support for ShakaPacker
|
36
|
+
- Preparation for React 18 #1151
|
37
|
+
|
38
|
+
#### Bug Fixes
|
39
|
+
|
40
|
+
- URI.open instead of open #1099
|
41
|
+
- No longer unmount components on Turbolinks navigation #1135
|
42
|
+
|
43
|
+
## 2.6.1
|
44
|
+
|
3
45
|
#### Breaking Changes
|
4
46
|
|
5
47
|
#### New Features
|
6
48
|
|
49
|
+
- React 16.9.0
|
50
|
+
- Sprockets users get React_UJS 2.6.1
|
51
|
+
|
7
52
|
#### Deprecation
|
8
53
|
|
54
|
+
- Removed tests for Rails 3, 4, 5.0
|
55
|
+
- Removed tests for Sprockets 2
|
56
|
+
- Removed tests for Webpacker 1.1, 2
|
57
|
+
|
9
58
|
#### Bug Fixes
|
10
59
|
|
60
|
+
- React_UJS 2.6.1 still complies with ES5 #1027 #1026 #1016
|
61
|
+
- Support RubyGems pattern for Alpha releases when detecting sprockets version #1047
|
62
|
+
|
63
|
+
## 2.6.0
|
64
|
+
|
65
|
+
#### Breaking Changes
|
66
|
+
|
67
|
+
#### New Features
|
68
|
+
|
69
|
+
- Typescript component generator #990
|
70
|
+
- Enhanced Turbolinks Support #978 #962
|
71
|
+
|
72
|
+
#### Deprecation
|
73
|
+
|
74
|
+
#### Bug Fixes
|
75
|
+
|
76
|
+
- assert_react_component will not pass tests where the case was different #979
|
77
|
+
- action_controller/test_case was accidentally `required` in dev #996
|
78
|
+
|
79
|
+
## 2.5.0
|
80
|
+
|
81
|
+
#### Breaking Changes
|
82
|
+
|
83
|
+
#### New Features
|
84
|
+
|
85
|
+
- React 16.8.6 prebundled #977
|
86
|
+
- Added `assert_react_component` test helper #957
|
87
|
+
- Supports Webpacker 4, Ruby 2.6 #934
|
88
|
+
- Supports camelize on ActionController::Parameters #932
|
89
|
+
|
90
|
+
#### Deprecation
|
91
|
+
|
92
|
+
#### Bug Fixes
|
93
|
+
|
94
|
+
- Linting fix to generated JS #941
|
95
|
+
- (Meta) Tests for react-rails updated #892 #894 #916
|
96
|
+
|
11
97
|
## 2.4.7
|
12
98
|
|
13
99
|
#### New Features
|
@@ -58,6 +144,7 @@
|
|
58
144
|
- Call ReactDOM.render() when react_component :prerender option is falsy, instead of ReactDOM.hydrate() #844, #842
|
59
145
|
|
60
146
|
## 2.4.2
|
147
|
+
|
61
148
|
#### Bug Fixes
|
62
149
|
|
63
150
|
- ReactDOM.hydrate() may not be defined for everyone, it will now use hydrate if it is defined or fallback to render #832
|
@@ -170,7 +257,6 @@
|
|
170
257
|
// = require components
|
171
258
|
```
|
172
259
|
|
173
|
-
|
174
260
|
#### New Features
|
175
261
|
|
176
262
|
- Webpacker support:
|
@@ -417,14 +503,14 @@
|
|
417
503
|
|
418
504
|
- Changed server rendering configuration names #253
|
419
505
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
| `config.react.timeout`
|
423
|
-
| `config.react.max_renderers`
|
424
|
-
| `config.react.react_js`
|
425
|
-
| `config.react.component_filenames` | `config.react.server_renderer_options[:files]`
|
426
|
-
| `config.react.replay_console`
|
427
|
-
| (none)
|
506
|
+
| Old | New |
|
507
|
+
| ---------------------------------- | ------------------------------------------------------- |
|
508
|
+
| `config.react.timeout` | `config.react.server_renderer_timeout` |
|
509
|
+
| `config.react.max_renderers` | `config.react.server_renderer_pool_size` |
|
510
|
+
| `config.react.react_js` | `config.react.server_renderer_options[:files]` |
|
511
|
+
| `config.react.component_filenames` | `config.react.server_renderer_options[:files]` |
|
512
|
+
| `config.react.replay_console` | `config.react.server_renderer_options[:replay_console]` |
|
513
|
+
| (none) | `config.react.server_renderer` |
|
428
514
|
|
429
515
|
- JSX is transformed by Babel, not JSTransform #295
|
430
516
|
|
@@ -450,7 +536,6 @@
|
|
450
536
|
- Add `tilt` dependency #248
|
451
537
|
- Default prerender pool size to 1 #302
|
452
538
|
|
453
|
-
|
454
539
|
## 1.0.0 (April 7, 2015)
|
455
540
|
|
456
541
|
#### New Features
|
@@ -460,3 +545,7 @@
|
|
460
545
|
- View helper and UJS for mounting components
|
461
546
|
- Server rendering with `prerender: true`
|
462
547
|
- Transform `.jsx` in the asset pipeline
|
548
|
+
|
549
|
+
[Unreleased]: https://github.com/reactjs/react-rails/compare/v2.7.1...master
|
550
|
+
[2.7.1]: https://github.com/shakacode/shakapacker/compare/v2.7.0...v2.7.1
|
551
|
+
[2.7.0]: https://github.com/shakacode/shakapacker/compare/v2.6.2...v2.7.0
|
data/LICENSE
CHANGED
File without changes
|
data/README.md
CHANGED
@@ -2,27 +2,51 @@
|
|
2
2
|
|
3
3
|
[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
|
4
4
|
[![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
|
5
|
-
[![
|
6
|
-
[![Gemnasium](https://img.shields.io/gemnasium/reactjs/react-rails.svg?style=flat-square)](https://gemnasium.com/reactjs/react-rails)
|
7
|
-
[![Code Climate](https://img.shields.io/codeclimate/github/reactjs/react-rails.svg?style=flat-square)](https://codeclimate.com/github/reactjs/react-rails)
|
5
|
+
[![Ruby](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml/badge.svg)](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml)
|
8
6
|
|
7
|
+
## News
|
8
|
+
v2.7.0 is released. Please try it out and report any issues. We'll try to address any critical issues ASAP. We're going shortly release 3.0 which improves support for SSR, but it's a breaking change because it requires updating dependencies, such as going from `webpacker` to `shakapacker`.
|
9
9
|
|
10
|
-
|
10
|
+
## Summary
|
11
|
+
React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
|
11
12
|
* Automatically renders React server-side and client-side
|
12
|
-
* Supports Webpacker 3.x, 2.x, 1.1+
|
13
|
+
* Supports Webpacker 4.x, 3.x, 2.x, 1.1+ or Shakapacker v6+
|
13
14
|
* Supports Sprockets 4.x, 3.x, 2.x
|
14
15
|
* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)
|
15
16
|
|
16
|
-
|
17
|
+
---
|
18
|
+
## ShakaCode Support
|
19
|
+
|
20
|
+
[ShakaCode](https://www.shakacode.com) offers support for upgrading this gem, and related gems such as Webpacker and using Shakapacker. If interested, contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com). We're also [hiring](https://jobs.lever.co/shakacode/3bdbfdb3-4495-4611-a279-01dddb351abe)!
|
21
|
+
|
22
|
+
Here's a testimonial of how ShakaCode can help, from [Florian Gößler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023:
|
23
|
+
> Hey Justin 👋
|
24
|
+
>
|
25
|
+
> I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍
|
26
|
+
>
|
27
|
+
> On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. 😉
|
28
|
+
>
|
29
|
+
> Have a great 2023 and maybe we get to work together again later in the year! 🙌
|
30
|
+
|
31
|
+
Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2118154). Here's [another review of a Shakapacker migration that led to more work](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2096078).
|
32
|
+
|
33
|
+
## Resouces
|
34
|
+
* [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE). Then join the channel `#react-rails`.
|
35
|
+
* If you are upgrading, you might consider migrating to the [react_on_rails](https://github.com/shakacode/react_on_rails) gem.
|
36
|
+
* Source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app
|
17
37
|
|
18
38
|
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
19
39
|
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
20
40
|
## Contents
|
21
41
|
|
22
|
-
- [Get started with
|
42
|
+
- [Get started with Shakapacker](#get-started-with-shakapacker)
|
43
|
+
- [Component name](#component-name)
|
23
44
|
- [File naming](#file-naming)
|
45
|
+
- [Typescript support](#typescript-support)
|
46
|
+
- [Test component](#test-component)
|
24
47
|
- [Use with Asset Pipeline](#use-with-asset-pipeline)
|
25
48
|
- [Custom JSX Transformer](#custom-jsx-transformer)
|
49
|
+
- [Transform Plugin Options](#transform-plugin-options)
|
26
50
|
- [React.js versions](#reactjs-versions)
|
27
51
|
- [View Helper](#view-helper)
|
28
52
|
- [Custom View Helper](#custom-view-helper)
|
@@ -38,31 +62,65 @@ Example app code available here: https://github.com/BookOfGreg/react-rails-examp
|
|
38
62
|
- [Component Generator](#component-generator)
|
39
63
|
- [Use with JBuilder](#use-with-jbuilder)
|
40
64
|
- [Camelize Props](#camelize-props)
|
65
|
+
- [Changing Component Templates](#changing-component-templates)
|
41
66
|
- [Upgrading](#upgrading)
|
42
67
|
- [2.3 to 2.4](#23-to-24)
|
68
|
+
- [Common Errors](#common-errors)
|
69
|
+
- [Getting warning for `Can't resolve 'react-dom/client'` in React < 18](#getting-warning-for-cant-resolve-react-domclient-in-react--18)
|
70
|
+
- [During installation](#during-installation)
|
71
|
+
- [Undefined Set](#undefined-set)
|
72
|
+
- [Using TheRubyRacer](#using-therubyracer)
|
73
|
+
- [HMR](#hmr)
|
43
74
|
- [Related Projects](#related-projects)
|
44
75
|
- [Contributing](#contributing)
|
45
76
|
|
46
77
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
47
78
|
|
48
79
|
|
49
|
-
|
50
|
-
|
80
|
+
After reading this README file, additional information about React-Rails can be found in the Wiki page:
|
51
81
|
https://github.com/reactjs/React-Rails/wiki
|
82
|
+
The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.
|
52
83
|
|
53
84
|
|
54
|
-
## Get started with
|
85
|
+
## Get started with Shakapacker
|
55
86
|
|
56
|
-
|
87
|
+
_Alternatively, get started with [Sprockets](#use-with-asset-pipeline)_
|
57
88
|
|
58
|
-
|
89
|
+
1. Create a new Rails app:
|
90
|
+
Prevent installing default javascript dependencies by using `--skip-javascript` option:
|
59
91
|
|
60
|
-
|
92
|
+
```bash
|
93
|
+
$ rails new my-app --skip-javascript
|
94
|
+
$ cd my-app
|
95
|
+
```
|
61
96
|
|
97
|
+
2. Install `shakapacker`:
|
98
|
+
```bash
|
99
|
+
$ bundle add shakapacker --strict
|
100
|
+
$ rails webpacker:install
|
62
101
|
```
|
63
|
-
|
64
|
-
|
65
|
-
|
102
|
+
|
103
|
+
3. Install `react` and some other required npm packages:
|
104
|
+
```bash
|
105
|
+
$ yarn add react react-dom @babel/preset-react prop-types \
|
106
|
+
css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
|
107
|
+
```
|
108
|
+
|
109
|
+
Also update the Babel configuration in the `package.json` file:
|
110
|
+
|
111
|
+
```diff
|
112
|
+
"babel": {
|
113
|
+
"presets": [
|
114
|
+
- "./node_modules/shakapacker/package/babel/preset.js"
|
115
|
+
+ "./node_modules/shakapacker/package/babel/preset.js",
|
116
|
+
+ "@babel/preset-react"
|
117
|
+
]
|
118
|
+
},
|
119
|
+
```
|
120
|
+
|
121
|
+
4. Install `react-rails`:
|
122
|
+
```bash
|
123
|
+
$ bundle add 'react-rails' --strict
|
66
124
|
$ rails generate react:install
|
67
125
|
```
|
68
126
|
|
@@ -72,32 +130,49 @@ This gives you:
|
|
72
130
|
- [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
|
73
131
|
- `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
|
74
132
|
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
<!-- application.html.erb -->
|
79
|
-
<%= javascript_pack_tag 'application' %>
|
133
|
+
5. Generate your first component:
|
134
|
+
```bash
|
135
|
+
$ rails g react:component HelloWorld greeting:string
|
80
136
|
```
|
81
137
|
|
82
|
-
|
138
|
+
You can also generate your component in a subdirectory:
|
83
139
|
|
84
|
-
```
|
85
|
-
$ rails g react:component HelloWorld greeting:string
|
140
|
+
```bash
|
141
|
+
$ rails g react:component my_subdirectory/HelloWorld greeting:string
|
86
142
|
```
|
87
143
|
|
88
|
-
Your component is added to `app/javascript/components/` by default.
|
144
|
+
Note: Your component is added to `app/javascript/components/` by default.
|
89
145
|
|
90
|
-
|
146
|
+
Note: If your component is in a subdirectory you will append the directory path to your erb component call.
|
91
147
|
|
92
|
-
|
93
|
-
|
148
|
+
Example:
|
149
|
+
```erb
|
150
|
+
<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
|
94
151
|
```
|
95
152
|
|
96
|
-
[Render it in a Rails view](#view-helper):
|
153
|
+
6. [Render it in a Rails view](#view-helper):
|
97
154
|
|
98
155
|
```erb
|
99
|
-
|
156
|
+
<!-- erb: paste this in view -->
|
157
|
+
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
|
158
|
+
```
|
159
|
+
|
160
|
+
7. Lets Start the app:
|
161
|
+
```bash
|
162
|
+
$ rails s
|
100
163
|
```
|
164
|
+
Output: greeting: Hello from react-rails", inspect webpage in your browser to see the change in tag props.
|
165
|
+
|
166
|
+
8. Run dev server (optional)
|
167
|
+
In order to run dev server with HMR feature you need to parallely run:
|
168
|
+
|
169
|
+
```bash
|
170
|
+
$ ./bin/webpacker-dev-server
|
171
|
+
```
|
172
|
+
|
173
|
+
Note: On Rails 6 you need to specify `webpack-dev-server` host. To this end, update `config/initializers/content_security_policy.rb` and uncomment relevant lines.
|
174
|
+
|
175
|
+
### Component name
|
101
176
|
|
102
177
|
The component name tells `react-rails` where to load the component. For example:
|
103
178
|
|
@@ -121,6 +196,24 @@ ReactRailsUJS.useContext(myCustomContext)
|
|
121
196
|
|
122
197
|
If `require` fails to find your component, [`ReactRailsUJS`](#ujs) falls back to the global namespace, described in [Use with Asset Pipeline](#use-with-asset-pipeline).
|
123
198
|
|
199
|
+
In some cases, having multiple `require.context` entries may be desired. Examples of this include:
|
200
|
+
|
201
|
+
- Refactoring a typical Rails application into a Rails API with an (eventually) separate Single Page Application (SPA). For this use case, one can add a separate pack in addition to the typical `application` one. React components can be shared between the packs but the new pack can use a minimal Rails view layout, different default styling, etc.
|
202
|
+
- In a larger application, you might find it helpful to split your JavaScript by routes/controllers to avoid serving unused components and improve your site performance by keeping bundles smaller. For example, you might have separate bundles for homepage, search, and checkout routes. In that scenario, you can add an array of `require.context` component directory paths via `useContexts` to `server_rendering.js`, to allow for [Server-Side Rendering](#server-side-rendering) across your application:
|
203
|
+
|
204
|
+
```js
|
205
|
+
// server_rendering.js
|
206
|
+
var homepageRequireContext = require.context('homepage', true);
|
207
|
+
var searchRequireContext = require.context('search', true);
|
208
|
+
var checkoutRequireContext = require.context('checkout', true);
|
209
|
+
|
210
|
+
var ReactRailsUJS = require('react_ujs');
|
211
|
+
ReactRailsUJS.useContexts([
|
212
|
+
homepageRequireContext,
|
213
|
+
searchRequireContext,
|
214
|
+
checkoutRequireContext
|
215
|
+
]);
|
216
|
+
```
|
124
217
|
### File naming
|
125
218
|
|
126
219
|
React-Rails supports plenty of file extensions such as: .js, .jsx.js, .js.jsx, .es6.js, .coffee, etcetera!
|
@@ -135,17 +228,93 @@ Component File Name | `react_component` call
|
|
135
228
|
|
136
229
|
### Typescript support
|
137
230
|
|
138
|
-
|
231
|
+
```bash
|
232
|
+
yarn add typescript @babel/preset-typescript
|
233
|
+
```
|
234
|
+
|
235
|
+
Babel won’t perform any type-checking on TypeScript code. To optionally use type-checking run:
|
236
|
+
|
237
|
+
```bash
|
238
|
+
yarn add fork-ts-checker-webpack-plugin
|
239
|
+
```
|
240
|
+
|
241
|
+
Add `tsconfig.json` with the following content:
|
242
|
+
|
243
|
+
```json
|
244
|
+
{
|
245
|
+
"compilerOptions": {
|
246
|
+
"declaration": false,
|
247
|
+
"emitDecoratorMetadata": true,
|
248
|
+
"experimentalDecorators": true,
|
249
|
+
"lib": ["es6", "dom"],
|
250
|
+
"module": "es6",
|
251
|
+
"moduleResolution": "node",
|
252
|
+
"sourceMap": true,
|
253
|
+
"target": "es5",
|
254
|
+
"jsx": "react",
|
255
|
+
"noEmit": true
|
256
|
+
},
|
257
|
+
"exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
|
258
|
+
"compileOnSave": false
|
259
|
+
}
|
260
|
+
```
|
261
|
+
|
262
|
+
Then modify the webpack config to use it as a plugin:
|
263
|
+
|
264
|
+
```js
|
265
|
+
// config/webpack/webpack.config.js
|
266
|
+
const { webpackConfig, merge } = require("shakapacker");
|
267
|
+
const ForkTSCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
|
268
|
+
|
269
|
+
module.exports = merge(webpackConfig, {
|
270
|
+
plugins: [new ForkTSCheckerWebpackPlugin()],
|
271
|
+
});
|
272
|
+
```
|
273
|
+
|
274
|
+
Doing this will allow React-Rails to support the .tsx extension. Additionally, it is recommended to add `ts` and `tsx` to the `server_renderer_extensions` in your application configuration:
|
275
|
+
|
276
|
+
```ruby
|
277
|
+
config.react.server_renderer_extensions = ["jsx", "js", "tsx", "ts"]
|
139
278
|
```
|
140
|
-
|
141
|
-
|
279
|
+
|
280
|
+
### Test component
|
281
|
+
|
282
|
+
You can use `assert_react_component` to test component render:
|
283
|
+
|
284
|
+
```erb
|
285
|
+
<!-- app/views/welcome/index.html.erb -->
|
286
|
+
|
287
|
+
<%= react_component("HelloWorld", { greeting: "Hello from react-rails.", info: { name: "react-rails" } }, { class: "hello-world" }) %>
|
142
288
|
```
|
143
289
|
|
144
|
-
|
290
|
+
```rb
|
291
|
+
class WelcomeControllerTest < ActionDispatch::IntegrationTest
|
292
|
+
test 'assert_react_component' do
|
293
|
+
get "/welcome"
|
294
|
+
assert_equal 200, response.status
|
295
|
+
|
296
|
+
# assert rendered react component and check the props
|
297
|
+
assert_react_component "HelloWorld" do |props|
|
298
|
+
assert_equal "Hello from react-rails.", props[:greeting]
|
299
|
+
assert_equal "react-rails", props[:info][:name]
|
300
|
+
assert_select "[class=?]", "hello-world"
|
301
|
+
end
|
302
|
+
|
303
|
+
# or just assert component rendered
|
304
|
+
assert_react_component "HelloWorld"
|
305
|
+
end
|
306
|
+
end
|
307
|
+
```
|
145
308
|
|
146
309
|
## Use with Asset Pipeline
|
147
310
|
|
148
|
-
`react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by
|
311
|
+
`react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by adding the `react-rails` gem:
|
312
|
+
|
313
|
+
```ruby
|
314
|
+
gem 'react-rails'
|
315
|
+
```
|
316
|
+
|
317
|
+
And then install the react generator:
|
149
318
|
|
150
319
|
```
|
151
320
|
$ rails g react:install
|
@@ -200,6 +369,18 @@ Components must be accessible from the top level, but they may be namespaced, fo
|
|
200
369
|
|
201
370
|
`react-rails` provides two transformers, `React::JSX::BabelTransformer` (which uses [ruby-babel-transpiler](https://github.com/babel/ruby-babel-transpiler)) and `React::JSX::JSXTransformer` (which uses the deprecated `JSXTransformer.js`).
|
202
371
|
|
372
|
+
#### Transform Plugin Options
|
373
|
+
|
374
|
+
To supply additional transform plugins to your JSX Transformer, assign them to `config.react.jsx_transform_options`
|
375
|
+
|
376
|
+
`react-rails` uses the Babel version of the `babel-source` gem.
|
377
|
+
|
378
|
+
For example, to use `babel-plugin-transform-class-properties` :
|
379
|
+
|
380
|
+
config.react.jsx_transform_options = {
|
381
|
+
optional: ['es7.classProperties']
|
382
|
+
}
|
383
|
+
|
203
384
|
### React.js versions
|
204
385
|
|
205
386
|
`//= require react` brings `React` into your project.
|
@@ -325,13 +506,27 @@ delete window.Turbolinks;
|
|
325
506
|
|
326
507
|
### `getConstructor`
|
327
508
|
|
328
|
-
Components are loaded with `ReactRailsUJS.getConstructor(className)`. This function has two
|
509
|
+
Components are loaded with `ReactRailsUJS.getConstructor(className)`. This function has two default implementations, depending on if you're using the asset pipeline or Shakapacker:
|
329
510
|
|
330
|
-
- On the asset pipeline, it looks up `className` in the global namespace.
|
331
|
-
- On
|
511
|
+
- On the asset pipeline, it looks up `className` in the global namespace (`ReactUJS.constructorFromGlobal`).
|
512
|
+
- On Shakapacker, it `require`s files and accesses named exports, as described in [Get started with Shakapacker](#get-started-with-shakapacker), falling back to the global namespace (`ReactUJS.constructorFromRequireContextWithGlobalFallback`).
|
332
513
|
|
333
514
|
You can override this function to customize the mapping of name-to-constructor. [Server-side rendering](#server-side-rendering) also uses this function.
|
334
515
|
|
516
|
+
For example, the fallback behavior of
|
517
|
+
`ReactUJS.constructorFromRequireContextWithGlobalFallback` can sometimes make
|
518
|
+
server-side rendering errors hard to debug as it will swallow the original error
|
519
|
+
(more info
|
520
|
+
[here](https://github.com/reactjs/react-rails/issues/264#issuecomment-552326663)).
|
521
|
+
`ReactUJS.constructorFromRequireContext` is provided for this reason. You can
|
522
|
+
use it like so:
|
523
|
+
|
524
|
+
```js
|
525
|
+
// Replaces calls to `ReactUJS.useContext`
|
526
|
+
ReactUJS.getConstructor = ReactUJS.constructorFromRequireContext(require.context('components', true));
|
527
|
+
```
|
528
|
+
|
529
|
+
|
335
530
|
## Server-Side Rendering
|
336
531
|
|
337
532
|
You can render React components inside your Rails server with `prerender: true`:
|
@@ -543,6 +738,12 @@ You can also specify this option in `react_component`:
|
|
543
738
|
<%= react_component('HelloMessage', {name: 'John'}, {camelize_props: true}) %>
|
544
739
|
```
|
545
740
|
|
741
|
+
### Changing Component Templates
|
742
|
+
|
743
|
+
To make simple changes to Component templates, copy the respective template file to your Rails project at `lib/templates/react/component/template_filename`.
|
744
|
+
|
745
|
+
For example, to change the [ES6 Component template](https://github.com/reactjs/react-rails/blob/master/lib/generators/templates/component.es6.jsx), copy it to `lib/templates/react/component/component.es6.jsx` and modify it.
|
746
|
+
|
546
747
|
## Upgrading
|
547
748
|
|
548
749
|
### 2.3 to 2.4
|
@@ -563,20 +764,82 @@ For the vast majority of cases this will get you most of the migration:
|
|
563
764
|
- add `import PropTypes from 'prop-types'` (Webpacker only)
|
564
765
|
- re-run `bundle exec rails webpacker:install:react` to update npm packages (Webpacker only)
|
565
766
|
|
767
|
+
## Common Errors
|
768
|
+
### Getting warning for `Can't resolve 'react-dom/client'` in React < 18
|
769
|
+
|
770
|
+
You may see a warning like this when building a Webpack bundle using any version of React below 18. This warning can be safely [suppressed](https://webpack.js.org/configuration/other-options/#ignorewarnings) in your Webpack configuration. The following is an example of this suppression in `config/webpack/webpack.config.js`:
|
771
|
+
|
772
|
+
```diff
|
773
|
+
- const { webpackConfig } = require('shakapacker')
|
774
|
+
+ const { webpackConfig, merge } = require('shakapacker')
|
775
|
+
|
776
|
+
+const ignoreWarningsConfig = {
|
777
|
+
+ ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
|
778
|
+
+};
|
779
|
+
|
780
|
+
- module.exports = webpackConfig
|
781
|
+
+ module.exports = merge({}, webpackConfig, ignoreWarningsConfig)
|
782
|
+
```
|
783
|
+
|
784
|
+
### During installation
|
785
|
+
1) While using installers.(rails webpacker:install:react && rails webpacker:install)
|
786
|
+
Error:
|
787
|
+
```
|
788
|
+
public/packs/manifest.json. Possible causes:
|
789
|
+
1. You want to set webpacker.yml value of compile to true for your environment
|
790
|
+
unless you are using the `webpack -w` or the webpack-dev-server.
|
791
|
+
2. webpack has not yet re-run to reflect updates.
|
792
|
+
3. You have misconfigured Webpacker's config/webpacker.yml file.
|
793
|
+
4. Your webpack configuration is not creating a manifest.
|
794
|
+
or
|
795
|
+
yarn: error: no such option: --dev
|
796
|
+
ERROR: [Errno 2] No such file or directory: 'add'
|
797
|
+
```
|
798
|
+
Fix: Try updating yarn package.
|
799
|
+
```
|
800
|
+
sudo apt remove cmdtest
|
801
|
+
sudo apt remove yarn
|
802
|
+
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
|
803
|
+
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
|
804
|
+
sudo apt-get update && sudo apt-get install yarn
|
805
|
+
|
806
|
+
yarn install
|
807
|
+
```
|
808
|
+
### Undefined Set
|
809
|
+
```
|
810
|
+
ExecJS::ProgramError (identifier 'Set' undefined):
|
811
|
+
|
812
|
+
(execjs):1
|
813
|
+
```
|
814
|
+
If you see any variation of this issue, see [Using TheRubyRacer](#using-therubyracer)
|
815
|
+
|
816
|
+
|
817
|
+
### Using TheRubyRacer
|
818
|
+
TheRubyRacer [hasn't updated LibV8](https://github.com/cowboyd/therubyracer/blob/master/therubyracer.gemspec#L20) (The library that powers Node.js) from v3 in 2 years, any new features are unlikely to work.
|
819
|
+
|
820
|
+
LibV8 itself is already [beyond version 7](https://github.com/cowboyd/libv8/releases/tag/v7.3.492.27.1) therefore many serverside issues are caused by old JS engines and fixed by using an up to date one such as [MiniRacer](https://github.com/discourse/mini_racer) or [TheRubyRhino](https://github.com/cowboyd/therubyrhino) on JRuby.
|
821
|
+
|
822
|
+
### HMR
|
823
|
+
Hot Module Replacement is [possible with this gem](https://stackoverflow.com/a/54846330/193785) as it does just pass through to Webpacker. Please open an issue to let us know tips and tricks for it to add to the wiki.
|
824
|
+
|
825
|
+
Sample repo that shows HMR working with `react-rails`: [https://github.com/edelgado/react-rails-hmr](https://github.com/edelgado/react-rails-hmr)
|
826
|
+
|
827
|
+
One caveat is that currently you [cannot Server-Side Render along with HMR](https://github.com/reactjs/react-rails/issues/925#issuecomment-415469572).
|
828
|
+
|
566
829
|
## Related Projects
|
567
830
|
|
568
831
|
- [webpacker-react](https://github.com/renchap/webpacker-react): Integration of React with Rails utilizing Webpack with Hot Module Replacement (HMR).
|
569
|
-
- [The
|
832
|
+
- [The React on Rails Course](https://learnetto.com/users/hrishio/courses/the-free-react-on-rails-5-course) A video course which teaches the basics of React and how to get started using it in Rails with `react-rails`.
|
570
833
|
- [react\_on\_rails](https://github.com/shakacode/react_on_rails): Integration of React with Rails utilizing Webpack, Redux, React-Router.
|
571
834
|
- [react-rails-hot-loader](https://github.com/rmosolgo/react-rails-hot-loader) Simple live-reloader for `react-rails`.
|
572
835
|
- [react-rails-benchmark_renderer](https://github.com/pboling/react-rails-benchmark_renderer) adds performance instrumentation to server rendering.
|
573
|
-
- [Ruby
|
836
|
+
- [Ruby Hyperstack](https://hyperstack.org/): Use Ruby to build reactive user interfaces with React.
|
574
837
|
|
575
838
|
## Contributing
|
576
839
|
|
577
840
|
🎉 Thanks for taking the time to contribute! 🎉
|
578
841
|
|
579
|
-
With
|
842
|
+
With 5 Million+ downloads of the react-rails Gem and another 2 Million+ downloads of react_ujs on NPM, you're helping the biggest React + Rails community!
|
580
843
|
|
581
844
|
By contributing to React-Rails, you agree to abide by the [code of conduct](https://github.com/reactjs/react-rails/blob/master/CODE_OF_CONDUCT.md).
|
582
845
|
|
File without changes
|