react_on_rails 13.0.2 → 13.1.0

data/docs/guides/i18n.md

@@ -1,99 +1,87 @@
-# I18n
+# Internationalization
 
-Here's a summary of adding the I18n functionality.
+You can use [Rails internationalization (i18n)](https://guides.rubyonrails.org/i18n.html) in your client code.
 
-1. Add `config.i18n_dir` in `config/initializers/react_on_rails.rb`
+1. Set `config.i18n_dir` in `config/initializers/react_on_rails.rb`:
 
-  React on Rails will generate `translations.json` & `default.json` automatically (see #3) after you configured your `config.i18n_dir` in `config/initializers/react_on_rails.rb`.
+    ```ruby
+    # Replace the following line by the directory containing your translation.js and default.js files.
+    config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
+    ```
 
-  ```ruby
-  # Replace the following line to the location where you keep translation.js & default.js.
-  config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
-  ```
+    If you do not want to use the YAML files from `Rails.root.join("config", "locales")` and installed gems, you can also set `config.i18n_yml_dir`:
+    ```ruby
+    # Replace the following line by the location of your client i18n yml files
+    # Without this option, all YAML files from Rails.root.join("config", "locales") and installed gems are loaded
+    config.i18n_yml_dir = Rails.root.join("PATH_TO", "YOUR_YAML_I18N_FOLDER")
+    ```
 
-  Optionally you can also set `config.i18n_yml_dir` if you do not what to use all the locale files from rails.
-  ```ruby
-  # Replace the following line to the location where you keep your client i18n yml files
-  # By default(without this option), all yaml files from Rails.root.join("config", "locales") and installed gems are loaded
-  config.i18n_yml_dir = Rails.root.join("PATH_TO", "YOUR_YAML_I18N_FOLDER")
-  ```
+2. Add that directory (or just the generated files `translations.json` and `default.json`) to your `.gitignore`.
 
-  `translations.json`: All your locales in json format.
-  `default.json`: Default settings in json format.
+3. The locale files must be generated before `yarn build` using `rake react_on_rails:locale`.
 
-2. Add `translations.json` and `default.json` to your `.gitignore`.
+    For development, you should adjust your startup scripts (`Procfile`s) so that they run `bundle exec rake react_on_rails:locale` before running any webpack watch process (`yarn run build:development`). 
 
-3. Javascript locale files must be generated before `yarn build`.
+    If you are not using the React on Rails test helper,
+    you may need to configure your CI to  run `bundle exec rake react_on_rails:locale` before any webpack process as well. 
 
-  Once you setup `config.i18n_dir` as in the previous step, you will need to make sure `rake react_on_rails:locale` runs before webpack. 
-  
-  For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`). 
-  
-  You may need to configure your CI to  run **`bundle exec rake react_on_rails:locale`** before any webpack process if you are not using the React on Rails test helper. 
-  
-  Note, if you are try to lint before running tests, and you are depending on the test helper to build your locales, your linting will fail because the translations won't be built yet. 
-  
-  The fix is either to 
-  1) run the rake task to build the translations before running the lint command or 
-  2) to run the tests first.
+    Note: if you try to lint before running tests, and you depend on the test helper to build your locales, linting will fail because the translations won't be built yet. 
 
-# Generate locales with react-intl support
+    The fix is either to 
+    1) run the rake task to build the translations before running the lint command or
+    2) to run the tests first.
 
-By default the locales generated in json format. If you need to generate files in the prior way
-with `react-intl` supported via js files:
+By default, the locales are generated as JSON, but you can also generate them as JavaScript with [`react-intl`](https://formatjs.io/docs/getting-started/installation/) support:
 
-1. Specify i18n output format in `react_on_rails.rb`:
-  ```rb
-    config.i18n_output_format = 'js'
-  ```
+1. Specify the i18n output format in `config/initializers/react_on_rails.rb`:
+    ```rb
+    config.i18n_output_format = "js"
+    ```
 
-2. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && yarn install`.
-   Versions should be newer than these:
+2. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle install && yarn install`. The minimum supported versions are:
 
-  ```js
-  "dependencies": {
+    ```js
+    "dependencies": {
+      ...
+      "intl": "^1.2.5",
+      "react-intl": "^2.1.5",
+      ...
+    }
+    ```
+
+3. In React, you need to initialize `react-intl`, and set its parameters:
+
+    ```js
+    ...
+    import { addLocaleData } from 'react-intl';
+    import en from 'react-intl/locale-data/en';
+    import de from 'react-intl/locale-data/de';
+    import { translations } from 'path_to/i18n/translations';
+    import { defaultLocale } from 'path_to/i18n/default';
+    ...
+    // Initizalize all locales for react-intl.
+    addLocaleData([...en, ...de]);
+    ...
+    // set locale and messages for IntlProvider.
+    const locale = method_to_get_current_locale() || defaultLocale;
+    const messages = translations[locale];
     ...
-    "intl": "^1.2.5",
-    "react-intl": "^2.1.5",
+    return (
+      <IntlProvider locale={locale} key={locale} messages={messages}>
+        <CommentScreen {...{ actions, data }} />
+      </IntlProvider>
+    )
+    ```
+    ```js
+    // In your component.
+    import { defaultMessages } from 'path_to/i18n/default';
     ...
-  }
-  ```
-
-3. Add `translations.js` and `default.js` to your `.gitignore` and `.eslintignore`.
-
-4. In React, you need to initialize `react-intl`, and set parameters for it.
-
-  ```js
-  ...
-  import { addLocaleData } from 'react-intl';
-  import en from 'react-intl/locale-data/en';
-  import de from 'react-intl/locale-data/de';
-  import { translations } from 'path_to/i18n/translations';
-  import { defaultLocale } from 'path_to/i18n/default';
-  ...
-  // Initizalize all locales for react-intl.
-  addLocaleData([...en, ...de]);
-  ...
-  // set locale and messages for IntlProvider.
-  const locale = method_to_get_current_locale() || defaultLocale;
-  const messages = translations[locale];
-  ...
-  return (
-    <IntlProvider locale={locale} key={locale} messages={messages}>
-      <CommentScreen {...{ actions, data }} />
-    </IntlProvider>
-  )
-  ```
-  ```js
-  // In your component.
-  import { defaultMessages } from 'path_to/i18n/default';
-  ...
-  return (
-    { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
-  )
-  ```
-  
-  # Notes
-  * See why using JSON could be better compare to JS if amount of data is hure [ https://v8.dev/blog/cost-of-javascript-2019#json]( https://v8.dev/blog/cost-of-javascript-2019#json).
-  * See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
-  * *Outdated:* You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.
+    return (
+      { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
+    )
+    ```
+
+# Notes
+* See why using JSON can perform better compared to JS for large amounts of data [https://v8.dev/blog/cost-of-javascript-2019#json](https://v8.dev/blog/cost-of-javascript-2019#json).
+* See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
+* *Outdated:* You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.

data/docs/guides/tutorial.md

@@ -62,7 +62,7 @@ _Use the latest version for `react_on_rails` and `shakapacker`._
 
 ```
 gem 'react_on_rails', '13.0.1'         # prefer exact gem version to match npm version
-gem 'shakapacker', '6.1.1'             # prefer exact gem version to match npm version
+gem 'shakapacker', '6.4.0'             # prefer exact gem version to match npm version
 
 ```
 
@@ -91,8 +91,6 @@ Install React on Rails: `rails generate react_on_rails:install`. You need to fir
 Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
 If you want the redux install: `rails generate react_on_rails:install --redux`
 
-The generator will add `mini_racer`'s latest version. If you're using linux & encounter issues installing `libv8`, here's [a common solution](https://github.com/rubyjs/mini_racer/issues/218).
-
 ```
 bundle exec rails generate react_on_rails:install
 ```
@@ -100,6 +98,14 @@ bundle exec rails generate react_on_rails:install
 Enter `a` to replace all configuration files required by the project. You can check the diffs
 before you commit to see what changed.
 
+## Setting up your environment variables
+
+Add the following variable to your environment:
+
+```
+EXECJS_RUNTIME=Node
+```
+
 Then run the server with one of the following options:
 
 ## Running with HMR

data/docs/home.md

@@ -2,7 +2,7 @@
 
 ## Details
 1. [Overview](https://www.shakacode.com/react-on-rails/docs/guides/react-on-rails-overview/)
-1. [Getting Started](https://www.shakacode.com/react-on-rails/docs/guides/getting-started/)
+1. [Getting Started](https://www.shakacode.com/react-on-rails/docs/getting-started/)
 1. [How React on Rails Works](https://www.shakacode.com/react-on-rails/docs/guides/how-react-on-rails-works/)
 1. [Webpack Configuration](https://www.shakacode.com/react-on-rails/docs/guides/webpack-configuration/)
 1. [View Helpers API](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/)

data/docs/javascript/server-rendering-tips.md

@@ -2,9 +2,6 @@
 
 For the best performance with Server Rendering, consider using [React on Rails Pro]
 
-Be sure to use mini_racer. See [issues/428](https://github.com/shakacode/react_on_rails/issues/428).
-
-
 
 ## General Tips
 - Your code can't reference `document`. Server side JS execution does not have access to `document`,

data/lib/generators/react_on_rails/base_generator.rb

@@ -73,7 +73,6 @@ module ReactOnRails
       end
 
       def add_base_gems_to_gemfile
-        gem "mini_racer", platforms: :ruby
         run "bundle"
       end
 

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>ReactOnRailsWithWebpacker</title>
+    <title>ReactOnRailsWithShakapacker</title>
     <%= csrf_meta_tags %>
     <%= javascript_pack_tag 'hello-world-bundle' %>
     <%= stylesheet_pack_tag 'hello-world-bundle' %>

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -42,4 +42,17 @@ ReactOnRails.configure do |config|
   # React components.
   #
   config.server_bundle_js_file = "server-bundle.js"
+
+  ################################################################################
+  ################################################################################
+  # FILE SYSTEM BASED COMPONENT REGISTRY
+  ################################################################################
+  # `components_subdirectory`  is the name of the matching directories that contain automatically registered components
+  # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
+  # config.components_subdirectory = "ror_components"
+  #
+  # For automated component registry, `render_component` view helper method tries to load bundle for component from
+  # generated directory. default is false, you can pass option at the time of individual usage or update the default
+  # in the following line
+  config.auto_load_bundle = false
 end

data/lib/react_on_rails/configuration.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-# rubocop:disable Metrics/ClassLength
-
 module ReactOnRails
   def self.configure
     yield(configuration)
@@ -9,6 +7,7 @@ module ReactOnRails
   end
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
+  DEFAULT_COMPONENTS_SUBDIRECTORY = nil
   DEFAULT_SERVER_RENDER_TIMEOUT = 20
   DEFAULT_POOL_SIZE = 1
   DEFAULT_RANDOM_DOM_ID = true # for backwards compatability
@@ -21,6 +20,7 @@ module ReactOnRails
       generated_assets_dir: "",
       server_bundle_js_file: "",
       prerender: false,
+      auto_load_bundle: false,
       replay_console: true,
       logging_on_server: true,
       raise_on_prerender_error: Rails.env.development?,
@@ -38,7 +38,8 @@ module ReactOnRails
       build_production_command: "",
       random_dom_id: DEFAULT_RANDOM_DOM_ID,
       same_bundle_for_client_and_server: false,
-      i18n_output_format: nil
+      i18n_output_format: nil,
+      components_subdirectory: DEFAULT_COMPONENTS_SUBDIRECTORY
     )
   end
 
@@ -51,8 +52,8 @@ module ReactOnRails
                   :webpack_generated_files, :rendering_extension, :build_test_command,
                   :build_production_command,
                   :i18n_dir, :i18n_yml_dir, :i18n_output_format,
-                  :server_render_method, :random_dom_id,
-                  :same_bundle_for_client_and_server, :rendering_props_extension
+                  :server_render_method, :random_dom_id, :auto_load_bundle,
+                  :same_bundle_for_client_and_server, :rendering_props_extension, :components_subdirectory
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
@@ -66,7 +67,8 @@ module ReactOnRails
                    build_production_command: 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, rendering_props_extension: nil)
+                   random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
+                   components_subdirectory: nil, auto_load_bundle: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -100,6 +102,8 @@ module ReactOnRails
       self.rendering_extension = rendering_extension
 
       self.server_render_method = server_render_method
+      self.components_subdirectory = components_subdirectory
+      self.auto_load_bundle = auto_load_bundle
     end
     # rubocop:enable Metrics/AbcSize
 
@@ -109,8 +113,6 @@ module ReactOnRails
       configure_generated_assets_dirs_deprecation
       configure_skip_display_none_deprecation
       ensure_generated_assets_dir_present
-      check_i18n_directory_exists
-      check_i18n_yml_directory_exists
       check_server_render_method_is_only_execjs
       error_if_using_webpacker_and_generated_assets_dir_not_match_public_output_path
       # check_deprecated_settings
@@ -129,6 +131,7 @@ module ReactOnRails
       ENV["WEBPACKER_PRECOMPILE"] = "false"
 
       precompile_tasks = lambda {
+        Rake::Task["react_on_rails:generate_packs"].invoke
         Rake::Task["react_on_rails:assets:webpack"].invoke
         puts "Invoking task webpacker:clean from React on Rails"
 
@@ -184,30 +187,6 @@ module ReactOnRails
       raise ReactOnRails::Error, msg
     end
 
-    def check_i18n_directory_exists
-      return if i18n_dir.nil?
-      return if Dir.exist?(i18n_dir)
-
-      msg = <<-MSG.strip_heredoc
-      Error configuring /config/initializers/react_on_rails.rb: invalid value for `config.i18n_dir`.
-      Directory does not exist: #{i18n_dir}. Set to value to nil or comment it
-      out if not using the React on Rails i18n feature.
-      MSG
-      raise ReactOnRails::Error, msg
-    end
-
-    def check_i18n_yml_directory_exists
-      return if i18n_yml_dir.nil?
-      return if Dir.exist?(i18n_yml_dir)
-
-      msg = <<-MSG.strip_heredoc
-      Error configuring /config/initializers/react_on_rails.rb: invalid value for `config.i18n_yml_dir`.
-      Directory does not exist: #{i18n_yml_dir}. Set to value to nil or comment it
-      out if not using this i18n with React on Rails, or if you want to use all translation files.
-      MSG
-      raise ReactOnRails::Error, msg
-    end
-
     def ensure_generated_assets_dir_present
       return if generated_assets_dir.present? || ReactOnRails::WebpackerUtils.using_webpacker?
 
@@ -253,4 +232,3 @@ module ReactOnRails
     end
   end
 end
-# rubocop:enable Metrics/ClassLength

data/lib/react_on_rails/helper.rb

@@ -57,6 +57,7 @@ module ReactOnRails
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
+      render_options = internal_result[:render_options]
 
       case server_rendered_html
       when String
@@ -64,7 +65,7 @@ module ReactOnRails
           server_rendered_html: server_rendered_html,
           component_specification_tag: internal_result[:tag],
           console_script: console_script,
-          render_options: internal_result[:render_options]
+          render_options: render_options
         )
       when Hash
         msg = <<~MSG
@@ -90,6 +91,26 @@ module ReactOnRails
       end
     end
 
+    def load_pack_for_component(component_name)
+      component_pack_file = generated_components_pack(component_name)
+      is_component_pack_present = File.exist?("#{component_pack_file}.jsx")
+      is_development = ENV["RAILS_ENV"] == "development"
+
+      if is_development && !is_component_pack_present
+        ReactOnRails::PacksGenerator.generate
+        raise_generated_missing_pack_warning(component_name)
+      end
+
+      ReactOnRails::PacksGenerator.raise_nested_enteries_disabled unless ReactOnRails::WebpackerUtils.nested_entries?
+
+      append_javascript_pack_tag "generated/#{component_name}"
+      append_stylesheet_pack_tag "generated/#{component_name}"
+    end
+
+    def generated_components_pack(component_name)
+      "#{ReactOnRails::WebpackerUtils.webpacker_source_entry_path}/generated/#{component_name}"
+    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:
@@ -112,6 +133,7 @@ module ReactOnRails
       internal_result = internal_react_component(component_name, options)
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
+      render_options = internal_result[:render_options]
 
       if server_rendered_html.is_a?(String) && internal_result[:result]["hasErrors"]
         server_rendered_html = { COMPONENT_HTML_KEY => internal_result[:result]["html"] }
@@ -122,7 +144,7 @@ module ReactOnRails
           server_rendered_html: server_rendered_html,
           component_specification_tag: internal_result[:tag],
           console_script: console_script,
-          render_options: internal_result[:render_options]
+          render_options: render_options
         )
       else
         msg = <<~MSG
@@ -425,6 +447,8 @@ module ReactOnRails
       # Create the HTML rendering part
       result = server_rendered_react_component(render_options)
 
+      load_pack_for_component react_component_name if render_options.auto_load_bundle
+
       {
         render_options: render_options,
         tag: component_specification_tag,
@@ -528,6 +552,17 @@ module ReactOnRails
       result
     end
 
+    def raise_generated_missing_pack_warning(component_name)
+      msg = <<~MSG
+        **ERROR** ReactOnRails: Generated missing pack for Component: #{component_name}. Please refresh the webpage \
+        once webpack has finished generating the bundles. If the problem persists
+        1. Verify `components_subdirectory` is configured in `config/initializers/react_on_rails`.
+        2. Component: #{component_name} is placed inside the configured `components_subdirectory`.
+      MSG
+
+      raise ReactOnRails::Error, msg
+    end
+
     def replay_console_option(val)
       val.nil? ? ReactOnRails.configuration.replay_console : val
     end

data/lib/react_on_rails/locales/base.rb

@@ -5,13 +5,36 @@ require "erb"
 module ReactOnRails
   module Locales
     def self.compile
-      if ReactOnRails.configuration.i18n_output_format&.downcase == "js"
+      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?