react_on_rails 13.3.0 → 13.4.0

data/README.md

@@ -53,7 +53,7 @@ Given that `rails/webpacker` gem already provides basic React integration, why w
 1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
 Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or it's predecessor [rails/webpacker](https://github.com/rails/webpacker)).
 1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
-1. [Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure `javascript_pack_tags` and `stylesheet_pack_tags` on your layouts based on what’s shown. “It just works!”](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation.md)
+1. [Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure `javascript_pack_tags` and `stylesheet_pack_tags` on your layouts based on what’s shown. “It just works!”](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation/)
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering.
 1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n)
 1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
@@ -113,6 +113,11 @@ The following companies support our open source projects, and ShakaCode uses the
     <img alt="ScoutAPM" src="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png" height="120px">
   </picture>
 </a>
+<a href="https://controlplane.com">
+  <picture>
+    <img alt="Control Plane" src="https://github.com/shakacode/.github/assets/20628911/90babd87-62c4-4de3-baa4-3d78ef4bec25" height="120px">
+  </picture>
+</a>
 <br />
 <a href="https://www.browserstack.com">
   <picture>
@@ -127,3 +132,6 @@ The following companies support our open source projects, and ShakaCode uses the
 <a href="https://www.honeybadger.io">
   <img src="https://user-images.githubusercontent.com/4244251/184881133-79ee9c3c-8165-4852-958e-31687b9536f4.png" alt="Honeybadger" height="55px">
 </a>
+<a href="https://reviewable.io">
+  <img src="https://user-images.githubusercontent.com/20628911/230848305-c94510a4-82d7-468f-bf9f-eeb81d3f2ce0.png" alt="Reviewable" height="55px">
+</a>

data/docs/additional-details/recommended-project-structure.md

@@ -1,6 +1,6 @@
 # Recommended Project structure
 
-The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
+The React on Rails generator uses the standard Shakapacker convention of this structure:
 
 ```yml
 app/javascript:
@@ -13,7 +13,7 @@ app/javascript:
 ```
 
 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).
+you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
 
 ## Steps to convert from the generator defaults to use a `/client` directory for source code 
 
@@ -23,7 +23,7 @@ you should consider keeping your codebase mostly consistent with the defaults fo
 mv app/javascript client
 ```
 
-2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+2. Edit your `/config/shakapacker.yml` file. Change the `default/source_path`:
 
 ```yml
   source_path: client
@@ -31,7 +31,7 @@ mv app/javascript client
 
 ## Moving node_modules from `/` to `/client` with a custom webpack setup.
 
-`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
+Shakapacker probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
 
 1. Move the `/package.json` to `/client/package.json`
 2. Create a `/package.json` that delegates to `/client/package.json`. 
@@ -40,8 +40,8 @@ mv app/javascript client
        "heroku-postbuild": "cd ./client && yarn"
      },
    ```
-3. If your node_modules directory is not at the top level of the Rails project, then you will need to set the
-ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
+3. If your `node_modules` directory is not at the top level of the Rails project, then you will need to set the
+ENV value of `SHAKAPACKER_CONFIG` to the location of the `config/shakapacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561). (Notice the change of spelling from Webpacker to Shakapacker)
 
 ## CSS, Sass, Fonts, and Images
 Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!

data/docs/additional-details/tips-for-usage-with-sp6.md

@@ -0,0 +1,15 @@
+# Tips for usage with Shakapacker 6
+
+As mentioned earlier in the documentation, we assume you install ReactOnRails in a project with Shakapacker 7+ installed and configured. If you still use Shakapacker 6, we encourage you to check the upgrade to the version 7 guide. Otherwise, you need to consider the following:
+
+1. The install generator tries to take the necessary steps to adapt the installed files to match the file structure and configurations for Shakapacker 6. So you don't need to be worried about the ReactOnRails installation process.
+
+2. Check the following table to map the references in the documentation to the relevant ones in Shakapacker 6:
+
+  |Usage in Shakapacker 7      |Equivalant in Shakapacker 6|
+  |----------------------------|---------------------------|
+  |`config/shakapacker.yml`    |`config/webpacker.yml`     |
+  |`bin/shakapacker`           |`bin/webpacker`            |
+  |`bin/shakapacker-dev-server`|`bin/webpacker-dev-server` |
+
+3. Any environment variables starting with `SHAKAPACKER_*` should be changed to `WEBPACKER_*`.

data/docs/deployment/heroku-deployment.md

@@ -5,7 +5,7 @@ React on Rails requires both a ruby environment (for Rails) and a Node environme
 
 Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use both buildpacks via the command-line:
 
-```
+```bash
 heroku buildpacks:set heroku/ruby
 heroku buildpacks:add --index 1 heroku/nodejs
 ```
