react_on_rails 13.3.5 → 14.0.0

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

@@ -1,205 +0,0 @@
-# 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).
-
-## Configuration
-
-### Enable nested_entries for Shakapacker
-To use the automated bundle generation feature, set `nested_entries: true` in the `webpacker.yml` file like this.
-The generated files will go in a nested directory.
-
-```yml
-default:
-  ...
-  nested_entries: true
-```
-
-For more details, see [Configuration and Code](https://github.com/shakacode/shakapacker#configuration-and-code) section in [shakapacker](https://github.com/shakacode/shakapacker/).
-
-### Configure Components Subdirectory
-`components_subdirectory`  is the name of the matched directories containing components that will be automatically registered for use by the view helpers.
-For example, configure `config/initializers/react_on_rails` to set the name for `components_subdirectory`.·
-
-```rb
-config.components_subdirectory = "ror_components"
-```
-
-Now all React components inside the directories called `ror_components` will automatically be registered for usage with [`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) helper methods provided by React on Rails.
-
-### Configure `auto_load_bundle` Option
-
-For automated component registry, [`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) view helper method tries to load generated bundle for component from the generated directory automatically per `auto_load_bundle` option. `auto_load_bundle` option in `config/initializers/react_on_rails` configures the default value that will be passed to component helpers. The default is `false`, and the parameter can be passed explicitly for each call.
-
-You can change the value in `config/initializers/react_on_rails` by updating it as follows:
-
-```rb
-config.auto_load_bundle = true
-```
-
-### Update `.gitignore` file
-React on Rails automatically generates pack files for components to be registered in the `packs/generated` directory. To avoid committing generated files into the version control system, please update `.gitignore` to have
-
-```gitignore
-# Generated React on Rails packs
-app/javascript/packs/generated
-```
-
-*Note: the directory might be different depending on the `source_entry_path` in `config/webpacker.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
-
-```yml
-default: &default
-  source_path: app/javascript
-  source_entry_path: packs
-  public_root_path: public
-  public_output_path: packs
-  nested_entries: true
-# And more
-```
-
-the directory structure will look like this
-
-```
-app/javascript:
-  └── packs:               # sets up webpack entries
-  │   └── application.js   # references FooComponentOne.jsx, BarComponentOne.jsx and BarComponentTwo.jsx in `../src`
-  └── src:                 # any directory name is fine. Referenced files need to be under source_path
-  │   └── Foo
-  │   │   └── ...
-  │   │   └── FooComponentOne.jsx
-  │   └── Bar
-  │   │   └── ...
-  │   │   └── BarComponentOne.jsx
-  │   │   └── BarComponentTwo.jsx
-  └── stylesheets:
-  │   └── my_styles.css
-  └── images:
-      └── logo.svg
-```
-
-Previously, many applications would use one pack (webpack entrypoint) for many components. In this example, the`application.js` file manually registers server components, `FooComponentOne`, `BarComponentOne` and `BarComponentTwo`.
-
-```jsx
-import ReactOnRails from 'react-on-rails';
-import FooComponentOne from '../src/Foo/FooComponentOne';
-import BarComponentOne from '../src/Foo/BarComponentOne';
-import BarComponentTwo from '../src/Foo/BarComponentTwo';
-
-ReactOnRails.register({ FooComponentOne, BarComponentOne, BarComponentTwo });
-```
-
-Your layout would contain:
-
-```erb
-  <%= javascript_pack_tag 'application' %>
-  <%= 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.
-
-```
-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
-  │   └── Foo
-  │   │   └── ...
-  │   └── Bar
-  │   │   └── ...
-  └── stylesheets:
-  │   └── my_styles.css
-  └── images:
-      └── logo.svg
-```
-
-The tricky part is to figure out which bundles to load on any Rails view. [Shakapacker's `append_stylesheet_pack_tag` and `append_javascript_pack_tag` view helpers](https://github.com/shakacode/shakapacker#view-helper-append_javascript_pack_tag-and-append_stylesheet_pack_tag) enables Rails views to specify needed bundles for use by layout's call to `javascript_pack_tag` and `stylesheet_pack_tag`.
-
-#### Solution
-
-File-system-based automated pack generation simplifies this process with a new option for the view helpers.
-
-For example, if you wanted to utilize our file-system based entrypoint generation for `FooComponentOne` & `BarComponentOne`, but not `BarComponentTwo` (for whatever reason), then...
-
-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:
-
-```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
-```
-
-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", {}) %>
-```
-
-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"] %>
-```
-
-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
-
-If server rendering is enabled, the component will be registered for usage both in server and client rendering. In order to have separate definitions for client and server rendering, name the component files as `ComponentName.server.jsx` and `ComponentName.client.jsx`. The `ComponentName.server.jsx` file will be used for server rendering and the `ComponentName.client.jsx` file for client rendering. If you don't want the component rendered on the server, you should only have the `ComponentName.client.jsx` file.
-
-Once generated, all server entrypoints will be imported into a file named `[ReactOnRails.configuration.server_bundle_js_file]-generated.js`, which in turn will be imported into a source file named the same as `ReactOnRails.configuration.server_bundle_js_file`. If your server bundling logic is such that your server bundle source entrypoint is not named the same as your `ReactOnRails.configuration.server_bundle_js_file` & changing it would be difficult, please let us know.
-
-*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.
-
-

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

@@ -1,104 +0,0 @@
-# HMR and Hot Reloading with the webpack-dev-server
-
-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
-   compilation completes. Note, some developers do not like this, as you'll
-   abruptly lose any tweaks within the Chrome development tools.
-3. Optional hot-reloading. The older react-hot-loader has been deprecated in 
-   favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
-   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` 
-during development.
-
-# Server Side Rendering with the Default rails/webpacker bin/webpacker-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
-`config/initializers/react_on_rails.rb` setting of 
-
-```
-  config.same_bundle_for_client_and_server = true
-```
-
-`dev_server.hmr` maps to [devServer.hot](https://webpack.js.org/configuration/dev-server/#devserverhot).
-This must be false if you're using the webpack-dev-server for client and server bundles.
- 
-`dev_server.inline` maps to [devServer.inline](https://webpack.js.org/configuration/dev-server/#devserverinline).
-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)
-
-# 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. 
-    ```
-    dev_server:
-      https: false
-      host: localhost
-      port: 3035
-      public: localhost:3035
-      hmr: true
-      # Inline should be set to true if using HMR
-      inline: true
-    ```
-
-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.
-   ```
-   const { devServer } = require('shakapacker')
-
-   const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
-
-   //plugins
-   if (isWebpackDevServer) {
-     environment.plugins.append(
-       'ReactRefreshWebpackPlugin',
-       new ReactRefreshWebpackPlugin({
-         overlay: {
-           sockPort: devServer.port
-         }
-       })
-     )
-   }
-    ```
-    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)`. 
-
-4. Add react-refresh plugin in `babel.config.js`
-```
-  module.export = function(api) {
-    return {
-      plugins: [process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel'].filter(Boolean)
-    }
-  }
-```
-That's it :).
-Now Browser should reflect .js along with .css changes without reloading.
-
-If by some reason plugin doesn't work you could revert changes and left only devServer hmr/inline to true affecting only css files.
-
-These plugins are working and tested with 
-   - babel 7
-   - webpacker 5
-   - bootstrap 4
-   - jest 26
-   - core-js 3
-   - node 12.10.0
-   - react-refresh-webpack-plugin@0.4.1
-   - react-refresh 0.8.3 
-   - react_on_rails 11.1.4 
-   
-   configuration.

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

@@ -1,44 +0,0 @@
-# How React on Rails Works (with Shakapcker)
-
-*Note, older versions of React on Rails pushed the Webpack bundles through the Asset Pipeline. This older method has *many* disadvantages, such as broken sourcemaps, performance issues, etc. If you need help migrating to the current way of bypassing the Asset Pipeline, [email Justin](mailto:justin@shakacode.com).*
-
-Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [Shakapacker](https://github.com/shakacode/shakapacker) provides view helpers to access the Webpack-generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (*recommended*) or the `shakapacker` setup for Webpack.
-
-Ensure these generated bundle files are in your `.gitignore`, as you never want to add the large compiled bundles to git.
-
-Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper.
-
-Optionally, you can also initialize a Redux store with the view or controller helper `redux_store` so that the redux store can be shared amongst multiple React components.
-
-## Client-Side Rendering vs. Server-Side Rendering
-
-In most cases, you should use the `prerender: false` (default behavior) with the provided `react_component` helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
-
-Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. If you want to maximize the performance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
-
-## HTML Source Code
-
-If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
-
-1. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component. If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
-1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
-1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server-side logs can be configured only to be sent to the server logs.
-
-You can see all this on the source for [reactrails.com](https://www.reactrails.com/)
-
-## Building the Bundles
-
-Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternatively, the `shakapacker` library also can ensure that your bundles are built.
-
-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.
-
-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/)
-
-Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
-
-If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
-
-You can stop React on Rails from modifying or creating the `assets:precompile` task, by setting a `REACT_ON_RAILS_PRECOMPILE` environment variable to `no`, `false`, `n` or `f`.

data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md

@@ -1,40 +0,0 @@
-# How to conditionally render server side based on the device type
-
-In general, we want to use CSS to do mobile responsive layouts.
-
-However, sometimes we want to have layouts sufficiently different that we can't do this via CSS. If we didn't do server rendering, we can check the device type on the client side. However, if we're doing server rendering, we need to send this data to the client code from the Rails server so that the server rendering can account for this.
-
-Here's an example:
-
-## config/initializers/react_on_rails.rb
-
-```ruby
-module RenderingExtension
-  # Return a Hash that contains custom values from the view context that will get passed to
-  # all calls to react_component and redux_store for rendering
-  def self.custom_context(view_context)
-    if view_context.controller.is_a?(ActionMailer::Base)
-      {}
-    else
-      {
-        desktop: !(view_context.browser.device.tablet? || view_context.browser.device.mobile?),
-        tablet: view_context.browser.device.tablet?,
-        mobile: view_context.browser.device.mobile? || false
-      }
-    end
-  end
-end
-
-# Shown below are the defaults for configuration
-ReactOnRails.configure do |config|
-  # See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md for the rest
-
-  # This allows you to add additional values to the Rails Context. Implement one static method
-  # called `custom_context(view_context)` and return a Hash.
-  config.rendering_extension = RenderingExtension
-end
-```
-
-Note, full details of the React on Rails configuration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).
-
-See the doc file [docs/basics/generator-functions-and-railscontext.md](https://shakacode.com/react-on-rails/docs/guides/generator-functions-and-railscontext/#rails-context) for how your client-side code uses the device information

data/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md

@@ -1,98 +0,0 @@
-## How to use different versions of a file for client and server rendering
-
-There are 3 main ways to use different code for server vs. client rendering.
-
-## A. Using different Entry Points
-Many projects will have different entry points for client and server rendering. This only works for a top-level entry point such as the entry point for a react-router app component.
-
-Your Client Entry can look like this:
-
-```js
-import ReactOnRails from 'react-on-rails';
-import App from './ClientApp';
-ReactOnRails.register({ App })
-```
-
-So your Server Entry can look like:
-
-```js
-import ReactOnRails from 'react-on-rails';
-import App from './ServerApp';
-ReactOnRails.register({ App })
-```
-
-Note that the only difference is on the second line of each of these examples.
-
-## B. Two Options for Using Webpack Resolve Alias in the Webpack Config
-Per [Webpack Docs](https://webpack.js.org/configuration/resolve/#resolve-alias).
-
-### 1. Update `webpack/set-resolve.js` to have a different resolution for the exact file:
-
-```js
-function setResolve(builderConfig, webpackConfig) {
-
-  // Use a different resolution for Client and Server file
-  let SomeJsFile;
-  if (builderConfig.serverRendering) {
-    SomeJsFile = path.resolve(__dirname, "../bundles/SomeJsFileServer");
-  } else {
-    SomeJsFile = path.resolve(__dirname, "../bundles/SomeJsFileClient");
-  }
-
- const resolve = {
-    alias: {
-      ... // blah blah
-      SomeJsFile,
-      ... // blah blah
-    },
-```
-
-Then you have this import:
-
-```js
-import SomeJsFile from 'SomeJsFile';
-```
-
-### 2. Use a different resolution for the right directory of client or server files:
-
-#### a. Update `webpack/set-resolve.js` to have something like:
-```js
-function setResolve(builderConfig, webpackConfig) {
-
-  // Use a different resolution for Client and Server file
-  let variant;
-  if (builderConfig.serverRendering) {
-    variant = path.resolve(__dirname, "../bundles/variant/ClientOnly");
-  } else {
-    variant = path.resolve(__dirname, "../bundles/variant/serverOnly");
-  }
-
- const resolve = {
-    alias: {
-      ... // blah blah
-      variant
-      ... // blah blah
-    },
-```
-
-#### b. Add different versions of the file to the `bundles/variant/ClientOnly` and `bundles/variant/ServerOnly` directories
-
-#### c. Use the `variant` in import in a file that can be used both for client and server rendering:
-
-```js
-import SomeJsFile from 'variant/SomeJsFile';
-import AnotherJsFile from 'variant/AnotherJsFile';
-```
-
-## C. Conditional code that can check if `window` is defined.
-
-This is probably the ugliest and hackiest way to do this, but it's quick! Essentially you wrap code that cannot execute server side in a conditional:
-
-```js
-if (window) { // window should be falsy on the server side
-  doSomethingClientOnly();
-  
-  // or do an import
-  const foobar = require('foobar').default;
-}
-```

data/docs/guides/i18n.md

@@ -1,87 +0,0 @@
-# Internationalization
-
-You can use [Rails internationalization (i18n)](https://guides.rubyonrails.org/i18n.html) in your client code.
-
-1. Set `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")
-    ```
-
-    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")
-    ```
-
-2. Add that directory (or just the generated files `translations.json` and `default.json`) to your `.gitignore`.
-
-3. The locale files must be generated before `yarn build` using `rake react_on_rails:locale`.
-
-    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`). 
-
-    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. 
-
-    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. 
-
-    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 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 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 install && yarn install`. The minimum supported versions are:
-
-    ```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];
-    ...
-    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 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/installation-into-an-existing-rails-app.md

@@ -1,66 +0,0 @@
-# Getting Started with an existing Rails app
-
-**Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/).
-
-**If you have rails-5 API only project**, first [convert the rails-5 API only app to rails app](https://www.shakacode.com/react-on-rails/docs/rails/convert-rails-5-api-only-app-to-rails-app/).
-
-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 "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 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).
-
-   ```bash
-   rails webpacker:install
-   ```
-
-3. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
-
-4. Run the generator with a simple "Hello World" example (more options below):
-
-   ```bash
-   rails generate react_on_rails:install
-   ```
-
-   For more information about this generator use `--help` option:
-
-   ```bash
-   rails generate react_on_rails:install --help
-   ```
-5. Ensure that you have `overmind` or `foreman` installed.
-
-   Note: `foreman` should be installed on the system not on your project. [Read more](https://github.com/ddollar/foreman/wiki/Don't-Bundle-Foreman)
-
-6. Start your Rails server:
-
-   ```bash
-   ./bin/dev
-   ```
-   Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example, this is already set.
-
-7. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world).
-
-## Installation
-
-See the [Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview/) for a concise set summary of what's in a React on Rails installation.
-
-
-## NPM
-
-All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your `node_modules`):
-
-```bash
-yarn add react-on-rails --exact
-```
-
-That will install the latest version and update your package.json. **NOTE:** the `--exact` flag will ensure that you do not have a "~" or "^" for your react-on-rails version in your package.json.