Migrate to react on rails auto-registration #649
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -5,13 +5,9 @@ | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||
| <title>RailsReactTutorial</title> | ||||||
|
|
||||||
| <%= 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) %> | ||||||
|
There was a problem hiding this comment. The
Suggested change
Copilot uses AI. Check for mistakes. |
||||||
|
|
||||||
| <!-- This is a placeholder for ReactOnRails to know where to render the store props for | ||||||
| client side hydration --> | ||||||
| <%= redux_store_hydration_data %> | ||||||
|
|
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -5,13 +5,8 @@ | |||||||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||||||
| <title>RailsReactTutorial</title> | ||||||||||
|
|
||||||||||
| <%= append_stylesheet_pack_tag('stimulus-bundle') %> | ||||||||||
| <%= append_javascript_pack_tag('stimulus-bundle') %> | ||||||||||
|
|
||||||||||
| <%= csrf_meta_tags %> | ||||||||||
| </head> | ||||||||||
|
|
@@ -23,5 +18,8 @@ | |||||||||
| </div> | ||||||||||
|
|
||||||||||
| <%= react_component "Footer" %> | ||||||||||
|
|
||||||||||
| <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %> | ||||||||||
| <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %> | ||||||||||
|
There was a problem hiding this comment. The
Suggested change
Copilot uses AI. Check for mistakes. |
||||||||||
| </body> | ||||||||||
| </html> | ||||||||||
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,129 @@ | ||||||||
| // Generated by ReScript, PLEASE EDIT WITH CARE | ||||||||
|
There was a problem hiding this comment. This comment indicates this is a generated file, but it's being committed to version control. Generated files should typically be in .gitignore unless they're meant to be manually edited. Consider clarifying whether this file should be version controlled or generated during build.
Suggested change
Copilot uses AI. Check for mistakes. There was a problem hiding this comment. This comment suggests the file is auto-generated and should not be edited, but it's being added to version control in a PR. Auto-generated files should typically be excluded from version control or the warning should be removed if manual editing is expected.
Suggested change
Copilot uses AI. Check for mistakes. |
||||||||
|
|
||||||||
| 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 */ | ||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| // Compare to ./RouterApp.server.jsx | ||
|
There was a problem hiding this comment. The comment references './RouterApp.server.jsx' but the actual file appears to be located at the same directory level. Verify that this relative path is correct for the new directory structure. Copilot uses AI. Check for mistakes. |
||
| 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'; | ||
|
|
||
| function ClientRouterApp(_props) { | ||
| const store = ReactOnRails.getStore('routerCommentsStore'); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| // Compare to ./RouterApp.client.jsx | ||
|
There was a problem hiding this comment. The comment references './RouterApp.client.jsx' but the actual file appears to be located at the same directory level. Verify that this relative path is correct for the new directory structure. Copilot uses AI. Check for mistakes. |
||
| 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'; | ||
|
|
||
| function ServerRouterApp(_props, railsContext) { | ||
| const store = ReactOnRails.getStore('routerCommentsStore'); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prevent startup race: generate packs before webpack processes start
With v16 auto-registration, webpack can error if wp-client/wp-server start before packs exist. Prepend generate_packs to both webpack commands (and optionally Rails) and set HOST/PORT defaults for container/devbox access.
Based on learnings.
📝 Committable suggestion
🤖 Prompt for AI Agents