react_on_rails 11.0.5 → 13.4.0

data/lib/react_on_rails/server_rendering_js_code.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module ReactOnRails
+  module ServerRenderingJsCode
+    class << self
+      def js_code_renderer
+        @js_code_renderer ||= if ReactOnRails::Utils.react_on_rails_pro?
+                                ReactOnRailsPro::ServerRenderingJsCode
+                              else
+                                self
+                              end
+      end
+
+      def server_rendering_component_js_code(
+        props_string: nil,
+        rails_context: nil,
+        redux_stores: nil,
+        react_component_name: nil,
+        render_options: nil
+      )
+
+        config_server_bundle_js = ReactOnRails.configuration.server_bundle_js_file
+
+        if render_options.prerender == true && config_server_bundle_js.blank?
+          msg = <<~MSG
+            The `prerender` option to allow Server Side Rendering is marked as true but the ReactOnRails configuration
+            for `server_bundle_js_file` is nil or not present in `config/initializers/react_on_rails.rb`.
+            Set `config.server_bundle_js_file` to your javascript bundle to allow server side rendering.
+            Read more at https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/
+          MSG
+          raise ReactOnRails::Error, msg
+        end
+
+        js_code_renderer.render(props_string, rails_context, redux_stores, react_component_name, render_options)
+      end
+
+      def render(props_string, rails_context, redux_stores, react_component_name, render_options)
+        <<-JS
+        (function() {
+          var railsContext = #{rails_context};
+        #{redux_stores}
+          var props = #{props_string};
+          return ReactOnRails.serverRenderReactComponent({
+            name: '#{react_component_name}',
+            domNodeId: '#{render_options.dom_id}',
+            props: props,
+            trace: #{render_options.trace},
+            railsContext: railsContext
+          });
+        })()
+        JS
+      end
+    end
+  end
+end

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
 require "open-uri"
+require "execjs"
 
 module ReactOnRails
   module ServerRenderingPool
+    # rubocop:disable Metrics/ClassLength
     class RubyEmbeddedJavaScript
+      # rubocop:enable Metrics/ClassLength
       class << self
         def reset_pool
           options = {
@@ -17,12 +20,17 @@ module ReactOnRails
         def reset_pool_if_server_bundle_was_modified
           return unless ReactOnRails.configuration.development_mode
 
-          file_mtime = File.mtime(ReactOnRails::Utils.server_bundle_js_file_path)
-          @server_bundle_timestamp ||= file_mtime
-          return if @server_bundle_timestamp == file_mtime
+          if ReactOnRails::Utils.server_bundle_path_is_http?
+            return if @server_bundle_url == ReactOnRails::Utils.server_bundle_js_file_path
 
-          @server_bundle_timestamp = file_mtime
+            @server_bundle_url = ReactOnRails::Utils.server_bundle_js_file_path
+          else
+            file_mtime = File.mtime(ReactOnRails::Utils.server_bundle_js_file_path)
+            @server_bundle_timestamp ||= file_mtime
+            return if @server_bundle_timestamp == file_mtime
 
+            @server_bundle_timestamp = file_mtime
+          end
           ReactOnRails::ServerRenderingPool.reset_pool
         end
 
@@ -39,6 +47,7 @@ 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, Metrics/AbcSize, Metrics/PerceivedComplexity
         def exec_server_render_js(js_code, render_options, js_evaluator = nil)
           js_evaluator ||= self
           if render_options.trace
@@ -47,26 +56,46 @@ module ReactOnRails
                                "tmp/server-generated-#{@file_index % 10}.js")
             @file_index += 1
           end
