Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 25bc5ea

Browse files
Migrate to react on rails auto-registration (#649)
This PR migrates the application from React on Rails v14 manual component registration to v16's auto-registration feature, eliminating the need to manually register each React component. Key improvements: - Components now auto-register via ror_components directory convention - Removed manual component registration from client-bundle.js - Simplified pack structure by eliminating client-bundle and server-bundle - CI workflows updated to generate React on Rails packs before tests - Layouts updated to use append_javascript_pack_tag for proper loading order Breaking changes: - Components must be placed in ror_components subdirectories - client-bundle.js and server-bundle.js no longer exist - Pack tags in layouts follow new append/final pattern - Generated pack files added to gitignore Technical details: - Moved 5 components to ror_components directories (App, Footer, NavigationBarApp, RouterApp, SimpleCommentScreen) - Added stores-registration.js for Redux store management - Updated serverRegistration.jsx to use auto-registration API - Fixed import paths for React on Rails v16 compatibility - Resolved Shakapacker pack tag ordering requirements Impact on existing installations: - Existing apps need to restructure components into ror_components directories - Layout files require updating to new pack tag pattern - CI/CD pipelines need pack generation step before asset compilation Impact on new installations: - Simpler component registration process - Less boilerplate code required - Cleaner pack structure with auto-generated files Security implications: - No security issues introduced - Server bundles remain properly isolated Known issues: - Minor Turbo warning about script loading location (cosmetic, documented in TODO_TURBO_WARNING.md) This migration sets the foundation for React on Rails v16's improved developer experience while maintaining full compatibility with existing functionality.
1 parent 5385b64 commit 25bc5ea

File tree

22 files changed

+219
-101
lines changed

22 files changed

+219
-101
lines changed

‎.github/workflows/js_test.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,8 @@ jobs:
4444
- name: Build i18n libraries
4545
run: bundle exec rake react_on_rails:locale
4646

47+
- name: Generate React on Rails packs
48+
run: bundle exec rails react_on_rails:generate_packs
49+
4750
- name: Run js tests
4851
run: bundle exec rake ci:js

‎.github/workflows/lint_test.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,8 @@ jobs:
4343
- name: Build i18n libraries
4444
run: bundle exec rake react_on_rails:locale
4545

46+
- name: Generate React on Rails packs
47+
run: bundle exec rails react_on_rails:generate_packs
48+
4649
- name: Run lint
4750
run: bundle exec rake lint

‎.github/workflows/rspec_test.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ jobs:
7373
- name: Build i18n libraries
7474
run: bundle exec rake react_on_rails:locale
7575

76+
- name: Generate React on Rails packs
77+
run: bundle exec rails react_on_rails:generate_packs
78+
7679
- name: Build Rescript components
7780
run: yarn res:build
7881

‎.gitignore‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,7 @@ client/app/bundles/comments/rescript/**/*.bs.js
5757
# Using React on Rails default directory
5858
/ssr-generated/
5959

60-
# Generated files
61-
/client/app/generated/
60+
# Generated React on Rails packs
61+
**/generated/**
62+
63+
.claude/

‎Procfile.dev‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
# You can run these commands in separate shells
33
rescript: yarn res:dev
44
redis: redis-server
5-
rails: bin/rails s -p 3000
5+
rails: bundle exec rails s -p 3000
66
wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
77
wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

‎TODO_TURBO_WARNING.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# TODO: Fix Turbo Warning in Future PR
2+
3+
## Issue
4+
There's a console warning about Turbo being loaded from within the `<body>` element instead of the `<head>`.
5+
6+
## Root Cause
7+
Conflicting requirements between three systems:
8+
1. **Turbo** - Wants to be loaded in `<head>` to avoid re-evaluation on page changes
9+
2. **Shakapacker** - Requires all `append_javascript_pack_tag` calls to happen before the final `javascript_pack_tag`
10+
3. **React on Rails** - The `react_component` helper internally calls `append_javascript_pack_tag` when rendering components in the body
11+
12+
## Attempted Solutions That Failed
13+
1. Moving `javascript_pack_tag` to head - Breaks because `react_component` calls come after it
14+
2. Using `data-turbo-suppress-warning` - Doesn't properly suppress the warning
15+
16+
## Potential Future Solutions
17+
1. Extract Turbo into a separate pack from stimulus-bundle and load it in the head
18+
2. Use `prepend_javascript_pack_tag` instead of `append` for component registration
19+
3. Configure React on Rails v16 to use a different component loading strategy
20+
4. Investigate if the auto-registration feature has a different recommended pack loading pattern
21+
22+
## Current State
23+
The application works correctly with the pack tags at the end of the body. The Turbo warning is cosmetic and doesn't affect functionality.
24+
25+
## References
26+
- PR #649: Initial v16 migration
27+
- Shakapacker docs: https://github.com/shakacode/shakapacker#view-helper-append_javascript_pack_tag
28+
- Turbo docs: https://turbo.hotwired.dev/handbook/building#working-with-script-elements
29+
- React on Rails v16 docs: https://www.shakacode.com/react-on-rails/docs/

‎app/views/layouts/application.html.erb‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>RailsReactTutorial</title>
77

8-
<%= stylesheet_pack_tag('client-bundle',
9-
media: 'all',
10-
'data-turbolinks-track': true) %>
11-
12-
<%= javascript_pack_tag('client-bundle',
13-
'data-turbolinks-track': true,
14-
defer: true) %>
8+
<%= append_stylesheet_pack_tag('stimulus-bundle') %>
9+
<%= append_javascript_pack_tag('stimulus-bundle') %>
10+
<%= append_javascript_pack_tag('stores-registration') %>
1511

1612
<%= csrf_meta_tags %>
1713
</head>
@@ -24,6 +20,9 @@
2420

2521
<%= react_component "Footer" %>
2622

23+
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
24+
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
25+
2726
<!-- This is a placeholder for ReactOnRails to know where to render the store props for
2827
client side hydration -->
2928
<%= redux_store_hydration_data %>

‎app/views/layouts/stimulus_layout.html.erb‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>RailsReactTutorial</title>
77

8-
<%= stylesheet_pack_tag('client-bundle',
9-
media: 'all',
10-
'data-turbolinks-track': true) %>
11-
12-
<%= javascript_pack_tag('stimulus-bundle',
13-
'data-turbolinks-track': true,
14-
defer: true) %>
8+
<%= append_stylesheet_pack_tag('stimulus-bundle') %>
9+
<%= append_javascript_pack_tag('stimulus-bundle') %>
1510

1611
<%= csrf_meta_tags %>
1712
</head>
@@ -23,5 +18,9 @@
2318
</div>
2419

2520
<%= react_component "Footer" %>
21+
22+
<%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
23+
<%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
2624
</body>
2725
</html>
26+
File renamed without changes.

‎client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx‎ renamed to ‎client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import SelectLanguage from 'libs/i18n/selectLanguage';
1010
import { defaultMessages, defaultLocale } from 'libs/i18n/default';
1111
import { translations } from 'libs/i18n/translations';
1212

13-
import CommentForm from '../CommentBox/CommentForm/CommentForm';
14-
import CommentList from '../CommentBox/CommentList/CommentList';
15-
import css from './SimpleCommentScreen.module.scss';
13+
import CommentForm from '../../CommentBox/CommentForm/CommentForm';
14+
import CommentList from '../../CommentBox/CommentList/CommentList';
15+
import css from '../SimpleCommentScreen.module.scss';
1616

1717
class SimpleCommentScreen extends BaseComponent {
1818
constructor(props) {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /