react_on_rails 13.3.4 → 13.4.0

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
 
@@ -220,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):
@@ -232,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 )
@@ -267,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/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
@@ -131,56 +131,56 @@ For example, if you wanted to utilize our file-system based entrypoint generatio
 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`.
 
-Your layout would now contain:
+    Your layout would now contain:
 
-```erb
-  <%= javascript_pack_tag('BarComponentTwo') %>
-  <%= stylesheet_pack_tag('BarComponentTwo') %>
-```
+    ```erb
+    <%= javascript_pack_tag('BarComponentTwo') %>
+    <%= stylesheet_pack_tag('BarComponentTwo') %>
+    ```
 
 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`:
 
-```
-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
-```
+    ```
+    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
+    ```
 
 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'))>
+    ```erb
+    <% append_javascript_pack('BarComponentTwo') %>
     <%= react_component("FooComponentOne", {}, auto_load_bundle: true) %>
     <%= react_component("BarComponentOne", {}, auto_load_bundle: true) %>
     <%= react_component("BarComponentTwo", {}) %>
-```
+    ```
 
-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.
+    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
 
@@ -190,16 +190,8 @@ Once generated, all server entrypoints will be imported into a file named `[Reac
 
 *Note: If specifying separate definitions for client and server rendering, please make sure to delete the generalized `ComponentName.jsx` file.*
 
-### Integrating auto-bundling into CI workflows
-
-Currently, ReactOnRails contains conditional logic that checks for the existence of generated entrypoint files whenever `react_component` or one of its derivative methods are called. If a generated entrypoint of the same name as provided to `react_component` or `react_component_hash` exists, then an `append_javascript_pack` call is made automatically.
-
-This means that `rake react_on_rails:generate_packs` or its programmatic equivalent must be run as a prerequisite to any sort of test or spec that would result in `react_component` or `react_component_hash` being called, even if the generated entrypoint files have already been bundled in a previous workflow/job.
-
-Caching of the generated entrypoints between workflow/jobs should also resolve this issue.
-
 ### 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`
 ```

data/docs/guides/how-react-on-rails-works.md

@@ -32,7 +32,7 @@ Each time you change your client code, you will need to re-generate the bundles
 
 For example, you might create a [Procfile.dev](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.dev).
 
-On production deployments that use asset precompilation, such as Heroku deployments, `shakapacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpacker` in your app.
+On production deployments that use asset precompilation, such as Heroku deployments, `shakapacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/shakapacker` in your app.
 
 However, if you want to run a custom command to run webpack to build your bundles, then you will:
 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/)

data/docs/guides/installation-into-an-existing-rails-app.md

@@ -7,21 +7,21 @@
 1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `package.json` file.
 
    ```ruby
+   gem "shakapacker", "7.0.1"     # Use the latest and the exact version
    gem "react_on_rails", "13.3.1" # Use the latest and the exact version
-   gem "shakapacker", "6.5.5"
    ```
 
    Or use `bundle add`:
 
    ```bash
+   bundle add shakapacker --version=7.0.1 --strict
    bundle add react_on_rails --version=13.3.1 --strict
-   bundle add shakapacker --version=6.5.5 --strict
    ```
 
-2. Run the following 2 commands to install Shakapakcer (Webpacker) with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
+2. Run the following 2 commands to install Shakapacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install Webpacker with React per the instructions [here](https://github.com/rails/webpacker).
 
    ```bash
-   rails webpacker:install
+   rails shakapacker:install
    ```
 
 3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).

data/docs/guides/rails-webpacker-react-integration-options.md

@@ -5,7 +5,7 @@ have your app make a second round trip to the Rails server to get initialization
 
 **Server-Side Rendering (SSR)** results in Rails rendering HTML for your React components. The main reasons to use SSR are better SEO and pages display more quickly.
 
-These gems provide advanced integration of React with [rails/webpacker](https://github.com/rails/webpacker):
+These gems provide advanced integration of React with [shakacode/shakapacker](https://github.com/shakacode/shakapacker):
 
 | Gem | Props Hydration | Server-Side-Rendering (SSR) | SSR with HMR | SSR with React-Router | SSR with Code Splitting | Node SSR |
 | --- | --------------- | --- | --------------------- | ----------------------| ------------------------|----|
@@ -89,9 +89,9 @@ module.exports = commonWebpackConfig;
 ## HMR and React Hot Reloading
 
 Before turning HMR on, consider upgrading to the latest stable gems and packages:
-https://github.com/rails/webpacker#upgrading
+https://github.com/shakacode/shakapacker#upgrading
 
-Configure `config/webpacker.yml` file:
+Configure `config/shakapacker.yml` file:
 
 ```yaml
 development:
@@ -101,7 +101,7 @@ development:
     inline: true
 ```
 
-This basic configuration alone will have HMR working with the default webpacker setup. However, a code save will trigger a full page refresh each time you save a file.
+This basic configuration alone will have HMR working with the default Shakapacker setup. However, a code save will trigger a full page refresh each time you save a file.
 
 Webpack's HMR allows the replacement of modules for React in-place without reloading the browser. To do this, you have two options:
 

data/docs/guides/react-on-rails-overview.md

@@ -6,15 +6,13 @@ React on Rails integrates Rails with (server rendering of) Facebook's [React](ht
 
 # Project Objective
 
-To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
+To provide a high performance framework for integrating Ruby on Rails with React via the [**Shakapacker**](https://github.com/shakacode/shakapacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
 
 # Features and Why React on Rails?
 
-Given that [`rails/webpacker`](https://github.com/rails/webpacker/) gem already provides basic React integration, why would you use "React on Rails"?
-
 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.
-1. Tight integration with [rails/webpacker](https://github.com/rails/webpacker).
-1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `rails/webpacker`.
+1. Tight integration with [shakacode/shakapacker](https://github.com/shakacode/shakapacker).
+1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `shakacode/shakapacker`.
 1. Support for HMR for a great developer experience.
 1. Supports latest versions of React with hooks.
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration including server-side-rendering.
@@ -23,8 +21,9 @@ Given that [`rails/webpacker`](https://github.com/rails/webpacker/) gem already
 1. [ReScript (Reason ML) Support](https://github.com/shakacode/reason-react-on-rails-example).
 
 See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
+
 ----
 
 ## Prerequisites
-
-Ruby on Rails >=5 and rails/webpacker 4.2+.
+- Ruby on Rails >=5
+- Shakapacker 6.5.1+.

data/docs/guides/rspec-configuration.md

@@ -1,29 +1,29 @@
 # RSpec Configuration
 _Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/guides/minitest-configuration/)_
 
-# If your webpack configurations correspond to rails/webpacker's default setup
+# If your webpack configurations correspond to Shakapacker's default setup
 If you're able to configure your webpack configuration to be run by having your webpack configuration
 returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
 compiled by webpack before running tests and during production deployment:
 
-1. **Use rails/webpacker's compile option**: Configure your `config/webpacker.yml` so that `compile: true` is for `test` and `production`
-   environments. Ensure that your `source_path` is correct, or else `rails/webpacker` won't correctly
+1. **Use Shakapacker's compile option**: Configure your `config/shakapacker.yml` so that `compile: true` is for `test` and `production`
+   environments. Ensure that your `source_path` is correct, or else `Shakapacker` won't correctly
    detect changes.
 2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
 
 ```yml
-  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpacker"
+  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker"
 ```
 
-Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
-you can keep things simple and use the `rails/webpacker` options.
+Which should you use? If you're already using the `Shakapacker` way to configure webpack, then
+you can keep things simple and use the `Shakapacker` options.
 
 # Checking for stale assets using React on Rails
 
 Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
 
-As mentioned above, you can configure `compile: true` in `config/webpacker.yml` _if_ you've got configuration for
-your webpack in the standard `rails/webpacker` spot of `config/webpack/<NODE_ENV>.js`
+As mentioned above, you can configure `compile: true` in `config/shakapacker.yml` _if_ you've got configuration for
+your webpack in the standard `Shakapacker` spot of `config/webpack/<NODE_ENV>.js`
 
 ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
 
@@ -44,13 +44,13 @@ If you are using Webpack to build CSS assets, you should do something like this
 ```
 
 Please take note of the following:
-- If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker.
+- If you are using Shakapacker, be **SURE** to configure the `source_path` in your `config/shakapacker.yml` unless you are using the defaults for Shakapacker.
 
-- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using webpacker, the default value will come from the `config/webpacker.yml` value for the `public_output_path` and the `source_path`
+- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using Shakapacker, the default value will come from the `config/shakapacker.yml` value for the `public_output_path` and the `source_path`
 
 - If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates.
 
-- By default, the webpack processes look in the webpack generated files folder, configured via the `config/webpacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
+- By default, the webpack processes look in the webpack generated files folder, configured via the `config/shakapacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
 
 The following `config/react_on_rails.rb` settings **must** match your setup:
 ```ruby