react_on_rails 11.0.5 → 13.4.0

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,17 +33,68 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-server]
+                        Procfile.dev-static]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_js_bundle_files
+        base_path = "base/base/"
+        base_files = %w[app/javascript/packs/server-bundle.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpack_config
+        puts "Adding Webpack config"
+        base_path = "base/base"
+        base_files = %w[babel.config.js
+                        config/webpack/clientWebpackConfig.js
+                        config/webpack/commonWebpackConfig.js
+                        config/webpack/test.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/webpack.config.js
+                        config/webpack/webpackConfig.js]
+        config = {
+          message: "// The source code including full typescript support is available at:"
+        }
+        base_files.each do |file|
+          template("#{base_path}/#{file}.tt", file, config)
+        end
+      end
+
+      def copy_shakapacker_config
+        puts "Adding Shakapacker v7 config file"
+        base_path = "base/base/"
+        base_files = %w[config/shakapacker.yml]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
       def add_base_gems_to_gemfile
-        gem "mini_racer", platforms: :ruby
         run "bundle"
       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
+
+        puts "Adding React dependencies"
+        run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types \
+            babel-plugin-macros"
+
+        puts "Adding CSS handlers"
+        run "yarn add css-loader css-minimizer-webpack-plugin mini-css-extract-plugin style-loader"
+
+        puts "Adding dev dependencies"
+        run "yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh"
       end
 
       def append_to_spec_rails_helper
@@ -81,51 +132,12 @@ module ReactOnRails
           ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
       STR
 
-      def self.helpful_message
-        <<-MSG.strip_heredoc
-
-          What to do next:
-
-            - See the documentation on https://github.com/rails/webpacker/blob/master/docs/webpack.md
-              for how to customize the default webpack configuration.
-
-            - Include your webpack assets to your application layout.
-
-                <%= javascript_pack_tag 'hello-world-bundle' %>
-
-            - Run `rails s` to start the Rails server and use Webpacker's default lazy compilation.
-
-            - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-
-            - Run bin/webpack-dev-server to start the Webpack dev server for compilation of Webpack
-              assets as soon as you save. This default setup with the dev server does not work
-              for server rendering
-
-            - Alternately, you may turn off compile in config/webpacker.yml and run the foreman
-              command to start the rails server and run webpack in watch mode.
-
-                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.
-
-            - 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").
-
-                <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
-        MSG
-      end
-
-      def print_helpful_message
-        GeneratorMessages.add_info(self.class.helpful_message)
-      end
-
       private
 
       # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
       def app_name
         @app_name ||= (defined_app_const_base? ? defined_app_name : File.basename(destination_root))
-                      .tr('\\', "").tr(". ", "_")
+                      .tr("\\", "").tr(". ", "_")
       end
 
       def defined_app_name

data/lib/generators/react_on_rails/bin/dev

@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+def installed?(process)
+  IO.popen "#{process} -v"
+rescue Errno::ENOENT
+  false
+end
+
+def run(process)
+  system "#{process} start -f Procfile.dev"
+rescue Errno::ENOENT
+  warn <<~MSG
+    ERROR:
+    Please ensure `Procfile.dev` exists in your project!
+  MSG
+  exit!
+end
+
+if installed? "overmind"
+  run "overmind"
+elsif installed? "foreman"
+  run "foreman"
+else
+  warn <<~MSG
+    NOTICE:
+    For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
+  MSG
+  exit!
+end

data/lib/generators/react_on_rails/bin/dev-static

@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+def installed?(process)
+  IO.popen "#{process} -v"
+rescue Errno::ENOENT
+  false
+end
+
+def run(process)
+  system "#{process} start -f Procfile.dev-static"
+rescue Errno::ENOENT
+  warn <<~MSG
+    ERROR:
+    Please ensure `Procfile.dev-static` exists in your project!
+  MSG
+  exit!
+end
+
+if installed? "overmind"
+  run "overmind"
+elsif installed? "foreman"
+  run "foreman"
+else
+  warn <<~MSG
+    NOTICE:
+    For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
+  MSG
+  exit!
+end

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -25,7 +25,7 @@ module ReactOnRails
       end
 
       def copy_tests
-        %w[spec/features/hello_world_spec.rb].each { |file| copy_file(file) }
+        %w[spec/system/hello_world_spec.rb].each { |file| copy_file(file) }
       end
 
       def add_test_related_gems_to_gemfile
@@ -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,8 +50,8 @@ module ReactOnRails
         contents = File.read(package_json)
         replacement_value = <<-STRING
   "scripts": {
-    "postinstall": "yarn link react-on-rails",
-STRING
+    "postinstall": "yalc link react-on-rails",
+        STRING
         new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
                                                          replacement_value)
         File.open(package_json, "w+") { |f| f.puts new_client_package_json_contents }

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 = {})
@@ -54,4 +52,8 @@ Please add the following content to your #{file} file:
     empty_directory(parent_directories) unless dest_dir_exists?(parent_directories)
     copy_file source_file, destination_file
   end
