react_on_rails 11.1.7 → 12.0.0.pre.beta.0

data/docs/testimonials/testimonials.md

@@ -0,0 +1,28 @@
+# Testimonials
+# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./hvmn.md)
+
+> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
+
+Full writeup [here](./hvmn.md).
+
+---
+
+# [Leora from ResortPass](./resortpass.md), December 10, 2018
+
+Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds. 
+
+Full writeup [here](./testimonials/resortpass.md).
+
+---
+
+From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
+
+![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)
+
+---
+
+From Kyle Maune of Cooper Aerial, May 4, 2018
+
+![image](https://user-images.githubusercontent.com/1118459/40891236-9b0b406e-671d-11e8-80ee-c026dbd1d5a2.png)
+
+For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](KUDOS.md).

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,9 +29,8 @@ 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
@@ -44,53 +45,90 @@ 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 
+rails new test-react-on-rails --webpack=react --skip-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, you will need to run these two commands as well:
+Note: if you are adding React On Rails to an existing app you will instead to run these two commands as well:
 
 ```
 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.
+
+```
+# 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"
+```
+
+Add the **React On Rails** gem to your `Gemfile`:
 
 ```
-gem 'react_on_rails', '11.1.4'         # prefer exact gem version to match npm version
+gem 'react_on_rails', '12.0.0'         # prefer exact gem version to match npm version
 ```
 
 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.
 
-Run `bundle` and commit the git repository (or `rails generate` will not work properly)
-
+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.
 
 ```
 rails generate react_on_rails:install
-bundle && yarn
 ```
 
-and then run server with
+Then run server with static client side files:
 
 ```
 foreman start -f Procfile.dev
 ```
 
-Visit 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.
+To run with the webpack-dev-server:
+```
+foreman start -f Procfile.dev-server
+```
+
+Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
+
+*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. However, the basic will cause a full page refresh each time you save a file.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 ### Custom IP & PORT setup (Cloud9 example)
 
@@ -115,7 +153,7 @@ It's super important to exclude certain directories from RubyMine or else it wil
 ### Create Your Heroku App
 *Assuming you can login to heroku.com and have logged into to your shell for heroku.*
 
-1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
+1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
 
 ![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
 
@@ -137,10 +175,11 @@ Set heroku to use multiple buildpacks:
    gem 'pg'
 ```
 
-![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
+2. Run `bundle`
 
+![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
 
-2. Replace your `database.yml` file with this (assuming your app name is "ror").
+3. Replace your `database.yml` file with this (assuming your app name is "ror").
 
 ```yml
 default: &default
@@ -185,11 +224,15 @@ root "hello_world#index"
 
 Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
 
+Create `/Procfile`. This is what Heroku uses to start your app.
+
 `Procfile`
 ```
 web: bundle exec puma -C config/puma.rb
 ```
 
+Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2018-10-13, the docs looked like this:
+
 `config/puma.rb`
 ```rb
 workers Integer(ENV['WEB_CONCURRENCY'] || 2)
@@ -213,8 +256,97 @@ Then after all changes are done don't forget to commit them with git and finally
 
 ```
 git add -A
-git commit -m "Latest changes"
+git commit -m "Changes for Heroku"
 git push heroku master
 ```
 
-Feedback is greatly appreciated! As are stars on github! If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com).
+Then run:
+
+```
+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`:
+
+```erb
+<%= 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 commit -m "Enable server rendering"
+git push heroku master
+```
+
+When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
+
+```html
+<div id="HelloWorld-react-component-b7ae1dc6-396c-411d-886a-269633b3f604"></div>
+```
+
+versus with server rendering:
+
+```html
+<div id="HelloWorld-react-component-d846ce53-3b82-4c4a-8f32-ffc347c8444a"><div data-reactroot=""><h3>Hello, <!-- -->Stranger<!-- -->!</h3><hr/><form><label for="name">Say hello to:</label><input type="text" id="name" value="Stranger"/></form></div></div>
+```
+
+For more details on server rendering, see:
+
+  + [Client vs. Server Rendering](./basics/client-vs-server-rendering.md)
+  + [React Server Rendering](./basics/react-server-rendering.md)
+
+## Moving from the Rails default `/app/javascript` to the recommended `/client` structure
+
+ShakaCode recommends that you use `/client` for your client side app. This way a non-Rails, front-end developer can be at home just by opening up the `/client` directory.
+
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Using HMR with the rails/webpacker setup
+
+Start the app using `foreman start -f Procfile.dev-server`.
+
+When you change a JSX file and save, the browser will automatically refresh!
+
+So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
+
+* 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/
+
+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.
+
+## Conclusion
+
+* Browse the docs either on the [gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) or in the [docs directory on github](https://github.com/shakacode/react_on_rails/tree/master/docs)
+
+Feedback is greatly appreciated! As are stars on github! 
+
+If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com). We offer [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) and consulting so you can focus on your app and not on how to make Webpack plus Rails work optimally.

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/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/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -25,19 +25,20 @@ export default class HelloWorld extends React.Component {
     return (
       <div>
         <h3>
-          Hello, {this.state.name}!
+          Hello,
+          {this.state.name}!
         </h3>
         <hr />
-        <form >
+        <form>
           <label htmlFor="name">
             Say hello to:
+            <input
+              id="name"
+              type="text"
+              value={this.state.name}
+              onChange={(e) => this.updateName(e.target.value)}
+            />
           </label>
-          <input
-            id="name"
-            type="text"
-            value={this.state.name}
-            onChange={(e) => this.updateName(e.target.value)}
-          />
         </form>
       </div>
     );

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