react_on_rails_pro 16.2.0.test.6 → 16.2.0.test.7
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.
- checksums.yaml +4 -4
- data/.prettierignore +3 -0
- data/.rubocop.yml +7 -90
- data/CHANGELOG.md +9 -2
- data/Gemfile.development_dependencies +4 -4
- data/Gemfile.loader +11 -8
- data/Gemfile.lock +146 -123
- data/docs/code-splitting-loadable-components.md +69 -53
- data/lib/react_on_rails_pro/version.rb +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d660894354752a596db7c9f134305be477eca77747df605cef228d120cf875c9
|
|
4
|
+
data.tar.gz: 6cce8c126f0323218c8a4fe176fdf9dd5637fa97bdc383c98fcf71331fcb0077
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f27a27751cc6e1f354f8d72a8c98810f8783af5416e7e52b3c338d6b50f0e8c6f101839ae11af1d0a895c8646f2be7e77fbbfa3805c2078ba63d28af70e356ce
|
|
7
|
+
data.tar.gz: 613c7ae10ed9743363933d02f6a8cbe949e4c23838bb828bacbe60fd210ffbeb5317c50535b0e782fa40e15df9613006c3712eb1f889be73e1948ab5955d850c
|
data/.prettierignore
CHANGED
data/.rubocop.yml
CHANGED
|
@@ -1,111 +1,31 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
require:
|
|
4
|
-
- rubocop-performance
|
|
5
|
-
- rubocop-rspec
|
|
1
|
+
# Inherits from root config
|
|
2
|
+
inherit_from: ../.rubocop.yml
|
|
6
3
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
Include:
|
|
13
|
-
- '**/Rakefile'
|
|
14
|
-
- '**/config.ru'
|
|
15
|
-
- 'Gemfile'
|
|
16
|
-
- '**/*.rb'
|
|
17
|
-
- '**/*.rake'
|
|
4
|
+
# Merge Exclude arrays with parent instead of replacing them
|
|
5
|
+
inherit_mode:
|
|
6
|
+
merge:
|
|
7
|
+
- Exclude
|
|
18
8
|
|
|
9
|
+
AllCops:
|
|
19
10
|
Exclude:
|
|
20
11
|
<% `git status --ignored --porcelain`.lines.grep(/^!! /).each do |path| %>
|
|
21
12
|
- <%= path.sub(/^!! /, '') %>
|
|
22
13
|
<% end %>
|
|
23
|
-
- '**/node_modules/**/*'
|
|
24
14
|
- 'db/schema.rb'
|
|
25
15
|
- 'db/seeds.rb'
|
|
26
|
-
- 'spec/fixtures/**/*'
|
|
27
16
|
- 'spec/dummy/db/schema.rb'
|
|
28
17
|
- 'spec/dummy/bin/**/*'
|
|
29
|
-
- 'node_modules/**/*'
|
|
30
|
-
- 'coverage/**/*'
|
|
31
18
|
- 'bin/**/*'
|
|
32
|
-
- 'vendor/**/*'
|
|
33
|
-
|
|
34
|
-
Naming/FileName:
|
|
35
|
-
Exclude:
|
|
36
|
-
- '**/Gemfile'
|
|
37
|
-
- '**/Rakefile'
|
|
38
|
-
|
|
39
|
-
Layout/LineLength:
|
|
40
|
-
Max: 120
|
|
41
|
-
|
|
42
|
-
Style/StringLiterals:
|
|
43
|
-
EnforcedStyle: double_quotes
|
|
44
|
-
|
|
45
|
-
Style/Documentation:
|
|
46
|
-
Enabled: false
|
|
47
|
-
|
|
48
|
-
Style/HashEachMethods:
|
|
49
|
-
Enabled: true
|
|
50
|
-
|
|
51
|
-
Style/HashTransformKeys:
|
|
52
|
-
Enabled: true
|
|
53
|
-
|
|
54
|
-
Style/HashTransformValues:
|
|
55
|
-
Enabled: true
|
|
56
|
-
|
|
57
|
-
Metrics/AbcSize:
|
|
58
|
-
Max: 28
|
|
59
|
-
|
|
60
|
-
Metrics/CyclomaticComplexity:
|
|
61
|
-
Max: 8
|
|
62
|
-
|
|
63
|
-
Metrics/PerceivedComplexity:
|
|
64
|
-
Max: 10
|
|
65
|
-
|
|
66
|
-
Metrics/ClassLength:
|
|
67
|
-
Max: 140
|
|
68
|
-
|
|
69
|
-
Metrics/ParameterLists:
|
|
70
|
-
Max: 5
|
|
71
|
-
CountKeywordArgs: false
|
|
72
|
-
|
|
73
|
-
Metrics/MethodLength:
|
|
74
|
-
Max: 41
|
|
75
|
-
|
|
76
|
-
Metrics/ModuleLength:
|
|
77
|
-
Max: 180
|
|
78
|
-
|
|
79
|
-
RSpec/DescribeClass:
|
|
80
|
-
Enabled: false
|
|
81
|
-
|
|
82
|
-
RSpec/ExampleLength:
|
|
83
|
-
Enabled: false
|
|
84
|
-
|
|
85
|
-
RSpec/MessageSpies:
|
|
86
|
-
Enabled: false
|
|
87
|
-
|
|
88
|
-
RSpec/NestedGroups:
|
|
89
|
-
Max: 5
|
|
90
19
|
|
|
91
20
|
RSpec/BeforeAfterAll:
|
|
92
21
|
Exclude:
|
|
93
22
|
- 'spec/react_on_rails/generators/dev_tests_generator_spec.rb'
|
|
94
23
|
- 'spec/react_on_rails/generators/install_generator_spec.rb'
|
|
95
24
|
|
|
96
|
-
RSpec/MessageChain:
|
|
97
|
-
Enabled: false
|
|
98
|
-
|
|
99
|
-
RSpec/MultipleExpectations:
|
|
100
|
-
Enabled: false
|
|
101
|
-
|
|
102
25
|
RSpec/MultipleDescribes:
|
|
103
26
|
Exclude:
|
|
104
27
|
- 'spec/dummy/spec/system/integration_spec.rb'
|
|
105
28
|
|
|
106
|
-
RSpec/MultipleMemoizedHelpers:
|
|
107
|
-
Max: 12
|
|
108
|
-
|
|
109
29
|
RSpec:
|
|
110
30
|
Language:
|
|
111
31
|
Expectations:
|
|
@@ -115,6 +35,3 @@ RSpec:
|
|
|
115
35
|
Style/GlobalVars:
|
|
116
36
|
Exclude:
|
|
117
37
|
- 'spec/dummy/config/environments/development.rb'
|
|
118
|
-
|
|
119
|
-
Style/FrozenStringLiteralComment:
|
|
120
|
-
EnforcedStyle: always
|
data/CHANGELOG.md
CHANGED
|
@@ -17,7 +17,9 @@ You can find the **package** version numbers from this repo's tags and below in
|
|
|
17
17
|
|
|
18
18
|
## [Unreleased]
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
### [v16.2.0.beta.13] - 2025-12-07
|
|
21
|
+
|
|
22
|
+
Changes since the last non-beta release.
|
|
21
23
|
|
|
22
24
|
### Improved
|
|
23
25
|
|
|
@@ -48,8 +50,12 @@ _Add changes in master not yet tagged._
|
|
|
48
50
|
|
|
49
51
|
### Fixed
|
|
50
52
|
|
|
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
|
+
|
|
51
55
|
- 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).
|
|
52
56
|
|
|
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
|
+
|
|
53
59
|
- **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).
|
|
54
60
|
|
|
55
61
|
- **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).
|
|
@@ -536,7 +542,8 @@ Above changes in [PR 52](https://github.com/shakacode/react_on_rails_pro/pull/52
|
|
|
536
542
|
- advanced error handling
|
|
537
543
|
|
|
538
544
|
[HEAD compared to 3.2.1]: https://github.com/shakacode/react_on_rails_pro/compare/3.3.1...HEAD
|
|
539
|
-
[Unreleased]: https://github.com/shakacode/
|
|
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
|
|
540
547
|
[4.0.0-rc.15]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.14...4.0.0-rc.15
|
|
541
548
|
[4.0.0.rc.11]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.9...4.0.0-rc.11
|
|
542
549
|
[4.0.0.rc.9]: https://github.com/shakacode/react_on_rails_pro/compare/4.0.0-rc.6...4.0.0-rc.9
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
# Keep in sync with https://github.com/shakacode/react_on_rails/blob/master/Gemfile.development_dependencies
|
|
2
2
|
# frozen_string_literal: true
|
|
3
3
|
|
|
4
|
+
# Shared dev dependencies (rubocop, etc.)
|
|
5
|
+
eval_gemfile File.expand_path("../Gemfile.shared_dev_dependencies", __dir__)
|
|
6
|
+
|
|
4
7
|
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
|
|
5
8
|
|
|
6
9
|
ruby '3.3.7'
|
|
7
10
|
|
|
8
11
|
gem "react_on_rails", path: "../"
|
|
9
12
|
|
|
10
|
-
gem "shakapacker", "9.
|
|
13
|
+
gem "shakapacker", "9.4.0"
|
|
11
14
|
gem "bootsnap", require: false
|
|
12
15
|
gem "rails", "~> 7.1"
|
|
13
16
|
gem "puma", "~> 6"
|
|
@@ -51,9 +54,6 @@ group :development, :test do
|
|
|
51
54
|
gem 'pry-theme' # An easy way to customize Pry colors via theme files
|
|
52
55
|
|
|
53
56
|
gem "rbs", require: false
|
|
54
|
-
gem "rubocop", "1.36.0", require: false
|
|
55
|
-
gem 'rubocop-performance', "1.15.0", require: false
|
|
56
|
-
gem 'rubocop-rspec', "2.13.2", require: false
|
|
57
57
|
gem "scss_lint", require: false
|
|
58
58
|
gem 'fakefs', require: 'fakefs/safe'
|
|
59
59
|
end
|
data/Gemfile.loader
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
3
|
# Load base dependencies
|
|
4
|
-
|
|
4
|
+
base_deps_path = File.expand_path("./Gemfile.development_dependencies", __dir__)
|
|
5
|
+
base_deps = File.read(base_deps_path)
|
|
5
6
|
|
|
6
7
|
# Determine which override file to use
|
|
7
|
-
|
|
8
|
+
override_deps_path = if ENV["CI"] == "true" && File.exist?(File.expand_path("./Gemfile.ci", __dir__))
|
|
8
9
|
# In CI environment, use CI dependencies
|
|
9
|
-
File.
|
|
10
|
+
File.expand_path("./Gemfile.ci", __dir__)
|
|
10
11
|
elsif File.exist?(File.expand_path("./Gemfile.local", __dir__))
|
|
11
12
|
# In non-CI environment, use local dependencies if they exist
|
|
12
|
-
File.
|
|
13
|
-
else
|
|
14
|
-
""
|
|
13
|
+
File.expand_path("./Gemfile.local", __dir__)
|
|
15
14
|
end
|
|
16
15
|
|
|
16
|
+
override_deps = override_deps_path ? File.read(override_deps_path) : ""
|
|
17
|
+
|
|
17
18
|
# Parse override gems
|
|
18
19
|
override_gem_names = override_deps.scan(/^\s*gem\s+["']([^"']+)["']/).flatten
|
|
19
20
|
|
|
@@ -26,7 +27,9 @@ end
|
|
|
26
27
|
base_deps.gsub!(/^\s*$\n/, '')
|
|
27
28
|
|
|
28
29
|
# Evaluate the modified base dependencies
|
|
29
|
-
|
|
30
|
+
# Using instance_eval with filepath preserves __dir__ in evaluated content,
|
|
31
|
+
# allowing eval_gemfile calls to work correctly inside loaded files.
|
|
32
|
+
instance_eval(base_deps, base_deps_path)
|
|
30
33
|
|
|
31
34
|
# Evaluate override dependencies if they exist
|
|
32
|
-
|
|
35
|
+
instance_eval(override_deps, override_deps_path) unless override_deps.empty?
|
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.test.
|
|
12
|
+
react_on_rails (16.2.0.test.7)
|
|
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.test.
|
|
23
|
+
react_on_rails_pro (16.2.0.test.7)
|
|
24
24
|
addressable
|
|
25
25
|
async (>= 2.6)
|
|
26
26
|
connection_pool
|
|
@@ -29,71 +29,73 @@ PATH
|
|
|
29
29
|
httpx (~> 1.5)
|
|
30
30
|
jwt (~> 2.7)
|
|
31
31
|
rainbow
|
|
32
|
-
react_on_rails (= 16.2.0.test.
|
|
32
|
+
react_on_rails (= 16.2.0.test.7)
|
|
33
33
|
|
|
34
34
|
GEM
|
|
35
35
|
remote: https://rubygems.org/
|
|
36
36
|
specs:
|
|
37
|
-
actioncable (7.2.
|
|
38
|
-
actionpack (= 7.2.
|
|
39
|
-
activesupport (= 7.2.
|
|
37
|
+
actioncable (7.2.3)
|
|
38
|
+
actionpack (= 7.2.3)
|
|
39
|
+
activesupport (= 7.2.3)
|
|
40
40
|
nio4r (~> 2.0)
|
|
41
41
|
websocket-driver (>= 0.6.1)
|
|
42
42
|
zeitwerk (~> 2.6)
|
|
43
|
-
actionmailbox (7.2.
|
|
44
|
-
actionpack (= 7.2.
|
|
45
|
-
activejob (= 7.2.
|
|
46
|
-
activerecord (= 7.2.
|
|
47
|
-
activestorage (= 7.2.
|
|
48
|
-
activesupport (= 7.2.
|
|
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)
|
|
49
49
|
mail (>= 2.8.0)
|
|
50
|
-
actionmailer (7.2.
|
|
51
|
-
actionpack (= 7.2.
|
|
52
|
-
actionview (= 7.2.
|
|
53
|
-
activejob (= 7.2.
|
|
54
|
-
activesupport (= 7.2.
|
|
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)
|
|
55
55
|
mail (>= 2.8.0)
|
|
56
56
|
rails-dom-testing (~> 2.2)
|
|
57
|
-
actionpack (7.2.
|
|
58
|
-
actionview (= 7.2.
|
|
59
|
-
activesupport (= 7.2.
|
|
57
|
+
actionpack (7.2.3)
|
|
58
|
+
actionview (= 7.2.3)
|
|
59
|
+
activesupport (= 7.2.3)
|
|
60
|
+
cgi
|
|
60
61
|
nokogiri (>= 1.8.5)
|
|
61
62
|
racc
|
|
62
|
-
rack (>= 2.2.4, < 3.
|
|
63
|
+
rack (>= 2.2.4, < 3.3)
|
|
63
64
|
rack-session (>= 1.0.1)
|
|
64
65
|
rack-test (>= 0.6.3)
|
|
65
66
|
rails-dom-testing (~> 2.2)
|
|
66
67
|
rails-html-sanitizer (~> 1.6)
|
|
67
68
|
useragent (~> 0.16)
|
|
68
|
-
actiontext (7.2.
|
|
69
|
-
actionpack (= 7.2.
|
|
70
|
-
activerecord (= 7.2.
|
|
71
|
-
activestorage (= 7.2.
|
|
72
|
-
activesupport (= 7.2.
|
|
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)
|
|
73
74
|
globalid (>= 0.6.0)
|
|
74
75
|
nokogiri (>= 1.8.5)
|
|
75
|
-
actionview (7.2.
|
|
76
|
-
activesupport (= 7.2.
|
|
76
|
+
actionview (7.2.3)
|
|
77
|
+
activesupport (= 7.2.3)
|
|
77
78
|
builder (~> 3.1)
|
|
79
|
+
cgi
|
|
78
80
|
erubi (~> 1.11)
|
|
79
81
|
rails-dom-testing (~> 2.2)
|
|
80
82
|
rails-html-sanitizer (~> 1.6)
|
|
81
|
-
activejob (7.2.
|
|
82
|
-
activesupport (= 7.2.
|
|
83
|
+
activejob (7.2.3)
|
|
84
|
+
activesupport (= 7.2.3)
|
|
83
85
|
globalid (>= 0.3.6)
|
|
84
|
-
activemodel (7.2.
|
|
85
|
-
activesupport (= 7.2.
|
|
86
|
-
activerecord (7.2.
|
|
87
|
-
activemodel (= 7.2.
|
|
88
|
-
activesupport (= 7.2.
|
|
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)
|
|
89
91
|
timeout (>= 0.4.0)
|
|
90
|
-
activestorage (7.2.
|
|
91
|
-
actionpack (= 7.2.
|
|
92
|
-
activejob (= 7.2.
|
|
93
|
-
activerecord (= 7.2.
|
|
94
|
-
activesupport (= 7.2.
|
|
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)
|
|
95
97
|
marcel (~> 1.0)
|
|
96
|
-
activesupport (7.2.
|
|
98
|
+
activesupport (7.2.3)
|
|
97
99
|
base64
|
|
98
100
|
benchmark (>= 0.3)
|
|
99
101
|
bigdecimal
|
|
@@ -105,19 +107,19 @@ GEM
|
|
|
105
107
|
minitest (>= 5.1)
|
|
106
108
|
securerandom (>= 0.3)
|
|
107
109
|
tzinfo (~> 2.0, >= 2.0.5)
|
|
108
|
-
addressable (2.8.
|
|
109
|
-
public_suffix (>= 2.0.2, <
|
|
110
|
+
addressable (2.8.8)
|
|
111
|
+
public_suffix (>= 2.0.2, < 8.0)
|
|
110
112
|
amazing_print (1.6.0)
|
|
111
|
-
ast (2.4.
|
|
112
|
-
async (2.
|
|
113
|
+
ast (2.4.3)
|
|
114
|
+
async (2.35.0)
|
|
113
115
|
console (~> 1.29)
|
|
114
116
|
fiber-annotation
|
|
115
117
|
io-event (~> 1.11)
|
|
116
118
|
metrics (~> 0.12)
|
|
117
|
-
traces (~> 0.
|
|
118
|
-
base64 (0.
|
|
119
|
-
benchmark (0.
|
|
120
|
-
bigdecimal (3.1
|
|
119
|
+
traces (~> 0.18)
|
|
120
|
+
base64 (0.3.0)
|
|
121
|
+
benchmark (0.5.0)
|
|
122
|
+
bigdecimal (3.3.1)
|
|
121
123
|
bindex (0.8.1)
|
|
122
124
|
bootsnap (1.18.3)
|
|
123
125
|
msgpack (~> 1.2)
|
|
@@ -135,14 +137,15 @@ GEM
|
|
|
135
137
|
capybara-screenshot (1.0.26)
|
|
136
138
|
capybara (>= 1.0, < 4)
|
|
137
139
|
launchy
|
|
140
|
+
cgi (0.5.0)
|
|
138
141
|
childprocess (5.0.0)
|
|
139
142
|
coderay (1.1.3)
|
|
140
143
|
commonmarker (1.1.4-arm64-darwin)
|
|
141
144
|
commonmarker (1.1.4-x86_64-darwin)
|
|
142
145
|
commonmarker (1.1.4-x86_64-linux)
|
|
143
146
|
concurrent-ruby (1.3.5)
|
|
144
|
-
connection_pool (
|
|
145
|
-
console (1.
|
|
147
|
+
connection_pool (3.0.2)
|
|
148
|
+
console (1.34.2)
|
|
146
149
|
fiber-annotation
|
|
147
150
|
fiber-local (~> 1.1)
|
|
148
151
|
json
|
|
@@ -156,14 +159,15 @@ GEM
|
|
|
156
159
|
bigdecimal
|
|
157
160
|
rexml
|
|
158
161
|
crass (1.0.6)
|
|
159
|
-
date (3.
|
|
162
|
+
date (3.5.0)
|
|
160
163
|
diff-lcs (1.5.1)
|
|
161
164
|
docile (1.4.0)
|
|
162
|
-
drb (2.2.
|
|
165
|
+
drb (2.2.3)
|
|
163
166
|
equivalent-xml (0.6.0)
|
|
164
167
|
nokogiri (>= 1.4.3)
|
|
168
|
+
erb (6.0.0)
|
|
165
169
|
erubi (1.13.1)
|
|
166
|
-
execjs (2.
|
|
170
|
+
execjs (2.10.0)
|
|
167
171
|
fakefs (2.8.0)
|
|
168
172
|
faker (3.4.1)
|
|
169
173
|
i18n (>= 1.8.11, < 2)
|
|
@@ -178,19 +182,19 @@ GEM
|
|
|
178
182
|
generator_spec (0.10.0)
|
|
179
183
|
activesupport (>= 3.0.0)
|
|
180
184
|
railties (>= 3.0.0)
|
|
181
|
-
globalid (1.
|
|
185
|
+
globalid (1.3.0)
|
|
182
186
|
activesupport (>= 6.1)
|
|
183
187
|
graphiql-rails (1.10.0)
|
|
184
188
|
railties
|
|
185
189
|
hashdiff (1.1.0)
|
|
186
190
|
http-2 (1.1.1)
|
|
187
|
-
httpx (1.
|
|
191
|
+
httpx (1.6.3)
|
|
188
192
|
http-2 (>= 1.0.0)
|
|
189
193
|
i18n (1.14.7)
|
|
190
194
|
concurrent-ruby (~> 1.0)
|
|
191
|
-
io-console (0.8.
|
|
192
|
-
io-event (1.
|
|
193
|
-
irb (1.15.
|
|
195
|
+
io-console (0.8.1)
|
|
196
|
+
io-event (1.14.2)
|
|
197
|
+
irb (1.15.3)
|
|
194
198
|
pp (>= 0.6.0)
|
|
195
199
|
rdoc (>= 4.0.0)
|
|
196
200
|
reline (>= 0.4.2)
|
|
@@ -201,36 +205,38 @@ GEM
|
|
|
201
205
|
rails-dom-testing (>= 1, < 3)
|
|
202
206
|
railties (>= 4.2.0)
|
|
203
207
|
thor (>= 0.14, < 2.0)
|
|
204
|
-
json (2.
|
|
205
|
-
jwt (2.
|
|
208
|
+
json (2.17.1)
|
|
209
|
+
jwt (2.10.2)
|
|
206
210
|
base64
|
|
211
|
+
language_server-protocol (3.17.0.5)
|
|
207
212
|
launchy (3.0.1)
|
|
208
213
|
addressable (~> 2.8)
|
|
209
214
|
childprocess (~> 5.0)
|
|
210
215
|
listen (3.9.0)
|
|
211
216
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
|
212
217
|
rb-inotify (~> 0.9, >= 0.9.10)
|
|
213
|
-
logger (1.
|
|
214
|
-
loofah (2.24.
|
|
218
|
+
logger (1.7.0)
|
|
219
|
+
loofah (2.24.1)
|
|
215
220
|
crass (~> 1.0.2)
|
|
216
221
|
nokogiri (>= 1.12.0)
|
|
217
|
-
mail (2.
|
|
222
|
+
mail (2.9.0)
|
|
223
|
+
logger
|
|
218
224
|
mini_mime (>= 0.1.1)
|
|
219
225
|
net-imap
|
|
220
226
|
net-pop
|
|
221
227
|
net-smtp
|
|
222
|
-
marcel (1.0
|
|
228
|
+
marcel (1.1.0)
|
|
223
229
|
matrix (0.4.2)
|
|
224
230
|
method_source (1.1.0)
|
|
225
|
-
metrics (0.
|
|
231
|
+
metrics (0.15.0)
|
|
226
232
|
mini_mime (1.1.5)
|
|
227
|
-
minitest (5.
|
|
233
|
+
minitest (5.26.2)
|
|
228
234
|
mize (0.4.1)
|
|
229
235
|
protocol (~> 2.0)
|
|
230
236
|
msgpack (1.7.2)
|
|
231
237
|
net-http (0.4.1)
|
|
232
238
|
uri
|
|
233
|
-
net-imap (0.5.
|
|
239
|
+
net-imap (0.5.12)
|
|
234
240
|
date
|
|
235
241
|
net-protocol
|
|
236
242
|
net-pop (0.1.2)
|
|
@@ -239,22 +245,23 @@ GEM
|
|
|
239
245
|
timeout
|
|
240
246
|
net-smtp (0.5.1)
|
|
241
247
|
net-protocol
|
|
242
|
-
nio4r (2.7.
|
|
243
|
-
nokogiri (1.18.
|
|
248
|
+
nio4r (2.7.5)
|
|
249
|
+
nokogiri (1.18.10-arm64-darwin)
|
|
244
250
|
racc (~> 1.4)
|
|
245
|
-
nokogiri (1.18.
|
|
251
|
+
nokogiri (1.18.10-x86_64-darwin)
|
|
246
252
|
racc (~> 1.4)
|
|
247
|
-
nokogiri (1.18.
|
|
253
|
+
nokogiri (1.18.10-x86_64-linux-gnu)
|
|
248
254
|
racc (~> 1.4)
|
|
249
255
|
package_json (0.2.0)
|
|
250
|
-
parallel (1.
|
|
251
|
-
parser (3.3.
|
|
256
|
+
parallel (1.27.0)
|
|
257
|
+
parser (3.3.10.0)
|
|
252
258
|
ast (~> 2.4.1)
|
|
253
259
|
racc
|
|
254
260
|
pg (1.5.6)
|
|
255
|
-
pp (0.6.
|
|
261
|
+
pp (0.6.3)
|
|
256
262
|
prettyprint
|
|
257
263
|
prettyprint (0.2.0)
|
|
264
|
+
prism (1.6.0)
|
|
258
265
|
protocol (2.0.0)
|
|
259
266
|
ruby_parser (~> 3.0)
|
|
260
267
|
pry (0.14.2)
|
|
@@ -267,63 +274,67 @@ GEM
|
|
|
267
274
|
pry (>= 0.13.0)
|
|
268
275
|
pry-theme (1.3.1)
|
|
269
276
|
coderay (~> 1.1)
|
|
270
|
-
psych (5.2.
|
|
277
|
+
psych (5.2.6)
|
|
271
278
|
date
|
|
272
279
|
stringio
|
|
273
|
-
public_suffix (
|
|
280
|
+
public_suffix (7.0.0)
|
|
274
281
|
puma (6.5.0)
|
|
275
282
|
nio4r (~> 2.0)
|
|
276
283
|
racc (1.8.1)
|
|
277
|
-
rack (3.
|
|
284
|
+
rack (3.2.4)
|
|
278
285
|
rack-proxy (0.7.7)
|
|
279
286
|
rack
|
|
280
|
-
rack-session (2.1.
|
|
287
|
+
rack-session (2.1.1)
|
|
281
288
|
base64 (>= 0.1.0)
|
|
282
289
|
rack (>= 3.0.0)
|
|
283
290
|
rack-test (2.2.0)
|
|
284
291
|
rack (>= 1.3)
|
|
285
|
-
rackup (2.
|
|
292
|
+
rackup (2.3.1)
|
|
286
293
|
rack (>= 3)
|
|
287
|
-
rails (7.2.
|
|
288
|
-
actioncable (= 7.2.
|
|
289
|
-
actionmailbox (= 7.2.
|
|
290
|
-
actionmailer (= 7.2.
|
|
291
|
-
actionpack (= 7.2.
|
|
292
|
-
actiontext (= 7.2.
|
|
293
|
-
actionview (= 7.2.
|
|
294
|
-
activejob (= 7.2.
|
|
295
|
-
activemodel (= 7.2.
|
|
296
|
-
activerecord (= 7.2.
|
|
297
|
-
activestorage (= 7.2.
|
|
298
|
-
activesupport (= 7.2.
|
|
294
|
+
rails (7.2.3)
|
|
295
|
+
actioncable (= 7.2.3)
|
|
296
|
+
actionmailbox (= 7.2.3)
|
|
297
|
+
actionmailer (= 7.2.3)
|
|
298
|
+
actionpack (= 7.2.3)
|
|
299
|
+
actiontext (= 7.2.3)
|
|
300
|
+
actionview (= 7.2.3)
|
|
301
|
+
activejob (= 7.2.3)
|
|
302
|
+
activemodel (= 7.2.3)
|
|
303
|
+
activerecord (= 7.2.3)
|
|
304
|
+
activestorage (= 7.2.3)
|
|
305
|
+
activesupport (= 7.2.3)
|
|
299
306
|
bundler (>= 1.15.0)
|
|
300
|
-
railties (= 7.2.
|
|
301
|
-
rails-dom-testing (2.
|
|
307
|
+
railties (= 7.2.3)
|
|
308
|
+
rails-dom-testing (2.3.0)
|
|
302
309
|
activesupport (>= 5.0.0)
|
|
303
310
|
minitest
|
|
304
311
|
nokogiri (>= 1.6)
|
|
305
312
|
rails-html-sanitizer (1.6.2)
|
|
306
313
|
loofah (~> 2.21)
|
|
307
314
|
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)
|
|
308
|
-
railties (7.2.
|
|
309
|
-
actionpack (= 7.2.
|
|
310
|
-
activesupport (= 7.2.
|
|
315
|
+
railties (7.2.3)
|
|
316
|
+
actionpack (= 7.2.3)
|
|
317
|
+
activesupport (= 7.2.3)
|
|
318
|
+
cgi
|
|
311
319
|
irb (~> 1.13)
|
|
312
320
|
rackup (>= 1.0.0)
|
|
313
321
|
rake (>= 12.2)
|
|
314
322
|
thor (~> 1.0, >= 1.2.2)
|
|
323
|
+
tsort (>= 0.2)
|
|
315
324
|
zeitwerk (~> 2.6)
|
|
316
325
|
rainbow (3.1.1)
|
|
317
|
-
rake (13.
|
|
326
|
+
rake (13.3.1)
|
|
318
327
|
rb-fsevent (0.11.2)
|
|
319
328
|
rb-inotify (0.11.1)
|
|
320
329
|
ffi (~> 1.0)
|
|
321
330
|
rbs (3.9.5)
|
|
322
331
|
logger
|
|
323
|
-
rdoc (6.
|
|
332
|
+
rdoc (6.16.1)
|
|
333
|
+
erb
|
|
324
334
|
psych (>= 4.0.0)
|
|
335
|
+
tsort
|
|
325
336
|
regexp_parser (2.9.2)
|
|
326
|
-
reline (0.6.
|
|
337
|
+
reline (0.6.3)
|
|
327
338
|
io-console (~> 0.5)
|
|
328
339
|
rexml (3.3.9)
|
|
329
340
|
rspec-core (3.13.0)
|
|
@@ -347,23 +358,34 @@ GEM
|
|
|
347
358
|
rspec-support (3.13.1)
|
|
348
359
|
rspec_junit_formatter (0.6.0)
|
|
349
360
|
rspec-core (>= 2, < 4, != 2.12.0)
|
|
350
|
-
rubocop (1.
|
|
361
|
+
rubocop (1.61.0)
|
|
351
362
|
json (~> 2.3)
|
|
363
|
+
language_server-protocol (>= 3.17.0)
|
|
352
364
|
parallel (~> 1.10)
|
|
353
|
-
parser (>= 3.
|
|
365
|
+
parser (>= 3.3.0.2)
|
|
354
366
|
rainbow (>= 2.2.2, < 4.0)
|
|
355
367
|
regexp_parser (>= 1.8, < 3.0)
|
|
356
368
|
rexml (>= 3.2.5, < 4.0)
|
|
357
|
-
rubocop-ast (>= 1.
|
|
369
|
+
rubocop-ast (>= 1.30.0, < 2.0)
|
|
358
370
|
ruby-progressbar (~> 1.7)
|
|
359
|
-
unicode-display_width (>=
|
|
360
|
-
rubocop-ast (1.
|
|
361
|
-
parser (>= 3.3.
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
rubocop
|
|
365
|
-
rubocop-
|
|
366
|
-
rubocop (~> 1.
|
|
371
|
+
unicode-display_width (>= 2.4.0, < 3.0)
|
|
372
|
+
rubocop-ast (1.48.0)
|
|
373
|
+
parser (>= 3.3.7.2)
|
|
374
|
+
prism (~> 1.4)
|
|
375
|
+
rubocop-capybara (2.21.0)
|
|
376
|
+
rubocop (~> 1.41)
|
|
377
|
+
rubocop-factory_bot (2.26.1)
|
|
378
|
+
rubocop (~> 1.61)
|
|
379
|
+
rubocop-performance (1.20.2)
|
|
380
|
+
rubocop (>= 1.48.1, < 2.0)
|
|
381
|
+
rubocop-ast (>= 1.30.0, < 2.0)
|
|
382
|
+
rubocop-rspec (2.31.0)
|
|
383
|
+
rubocop (~> 1.40)
|
|
384
|
+
rubocop-capybara (~> 2.17)
|
|
385
|
+
rubocop-factory_bot (~> 2.22)
|
|
386
|
+
rubocop-rspec_rails (~> 2.28)
|
|
387
|
+
rubocop-rspec_rails (2.29.1)
|
|
388
|
+
rubocop (~> 1.61)
|
|
367
389
|
ruby-progressbar (1.13.0)
|
|
368
390
|
ruby_parser (3.21.0)
|
|
369
391
|
racc (~> 1.5)
|
|
@@ -393,7 +415,7 @@ GEM
|
|
|
393
415
|
websocket (~> 1.0)
|
|
394
416
|
semantic_range (3.1.0)
|
|
395
417
|
sexp_processor (4.17.1)
|
|
396
|
-
shakapacker (9.
|
|
418
|
+
shakapacker (9.4.0)
|
|
397
419
|
activesupport (>= 5.2)
|
|
398
420
|
package_json
|
|
399
421
|
rack-proxy (>= 0.6.1)
|
|
@@ -418,18 +440,19 @@ GEM
|
|
|
418
440
|
sqlite3 (1.7.3-arm64-darwin)
|
|
419
441
|
sqlite3 (1.7.3-x86_64-darwin)
|
|
420
442
|
sqlite3 (1.7.3-x86_64-linux)
|
|
421
|
-
stringio (3.1.
|
|
443
|
+
stringio (3.1.9)
|
|
422
444
|
sync (0.5.0)
|
|
423
445
|
term-ansicolor (1.10.2)
|
|
424
446
|
mize
|
|
425
447
|
tins (~> 1.0)
|
|
426
|
-
thor (1.
|
|
448
|
+
thor (1.4.0)
|
|
427
449
|
tilt (2.4.0)
|
|
428
|
-
timeout (0.4.
|
|
450
|
+
timeout (0.4.4)
|
|
429
451
|
tins (1.33.0)
|
|
430
452
|
bigdecimal
|
|
431
453
|
sync
|
|
432
|
-
traces (0.18.
|
|
454
|
+
traces (0.18.2)
|
|
455
|
+
tsort (0.2.0)
|
|
433
456
|
turbolinks (5.2.1)
|
|
434
457
|
turbolinks-source (~> 5.2)
|
|
435
458
|
turbolinks-source (5.2.0)
|
|
@@ -437,7 +460,7 @@ GEM
|
|
|
437
460
|
concurrent-ruby (~> 1.0)
|
|
438
461
|
uglifier (4.2.0)
|
|
439
462
|
execjs (>= 0.3.0, < 3)
|
|
440
|
-
unicode-display_width (2.
|
|
463
|
+
unicode-display_width (2.6.0)
|
|
441
464
|
uri (1.0.3)
|
|
442
465
|
useragent (0.16.11)
|
|
443
466
|
web-console (4.2.1)
|
|
@@ -454,14 +477,14 @@ GEM
|
|
|
454
477
|
crack (>= 0.3.2)
|
|
455
478
|
hashdiff (>= 0.4.0, < 2.0.0)
|
|
456
479
|
websocket (1.2.10)
|
|
457
|
-
websocket-driver (0.
|
|
480
|
+
websocket-driver (0.8.0)
|
|
458
481
|
base64
|
|
459
482
|
websocket-extensions (>= 0.1.0)
|
|
460
483
|
websocket-extensions (0.1.5)
|
|
461
484
|
xpath (3.2.0)
|
|
462
485
|
nokogiri (~> 1.8)
|
|
463
486
|
yard (0.9.36)
|
|
464
|
-
zeitwerk (2.7.
|
|
487
|
+
zeitwerk (2.7.3)
|
|
465
488
|
|
|
466
489
|
PLATFORMS
|
|
467
490
|
arm64-darwin-24
|
|
@@ -503,13 +526,13 @@ DEPENDENCIES
|
|
|
503
526
|
rspec-rails
|
|
504
527
|
rspec-retry
|
|
505
528
|
rspec_junit_formatter
|
|
506
|
-
rubocop (= 1.
|
|
507
|
-
rubocop-performance (
|
|
508
|
-
rubocop-rspec (
|
|
529
|
+
rubocop (= 1.61.0)
|
|
530
|
+
rubocop-performance (~> 1.20.0)
|
|
531
|
+
rubocop-rspec (~> 2.26)
|
|
509
532
|
sass-rails
|
|
510
533
|
scss_lint
|
|
511
534
|
selenium-webdriver (= 4.9.0)
|
|
512
|
-
shakapacker (= 9.
|
|
535
|
+
shakapacker (= 9.4.0)
|
|
513
536
|
spring
|
|
514
537
|
spring-watcher-listen
|
|
515
538
|
sprockets
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# Server-side rendering with code-splitting using Loadable/Components
|
|
2
|
+
|
|
2
3
|
by ShakaCode
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
_Last updated September 19, 2022_
|
|
5
6
|
|
|
6
7
|
## Introduction
|
|
8
|
+
|
|
7
9
|
The [React library recommends](https://loadable-components.com/docs/getting-started/) the use of React.lazy for code splitting with dynamic imports except
|
|
8
10
|
when using server-side rendering. In that case, as of February 2020, they recommend [Loadable Components](https://loadable-components.com)
|
|
9
|
-
for server-side rendering with dynamic imports.
|
|
11
|
+
for server-side rendering with dynamic imports.
|
|
10
12
|
|
|
11
13
|
Note, in 2019 and prior, the code-splitting feature was implemented using `react-loadable`. The React
|
|
12
14
|
team no longer recommends that library. The new way is far preferable.
|
|
@@ -18,7 +20,8 @@ yarn add @loadable/babel-plugin @loadable/component @loadable/server @loadable/
|
|
|
18
20
|
```
|
|
19
21
|
|
|
20
22
|
### Summary
|
|
21
|
-
|
|
23
|
+
|
|
24
|
+
- [`@loadable/babel-plugin`](https://loadable-components.com/docs/getting-started/) - The plugin transforms your code to be ready for Server Side Rendering.
|
|
22
25
|
- `@loadable/component` - Main library for creating loadable components.
|
|
23
26
|
- `@loadable/server` - Has functions for collecting chunks and provide style, script, link tags for the server.
|
|
24
27
|
- `@loadable/webpack-plugin` - The plugin to create a stats file with all chunks, assets information.
|
|
@@ -35,15 +38,16 @@ See example of server configuration differences in the loadable-components [exam
|
|
|
35
38
|
for server-side rendering](https://github.com/gregberge/loadable-components/blob/master/examples/server-side-rendering/webpack.config.babel.js)
|
|
36
39
|
|
|
37
40
|
You need to configure 3 things:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
|
|
42
|
+
1. `target`
|
|
43
|
+
a. client-side: `web`
|
|
44
|
+
b. server-side: `node`
|
|
41
45
|
2. `output.libraryTarget`
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
3. babel-loader options.caller = 'node' or 'web'
|
|
45
|
-
|
|
46
|
-
|
|
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 })`
|
|
47
51
|
|
|
48
52
|
```js
|
|
49
53
|
{
|
|
@@ -58,14 +62,15 @@ You need to configure 3 things:
|
|
|
58
62
|
Explanation:
|
|
59
63
|
|
|
60
64
|
- `target: 'node'` is required to be able to run the server bundle with the dynamic import logic on nodejs.
|
|
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.
|
|
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.
|
|
62
66
|
|
|
63
67
|
- `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
|
|
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.
|
|
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.
|
|
65
69
|
|
|
66
70
|
#### Client config
|
|
67
71
|
|
|
68
72
|
For the client config we only need to add the plugin:
|
|
73
|
+
|
|
69
74
|
```js
|
|
70
75
|
{
|
|
71
76
|
plugins: [
|
|
@@ -74,30 +79,33 @@ For the client config we only need to add the plugin:
|
|
|
74
79
|
]
|
|
75
80
|
}
|
|
76
81
|
```
|
|
82
|
+
|
|
77
83
|
This plugin collects all the information about entrypoints, chunks, and files, that have these chunks and creates a stats file during client bundle build.
|
|
78
84
|
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.
|
|
79
85
|
|
|
80
86
|
### Babel
|
|
81
87
|
|
|
82
88
|
Per [the docs](https://loadable-components.com/docs/babel-plugin/#transformation):
|
|
89
|
+
|
|
83
90
|
> The plugin transforms your code to be ready for Server Side Rendering
|
|
84
91
|
|
|
85
92
|
Add this to `babel.config.js`:
|
|
93
|
+
|
|
86
94
|
```js
|
|
87
95
|
{
|
|
88
96
|
"plugins": ["@loadable/babel-plugin"]
|
|
89
97
|
}
|
|
90
98
|
```
|
|
91
|
-
https://loadable-components.com/docs/babel-plugin/
|
|
92
99
|
|
|
100
|
+
https://loadable-components.com/docs/babel-plugin/
|
|
93
101
|
|
|
94
102
|
### Convert components into loadable components
|
|
95
103
|
|
|
96
104
|
Instead of importing the component directly, use a dynamic import:
|
|
97
105
|
|
|
98
106
|
```js
|
|
99
|
-
import load from '@loadable/component'
|
|
100
|
-
const MyComponent = load(() => import('./MyComponent'))
|
|
107
|
+
import load from '@loadable/component';
|
|
108
|
+
const MyComponent = load(() => import('./MyComponent'));
|
|
101
109
|
```
|
|
102
110
|
|
|
103
111
|
### Resolving issue with ChunkLoadError
|
|
@@ -118,22 +126,25 @@ const consoleDebug = (fn) => {
|
|
|
118
126
|
console.debug(fn());
|
|
119
127
|
}
|
|
120
128
|
};
|
|
121
|
-
const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) =>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
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
|
+
});
|
|
137
148
|
export default retry;
|
|
138
149
|
```
|
|
139
150
|
|
|
@@ -152,21 +163,21 @@ const HomePage = loadable(() => retry(() => import('./HomePage')));
|
|
|
152
163
|
|
|
153
164
|
In the client bundle, we need to wrap the `hydrateRoot` call into a `loadableReady` function.
|
|
154
165
|
So, hydration will be fired only after all necessary chunks preloads. In this example below,
|
|
155
|
-
`ClientApp` is registering as `App`.
|
|
166
|
+
`ClientApp` is registering as `App`.
|
|
156
167
|
|
|
157
168
|
```js
|
|
158
169
|
import React from 'react';
|
|
159
170
|
import ReactOnRails from 'react-on-rails';
|
|
160
|
-
import { hydrateRoot } from 'react-dom/client'
|
|
161
|
-
import { loadableReady } from '@loadable/component'
|
|
171
|
+
import { hydrateRoot } from 'react-dom/client';
|
|
172
|
+
import { loadableReady } from '@loadable/component';
|
|
162
173
|
import App from './App';
|
|
163
174
|
|
|
164
175
|
const ClientApp = (props, railsContext, domId) => {
|
|
165
176
|
loadableReady(() => {
|
|
166
|
-
const root = document.getElementById(domId)
|
|
177
|
+
const root = document.getElementById(domId);
|
|
167
178
|
hydrateRoot(root, <App {...props} />);
|
|
168
|
-
})
|
|
169
|
-
}
|
|
179
|
+
});
|
|
180
|
+
};
|
|
170
181
|
|
|
171
182
|
ReactOnRails.register({
|
|
172
183
|
App: ClientApp,
|
|
@@ -175,20 +186,20 @@ ReactOnRails.register({
|
|
|
175
186
|
|
|
176
187
|
#### Server
|
|
177
188
|
|
|
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`.
|
|
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`.
|
|
180
191
|
|
|
181
192
|
```js
|
|
182
193
|
import React from 'react';
|
|
183
194
|
import ReactOnRails from 'react-on-rails';
|
|
184
|
-
import { ChunkExtractor } from '@loadable/server'
|
|
185
|
-
import App from './App'
|
|
186
|
-
import path from 'path'
|
|
195
|
+
import { ChunkExtractor } from '@loadable/server';
|
|
196
|
+
import App from './App';
|
|
197
|
+
import path from 'path';
|
|
187
198
|
|
|
188
199
|
const ServerApp = (props, railsContext) => {
|
|
189
200
|
// This loadable-stats file was generated by `LoadablePlugin` in client webpack config.
|
|
190
201
|
// You must configure the path to resolve per your setup. If you are copying the file to
|
|
191
|
-
// a remote server, the file should be a sibling of this file.
|
|
202
|
+
// a remote server, the file should be a sibling of this file.
|
|
192
203
|
// __dirname is going to be the directory where the server-bundle.js exists
|
|
193
204
|
// Note, React on Rails Pro automatically copies the loadable-stats.json to the same place as the
|
|
194
205
|
// server-bundle.js. Thus, the __dirname of this code is where we can find loadable-stats.json.
|
|
@@ -198,10 +209,10 @@ const ServerApp = (props, railsContext) => {
|
|
|
198
209
|
// This object is used to search filenames by corresponding chunk names.
|
|
199
210
|
// See https://loadable-components.com/docs/api-loadable-server/#chunkextractor
|
|
200
211
|
// for the entryPoints, pass an array of all your entryPoints using dynamic imports
|
|
201
|
-
const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] })
|
|
212
|
+
const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] });
|
|
202
213
|
|
|
203
214
|
// It creates the wrapper `ChunkExtractorManager` around `App` to collect chunk names of rendered components.
|
|
204
|
-
const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />)
|
|
215
|
+
const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />);
|
|
205
216
|
|
|
206
217
|
const componentHtml = renderToString(jsx);
|
|
207
218
|
|
|
@@ -211,8 +222,8 @@ const ServerApp = (props, railsContext) => {
|
|
|
211
222
|
// Returns all the files with rendered chunks for furture insert into rails view.
|
|
212
223
|
linkTags: extractor.getLinkTags(),
|
|
213
224
|
styleTags: extractor.getStyleTags(),
|
|
214
|
-
scriptTags: extractor.getScriptTags()
|
|
215
|
-
}
|
|
225
|
+
scriptTags: extractor.getScriptTags(),
|
|
226
|
+
},
|
|
216
227
|
};
|
|
217
228
|
};
|
|
218
229
|
|
|
@@ -224,6 +235,7 @@ ReactOnRails.register({
|
|
|
224
235
|
## Configure react_on_rails_pro
|
|
225
236
|
|
|
226
237
|
### React on Rails Pro
|
|
238
|
+
|
|
227
239
|
You must set `config.assets_top_copy` so that the node-renderer will have access to the loadable-stats.json.
|
|
228
240
|
|
|
229
241
|
```ruby
|
|
@@ -233,15 +245,16 @@ You must set `config.assets_top_copy` so that the node-renderer will have access
|
|
|
233
245
|
Your server rendering code, per the above, will find this file like this:
|
|
234
246
|
|
|
235
247
|
```js
|
|
236
|
-
|
|
237
|
-
```
|
|
248
|
+
const statsFile = path.resolve(__dirname, 'loadable-stats.json');
|
|
249
|
+
```
|
|
238
250
|
|
|
239
251
|
Note, if `__dirname` is not working in your webpack build, that's because you didn't set `node: false`
|
|
240
252
|
in your webpack configuration. That turns off the polyfills for things like `__dirname`.
|
|
241
253
|
|
|
242
|
-
|
|
243
254
|
### Node Renderer
|
|
255
|
+
|
|
244
256
|
In your `node-renderer.js` file which runs node renderer, you need to specify `supportModules` options as follows:
|
|
257
|
+
|
|
245
258
|
```js
|
|
246
259
|
const path = require('path');
|
|
247
260
|
const env = process.env;
|
|
@@ -261,7 +274,7 @@ reactOnRailsProNodeRenderer(config);
|
|
|
261
274
|
```erb
|
|
262
275
|
<% res = react_component_hash("App", props: {}, prerender: true) %>
|
|
263
276
|
<%= content_for :link_tags, res['linkTags'] %>
|
|
264
|
-
<%= content_for :style_tags, res['styleTags'] %>
|
|
277
|
+
<%= content_for :style_tags, res['styleTags'] %>
|
|
265
278
|
|
|
266
279
|
<%= res['componentHtml'].html_safe %>
|
|
267
280
|
|
|
@@ -269,6 +282,7 @@ reactOnRailsProNodeRenderer(config);
|
|
|
269
282
|
```
|
|
270
283
|
|
|
271
284
|
## Making HMR Work
|
|
285
|
+
|
|
272
286
|
To make HMR work, it's best to disable loadable-components when using the Dev Server.
|
|
273
287
|
Note: you will need access to our **private** React on Rails Pro repository to open the following links.
|
|
274
288
|
|
|
@@ -277,9 +291,11 @@ Take a look at the code searches for ['imports-loadable'](https://github.com/sha
|
|
|
277
291
|
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`
|
|
278
292
|
|
|
279
293
|
### Webpack configuration
|
|
294
|
+
|
|
280
295
|
Use the [NormalModuleReplacement plugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/):
|
|
281
296
|
|
|
282
297
|
[code](https://github.com/shakacode/react_on_rails_pro/blob/a361f4e163b9170f180ae07ee312fb9b4c719fc3/spec/dummy/config/webpack/environment.js#L81-L91)
|
|
298
|
+
|
|
283
299
|
```js
|
|
284
300
|
if (isWebpackDevServer) {
|
|
285
301
|
environment.plugins.append(
|
|
@@ -305,7 +321,7 @@ Note: you will need access to our **private** React on Rails Pro repository to o
|
|
|
305
321
|
### Client-Side Startup
|
|
306
322
|
|
|
307
323
|
- [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)
|
|
308
|
-
- [spec/dummy/client/app/loadable/loadable-client.imports-loadable.
|
|
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)
|
|
309
325
|
|
|
310
326
|
### Server-Side Startup
|
|
311
327
|
|
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.test.
|
|
4
|
+
version: 16.2.0.test.7
|
|
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-
|
|
11
|
+
date: 2025-12-11 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.test.
|
|
131
|
+
version: 16.2.0.test.7
|
|
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.test.
|
|
138
|
+
version: 16.2.0.test.7
|
|
139
139
|
- !ruby/object:Gem::Dependency
|
|
140
140
|
name: bundler
|
|
141
141
|
requirement: !ruby/object:Gem::Requirement
|