react_on_rails_pro 16.2.0.beta.16 → 16.2.0.test.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +2 -9
  3. data/Gemfile.development_dependencies +1 -1
  4. data/Gemfile.lock +105 -115
  5. data/docs/code-splitting-loadable-components.md +53 -69
  6. data/lib/react_on_rails_pro/version.rb +1 -1
  7. metadata +4 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3ebc6173ce60ead470a454c30308e09f0341130ed0af5a2e06e2c403005cffb6
4
- data.tar.gz: 8482e11aaeb534457939143614cc969a52bb96fe7ac1db7ed435847bbdc6f716
3
+ metadata.gz: a0112c934965b40a6275bd05fe1309924b21f087f2ff0b8874ca4540dd40d4f7
4
+ data.tar.gz: ed5b0b8d9fc888529bacd29b900221b99e28544204dd016fe0d3449803f865b7
5
5
  SHA512:
6
- metadata.gz: 5c1c2519d7d340ce8bb74619d8e11c4df8d546c58c5b8e9787ad77cb3a4ea80c0ff7c02f476427f72fbf1ea4f6d09d5fb7524ff55aae1621be7d6272c40386fd
7
- data.tar.gz: 68c652b7250fb5a298c3bfaa8f258ab8bc88e9f71f1393311abedc17b1513714a14e02c4249d6176a9f2a25c49dd153c9f6a25913eea8d577ba471fe6aee3039
6
+ metadata.gz: 14688a5ec648396a4160bcf77a775df3a382ff8103cfed7f57e2b78a7f780e43c3c83bb3d0a5d4125005b39531845cd928fcfb255c032a9f2e5e53710ec15fe2
7
+ data.tar.gz: c675bd301c26d46d07d01f51750d4e4f6bc7c480e05f9ac1362a2730fbd30c857f1a51a714c68326c943d93135a4c90c9c5be53589ed1b1b1d75f9048eafaa32
data/CHANGELOG.md CHANGED
@@ -17,9 +17,7 @@ You can find the **package** version numbers from this repo's tags and below in
17
17
 
18
18
  ## [Unreleased]
19
19
 
20
- ### [v16.2.0.beta.13] - 2025-12-07
21
-
22
- Changes since the last non-beta release.
20
+ _Add changes in master not yet tagged._
23
21
 
24
22
  ### Improved
25
23
 
@@ -50,12 +48,8 @@ Changes since the last non-beta release.
50
48
 
51
49
  ### Fixed
52
50
 
