react_on_rails 12.0.1 → 12.0.5.beta.0

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

@@ -1,13 +1,13 @@
 # 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.
+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. 
 
@@ -28,20 +28,43 @@ return a React component, or you are registering a React component defined by a
 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. Takes only zero or one params and you return a React Element, often 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) => <Component {...props} />;
-    ```       
-2. Takes **2 params** and returns **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.
+    ```
+    
+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:
+
+```
+  [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, _railsContext) => () => <Component {...props} />;
+    export default (props, railsContext) => () => <Component {{...props, railsContext}} />;
     ```
-   Note, you cannot return a React Element (JSX).
-3. Takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`
+   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.
 
@@ -51,7 +74,7 @@ The fix is simple. Here is an example of the change you'll do:
  
 ##### 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
@@ -77,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

@@ -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)

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.
@@ -53,11 +59,21 @@ cd test-react-on-rails
 bundle
 ```
 
-## Add the webpacker gem
+## Add the webpacker and react_on_rails gems
+To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
+of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
+_Use the latest version for react_on_rails._
 
 ```
+gem 'react_on_rails', '12.0.4'         # prefer exact gem version to match npm version
+```
+
+Note: The latest released React On Rails version is considered stable. Please use the latest
+version to ensure you get all the security patches and the best support.
+
+```bash
 bundle add webpacker                 
-bundle add react_on_rails
+bundle add react_on_rails --version=12.0.4 --strict
 ```
 
 ## Run the webpacker generator
