react_on_rails 11.0.3 → 12.0.0

data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb}

@@ -15,68 +15,20 @@ module ReactOnRails
   module Helper
     include ReactOnRails::Utils::Required
 
-    COMPONENT_HTML_KEY = "componentHtml".freeze
+    COMPONENT_HTML_KEY = "componentHtml"
 
-    # The env_javascript_include_tag and env_stylesheet_link_tag support the usage of a webpack
-    # dev server for providing the JS and CSS assets during development mode. See
-    # https://github.com/shakacode/react-webpack-rails-tutorial/ for a working example.
+    # 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
+    #   props and the railsContext, like this:
     #
-    # The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
-    # these params are optional, and support either a single value, or an array.
+    #   let MyReactComponentApp = (props, railsContext) => <MyReactComponent {...props}/>;
     #
-    # static vs. hot is picked based on whether
-    # ENV["REACT_ON_RAILS_ENV"] == "HOT"
+    #   Alternately, you can define the render function with an additional property
+    #   `.renderFunction = true`:
     #
-    #   <%= env_stylesheet_link_tag(static: 'application_static',
-    #                               hot: 'application_non_webpack',
-    #                               media: 'all',
-    #                               'data-turbolinks-track' => "reload")  %>
+    #   let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
+    #   MyReactComponent.renderFunction = true;
     #
-    #   <!-- These do not use turbolinks, so no data-turbolinks-track -->
-    #   <!-- This is to load the hot assets. -->
-    #   <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
-    #                                        'http://localhost:3500/app-bundle.js']) %>
-    #
-    #   <!-- These do use turbolinks -->
-    #   <%= env_javascript_include_tag(static: 'application_static',
-    #                                  hot: 'application_non_webpack',
-    #                                  'data-turbolinks-track' => "reload") %>
-    #
-    # NOTE: for Turbolinks 2.x, use 'data-turbolinks-track' => true
-    # See application.html.erb for usage example
-    # https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb
-    def env_javascript_include_tag(args = {})
-      send_tag_method(:javascript_include_tag, args)
-    end
-
-    # Helper to set CSS assets depending on if we want static or "hot", which means from the
-    # Webpack dev server.
-    #
-    # In this example, application_non_webpack is simply a CSS asset pipeline file which includes
-    # styles not placed in the webpack build.
-    #
-    # We don't need styles from the webpack build, as those will come via the JavaScript include
-    # tags.
-    #
-    # The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
-    # these params are optional, and support either a single value, or an array.
-    #
-    #   <%= env_stylesheet_link_tag(static: 'application_static',
-    #                               hot: 'application_non_webpack',
-    #                               media: 'all',
-    #                               'data-turbolinks-track' => true)  %>
-    #
-    def env_stylesheet_link_tag(args = {})
-      send_tag_method(:stylesheet_link_tag, args)
-    end
-
-    # react_component_name: can be a React component, created using a ES6 class, or
-    #   React.createClass, or a
-    #    `generator function` that returns a React component
-    #      using ES6
-    #         let MyReactComponentApp = (props, railsContext) => <MyReactComponent {...props}/>;
-    #      or using ES5
-    #         var MyReactComponentApp = function(props, railsContext) { return <YourReactComponent {...props}/>; }
     #   Exposing the react_component_name is necessary to both a plain ReactComponent as well as
     #     a generator:
     #   See README.md for how to "register" your react components.
@@ -98,6 +50,8 @@ module ReactOnRails
     #   raise_on_prerender_error: <true/false> Default to false. True will raise exception on server
     #      if the JS code throws
     # Any other options are passed to the content tag, including the id.
+    # random_dom_id can be set to override the default from the config/initializers. That's only
+    # used if you have multiple instance of the same component on the Rails view.
     def react_component(component_name, options = {})
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
@@ -111,26 +65,48 @@ module ReactOnRails
           render_options: internal_result[:render_options]
         )
       elsif server_rendered_html.is_a?(Hash)
-        msg = <<-MSG.strip_heredoc
-        Use react_component_hash (not react_component) to return a Hash to your ruby view code. See
-        https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
-        for an example of the necessary javascript configuration."
+        msg = <<~MSG
+          Use react_component_hash (not react_component) to return a Hash to your ruby view code. See
+          https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
+          for an example of the necessary javascript configuration.
         MSG
         raise ReactOnRails::Error, msg
-
       else
