react_on_rails 15.0.0.rc.2 → 16.0.0

data/lib/react_on_rails/dev/server_manager.rb

@@ -0,0 +1,330 @@
+# frozen_string_literal: true
+
+require "English"
+require "open3"
+require "rainbow"
+
+module ReactOnRails
+  module Dev
+    class ServerManager
+      class << self
+        def start(mode = :development, procfile = nil, verbose: false)
+          case mode
+          when :production_like
+            run_production_like(_verbose: verbose)
+          when :static
+            procfile ||= "Procfile.dev-static-assets"
+            run_static_development(procfile, verbose: verbose)
+          when :development, :hmr
+            procfile ||= "Procfile.dev"
+            run_development(procfile, verbose: verbose)
+          else
+            raise ArgumentError, "Unknown mode: #{mode}"
+          end
+        end
+
+        def kill_processes
+          puts "🔪 Killing all development processes..."
+          puts ""
+
+          killed_any = kill_running_processes || cleanup_socket_files
+
+          print_kill_summary(killed_any)
+        end
+
+        def development_processes
+          {
+            "rails" => "Rails server",
+            "node.*react[-_]on[-_]rails" => "React on Rails Node processes",
+            "overmind" => "Overmind process manager",
+            "foreman" => "Foreman process manager",
+            "ruby.*puma" => "Puma server",
+            "webpack-dev-server" => "Webpack dev server",
+            "bin/shakapacker-dev-server" => "Shakapacker dev server"
+          }
+        end
+
+        def kill_running_processes
+          killed_any = false
+
+          development_processes.each do |pattern, description|
+            pids = find_process_pids(pattern)
+            next unless pids.any?
+
+            puts "   ☠️  Killing #{description} (PIDs: #{pids.join(', ')})"
+            terminate_processes(pids)
+            killed_any = true
+          end
+
+          killed_any
+        end
+
+        def find_process_pids(pattern)
+          stdout, _status = Open3.capture2("pgrep", "-f", pattern, err: File::NULL)
+          stdout.split("\n").map(&:to_i).reject { |pid| pid == Process.pid }
+        rescue Errno::ENOENT
+          # pgrep command not found
+          []
+        end
+
+        def terminate_processes(pids)
+          pids.each do |pid|
+            Process.kill("TERM", pid)
+          rescue StandardError
+            nil
+          end
+        end
+
+        def cleanup_socket_files
+          files = [".overmind.sock", "tmp/sockets/overmind.sock", "tmp/pids/server.pid"]
+          killed_any = false
+
+          files.each do |file|
+            next unless File.exist?(file)
+
+            puts "   🧹 Removing #{file}"
+            File.delete(file)
+            killed_any = true
+          rescue StandardError
+            nil
+          end
+
+          killed_any
+        end
+
+        def print_kill_summary(killed_any)
+          if killed_any
+            puts ""
+            puts "✅ All processes terminated and sockets cleaned"
+            puts "💡 You can now run 'bin/dev' for a clean start"
+          else
+            puts "   ℹ️  No development processes found running"
+          end
+        end
+
+        def show_help
+          puts help_usage
+          puts ""
+          puts help_commands
+          puts ""
+          puts help_options
+          puts ""
+          puts help_customization
+          puts ""
+          puts help_mode_details
+          puts ""
+          puts help_troubleshooting
+        end
+
+        private
+
+        def help_usage
+          Rainbow("📋 Usage: bin/dev [command] [options]").bold
+        end
+
+        # rubocop:disable Metrics/AbcSize
+        def help_commands
+          <<~COMMANDS
+            #{Rainbow('🚀 COMMANDS:').cyan.bold}
+              #{Rainbow('(none) / hmr').green.bold}        #{Rainbow('Start development server with HMR (default)').white}
+                                  #{Rainbow('→ Uses:').yellow} Procfile.dev
+
+              #{Rainbow('static').green.bold}              #{Rainbow('Start development server with static assets (no HMR, no FOUC)').white}
+                                  #{Rainbow('→ Uses:').yellow} Procfile.dev-static-assets
+
+              #{Rainbow('production-assets').green.bold}   #{Rainbow('Start with production-optimized assets (no HMR)').white}
+              #{Rainbow('prod').green.bold}                #{Rainbow('Alias for production-assets').white}
+                                  #{Rainbow('→ Uses:').yellow} Procfile.dev-prod-assets
+
+              #{Rainbow('kill').red.bold}                #{Rainbow('Kill all development processes for a clean start').white}
+              #{Rainbow('help').blue.bold}                #{Rainbow('Show this help message').white}
+          COMMANDS
+        end
+        # rubocop:enable Metrics/AbcSize
+
+        def help_options
+          <<~OPTIONS
+            #{Rainbow('⚙️  OPTIONS:').cyan.bold}
+              #{Rainbow('--verbose, -v').green.bold}       #{Rainbow('Enable verbose output for pack generation').white}
+          OPTIONS
+        end
+
+        def help_customization
+          <<~CUSTOMIZATION
+            #{Rainbow('🔧 CUSTOMIZATION:').cyan.bold}
+            Each mode uses a specific Procfile that you can customize for your application:
+
+            #{Rainbow('•').yellow} #{Rainbow('Procfile.dev').green.bold}                 - HMR development with webpack-dev-server
+            #{Rainbow('•').yellow} #{Rainbow('Procfile.dev-static-assets').green.bold}   - Static development with webpack --watch
+            #{Rainbow('•').yellow} #{Rainbow('Procfile.dev-prod-assets').green.bold}     - Production-optimized assets (port 3001)
+
+            #{Rainbow('Edit these files to customize the development environment for your needs.').white}
+          CUSTOMIZATION
+        end
+
+        # rubocop:disable Metrics/AbcSize
+        def help_mode_details
+          <<~MODES
+            #{Rainbow('🔥 HMR Development mode (default)').cyan.bold} - #{Rainbow('Procfile.dev').green}:
+            #{Rainbow('•').yellow} #{Rainbow('Hot Module Replacement (HMR) enabled').white}
+            #{Rainbow('•').yellow} #{Rainbow('React on Rails pack generation before Procfile start').white}
+            #{Rainbow('•').yellow} #{Rainbow('Webpack dev server for fast recompilation').white}
+            #{Rainbow('•').yellow} #{Rainbow('Source maps for debugging').white}
+            #{Rainbow('•').yellow} #{Rainbow('May have Flash of Unstyled Content (FOUC)').white}
+            #{Rainbow('•').yellow} #{Rainbow('Fast recompilation').white}
+            #{Rainbow('•').yellow} #{Rainbow('Access at:').white} #{Rainbow('http://localhost:3000/hello_world').cyan.underline}
+
+            #{Rainbow('📦 Static development mode').cyan.bold} - #{Rainbow('Procfile.dev-static-assets').green}:
+            #{Rainbow('•').yellow} #{Rainbow('No HMR (static assets with auto-recompilation)').white}
+            #{Rainbow('•').yellow} #{Rainbow('React on Rails pack generation before Procfile start').white}
+            #{Rainbow('•').yellow} #{Rainbow('Webpack watch mode for auto-recompilation').white}
+            #{Rainbow('•').yellow} #{Rainbow('CSS extracted to separate files (no FOUC)').white}
+            #{Rainbow('•').yellow} #{Rainbow('Development environment (faster builds than production)').white}
+            #{Rainbow('•').yellow} #{Rainbow('Source maps for debugging').white}
+            #{Rainbow('•').yellow} #{Rainbow('Access at:').white} #{Rainbow('http://localhost:3000/hello_world').cyan.underline}
+
+            #{Rainbow('🏭 Production-assets mode').cyan.bold} - #{Rainbow('Procfile.dev-prod-assets').green}:
+            #{Rainbow('•').yellow} #{Rainbow('React on Rails pack generation before Procfile start').white}
+            #{Rainbow('•').yellow} #{Rainbow('Asset precompilation with production optimizations').white}
+            #{Rainbow('•').yellow} #{Rainbow('Optimized, minified bundles').white}
+            #{Rainbow('•').yellow} #{Rainbow('Extracted CSS files (no FOUC)').white}
+            #{Rainbow('•').yellow} #{Rainbow('No HMR (static assets)').white}
+            #{Rainbow('•').yellow} #{Rainbow('Slower recompilation').white}
+            #{Rainbow('•').yellow} #{Rainbow('Access at:').white} #{Rainbow('http://localhost:3001/hello_world').cyan.underline}
+          MODES
+        end
+        # rubocop:enable Metrics/AbcSize
+
+        def run_production_like(_verbose: false)
+          procfile = "Procfile.dev-prod-assets"
+
+          print_procfile_info(procfile)
+          print_server_info(
+            "🏭 Starting production-like development server...",
+            [
+              "Generating React on Rails packs",
+              "Precompiling assets with production optimizations",
+              "Running Rails server on port 3001",
+              "No HMR (Hot Module Replacement)",
+              "CSS extracted to separate files (no FOUC)"
+            ],
+            3001
+          )
+
+          # Precompile assets in production mode (includes pack generation automatically)
+          puts "🔨 Precompiling assets..."
+          success = system "RAILS_ENV=production NODE_ENV=production bundle exec rails assets:precompile"
+
+          if success
+            puts "✅ Assets precompiled successfully"
+            ProcessManager.ensure_procfile(procfile)
+            ProcessManager.run_with_process_manager(procfile)
+          else
+            puts "❌ Asset precompilation failed"
+            exit 1
+          end
+        end
+
+        def run_static_development(procfile, verbose: false)
+          print_procfile_info(procfile)
+          print_server_info(
+            "⚡ Starting development server with static assets...",
+            [
+              "Generating React on Rails packs",
+              "Using shakapacker --watch (no HMR)",
+              "CSS extracted to separate files (no FOUC)",
+              "Development environment (source maps, faster builds)",
+              "Auto-recompiles on file changes"
+            ]
+          )
+
+          PackGenerator.generate(verbose: verbose)
+          ProcessManager.ensure_procfile(procfile)
+          ProcessManager.run_with_process_manager(procfile)
+        end
+
+        def run_development(procfile, verbose: false)
+          print_procfile_info(procfile)
+          PackGenerator.generate(verbose: verbose)
+          ProcessManager.ensure_procfile(procfile)
+          ProcessManager.run_with_process_manager(procfile)
+        end
+
+        def print_server_info(title, features, port = 3000)
+          puts title
+          features.each { |feature| puts "   - #{feature}" }
+          puts ""
+          puts ""
+          puts "💡 Access at: #{Rainbow("http://localhost:#{port}/hello_world").cyan.underline}"
+          puts ""
+        end
+
+        def print_procfile_info(procfile)
+          port = procfile_port(procfile)
+          box_width = 60
+
+          puts ""
+          puts box_border(box_width)
+          puts box_empty_line(box_width)
+          puts format_box_line("📋 Using Procfile: #{procfile}", box_width)
+          puts format_box_line("🔧 Customize this file for your app's needs", box_width)
+          puts box_empty_line(box_width)
+          puts format_box_line("💡 Access at: #{Rainbow("http://localhost:#{port}/hello_world").cyan.underline}",
+                               box_width)
+          puts box_empty_line(box_width)
+          puts box_bottom(box_width)
+          puts ""
+        end
+
+        def procfile_port(procfile)
+          procfile == "Procfile.dev-prod-assets" ? 3001 : 3000
+        end
+
+        def box_border(width)
+          "┌#{'─' * (width - 2)}┐"
+        end
+
+        def box_bottom(width)
+          "└#{'─' * (width - 2)}┘"
+        end
+
+        def box_empty_line(width)
+          "│#{' ' * (width - 2)}│"
+        end
+
+        def format_box_line(content, box_width)
+          line = "│ #{content}"
+          # Use visual length for colored text
+          visual_length = Rainbow.uncolor(line).length
+          padding = box_width - visual_length - 2
+          line + "#{' ' * padding}│"
+        end
+
+        # rubocop:disable Metrics/AbcSize
+        def help_troubleshooting
+          <<~TROUBLESHOOTING
+            #{Rainbow('🔧 TROUBLESHOOTING:').cyan.bold}
+
+            #{Rainbow('⚛️  React Refresh Issues:').yellow.bold}
+            #{Rainbow('If you see "$RefreshSig$ is not defined" errors:').white}
+            #{Rainbow('1.').green} #{Rainbow('Check that both babel plugin and webpack plugin are configured:').white}
+               #{Rainbow('•').yellow} #{Rainbow('babel.config.js: \'react-refresh/babel\' plugin (enabled when WEBPACK_SERVE=true)').white}
+               #{Rainbow('•').yellow} #{Rainbow('config/webpack/development.js: ReactRefreshWebpackPlugin (enabled when WEBPACK_SERVE=true)').white}
+            #{Rainbow('2.').green} #{Rainbow('Ensure you\'re running HMR mode:').white} #{Rainbow('bin/dev').green.bold} #{Rainbow('(not').white} #{Rainbow('bin/dev static').red}#{Rainbow(')').white}
+            #{Rainbow('3.').green} #{Rainbow('Try restarting the development server:').white} #{Rainbow('bin/dev kill && bin/dev').green.bold}
+            #{Rainbow('4.').green} #{Rainbow('Note: React Refresh only works in HMR mode, not static mode').white}
+
+            #{Rainbow('🚨 General Issues:').yellow.bold}
+            #{Rainbow('•').red} #{Rainbow('"Port already in use"').white} #{Rainbow('→ Run:').yellow} #{Rainbow('bin/dev kill').green.bold}
+            #{Rainbow('•').red} #{Rainbow('"Webpack compilation failed"').white} #{Rainbow('→ Check console for specific errors').white}
+            #{Rainbow('•').red} #{Rainbow('"Process manager not found"').white} #{Rainbow('→ Install:').yellow} #{Rainbow('brew install overmind').green.bold} #{Rainbow('(or').white} #{Rainbow('gem install foreman').green.bold}#{Rainbow(')').white}
+            #{Rainbow('•').red} #{Rainbow('"Assets not loading"').white} #{Rainbow('→ Verify Procfile.dev is present and check server logs').white}
+
+            #{Rainbow('📚 Need help? Visit:').blue.bold} #{Rainbow('https://www.shakacode.com/react-on-rails/docs/').cyan.underline}
+          TROUBLESHOOTING
+        end
+        # rubocop:enable Metrics/AbcSize
+      end
+    end
+  end
+end

data/lib/react_on_rails/dev.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative "dev/server_manager"
+require_relative "dev/process_manager"
+require_relative "dev/pack_generator"
+require_relative "dev/file_manager"
+
+module ReactOnRails
+  module Dev
+    # Development server management for React on Rails
+    #
+    # This module provides classes to manage development servers,
+    # process managers, pack generation, and file cleanup.
+    #
+    # Usage:
+    #   ReactOnRails::Dev::ServerManager.start(:development)
+    #   ReactOnRails::Dev::ServerManager.kill_processes
+    #   ReactOnRails::Dev::ServerManager.show_help
+  end
+end

data/lib/react_on_rails/engine.rb

@@ -8,5 +8,11 @@ module ReactOnRails
       VersionChecker.build.log_if_gem_and_node_package_versions_differ
       ReactOnRails::ServerRenderingPool.reset_pool
     end
+
+    rake_tasks do
+      load File.expand_path("../tasks/generate_packs.rake", __dir__)
+      load File.expand_path("../tasks/assets.rake", __dir__)
+      load File.expand_path("../tasks/locale.rake", __dir__)
+    end
   end
 end

data/lib/react_on_rails/git_utils.rb

@@ -11,9 +11,19 @@ module ReactOnRails
       return false if git_installed && status&.empty?
 
       error = if git_installed
-                "You have uncommitted code. Please commit or stash your changes before continuing"
+                <<~MSG.strip
+                  You have uncommitted changes. Please commit or stash them before continuing.
+
+                  The React on Rails generator creates many new files and it's important to keep
+                  your existing changes separate from the generated code for easier review.
+                MSG
               else
-                "You do not have Git installed. Please install Git, and commit your changes before continuing"
+                <<~MSG.strip
+                  Git is not installed. Please install Git and commit your changes before continuing.
+
+                  The React on Rails generator creates many new files and version control helps
+                  track what was generated versus your existing code.
+                MSG
               end
       message_handler.add_error(error)
       true

data/lib/react_on_rails/helper.rb

@@ -17,6 +17,9 @@ module ReactOnRails
     include ReactOnRails::Utils::Required
 
     COMPONENT_HTML_KEY = "componentHtml"
+    IMMEDIATE_HYDRATION_PRO_WARNING = "[REACT ON RAILS] The 'immediate_hydration' feature requires a " \
+                                      "React on Rails Pro license. " \
+                                      "Please visit https://shakacode.com/react-on-rails-pro to learn more."
 
     # react_component_name: can be a React function or class component or a "Render-Function".
     # "Render-Functions" differ from a React function in that they take two parameters, the
@@ -58,15 +61,17 @@ module ReactOnRails
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
       render_options = internal_result[:render_options]
