react_on_rails 11.1.8 → 12.0.0.pre.beta.1

data/docs/tutorial.md

@@ -1,6 +1,8 @@
 # React on Rails Basic Tutorial
 
-This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 11.1.4.
+*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.
 
 After finishing this tutorial you will get an application that can do the following (live on Heroku):
 
@@ -17,9 +19,9 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 
 _Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
 
-## Setting up the environment
+## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 5.x and node version 6+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 13+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
 
 ```
 nvm install node                # download and install latest stable Node
@@ -27,15 +29,15 @@ nvm alias default node          # make it default version
 nvm list                        # check
 
 brew install yarn               # you can use other installer if desired
-11\.\d+\.\d+
-rvm install 2.5.0               # download and install latest stable Ruby (update to exact version)
-rvm use 2.5.0 --default         # use it and make it default
+rvm install 2.7                 # download and install latest stable Ruby (update to exact version)
+rvm use 2.7 --default           # use it and make it default
 rvm list                        # check
 
 gem install rails               # download and install latest stable Rails
 gem install foreman             # download and install Foreman
 ```
 
+## Create a new Ruby on Rails App
 Then we need to create a fresh Rails application with webpacker react support as following.
 
 First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
@@ -43,55 +45,88 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
 ```
 cd <directory where you want to create your new Rails app>
 
-# any name you like for the rails app
-rails new test-react-on-rails --webpack=react 
+# Any name you like for the rails app
+# Skip javascript so will add that next and get the current version 
+rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
 
 cd test-react-on-rails
 bundle
 ```
 
-Note: if you are installing React On Rails in an existing app or an app that uses **Rails pre 5.1.3** (*not for Rails > 5.2*), you will need to run these two commands as well:
+## Add the webpacker gem
+
+```
+bundle add webpacker                 
+bundle add react_on_rails
+```
+
+## Run the webpacker generator
 
 ```
 bundle exec rails webpacker:install
 bundle exec rails webpacker:install:react
 ```
 
-Add the **React On Rails** gem to your Gemfile:
+Let's commit everything before installing React on Rails.
 
 ```
-gem 'react_on_rails', '11.1.7'         # prefer exact gem version to match npm version
+# Here are git commands to make a new git repo and commit everything.
+# Newer versions of Rails create the git repo by default.
+git add -A
+git commit -m "Initial commit"
 ```
 
-Note: 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.
+## Add the **React On Rails** gem to your `Gemfile`:
 
-Run `bundle` and commit the git repository (or `rails generate` will not work properly)
+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
 
-# Here are git commands to make a new git repo and commit everything.
-# Newer versions of Rails create the git repo by default.
-git add -A
-git commit -m "Initial commit"
+git commit -am "Added React on Rails Gem"
 ```
 
-Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
+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.
+
+Note, using `redux` is no longer recommended as the basic installer uses React Hooks. 
+If you want the redux install: `rails generate react_on_rails:install --redux`
 
 ```
 rails generate react_on_rails:install
-bundle && yarn
 ```
 
-and then run server with
+Then run server with a static client bundle. Static means that the bundle is saved in your
+public/webpack/packs directory.
 
 ```
 foreman start -f Procfile.dev
 ```
 
+## To run with the webpack-dev-server:
+```
+foreman start -f Procfile.dev-hmr
+```
+
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
-Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
+
+*Note, foreman may default to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.*
+
+# HMR vs. React Hot Reloading
+
+First, check that the `hmr` option is `true` in your `config/webpacker.yml` file.
+
+The basic setup will have HMR working with the default webpacker setup. The basic HMR will cause
+a full page refresh each time you save a file. You also lose any state on your page during the refresh. Don't try to use HMR
 
 ### Custom IP & PORT setup (Cloud9 example)
 
@@ -103,7 +138,6 @@ web: rails s -p 8080 -b 0.0.0.0
 
 Then visit https://your-shared-addr.c9users.io:8080/hello_world 
 
-
 ## RubyMine
 
 It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
@@ -218,7 +252,7 @@ end
 Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
 
 ```
