react_on_rails 16.1.2 → 16.2.0

data/lib/react_on_rails/packs_generator.rb

@@ -16,43 +16,51 @@ module ReactOnRails
       @instance ||= PacksGenerator.new
     end
 
+    def react_on_rails_npm_package
+      return "react-on-rails-pro" if ReactOnRails::Utils.react_on_rails_pro?
+
+      "react-on-rails"
+    end
+
     def generate_packs_if_stale
       return unless ReactOnRails.configuration.auto_load_bundle
 
+      verbose = ENV["REACT_ON_RAILS_VERBOSE"] == "true"
+
       add_generated_pack_to_server_bundle
 
       # Clean any non-generated files from directories
-      clean_non_generated_files_with_feedback
+      clean_non_generated_files_with_feedback(verbose: verbose)
 
       are_generated_files_present_and_up_to_date = Dir.exist?(generated_packs_directory_path) &&
                                                    File.exist?(generated_server_bundle_file_path) &&
                                                    !stale_or_missing_packs?
 
       if are_generated_files_present_and_up_to_date
-        puts Rainbow("✅ Generated packs are up to date, no regeneration needed").green
+        puts Rainbow("✅ Generated packs are up to date, no regeneration needed").green if verbose
         return
       end
 
-      clean_generated_directories_with_feedback
-      generate_packs
+      clean_generated_directories_with_feedback(verbose: verbose)
+      generate_packs(verbose: verbose)
     end
 
     private
 
-    def generate_packs
-      common_component_to_path.each_value { |component_path| create_pack(component_path) }
-      client_component_to_path.each_value { |component_path| create_pack(component_path) }
+    def generate_packs(verbose: false)
+      common_component_to_path.each_value { |component_path| create_pack(component_path, verbose: verbose) }
+      client_component_to_path.each_value { |component_path| create_pack(component_path, verbose: verbose) }
 
-      create_server_pack if ReactOnRails.configuration.server_bundle_js_file.present?
+      create_server_pack(verbose: verbose) if ReactOnRails.configuration.server_bundle_js_file.present?
     end
 
-    def create_pack(file_path)
+    def create_pack(file_path, verbose: false)
       output_path = generated_pack_path(file_path)
       content = pack_file_contents(file_path)
 
       File.write(output_path, content)
 
-      puts(Rainbow("Generated Packs: #{output_path}").yellow)
+      puts(Rainbow("Generated Packs: #{output_path}").yellow) if verbose
     end
 
     def first_js_statement_in_code(content) # rubocop:disable Metrics/CyclomaticComplexity,Metrics/PerceivedComplexity
@@ -104,7 +112,7 @@ module ReactOnRails
 
       if load_server_components && !client_entrypoint?(file_path)
         return <<~FILE_CONTENT.strip
-          import registerServerComponent from 'react-on-rails/registerServerComponent/client';
+          import registerServerComponent from '#{react_on_rails_npm_package}/registerServerComponent/client';
 
           registerServerComponent("#{registered_component_name}");
         FILE_CONTENT
@@ -113,30 +121,30 @@ module ReactOnRails
       relative_component_path = relative_component_path_from_generated_pack(file_path)
 
       <<~FILE_CONTENT.strip
