RubyGems - react_on_rails - Versions diffs - 15.0.0.rc.2 → 16.0.1.rc.0 - Mend

react_on_rails 15.0.0.rc.2 → 16.0.1.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js CHANGED Viewed

@@ -1,8 +1 @@
-import ReactOnRails from 'react-on-rails';
-import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
-// This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
-  HelloWorld,
-});
+// Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packs

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.client.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.client.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
+interface HelloWorldProps {
+  name: string;
+}
+const HelloWorld: React.FC<HelloWorldProps> = (props) => {
+  const [name, setName] = useState(props.name);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css ADDED Viewed

@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.server.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.server.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt CHANGED Viewed

@@ -1,2 +1,2 @@
 <h1>Hello World</h1>
-<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: false) %>
+<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: true) %>

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb CHANGED Viewed

@@ -3,8 +3,10 @@
   <head>
     <title>ReactOnRailsWithShakapacker</title>
     <%= csrf_meta_tags %>
-    <%= javascript_pack_tag 'hello-world-bundle' %>
-    <%= stylesheet_pack_tag 'hello-world-bundle' %>
+    <!-- Empty pack tags - React on Rails injects component CSS/JS here -->
+    <%= stylesheet_pack_tag %>
+    <%= javascript_pack_tag %>
   </head>
   <body>

data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt CHANGED Viewed