-git add -a
+git add -A
 git commit -m "Changes for Heroku"
 git push heroku master
 ```
@@ -231,7 +265,6 @@ heroku open
 
 and you will see your live app and you can share this URL with your friends. Congrats!
 
-
 ## Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -240,10 +273,20 @@ You can turn on server rendering by simply changing the `prerender` option to `t
 <%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
 ```
 
+If you want to test this out with HMR, then you also need to add this line to your
+`config/intializers/react_on_rails.rb`
+
+```ruby
+  config.same_bundle_for_client_and_server = true
+```
+
+More likely, you will create a different build file for server rendering. However, if you want to
+use the same file from the webpack-dev-server, you'll need to add that line.
+
 Then push to Heroku:
 
 ```
-git add -a
+git add -A
 git commit -m "Enable server rendering"
 git push heroku master
 ```
@@ -284,7 +327,7 @@ mv app/javascript client
 
 ## Using HMR with the rails/webpacker setup
 
-Start the app using `foreman start -f Procfile.dev-server`.
+Start the app using `foreman start -f Procfile.dev-hmr`.
 
 When you change a JSX file and save, the browser will automatically refresh!
 
@@ -293,8 +336,6 @@ So you get some basics from HMR with no code changes. If you want to go further,
 * https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md
 * https://webpack.js.org/configuration/dev-server/
 * https://webpack.js.org/concepts/hot-module-replacement/
-* https://gaearon.github.io/react-hot-loader/getstarted/
-* https://github.com/gaearon/react-hot-loader
 
 React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by rails/webpacker.
 

data/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-ts',
+  testEnvironment: 'jsdom',
+};

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,7 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-server]
+                        Procfile.dev-hmr]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -107,7 +107,7 @@ module ReactOnRails
                 foreman start -f Procfile.dev
 
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpack-dev-server. Or use Procfile.dev-server.
+              and bin/webpack-dev-server. Or use Procfile.dev-hmr.
 
             - To server render, change this line app/views/hello_world/index.html.erb to
               `prerender: true` to see server rendering (right click on page and select "view source").

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -36,6 +36,7 @@ module ReactOnRails
 
       def replace_prerender_if_server_rendering
         return unless options.example_server_rendering
+
         hello_world_index = File.join(destination_root, "app", "views", "hello_world", "index.html.erb")
         hello_world_contents = File.read(hello_world_index)
         new_hello_world_contents = hello_world_contents.gsub(/prerender: false/,
@@ -49,7 +50,7 @@ module ReactOnRails
         contents = File.read(package_json)
         replacement_value = <<-STRING
   "scripts": {
-    "postinstall": "yarn link react-on-rails",
+    "postinstall": "yalc link react-on-rails",
         STRING
         new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
                                                          replacement_value)

data/lib/generators/react_on_rails/generator_helper.rb

@@ -15,13 +15,11 @@ module GeneratorHelper
   end
 
   def setup_file_error(file, data)
-    # rubocop:disable Layout/IndentHeredoc
-    <<-MSG
-#{file} was not found.
-Please add the following content to your #{file} file:
-#{data}
+    <<~MSG
+      #{file} was not found.
+      Please add the following content to your #{file} file:
+      #{data}
     MSG
-    # rubocop:enable Layout/IndentHeredoc
   end
 
   def empty_directory_with_keep_file(destination, config = {})

data/lib/generators/react_on_rails/install_generator.rb

@@ -62,6 +62,7 @@ module ReactOnRails
 
       def missing_yarn?
         return false unless ReactOnRails::Utils.running_on_windows? ? `where yarn`.blank? : `which yarn`.blank?
+
         error = "yarn is required. Please install it before continuing. https://yarnpkg.com/en/docs/install"
         GeneratorMessages.add_error(error)
         true
@@ -69,6 +70,7 @@ module ReactOnRails
 
       def missing_node?
         return false unless ReactOnRails::Utils.running_on_windows? ? `where node`.blank? : `which node`.blank?
+
         error = "** nodejs is required. Please install it before continuing. https://nodejs.org/en/"
         GeneratorMessages.add_error(error)
         true

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -4,4 +4,6 @@ web: rails s -p 3000
 # Next line runs a watch process with webpack to compile the changed files.
 # When making frequent changes to client side assets, you will prefer building webpack assets
 # upon saving rather than when you refresh your browser page.
-client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr

@@ -0,0 +1,18 @@
+web: rails s -p 3000
+
+# Note, hot and live reloading don't work with the default generator setup on
+# top of the rails/webpacker Webpack config with server rendering.
+# If you have server rendering enabled (prerender is true), you either need to
+# a. Skip using the webpack-dev-server. bin/webpack --watch is typically
+     fast enough.
+# b. See the React on Rails README for a link to documentation for how to setup
+#    SSR with HMR and React hot loading
+# Otherwise, you will have an error. If you want HMR and Server Rendering, see
+# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
+web: rails s -p 3000
+
+# Run the hot reload server for client development
+webpack-dev-server: bin/webpack-dev-server
+
+# Keep the JS fresh for server rendering. Remove if not server rendering
+rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,45 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 
-export default class HelloWorld extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired, // this is passed from the Rails view
-  };
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
 
-  /**
-   * @param props - Comes from your rails view.
-   */
-  constructor(props) {
-    super(props);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
 
-    // How to set initial state in ES6 class syntax
-    // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
-    this.state = { name: this.props.name };
-  }
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
 
-  updateName = (name) => {
-    this.setState({ name });
-  };
-
-  render() {
-    return (
-      <div>
-        <h3>
-          Hello, {this.state.name}!
-        </h3>
-        <hr />
-        <form >
-          <label htmlFor="name">
-            Say hello to:
-          </label>
-          <input
-            id="name"
-            type="text"
-            value={this.state.name}
-            onChange={(e) => this.updateName(e.target.value)}
-          />
-        </form>
-      </div>
-    );
-  }
-}
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -4,19 +4,15 @@ import React from 'react';
 const HelloWorld = ({ name, updateName }) => (
   <div>
     <h3>
-      Hello, {name}!
+      Hello,
+      {name}!
     </h3>
     <hr />
-    <form >
+    <form>
       <label htmlFor="name">
         Say hello to:
+        <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
       </label>
-      <input
-        id="name"
-        type="text"
-        value={name}
-        onChange={(e) => updateName(e.target.value)}
-      />
     </form>
   </div>
 );

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js

@@ -1,8 +1,6 @@
 import { createStore } from 'redux';
 import helloWorldReducer from '../reducers/helloWorldReducer';
 
-const configureStore = (railsProps) => (
-  createStore(helloWorldReducer, railsProps)
-);
+const configureStore = (railsProps) => createStore(helloWorldReducer, railsProps);
 
 export default configureStore;

data/lib/react_on_rails.rb

@@ -11,6 +11,7 @@ require "react_on_rails/version"
 require "react_on_rails/version_checker"
 require "react_on_rails/configuration"
 require "react_on_rails/server_rendering_pool"
+require "react_on_rails/server_rendering_js_code"
 require "react_on_rails/engine"
 require "react_on_rails/react_component/render_options"
 require "react_on_rails/version_syntax_converter"
@@ -21,4 +22,6 @@ require "react_on_rails/webpacker_utils"
 require "react_on_rails/test_helper/webpack_assets_compiler"
 require "react_on_rails/test_helper/webpack_assets_status_checker"
 require "react_on_rails/test_helper/ensure_assets_compiled"
-require "react_on_rails/locales_to_js"
+require "react_on_rails/locales/base"
+require "react_on_rails/locales/to_js"
+require "react_on_rails/locales/to_json"

data/lib/react_on_rails/configuration.rb

@@ -21,7 +21,7 @@ module ReactOnRails
       prerender: false,
       replay_console: true,
       logging_on_server: true,
-      raise_on_prerender_error: false,
+      raise_on_prerender_error: Rails.env.development?,
       trace: Rails.env.development?,
       development_mode: Rails.env.development?,
       server_renderer_pool_size: DEFAULT_POOL_SIZE,
@@ -31,10 +31,11 @@ module ReactOnRails
       webpack_generated_files: %w[manifest.json],
       rendering_extension: nil,
       server_render_method: nil,
-      symlink_non_digested_assets_regex: nil,
       build_test_command: "",
       build_production_command: "",
-      random_dom_id: DEFAULT_RANDOM_DOM_ID
+      random_dom_id: DEFAULT_RANDOM_DOM_ID,
+      same_bundle_for_client_and_server: false,
+      i18n_output_format: nil
     )
   end
 
@@ -46,8 +47,9 @@ module ReactOnRails
                   :generated_assets_dirs, :generated_assets_dir,
                   :webpack_generated_files, :rendering_extension, :build_test_command,
                   :build_production_command,
-                  :i18n_dir, :i18n_yml_dir,
-                  :server_render_method, :symlink_non_digested_assets_regex, :random_dom_id
+                  :i18n_dir, :i18n_yml_dir, :i18n_output_format,
+                  :server_render_method, :random_dom_id,
+                  :same_bundle_for_client_and_server
 
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
                    replay_console: nil,
@@ -58,16 +60,17 @@ module ReactOnRails
                    generated_assets_dir: nil, webpack_generated_files: nil,
                    rendering_extension: nil, build_test_command: nil,
                    build_production_command: nil,
-                   i18n_dir: nil, i18n_yml_dir: nil, random_dom_id: nil,
-                   server_render_method: nil, symlink_non_digested_assets_regex: nil)
+                   same_bundle_for_client_and_server: nil,
+                   i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil,
+                   random_dom_id: nil, server_render_method: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
-      self.server_bundle_js_file = server_bundle_js_file
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
       self.build_test_command = build_test_command
       self.build_production_command = build_production_command
       self.i18n_dir = i18n_dir
       self.i18n_yml_dir = i18n_yml_dir
+      self.i18n_output_format = i18n_output_format
 
       self.random_dom_id = random_dom_id
       self.prerender = prerender
@@ -83,6 +86,8 @@ module ReactOnRails
       self.skip_display_none = skip_display_none
 
       # Server rendering:
+      self.server_bundle_js_file = server_bundle_js_file
+      self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
 
@@ -90,7 +95,6 @@ module ReactOnRails
       self.rendering_extension = rendering_extension
 
       self.server_render_method = server_render_method
-      self.symlink_non_digested_assets_regex = symlink_non_digested_assets_regex
     end
 
     # on ReactOnRails
@@ -99,7 +103,6 @@ module ReactOnRails
       configure_generated_assets_dirs_deprecation
       configure_skip_display_none_deprecation
       ensure_generated_assets_dir_present
-      ensure_server_bundle_js_file_has_no_path
       check_i18n_directory_exists
       check_i18n_yml_directory_exists
       check_server_render_method_is_only_execjs
@@ -198,26 +201,15 @@ module ReactOnRails
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      files = ["hello-world-bundle.js"]
+      files = ["manifest.json"]
       files << server_bundle_js_file if server_bundle_js_file.present?
 
       self.webpack_generated_files = files
     end
 
-    def ensure_server_bundle_js_file_has_no_path
-      return unless server_bundle_js_file.include?(File::SEPARATOR)
-
-      assets_dir = ReactOnRails::Utils.generated_assets_full_path
-      self.server_bundle_js_file = File.basename(server_bundle_js_file)
-
-      Rails.logger.warn do
-        "[DEPRECATION] ReactOnRails: remove path from server_bundle_js_file in configuration. "\
-      "All generated files must go in #{assets_dir}. Using file basename #{server_bundle_js_file}"
-      end
-    end
-
     def configure_skip_display_none_deprecation
       return if skip_display_none.nil?
+
       Rails.logger.warn "[DEPRECATION] ReactOnRails: remove skip_display_none from configuration."
     end
   end