react_on_rails 12.0.0 → 12.0.4

data/docs/additional-reading/server-rendering-tips.md

@@ -13,7 +13,7 @@ Be sure to use mini_racer. See [issues/428](https://github.com/shakacode/react_o
 - You can conditionally avoid running code that references document by either checking if `window`
   is defined or using the "railsContext" 
   your top level react component. Since the passed in props Hash from the view helper applies to
-  client and server side code, the best way to do this is to use a render function.
+  client and server side code, the best way to do this is to use a Render-Function.
 - If you're serious about server rendering, it's worth the effort to have different entry points for client and server rendering. It's worth the extra complexity. The point is that you have separate files for top level client or server side, and you pass some extra option indicating that rendering is happening server side.
 - You can enable Node.js server rendering via [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 
@@ -22,6 +22,9 @@ Be sure to use mini_racer. See [issues/428](https://github.com/shakacode/react_o
 1. First be sure your code works with server rendering disabled (`prerender: false`)
 2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Webpacker, you will also get the whole file used to setup the JavaScript context.
 
+## CSS
+Server bundles must always have CSS Extracted
+
 ## setTimeout, setInterval, and clearTimeout
 
 These methods are polyfilled for server rendering to be no-ops. We log calls to these when in `trace` mode. In the past, some libraries, namely babel-polyfill, did call setTimout. 

data/docs/api/javascript-api.md

@@ -25,10 +25,10 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
   /**
    * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
    * find you components for rendering. Components get called with props, or you may use a
-   * "render function" to return a React component or an object with the following shape:
+   * "Render-Function" to return a React component or an object with the following shape:
    * { renderedHtml, redirectLocation, error }.
-   * 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
+   * 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. This is useful when you using side effects libraries like react helmet.
    * Your Ruby code with get this Object as a Hash containing keys componentHtml and any other

data/docs/api/redux-store-api.md

@@ -1,10 +1,10 @@
 # Redux Store
 
-_This redux API is no longer recommended as it prevents dynamic code splitting for performance. Instead, you should use the standard react_component view helper passing in a "render function."_
+_This redux API is no longer recommended as it prevents dynamic code splitting for performance. Instead, you should use the standard react_component view helper passing in a "Render-Function."_
 
 You don't need to use the `redux_store` api to use redux. This api was setup to support multiple calls to `react_component` on one page that all talk to the same redux store.
 
-If you are only rendering one react component on a page, as is typical to do a "Single Page App" in React, then you should _probably_ pass the props to your React component in a "render function."
+If you are only rendering one react component on a page, as is typical to do a "Single Page App" in React, then you should _probably_ pass the props to your React component in a "Render-Function."
 
 Consider using the `redux_store` helper for the two following use cases:
 

data/docs/api/view-helpers-api.md

@@ -22,7 +22,7 @@ Uncommonly used options:
   id: nil,
 ```
 
-- **component_name:** Can be a React component, created using an ES6 class or a render function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only).
+- **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
   All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../basics/configuration.md).
 - **general options:**
   - **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
@@ -45,7 +45,7 @@ adding meta-tags to a page. It is exactly like react_component except for the fo
 
 1. `prerender: true` is automatically added to options, as this method doesn't make sense for 
    client only rendering.
-2. Your JavaScript render function for server rendering must return an Object rather than a React Component.
+2. Your JavaScript Render-Function for server rendering must return an Object rather than a React Component.
 3. Your view code must expect an object and not a string.
 
 Here is an example of ERB view code:
@@ -98,11 +98,11 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
 
 ### Renderer Functions (function that will call ReactDOM.render or ReactDOM.hydrate)
 
-A "renderer function" is a render function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
+A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
 
 Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](docs/outdated/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
 
-Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a render function. Attempting to server render with a renderer function will throw an error.
+Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
 
 ------------
 

data/docs/basics/client-vs-server-rendering.md

@@ -1,5 +1,7 @@
 # Client-Side Rendering vs. Server-Side Rendering
 
+*See also [react-server-rendering.md](./react-server-rendering.md).*
+
 In most cases, you should use the `prerender: false` (default behavior) with the provided 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. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime.

data/docs/basics/configuration.md

@@ -215,7 +215,7 @@ Example of a RenderingExtension for custom values in the `rails_context`:
 module RenderingExtension
 
   # Return a Hash that contains custom values from the view context that will get merged with
-  # the standard rails_context values and passed to all calls to render functions used by the
+  # the standard rails_context values and passed to all calls to Render-Functions used by the
   # react_component and redux_store view helpers
   def self.custom_context(view_context)
     {

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

@@ -8,22 +8,18 @@ The webpack-dev-server provides:
    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 [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
+   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/webpack-dev-server` 
 during development.
 
-
 # Server Side Rendering with the Default rails/webpacker bin/webpack-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 
@@ -43,7 +39,66 @@ 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/webpack-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('@rails/webpacker')
+
+   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/basics/react-server-rendering.md

@@ -1,6 +1,9 @@
 # React Server Rendering
 
-See also [Client vs. Server Rendering](./client-vs-server-rendering.md)
+See also [Client vs. Server Rendering](./client-vs-server-rendering.md).
+
+## What is the easiest way to setup a webpack configuration for server-side-rendering?
+See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
 
 ## What is Server Rendering?
 
@@ -10,13 +13,13 @@ During the Rails rendering of HTML per a browser request, the Rails server will
 
 The default JavaScript interpretter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the perfomance 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).
 
-See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
-
+See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering).
 
 ## How do you do Server Rendering with React on Rails?
 1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
 1. Configure your Webpack setup to create a different server bundle per your needs. While you may reuse the same bundle as for client rendering, this is not common in larger apps for many reasons, such as as code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
-1. You need to configure `config.server_bundle_js_file = "my-server-bundle.js"` in your `config/initializers/react_on_rails.rb`
+1. You need to configure `config.server_bundle_js_file = "server-bundle.js"` in your `config/initializers/react_on_rails.rb`
+1. You should ***not*** put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process. 
 
 ## Do you need server rendering?
 
@@ -26,4 +29,4 @@ Server rendering is used for either SEO or performance reasons.
 
 1. Never access `window`. Animations, globals on window, etc. just don't make sense when you're trying to run some JavaScript code to output a string of HTML.
 2. JavaScript calls to `setTimeout`, `setInterval`, and `clearInterval` similarly don't make sense when server rendering.
-3. Promises don't work when server rendering. Anything to be done in a promise will never complete. This includes concepts such as asynchronous code loading and AJAX calls. If you want to do server rendering with asynchronous calls, [get in touch](mailto:justin@shakacode.com) as we're working on a Node renderer that handles asynchronous calls.
+3. Promises and file system access don't work when server rendering with ExecJS. Instead, you can use the Node renderer or [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).

data/docs/basics/render-functions-and-railscontext.md

@@ -15,7 +15,7 @@ side rendering, except for the key `serverSide` based on whether or not you are
 
 While you could manually configure your Rails code to pass the "`railsContext` information" with
 the rest of your "props", the `railsContext` is a convenience because it's passed consistently to
-all invocations of render functions.
+all invocations of Render-Functions.
 
 For example, suppose you create a "render-function" called MyAppComponent.
 

data/docs/basics/upgrading-react-on-rails.md

@@ -1,16 +1,20 @@
 # Upgrading React on Rails
 
 ## Need Help Migrating?
-If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for information about our [ShakaCode Pro Support](https://www.shakacode.com/work/shakacode-pro-support.pdf).
+If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for more information about our [React on Rails Pro Support](https://www.shakacode.com/react-on-rails-pro).
 
-We specialize in helping companies to quickly and efficiently move from versions before 9 to current. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4 for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
+We specialize in helping companies to quickly and efficiently upgrade. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4+ for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
 
 ## Upgrading to v12
 ### Recent versions
-Make sure that you are on a relatively more recent version of rails and webpacker.
-v12 is tested on Rails 6. It should work on Rails v5. If you're on an older version, 
+Make sure that you are on a relatively more recent version of rails and webpacker. Yes, the [rails/webpacker](https://github.com/rails/webpacker) gem is required!
+v12 is tested on Rails 6. It should work on Rails v5. If you're on any older version,
 and v12 doesn't work, please file an issue. 
 
+### Removed Configuration config.symlink_non_digested_assets_regex
+Remove `config.symlink_non_digested_assets_regex` from your `config/initializers/react_on_rails.rb`.
+If you still need that feature, please file an issue.
+
 ### i18n default format changed to JSON
 * If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
   later update to the default JSON format as you will need to update your usage of that file. A JSON
@@ -19,25 +23,58 @@ and v12 doesn't work, please file an issue.
 ### Updated API for `ReactOnRails.register()`
 
 In order to solve the issues regarding React Hooks compatibility, the number of parameters
-for functions is used to determine if you have a render function that will get invoked to
+for functions is used to determine if you have a Render-Function that will get invoked to
 return a React component, or you are registering a React component defined by a function.
+Please see [Render-Functions and the Rails Context](./render-functions-and-railscontext.md) for
+more information on what a Render-Function is.
 
-##### Correct
+##### Update required for registered functions taking exactly 2 params.
 
-Registered Objects are of the following types. Either of these will work:
-1. Take **2 params** and return **a React function or class component**. A function component is a function
-   that takes zero or one params and returns a React Element, like JSX.
+Registered Objects are of the following type:
+1. **Function that takes only zero or one params and you return a React Element**, often JSX.  If the function takes zero or one params, there is **no migration needed** for that function.
     ```js
-    export default (props, _railsContext) => () => <Component {...props} />;
+    export default (props) => <Component {...props} />;
     ```
+    
+2. **Function that takes only zero or one params and you return an Object (_not a React Element_)**.  If the function takes zero or one params, **you need to add one or two unused params so you have exactly 2 params** and then that function will be treated as a render function and it can return an Object rather than a React element. If you don't do this, you'll see this obscure error message:
 
-2. Take only zero or one params and you return a React Element, often JSX.
+```
+  [SERVER] message: Objects are not valid as a React child (found: object with keys {renderedHtml}). If you meant to render a collection of children, use an array instead.
+  in YourComponentRenderFunction
+```
+  
+  So look in YourComponentRenderFunction and do this change
+
+```js
+   export default (props) => { renderedHTML: getRenderedHTML };
+```
+
+   To have exactly 2 arguments:
+   
+```js
+    export default (props, _railsContext) => { renderedHTML: getRenderedHTML };
+```    
+
+3. Function that takes **2 params** and returns **a React function or class component**. _Migration is needed as the older syntax returned a React Element._
+   A function component is a function that takes zero or one params and returns a React Element, like JSX. The correct syntax
+   looks like:
     ```js
-    export default (props) => <Component {...props} />;
+    export default (props, railsContext) => () => <Component {{...props, railsContext}} />;
     ```
+   Note, you cannot return a React Element (JSX). See below for the migration steps. If your function that took **two params returned
+   an Object**, then no migration is required.
+4. Function that takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`. If the function takes 3 params, there is **no migration needed** for that function.
+5. ES6 or ES5 class. There is **no migration needed**.
+  
+Previously, with case number 2, you could return a React Element.
+
+The fix is simple. Here is an example of the change you'll do:
+
+![2020-07-07_09-43-51 (1)](https://user-images.githubusercontent.com/1118459/86927351-eff79e80-c0ce-11ea-9172-d6855c45e2bb.png)
+ 
 ##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
 ```js
-export default (props, _railsContext) => <Component {...props} />;
+export default (props, railsContext) => <Component {{...props, railsContext} />;
 ```
 
 If you make this mistake, you'll get this warning
@@ -63,7 +100,7 @@ wrapper such that you're returning a function rather than a React Element, then:
 
 ## Upgrading rails/webpacker from v3 to v4
 ### Custom Webpack build file
-The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds should set this value to true or else no CSS link tags are generated. You have a custom webpack build if you are not using [rails/webpacker](https://github.com/rails/webpacker to setup your Webpack configuration.
+The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds should set this value to true or else no CSS link tags are generated. You have a custom webpack build if you are not using [rails/webpacker](https://github.com/rails/webpacker) to setup your Webpack configuration.
 
   ```yml
   default: &default

data/docs/basics/webpack-configuration.md

@@ -6,8 +6,13 @@
 
 [rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
 
-1. View helpers for placing the Webpack bundles on your Rails views. React on Rails depends on these view helpers.
-2. A layer of abstraction on top of Webpack customization. This is great for demo projects, but most real world projects will want a customized version of Webpack.
+1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
+2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
+
+To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
+
+Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh),
+you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
 
 # React on Rails
 
@@ -15,15 +20,15 @@ Version 9 of React on Rails added support for the rails/webpacker view helpers s
 
 A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
 
-## Option 1: Recommended: Traditional React on Rails using the /client directory
+## Option 1: Default Generator Setup: rails/webpacker app/javascript
 
-Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`. 
+Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md). 
 
-The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for projects beyond the simplest cases as it provides the greatest transparency in your webpack and overall client-side setup. The *big advantage* to this is that almost everything within the `/client` directory will apply if you wish to convert your client-side code to a pure Single Page Application that runs without Rails. This allows you to Google for how to do something with Webpack configuration and what applies to a non-Rails app will apply just as well to a React on Rails app.
+The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization.
 
-An examples of this pattern is the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
+## Option 2: Traditional React on Rails using the /client directory
 
-In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
+Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`. 
 
 You can access values in the `config/webpacker.yml`
 
@@ -36,15 +41,4 @@ You will want consider using some of the same values set in these files:
 * https://github.com/rails/webpacker/blob/master/package/environments/base.js
 * https://github.com/rails/webpacker/blob/master/package/environments/development.js
 
-**Note**, 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).
-
-## Option 2: Default Generator Setup: rails/webpacker app/javascript
-
-Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md). 
-
-The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](https://github.com/rails/webpacker/blob/master/docs/webpack.md) which differs from the plain [Webpack way](https://webpack.js.org/).
 
-You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md). 
- 
-See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.

data/docs/misc/doctrine.md

@@ -25,7 +25,6 @@ The React on Rails setup provides several key components related to front-end de
 * React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:
 * [Style Guide](../coding-style/style.md)
 * [linters](../contributor-info/linters.md)
-* [Recommended Project Structure](../basics/recommended-project-structure.md)
 
 We're big believers in this quote from the Rails Doctrine: 
 

data/docs/outdated/code-splitting.md

@@ -21,11 +21,11 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
 > (server) <div data-reactroot="
 <!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
 
-Different markup is generated on the client than on the server. Why does this happen? When you register a component or render function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
+Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
 
 ### The solution
 
-To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a render function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a render function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
+To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a Render-Function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a Render-Function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
 
 Here's an example of how you might use this in practice:
 
@@ -117,8 +117,8 @@ There's an implemented example of code splitting in the `spec/dummy` folder of t
 
 See:
 
-- [spec/dummy/client/app/startup/clientRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/clientRegistration.jsx)
-- [spec/dummy/client/app/startup/serverRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/serverRegistration.jsx)
+- [spec/dummy/client/app/startup/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/client-bundle.js)
+- [spec/dummy/client/app/packs/server-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/server-bundle.js)
 - [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx)<-- Code splitting implemented here
 - [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
 - [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
@@ -134,7 +134,7 @@ If you're going to try to do code splitting with server rendered routes, you'll
 
 The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asyncronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
 
-Also, do not attempt to register a renderer on the server. Instead, register either a render function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
+Also, do not attempt to register a renderer function on the server. Instead, register either a Render-Function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
 
 ## How does Webpack know where to find my code chunks?
 

data/docs/tutorial.md

@@ -1,5 +1,11 @@
 # React on Rails Basic Tutorial
 
+-----
+
+**November 11, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. This file will be update shortly. Most of it is still relevant.
+
+-----
+
 *Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.

data/lib/generators/react_on_rails/base_generator.rb

@@ -43,7 +43,14 @@ module ReactOnRails
       end
 
       def add_yarn_dependencies
-        run "yarn add react-on-rails --exact"
+        major_minor_patch_only = /\A\d+\.\d+\.\d+\z/.freeze
+        if ReactOnRails::VERSION.match?(major_minor_patch_only)
+          run "yarn add react-on-rails@#{ReactOnRails::VERSION} --exact"
+        else
+          # otherwise add latest
+          puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
+          run "yarn add react-on-rails --exact"
+        end
       end
 
       def append_to_spec_rails_helper