-          json_string = js_evaluator.eval_js(js_code)
-          result = JSON.parse(json_string)
+          begin
+            json_string = js_evaluator.eval_js(js_code, render_options)
+          rescue StandardError => err
+            msg = <<~MSG
+              Error evaluating server bundle. Check your webpack configuration.
+              ===============================================================
+              Caught error:
+              #{err.message}
+              ===============================================================
+            MSG
+
+            if err.message.include?("ReferenceError: self is not defined")
+              msg << "\nError indicates that you may have code-splitting incorrectly enabled.\n"
+            end
+            raise ReactOnRails::Error, msg, err.backtrace
+          end
+          result = nil
+          begin
+            result = JSON.parse(json_string)
+          rescue JSON::ParserError => e
+            raise ReactOnRails::JsonParseError.new(parse_error: e, json: json_string)
+          end
 
           if render_options.logging_on_server
             console_script = result["consoleReplayScript"]
             console_script_lines = console_script.split("\n")
             console_script_lines = console_script_lines[2..-2]
-            re = /console\.(log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
-            if console_script_lines
-              console_script_lines.each do |line|
-                match = re.match(line)
-                Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
-              end
+            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
+            console_script_lines&.each do |line|
+              match = re.match(line)
+              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
             end
           end
           result
         end
+        # rubocop:enable Metrics/CyclomaticComplexity, Metrics/AbcSize, Metrics/PerceivedComplexity
 
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force
+
           # Set to anything to print generated code.
           File.write(file_name, js_code)
           msg = <<-MSG.strip_heredoc
@@ -82,45 +111,50 @@ module ReactOnRails
           end
         end
 
-        def eval_js(js_code)
+        def eval_js(js_code, _render_options)
           @js_context_pool.with do |js_context|
-            result = js_context.eval(js_code)
-            js_context.eval("console.history = []")
-            result
+            js_context.eval(js_code)
           end
         end
 
-        def create_js_context
-          return if ReactOnRails.configuration.server_bundle_js_file.blank?
-
+        def read_bundle_js_code
           server_js_file = ReactOnRails::Utils.server_bundle_js_file_path
-
-          begin
-            bundle_js_code = File.read(server_js_file)
-          rescue StandardError => e
-            msg = "You specified server rendering JS file: #{server_js_file}, but it cannot be "\
+          if ReactOnRails::Utils.server_bundle_path_is_http?
+            file_url_to_string(server_js_file)
+          else
+            File.read(server_js_file)
+          end
+        rescue StandardError => e
+          msg = "You specified server rendering JS file: #{server_js_file}, but it cannot be "\
                 "read. You may set the server_bundle_js_file in your configuration to be \"\" to "\
                 "avoid this warning.\nError is: #{e}"
-            raise ReactOnRails::Error, msg
-          end
-          # rubocop:disable Layout/IndentHeredoc
-          base_js_code = <<-JS
-#{console_polyfill}
-#{execjs_timer_polyfills}
-#{bundle_js_code};
+          raise ReactOnRails::Error, msg
+        end
+
+        def create_js_context
+          return if ReactOnRails.configuration.server_bundle_js_file.blank?
+
+          bundle_js_code = read_bundle_js_code
+          base_js_code = <<~JS
+            #{console_polyfill}
+            #{execjs_timer_polyfills}
+            #{bundle_js_code};
           JS
-          # rubocop:enable Layout/IndentHeredoc
+
           file_name = "tmp/base_js_code.js"
           begin
             if ReactOnRails.configuration.trace
-              Rails.logger.info { "[react_on_rails] Created JavaScript context with file #{server_js_file}" }
+              Rails.logger.info do
+                "[react_on_rails] Created JavaScript context with file "\
+                  "#{ReactOnRails::Utils.server_bundle_js_file_path}"
+              end
             end
             ExecJS.compile(base_js_code)
           rescue StandardError => e
             msg = "ERROR when compiling base_js_code! "\
-              "See file #{file_name} to "\
-              "correlate line numbers of error. Error is\n\n#{e.message}"\
-              "\n\n#{e.backtrace.join("\n")}"
+                  "See file #{file_name} to "\
+                  "correlate line numbers of error. Error is\n\n#{e.message}"\
+                  "\n\n#{e.backtrace.join("\n")}"
             Rails.logger.error(msg)
             trace_js_code_used("Error when compiling JavaScript code for the context.", base_js_code,
                                file_name, force: true)
@@ -129,60 +163,76 @@ module ReactOnRails
         end
 
         def execjs_timer_polyfills
-          # rubocop:disable Layout/IndentHeredoc
-          <<-JS
-function getStackTrace () {
-  var stack;
-  try {
-    throw new Error('');
-  }
-  catch (error) {
-    stack = error.stack || '';
-  }
-  stack = stack.split('\\n').map(function (line) { return line.trim(); });
-  return stack.splice(stack[0] == 'Error' ? 2 : 1);
-}
-
-function setInterval() {
-  #{undefined_for_exec_js_logging('setInterval')}
-}
-
-function setTimeout() {
-  #{undefined_for_exec_js_logging('setTimeout')}
-}
-
-function clearTimeout() {
-  #{undefined_for_exec_js_logging('clearTimeout')}
-}
+          <<~JS
+            function getStackTrace () {
+              var stack;
+              try {
+                throw new Error('');
+              }
+              catch (error) {
+                stack = error.stack || '';
+              }
+              stack = stack.split('\\n').map(function (line) { return line.trim(); });
+              return stack.splice(stack[0] == 'Error' ? 2 : 1);
+            }
+
+            function setInterval() {
+              #{undefined_for_exec_js_logging('setInterval')}
+            }
+
+            function setTimeout() {
+              #{undefined_for_exec_js_logging('setTimeout')}
+            }
+
+            function clearTimeout() {
+              #{undefined_for_exec_js_logging('clearTimeout')}
+            }
           JS
-          # rubocop:enable Layout/IndentHeredoc
         end
 
         def undefined_for_exec_js_logging(function_name)
           if ReactOnRails.configuration.trace
             "console.error('[React on Rails Rendering] #{function_name} is not defined for server rendering.');\n"\
-            "  console.error(getStackTrace().join('\\n'));"
+              "  console.error(getStackTrace().join('\\n'));"
           else
             ""
           end
         end
 
         # Reimplement console methods for replaying on the client
+        # Save a handle to the original console if needed.
         def console_polyfill
-          # rubocop:disable Layout/IndentHeredoc
-          <<-JS
-var console = { history: [] };
-['error', 'log', 'info', 'warn'].forEach(function (level) {
-  console[level] = function () {
-    var argArray = Array.prototype.slice.call(arguments);
-    if (argArray.length > 0) {
-      argArray[0] = '[SERVER] ' + argArray[0];
-    }
-    console.history.push({level: level, arguments: argArray});
-  };
-});
+          <<~JS
+            var debugConsole = console;
+            var console = { history: [] };
+            ['error', 'log', 'info', 'warn'].forEach(function (level) {
+              console[level] = function () {
+                var argArray = Array.prototype.slice.call(arguments);
+                if (argArray.length > 0) {
+                  argArray[0] = '[SERVER] ' + argArray[0];
+                }
+                console.history.push({level: level, arguments: argArray});
+              };
+            });
           JS
-          # rubocop:enable Layout/IndentHeredoc
+        end
+
+        if defined?(ScoutApm)
+          include ScoutApm::Tracer
+          instrument_method :exec_server_render_js, type: "ReactOnRails", name: "ExecJs React Server Rendering"
+        end
+
+        private
+
+        def file_url_to_string(url)
+          response = Net::HTTP.get_response(URI.parse(url))
+          content_type_header = response["content-type"]
+          match = content_type_header.match(/\A.*; charset=(?<encoding>.*)\z/)
+          encoding_type = match[:encoding]
+          response.body.force_encoding(encoding_type)
+        rescue StandardError => e
+          msg = "file_url_to_string #{url} failed\nError is: #{e}"
+          raise ReactOnRails::Error, msg
         end
       end
     end

data/lib/react_on_rails/server_rendering_pool.rb

@@ -5,7 +5,6 @@ require_relative "server_rendering_pool/ruby_embedded_java_script"
 
 # Based on the react-rails gem.
 # None of these methods should be called directly.
-# See app/helpers/react_on_rails_helper.rb
 module ReactOnRails
   module ServerRenderingPool
     class << self

data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb

@@ -5,6 +5,7 @@ module ReactOnRails
     class EnsureAssetsCompiled
       class << self
         attr_accessor :has_been_run
+
         @has_been_run = false
       end
 
@@ -29,13 +30,15 @@ module ReactOnRails
         # Be sure we don't do this again.
         self.class.has_been_run = true
 
-        ReactOnRails::LocalesToJs.new
+        ReactOnRails::Locales.compile
 
         stale_gen_files = webpack_assets_status_checker.stale_generated_webpack_files
 
         # All done if no stale files!
         return if stale_gen_files.empty?
 
+        ReactOnRails::PacksGenerator.instance.generate_packs_if_stale if ReactOnRails.configuration.auto_load_bundle
+
         # Inform the developer that we're ensuring gen assets are ready.
         puts_start_compile_check_message(stale_gen_files)
 
@@ -43,17 +46,15 @@ module ReactOnRails
       end
 
       def puts_start_compile_check_message(stale_files)
-        # rubocop:disable Layout/IndentHeredoc
-        puts <<-MSG
+        puts <<~MSG
 
-Detected the following stale generated files:
-  #{stale_files.join("\n  ")}
+          Detected the following stale generated files:
+            #{stale_files.join("\n  ")}
 
-React on Rails will ensure your JavaScript generated files are up to date, using your
-`#{ReactOnRails::Utils.prepend_cd_node_modules_directory(ReactOnRails.configuration.build_test_command)}` command.
+          React on Rails will ensure your JavaScript generated files are up to date, using your
+          `#{ReactOnRails::Utils.prepend_cd_node_modules_directory(ReactOnRails.configuration.build_test_command)}` command.
 
         MSG
-        # rubocop:enable Layout/IndentHeredoc
       end
     end
   end

data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb

@@ -6,6 +6,23 @@ module ReactOnRails
   module TestHelper
     class WebpackAssetsCompiler
       def compile_assets
+        if ReactOnRails.configuration.build_test_command.blank?
+          msg = <<~MSG
+            You are using the React on Rails test helper.
+            Either you used:
+              ReactOnRails::TestHelper.configure_rspec_to_compile_assets or
+              ReactOnRails::TestHelper.ensure_assets_compiled
+            but you did not specify the config.build_test_command
+
+            React on Rails is aborting your test run
+
+            If you wish to use the config/webpacker.yml compile option for tests
+            them remove your call to the ReactOnRails test helper.
+          MSG
+          puts Rainbow(msg).red
+          exit!(1)
+        end
+
         puts "\nBuilding Webpack assets..."
 
         cmd = ReactOnRails::Utils.prepend_cd_node_modules_directory(

data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb

@@ -26,12 +26,16 @@ module ReactOnRails
       end
 
       def stale_generated_webpack_files
+        stale_generated_files(client_files)
+      end
+
+      def stale_generated_files(files)
         manifest_needed = ReactOnRails::WebpackerUtils.using_webpacker? &&
                           !ReactOnRails::WebpackerUtils.manifest_exists?
 
         return ["manifest.json"] if manifest_needed
 
-        most_recent_mtime = find_most_recent_mtime
+        most_recent_mtime = Utils.find_most_recent_mtime(files)
         all_compiled_assets.each_with_object([]) do |webpack_generated_file, stale_gen_list|
           if !File.exist?(webpack_generated_file) ||
              File.mtime(webpack_generated_file) < most_recent_mtime
@@ -43,17 +47,14 @@ module ReactOnRails
 
       private
 
-      def find_most_recent_mtime
-        client_files.reduce(1.year.ago) do |newest_time, file|
-          mt = File.mtime(file)
-          mt > newest_time ? mt : newest_time
-        end
-      end
-
       def all_compiled_assets
         @all_compiled_assets ||= begin
           webpack_generated_files = @webpack_generated_files.map do |bundle_name|
-            ReactOnRails::Utils.bundle_js_file_path(bundle_name)
+            if bundle_name == ReactOnRails.configuration.server_bundle_js_file
+              ReactOnRails::Utils.server_bundle_js_file_path
+            else
+              ReactOnRails::Utils.bundle_js_file_path(bundle_name)
+            end
           end
 
           if webpack_generated_files.present?
@@ -62,10 +63,10 @@ module ReactOnRails
             file_list = make_file_list(make_globs(generated_assets_full_path)).to_ary
             puts "V" * 80
             puts "Please define config.webpack_generated_files (array) so the test helper knows "\
-            "which files are required. If you are using webpacker, you typically need to only "\
-            "include 'manifest.json'."
+                 "which files are required. If you are using webpacker, you typically need to only "\
+                 "include 'manifest.json'."
             puts "Detected the possible following files to check for webpack compilation in "\
-              "#{generated_assets_full_path}"
+                 "#{generated_assets_full_path}"
             puts file_list.join("\n")
             puts "^" * 80
             file_list

data/lib/react_on_rails/test_helper.rb

@@ -35,8 +35,17 @@ module ReactOnRails
     def self.configure_rspec_to_compile_assets(config, *metatags)
       metatags = %i[js server_rendering controller] if metatags.empty?
 
+      # Supported since RSpec 3.5.0
+      supports_first_matching_example = config.respond_to?(:when_first_matching_example_defined)
+
       metatags.each do |metatag|
-        config.before(:example, metatag) { ReactOnRails::TestHelper.ensure_assets_compiled }
+        if supports_first_matching_example
+          config.when_first_matching_example_defined(metatag) do
+            ReactOnRails::TestHelper.ensure_assets_compiled
+          end
+        else
+          config.before(:example, metatag) { ReactOnRails::TestHelper.ensure_assets_compiled }
+        end
       end
     end
 
@@ -52,6 +61,7 @@ module ReactOnRails
     #                        don't provide one.
     # webpack_generated_files List of files to check for up-to-date-status, defaulting to
     #                        webpack_generated_files in your configuration
+    # rubocop:disable Metrics/CyclomaticComplexity
     def self.ensure_assets_compiled(webpack_assets_status_checker: nil,
                                     webpack_assets_compiler: nil,
                                     source_path: nil,
@@ -71,10 +81,20 @@ module ReactOnRails
         unless @printed_once
           puts
           puts "====> React On Rails: Checking files in "\
-            "#{webpack_assets_status_checker.generated_assets_full_path} for "\
-            "outdated/missing bundles based on source_path #{source_path}"
+               "#{webpack_assets_status_checker.generated_assets_full_path} for "\
+               "outdated/missing bundles based on source_path #{source_path}"
           puts
           @printed_once = true
+
+          if ReactOnRails::WebpackerUtils.using_webpacker? &&
+             ReactOnRails::Utils.using_webpacker_source_path_is_not_defined_and_custom_node_modules?
+            msg = <<-MSG.strip_heredoc
+              WARNING: Define config.webpacker.yml to include sourcePath to configure
+              the location of your JavaScript source for React on Rails.
+              Default location of #{source_path} is used.
+            MSG
+            puts ReactOnRails::Utils.wrap_message(msg, :orange)
+          end
         end
       end
 
@@ -86,4 +106,5 @@ module ReactOnRails
       ).call
     end
   end
+  # rubocop:enable Metrics/CyclomaticComplexity
 end