53
- - **SECURITY: CVE-2025-55182 - React Server Components RCE Vulnerability**: by updating `react-on-rails-rsc` peer dependency to `v19.0.3` which mitigates that vulnerability. Also, users should update `react` and `react-dom` package versions to `v19.0.1` to ensure complete mitigation. [PR 2175](https://github.com/shakacode/react_on_rails/pull/2175) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
54
-
55
51
  - Fixed compatibility issue with httpx 1.6.x by explicitly requiring http-2 >= 1.1.1. [PR 2141](https://github.com/shakacode/react_on_rails/pull/2141) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
56
52
 
57
- - **Client Disconnect Handling for Streaming**: Added error handling for client disconnects during streaming. When a client disconnects mid-stream (browser closed, network drop), the system now catches `IOError`/`Errno::EPIPE`, sets a `client_disconnected` flag, stops the barrier to cancel producer tasks, and logs the disconnect for debugging. Prevents wasted CPU from producers continuing after the writer fails. [PR 2137](https://github.com/shakacode/react_on_rails/pull/2137) by [justin808](https://github.com/justin808).
58
-
59
53
  - **Node Renderer Worker Restart**: Fixed "descriptor closed" error that occurred when the node renderer restarts while handling an in-progress request (especially streaming requests). Workers now perform graceful shutdowns: they disconnect from the cluster to stop receiving new requests, wait for active requests to complete, then shut down cleanly. A configurable `gracefulWorkerRestartTimeout` ensures workers are forcibly killed if they don't shut down in time. [PR 1970](https://github.com/shakacode/react_on_rails/pull/1970) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
60
54
 
61
55
  - **Body Duplication Bug On Streaming**: Fixed a bug that happens while streaming if the node renderer connection closed after streaming some chunks to the client. [PR 1995](https://github.com/shakacode/react_on_rails/pull/1995) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
@@ -542,8 +536,7 @@ Above changes in [PR 52](https://github.com/shakacode/react_on_rails_pro/pull/52
542
536
  - advanced error handling
543
537
 
544
538
  [HEAD compared to 3.2.1]: https://github.com/shakacode/react_on_rails_pro/compare/3.3.1...HEAD
545
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/v16.2.0.beta.13...master
546
- [v16.2.0.beta.13]: https://github.com/shakacode/react_on_rails/compare/16.1.1...v16.2.0.beta.13
539
+ [Unreleased]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc-15...HEAD
547
540
  [4.0.0-rc.15]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.14...4.0.0-rc.15
548
541
  [4.0.0.rc.11]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.9...4.0.0-rc.11
549
542
  [4.0.0.rc.9]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.6...4.0.0-rc.9
data/Gemfile.development_dependencies CHANGED
@@ -7,7 +7,7 @@ ruby '3.3.7'
7
7
 
8
8
  gem "react_on_rails", path: "../"
9
9
 
10
- gem "shakapacker", "9.4.0"
10
+ gem "shakapacker", "9.3.0"
11
11
  gem "bootsnap", require: false
12
12
  gem "rails", "~> 7.1"
13
13
  gem "puma", "~> 6"
data/Gemfile.lock CHANGED
@@ -9,7 +9,7 @@ GIT
9
9
  PATH
10
10
  remote: ..
11
11
  specs:
12
- react_on_rails (16.2.0.beta.16)
12
+ react_on_rails (16.2.0.test.3)
13
13
  addressable
14
14
  connection_pool
15
15
  execjs (~> 2.5)
@@ -20,7 +20,7 @@ PATH
20
20
  PATH
21
21
  remote: .
22
22
  specs:
23
- react_on_rails_pro (16.2.0.beta.16)
23
+ react_on_rails_pro (16.2.0.test.3)
24
24
  addressable
25
25
  async (>= 2.6)
26
26
  connection_pool
@@ -29,73 +29,71 @@ PATH
29
29
  httpx (~> 1.5)
30
30
  jwt (~> 2.7)
31
31
  rainbow
32
- react_on_rails (= 16.2.0.beta.16)
32
+ react_on_rails (= 16.2.0.test.3)
33
33
 
34
34
  GEM
35
35
  remote: https://rubygems.org/
36
36
  specs:
37
- actioncable (7.2.3)
38
- actionpack (= 7.2.3)
39
- activesupport (= 7.2.3)
37
+ actioncable (7.2.2.1)
38
+ actionpack (= 7.2.2.1)
39
+ activesupport (= 7.2.2.1)
40
40
  nio4r (~> 2.0)
41
41
  websocket-driver (>= 0.6.1)
42
42
  zeitwerk (~> 2.6)
43
- actionmailbox (7.2.3)
44
- actionpack (= 7.2.3)
45
- activejob (= 7.2.3)
46
- activerecord (= 7.2.3)
47
- activestorage (= 7.2.3)
48
- activesupport (= 7.2.3)
43
+ actionmailbox (7.2.2.1)
44
+ actionpack (= 7.2.2.1)
45
+ activejob (= 7.2.2.1)
46
+ activerecord (= 7.2.2.1)
47
+ activestorage (= 7.2.2.1)
48
+ activesupport (= 7.2.2.1)
49
49
  mail (>= 2.8.0)
50
- actionmailer (7.2.3)
51
- actionpack (= 7.2.3)
52
- actionview (= 7.2.3)
53
- activejob (= 7.2.3)
54
- activesupport (= 7.2.3)
50
+ actionmailer (7.2.2.1)
51
+ actionpack (= 7.2.2.1)
52
+ actionview (= 7.2.2.1)
53
+ activejob (= 7.2.2.1)
54
+ activesupport (= 7.2.2.1)
55
55
  mail (>= 2.8.0)
56
56
  rails-dom-testing (~> 2.2)
57
- actionpack (7.2.3)
58
- actionview (= 7.2.3)
59
- activesupport (= 7.2.3)
60
- cgi
57
+ actionpack (7.2.2.1)
58
+ actionview (= 7.2.2.1)
59
+ activesupport (= 7.2.2.1)
61
60
  nokogiri (>= 1.8.5)
62
61
  racc
63
- rack (>= 2.2.4, < 3.3)
62
+ rack (>= 2.2.4, < 3.2)
64
63
  rack-session (>= 1.0.1)
65
64
  rack-test (>= 0.6.3)
66
65
  rails-dom-testing (~> 2.2)
67
66
  rails-html-sanitizer (~> 1.6)
68
67
  useragent (~> 0.16)
69
- actiontext (7.2.3)
70
- actionpack (= 7.2.3)
71
- activerecord (= 7.2.3)
72
- activestorage (= 7.2.3)
73
- activesupport (= 7.2.3)
68
+ actiontext (7.2.2.1)
69
+ actionpack (= 7.2.2.1)
70
+ activerecord (= 7.2.2.1)
71
+ activestorage (= 7.2.2.1)
72
+ activesupport (= 7.2.2.1)
74
73
  globalid (>= 0.6.0)
75
74
  nokogiri (>= 1.8.5)
76
- actionview (7.2.3)
77
- activesupport (= 7.2.3)
75
+ actionview (7.2.2.1)
76
+ activesupport (= 7.2.2.1)
78
77
  builder (~> 3.1)
79
- cgi
80
78
  erubi (~> 1.11)
81
79
  rails-dom-testing (~> 2.2)
82
80
  rails-html-sanitizer (~> 1.6)
83
- activejob (7.2.3)
84
- activesupport (= 7.2.3)
81
+ activejob (7.2.2.1)
82
+ activesupport (= 7.2.2.1)
85
83
  globalid (>= 0.3.6)
86
- activemodel (7.2.3)
87
- activesupport (= 7.2.3)
88
- activerecord (7.2.3)
89
- activemodel (= 7.2.3)
90
- activesupport (= 7.2.3)
84
+ activemodel (7.2.2.1)
85
+ activesupport (= 7.2.2.1)
86
+ activerecord (7.2.2.1)
87
+ activemodel (= 7.2.2.1)
88
+ activesupport (= 7.2.2.1)
91
89
  timeout (>= 0.4.0)
92
- activestorage (7.2.3)
93
- actionpack (= 7.2.3)
94
- activejob (= 7.2.3)
95
- activerecord (= 7.2.3)
96
- activesupport (= 7.2.3)
90
+ activestorage (7.2.2.1)
91
+ actionpack (= 7.2.2.1)
92
+ activejob (= 7.2.2.1)
93
+ activerecord (= 7.2.2.1)
94
+ activesupport (= 7.2.2.1)
97
95
  marcel (~> 1.0)
98
- activesupport (7.2.3)
96
+ activesupport (7.2.2.1)
99
97
  base64
100
98
  benchmark (>= 0.3)
101
99
  bigdecimal
@@ -107,19 +105,19 @@ GEM
107
105
  minitest (>= 5.1)
108
106
  securerandom (>= 0.3)
109
107
  tzinfo (~> 2.0, >= 2.0.5)
110
- addressable (2.8.8)
111
- public_suffix (>= 2.0.2, < 8.0)
108
+ addressable (2.8.7)
109
+ public_suffix (>= 2.0.2, < 7.0)
112
110
  amazing_print (1.6.0)
113
111
  ast (2.4.2)
114
- async (2.35.0)
112
+ async (2.27.4)
115
113
  console (~> 1.29)
116
114
  fiber-annotation
117
115
  io-event (~> 1.11)
118
116
  metrics (~> 0.12)
119
- traces (~> 0.18)
120
- base64 (0.3.0)
121
- benchmark (0.5.0)
122
- bigdecimal (3.3.1)
117
+ traces (~> 0.15)
118
+ base64 (0.2.0)
119
+ benchmark (0.4.0)
120
+ bigdecimal (3.1.9)
123
121
  bindex (0.8.1)
124
122
  bootsnap (1.18.3)
125
123
  msgpack (~> 1.2)
@@ -137,15 +135,14 @@ GEM
137
135
  capybara-screenshot (1.0.26)
138
136
  capybara (>= 1.0, < 4)
139
137
  launchy
140
- cgi (0.5.0)
141
138
  childprocess (5.0.0)
142
139
  coderay (1.1.3)
143
140
  commonmarker (1.1.4-arm64-darwin)
144
141
  commonmarker (1.1.4-x86_64-darwin)
145
142
  commonmarker (1.1.4-x86_64-linux)
146
143
  concurrent-ruby (1.3.5)
147
- connection_pool (3.0.2)
148
- console (1.34.2)
144
+ connection_pool (2.5.0)
145
+ console (1.33.0)
149
146
  fiber-annotation
150
147
  fiber-local (~> 1.1)
151
148
  json
@@ -159,15 +156,14 @@ GEM
159
156
  bigdecimal
160
157
  rexml
161
158
  crass (1.0.6)
162
- date (3.5.0)
159
+ date (3.4.1)
163
160
  diff-lcs (1.5.1)
164
161
  docile (1.4.0)
165
- drb (2.2.3)
162
+ drb (2.2.1)
166
163
  equivalent-xml (0.6.0)
167
164
  nokogiri (>= 1.4.3)
168
- erb (6.0.0)
169
165
  erubi (1.13.1)
170
- execjs (2.10.0)
166
+ execjs (2.9.1)
171
167
  fakefs (2.8.0)
172
168
  faker (3.4.1)
173
169
  i18n (>= 1.8.11, < 2)
@@ -182,19 +178,19 @@ GEM
182
178
  generator_spec (0.10.0)
183
179
  activesupport (>= 3.0.0)
184
180
  railties (>= 3.0.0)
185
- globalid (1.3.0)
181
+ globalid (1.2.1)
186
182
  activesupport (>= 6.1)
187
183
  graphiql-rails (1.10.0)
188
184
  railties
189
185
  hashdiff (1.1.0)
190
186
  http-2 (1.1.1)
191
- httpx (1.6.3)
187
+ httpx (1.5.1)
192
188
  http-2 (>= 1.0.0)
193
189
  i18n (1.14.7)
194
190
  concurrent-ruby (~> 1.0)
195
- io-console (0.8.1)
196
- io-event (1.14.2)
197
- irb (1.15.3)
191
+ io-console (0.8.0)
192
+ io-event (1.12.1)
193
+ irb (1.15.1)
198
194
  pp (>= 0.6.0)
199
195
  rdoc (>= 4.0.0)
200
196
  reline (>= 0.4.2)
@@ -205,8 +201,8 @@ GEM
205
201
  rails-dom-testing (>= 1, < 3)
206
202
  railties (>= 4.2.0)
207
203
  thor (>= 0.14, < 2.0)
208
- json (2.17.1)
209
- jwt (2.10.2)
204
+ json (2.7.2)
205
+ jwt (2.9.3)
210
206
  base64
211
207
  launchy (3.0.1)
212
208
  addressable (~> 2.8)
@@ -214,28 +210,27 @@ GEM
214
210
  listen (3.9.0)
215
211
  rb-fsevent (~> 0.10, >= 0.10.3)
216
212
  rb-inotify (~> 0.9, >= 0.9.10)
217
- logger (1.7.0)
218
- loofah (2.24.1)
213
+ logger (1.6.6)
214
+ loofah (2.24.0)
219
215
  crass (~> 1.0.2)
220
216
  nokogiri (>= 1.12.0)
221
- mail (2.9.0)
222
- logger
217
+ mail (2.8.1)
223
218
  mini_mime (>= 0.1.1)
224
219
  net-imap
225
220
  net-pop
226
221
  net-smtp
227
- marcel (1.1.0)
222
+ marcel (1.0.4)
228
223
  matrix (0.4.2)
229
224
  method_source (1.1.0)
230
- metrics (0.15.0)
225
+ metrics (0.14.0)
231
226
  mini_mime (1.1.5)
232
- minitest (5.26.2)
227
+ minitest (5.25.4)
233
228
  mize (0.4.1)
234
229
  protocol (~> 2.0)
235
230
  msgpack (1.7.2)
236
231
  net-http (0.4.1)
237
232
  uri
238
- net-imap (0.5.12)
233
+ net-imap (0.5.8)
239
234
  date
240
235
  net-protocol
241
236
  net-pop (0.1.2)
@@ -244,12 +239,12 @@ GEM
244
239
  timeout
245
240
  net-smtp (0.5.1)
246
241
  net-protocol
247
- nio4r (2.7.5)
248
- nokogiri (1.18.10-arm64-darwin)
242
+ nio4r (2.7.4)
243
+ nokogiri (1.18.8-arm64-darwin)
249
244
  racc (~> 1.4)
250
- nokogiri (1.18.10-x86_64-darwin)
245
+ nokogiri (1.18.8-x86_64-darwin)
251
246
  racc (~> 1.4)
252
- nokogiri (1.18.10-x86_64-linux-gnu)
247
+ nokogiri (1.18.8-x86_64-linux-gnu)
253
248
  racc (~> 1.4)
254
249
  package_json (0.2.0)
255
250
  parallel (1.25.1)
@@ -257,7 +252,7 @@ GEM
257
252
  ast (~> 2.4.1)
258
253
  racc
259
254
  pg (1.5.6)
260
- pp (0.6.3)
255
+ pp (0.6.2)
261
256
  prettyprint
262
257
  prettyprint (0.2.0)
263
258
  protocol (2.0.0)
@@ -272,67 +267,63 @@ GEM
272
267
  pry (>= 0.13.0)
273
268
  pry-theme (1.3.1)
274
269
  coderay (~> 1.1)
275
- psych (5.2.6)
270
+ psych (5.2.3)
276
271
  date
277
272
  stringio
278
- public_suffix (7.0.0)
273
+ public_suffix (6.0.0)
279
274
  puma (6.5.0)
280
275
  nio4r (~> 2.0)
281
276
  racc (1.8.1)
282
- rack (3.2.4)
277
+ rack (3.1.12)
283
278
  rack-proxy (0.7.7)
284
279
  rack
285
- rack-session (2.1.1)
280
+ rack-session (2.1.0)
286
281
  base64 (>= 0.1.0)
287
282
  rack (>= 3.0.0)
288
283
  rack-test (2.2.0)
289
284
  rack (>= 1.3)
290
- rackup (2.3.1)
285
+ rackup (2.2.1)
291
286
  rack (>= 3)
292
- rails (7.2.3)
293
- actioncable (= 7.2.3)
294
- actionmailbox (= 7.2.3)
295
- actionmailer (= 7.2.3)
296
- actionpack (= 7.2.3)
297
- actiontext (= 7.2.3)
298
- actionview (= 7.2.3)
299
- activejob (= 7.2.3)
300
- activemodel (= 7.2.3)
301
- activerecord (= 7.2.3)
302
- activestorage (= 7.2.3)
303
- activesupport (= 7.2.3)
287
+ rails (7.2.2.1)
288
+ actioncable (= 7.2.2.1)
289
+ actionmailbox (= 7.2.2.1)
290
+ actionmailer (= 7.2.2.1)
291
+ actionpack (= 7.2.2.1)
292
+ actiontext (= 7.2.2.1)
293
+ actionview (= 7.2.2.1)
294
+ activejob (= 7.2.2.1)
295
+ activemodel (= 7.2.2.1)
296
+ activerecord (= 7.2.2.1)
297
+ activestorage (= 7.2.2.1)
298
+ activesupport (= 7.2.2.1)
304
299
  bundler (>= 1.15.0)
305
- railties (= 7.2.3)
306
- rails-dom-testing (2.3.0)
300
+ railties (= 7.2.2.1)
301
+ rails-dom-testing (2.2.0)
307
302
  activesupport (>= 5.0.0)
308
303
  minitest
309
304
  nokogiri (>= 1.6)
310
305
  rails-html-sanitizer (1.6.2)
311
306
  loofah (~> 2.21)
312
307
  nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
313
- railties (7.2.3)
314
- actionpack (= 7.2.3)
315
- activesupport (= 7.2.3)
316
- cgi
308
+ railties (7.2.2.1)
309
+ actionpack (= 7.2.2.1)
310
+ activesupport (= 7.2.2.1)
317
311
  irb (~> 1.13)
318
312
  rackup (>= 1.0.0)
319
313
  rake (>= 12.2)
320
314
  thor (~> 1.0, >= 1.2.2)
321
- tsort (>= 0.2)
322
315
  zeitwerk (~> 2.6)
323
316
  rainbow (3.1.1)
324
- rake (13.3.1)
317
+ rake (13.2.1)
325
318
  rb-fsevent (0.11.2)
326
319
  rb-inotify (0.11.1)
327
320
  ffi (~> 1.0)
328
321
  rbs (3.9.5)
329
322
  logger
330
- rdoc (6.16.1)
331
- erb
323
+ rdoc (6.12.0)
332
324
  psych (>= 4.0.0)
333
- tsort
334
325
  regexp_parser (2.9.2)
335
- reline (0.6.3)
326
+ reline (0.6.0)
336
327
  io-console (~> 0.5)
337
328
  rexml (3.3.9)
338
329
  rspec-core (3.13.0)
@@ -402,7 +393,7 @@ GEM
402
393
  websocket (~> 1.0)
403
394
  semantic_range (3.1.0)
404
395
  sexp_processor (4.17.1)
405
- shakapacker (9.4.0)
396
+ shakapacker (9.3.0)
406
397
  activesupport (>= 5.2)
407
398
  package_json
408
399
  rack-proxy (>= 0.6.1)
@@ -427,19 +418,18 @@ GEM
427
418
  sqlite3 (1.7.3-arm64-darwin)
428
419
  sqlite3 (1.7.3-x86_64-darwin)
429
420
  sqlite3 (1.7.3-x86_64-linux)
430
- stringio (3.1.9)
421
+ stringio (3.1.2)
431
422
  sync (0.5.0)
432
423
  term-ansicolor (1.10.2)
433
424
  mize
434
425
  tins (~> 1.0)
435
- thor (1.4.0)
426
+ thor (1.3.2)
436
427
  tilt (2.4.0)
437
- timeout (0.4.4)
428
+ timeout (0.4.3)
438
429
  tins (1.33.0)
439
430
  bigdecimal
440
431
  sync
441
- traces (0.18.2)
442
- tsort (0.2.0)
432
+ traces (0.18.1)
443
433
  turbolinks (5.2.1)
444
434
  turbolinks-source (~> 5.2)
445
435
  turbolinks-source (5.2.0)
@@ -464,14 +454,14 @@ GEM
464
454
  crack (>= 0.3.2)
465
455
  hashdiff (>= 0.4.0, < 2.0.0)
466
456
  websocket (1.2.10)
467
- websocket-driver (0.8.0)
457
+ websocket-driver (0.7.7)
468
458
  base64
469
459
  websocket-extensions (>= 0.1.0)
470
460
  websocket-extensions (0.1.5)
471
461
  xpath (3.2.0)
472
462
  nokogiri (~> 1.8)
473
463
  yard (0.9.36)
474
- zeitwerk (2.7.3)
464
+ zeitwerk (2.7.1)
475
465
 
476
466
  PLATFORMS
477
467
  arm64-darwin-24
@@ -519,7 +509,7 @@ DEPENDENCIES
519
509
  sass-rails
520
510
  scss_lint
521
511
  selenium-webdriver (= 4.9.0)
522
- shakapacker (= 9.4.0)
512
+ shakapacker (= 9.3.0)
523
513
  spring
524
514
  spring-watcher-listen
525
515
  sprockets
data/docs/code-splitting-loadable-components.md CHANGED
@@ -1,14 +1,12 @@
1
1
  # Server-side rendering with code-splitting using Loadable/Components
2
-
3
2
  by ShakaCode
4
3
 
5
- _Last updated September 19, 2022_
4
+ *Last updated September 19, 2022*
6
5
 
7
6
  ## Introduction
8
-
9
7
  The [React library recommends](https://loadable-components.com/docs/getting-started/) the use of React.lazy for code splitting with dynamic imports except
10
8
  when using server-side rendering. In that case, as of February 2020, they recommend [Loadable Components](https://loadable-components.com)
11
- for server-side rendering with dynamic imports.
9
+ for server-side rendering with dynamic imports.
12
10
 
13
11
  Note, in 2019 and prior, the code-splitting feature was implemented using `react-loadable`. The React
14
12
  team no longer recommends that library. The new way is far preferable.
@@ -20,8 +18,7 @@ yarn add @loadable/babel-plugin @loadable/component @loadable/server @loadable/
20
18
  ```
21
19
 
22
20
  ### Summary
23
-
24
- - [`@loadable/babel-plugin`](https://loadable-components.com/docs/getting-started/) - The plugin transforms your code to be ready for Server Side Rendering.
21
+ - [`@loadable/babel-plugin`](https://loadable-components.com/docs/getting-started/) - The plugin transforms your code to be ready for Server Side Rendering.
25
22
  - `@loadable/component` - Main library for creating loadable components.
26
23
  - `@loadable/server` - Has functions for collecting chunks and provide style, script, link tags for the server.
27
24
  - `@loadable/webpack-plugin` - The plugin to create a stats file with all chunks, assets information.
@@ -38,16 +35,15 @@ See example of server configuration differences in the loadable-components [exam
38
35
  for server-side rendering](https://github.com/gregberge/loadable-components/blob/master/examples/server-side-rendering/webpack.config.babel.js)
39
36
 
40
37
  You need to configure 3 things:
41
-
42
- 1. `target`
43
- a. client-side: `web`
44
- b. server-side: `node`
38
+ 1. `target`
39
+ a. client-side: `web`
40
+ b. server-side: `node`
45
41
  2. `output.libraryTarget`
46
- a. client-side: `undefined`
47
- b. server-side: `commonjs2`
48
- 3. babel-loader options.caller = 'node' or 'web'
49
- 4. `plugins`
50
- a. server-side: `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
42
+ a. client-side: `undefined`
43
+ b. server-side: `commonjs2`
44
+ 3. babel-loader options.caller = 'node' or 'web'
45
+ 3. `plugins`
46
+ a. server-side: `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
51
47
 
52
48
  ```js
53
49
  {
@@ -62,15 +58,14 @@ You need to configure 3 things:
62
58
  Explanation:
63
59
 
64
60
  - `target: 'node'` is required to be able to run the server bundle with the dynamic import logic on nodejs.
65
- If that is not done, webpack will add and invoke browser-specific functions to fetch the chunks into the bundle, which throws an error on server-rendering.
61
+ If that is not done, webpack will add and invoke browser-specific functions to fetch the chunks into the bundle, which throws an error on server-rendering.
66
62
 
67
63
  - `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
68
- The react_on_rails_pro node-renderer expects only one single server-bundle. In other words, we cannot and do not want to split the server bundle.
64
+ The react_on_rails_pro node-renderer expects only one single server-bundle. In other words, we cannot and do not want to split the server bundle.
69
65
 
70
66
  #### Client config
71
67
 
72
68
  For the client config we only need to add the plugin:
73
-
74
69
  ```js
75
70
  {
76
71
  plugins: [
@@ -79,33 +74,30 @@ For the client config we only need to add the plugin:
79
74
  ]
80
75
  }
81
76
  ```
82
-
83
77
  This plugin collects all the information about entrypoints, chunks, and files, that have these chunks and creates a stats file during client bundle build.
84
78
  This stats file is used later to map rendered components to file assets. While you can use any filename, our documentation will use the default name.
85
79
 
86
80
  ### Babel
87
81
 
88
82
  Per [the docs](https://loadable-components.com/docs/babel-plugin/#transformation):
89
-
90
83
  > The plugin transforms your code to be ready for Server Side Rendering
91
84
 
92
85
  Add this to `babel.config.js`:
93
-
94
86
  ```js
95
87
  {
96
88
  "plugins": ["@loadable/babel-plugin"]
97
89
  }
98
90
  ```
99
-
100
91
  https://loadable-components.com/docs/babel-plugin/
101
92
 
93
+
102
94
  ### Convert components into loadable components
103
95
 
104
96
  Instead of importing the component directly, use a dynamic import:
105
97
 
106
98
  ```js
107
- import load from '@loadable/component';
108
- const MyComponent = load(() => import('./MyComponent'));
99
+ import load from '@loadable/component'
100
+ const MyComponent = load(() => import('./MyComponent'))
109
101
  ```
110
102
 
111
103
  ### Resolving issue with ChunkLoadError
@@ -126,25 +118,22 @@ const consoleDebug = (fn) => {
126
118
  console.debug(fn());
127
119
  }
128
120
  };
129
- const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) =>
130
- new Promise((resolve, reject) => {
131
- fn()
132
- .then(resolve)
133
- .catch(() => {
134
- setTimeout(() => {
135
- if (retriesLeft === 1) {
136
- console.warn(`Maximum retries exceeded, retryMessage: ${retryMessage}. Reloading page...`);
137
- window.location.reload();
138
- return;
139
- }
140
- // Passing on "reject" is the important part
141
- consoleDebug(
142
- () => `Trying request, retryMessage: ${retryMessage}, retriesLeft: ${retriesLeft - 1}`,
143
- );
144
- retry(fn, retryMessage, retriesLeft - 1, interval).then(resolve, reject);
145
- }, interval);
146
- });
147
- });
121
+ const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) => new Promise((resolve, reject) => {
122
+ fn()
123
+ .then(resolve)
124
+ .catch(() => {
125
+ setTimeout(() => {
126
+ if (retriesLeft === 1) {
127
+ console.warn(`Maximum retries exceeded, retryMessage: ${retryMessage}. Reloading page...`);
128
+ window.location.reload();
129
+ return;
130
+ }
131
+ // Passing on "reject" is the important part
132
+ consoleDebug(() => `Trying request, retryMessage: ${retryMessage}, retriesLeft: ${retriesLeft - 1}`);
133
+ retry(fn, retryMessage, retriesLeft - 1, interval).then(resolve, reject);
134
+ }, interval);
135
+ });
136
+ });
148
137
  export default retry;
149
138
  ```
150
139
 
@@ -163,21 +152,21 @@ const HomePage = loadable(() => retry(() => import('./HomePage')));
163
152
 
164
153
  In the client bundle, we need to wrap the `hydrateRoot` call into a `loadableReady` function.
165
154
  So, hydration will be fired only after all necessary chunks preloads. In this example below,
166
- `ClientApp` is registering as `App`.
155
+ `ClientApp` is registering as `App`.
167
156
 
168
157
  ```js
169
158
  import React from 'react';
170
159
  import ReactOnRails from 'react-on-rails';
171
- import { hydrateRoot } from 'react-dom/client';
172
- import { loadableReady } from '@loadable/component';
160
+ import { hydrateRoot } from 'react-dom/client'
161
+ import { loadableReady } from '@loadable/component'
173
162
  import App from './App';
174
163
 
175
164
  const ClientApp = (props, railsContext, domId) => {
176
165
  loadableReady(() => {
177
- const root = document.getElementById(domId);
166
+ const root = document.getElementById(domId)
178
167
  hydrateRoot(root, <App {...props} />);
179
- });
180
- };
168
+ })
169
+ }
181
170
 
182
171
  ReactOnRails.register({
183
172
  App: ClientApp,
@@ -186,20 +175,20 @@ ReactOnRails.register({
186
175
 
187
176
  #### Server
188
177
 
189
- The purpose of the server function is to collect all rendered chunks and pass them as script, link,
190
- style tags to the Rails view. In this example below, `ServerApp` is registering as `App`.
178
+ The purpose of the server function is to collect all rendered chunks and pass them as script, link,
179
+ style tags to the Rails view. In this example below, `ServerApp` is registering as `App`.
191
180
 
192
181
  ```js
193
182
  import React from 'react';
194
183
  import ReactOnRails from 'react-on-rails';
195
- import { ChunkExtractor } from '@loadable/server';
196
- import App from './App';
197
- import path from 'path';
184
+ import { ChunkExtractor } from '@loadable/server'
185
+ import App from './App'
186
+ import path from 'path'
198
187
 
199
188
  const ServerApp = (props, railsContext) => {
200
189
  // This loadable-stats file was generated by `LoadablePlugin` in client webpack config.
201
190
  // You must configure the path to resolve per your setup. If you are copying the file to
202
- // a remote server, the file should be a sibling of this file.
191
+ // a remote server, the file should be a sibling of this file.
203
192
  // __dirname is going to be the directory where the server-bundle.js exists
204
193
  // Note, React on Rails Pro automatically copies the loadable-stats.json to the same place as the
205
194
  // server-bundle.js. Thus, the __dirname of this code is where we can find loadable-stats.json.
@@ -209,10 +198,10 @@ const ServerApp = (props, railsContext) => {
209
198
  // This object is used to search filenames by corresponding chunk names.
210
199
  // See https://loadable-components.com/docs/api-loadable-server/#chunkextractor
211
200
  // for the entryPoints, pass an array of all your entryPoints using dynamic imports
212
- const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] });
201
+ const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] })
213
202
 
214
203
  // It creates the wrapper `ChunkExtractorManager` around `App` to collect chunk names of rendered components.
215
- const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />);
204
+ const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />)
216
205
 
217
206
  const componentHtml = renderToString(jsx);
218
207
 
@@ -222,8 +211,8 @@ const ServerApp = (props, railsContext) => {
222
211
  // Returns all the files with rendered chunks for furture insert into rails view.
223
212
  linkTags: extractor.getLinkTags(),
224
213
  styleTags: extractor.getStyleTags(),
225
- scriptTags: extractor.getScriptTags(),
226
- },
214
+ scriptTags: extractor.getScriptTags()
215
+ }
227
216
  };