@@ -14,22 +14,26 @@ For more information, see [Using Multiple Buildpacks for an App](https://devcent
 
 ## assets:precompile
 
-### rails/webpacker webpack configuration
-If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
-will automatically modify or create an assets:precompile task to build your assets. 
+### Shakapacker webpack configuration
+
+Shakapacker hooks up a new `shakapacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
+If you are not using Sprockets, `shakapacker:compile` is automatically aliased to `assets:precompile`.
+
+If you're using the standard `shakacode/shakapacker` configuration of webpack, then `shakacode/shakapacker`
+will automatically modify or create an `assets:precompile` task to build your assets.
 
 Alternatively, you can specify `config.build_production_command` to have
-react_on_rails invoke a command for you during assets:precompile.
+`react_on_rails` invoke a command for you during `assets:precompile`.
 
-```
-config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpacker"
+```bash
+config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"
 ```
 
-### Consider Removing Webpacker's clean task
+### Consider Removing Shakapacker's clean task
 
-If you are deploying on Heroku, then you don't need Webpacker's clean task which
+If you are deploying on Heroku, then you don't need Shakapacker's clean task which
 might delete files that you need.
 
-```
-Rake::Task['webpacker:clean'].clear
+```bash
+Rake::Task['shakapacker:clean'].clear
 ```

data/docs/getting-started.md

@@ -2,6 +2,8 @@
 
 Note, the best way to understand how to use ReactOnRails is to study a few simple examples. You can do a quick demo setup, either on your existing app or on a new Rails app.
 
+This documentation assumes the usage of ReactOnRails with Shakapacker 7. For installation on Shakapacker 6, check [tips for usage with Shakapacker 6](https://www.shakacode.com/react-on-rails/docs/aditional-details/tips-for-usage-with-sp6) first.
+
 1. Do the quick [tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/).
 2. Add React on Rails to an existing Rails app per [the instructions](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/).
 3. Look at [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy), a simple, no DB example.
@@ -9,38 +11,37 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
 
 ## Basic Installation
 
-These steps assume that you've got a rails application with webpacker (e.g. one
-generated using `rails new my_app --javascript=webpack`). If your
-application is not yet set up to use webpacker, please see 
-[the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/).*
+You need a Rails application with Shakapacker installed and configured on it. Check [Shakapacker documentation](https://github.com/shakacode/shakapacker) for more details but typically you need the following steps:
 
-1. Add the `shakapacker` and `react_on_rails` gem to Gemfile:
+```bash
+rails new PROJECT_NAME --skip-javascript
+cd PROJECT_NAME
+bundle add shakapacker --strict
+rails shakapacker:install
+```
 
-   ```bash
-   bundle add shakapacker --strict
-   bundle add react_on_rails --strict
-   ```
+You may need to check [the instructions for installing into an existing Rails app](https://www.shakacode.com/react-on-rails/docs/guides/installation-into-an-existing-rails-app/) if you have an already working Rails application.
 
-2. Run installation command for webpacker:
+1. Add the `react_on_rails` gem to Gemfile:
 
    ```bash
-   rails webpacker:install
+   bundle add react_on_rails --strict
    ```
 
-3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
+   Commit this to git (or else you cannot run the generator in the next step unless you pass the option `--ignore-warnings`).
 
-3. Run the generator:
+2. Run the install generator:
 
    ```bash
    rails generate react_on_rails:install
    ```
 
-4. Start the app:
+3. Start the app:
 
    - Run `./bin/dev` for HMR
    - Run `./bin/dev-static` for statically created bundles (no HMR)
 
-5. Visit http://localhost:3000/hello_world.
+4. Visit http://localhost:3000/hello_world.
 
 
 ### Turning on server rendering
@@ -60,7 +61,7 @@ Below is the line where you turn server rendering on by setting `prerender` to t
 ```
 
 Note, if you got an error in your console regarding "ReferenceError: window is not defined",
-then you need to edit `config/webpacker.yml` and set `hmr: false` and `inline: false`.
+then you need to edit `config/shakapacker.yml` and set `hmr: false` and `inline: false`.
 See [rails/webpacker PR 2644](https://github.com/rails/webpacker/pull/2644) for a fix for this
 issue.
 
@@ -69,18 +70,18 @@ issue.
 ### Configuration
 
 * Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](https://www.shakacode.com/react-on-rails/docs/guides/configuration/) for documentation of all configuration options.
-* Configure `config/webpacker.yml`. If you used the generator and the default webpacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/webpacker.yml](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/webpacker.yml) example or the official default [webpacker.yml](https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml).
-* Most apps should rely on the rails/webpacker setup for Webpack. v6 of rails/webpacker includes support for v5 of webpack.
+* Configure `config/shakapacker.yml`. If you used the generator and the default Shakapacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/shakapacker.yml](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/shakapacker.yml) example or the official default [shakapacker.yml](https://github.com/shakacode/shakapacker/blob/master/lib/install/config/shakapacker.yml).
+* Most apps should rely on the Shakapacker setup for Webpack. Shakapacker v6+ includes support for webpack version 5.
 
 ## Including your React Component on your Rails Views
 
-- React component are rendered via your Rails Views. Here's an ERB sample:
+- React components are rendered via your Rails Views. Here's an ERB sample:
 
   ```erb
   <%= react_component("HelloWorld", props: @some_props) %>
   ```
 
-- **Server-Side Rendering**: Your react component is first rendered into HTML on the server. Use the **prerender** option:
+- **Server-Side Rendering**: Your React component is first rendered into HTML on the server. Use the **prerender** option:
 
   ```erb
   <%= react_component("HelloWorld", props: @some_props, prerender: true) %>
@@ -146,13 +147,13 @@ For details on techniques to use different code for client and server rendering,
 
 ## Specifying Your React Components: Register directly or use render-functions
 
-You have two ways to specify your React components. You can either register the React component (either function or class component) directly, or you can create a function that returns a React component, which we using the name of a "render-function". Creating a render-function allows:
+You have two ways to specify your React components. You can either register the React component (either function or class component) directly, or you can create a function that returns a React component, which we using the name of a "render-function". Creating a render-function allows you to:
 
-1. You to have access to the `railsContext`. See [documentation for the railsContext](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) in terms of why you might need it. You **need** a Render-Function to access the `railsContext`.
-2. You can use the passed-in props to initialize a redux store or set up react-router.
-3. You can return different components depending on what's in the props.
+1. Access to the `railsContext`. See the [documentation for the railsContext](https://www.shakacode.com/react-on-rails/docs/guides/render-functions-and-railscontext/) in terms of why you might need it. You **need** a Render-Function to access the `railsContext`.
+2. Use the passed-in props to initialize a redux store or set up `react-router`.
+3. Return different components depending on what's in the props.
 
-Note, the return value of a **Render-Function** should be either a React Function or Class Component, or an object representing server rendering results.
+Note, the return value of a **Render-Function** should be either a React Function or Class Component or an object representing server rendering results.
 
 **Do not return a React Element (JSX).**
 
@@ -174,9 +175,9 @@ Thus, there is no difference between registering a React Function Component or c
 
 ## react_component_hash for Render-Functions
 
-Another reason to use a Render-Function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }. Make sure you use this function with `react_component_hash`.
+Another reason to use a Render-Function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: `{ renderedHtml, redirectLocation, error }`. Make sure you use this function with `react_component_hash`.
 
-For server rendering, if you wish to return multiple HTML strings from a Render-Function, you may return an Object from your Render-Function with a single top-level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
+For server rendering, if you wish to return multiple HTML strings from a Render-Function, you may return an Object from your Render-Function with a single top-level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys `componentHtml` and any other custom keys that you added:
 
 ```js
 { renderedHtml: { componentHtml, customKey1, customKey2} }

data/docs/guides/configuration.md

@@ -1,8 +1,8 @@
 Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
 
-First, you should have a `/config/webpacker.yml` setup.
+First, you should have a `/config/shakapacker.yml` setup.
 
-Here is the setup when using the recommended `/client` directory for your node_modules and source files:
+Here is the setup when using the recommended `/client` directory for your `node_modules` and source files:
 
 ```yaml
 # Note: Base output directory of /public is assumed for static files
@@ -23,7 +23,7 @@ development:
 
 test:
   <<: *default
-  # Ensure that webpacker invokes webpack to build files for tests if not using the
+  # Ensure that shakapacker invokes webpack to build files for tests if not using the
   #   ReactOnRails rspec helper.
   compile: true
 
@@ -69,19 +69,19 @@ ReactOnRails.configure do |config|
   config.random_dom_id = true # default
 
   # defaults to "" (top level)
-  config.node_modules_location = "client" # If using webpacker you should use "".
+  config.node_modules_location = "client" # If using Shakapacker you should use "".
 
-  # If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
+  # If you're using the standard Shakapacker configuration of webpack, then Shakapacker
   # will automatically modify or create an assets:precompile task to build your assets. If so,
   # set this value to nil.  Alternatively, you can specify `config.build_production_command`
   # to have react_on_rails invoke a command for you during assets:precompile.
   # The command is either a script or a module containing a class method `call`
   # In this example, the module BuildProductionCommand would have a class method `call`.
-  config.build_production_command = "RAILS_ENV=production bin/webpacker"
+  config.build_production_command = "RAILS_ENV=production bin/shakapacker"
 
   # NOTE:
-  # When specifying `build_production_command`, you need to disable `rails/webpacker` 
-  # configuration by setting `webpacker_precompile: false` in your `config/webpacker.yml` file.
+  # When specifying `build_production_command`, you need to disable `rails/shakapacker` 
+  # configuration by setting `shakapacker_precompile: false` in your `config/shakapacker.yml` file.
 
   # See bottom for an example of the BuildProductionCommand module.
   # config.build_production_command = BuildProductionCommand
@@ -118,8 +118,8 @@ ReactOnRails.configure do |config|
   # Normally, you have different bundles for client and server, thus, the default is false.
   # Furthermore, if you are not hashing the server bundle (not in the manifest.json), then React on Rails
   # will only look for the server bundle to be created in the typical file location, typically by
-  # a `webpack --watch` process.
-  # If true, ensure that in config/webpacker.yml that you have both dev_server.hmr and
+  # a `shakapacker --watch` process.
+  # If true, ensure that in config/shakapacker.yml that you have both dev_server.hmr and
   # dev_server.inline set to false.
   config.same_bundle_for_client_and_server = false
 
@@ -178,11 +178,21 @@ ReactOnRails.configure do |config|
   # Change to a value like this example to enable this feature 
   # config.components_subdirectory = "ror_components"
 
-  # Default configuration to auto loading bundles for components.
-  # default is false. The default can be overrident as an option in calls to view helpers
+  # Default is false.
+  # The default can be overidden as an option in calls to view helpers
   # `render_component` and `render_component_hash`. You may set to true to change the default to auto loading.
   config.auto_load_bundle = false
 
+  # Default is false
+  # Set this to true & instead of trying to import the generated server components into your existing
+  # server bundle entrypoint, the PacksGenerator will create a server bundle entrypoint using
+  # config.server_bundle_js_file for the filename.
+  config.make_generated_server_bundle_the_entrypoint = false
+
+  # Default is true, which matches Webpacker/Shakapacker's defer default for `append_javascript_pack`
+  # Set this to false to have `defer: false` added to your `append_javascript_pack` calls for generated entrypoints.
+  config.defer_generated_component_packs = true
+
   ################################################################################
   # I18N OPTIONS
   ################################################################################
@@ -210,9 +220,9 @@ ReactOnRails.configure do |config|
   # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   #
   # NOTE:
-  # Instead of using this test helper, you may ensure fresh test files using rails/webpacker via:
-  # 1. Have `config/webpacker/test.js` exporting an array of objects to configure both client and server bundles.
-  # 2. Set the compile option to true in config/webpacker.yml for env test
+  # Instead of using this test helper, you may ensure fresh test files using Shakapacker via:
+  # 1. Have `config/webpack/test.js` exporting an array of objects to configure both client and server bundles.
+  # 2. Set the compile option to true in config/shakapacker.yml for env test
   ################################################################################
 
   # If you are using this in your spec_helper.rb (or rails_helper.rb):
@@ -222,15 +232,15 @@ ReactOnRails.configure do |config|
   # with rspec then this controls what yarn command is run
   # to automatically refresh your webpack assets on every test run.
   #
-  config.build_test_command = "RAILS_ENV=test bin/webpacker"
+  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
 
   # CONFIGURE YOUR SOURCE FILES
   # The test helper needs to know where your JavaScript files exist. The value is configured
-  # by your config/webpacker.yml source_path:
+  # by your config/shakapacker.yml source_path:
   # source_path: client/app # if using recommended /client directory
   #
   # Define the files we need to check for webpack compilation when running tests.
-  # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
+  # The default is `%w( manifest.json )` as will be sufficient for most shakapacker builds.
   # However, if you are generating a server bundle that is NOT hashed (present in manifest.json),
   # then include the file in this list like this:
   config.webpack_generated_files = %w( server-bundle.js manifest.json )
@@ -257,7 +267,7 @@ module BuildProductionCommand
   include FileUtils
   # The call method will be called during assets:precompile
   def self.call
-    sh "bin/webpacker"
+    sh "bin/shakapacker"
   end
 end
 ```

data/docs/guides/deployment.md

@@ -1,4 +1,5 @@
 # Deployment
 
-- `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
-- See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
+Shakapacker puts the necessary precompile steps automatically in the rake precompile step.
+
+See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.

data/docs/guides/file-system-based-automated-bundle-generation.md

@@ -1,11 +1,11 @@
 # File-System-Based Automated Bundle Generation
 
-To use the automated bundle generation feature introduced in React on Rails v13.1.0, please upgrade to use [Shakapacker v6.5.1](https://github.com/shakacode/shakapacker/tree/v6.5.1) at least. If you are currently using webpacker, please follow the migration steps available [here](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md).
+To use the automated bundle generation feature introduced in React on Rails v13.1.0, please upgrade to use [Shakapacker v6.5.1](https://github.com/shakacode/shakapacker/tree/v6.5.1) at least. If you are currently using Webpacker, please follow the migration steps available [v6 upgrade](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md). Then upgrade to Shakapacker 7 using [v7 upgrade](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md) guide.
 
 ## Configuration
 
 ### Enable nested_entries for Shakapacker
-To use the automated bundle generation feature, set `nested_entries: true` in the `webpacker.yml` file like this.
+To use the automated bundle generation feature, set `nested_entries: true` in the `shakapacker.yml` file like this.
 The generated files will go in a nested directory.
 
 ```yml
@@ -44,14 +44,14 @@ React on Rails automatically generates pack files for components to be registere
 app/javascript/packs/generated
 ```
 
-*Note: the directory might be different depending on the `source_entry_path` in `config/webpacker.yml`.*
+*Note: the directory might be different depending on the `source_entry_path` in `config/shakapacker.yml`.*
 
 ## Usage
 
 ### Basic usage
 
 #### Background
-If the `webpacker.yml` file is configured as instructed [here](https://github.com/shakacode/shakapacker#configuration-and-code), with the following configurations
+If the `shakapacker.yml` file is configured as instructed [here](https://github.com/shakacode/shakapacker#configuration-and-code), with the following configurations
 
 ```yml
 default: &default
@@ -64,6 +64,7 @@ default: &default
 ```
 
 the directory structure will look like this
+
 ```
 app/javascript:
   └── packs:               # sets up webpack entries
@@ -100,15 +101,15 @@ Your layout would contain:
   <%= stylesheet_pack_tag 'application' %>
 ```
 
+Now suppose you want to use bundle splitting to minimize unnecessary javascript loaded on each page, you would put each of your components in the `packs` directory.
 
-Suppose, you want to use bundle splitting to minimize unnecessary javascript loaded on each page, you would put each of your components in the `packs` directory.
 ```
 app/javascript:
-  └── packs:               # sets up webpack entries
-  │   └── FooComponentOne.jsx # Internally uses ReactOnRails.register
-  │   └── BarComponentOne.jsx # Internally uses ReactOnRails.register
-  │   └── BarComponentTwo.jsx # Internally uses ReactOnRails.register
-  └── src:                 # any directory name is fine. Referenced files need to be under source_path
+  └── packs:                   # sets up webpack entries
+  │   └── FooComponentOne.jsx  # Internally uses ReactOnRails.register
+  │   └── BarComponentOne.jsx  # Internally uses ReactOnRails.register
+  │   └── BarComponentTwo.jsx  # Internally uses ReactOnRails.register
+  └── src:                     # any directory name is fine. Referenced files need to be under source_path
   │   └── Foo
   │   │   └── ...
   │   └── Bar
@@ -123,58 +124,63 @@ The tricky part is to figure out which bundles to load on any Rails view. [Shaka
 
 #### Solution
 
-File-system-based automated pack generation simplifies this process with a new option for the view helpers. The steps to use it in this example are:
+File-system-based automated pack generation simplifies this process with a new option for the view helpers.
 
-1. Remove parameters passed directly to `javascript_pack_tag` and `stylesheet_pack_tag`.
-2. Remove parameters passed directly to `append_javascript_pack_tag` and `append_stylesheet_pack_tag`.
+For example, if you wanted to utilize our file-system based entrypoint generation for `FooComponentOne` & `BarComponentOne`, but not `BarComponentTwo` (for whatever reason), then...
 
-Your layout would now contain:
+1. Remove generated entrypoints from parameters passed directly to `javascript_pack_tag` and `stylesheet_pack_tag`.
+2. Remove generated entrypoints from parameters passed directly to `append_javascript_pack_tag` and `append_stylesheet_pack_tag`.
 
-```erb
-  <%= javascript_pack_tag %>
-  <%= stylesheet_pack_tag %>
-```
+    Your layout would now contain:
 
-3. Create a directory structure as mentioned below:
+    ```erb
+    <%= javascript_pack_tag('BarComponentTwo') %>
+    <%= stylesheet_pack_tag('BarComponentTwo') %>
+    ```
 
-```
-app/javascript:
-  └── packs
-  └── src:
-  │   └── Foo
-  │   │ └── ...
-  │   │ └── ror_components          # configured as `components_subdirectory`
-  │   │   └── FooComponentOne.jsx
-  │   └── Bar
-  │   │ └── ...
-  │   │ └── ror_components          # configured as `components_subdirectory`
-  │   │   │ └── BarComponentOne.jsx
-  │   │   │ └── BarComponentTwo.jsx
-```
+3. Create a directory structure where the components that you want to be auto-generated are within `ReactOnRails.configuration.components_subdirectory`, which should be a subdirectory of `Shakapacker.config.source_path`:
 
-4. You no longer need to register these React components nor directly add their bundles. For example you can have a Rails view using three components:
+    ```
+    app/javascript:
+      └── packs:
+      │   └── BarComponentTwo.jsx  # Internally uses ReactOnRails.register
+      └── src:
+      │   └── Foo
+      │   │ └── ...
+      │   │ └── ror_components          # configured as `components_subdirectory`
+      │   │   └── FooComponentOne.jsx
+      │   └── Bar
+      │   │ └── ...
+      │   │ └── ror_components          # configured as `components_subdirectory`
+      │   │   │ └── BarComponentOne.jsx
+      │   │ └── something_else
+      │   │   │ └── BarComponentTwo.jsx
+    ```
 
-```erb
+4. You no longer need to register the React components within the `ReactOnRails.configuration.components_subdirectory` nor directly add their bundles. For example you can have a Rails view using three components:
+
+    ```erb
+    <% append_javascript_pack('BarComponentTwo') %>
     <%= react_component("FooComponentOne", {}, auto_load_bundle: true) %>
     <%= react_component("BarComponentOne", {}, auto_load_bundle: true) %>
-    <%= react_component("BarComponentTwo", {}, auto_load_bundle: true) %>
-```
+    <%= react_component("BarComponentTwo", {}) %>
+    ```
 
-If `FooComponentOne` uses multiple HTML strings for server rendering, the [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper can be used on the Rails view, as illustrated below.
+    If a component uses multiple HTML strings for server rendering, the [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) view helper can be used on the Rails view, as illustrated below.
 
-```erb
-<% foo_component_one_data = react_component_hash("FooComponentOne",
-                                             prerender: true,
-                                             auto_load_bundle: true
-                                             props: {}
-                                          ) %>
-<% content_for :title do %>
-   <%= foo_component_one_data['title'] %>
-<% end %>
-<%= foo_component_one_data["componentHtml"] %>
-```
+    ```erb
+    <% foo_component_one_data = react_component_hash("FooComponentOne",
+                                                prerender: true,
+                                                auto_load_bundle: true
+                                                props: {}
+                                              ) %>
+    <% content_for :title do %>
+      <%= foo_component_one_data['title'] %>
+    <% end %>
+    <%= foo_component_one_data["componentHtml"] %>
+    ```
 
-The default value of the `auto_load_bundle` parameter can be specified by setting `config.auto_load_bundle` in `config/initializers/react_on_rails.rb` and thus removed from each call to `react_component`.
+    The default value of the `auto_load_bundle` parameter can be specified by setting `config.auto_load_bundle` in `config/initializers/react_on_rails.rb` and thus removed from each call to `react_component`.
 
 ### Server Rendering and Client Rendering Components
 
@@ -186,6 +192,6 @@ Once generated, all server entrypoints will be imported into a file named `[Reac
 
 ### Using Automated Bundle Generation Feature with already defined packs
 
-To use the Automated Bundle Generation feature with already defined packs, `config/initializers/react_on_rails` should explicitly be configured with `config.auto_load_bundle = false` and you can explicitly pass `auto_load_bundle` option in [`react_component`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component) and  [`react_component_hash`](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/#react_component_hash) for the components using this feature.
+As of version 13.3.4, bundles inside of directories that match `config.components_subdirectory` will be automatically added as entrypoints, while bundles outside of those directories will have to be manually added to the Shakapacker.config.source_entry_path or Webpack's `entry` rules.
 
 

data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md

@@ -1,6 +1,6 @@
 # HMR and Hot Reloading with the webpack-dev-server
 
-The webpack-dev-server provides:
+The `webpack-dev-server` provides:
 
 1. Speedy compilation of client side assets
 2. Optional HMR which means that the page will reload automatically when after
@@ -11,17 +11,17 @@ The webpack-dev-server provides:
    For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
 
 If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
-then you can follow all the regular docs for using the `bin/webpacker-dev-server` 
+then you can follow all the regular docs for using the `bin/shakapacker-dev-server` 
 during development.
 
-# Server Side Rendering with the Default rails/webpacker bin/webpacker-dev-server
+# Server Side Rendering with the Default shakacode/shakapacker bin/shakapacker-dev-server
 
 If you are using server-side rendering, then you have a couple options. The
 recommended technique is to have a different webpack configuration for server
 rendering.  
 
 ## If you use the same Webpack setup for your server and client bundles 
-If you do use the webpack-dev-server for prerendering, be sure to set the
+If you do use the `webpack-dev-server` for prerendering, be sure to set the
 `config/initializers/react_on_rails.rb` setting of 
 
 ```
@@ -36,13 +36,13 @@ This must also be false.
 
 If you don't configure these two to false, you'll see errors like:
 
-* "ReferenceError: window is not defined" (if hmr is true)
-* "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
+* `"ReferenceError: window is not defined" (if hmr is true)`
+* `"TypeError: Cannot read property 'prototype' of undefined" (if inline is true)`
 
 # Client Side rendering with HMR using react-refresh-webpack-plugin
 ## Basic installation
-To enable HMR functionality you have to use `./bin/webpacker-dev-server`
-1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true. 
+To enable HMR functionality you have to use `./bin/shakapacker-dev-server`
+1. In `config/shakapacker.yml` set **hmr** and **inline** `dev_server` properties to true. 
     ```
     dev_server:
       https: false
@@ -57,7 +57,7 @@ To enable HMR functionality you have to use `./bin/webpacker-dev-server`
 2. Add react refresh packages:
     ` yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
 
-3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
+3. HMR is for use with the `webpack-dev-server`, so we only add this for the `webpack-dev-server`.
    ```
    const { devServer } = require('shakapacker')
 
@@ -75,7 +75,7 @@ To enable HMR functionality you have to use `./bin/webpacker-dev-server`
      )
    }
     ```
-    We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in config/webpacker.yml. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`. 
+    We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in `config/shakapacker.yml`. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`. 
 
 4. Add react-refresh plugin in `babel.config.js`
 ```