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 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 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 diff --git a/.gitignore b/.gitignore index 968086ec2..5eb4e1354 100644 --- 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 index 90a931b08..20453bbe6 100644 --- 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 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 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..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,5 +18,9 @@ <%= 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/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 95% rename from client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx rename to client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx index 2b5c23f06..dd382d567 100644 --- a/client/app/bundles/comments/components/SimpleCommentScreen/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 new file mode 100644 index 000000000..a8ea13bfb --- /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/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, 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..bc32effaf 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"; 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 diff --git a/client/app/packs/stores-registration.js b/client/app/packs/stores-registration.js new file mode 100644 index 000000000..435653379 --- /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, +}); 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']