From 9721c36aebac467e19301c868056ac6d0cfab112 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 15:22:03 +0300 Subject: [PATCH 01/19] feat: migrate to React on Rails v16 auto-registration - Configure auto-registration with components_subdirectory and auto_load_bundle - Add nested_entries to shakapacker.yml for v16 compatibility - Restructure components into ComponentName/ror_components/ directories - Move App, RouterApp, NavigationBarApp, SimpleCommentScreen, Footer components - Handle RescriptShow component with compiled JS copy - Create stores-registration.js for manual store registration - Update server-bundle.js to import stores and generated bundle - Remove client-bundle.js (manual registration no longer needed) - Update .gitignore for generated packs - Successfully generate auto-registration packs --- Procfile.dev | 4 +- .../Footer/{ => ror_components}/Footer.jsx | 0 .../SimpleCommentScreen.jsx | 0 .../ror_components/RescriptShow.jsx | 129 ++++++++++++++++++ .../startup/{ => App/ror_components}/App.jsx | 2 +- .../ror_components}/NavigationBarApp.jsx | 6 +- .../ror_components/RouterApp.client.jsx} | 4 +- .../ror_components/RouterApp.server.jsx} | 4 +- client/app/packs/client-bundle.js | 35 ----- client/app/packs/server-bundle.js | 28 +--- client/app/packs/stores-registration.js | 9 ++ config/initializers/react_on_rails.rb | 5 +- config/shakapacker.yml | 1 + 13 files changed, 156 insertions(+), 71 deletions(-) rename client/app/bundles/comments/components/Footer/{ => ror_components}/Footer.jsx (100%) rename client/app/bundles/comments/components/SimpleCommentScreen/{ => ror_components}/SimpleCommentScreen.jsx (100%) create mode 100644 client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx rename client/app/bundles/comments/startup/{ => App/ror_components}/App.jsx (84%) rename client/app/bundles/comments/startup/{ => NavigationBarApp/ror_components}/NavigationBarApp.jsx (86%) rename client/app/bundles/comments/startup/{ClientRouterApp.jsx => RouterApp/ror_components/RouterApp.client.jsx} (83%) rename client/app/bundles/comments/startup/{ServerRouterApp.jsx => RouterApp/ror_components/RouterApp.server.jsx} (93%) delete mode 100644 client/app/packs/client-bundle.js create mode 100644 client/app/packs/stores-registration.js diff --git a/Procfile.dev b/Procfile.dev index 90a931b08..f81f1f5d7 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,7 +1,7 @@ # Procfile for development using HMR # You can run these commands in separate shells rescript: yarn res:dev -redis: redis-server -rails: bin/rails s -p 3000 +# redis: redis-server # Commented out - Redis is already running system-wide +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/client/app/bundles/comments/components/Footer/Footer.jsx b/client/app/bundles/comments/components/Footer/ror_components/Footer.jsx similarity index 100% rename from client/app/bundles/comments/components/Footer/Footer.jsx rename to client/app/bundles/comments/components/Footer/ror_components/Footer.jsx diff --git a/client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx b/client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx similarity index 100% rename from client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx rename to client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx diff --git a/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx b/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx new file mode 100644 index 000000000..83a687f7f --- /dev/null +++ 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.jsx b/client/app/bundles/comments/startup/App/ror_components/App.jsx similarity index 84% rename from client/app/bundles/comments/startup/App.jsx rename to client/app/bundles/comments/startup/App/ror_components/App.jsx index b22891cc0..fed57772a 100644 --- a/client/app/bundles/comments/startup/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.jsx b/client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx similarity index 86% rename from client/app/bundles/comments/startup/NavigationBarApp.jsx rename to client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx index d5c4b61f1..2afd10acc 100644 --- a/client/app/bundles/comments/startup/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/ClientRouterApp.jsx b/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx similarity index 83% rename from client/app/bundles/comments/startup/ClientRouterApp.jsx rename to client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx index 90b80785a..057984b15 100644 --- a/client/app/bundles/comments/startup/ClientRouterApp.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/ServerRouterApp.jsx b/client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx similarity index 93% rename from client/app/bundles/comments/startup/ServerRouterApp.jsx rename to client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx index 41ec43f18..4e6fc8b92 100644 --- a/client/app/bundles/comments/startup/ServerRouterApp.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/packs/client-bundle.js b/client/app/packs/client-bundle.js deleted file mode 100644 index 2675009aa..000000000 --- a/client/app/packs/client-bundle.js +++ /dev/null @@ -1,35 +0,0 @@ -import ReactOnRails from 'react-on-rails'; -// eslint-disable-next-line import/no-webpack-loader-syntax -import 'expose-loader?exposes=$,jQuery!jquery'; -import 'jquery-ujs'; - -import App from '../bundles/comments/startup/App'; -import RouterApp from '../bundles/comments/startup/ClientRouterApp'; -import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen'; -import routerCommentsStore from '../bundles/comments/store/routerCommentsStore'; -import commentsStore from '../bundles/comments/store/commentsStore'; -import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp'; -import Footer from '../bundles/comments/components/Footer/Footer'; -import RescriptShow from '../bundles/comments/rescript/ReScriptShow.bs.js'; - -import '../assets/styles/application'; - -ReactOnRails.setOptions({ - // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef - // process.env.TRACE_TURBOLINKS -> error: development is not defined - traceTurbolinks: true, -}); - -ReactOnRails.register({ - App, - RouterApp, - NavigationBarApp, - SimpleCommentScreen, - Footer, - RescriptShow, -}); - -ReactOnRails.registerStore({ - routerCommentsStore, - commentsStore, -}); diff --git a/client/app/packs/server-bundle.js b/client/app/packs/server-bundle.js index 96b56491e..fa558b605 100644 --- a/client/app/packs/server-bundle.js +++ b/client/app/packs/server-bundle.js @@ -1,25 +1,5 @@ -// Example of React + Redux -import ReactOnRails from 'react-on-rails'; +// Import stores registration +import './stores-registration'; -import App from '../bundles/comments/startup/App'; -import RouterApp from '../bundles/comments/startup/ServerRouterApp'; -import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen'; -import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp'; -import routerCommentsStore from '../bundles/comments/store/routerCommentsStore'; -import commentsStore from '../bundles/comments/store/commentsStore'; -import Footer from '../bundles/comments/components/Footer/Footer'; -import RescriptShow from '../bundles/comments/rescript/ReScriptShow.bs.js'; - -ReactOnRails.register({ - App, - RouterApp, - NavigationBarApp, - SimpleCommentScreen, - Footer, - RescriptShow, -}); - -ReactOnRails.registerStore({ - routerCommentsStore, - commentsStore, -}); +// import statement added by react_on_rails:generate_packs rake task +import "./../generated/server-bundle-generated.js"; \ No newline at end of file diff --git a/client/app/packs/stores-registration.js b/client/app/packs/stores-registration.js new file mode 100644 index 000000000..8835fb668 --- /dev/null +++ b/client/app/packs/stores-registration.js @@ -0,0 +1,9 @@ +import ReactOnRails from 'react-on-rails'; +import routerCommentsStore from '../bundles/comments/store/routerCommentsStore'; +import commentsStore from '../bundles/comments/store/commentsStore'; + +// Stores must still be manually registered since they're not components +ReactOnRails.registerStore({ + routerCommentsStore, + commentsStore, +}); \ No newline at end of file diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb index da06ed881..2a1facebf 100644 --- a/config/initializers/react_on_rails.rb +++ b/config/initializers/react_on_rails.rb @@ -2,8 +2,9 @@ # Shown below are the defaults for configuration ReactOnRails.configure do |config| - # Define the files for we need to check for webpack compilation when running tests - config.webpack_generated_files = %w[client-bundle.js server-bundle.js] + # Auto-registration configuration for v16 + config.components_subdirectory = "ror_components" + config.auto_load_bundle = true config.build_test_command = "RAILS_ENV=test bin/shakapacker" config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker" diff --git a/config/shakapacker.yml b/config/shakapacker.yml index 7ab9688a4..ebc5e4c5f 100644 --- a/config/shakapacker.yml +++ b/config/shakapacker.yml @@ -7,6 +7,7 @@ default: &default public_output_path: packs cache_path: tmp/shakapacker webpack_compile_output: true + nested_entries: true # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] From d12c40dbccaa51dcc2e2019baaa4f76eede34bc3 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 17:30:33 +0300 Subject: [PATCH 02/19] fix import paths --- .../ror_components/SimpleCommentScreen.jsx | 6 +++--- .../RescriptShow/ror_components/RescriptShow.jsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx b/client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx index 2b5c23f06..dd382d567 100644 --- 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 index 83a687f7f..a8ea13bfb 100644 --- a/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx +++ b/client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx @@ -1,12 +1,12 @@ // 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 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) { From 58545521026cd2c8fd2945b9a2422cc9436163a2 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 18:33:11 +0300 Subject: [PATCH 03/19] feat: complete React on Rails v16 auto-registration migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Enable auto_load_bundle for automatic component discovery and loading - Update layouts to use append pack tag pattern for v16 compatibility - Remove manual component registration from stimulus-bundle.js - Maintain hybrid approach supporting both auto-registered React components and Stimulus controllers - Auto-registration now working: pages load only their specific component bundles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- app/views/layouts/application.html.erb | 13 ++++++------- app/views/layouts/stimulus_layout.html.erb | 14 ++++++-------- client/app/packs/stimulus-bundle.js | 9 ++------- 3 files changed, 14 insertions(+), 22 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 45dbfa272..a79a30a27 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -5,13 +5,9 @@ RailsReactTutorial - <%= 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 %> @@ -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) %> + <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 92bf77d82..b76b29ca5 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,15 +5,10 @@ RailsReactTutorial - <%= stylesheet_pack_tag('client-bundle', - media: 'all', - 'data-turbolinks-track': true) %> - - <%= javascript_pack_tag('stimulus-bundle', - 'data-turbolinks-track': true, - defer: true) %> - <%= csrf_meta_tags %> + + <%= append_stylesheet_pack_tag('stimulus-bundle') %> + <%= append_javascript_pack_tag('stimulus-bundle') %> <%= react_component "NavigationBarApp" %> @@ -23,5 +18,8 @@ <%= react_component "Footer" %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> diff --git a/client/app/packs/stimulus-bundle.js b/client/app/packs/stimulus-bundle.js index b3290cfda..a11ccf149 100644 --- a/client/app/packs/stimulus-bundle.js +++ b/client/app/packs/stimulus-bundle.js @@ -5,9 +5,6 @@ import { Turbo } from '@hotwired/turbo-rails'; // eslint-disable-next-line no-unused-vars import controllers from '../controllers'; -import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp'; -import Footer from '../bundles/comments/components/Footer/Footer'; - import '../assets/styles/application'; Turbo.session.drive = false; @@ -18,7 +15,5 @@ ReactOnRails.setOptions({ traceTurbolinks: true, }); -ReactOnRails.register({ - NavigationBarApp, - Footer, -}); +// Components are now auto-registered via ror_components directories +// No need for manual registration From 6a2e29b7ae771f70d8989133ffeb1be6e33f3fc2 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:08:28 +0300 Subject: [PATCH 04/19] revert commenting out rails server --- Procfile.dev | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Procfile.dev b/Procfile.dev index f81f1f5d7..20453bbe6 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,7 +1,7 @@ # Procfile for development using HMR # You can run these commands in separate shells rescript: yarn res:dev -# redis: redis-server # Commented out - Redis is already running system-wide +redis: redis-server 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 From 71a60b2951034a9cf426b2944ce2101a8fd8e02d Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:09:54 +0300 Subject: [PATCH 05/19] add ror generated packs to .gitignore --- .gitignore | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 968086ec2..3c7ac9074 100644 --- a/.gitignore +++ b/.gitignore @@ -57,5 +57,5 @@ 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/** From 027bfd796529bf27d971e2aa7c012bceba5c83a1 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:35:32 +0300 Subject: [PATCH 06/19] fix: add React on Rails pack generation to CI workflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add bundle exec rails react_on_rails:generate_packs step to JS CI - Resolves missing server-bundle-generated.js error in CI builds - Generated files are in .gitignore but needed for webpack builds 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .github/workflows/js_test.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/js_test.yml b/.github/workflows/js_test.yml index b88d4ba18..ba48c5371 100644 --- 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 From a9c10e9e12689de6e47a1b9a50f7bea5d46b314a Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:38:34 +0300 Subject: [PATCH 07/19] fix: update import paths in serverRegistration.jsx for React on Rails v16 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Update imports to use new ror_components directory structure - Fix paths for App, RouterApp, SimpleCommentScreen, NavigationBarApp, Footer - Use RouterApp.server for server-side registration - Resolves ESLint import/no-unresolved errors in CI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../bundles/comments/startup/serverRegistration.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/app/bundles/comments/startup/serverRegistration.jsx b/client/app/bundles/comments/startup/serverRegistration.jsx index 87eed6a2d..11e0fd40e 100644 --- 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, From 0d04fa2ed2c92f916c4f48d601860cf7f9720f93 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:41:49 +0300 Subject: [PATCH 08/19] fix: add React on Rails pack generation to Rspec CI workflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add bundle exec rails react_on_rails:generate_packs step to Rspec CI - Resolves missing server-bundle-generated.js error in Rspec builds - Required for webpack to find generated component registration files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .github/workflows/rspec_test.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/rspec_test.yml b/.github/workflows/rspec_test.yml index ff3a60228..4d5625ec3 100644 --- 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 From fe066fb94dfcda50c3d56331584c5f744169b35c Mon Sep 17 00:00:00 2001 From: ihabadham Date: Thu, 18 Sep 2025 19:50:02 +0300 Subject: [PATCH 09/19] fix: add React on Rails pack generation to Lint CI workflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add bundle exec rails react_on_rails:generate_packs step to Lint CI - Resolves ESLint import/no-unresolved error for server-bundle-generated.js - Required for linting to find generated component registration files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .github/workflows/lint_test.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/lint_test.yml b/.github/workflows/lint_test.yml index 48dea7f32..777aaa2b0 100644 --- 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 From 9b9bb869f364258ff76f4b37f4b45d72f9a68a28 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Tue, 23 Sep 2025 16:27:36 +0300 Subject: [PATCH 10/19] ignore .claude --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 3c7ac9074..5eb4e1354 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,5 @@ client/app/bundles/comments/rescript/**/*.bs.js # Generated React on Rails packs **/generated/** + +.claude/ From d6d123e17f7b6f72260f432f57f53dd56af55b86 Mon Sep 17 00:00:00 2001 From: ihabadham Date: Wed, 24 Sep 2025 16:18:40 +0300 Subject: [PATCH 11/19] fix: add missing trailing newlines to JS files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add trailing newlines to stores-registration.js and server-bundle.js to comply with code style standards. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- client/app/packs/server-bundle.js | 2 +- client/app/packs/stores-registration.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/app/packs/server-bundle.js b/client/app/packs/server-bundle.js index fa558b605..bc32effaf 100644 --- a/client/app/packs/server-bundle.js +++ b/client/app/packs/server-bundle.js @@ -2,4 +2,4 @@ import './stores-registration'; // import statement added by react_on_rails:generate_packs rake task -import "./../generated/server-bundle-generated.js"; \ No newline at end of file +import "./../generated/server-bundle-generated.js"; diff --git a/client/app/packs/stores-registration.js b/client/app/packs/stores-registration.js index 8835fb668..435653379 100644 --- a/client/app/packs/stores-registration.js +++ b/client/app/packs/stores-registration.js @@ -6,4 +6,4 @@ import commentsStore from '../bundles/comments/store/commentsStore'; ReactOnRails.registerStore({ routerCommentsStore, commentsStore, -}); \ No newline at end of file +}); From 81f84aabad635c02734788bac3e9c64eac0a9188 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 27 Sep 2025 16:38:35 -1000 Subject: [PATCH 12/19] fix: move JavaScript pack tags to head element to resolve Turbo warning - Move stylesheet_pack_tag and javascript_pack_tag to head element - Prevents Turbo warning about scripts being loaded from body - Scripts are still deferred to maintain performance - Fixes browser console warning about script evaluation on page changes --- app/views/layouts/application.html.erb | 6 ++-- app/views/layouts/stimulus_layout.html.erb | 6 ++-- pr-review-command.md | 34 ++++++++++++++++++++++ 3 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 pr-review-command.md diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index a79a30a27..abbfa9e16 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,6 +9,9 @@ <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> + <%= csrf_meta_tags %> @@ -20,9 +23,6 @@ <%= react_component "Footer" %> - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index b76b29ca5..059ecee14 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -9,6 +9,9 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= react_component "NavigationBarApp" %> @@ -18,8 +21,5 @@ <%= react_component "Footer" %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> diff --git a/pr-review-command.md b/pr-review-command.md new file mode 100644 index 000000000..7ae3b0008 --- /dev/null +++ b/pr-review-command.md @@ -0,0 +1,34 @@ +# Claude PR Review Command + +Add this to your ~/.claude/CLAUDE.md file: + +## PR Review Command + +When asked to review a PR, perform a comprehensive review following these steps: + +1. **Fetch PR Details**: Use `gh pr view --json title,body,state,commits,files,additions,deletions,changedFiles` + +2. **Analyze Changes**: + - Review the diff with `gh pr diff ` + - Check for breaking changes + - Verify consistency with existing code patterns + - Check for security issues + - Review test coverage + +3. **Provide Structured Review**: + - **Summary**: Brief overview of changes + - **Strengths**: What's done well + - **Concerns**: Potential issues or risks + - **Breaking Changes**: Any backwards compatibility issues + - **Security**: Any security considerations + - **Performance**: Performance implications + - **Code Quality**: Style, patterns, best practices + - **Testing**: Test coverage and quality + - **Documentation**: Are changes documented? + - **Suggestions**: Specific improvements + - **Risk Level**: Low/Medium/High + - **Recommendation**: Approve/Request Changes/Needs Discussion + +4. **Check CI Status**: `gh pr checks ` + +5. **Review Comments**: Check existing review comments if any \ No newline at end of file From 2547b80f8a47f09fc2dda859ce189c6820a0c2e7 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 27 Sep 2025 16:51:18 -1000 Subject: [PATCH 13/19] fix: resolve Shakapacker append/pack tag ordering issue - Keep pack tags at end of body to allow react_component append calls - Add data-turbo-suppress-warning to body tags to suppress Turbo warning - This fixes CI failures while maintaining Shakapacker requirements - React components can now properly append their JavaScript packs --- app/views/layouts/application.html.erb | 8 ++++---- app/views/layouts/stimulus_layout.html.erb | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index abbfa9e16..344c2ca6e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,12 +9,9 @@ <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - <%= csrf_meta_tags %> - + <%= react_component "NavigationBarApp" %>
@@ -23,6 +20,9 @@ <%= react_component "Footer" %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> + <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 059ecee14..92bbdc62c 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -9,11 +9,8 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - + <%= react_component "NavigationBarApp" %>
@@ -21,5 +18,8 @@
<%= react_component "Footer" %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> From 9d2bf5efdfe2a4e9dfcff89b4cd40a1386c62fbe Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 27 Sep 2025 16:52:04 -1000 Subject: [PATCH 14/19] Revert "fix: resolve Shakapacker append/pack tag ordering issue" This reverts commit 23b25b31135bec6d35366cc4169ba82af1b3d86e. --- app/views/layouts/application.html.erb | 8 ++++---- app/views/layouts/stimulus_layout.html.erb | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 344c2ca6e..abbfa9e16 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,9 +9,12 @@ <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> + <%= csrf_meta_tags %> - + <%= react_component "NavigationBarApp" %>
@@ -20,9 +23,6 @@ <%= react_component "Footer" %> - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 92bbdc62c..059ecee14 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -9,8 +9,11 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - + <%= react_component "NavigationBarApp" %>
@@ -18,8 +21,5 @@
<%= react_component "Footer" %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> From ee5bf385572e99900a190ddb9090e5d3996551df Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 27 Sep 2025 16:52:04 -1000 Subject: [PATCH 15/19] Revert "fix: move JavaScript pack tags to head element to resolve Turbo warning" This reverts commit 76f0fee140ff41b4bb0bc90e11dbbc505dae4af0. --- app/views/layouts/application.html.erb | 6 ++-- app/views/layouts/stimulus_layout.html.erb | 6 ++-- pr-review-command.md | 34 ---------------------- 3 files changed, 6 insertions(+), 40 deletions(-) delete mode 100644 pr-review-command.md diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index abbfa9e16..a79a30a27 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,9 +9,6 @@ <%= append_javascript_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stores-registration') %> - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> - <%= csrf_meta_tags %> @@ -23,6 +20,9 @@ <%= react_component "Footer" %> + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> + <%= redux_store_hydration_data %> diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 059ecee14..b76b29ca5 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -9,9 +9,6 @@ <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> <%= react_component "NavigationBarApp" %> @@ -21,5 +18,8 @@
<%= react_component "Footer" %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> diff --git a/pr-review-command.md b/pr-review-command.md deleted file mode 100644 index 7ae3b0008..000000000 --- a/pr-review-command.md +++ /dev/null @@ -1,34 +0,0 @@ -# Claude PR Review Command - -Add this to your ~/.claude/CLAUDE.md file: - -## PR Review Command - -When asked to review a PR, perform a comprehensive review following these steps: - -1. **Fetch PR Details**: Use `gh pr view --json title,body,state,commits,files,additions,deletions,changedFiles` - -2. **Analyze Changes**: - - Review the diff with `gh pr diff ` - - Check for breaking changes - - Verify consistency with existing code patterns - - Check for security issues - - Review test coverage - -3. **Provide Structured Review**: - - **Summary**: Brief overview of changes - - **Strengths**: What's done well - - **Concerns**: Potential issues or risks - - **Breaking Changes**: Any backwards compatibility issues - - **Security**: Any security considerations - - **Performance**: Performance implications - - **Code Quality**: Style, patterns, best practices - - **Testing**: Test coverage and quality - - **Documentation**: Are changes documented? - - **Suggestions**: Specific improvements - - **Risk Level**: Low/Medium/High - - **Recommendation**: Approve/Request Changes/Needs Discussion - -4. **Check CI Status**: `gh pr checks ` - -5. **Review Comments**: Check existing review comments if any \ No newline at end of file From ab31233b3b08c99964ca25d3818ffd95b39c46c4 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 27 Sep 2025 16:57:53 -1000 Subject: [PATCH 16/19] docs: document Turbo warning issue for future investigation - Add TODO file explaining the root cause of Turbo warning - Document attempted solutions and why they failed - Provide potential future approaches to investigate - This is a cosmetic issue that doesn't affect functionality --- TODO_TURBO_WARNING.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 TODO_TURBO_WARNING.md diff --git a/TODO_TURBO_WARNING.md b/TODO_TURBO_WARNING.md new file mode 100644 index 000000000..235609657 --- /dev/null +++ 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 `` element instead of the ``. + +## Root Cause +Conflicting requirements between three systems: +1. **Turbo** - Wants to be loaded in `` 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/ \ No newline at end of file From 4daa2ec8ac03ae8886ea7f1c488a6d4dc58e7555 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sun, 28 Sep 2025 19:46:17 -1000 Subject: [PATCH 17/19] fix: reorder tags in stimulus_layout.html.erb for consistency - Move append_ tags before csrf_meta_tags to match application layout - Keep append_ helpers since layout uses React components - This should help with the flaky Stimulus tab test --- app/views/layouts/stimulus_layout.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index b76b29ca5..9e80519b2 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,10 +5,10 @@ RailsReactTutorial - <%= csrf_meta_tags %> - <%= append_stylesheet_pack_tag('stimulus-bundle') %> <%= append_javascript_pack_tag('stimulus-bundle') %> + + <%= csrf_meta_tags %> <%= react_component "NavigationBarApp" %> From 351824b2ec748df953a780ef94fe7f81cc9bb6cb Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sun, 28 Sep 2025 20:44:40 -1000 Subject: [PATCH 18/19] fix: restore original stimulus_layout.html.erb - Revert to using direct pack tags instead of append_ helpers - Keep client-bundle and stimulus-bundle as originally intended - This layout doesn't need the auto-registration append pattern --- app/views/layouts/stimulus_layout.html.erb | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index 9e80519b2..b3b570fe1 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,8 +5,13 @@ RailsReactTutorial - <%= append_stylesheet_pack_tag('stimulus-bundle') %> - <%= append_javascript_pack_tag('stimulus-bundle') %> + <%= stylesheet_pack_tag('client-bundle', + media: 'all', + 'data-turbolinks-track': true) %> + + <%= javascript_pack_tag('stimulus-bundle', + 'data-turbolinks-track': true, + defer: true) %> <%= csrf_meta_tags %> @@ -18,8 +23,6 @@
<%= react_component "Footer" %> - - <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> - <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> + From 58846b011eef4d5a2720222f716d11149b62fbb1 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sun, 28 Sep 2025 21:03:54 -1000 Subject: [PATCH 19/19] fix: update stimulus_layout to use auto-registration pattern - Remove reference to non-existent client-bundle - Use append_ helpers for stimulus-bundle - Add final pack tags at end of body for React components - Matches the pattern used in application.html.erb --- app/views/layouts/stimulus_layout.html.erb | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb index b3b570fe1..1c504ee9b 100644 --- a/app/views/layouts/stimulus_layout.html.erb +++ b/app/views/layouts/stimulus_layout.html.erb @@ -5,13 +5,8 @@ RailsReactTutorial - <%= 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 %> @@ -23,6 +18,9 @@ <%= react_component "Footer" %> + + <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> + <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>