-        import ReactOnRails from 'react-on-rails/client';
+        import ReactOnRails from '#{react_on_rails_npm_package}/client';
         import #{registered_component_name} from '#{relative_component_path}';
 
         ReactOnRails.register({#{registered_component_name}});
       FILE_CONTENT
     end
 
-    def create_server_pack
+    def create_server_pack(verbose: false)
       File.write(generated_server_bundle_file_path, generated_server_pack_file_content)
 
       add_generated_pack_to_server_bundle
-      puts(Rainbow("Generated Server Bundle: #{generated_server_bundle_file_path}").orange)
+      puts(Rainbow("Generated Server Bundle: #{generated_server_bundle_file_path}").orange) if verbose
     end
 
     def build_server_pack_content(component_on_server_imports, server_components, client_components)
       content = <<~FILE_CONTENT
-        import ReactOnRails from 'react-on-rails';
+        import ReactOnRails from '#{react_on_rails_npm_package}';
 
         #{component_on_server_imports.join("\n")}\n
       FILE_CONTENT
 
       if server_components.any?
         content += <<~FILE_CONTENT
-          import registerServerComponent from 'react-on-rails/registerServerComponent/server';
+          import registerServerComponent from '#{react_on_rails_npm_package}/registerServerComponent/server';
           registerServerComponent({#{server_components.join(",\n")}});\n
         FILE_CONTENT
       end
@@ -194,17 +202,17 @@ module ReactOnRails
       "#{generated_nonentrypoints_path}/#{generated_server_bundle_file_name}.js"
     end
 
-    def clean_non_generated_files_with_feedback
+    def clean_non_generated_files_with_feedback(verbose: false)
       directories_to_clean = [generated_packs_directory_path, generated_server_bundle_directory_path].compact.uniq
       expected_files = build_expected_files_set
 
-      puts Rainbow("🧹 Cleaning non-generated files...").yellow
+      puts Rainbow("🧹 Cleaning non-generated files...").yellow if verbose
 
       total_deleted = directories_to_clean.sum do |dir_path|
-        clean_unexpected_files_from_directory(dir_path, expected_files)
+        clean_unexpected_files_from_directory(dir_path, expected_files, verbose: verbose)
       end
 
-      display_cleanup_summary(total_deleted)
+      display_cleanup_summary(total_deleted, verbose: verbose) if verbose
     end
 
     def build_expected_files_set
@@ -219,17 +227,17 @@ module ReactOnRails
       { pack_files: expected_pack_files, server_bundle: expected_server_bundle }
     end
 
-    def clean_unexpected_files_from_directory(dir_path, expected_files)
+    def clean_unexpected_files_from_directory(dir_path, expected_files, verbose: false)
       return 0 unless Dir.exist?(dir_path)
 
       existing_files = Dir.glob("#{dir_path}/**/*").select { |f| File.file?(f) }
       unexpected_files = find_unexpected_files(existing_files, dir_path, expected_files)
 
       if unexpected_files.any?
-        delete_unexpected_files(unexpected_files, dir_path)
+        delete_unexpected_files(unexpected_files, dir_path, verbose: verbose)
         unexpected_files.length
       else
-        puts Rainbow("   No unexpected files found in #{dir_path}").cyan
+        puts Rainbow("   No unexpected files found in #{dir_path}").cyan if verbose
         0
       end
     end
@@ -244,15 +252,21 @@ module ReactOnRails
       end
     end
 
-    def delete_unexpected_files(unexpected_files, dir_path)
-      puts Rainbow("   Deleting #{unexpected_files.length} unexpected files from #{dir_path}:").cyan
-      unexpected_files.each do |file|
-        puts Rainbow("     - #{File.basename(file)}").blue
-        File.delete(file)
+    def delete_unexpected_files(unexpected_files, dir_path, verbose: false)
+      if verbose
+        puts Rainbow("   Deleting #{unexpected_files.length} unexpected files from #{dir_path}:").cyan
+        unexpected_files.each do |file|
+          puts Rainbow("     - #{File.basename(file)}").blue
+          File.delete(file)
+        end
+      else
+        unexpected_files.each { |file| File.delete(file) }
       end
     end
 
-    def display_cleanup_summary(total_deleted)
+    def display_cleanup_summary(total_deleted, verbose: false)
+      return unless verbose
+
       if total_deleted.positive?
         puts Rainbow("🗑️  Deleted #{total_deleted} unexpected files total").red
       else
@@ -260,15 +274,17 @@ module ReactOnRails
       end
     end
 
-    def clean_generated_directories_with_feedback
+    def clean_generated_directories_with_feedback(verbose: false)
       directories_to_clean = [
         generated_packs_directory_path,
         generated_server_bundle_directory_path
       ].compact.uniq
 
-      puts Rainbow("🧹 Cleaning generated directories...").yellow
+      puts Rainbow("🧹 Cleaning generated directories...").yellow if verbose
 
-      total_deleted = directories_to_clean.sum { |dir_path| clean_directory_with_feedback(dir_path) }
+      total_deleted = directories_to_clean.sum { |dir_path| clean_directory_with_feedback(dir_path, verbose: verbose) }
+
+      return unless verbose
 
       if total_deleted.positive?
         puts Rainbow("🗑️  Deleted #{total_deleted} generated files total").red
@@ -277,27 +293,29 @@ module ReactOnRails
       end
     end
 
-    def clean_directory_with_feedback(dir_path)
-      return create_directory_with_feedback(dir_path) unless Dir.exist?(dir_path)
+    def clean_directory_with_feedback(dir_path, verbose: false)
+      return create_directory_with_feedback(dir_path, verbose: verbose) unless Dir.exist?(dir_path)
 
       files = Dir.glob("#{dir_path}/**/*").select { |f| File.file?(f) }
 
       if files.any?
-        puts Rainbow("   Deleting #{files.length} files from #{dir_path}:").cyan
-        files.each { |file| puts Rainbow("     - #{File.basename(file)}").blue }
+        if verbose
+          puts Rainbow("   Deleting #{files.length} files from #{dir_path}:").cyan
+          files.each { |file| puts Rainbow("     - #{File.basename(file)}").blue }
+        end
         FileUtils.rm_rf(dir_path)
         FileUtils.mkdir_p(dir_path)
         files.length
       else
-        puts Rainbow("   Directory #{dir_path} is already empty").cyan
+        puts Rainbow("   Directory #{dir_path} is already empty").cyan if verbose
         FileUtils.rm_rf(dir_path)
         FileUtils.mkdir_p(dir_path)
         0
       end
     end
 
-    def create_directory_with_feedback(dir_path)
-      puts Rainbow("   Directory #{dir_path} does not exist, creating...").cyan
+    def create_directory_with_feedback(dir_path, verbose: false)
+      puts Rainbow("   Directory #{dir_path} does not exist, creating...").cyan if verbose
       FileUtils.mkdir_p(dir_path)
       0
     end

data/lib/react_on_rails/prerender_error.rb

@@ -47,12 +47,16 @@ module ReactOnRails
 
     private
 
+    # rubocop:disable Metrics/AbcSize
     def calc_message(component_name, console_messages, err, js_code, props)
-      message = +"ERROR in SERVER PRERENDERING\n"
+      header = Rainbow("❌ React on Rails Server Rendering Error").red.bright
+      message = +"#{header}\n\n"
+
+      message << Rainbow("Component: #{component_name}").yellow << "\n\n"
+
       if err
+        message << Rainbow("Error Details:").red.bright << "\n"
         message << <<~MSG
-          Encountered error:
-
           #{err.inspect}
 
         MSG
@@ -61,33 +65,86 @@ module ReactOnRails
                       err.backtrace.join("\n")
                     else
                       "#{Rails.backtrace_cleaner.clean(err.backtrace).join("\n")}\n" +
-                        Rainbow("The rest of the backtrace is hidden. " \
-                                "To see the full backtrace, set FULL_TEXT_ERRORS=true.").red
+                        Rainbow("💡 Tip: Set FULL_TEXT_ERRORS=true to see the full backtrace").yellow
                     end
       else
         backtrace = nil
       end
-      message << <<~MSG
-        when prerendering #{component_name} with props: #{Utils.smart_trim(props, MAX_ERROR_SNIPPET_TO_LOG)}
-
-        code:
-
-        #{Utils.smart_trim(js_code, MAX_ERROR_SNIPPET_TO_LOG)}
 
-      MSG
+      # Add props information
+      message << Rainbow("Props:").blue.bright << "\n"
+      message << "#{Utils.smart_trim(props, MAX_ERROR_SNIPPET_TO_LOG)}\n\n"
 
-      if console_messages
-        message << <<~MSG
-          console messages:
-          #{console_messages}
-        MSG
+      # Add code snippet
+      message << Rainbow("JavaScript Code:").blue.bright << "\n"
+      message << "#{Utils.smart_trim(js_code, MAX_ERROR_SNIPPET_TO_LOG)}\n\n"
 
+      if console_messages && console_messages.strip.present?
+        message << Rainbow("Console Output:").magenta.bright << "\n"
+        message << "#{console_messages}\n\n"
       end
 
+      # Add actionable suggestions
+      message << Rainbow("💡 Troubleshooting Steps:").yellow.bright << "\n"
+      message << build_troubleshooting_suggestions(component_name, err, console_messages)
+
       # Add help and support information
       message << "\n#{Utils.default_troubleshooting_section}\n"
 
       [backtrace, message]
+      # rubocop:enable Metrics/AbcSize
+    end
+
+    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+    def build_troubleshooting_suggestions(component_name, err, console_messages)
+      suggestions = []
+
+      # Check for common error patterns
+      if err&.message&.include?("window is not defined") || console_messages&.include?("window is not defined")
+        suggestions << <<~SUGGESTION
+          1. Browser API used on server - wrap with client-side check:
+             #{Rainbow("if (typeof window !== 'undefined') { ... }").cyan}
+        SUGGESTION
+      end
+
+      if err&.message&.include?("document is not defined") || console_messages&.include?("document is not defined")
+        suggestions << <<~SUGGESTION
+          1. DOM API used on server - use React refs or useEffect:
+             #{Rainbow('useEffect(() => { /* DOM operations here */ }, [])').cyan}
+        SUGGESTION
+      end
+
+      if err&.message&.include?("Cannot read") || err&.message&.include?("undefined")
+        suggestions << <<~SUGGESTION
+          1. Check for null/undefined values in props
+          2. Add default props or use optional chaining:
+             #{Rainbow("props.data?.value || 'default'").cyan}
+        SUGGESTION
+      end
+
+      if err&.message&.include?("Hydration") || console_messages&.include?("Hydration")
+        suggestions << <<~SUGGESTION
+          1. Server and client render mismatch - ensure consistent:
+             - Random values (use seed from props)
+             - Date/time values (pass from server)
+             - User agent checks (avoid or use props)
+        SUGGESTION
+      end
+
+      # Generic suggestions
+      suggestions << <<~SUGGESTION
+        • Temporarily disable SSR to isolate the issue:
+          #{Rainbow('prerender: false').cyan} in your view helper
+        • Check server logs for detailed errors:
+          #{Rainbow('tail -f log/development.log').cyan}
+        • Verify component registration:
+          #{Rainbow("ReactOnRails.register({ #{component_name}: #{component_name} })").cyan}
+        • Ensure server bundle is up to date:
+          #{Rainbow('bin/shakapacker').cyan} or #{Rainbow('yarn run build:server').cyan}
+      SUGGESTION
+
+      suggestions.join("\n")
+      # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
     end
   end
 end

data/lib/react_on_rails/pro_helper.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module ReactOnRails
+  module ProHelper
+    # Generates the complete component specification script tag.
+    # Handles both immediate hydration (Pro feature) and standard cases.
+    def generate_component_script(render_options)
+      # 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.
+      component_specification_tag = content_tag(:script,
+                                                json_safe_and_pretty(render_options.client_props).html_safe,
+                                                type: "application/json",
+                                                class: "js-react-on-rails-component",
+                                                id: "js-react-on-rails-component-#{render_options.dom_id}",
+                                                "data-component-name" => render_options.react_component_name,
+                                                "data-trace" => (render_options.trace ? true : nil),
+                                                "data-dom-id" => render_options.dom_id,
+                                                "data-store-dependencies" =>
+                                                  render_options.store_dependencies&.to_json,
+                                                "data-immediate-hydration" =>
+                                                  (render_options.immediate_hydration ? true : nil))
+
+      # Add immediate invocation script if immediate hydration is enabled
+      spec_tag = if render_options.immediate_hydration
+                   # Escape dom_id for JavaScript context
+                   escaped_dom_id = escape_javascript(render_options.dom_id)
+                   immediate_script = content_tag(:script, %(
+          typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{escaped_dom_id}');
+        ).html_safe)
+                   "#{component_specification_tag}\n#{immediate_script}"
+                 else
+                   component_specification_tag
+                 end
+
+      spec_tag.html_safe
+    end
+
+    # Generates the complete store hydration script tag.
+    # Handles both immediate hydration (Pro feature) and standard cases.
+    def generate_store_script(redux_store_data)
+      store_hydration_data = content_tag(:script,
+                                         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-immediate-hydration" =>
+                                           (redux_store_data[:immediate_hydration] ? true : nil))
+
+      # Add immediate invocation script if immediate hydration is enabled and Pro license is valid
+      store_hydration_scripts = if redux_store_data[:immediate_hydration]
+                                  # Escape store_name for JavaScript context
+                                  escaped_store_name = escape_javascript(redux_store_data[:store_name])
+                                  immediate_script = content_tag(:script, <<~JS.strip_heredoc.html_safe
+                                    typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsStoreLoaded('#{escaped_store_name}');
+                                  JS
+                                  )
+                                  "#{store_hydration_data}\n#{immediate_script}"
+                                else
+                                  store_hydration_data
+                                end
+
+      store_hydration_scripts.html_safe
+    end
+  end
+end

data/lib/react_on_rails/react_component/render_options.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "react_on_rails/utils"
-require "react_on_rails/pro/utils"
 
 module ReactOnRails
   module ReactComponent
@@ -15,13 +14,10 @@ module ReactOnRails
       # TODO: remove the required for named params
       def initialize(react_component_name: required("react_component_name"), options: required("options"))
         @react_component_name = react_component_name.camelize
-
-        result = ReactOnRails::Pro::Utils.disable_pro_render_options_if_not_licensed(options)
-        @options = result[:raw_options]
-        @explicitly_disabled_pro_options = result[:explicitly_disabled_pro_options]
+        @options = options
       end
 
-      attr_reader :react_component_name, :explicitly_disabled_pro_options
+      attr_reader :react_component_name
 
       def throw_js_errors
         options.fetch(:throw_js_errors, false)
@@ -100,7 +96,11 @@ module ReactOnRails
       end
 
       def immediate_hydration
-        retrieve_configuration_value_for(:immediate_hydration)
+        ReactOnRails::Utils.normalize_immediate_hydration(
+          options[:immediate_hydration],
+          react_component_name,
+          "Component"
+        )
       end
 
       def to_s

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -9,11 +9,10 @@ module ReactOnRails
     class RubyEmbeddedJavaScript
       class << self
         def reset_pool
-          options = {
+          @js_context_pool = ConnectionPool.new(
             size: ReactOnRails.configuration.server_renderer_pool_size,
             timeout: ReactOnRails.configuration.server_renderer_timeout
-          }
-          @js_context_pool = ConnectionPool.new(options) { create_js_context }
+          ) { create_js_context }
         end
 
         def reset_pool_if_server_bundle_was_modified
@@ -50,7 +49,6 @@ module ReactOnRails
         # Note, js_code does not have to be based on React.
         # js_code MUST RETURN json stringify Object
         # Calling code will probably call 'html_safe' on return value before rendering to the view.
-        # rubocop:disable Metrics/CyclomaticComplexity
         def exec_server_render_js(js_code, render_options, js_evaluator = nil)
           js_evaluator ||= self
           if render_options.trace
@@ -87,7 +85,6 @@ module ReactOnRails
           # We need to parse each chunk and replay the console messages.
           result.transform { |chunk| parse_result_and_replay_console_messages(chunk, render_options) }
         end
-        # rubocop:enable Metrics/CyclomaticComplexity
 
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force