-        msg = <<-MSG.strip_heredoc
-        ReactOnRails: server_rendered_html is expected to be a String. If you're trying to
-        use a generator function to return a Hash to your ruby view code, then use
-        react_component_hash instead of react_component and see
-        https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
-        for an example of the necessary javascript configuration."
+        class_name = server_rendered_html.class.name
+        msg = <<~MSG
+          ReactOnRails: server_rendered_html is expected to be a String or Hash for #{component_name}.
+          Type is #{class_name}
+          Value:
+          #{server_rendered_html}
+
+          If you're trying to use a render function to return a Hash to your ruby view code, then use
+          react_component_hash instead of react_component and see
+          https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
+          for an example of the JavaScript code.
         MSG
         raise ReactOnRails::Error, msg
       end
     end
 
+    # react_component_hash is used to return multiple HTML strings for server rendering, such as for
+    # adding meta-tags to a page.
+    # It is exactly like react_component except for the following:
+    # 1. prerender: true is automatically added, as this method doesn't make sense for client only
+    #    rendering.
+    # 2. Your JavaScript render function for server rendering must return an Object rather than a React component.
+    # 3. Your view code must expect an object and not a string.
+    #
+    # Here is an example of the view code:
+    #    <% react_helmet_app = react_component_hash("ReactHelmetApp", prerender: true,
+    #                                               props: { helloWorldData: { name: "Mr. Server Side Rendering"}},
+    #                                               id: "react-helmet-0", trace: true) %>
+    #    <% content_for :title do %>
+    #      <%= react_helmet_app['title'] %>
+    #    <% end %>
+    #    <%= react_helmet_app["componentHtml"] %>
+    #
     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"]
@@ -147,10 +123,12 @@ module ReactOnRails
           render_options: internal_result[:render_options]
         )
       else
-        msg = <<-MSG.strip_heredoc
-        Generator function used by react_component_hash is expected to return an Object. See
-        https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
-        for an example of the necessary javascript configuration.
+        msg = <<~MSG
+          render function used by react_component_hash for #{component_name} is expected to return
+          an Object. See https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
+          for an example of the JavaScript code.
+          Note, your render function must either take 2 params or have the property
+          `.renderFunction = true` added to it to distinguish it from a React Function Component.
         MSG
         raise ReactOnRails::Error, msg
       end
@@ -159,6 +137,9 @@ module ReactOnRails
     # Separate initialization of store from react_component allows multiple react_component calls to
     # use the same Redux store.
     #
+    # NOTE: This technique not recommended as it prevents dynamic code splitting for performance.
+    # Instead, you should use the standard react_component view helper.
+    #
     # store_name: name of the store, corresponding to your call to ReactOnRails.registerStores in your
     #             JavaScript code.
     # props: Ruby Hash or JSON string which contains the properties to pass to the redux store.
@@ -187,6 +168,7 @@ module ReactOnRails
     # that contains a data props.
     def redux_store_hydration_data
       return if @registered_stores_defer_render.blank?
+
       @registered_stores_defer_render.reduce("".dup) do |accum, redux_store_data|
         accum << render_redux_store_data(redux_store_data)
       end.html_safe
@@ -246,7 +228,8 @@ module ReactOnRails
 
     def json_safe_and_pretty(hash_or_string)
       return "{}" if hash_or_string.nil?
-      unless hash_or_string.class.in?([Hash, String])
+
+      unless hash_or_string.is_a?(String) || hash_or_string.is_a?(Hash)
         raise ReactOnRails::Error, "#{__method__} only accepts String or Hash as argument "\
             "(#{hash_or_string.class} given)."
       end
@@ -256,6 +239,60 @@ module ReactOnRails
       ReactOnRails::JsonOutput.escape(json_value)
     end
 