@@ -11,12 +11,15 @@ module.exports = function (api) {
         '@babel/preset-react',
         {
           development: !isProductionEnv,
-          useBuiltIns: true
+          useBuiltIns: true,
+          runtime: 'automatic'
         }
       ]
     ].filter(Boolean),
     plugins: [
-      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      // Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
+      // This prevents React Refresh from trying to connect when using static compilation
+      !isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
       isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
         {
           removeImport: true

data/lib/generators/react_on_rails/templates/base/base/bin/dev ADDED Viewed

@@ -0,0 +1,34 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+# ReactOnRails Development Server
+#
+# This script provides a simple interface to the ReactOnRails development
+# server management. The core logic is implemented in ReactOnRails::Dev
+# classes for better maintainability and testing.
+#
+# Each command uses a specific Procfile for process management:
+# - bin/dev (default/hmr): Uses Procfile.dev
+# - bin/dev static: Uses Procfile.dev-static-assets
+# - bin/dev prod: Uses Procfile.dev-prod-assets
+#
+# To customize development environment:
+# 1. Edit the appropriate Procfile to modify which processes run
+# 2. Modify this script for project-specific command-line behavior
+# 3. Extend ReactOnRails::Dev classes in your Rails app for advanced customization
+# 4. Use classes directly: ReactOnRails::Dev::ServerManager.start(:development, "Custom.procfile")
+require "bundler/setup"
+require "react_on_rails/dev"
+# Default route configuration
+# This is set by the ReactOnRails installer to point to your generated component.
+# Change this to your preferred default route, or pass --route=<route> to override.
+DEFAULT_ROUTE = "hello_world"
+# Main execution
+# Add the default route to ARGV if no --route option is provided
+argv_with_defaults = ARGV.dup
+argv_with_defaults.push("--route", DEFAULT_ROUTE) unless argv_with_defaults.any? { |arg| arg.start_with?("--route") }
+ReactOnRails::Dev::ServerManager.run_from_command_line(argv_with_defaults)

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt CHANGED Viewed

@@ -20,7 +20,7 @@ ReactOnRails.configure do |config|
   #
   # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   #
-  # with rspec then this controls what yarn command is run
+  # with rspec then this controls what npm command is run
   # to automatically refresh your webpack assets on every test run.
   #
   # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
@@ -49,10 +49,10 @@ ReactOnRails.configure do |config|
   ################################################################################
   # `components_subdirectory`  is the name of the matching directories that contain automatically registered components
   # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
-  # config.components_subdirectory = "ror_components"
+  config.components_subdirectory = "ror_components"
   #
   # For automated component registry, `render_component` view helper method tries to load bundle for component from
   # generated directory. default is false, you can pass option at the time of individual usage or update the default
   # in the following line
-  config.auto_load_bundle = false
+  config.auto_load_bundle = true
 end

data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml CHANGED Viewed

@@ -1,43 +1,109 @@
 # Note: You must restart bin/shakapacker-dev-server for changes to take effect
+# This file contains the defaults used by shakapacker.
 default: &default
   source_path: app/javascript
+  # You can have a subdirectory of the source_path, like 'packs' (recommended).
+  # Alternatively, you can use '/' to use the whole source_path directory.
+  # Notice that this is a relative path to source_path
   source_entry_path: packs
+  # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
+  # You cannot set this option to true if you set source_entry_path to '/'
+  nested_entries: true
+  #  While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
+  #  conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
+  #  consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
+  #  css_extract_ignore_order_warnings to true
+  css_extract_ignore_order_warnings: false
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/shakapacker
   webpack_compile_output: true
+  # See https://github.com/shakacode/shakapacker#deployment
+  shakapacker_precompile: true
-  # Additional paths webpack should lookup modules
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'
+  # Raises an error if there is a mismatch in the shakapacker gem and npm package being used
+  ensure_consistent_versioning: true
+  # Select whether the compiler will use SHA digest ('digest' option) or most recent modified timestamp ('mtime') to determine freshness
+  compiler_strategy: digest
+  # Select whether the compiler will always use a content hash and not just in production
+  # Don't use contentHash except for production for performance
+  # https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+  useContentHash: false
+  # Setting the asset host here will override Rails.application.config.asset_host.
+  # Here, you can set different asset_host per environment. Note that
+  # SHAKAPACKER_ASSET_HOST will override both configurations.
+  # asset_host: custom-path
+  # Utilizing webpack-subresource-integrity plugin, will generate integrity hashes for all entries in manifest.json
+  # https://github.com/waysact/webpack-subresource-integrity/tree/main/webpack-subresource-integrity
+  integrity:
+    enabled: false
+    # Which cryptographic function(s) to use, for generating the integrity hash(es). Default sha-384. Other possible values sha256, sha512
+    hash_functions: ["sha384"]
+    # Default "anonymous". Other possible value "use-credentials"
+    # https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#cross-origin_resource_sharing_and_subresource_integrity
+    cross_origin: "anonymous"
 development:
   <<: *default
-  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-static
-  compile: false
+  compile: true
+  compiler_strategy: mtime
   # Reference: https://webpack.js.org/configuration/dev-server/
+  # Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
   dev_server:
-    https: false
+    # For running dev server with https, set `server: https`.
+    # server: https
     host: localhost
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
+    # Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
     hmr: true
+    # If HMR is on, CSS will be inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-css-extract-plugin is a required dependency in both cases.
+    inline_css: true
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
       overlay: true
       # May also be a string
       # webSocketURL:
-      #  hostname: "0.0.0.0"
-      #  pathname: "/ws"
+      #  hostname: '0.0.0.0'
+      #  pathname: '/ws'
       #  port: 8080
+    # Should we use gzip compression?
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    allowed_hosts: ['localhost']
+    allowed_hosts: 'auto'
+    # Shows progress and colorizes output of bin/shakapacker[-dev-server]
     pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
@@ -58,5 +124,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
+  # Use content hash for naming assets. Cannot be overridden in production.
+  useContentHash: true
   # Cache manifest.json for performance
   cache_manifest: true

data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt CHANGED Viewed

@@ -14,4 +14,4 @@ const commonOptions = {
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
 const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
-module.exports = commonWebpackConfig;
+module.exports = commonWebpackConfig;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt CHANGED Viewed

@@ -2,20 +2,20 @@
 const { devServer, inliningCss } = require('shakapacker');
-const webpackConfig = require('./webpackConfig');
+const generateWebpackConfigs = require('./generateWebpackConfigs');
 const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
-  // plugins
-  if (inliningCss) {
-    // Note, when this is run, we're building the server and client bundles in separate processes.
-    // Thus, this plugin is not applied to the server bundle.
+  // React Refresh (Fast Refresh) setup - only when webpack-dev-server is running (HMR mode)
+  // This matches the condition in generateWebpackConfigs.js and babel.config.js
+  if (process.env.WEBPACK_SERVE) {
     // eslint-disable-next-line global-require
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
     clientWebpackConfig.plugins.push(
-      new ReactRefreshWebpackPlugin({}),
+      new ReactRefreshWebpackPlugin({
+        // Use default overlay configuration for better compatibility
+      }),
     );
   }
 };
-module.exports = webpackConfig(developmentEnvOnly);
+module.exports = generateWebpackConfigs(developmentEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt CHANGED Viewed

@@ -1,9 +1,9 @@
 <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js") %>
-const webpackConfig = require('./webpackConfig');
+const generateWebpackConfigs = require('./generateWebpackConfigs');
 const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
   // place any code here that is for production only
 };
-module.exports = webpackConfig(productionEnvOnly);
+module.exports = generateWebpackConfigs(productionEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt CHANGED Viewed

@@ -1,9 +1,9 @@
 <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/test.js") %>
-const webpackConfig = require('./webpackConfig')
+const generateWebpackConfigs = require('./generateWebpackConfigs')
 const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
   // place any code here that is for test only
 }
-module.exports = webpackConfig(testOnly)
+module.exports = generateWebpackConfigs(testOnly)

data/lib/generators/react_on_rails/templates/dev_tests/spec/system/hello_world_spec.rb CHANGED Viewed

@@ -12,8 +12,6 @@ describe "Hello World", :js do
   end
 end
-private
 def name_input
   page.first("input")
 end

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/* eslint-disable import/prefer-default-export */
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+// Action interface
+export interface UpdateNameAction {
+  type: typeof HELLO_WORLD_NAME_UPDATE;
+  text: string;
+}
+// Union type for all actions
+export type HelloWorldAction = UpdateNameAction;
+// Action creator with proper TypeScript typing
+export const updateName = (text: string): UpdateNameAction => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import * as style from './HelloWorld.module.css';
@@ -18,9 +17,4 @@ const HelloWorld = ({ name, updateName }) => (
   </div>
 );
-HelloWorld.propTypes = {
-  name: PropTypes.string.isRequired,
-  updateName: PropTypes.func.isRequired,
-};
 export default HelloWorld;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css ADDED Viewed

@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as style from './HelloWorld.module.css';
+import type { PropsFromRedux } from '../containers/HelloWorldContainer';
+// Component props are inferred from Redux container
+type HelloWorldProps = PropsFromRedux;
+const HelloWorld: React.FC<HelloWorldProps> = ({ name, updateName }) => (
+  <div>
+    <h3>
+      Hello,
+      {name}!
+    </h3>
+    <hr />
+    <form>
+      <label className={style.bright} htmlFor="name">
+        Say hello to:
+        <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
+      </label>
+    </form>
+  </div>
+);
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/constants/helloWorldConstants.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE' as const;
+// Action type for TypeScript
+export type HelloWorldActionType = typeof HELLO_WORLD_NAME_UPDATE;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.ts ADDED Viewed

@@ -0,0 +1,20 @@
+// Simple example of a React "smart" component
+import { connect, ConnectedProps } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state: HelloWorldState) => ({ name: state.name });
+// Create the connector
+const connector = connect(mapStateToProps, actions);
+// Infer the props from Redux state and actions
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connector(HelloWorld);

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+import { HelloWorldAction } from '../actions/helloWorldActionCreators';
+// State interface
+export interface HelloWorldState {
+  name: string;
+}
+// Individual reducer with TypeScript types
+const name = (state: string = '', action: HelloWorldAction): string => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
+    default:
+      return state;
+  }
+};
+const helloWorldReducer = combineReducers<HelloWorldState>({ name });
+export default helloWorldReducer;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.client.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import { useMemo, type FC } from 'react';
+import { Provider } from 'react-redux';
+import configureStore, { type RailsProps } from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+// Props interface matches what Rails will pass from the controller
+interface HelloWorldAppProps extends RailsProps {}
+// See documentation for https://github.com/reactjs/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+const HelloWorldApp: FC<HelloWorldAppProps> = (props) => {
+  const store = useMemo(() => configureStore(props), [props]);
+  return (
+    <Provider store={store}>
+      <HelloWorldContainer />
+    </Provider>
+  );
+};
+export default HelloWorldApp;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import HelloWorldApp from './HelloWorldApp.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+export default HelloWorldApp;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import HelloWorldApp from './HelloWorldApp.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+export default HelloWorldApp;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { createStore } from 'redux';
+import type { Store, PreloadedState } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
+// Rails props interface - customize based on your Rails controller
+export interface RailsProps {
+  name: string;
+  [key: string]: any; // Allow additional props from Rails
+}
+// Store type
+export type HelloWorldStore = Store<HelloWorldState>;
+const configureStore = (railsProps: RailsProps): HelloWorldStore =>
+  createStore(helloWorldReducer, railsProps as PreloadedState<HelloWorldState>);
+export default configureStore;