228
217
  };
229
218
 
@@ -235,7 +224,6 @@ ReactOnRails.register({
235
224
  ## Configure react_on_rails_pro
236
225
 
237
226
  ### React on Rails Pro
238
-
239
227
  You must set `config.assets_top_copy` so that the node-renderer will have access to the loadable-stats.json.
240
228
 
241
229
  ```ruby
@@ -245,16 +233,15 @@ You must set `config.assets_top_copy` so that the node-renderer will have access
245
233
  Your server rendering code, per the above, will find this file like this:
246
234
 
247
235
  ```js
248
- const statsFile = path.resolve(__dirname, 'loadable-stats.json');
249
- ```
236
+ const statsFile = path.resolve(__dirname, 'loadable-stats.json');
237
+ ```
250
238
 
251
239
  Note, if `__dirname` is not working in your webpack build, that's because you didn't set `node: false`
252
240
  in your webpack configuration. That turns off the polyfills for things like `__dirname`.
253
241
 
254
- ### Node Renderer
255
242
 
243
+ ### Node Renderer
256
244
  In your `node-renderer.js` file which runs node renderer, you need to specify `supportModules` options as follows:
257
-
258
245
  ```js
259
246
  const path = require('path');
260
247
  const env = process.env;
@@ -274,7 +261,7 @@ reactOnRailsProNodeRenderer(config);
274
261
  ```erb
275
262
  <% res = react_component_hash("App", props: {}, prerender: true) %>
276
263
  <%= content_for :link_tags, res['linkTags'] %>
277
- <%= content_for :style_tags, res['styleTags'] %>
264
+ <%= content_for :style_tags, res['styleTags'] %>
278
265
 
279
266
  <%= res['componentHtml'].html_safe %>
280
267
 
@@ -282,7 +269,6 @@ reactOnRailsProNodeRenderer(config);
282
269
  ```
283
270
 
284
271
  ## Making HMR Work
285
-
286
272
  To make HMR work, it's best to disable loadable-components when using the Dev Server.
287
273
  Note: you will need access to our **private** React on Rails Pro repository to open the following links.
288
274
 
@@ -291,11 +277,9 @@ Take a look at the code searches for ['imports-loadable'](https://github.com/sha
291
277
  The general concept is that we have a non-loadable, HMR-ready, file that substitutes for the loadable-enabled one, with the suffixes `imports-hmr.js` instead of `imports-loadable.js`
292
278
 
293
279
  ### Webpack configuration
294
-
295
280
  Use the [NormalModuleReplacement plugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/):
296
281
 
297
282
  [code](https://github.com/shakacode/react_on_rails_pro/blob/a361f4e163b9170f180ae07ee312fb9b4c719fc3/spec/dummy/config/webpack/environment.js#L81-L91)
298
-
299
283
  ```js
300
284
  if (isWebpackDevServer) {
301
285
  environment.plugins.append(
@@ -321,7 +305,7 @@ Note: you will need access to our **private** React on Rails Pro repository to o
321
305
  ### Client-Side Startup
322
306
 
323
307
  - [spec/dummy/client/app/loadable/loadable-client.imports-hmr.js](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-hmr.js)
324
- - [spec/dummy/client/app/loadable/loadable-client.imports-loadable.jsx](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-loadable.jsx)
308
+ - [spec/dummy/client/app/loadable/loadable-client.imports-loadable.js](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-loadable.js)
325
309
 
326
310
  ### Server-Side Startup
327
311
 
data/lib/react_on_rails_pro/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ReactOnRailsPro
4
- VERSION = "16.2.0.beta.16"
4
+ VERSION = "16.2.0.test.3"
5
5
  PROTOCOL_VERSION = "2.0.0"
6
6
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: react_on_rails_pro
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.2.0.beta.16
4
+ version: 16.2.0.test.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Justin Gordon
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2025-12-10 00:00:00.000000000 Z
11
+ date: 2025-12-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: addressable
@@ -128,14 +128,14 @@ dependencies:
128
128
  requirements:
129
129
  - - '='
130
130
  - !ruby/object:Gem::Version
131
- version: 16.2.0.beta.16
131
+ version: 16.2.0.test.3
132
132
  type: :runtime
133
133
  prerelease: false
134
134
  version_requirements: !ruby/object:Gem::Requirement
135
135
  requirements:
136
136
  - - '='
137
137
  - !ruby/object:Gem::Version
138
- version: 16.2.0.beta.16
138
+ version: 16.2.0.test.3
139
139
  - !ruby/object:Gem::Dependency
140
140
  name: bundler
141
141
  requirement: !ruby/object:Gem::Requirement