+    # This is the definitive list of the default values used for the rails_context, which is the
+    # second parameter passed to both component and store render functions.
+    # This method can be called from views and from the controller, as `helpers.rails_context`
+    #
+    # rubocop:disable Metrics/AbcSize
+    def rails_context(server_side: true)
+      # ALERT: Keep in sync with node_package/src/types/index.ts for the properties of RailsContext
+      @rails_context ||= begin
+        result = {
+          railsEnv: Rails.env,
+          inMailer: in_mailer?,
+          # Locale settings
+          i18nLocale: I18n.locale,
+          i18nDefaultLocale: I18n.default_locale,
+          rorVersion: ReactOnRails::VERSION,
+          rorPro: ReactOnRails::Utils.react_on_rails_pro?
+        }
+        if defined?(request) && request.present?
+          # Check for encoding of the request's original_url and try to force-encoding the
+          # URLs as UTF-8. This situation can occur in browsers that do not encode the
+          # entire URL as UTF-8 already, mostly on the Windows platform (IE11 and lower).
+          original_url_normalized = request.original_url
+          if original_url_normalized.encoding.to_s == "ASCII-8BIT"
+            original_url_normalized = original_url_normalized.force_encoding("ISO-8859-1").encode("UTF-8")
+          end
+
+          # Using Addressable instead of standard URI to better deal with
+          # non-ASCII characters (see https://github.com/shakacode/react_on_rails/pull/405)
+          uri = Addressable::URI.parse(original_url_normalized)
+          # uri = Addressable::URI.parse("http://foo.com:3000/posts?id=30&limit=5#time=1305298413")
+
+          result.merge!(
+            # URL settings
+            href: uri.to_s,
+            location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}" : ''}",
+            scheme: uri.scheme, # http
+            host: uri.host, # foo.com
+            port: uri.port,
+            pathname: uri.path, # /posts
+            search: uri.query, # id=30&limit=5
+            httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
+          )
+        end
+        if ReactOnRails.configuration.rendering_extension
+          custom_context = ReactOnRails.configuration.rendering_extension.custom_context(self)
+          result.merge!(custom_context) if custom_context
+        end
+        result
+      end
+
+      @rails_context.merge(serverSide: server_side)
+    end
+    # rubocop:enable Metrics/AbcSize
+
     private
 
     def build_react_component_result_for_server_rendered_string(
@@ -265,9 +302,15 @@ module ReactOnRails
       render_options: required("render_options")
     )
       content_tag_options = render_options.html_options
+      if content_tag_options.key?(:tag)
+        content_tag_options_html_tag = content_tag_options[:tag]
+        content_tag_options.delete(:tag)
+      else
+        content_tag_options_html_tag = "div"
+      end
       content_tag_options[:id] = render_options.dom_id
 
-      rendered_output = content_tag(:div,
+      rendered_output = content_tag(content_tag_options_html_tag.to_sym,
                                     server_rendered_html.html_safe,
                                     content_tag_options)
 
@@ -315,13 +358,11 @@ module ReactOnRails
 
     def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output, console_script)
       # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
-      # rubocop:disable Layout/IndentHeredoc
-      <<-HTML.html_safe
-#{rendered_output}
-      #{component_specification_tag}
-      #{console_script}
+      <<~HTML.html_safe
+        #{rendered_output}
+              #{component_specification_tag}
+              #{console_script}
       HTML
-      # rubocop:enable Layout/IndentHeredoc
     end
 
     # prepend the rails_context if not yet applied
@@ -412,22 +453,13 @@ module ReactOnRails
       #
       # Read more here: http://timelessrepo.com/json-isnt-a-javascript-subset
 
-      # rubocop:disable Layout/IndentHeredoc
-      js_code = <<-JS
-(function() {
-  var railsContext = #{rails_context(server_side: true).to_json};
-#{initialize_redux_stores}
-  var props = #{props_string(props).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029')};
-  return ReactOnRails.serverRenderReactComponent({
-    name: '#{react_component_name}',
-    domNodeId: '#{render_options.dom_id}',
-    props: props,
-    trace: #{render_options.trace},
-    railsContext: railsContext
-  });
-})()
-      JS
-      # rubocop:enable Layout/IndentHeredoc
+      js_code = ReactOnRails::ServerRenderingJsCode.server_rendering_component_js_code(
+        props_string: props_string(props).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029'),
+        rails_context: rails_context(server_side: true).to_json,
+        redux_stores: initialize_redux_stores,
+        react_component_name: react_component_name,
+        render_options: render_options
+      )
 
       begin
         result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(js_code, render_options)
@@ -454,14 +486,15 @@ module ReactOnRails
     end
 
     def initialize_redux_stores
-      return "" unless @registered_stores.present? || @registered_stores_defer_render.present?
-      declarations = "var reduxProps, store, storeGenerator;\n".dup
-      all_stores = (@registered_stores || []) + (@registered_stores_defer_render || [])
-
       result = <<-JS.dup
       ReactOnRails.clearHydratedStores();
       JS
 
+      return result unless @registered_stores.present? || @registered_stores_defer_render.present?
+
+      declarations = "var reduxProps, store, storeGenerator;\n".dup
+      all_stores = (@registered_stores || []) + (@registered_stores_defer_render || [])
+
       result << all_stores.each_with_object(declarations) do |redux_store_data, memo|
         store_name = redux_store_data[:store_name]
         props = props_string(redux_store_data[:props])
@@ -475,71 +508,10 @@ module ReactOnRails
       result
     end
 