+      badge = pro_warning_badge_if_needed(internal_result[:immediate_hydration_requested])
 
       case server_rendered_html
       when String
-        build_react_component_result_for_server_rendered_string(
+        html = build_react_component_result_for_server_rendered_string(
           server_rendered_html: server_rendered_html,
           component_specification_tag: internal_result[:tag],
           console_script: console_script,
           render_options: render_options
         )
+        (badge + html).html_safe
       when Hash
         msg = <<~MSG
           Use react_component_hash (not react_component) to return a Hash to your ruby view code. See
@@ -126,7 +131,7 @@ module ReactOnRails
       # stream_react_component doesn't have the prerender option
       # Because setting prerender to false is equivalent to calling react_component with prerender: false
       options[:prerender] = true
-      options = options.merge(force_load: true) unless options.key?(:force_load)
+      options = options.merge(immediate_hydration: true) unless options.key?(:immediate_hydration)
       run_stream_inside_fiber do
         internal_stream_react_component(component_name, options)
       end
@@ -208,22 +213,26 @@ module ReactOnRails
     #
     def react_component_hash(component_name, options = {})
       options[:prerender] = true
+
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
       render_options = internal_result[:render_options]
+      badge = pro_warning_badge_if_needed(internal_result[:immediate_hydration_requested])
 
       if server_rendered_html.is_a?(String) && internal_result[:result]["hasErrors"]
         server_rendered_html = { COMPONENT_HTML_KEY => internal_result[:result]["html"] }
       end
 
       if server_rendered_html.is_a?(Hash)
-        build_react_component_result_for_server_rendered_hash(
+        result = build_react_component_result_for_server_rendered_hash(
           server_rendered_html: server_rendered_html,
           component_specification_tag: internal_result[:tag],
           console_script: console_script,
           render_options: render_options
         )
+        result[COMPONENT_HTML_KEY] = badge + result[COMPONENT_HTML_KEY]
+        result
       else
         msg = <<~MSG
           Render-Function used by react_component_hash for #{component_name} is expected to return
@@ -247,13 +256,16 @@ module ReactOnRails
     # props: Ruby Hash or JSON string which contains the properties to pass to the redux store.
     # Options
     #    defer: false -- pass as true if you wish to render this below your component.
-    #    force_load: false -- pass as true if you wish to hydrate this store immediately instead of
-    #                        waiting for the page to load.
-    def redux_store(store_name, props: {}, defer: false, force_load: nil)
-      force_load = ReactOnRails.configuration.force_load if force_load.nil?
+    #    immediate_hydration: false -- React on Rails Pro (licensed) feature. Pass as true if you wish to
+    #                        hydrate this store immediately instead of waiting for the page to load.
+    def redux_store(store_name, props: {}, defer: false, immediate_hydration: nil)
+      immediate_hydration = ReactOnRails.configuration.immediate_hydration if immediate_hydration.nil?
+      badge = pro_warning_badge_if_needed(immediate_hydration)
+      immediate_hydration = false unless support_pro_features?
+
       redux_store_data = { store_name: store_name,
                            props: props,
-                           force_load: force_load }
+                           immediate_hydration: immediate_hydration }
       if defer
         registered_stores_defer_render << redux_store_data
         "YOU SHOULD NOT SEE THIS ON YOUR VIEW -- Uses as a code block, like <% redux_store %> " \
@@ -261,7 +273,7 @@ module ReactOnRails
       else
         registered_stores << redux_store_data
         result = render_redux_store_data(redux_store_data)
-        prepend_render_rails_context(result)
+        (badge + prepend_render_rails_context(result)).html_safe
       end
     end
 
@@ -334,7 +346,7 @@ module ReactOnRails
 
       html = result["html"]
       console_log_script = result["consoleLogScript"]
-      raw("#{html}#{render_options.replay_console ? console_log_script : ''}")
+      raw("#{html}#{console_log_script if render_options.replay_console}")
     rescue ExecJS::ProgramError => err
       raise ReactOnRails::PrerenderError.new(component_name: "N/A (server_render_js called)",
                                              err: err,
@@ -401,7 +413,7 @@ module ReactOnRails
           result.merge!(
             # URL settings
             href: uri.to_s,
-            location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}" : ''}",
+            location: "#{uri.path}#{"?#{uri.query}" if uri.query.present?}",
             scheme: uri.scheme, # http
             host: uri.host, # foo.com
             port: uri.port,
@@ -440,7 +452,32 @@ module ReactOnRails
 
     # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
 
-    private
+    # Checks if React on Rails Pro features are available
+    # @return [Boolean] true if Pro license is valid, false otherwise
+    def support_pro_features?
+      ReactOnRails::Utils.react_on_rails_pro_licence_valid?
+    end
+
+    def pro_warning_badge_if_needed(immediate_hydration)
+      return "".html_safe unless immediate_hydration
+      return "".html_safe if support_pro_features?
+
+      puts IMMEDIATE_HYDRATION_PRO_WARNING
+      Rails.logger.warn IMMEDIATE_HYDRATION_PRO_WARNING
+
+      tooltip_text = "The 'immediate_hydration' feature requires a React on Rails Pro license. Click to learn more."
+
+      badge_html = <<~HTML
+        <a href="https://shakacode.com/react-on-rails-pro" target="_blank" rel="noopener noreferrer" title="#{tooltip_text}">
+          <div style="position: fixed; top: 0; right: 0; width: 180px; height: 180px; overflow: hidden; z-index: 9999; pointer-events: none;">
+            <div style="position: absolute; top: 50px; right: -40px; transform: rotate(45deg); background-color: rgba(220, 53, 69, 0.85); color: white; padding: 7px 40px; text-align: center; font-weight: bold; font-family: sans-serif; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); pointer-events: auto;">
+              React On Rails Pro Required
+            </div>
+          </div>
+        </a>
+      HTML
+      badge_html.strip.html_safe
+    end
 
     def run_stream_inside_fiber
       unless ReactOnRails::Utils.react_on_rails_pro?
@@ -638,6 +675,9 @@ module ReactOnRails
       # server has already rendered the HTML.
 
       render_options = create_render_options(react_component_name, options)
+      # Capture the originally requested value so we can show a badge while still disabling the feature.
+      immediate_hydration_requested = render_options.immediate_hydration
+      render_options.set_option(:immediate_hydration, false) unless support_pro_features?
 
       # Setup the page_loaded_js, which is the same regardless of prerendering or not!
       # The reason is that React is smart about not doing extra work if the server rendering did its job.
@@ -650,9 +690,10 @@ module ReactOnRails
                                                 "data-trace" => (render_options.trace ? true : nil),
                                                 "data-dom-id" => render_options.dom_id,
                                                 "data-store-dependencies" => render_options.store_dependencies&.to_json,
-                                                "data-force-load" => (render_options.force_load ? true : nil))
+                                                "data-immediate-hydration" =>
+                                                  (render_options.immediate_hydration ? true : nil))
 