data/lib/react_on_rails/configuration.rb CHANGED Viewed

@@ -46,8 +46,8 @@ module ReactOnRails
       components_subdirectory: nil,
       make_generated_server_bundle_the_entrypoint: false,
       defer_generated_component_packs: false,
-      # forces the loading of React components
-      force_load: true,
+      # React on Rails Pro (licensed) feature - enables immediate hydration of React components
+      immediate_hydration: false,
       # Maximum time in milliseconds to wait for client-side component registration after page load.
       # If exceeded, an error will be thrown for server-side rendered components not registered on the client.
       # Set to 0 to disable the timeout and wait indefinitely for component registration.
@@ -67,7 +67,7 @@ module ReactOnRails
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
+                  :generated_component_packs_loading_strategy, :immediate_hydration, :rsc_bundle_js_file,
                   :react_client_manifest_file, :react_server_client_manifest_file, :component_registry_timeout
     # rubocop:disable Metrics/AbcSize
@@ -83,7 +83,7 @@ module ReactOnRails
                    same_bundle_for_client_and_server: nil,
                    i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
-                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
+                   components_subdirectory: nil, auto_load_bundle: nil, immediate_hydration: nil,
                    rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_client_manifest_file: nil,
                    component_registry_timeout: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
@@ -128,7 +128,7 @@ module ReactOnRails
       self.auto_load_bundle = auto_load_bundle
       self.make_generated_server_bundle_the_entrypoint = make_generated_server_bundle_the_entrypoint
       self.defer_generated_component_packs = defer_generated_component_packs
