react_on_rails 11.3.1 → 12.0.0.pre.beta.0

data/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-ts',
+  testEnvironment: 'jsdom',
+};

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -50,7 +50,7 @@ module ReactOnRails
         contents = File.read(package_json)
         replacement_value = <<-STRING
   "scripts": {
-    "postinstall": "yarn link react-on-rails",
+    "postinstall": "yalc link react-on-rails",
         STRING
         new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
                                                          replacement_value)

data/lib/generators/react_on_rails/generator_helper.rb

@@ -15,13 +15,11 @@ module GeneratorHelper
   end
 
   def setup_file_error(file, data)
-    # rubocop:disable Layout/IndentHeredoc
-    <<-MSG
-#{file} was not found.
-Please add the following content to your #{file} file:
-#{data}
+    <<~MSG
+      #{file} was not found.
+      Please add the following content to your #{file} file:
+      #{data}
     MSG
-    # rubocop:enable Layout/IndentHeredoc
   end
 
   def empty_directory_with_keep_file(destination, config = {})

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -25,19 +25,20 @@ export default class HelloWorld extends React.Component {
     return (
       <div>
         <h3>
-          Hello, {this.state.name}!
+          Hello,
+          {this.state.name}!
         </h3>
         <hr />
-        <form >
+        <form>
           <label htmlFor="name">
             Say hello to:
+            <input
+              id="name"
+              type="text"
+              value={this.state.name}
+              onChange={(e) => this.updateName(e.target.value)}
+            />
           </label>
-          <input
-            id="name"
-            type="text"
-            value={this.state.name}
-            onChange={(e) => this.updateName(e.target.value)}
-          />
         </form>
       </div>
     );

data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb

@@ -14,15 +14,8 @@ require "rspec/rails"
 require "capybara/rspec"
 require "capybara/rails"
 Capybara.javascript_driver = :selenium_chrome
-
-# From https://stackoverflow.com/a/56522500/1009332
-capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
-  chromeOptions: { args: %w[headless window-size=1280,800], w3c: false }
-)
 Capybara.register_driver :selenium_chrome do |app|
-  Capybara::Selenium::Driver.new(app,
-                                 browser: :chrome,
-                                 desired_capabilities: capabilities)
+  Capybara::Selenium::Driver.new(app, browser: :chrome)
 end
 
 # Requires supporting ruby files with custom matchers and macros, etc, in

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -4,19 +4,15 @@ import React from 'react';
 const HelloWorld = ({ name, updateName }) => (
   <div>
     <h3>
-      Hello, {name}!
+      Hello,
+      {name}!
     </h3>
     <hr />
-    <form >
+    <form>
       <label htmlFor="name">
         Say hello to:
+        <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
       </label>
-      <input
-        id="name"
-        type="text"
-        value={name}
-        onChange={(e) => updateName(e.target.value)}
-      />
     </form>
   </div>
 );

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js

@@ -1,8 +1,6 @@
 import { createStore } from 'redux';
 import helloWorldReducer from '../reducers/helloWorldReducer';
 
-const configureStore = (railsProps) => (
-  createStore(helloWorldReducer, railsProps)
-);
+const configureStore = (railsProps) => createStore(helloWorldReducer, railsProps);
 
 export default configureStore;

data/lib/react_on_rails.rb

@@ -22,4 +22,6 @@ require "react_on_rails/webpacker_utils"
 require "react_on_rails/test_helper/webpack_assets_compiler"
 require "react_on_rails/test_helper/webpack_assets_status_checker"
 require "react_on_rails/test_helper/ensure_assets_compiled"
-require "react_on_rails/locales_to_js"
+require "react_on_rails/locales/base"
+require "react_on_rails/locales/to_js"
+require "react_on_rails/locales/to_json"

data/lib/react_on_rails/configuration.rb

@@ -31,10 +31,11 @@ module ReactOnRails
       webpack_generated_files: %w[manifest.json],
       rendering_extension: nil,
       server_render_method: nil,
-      symlink_non_digested_assets_regex: nil,
       build_test_command: "",
       build_production_command: "",
-      random_dom_id: DEFAULT_RANDOM_DOM_ID
+      random_dom_id: DEFAULT_RANDOM_DOM_ID,
+      same_bundle_for_client_and_server: false,
+      i18n_output_format: nil
     )
   end
 
