react_on_rails 11.0.5 → 13.4.0

data/lib/react_on_rails/locales/base.rb

@@ -0,0 +1,169 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    def self.compile
+      config = ReactOnRails.configuration
+      check_config_directory_exists(
+        directory: config.i18n_dir, key_name: "config.i18n_dir",
+        remove_if: "not using the React on Rails i18n feature"
+      )
+      check_config_directory_exists(
+        directory: config.i18n_yml_dir, key_name: "config.i18n_yml_dir",
+        remove_if: "not using this i18n with React on Rails, or if you want to use all translation files"
+      )
+      if config.i18n_output_format&.downcase == "js"
+        ReactOnRails::Locales::ToJs.new
+      else
+        ReactOnRails::Locales::ToJson.new
+      end
+    end
+
+    def self.check_config_directory_exists(directory:, key_name:, remove_if:)
+      return if directory.nil?
+      return if Dir.exist?(directory)
+
+      msg = <<~MSG
+        Error configuring /config/initializers/react_on_rails.rb: invalid value for `#{key_name}`.
+        Directory does not exist: #{directory}. Set to value to nil or comment it
+        out if #{remove_if}.
+      MSG
+      raise ReactOnRails::Error, msg
+    end
+
+    private_class_method :check_config_directory_exists
+
+    class Base
+      def initialize
+        return if i18n_dir.nil?
+        return unless obsolete?
+
+        @translations, @defaults = generate_translations
+        convert
+      end
+
+      private
+
+      def file_format; end
+
+      def obsolete?
+        return true if exist_files.empty?
+
+        files_are_outdated
+      end
+
+      def exist_files
+        @exist_files ||= files.select { |file| File.exist?(file) }
+      end
+
+      def files_are_outdated
+        latest_yml = locale_files.map { |file| File.mtime(file) }.max
+        earliest = exist_files.map { |file| File.mtime(file) }.min
+        latest_yml > earliest
+      end
+
+      def file_names
+        %w[translations default]
+      end
+
+      def files
+        @files ||= file_names.map { |n| file(n) }
+      end
+
+      def file(name)
+        "#{i18n_dir}/#{name}.#{file_format}"
+      end
+
+      def locale_files
+        @locale_files ||= if i18n_yml_dir.present?
+                            Dir["#{i18n_yml_dir}/**/*.yml"]
+                          else
+                            ReactOnRails::Utils.truthy_presence(
+                              Rails.application && Rails.application.config.i18n.load_path
+                            ).presence
+                          end
+      end
+
+      def i18n_dir
+        @i18n_dir ||= ReactOnRails.configuration.i18n_dir
+      end
+
+      def i18n_yml_dir
+        @i18n_yml_dir ||= ReactOnRails.configuration.i18n_yml_dir
+      end
+
+      def default_locale
+        @default_locale ||= I18n.default_locale.to_s || "en"
+      end
+
+      def convert
+        file_names.each do |name|
+          template = send("template_#{name}")
+          path = file(name)
+          generate_file(template, path)
+        end
+      end
+
+      def generate_file(template, path)
+        result = ERB.new(template).result()
+        File.write(path, result)
+      end
+
+      def generate_translations
+        translations = {}
+        defaults = {}
+        locale_files.each do |f|
+          translation = YAML.safe_load(File.open(f))
+          key = translation.keys[0]
+          val = flatten(translation[key])
+          translations = translations.deep_merge(key => val)
+          defaults = defaults.deep_merge(flatten_defaults(val)) if key == default_locale
+        end
+        [translations.to_json, defaults.to_json]
+      end
+
+      def format(input)
+        input.to_s.tr(".", "_").camelize(:lower).to_sym
+      end
+
+      def flatten_defaults(val)
+        flatten(val).each_with_object({}) do |(k, v), h|
+          key = format(k)
+          h[key] = { id: k, defaultMessage: v }
+        end
+      end
+
+      def flatten(translations)
+        translations.each_with_object({}) do |(k, v), h|
+          if v.is_a? Hash
+            flatten(v).map { |hk, hv| h["#{k}.#{hk}".to_sym] = hv }
+          elsif v.is_a?(String)
+            h[k] = v.gsub("%{", "{")
+          elsif !v.is_a?(Array)
+            h[k] = v
+          end
+        end
+      end
+
+      def template_translations
+        <<-JS.strip_heredoc
+          export const translations = #{@translations};
+        JS
+      end
+
+      def template_default
+        <<-JS.strip_heredoc
+          import { defineMessages } from 'react-intl';
+
+          const defaultLocale = \'#{default_locale}\';
+
+          const defaultMessages = defineMessages(#{@defaults});
+
+          export { defaultMessages, defaultLocale };
+        JS
+      end
+    end
+  end
+end

data/lib/react_on_rails/locales/to_js.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJs < Base
+      private
+
+      def file_format
+        "js"
+      end
+
+      def template_translations
+        <<-JS.strip_heredoc
+          export const translations = #{@translations};
+        JS
+      end
+
+      def template_default
+        <<-JS.strip_heredoc
+          import { defineMessages } from 'react-intl';
+
+          const defaultLocale = \'#{default_locale}\';
+
+          const defaultMessages = defineMessages(#{@defaults});
+
+          export { defaultMessages, defaultLocale };
+        JS
+      end
+    end
+  end
+end

data/lib/react_on_rails/locales/to_json.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJson < Base
+      private
+
+      def file_format
+        "json"
+      end
+
+      def template_translations
+        @translations
+      end
+
+      def template_default
+        @defaults
+      end
+    end
+  end
+end

data/lib/react_on_rails/packs_generator.rb

@@ -0,0 +1,234 @@
+# frozen_string_literal: true
+
+require "fileutils"
+
+module ReactOnRails
+  # rubocop:disable Metrics/ClassLength
+  class PacksGenerator
+    CONTAINS_CLIENT_OR_SERVER_REGEX = /\.(server|client)($|\.)/.freeze
+    MINIMUM_SHAKAPACKER_VERSION = [6, 5, 1].freeze
+
+    def self.instance
+      @instance ||= PacksGenerator.new
+    end
+
+    def generate_packs_if_stale
+      return unless ReactOnRails.configuration.auto_load_bundle
+
+      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?
+
+      return if are_generated_files_present_and_up_to_date
+
+      clean_generated_packs_directory
+      generate_packs
+    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) }
+
+      create_server_pack if ReactOnRails.configuration.server_bundle_js_file.present?
+    end
+
+    def create_pack(file_path)
+      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)
+    end
+
+    def pack_file_contents(file_path)
+      registered_component_name = component_name(file_path)
+      <<~FILE_CONTENT
+        import ReactOnRails from 'react-on-rails';
+        import #{registered_component_name} from '#{relative_component_path_from_generated_pack(file_path)}';
+
+        ReactOnRails.register({#{registered_component_name}});
+      FILE_CONTENT
+    end
+
+    def create_server_pack
+      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)
+    end
+
+    def generated_server_pack_file_content
+      common_components_for_server_bundle = common_component_to_path.delete_if { |k| server_component_to_path.key?(k) }
+      component_for_server_registration_to_path = common_components_for_server_bundle.merge(server_component_to_path)
+
+      server_component_imports = component_for_server_registration_to_path.map do |name, component_path|
+        "import #{name} from '#{relative_path(generated_server_bundle_file_path, component_path)}';"
+      end
+
+      components_to_register = component_for_server_registration_to_path.keys
+
+      <<~FILE_CONTENT
+        import ReactOnRails from 'react-on-rails';
+
+        #{server_component_imports.join("\n")}
+
+        ReactOnRails.register({#{components_to_register.join(",\n")}});
+      FILE_CONTENT
+    end
+
+    def add_generated_pack_to_server_bundle
+      return if ReactOnRails.configuration.make_generated_server_bundle_the_entrypoint
+
+      relative_path_to_generated_server_bundle = relative_path(server_bundle_entrypoint,
+                                                               generated_server_bundle_file_path)
+      content = <<~FILE_CONTENT
+        // import statement added by react_on_rails:generate_packs rake task
+        import "./#{relative_path_to_generated_server_bundle}"
+      FILE_CONTENT
+
+      ReactOnRails::Utils.prepend_to_file_if_text_not_present(
+        file: server_bundle_entrypoint,
+        text_to_prepend: content,
+        regex: %r{import ['"]\./#{relative_path_to_generated_server_bundle}['"]}
+      )
+    end
+
+    def generated_server_bundle_file_path
+      return server_bundle_entrypoint if ReactOnRails.configuration.make_generated_server_bundle_the_entrypoint
+
+      generated_server_bundle_file_path = server_bundle_entrypoint.sub(".js", "-generated.js")
+      generated_server_bundle_file_name = component_name(generated_server_bundle_file_path)
+      source_entrypoint_parent = Pathname(ReactOnRails::WebpackerUtils.webpacker_source_entry_path).parent
+      generated_nonentrypoints_path = "#{source_entrypoint_parent}/generated"
+
+      FileUtils.mkdir_p(generated_nonentrypoints_path)
+      "#{generated_nonentrypoints_path}/#{generated_server_bundle_file_name}.js"
+    end
+
+    def clean_generated_packs_directory
+      FileUtils.rm_rf(generated_packs_directory_path)
+      FileUtils.mkdir_p(generated_packs_directory_path)
+    end
+
+    def server_bundle_entrypoint
+      Rails.root.join(ReactOnRails::WebpackerUtils.webpacker_source_entry_path,
+                      ReactOnRails.configuration.server_bundle_js_file)
+    end
+
+    def generated_packs_directory_path
+      source_entry_path = ReactOnRails::WebpackerUtils.webpacker_source_entry_path
+
+      "#{source_entry_path}/generated"
+    end
+
+    def relative_component_path_from_generated_pack(ror_component_path)
+      component_file_pathname = Pathname.new(ror_component_path)
+      component_generated_pack_path = generated_pack_path(ror_component_path)
+      generated_pack_pathname = Pathname.new(component_generated_pack_path)
+
+      relative_path(generated_pack_pathname, component_file_pathname)
+    end
+
+    def relative_path(from, to)
+      from_path = Pathname.new(from)
+      to_path = Pathname.new(to)
+
+      relative_path = to_path.relative_path_from(from_path)
+      relative_path.sub("../", "")
+    end
+
+    def generated_pack_path(file_path)
+      "#{generated_packs_directory_path}/#{component_name(file_path)}.js"
+    end
+
+    def component_name(file_path)
+      basename = File.basename(file_path, File.extname(file_path))
+
+      basename.sub(CONTAINS_CLIENT_OR_SERVER_REGEX, "")
+    end
+
+    def component_name_to_path(paths)
+      paths.to_h { |path| [component_name(path), path] }
+    end
+
+    def common_component_to_path
+      common_components_paths = Dir.glob("#{components_search_path}/*").reject do |f|
+        CONTAINS_CLIENT_OR_SERVER_REGEX.match?(f)
+      end
+      component_name_to_path(common_components_paths)
+    end
+
+    def client_component_to_path
+      client_render_components_paths = Dir.glob("#{components_search_path}/*.client.*")
+      client_specific_components = component_name_to_path(client_render_components_paths)
+
+      duplicate_components = common_component_to_path.slice(*client_specific_components.keys)
+      duplicate_components.each_key { |component| raise_client_component_overrides_common(component) }
+
+      client_specific_components
+    end
+
+    def server_component_to_path
+      server_render_components_paths = Dir.glob("#{components_search_path}/*.server.*")
+      server_specific_components = component_name_to_path(server_render_components_paths)
+
+      duplicate_components = common_component_to_path.slice(*server_specific_components.keys)
+      duplicate_components.each_key { |component| raise_server_component_overrides_common(component) }
+
+      server_specific_components.each_key do |k|
+        raise_missing_client_component(k) unless client_component_to_path.key?(k)
+      end
+
+      server_specific_components
+    end
+
+    def components_search_path
+      source_path = ReactOnRails::WebpackerUtils.webpacker_source_path
+
+      "#{source_path}/**/#{ReactOnRails.configuration.components_subdirectory}"
+    end
+
+    def raise_client_component_overrides_common(component_name)
+      msg = <<~MSG
+        **ERROR** ReactOnRails: client specific definition for Component '#{component_name}' overrides the \
+        common definition. Please delete the common definition and have separate server and client files. For more \
+        information, please see https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md
+      MSG
+
+      raise ReactOnRails::Error, msg
+    end
+
+    def raise_server_component_overrides_common(component_name)
+      msg = <<~MSG
+        **ERROR** ReactOnRails: server specific definition for Component '#{component_name}' overrides the \
+        common definition. Please delete the common definition and have separate server and client files. For more \
+        information, please see https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md
+      MSG
+
+      raise ReactOnRails::Error, msg
+    end
+
+    def raise_missing_client_component(component_name)
+      msg = <<~MSG
+        **ERROR** ReactOnRails: Component '#{component_name}' is missing a client specific file. For more \
+        information, please see https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md
+      MSG
+
+      raise ReactOnRails::Error, msg
+    end
+
+    def stale_or_missing_packs?
+      component_files = common_component_to_path.values + client_component_to_path.values
+      most_recent_mtime = Utils.find_most_recent_mtime(component_files).to_i
+
+      component_files.each_with_object([]).any? do |file|
+        path = generated_pack_path(file)
+        !File.exist?(path) || File.mtime(path).to_i < most_recent_mtime
+      end
+    end
+  end
+  # rubocop:enable Metrics/ClassLength
+end

data/lib/react_on_rails/prerender_error.rb

@@ -3,6 +3,9 @@
 # rubocop:disable: Layout/IndentHeredoc
 module ReactOnRails
   class PrerenderError < ::ReactOnRails::Error
+    MAX_ERROR_SNIPPET_TO_LOG = 1000
+    # TODO: Consider remove providing original `err` as already have access to `self.cause`
+    # http://blog.honeybadger.io/nested-errors-in-ruby-with-exception-cause/
     attr_reader :component_name, :err, :props, :js_code, :console_messages
 
     # err might be nil if JS caught the error
@@ -27,47 +30,52 @@ module ReactOnRails
       to_error_context
     end
 
+    def to_error_context
+      result = {
+        component_name: component_name,
+        err: err,
+        props: props,
+        js_code: js_code,
+        console_messages: console_messages
+      }
+
+      result.merge!(err.to_error_context) if err.respond_to?(:to_error_context)
+      result
+    end
+
     private
 
     def calc_message(component_name, console_messages, err, js_code, props)
-      message = "ERROR in SERVER PRERENDERING\n".dup
+      message = +"ERROR in SERVER PRERENDERING\n"
       if err
-        # rubocop:disable Layout/IndentHeredoc
-        message << <<-MSG
-Encountered error: \"#{err}\"
+        message << <<~MSG
+          Encountered error:
+
+          #{err}
+
         MSG
-        # rubocop:enable Layout/IndentHeredoc
-        backtrace = err.backtrace.join("\n")
+
+        backtrace = err.backtrace.first(15).join("\n")
       else
         backtrace = nil
       end
-      # rubocop:disable Layout/IndentHeredoc
-      message << <<-MSG
-when prerendering #{component_name} with props: #{props}
-js_code was:
-#{js_code}
+      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
-      # rubocop:enable Layout/IndentHeredoc
 
       if console_messages
-        # rubocop:disable Layout/IndentHeredoc
-        message << <<-MSG
-console messages:
-#{console_messages}
+        message << <<~MSG
+          console messages:
+          #{console_messages}
         MSG
-        # rubocop:enable Layout/IndentHeredoc
+
       end
       [backtrace, message]
     end
-
-    def to_error_context
-      {
-        component_name: component_name,
-        err: err,
-        props: props,
-        js_code: js_code,
-        console_messages: console_messages
-      }
-    end
   end
 end

data/lib/react_on_rails/react_component/render_options.rb

@@ -7,8 +7,11 @@ module ReactOnRails
     class RenderOptions
       include Utils::Required
 
+      attr_accessor :request_digest
+
       NO_PROPS = {}.freeze
 
+      # 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
         @options = options
@@ -16,12 +19,48 @@ module ReactOnRails
 
       attr_reader :react_component_name
 
+      def throw_js_errors
+        options.fetch(:throw_js_errors, false)
+      end
+
       def props
         options.fetch(:props) { NO_PROPS }
       end
 
+      def client_props
+        props_extension = ReactOnRails.configuration.rendering_props_extension
+        if props_extension.present?
+          if props_extension.respond_to?(:adjust_props_for_client_side_hydration)
+            return props_extension.adjust_props_for_client_side_hydration(react_component_name,
+                                                                          props.clone)
+          end
+
+          raise ReactOnRails::Error, "ReactOnRails: your rendering_props_extension module is missing the "\
+                                     "required adjust_props_for_client_side_hydration method & can not be used"
+        end
+        props
+      end
+
+      def random_dom_id
+        retrieve_configuration_value_for(:random_dom_id)
+      end
+
       def dom_id
-        @dom_id ||= options.fetch(:id) { generate_unique_dom_id }
+        @dom_id ||= options.fetch(:id) do
+          if random_dom_id
+            generate_unique_dom_id
+          else
+            base_dom_id
+          end
+        end
+      end
+
+      def random_dom_id?
+        return false if options[:id]
+
+        return false unless random_dom_id
+
+        true
       end
 
       def html_options
@@ -29,38 +68,54 @@ module ReactOnRails
       end
 
       def prerender
-        retrieve_key(:prerender)
+        retrieve_configuration_value_for(:prerender)
+      end
+
+      def auto_load_bundle
+        retrieve_configuration_value_for(:auto_load_bundle)
       end
 
       def trace
-        retrieve_key(:trace)
+        retrieve_configuration_value_for(:trace)
       end
 
       def replay_console
-        retrieve_key(:replay_console)
+        retrieve_configuration_value_for(:replay_console)
       end
 
       def raise_on_prerender_error
-        retrieve_key(:raise_on_prerender_error)
+        retrieve_configuration_value_for(:raise_on_prerender_error)
       end
 
       def logging_on_server
-        retrieve_key(:logging_on_server)
+        retrieve_configuration_value_for(:logging_on_server)
       end
 
       def to_s
-        "{ react_component_name = #{react_component_name}, options = #{options}"
+        "{ react_component_name = #{react_component_name}, options = #{options}, request_digest = #{request_digest}"
+      end
+
+      def internal_option(key)
+        options[key]
+      end
+
+      def set_option(key, value)
+        options[key] = value
       end
 
       private
 
       attr_reader :options
 
+      def base_dom_id
+        "#{react_component_name}-react-component"
+      end
+
       def generate_unique_dom_id
-        "#{react_component_name}-react-component-#{SecureRandom.uuid}"
+        "#{base_dom_id}-#{SecureRandom.uuid}"
       end
 
-      def retrieve_key(key)
+      def retrieve_configuration_value_for(key)
         options.fetch(key) do
           ReactOnRails.configuration.public_send(key)
         end