-    # This is the definitive list of the default values used for the rails_context, which is the
-    # second parameter passed to both component and store generator functions.
-    # rubocop:disable Metrics/AbcSize
-    def rails_context(server_side: required("server_side"))
-      @rails_context ||= begin
-        result = {
-          railsEnv: Rails.env,
-          inMailer: in_mailer?,
-          # Locale settings
-          i18nLocale: I18n.locale,
-          i18nDefaultLocale: I18n.default_locale
-        }
-        if defined?(request) && request.present?
-          # Check for encoding of the request's original_url and try to force-encoding the
-          # URLs as UTF-8. This situation can occur in browsers that do not encode the
-          # entire URL as UTF-8 already, mostly on the Windows platform (IE11 and lower).
-          original_url_normalized = request.original_url
-          if original_url_normalized.encoding.to_s == "ASCII-8BIT"
-            original_url_normalized = original_url_normalized.force_encoding("ISO-8859-1").encode("UTF-8")
-          end
-
-          # Using Addressable instead of standard URI to better deal with
-          # non-ASCII characters (see https://github.com/shakacode/react_on_rails/pull/405)
-          uri = Addressable::URI.parse(original_url_normalized)
-          # uri = Addressable::URI.parse("http://foo.com:3000/posts?id=30&limit=5#time=1305298413")
-
-          result.merge!(
-            # URL settings
-            href: uri.to_s,
-            location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}" : ''}",
-            scheme: uri.scheme, # http
-            host: uri.host, # foo.com
-            port: uri.port,
-            pathname: uri.path, # /posts
-            search: uri.query, # id=30&limit=5
-            httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
-          )
-        end
-        if ReactOnRails.configuration.rendering_extension
-          custom_context = ReactOnRails.configuration.rendering_extension.custom_context(self)
-          result.merge!(custom_context) if custom_context
-        end
-        result
-      end
-
-      @rails_context.merge(serverSide: server_side)
-    end
-
-    # rubocop:enable Metrics/AbcSize
-
     def replay_console_option(val)
       val.nil? ? ReactOnRails.configuration.replay_console : val
     end
 
-    def use_hot_reloading?
-      ENV["REACT_ON_RAILS_ENV"] == "HOT"
-    end
-
-    def send_tag_method(tag_method_name, args)
-      asset_type = use_hot_reloading? ? :hot : :static
-      assets = Array(args[asset_type])
-      options = args.delete_if { |key, _value| %i[hot static].include?(key) }
-      send(tag_method_name, *assets, options) unless assets.empty?
-    end
-
     def in_mailer?
       return false unless defined?(controller)
       return false unless defined?(ActionMailer::Base)

data/lib/react_on_rails/json_output.rb

@@ -11,7 +11,7 @@ module ReactOnRails
       "\u2028" => '\u2028',
       "\u2029" => '\u2029'
     }.freeze
-    ESCAPE_REGEXP = /[\u2028\u2029&><]/u
+    ESCAPE_REGEXP = /[\u2028\u2029&><]/u.freeze
 
     def self.escape(json)
       return escape_without_erb_util(json) if Utils.rails_version_less_than_4_1_1

data/lib/react_on_rails/json_parse_error.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ReactOnRails
+  class JsonParseError < ::ReactOnRails::Error
+    attr_reader :json
+
+    def initialize(parse_error, json)
+      @json = json
+      @original_error = parse_error
+      super(parse_error.message)
+    end
+
+    def to_honeybadger_context
+      to_error_context
+    end
+
+    def raven_context
+      to_error_context
+    end
+
+    def to_error_context
+      {
+        original_error: @original_error,
+        json: @json
+      }
+    end
+  end
+end

data/lib/react_on_rails/locales/base.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    def self.compile
+      if ReactOnRails.configuration.i18n_output_format&.downcase == "js"
+        ReactOnRails::Locales::ToJs.new
+      else
+        ReactOnRails::Locales::ToJson.new
+      end
+    end
+
+    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.method(:exist?))
+      end
+
+      def files_are_outdated
+        latest_yml = locale_files.map(&File.method(:mtime)).max
+        earliest = exist_files.map(&File.method(:mtime)).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 ||= begin
+          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
+      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.open(path, "w") do |f|
+          f.write(result)
+        end
+      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,37 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJs < Base
+      def initialize
+        super
+      end
+
+      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,27 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJson < Base
+      def initialize
+        super
+      end
+
+      private
+
+      def file_format
+        "json"
+      end
+
+      def template_translations
+        @translations
+      end
+
+      def template_default
+        @defaults
+      end
+    end
+  end
+end