+
+  def add_documentation_reference(message, source)
+    "#{message} \n#{source}"
+  end
 end

data/lib/generators/react_on_rails/generator_messages.rb

@@ -37,5 +37,45 @@ module GeneratorMessages
     def clear
       @output = []
     end
+
+    def helpful_message_after_installation
+      <<~MSG
+
+        What to do next:
+
+          - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
+            for how to customize the default webpack configuration.
+
+          - Include your webpack assets to your application layout.
+
+              <%= javascript_pack_tag 'hello-world-bundle' %>
+
+          - To start Rails server run:
+
+              ./bin/dev # Running with HMR
+
+            or
+
+              ./bin/dev-static # Running with statically created bundles, without 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").
+
+              <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
+
+        Alternative steps to run the app:
+
+          - Run `rails s` to start the Rails server.
+
+          - Run bin/shakapacker-dev-server to start the Webpack dev server for compilation of Webpack
+            assets as soon as you save. This default setup with the dev server does not work
+            for server rendering
+
+          - Visit http://localhost:3000/hello_world and see your React On Rails app running!
+
+          - To turn on HMR, edit config/shakapacker.yml and set HMR to true. Restart the rails server
+            and bin/shakapacker-dev-server. Or use Procfile.dev.
+      MSG
+    end
   end
 end

data/lib/generators/react_on_rails/install_generator.rb

@@ -28,6 +28,8 @@ module ReactOnRails
       def run_generators
         if installation_prerequisites_met? || options.ignore_warnings?
           invoke_generators
+          add_bin_scripts
+          add_post_install_message
         else
           error = "react_on_rails generator prerequisites not met!"
           GeneratorMessages.add_error(error)
@@ -51,6 +53,8 @@ module ReactOnRails
         else
           invoke "react_on_rails:react_no_redux"
         end
+
+        invoke "react_on_rails:adapt_for_older_shakapacker" unless using_shakapacker_7?
       end
 
       # NOTE: other requirements for existing files such as .gitignore or application.
@@ -62,6 +66,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,10 +74,42 @@ 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
       end
+
+      def add_bin_scripts
+        directory "#{__dir__}/bin", "bin"
+
+        # Make these and only these files executable
+        files_to_copy = []
+        Dir.chdir("#{__dir__}/bin") do
+          files_to_copy.concat(Dir.glob("*"))
+        end
+        files_to_become_excutable = files_to_copy.map { |filename| "bin/#{filename}" }
+
+        File.chmod(0o755, *files_to_become_excutable)
+      end
+
+      def add_post_install_message
+        message = GeneratorMessages.helpful_message_after_installation
+        unless using_shakapacker_7?
+          message = message.gsub("config/shakapacker", "config/webpacker")
+          message = message.gsub("bin/shakapacker", "bin/webpacker")
+        end
+
+        GeneratorMessages.add_info(message)
+      end
+
+      def using_shakapacker_7?
+        shakapacker_gem = Gem::Specification.find_by_name("shakapacker")
+        shakapacker_gem.version.segments.first == 7
+      rescue Gem::MissingSpecError
+        # In case using Webpacker
+        false
+      end
     end
   end
 end