@@ -46,8 +47,9 @@ module ReactOnRails
                   :generated_assets_dirs, :generated_assets_dir,
                   :webpack_generated_files, :rendering_extension, :build_test_command,
                   :build_production_command,
-                  :i18n_dir, :i18n_yml_dir,
-                  :server_render_method, :symlink_non_digested_assets_regex, :random_dom_id
+                  :i18n_dir, :i18n_yml_dir, :i18n_output_format,
+                  :server_render_method, :random_dom_id,
+                  :same_bundle_for_client_and_server
 
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
                    replay_console: nil,
@@ -58,16 +60,17 @@ module ReactOnRails
                    generated_assets_dir: nil, webpack_generated_files: nil,
                    rendering_extension: nil, build_test_command: nil,
                    build_production_command: nil,
-                   i18n_dir: nil, i18n_yml_dir: nil, random_dom_id: nil,
-                   server_render_method: nil, symlink_non_digested_assets_regex: nil)
+                   same_bundle_for_client_and_server: nil,
+                   i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil,
+                   random_dom_id: nil, server_render_method: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
-      self.server_bundle_js_file = server_bundle_js_file
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
       self.build_test_command = build_test_command
       self.build_production_command = build_production_command
       self.i18n_dir = i18n_dir
       self.i18n_yml_dir = i18n_yml_dir
+      self.i18n_output_format = i18n_output_format
 
       self.random_dom_id = random_dom_id
       self.prerender = prerender
@@ -83,6 +86,8 @@ module ReactOnRails
       self.skip_display_none = skip_display_none
 
       # Server rendering:
+      self.server_bundle_js_file = server_bundle_js_file
+      self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
 
@@ -90,7 +95,6 @@ module ReactOnRails
       self.rendering_extension = rendering_extension
 
       self.server_render_method = server_render_method
-      self.symlink_non_digested_assets_regex = symlink_non_digested_assets_regex
     end
 
     # on ReactOnRails
@@ -99,7 +103,6 @@ module ReactOnRails
       configure_generated_assets_dirs_deprecation
       configure_skip_display_none_deprecation
       ensure_generated_assets_dir_present
-      ensure_server_bundle_js_file_has_no_path
       check_i18n_directory_exists
       check_i18n_yml_directory_exists
       check_server_render_method_is_only_execjs
@@ -198,24 +201,12 @@ module ReactOnRails
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      files = ["hello-world-bundle.js"]
+      files = ["manifest.json"]
       files << server_bundle_js_file if server_bundle_js_file.present?
 
       self.webpack_generated_files = files
     end
 
-    def ensure_server_bundle_js_file_has_no_path
-      return unless server_bundle_js_file.include?(File::SEPARATOR)
-
-      assets_dir = ReactOnRails::Utils.generated_assets_full_path
-      self.server_bundle_js_file = File.basename(server_bundle_js_file)
-
-      Rails.logger.warn do
-        "[DEPRECATION] ReactOnRails: remove path from server_bundle_js_file in configuration. "\
-      "All generated files must go in #{assets_dir}. Using file basename #{server_bundle_js_file}"
-      end
-    end
-
     def configure_skip_display_none_deprecation
       return if skip_display_none.nil?
 

data/lib/react_on_rails/error.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ReactOnRails
   class Error < StandardError
   end

data/lib/react_on_rails/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,7 +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 global default.
+    # 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"]
@@ -112,20 +65,24 @@ 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 for #{component_name}. 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 JavaScript code."
+        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
@@ -136,7 +93,7 @@ module ReactOnRails
     # 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 generator function for server rendering must return an Object rather than a React component.
+    # 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:
@@ -166,10 +123,12 @@ module ReactOnRails
           render_options: internal_result[:render_options]
         )
       else
-        msg = <<-MSG.strip_heredoc
-          Generator function used by react_component_hash for #{component_name} is expected to return
+        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."
+          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
@@ -178,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.
@@ -278,11 +240,12 @@ module ReactOnRails
     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.
+    # 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,
@@ -395,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
@@ -551,17 +512,6 @@ module ReactOnRails
       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_parse_error.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module ReactOnRails
   class JsonParseError < ::ReactOnRails::Error
     attr_reader :json

data/lib/react_on_rails/locales/base.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    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