@@ -76,25 +92,7 @@ git add -A
 git commit -m "Initial commit"
 ```
 
-## Add the **React On Rails** gem to your `Gemfile`:
-
-To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
-of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
-
-```
-gem 'react_on_rails', '12.0.0'         # prefer exact gem version to match npm version
-```
-
-Note: The latest released React On Rails version is considered stable. Please use the latest 
-version to ensure you get all the security patches and the best support.
-
-Run `bundle` and commit the changes.
-
-```
-bundle
-
-git commit -am "Added React on Rails Gem"
-```
+## Run the React on Rails Generator
 
 Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
 

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

data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb

@@ -15,7 +15,10 @@ require "capybara/rspec"
 require "capybara/rails"
 Capybara.javascript_driver = :selenium_chrome
 Capybara.register_driver :selenium_chrome do |app|
-  Capybara::Selenium::Driver.new(app, browser: :chrome)
+  options = Selenium::WebDriver::Chrome::Options.new
+  options.add_argument("--headless")
+  options.add_argument("--disable-gpu")
+  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
 end
 
 # Requires supporting ruby files with custom matchers and macros, etc, in

data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb

@@ -17,7 +17,7 @@ if ENV["COVERAGE"] == "true"
 
     # Don't report anything that has "spec" in the path
     add_filter do |src|
-      src.filename =~ %r{\/spec\/}
+      src.filename.include?("/spec/")
     end
   end
 end

data/lib/react_on_rails/configuration.rb

@@ -53,6 +53,7 @@ module ReactOnRails
                   :server_render_method, :random_dom_id,
                   :same_bundle_for_client_and_server
 
+    # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
                    replay_console: nil,
                    trace: nil, development_mode: nil,
@@ -98,6 +99,7 @@ module ReactOnRails
 
       self.server_render_method = server_render_method
     end
+    # rubocop:enable Metrics/AbcSize
 
     # on ReactOnRails
     def setup_config_values

data/lib/react_on_rails/git_utils.rb

@@ -10,10 +10,10 @@ module ReactOnRails
       status = `git status --porcelain`
       return false if $CHILD_STATUS.success? && status.empty?
 
-      error = if !$CHILD_STATUS.success?
-                "You do not have Git installed. Please install Git, and commit your changes before continuing"
-              else
+      error = if $CHILD_STATUS.success?
                 "You have uncommitted code. Please commit or stash your changes before continuing"
+              else
+                "You do not have Git installed. Please install Git, and commit your changes before continuing"
               end
       message_handler.add_error(error)
       true

data/lib/react_on_rails/helper.rb

@@ -32,8 +32,8 @@ module ReactOnRails
     #   Exposing the react_component_name is necessary to both a plain ReactComponent as well as
     #     a generator:
     #   See README.md for how to "register" your react components.
-    #   See spec/dummy/client/app/startup/serverRegistration.jsx and
-    #     spec/dummy/client/app/startup/ClientRegistration.jsx for examples of this
+    #   See spec/dummy/client/app/packs/server-bundle.js and
+    #     spec/dummy/client/app/packs/client-bundle.js for examples of this.
     #
     # options:
     #   props: Ruby Hash or JSON string which contains the properties to pass to the react object. Do
@@ -57,14 +57,15 @@ module ReactOnRails
       server_rendered_html = internal_result[:result]["html"]
       console_script = internal_result[:result]["consoleReplayScript"]
 
-      if server_rendered_html.is_a?(String)
+      case server_rendered_html
+      when String
         build_react_component_result_for_server_rendered_string(
           server_rendered_html: server_rendered_html,
           component_specification_tag: internal_result[:tag],
           console_script: console_script,
           render_options: internal_result[:render_options]
         )
-      elsif server_rendered_html.is_a?(Hash)
+      when Hash
         msg = <<~MSG
           Use react_component_hash (not react_component) to return a Hash to your ruby view code. See
           https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
@@ -169,7 +170,7 @@ module ReactOnRails
     def redux_store_hydration_data
       return if @registered_stores_defer_render.blank?
 
-      @registered_stores_defer_render.reduce("".dup) do |accum, redux_store_data|
+      @registered_stores_defer_render.reduce(+"") do |accum, redux_store_data|
         accum << render_redux_store_data(redux_store_data)
       end.html_safe
     end
@@ -243,7 +244,7 @@ module ReactOnRails
     # second parameter passed to both component and store Render-Functions.
     # This method can be called from views and from the controller, as `helpers.rails_context`
     #
-    # rubocop:disable Metrics/AbcSize
+    # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity
     def rails_context(server_side: true)
       # ALERT: Keep in sync with node_package/src/types/index.ts for the properties of RailsContext
       @rails_context ||= begin
@@ -291,7 +292,7 @@ module ReactOnRails
 
       @rails_context.merge(serverSide: server_side)
     end
-    # rubocop:enable Metrics/AbcSize
+    # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
 
     private
 
@@ -486,13 +487,13 @@ module ReactOnRails
     end
 
     def initialize_redux_stores
-      result = <<-JS.dup
+      result = +<<-JS
       ReactOnRails.clearHydratedStores();
       JS
 
       return result unless @registered_stores.present? || @registered_stores_defer_render.present?
 
-      declarations = "var reduxProps, store, storeGenerator;\n".dup
+      declarations = +"var reduxProps, store, storeGenerator;\n"
       all_stores = (@registered_stores || []) + (@registered_stores_defer_render || [])
 
       result << all_stores.each_with_object(declarations) do |redux_store_data, memo|

data/lib/react_on_rails/locales/base.rb

@@ -32,12 +32,12 @@ module ReactOnRails
       end
 
       def exist_files
-        @exist_files ||= files.select(&File.method(:exist?))
+        @exist_files ||= files.select { |file| File.exist?(file) }
       end
 
       def files_are_outdated
-        latest_yml = locale_files.map(&File.method(:mtime)).max
-        earliest = exist_files.map(&File.method(:mtime)).min
+        latest_yml = locale_files.map { |file| File.mtime(file) }.max
+        earliest = exist_files.map { |file| File.mtime(file) }.min
         latest_yml > earliest
       end
 

data/lib/react_on_rails/locales/to_js.rb

@@ -5,10 +5,6 @@ require "erb"
 module ReactOnRails
   module Locales
     class ToJs < Base
-      def initialize
-        super
-      end
-
       private
 
       def file_format

data/lib/react_on_rails/locales/to_json.rb

@@ -5,10 +5,6 @@ require "erb"
 module ReactOnRails
   module Locales
     class ToJson < Base
-      def initialize
-        super
-      end
-
       private
 
       def file_format

data/lib/react_on_rails/prerender_error.rb

@@ -46,7 +46,7 @@ module ReactOnRails
     private
 
     def calc_message(component_name, console_messages, err, js_code, props)
-      message = "ERROR in SERVER PRERENDERING\n".dup
+      message = +"ERROR in SERVER PRERENDERING\n"
       if err
         message << <<~MSG
           Encountered error: \"#{err}\"

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -47,6 +47,7 @@ module ReactOnRails
         # Note, js_code does not have to be based on React.
         # js_code MUST RETURN json stringify Object
         # Calling code will probably call 'html_safe' on return value before rendering to the view.
+        # rubocop:disable Metrics/CyclomaticComplexity
         def exec_server_render_js(js_code, render_options, js_evaluator = nil)
           js_evaluator ||= self
           if render_options.trace
@@ -67,16 +68,15 @@ module ReactOnRails
             console_script = result["consoleReplayScript"]
             console_script_lines = console_script.split("\n")
             console_script_lines = console_script_lines[2..-2]
-            re = /console\.(log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
-            if console_script_lines
-              console_script_lines.each do |line|
-                match = re.match(line)
-                Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
-              end
+            re = /console\.(?:log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
+            console_script_lines&.each do |line|
+              match = re.match(line)
+              Rails.logger.info { "[react_on_rails] #{match[:msg]}" } if match
             end
           end
           result
         end
+        # rubocop:enable Metrics/CyclomaticComplexity
 
         def trace_js_code_used(msg, js_code, file_name = "tmp/server-generated.js", force: false)
           return unless ReactOnRails.configuration.trace || force

data/lib/react_on_rails/test_helper.rb

@@ -52,6 +52,7 @@ module ReactOnRails
     #                        don't provide one.
     # webpack_generated_files List of files to check for up-to-date-status, defaulting to
     #                        webpack_generated_files in your configuration
+    # rubocop:disable Metrics/CyclomaticComplexity
     def self.ensure_assets_compiled(webpack_assets_status_checker: nil,
                                     webpack_assets_compiler: nil,
                                     source_path: nil,
@@ -96,4 +97,5 @@ module ReactOnRails
       ).call
     end
   end
+  # rubocop:enable Metrics/CyclomaticComplexity
 end