data/lib/generators/react_on_rails/templates/.eslintrc

@@ -1,5 +1,7 @@
 ---
-extends: eslint-config-shakacode
+extends: 
+  - eslint-config-shakacode
+  - prettier
 
 plugins:
   - react

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

@@ -1,7 +1,5 @@
+# Procfile for development using HMR
 # You can run these commands in separate shells
-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'
+rails: bundle exec rails s -p 3000
+wp-client: bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

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

@@ -0,0 +1,9 @@
+# You can run these commands in separate shells
+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.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
+webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'

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

@@ -1,45 +1,26 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
+import style from './HelloWorld.module.css';
 
-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 className={style.bright} 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/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}

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

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld';
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>ReactOnRailsWithWebpacker</title>
+    <title>ReactOnRailsWithShakapacker</title>
     <%= csrf_meta_tags %>
     <%= javascript_pack_tag 'hello-world-bundle' %>
+    <%= stylesheet_pack_tag 'hello-world-bundle' %>
   </head>
 
   <body>

data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt

@@ -0,0 +1,32 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js") %>
+
+module.exports = function (api) {
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: !isProductionEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -1,12 +1,13 @@
 # frozen_string_literal: true
 
-# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
+# See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md
 # for many more options.
 
 ReactOnRails.configure do |config|
   # This configures the script to run to build the production assets by webpack. Set this to nil
   # if you don't want react_on_rails building this file for you.
-  config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
+  # If nil, then the standard shakacode/shakapacker assets:precompile will run
+  # config.build_production_command = nil
 
   ################################################################################
   ################################################################################
@@ -22,7 +23,9 @@ ReactOnRails.configure do |config|
   # with rspec then this controls what yarn command is run
   # to automatically refresh your webpack assets on every test run.
   #
-  config.build_test_command = "RAILS_ENV=test bin/webpack"
+  # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
+  # and set the config/shakapacker.yml option for test to true.
+  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
 
   ################################################################################
   ################################################################################
@@ -38,5 +41,18 @@ ReactOnRails.configure do |config|
   # different. You should have ONE server bundle which can create all of your server rendered
   # React components.
   #
-  config.server_bundle_js_file = "hello-world-bundle.js"
+  config.server_bundle_js_file = "server-bundle.js"
+
+  ################################################################################
+  ################################################################################
+  # FILE SYSTEM BASED COMPONENT REGISTRY
+  ################################################################################
+  # `components_subdirectory`  is the name of the matching directories that contain automatically registered components
+  # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
+  # config.components_subdirectory = "ror_components"
+  #
+  # For automated component registry, `render_component` view helper method tries to load bundle for component from
+  # generated directory. default is false, you can pass option at the time of individual usage or update the default
+  # in the following line
+  config.auto_load_bundle = false
 end

data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml

@@ -0,0 +1,62 @@
+# Note: You must restart bin/shakapacker-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/shakapacker
+  webpack_compile_output: true
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+development:
+  <<: *default
+  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-setic
+  compile: false
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
+    hmr: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: [ 'localhost' ]
+    pretty: true
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt

@@ -0,0 +1,17 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/clientWebpackConfig.js") %>
+
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const configureClient = () => {
+  const clientConfig = commonWebpackConfig();
+
+  // server-bundle is special and should ONLY be built by the serverConfig
+  // In case this entry is not deleted, a very strange "window" not found
+  // error shows referring to window["webpackJsonp"]. That is because the
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle'];
+
+  return clientConfig;
+};
+
+module.exports = configureClient;