-      if render_options.force_load
+      if render_options.immediate_hydration
         component_specification_tag.concat(
           content_tag(:script, %(
 typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{render_options.dom_id}');
@@ -667,7 +708,8 @@ typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{
       {
         render_options: render_options,
         tag: component_specification_tag,
-        result: result
+        result: result,
+        immediate_hydration_requested: immediate_hydration_requested
       }
     end
 
@@ -676,9 +718,10 @@ typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{
                                          json_safe_and_pretty(redux_store_data[:props]).html_safe,
                                          type: "application/json",
                                          "data-js-react-on-rails-store" => redux_store_data[:store_name].html_safe,
-                                         "data-force-load" => (redux_store_data[:force_load] ? true : nil))
+                                         "data-immediate-hydration" =>
+                                           (redux_store_data[:immediate_hydration] ? true : nil))
 
-      if redux_store_data[:force_load]
+      if redux_store_data[:immediate_hydration]
         store_hydration_data.concat(
           content_tag(:script, <<~JS.strip_heredoc.html_safe
             typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsStoreLoaded('#{redux_store_data[:store_name]}');
@@ -814,6 +857,7 @@ typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{
 
     if defined?(ScoutApm)
       include ScoutApm::Tracer
+
       instrument_method :react_component, type: "ReactOnRails", name: "react_component"
       instrument_method :react_component_hash, type: "ReactOnRails", name: "react_component_hash"
     end

data/lib/react_on_rails/packer_utils.rb

@@ -3,27 +3,18 @@
 module ReactOnRails
   module PackerUtils
     def self.using_packer?
-      using_shakapacker_const? || using_webpacker_const?
+      using_shakapacker_const?
     end
 
     def self.using_shakapacker_const?
       return @using_shakapacker_const if defined?(@using_shakapacker_const)
 
       @using_shakapacker_const = ReactOnRails::Utils.gem_available?("shakapacker") &&
-                                 shakapacker_version_requirement_met?("7.0.0")
-    end
-
-    def self.using_webpacker_const?
-      return @using_webpacker_const if defined?(@using_webpacker_const)
-
-      @using_webpacker_const = (ReactOnRails::Utils.gem_available?("shakapacker") &&
-                          shakapacker_version_as_array[0] <= 6) ||
-                               ReactOnRails::Utils.gem_available?("webpacker")
+                                 shakapacker_version_requirement_met?("8.2.0")
     end
 
     def self.packer_type
       return "shakapacker" if using_shakapacker_const?
-      return "webpacker" if using_webpacker_const?
 
       nil
     end
@@ -31,12 +22,8 @@ module ReactOnRails
     def self.packer
       return nil unless using_packer?
 
-      if using_shakapacker_const?
-        require "shakapacker"
-        return ::Shakapacker
-      end
-      require "webpacker"
-      ::Webpacker
+      require "shakapacker"
+      ::Shakapacker
     end
 
     def self.dev_server_running?
@@ -106,7 +93,6 @@ module ReactOnRails
     end
 
     def self.precompile?
-      return ::Webpacker.config.webpacker_precompile? if using_webpacker_const?
       return ::Shakapacker.config.shakapacker_precompile? if using_shakapacker_const?
 
       false