-      self.force_load = force_load
+      self.immediate_hydration = immediate_hydration
       self.generated_component_packs_loading_strategy = generated_component_packs_loading_strategy
     end
     # rubocop:enable Metrics/AbcSize
@@ -175,7 +175,7 @@ module ReactOnRails
       end
       msg = <<~MSG
-        ReactOnRails: Your current version of #{ReactOnRails::PackerUtils.packer_type.upcase_first} \
+        ReactOnRails: Your current version of shakapacker \
         does not support async script loading,  which may cause performance issues. Please either:
         1. Use :sync or :defer loading strategy instead of :async
         2. Upgrade to Shakapacker v8.2.0 or above to enable async script loading
@@ -284,8 +284,10 @@ module ReactOnRails
       if ReactOnRails::PackerUtils.using_packer?
         packer_public_output_path = ReactOnRails::PackerUtils.packer_public_output_path
         # rubocop:disable Layout/LineLength
+        packer_name = ReactOnRails::PackerUtils.packer_type&.upcase_first
         Rails.logger.warn "Error configuring config/initializers/react_on_rails. Define neither the generated_assets_dirs nor " \
-                          "the generated_assets_dir when using #{ReactOnRails::PackerUtils.packer_type.upcase_first}. This is defined by " \
+                          "the generated_assets_dir when using #{packer_name}. This is defined by " \
                           "public_output_path specified in #{ReactOnRails::PackerUtils.packer_type}.yml = #{packer_public_output_path}."
         # rubocop:enable Layout/LineLength
         return
@@ -331,15 +333,17 @@ module ReactOnRails
     end
     def compile_command_conflict_message
+      packer_name = ReactOnRails::PackerUtils.packer_type.upcase_first
+      packer_type = ReactOnRails::PackerUtils.packer_type
       <<~MSG
-        React on Rails and #{ReactOnRails::PackerUtils.packer_type.upcase_first} error in configuration!
+        React on Rails and #{packer_name} error in configuration!
         In order to use config/react_on_rails.rb config.build_production_command,
-        you must edit config/#{ReactOnRails::PackerUtils.packer_type}.yml to include this value in the default configuration:
-        '#{ReactOnRails::PackerUtils.packer_type}_precompile: false'
+        you must edit config/#{packer_type}.yml to include this value in the default configuration:
+        '#{packer_type}_precompile: false'
         Alternatively, remove the config/react_on_rails.rb config.build_production_command and the
-        default bin/#{ReactOnRails::PackerUtils.packer_type} script will be used for assets:precompile.
+        default bin/#{packer_type} script will be used for assets:precompile.
       MSG
     end