react_on_rails 13.0.0 → 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/rails-webpacker-react-integration-options.md

@@ -1,4 +1,4 @@
-# Rails/Webpacker React Integration Options
+# Shakapacker (Rails/Webpacker) React Integration Options
 
 You only _need_ props hydration if you need SSR. However, there's no good reason to
 have your app make a second round trip to the Rails server to get initialization props.
@@ -81,7 +81,7 @@ Webpack's HMR allows the replacement of modules for React in-place without reloa
 ### React Refresh Webpack Plugin
 [github.com/pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin)
 
-You can see an example commit of adding this [here](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/commit/7e53803fce7034f5ecff335db1f400a5743a87e7).
+You can see an example commit of adding this [here](https://github.com/shakacode/react_on_rails_demo_ssr_hmr/commit/7e53803fce7034f5ecff335db1f400a5743a87e7).
 
 1. Add react refresh packages:
    `yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
@@ -111,6 +111,8 @@ You can see an example commit of adding this [here](https://github.com/shakacode
    }
    ```
 
+---
+
 ### React Hot Loader (Deprecated)
 
 1. Add the `react-hot-loader` and ` @hot-loader/react-dom` npm packages.
@@ -179,4 +181,3 @@ module.exports = environment.toWebpackConfig()
 
 module.exports = environment;
 ```
-

data/docs/guides/react-server-rendering.md

@@ -3,7 +3,7 @@
 See also [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/).
 
 ## What is the easiest way to setup a webpack configuration for server-side-rendering?
-See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
+See the example webpack setup here: [github.com/shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr).
 
 ## What is Server Rendering?
 

data/docs/guides/tutorial.md

@@ -1,10 +1,10 @@
 # React on Rails Basic Tutorial
 
-**November 11, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. This file will be update shortly. Most of it is still relevant.
+_Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr)_ 
 
 -----
 
-*Updated for Ruby 2.7.1, Rails 6.0.3.1, React on Rails v12.5.0, and Shakapacker v6*
+*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -23,7 +23,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 
 ## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbevn` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbenv` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem.
 
 ```
 nvm install node                # download and install latest stable Node
@@ -49,6 +49,7 @@ cd <directory where you want to create your new Rails app>
 
 # Any name you like for the rails app
 # Skip javascript so will add that next and get the current version
+# This is for Rails 7
 rails new --skip-turbolinks --skip-javascript test-react-on-rails
 
 cd test-react-on-rails
@@ -60,15 +61,15 @@ of both the gem and npm package. In other words, don't use the `^` or `~` in the
 _Use the latest version for `react_on_rails` and `shakapacker`._
 
 ```
-gem 'react_on_rails', '13.0.0'         # prefer exact gem version to match npm version
-gem 'shakapacker', '6.1.1'             # prefer exact gem version to match npm version
+gem 'react_on_rails', '13.0.1'         # prefer exact gem version to match npm version
+gem 'shakapacker', '6.4.0'             # prefer exact gem version to match npm version
 
 ```
 
 Note: The latest released React On Rails version is considered stable. Please use the latest
 version to ensure you get all the security patches and the best support.
 
-## Run the webpacker (shakapacker) generator
+## Run the shakapacker (webpacker) generator
 
 ```terminal
 bundle exec rails webpacker:install
@@ -90,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
 ```
@@ -99,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/guides/webpack-configuration.md

@@ -11,7 +11,7 @@
 
 To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
 
-Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh),
+Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
 you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
 
 # React on Rails

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/)
@@ -16,7 +16,7 @@
 ## Example Apps
 1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the rails/webpacker gem
 that supports SSR.
-2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
+2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
 3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com).
 
 # Other Resources

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/babel.config.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js") %>
 
 module.exports = function (api) {
   const defaultConfigFunc = require('shakapacker/package/babel/preset.js')

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/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/clientWebpackConfig.js") %>
 
 const commonWebpackConfig = require('./commonWebpackConfig');
 

data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/commonWebpackConfig.js") %>
 
 // Common configuration applying to client and server configuration
 const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');

data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/development.js") %>
 
 const { devServer, inliningCss } = require('shakapacker');
 

data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js") %>
 
 const webpackConfig = require('./webpackConfig');
 

data/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/serverWebpackConfig.js") %>
 
 const { merge, config } = require('shakapacker');
 const commonWebpackConfig = require('./commonWebpackConfig');

data/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt

@@ -1,6 +1,9 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/test.js") %>
 
-// Use dev
-const config = require('./development');
+const webpackConfig = require('./webpackConfig')
 
-module.exports = config;
+const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
+  // place any code here that is for test only
+}
+
+module.exports = webpackConfig(testOnly)

data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt

@@ -1,4 +1,4 @@
-<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js") %>
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/webpackConfig.js") %>
 
 const clientWebpackConfig = require('./clientWebpackConfig');
 const serverWebpackConfig = require('./serverWebpackConfig');

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
@@ -279,8 +301,9 @@ module ReactOnRails
           # 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")
+          if original_url_normalized.encoding == Encoding::BINARY
+            original_url_normalized = original_url_normalized.force_encoding(Encoding::ISO_8859_1)
+                                                             .encode(Encoding::UTF_8)
           end
 
           # Using Addressable instead of standard URI to better deal with
@@ -424,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,
@@ -527,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