react_on_rails 11.3.0 → 12.0.0

data/lib/react_on_rails/locales/to_js.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJs < Base
+      def initialize
+        super
+      end
+
+      private
+
+      def file_format
+        "js"
+      end
+
+      def template_translations
+        <<-JS.strip_heredoc
+          export const translations = #{@translations};
+        JS
+      end
+
+      def template_default
+        <<-JS.strip_heredoc
+          import { defineMessages } from 'react-intl';
+
+          const defaultLocale = \'#{default_locale}\';
+
+          const defaultMessages = defineMessages(#{@defaults});
+
+          export { defaultMessages, defaultLocale };
+        JS
+      end
+    end
+  end
+end

data/lib/react_on_rails/locales/to_json.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "erb"
+
+module ReactOnRails
+  module Locales
+    class ToJson < Base
+      def initialize
+        super
+      end
+
+      private
+
+      def file_format
+        "json"
+      end
+
+      def template_translations
+        @translations
+      end
+
+      def template_default
+        @defaults
+      end
+    end
+  end
+end

data/lib/react_on_rails/prerender_error.rb

@@ -48,33 +48,29 @@ module ReactOnRails
     def calc_message(component_name, console_messages, err, js_code, props)
       message = "ERROR in SERVER PRERENDERING\n".dup
       if err
-        # rubocop:disable Layout/IndentHeredoc
-        message << <<-MSG
-Encountered error: \"#{err}\"
+        message << <<~MSG
+          Encountered error: \"#{err}\"
         MSG
-        # rubocop:enable Layout/IndentHeredoc
+
         backtrace = err.backtrace.join("\n")
       else
         backtrace = nil
       end
-      # rubocop:disable Layout/IndentHeredoc
-      message << <<-MSG
-when prerendering #{component_name} with props: #{Utils.smart_trim(props, MAX_ERROR_SNIPPET_TO_LOG)}
+      message << <<~MSG
+        when prerendering #{component_name} with props: #{Utils.smart_trim(props, MAX_ERROR_SNIPPET_TO_LOG)}
 
-code:
+        code:
 
-#{Utils.smart_trim(js_code, MAX_ERROR_SNIPPET_TO_LOG)}
+        #{Utils.smart_trim(js_code, MAX_ERROR_SNIPPET_TO_LOG)}
 
       MSG
-      # rubocop:enable Layout/IndentHeredoc
 
       if console_messages
-        # rubocop:disable Layout/IndentHeredoc
-        message << <<-MSG
-console messages:
-#{console_messages}
+        message << <<~MSG
+          console messages:
+          #{console_messages}
         MSG
-        # rubocop:enable Layout/IndentHeredoc
+
       end
       [backtrace, message]
     end

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "open-uri"
+require "execjs"
 
 module ReactOnRails
   module ServerRenderingPool
@@ -121,14 +122,12 @@ module ReactOnRails
           return if ReactOnRails.configuration.server_bundle_js_file.blank?
 
           bundle_js_code = read_bundle_js_code
-
-          # rubocop:disable Layout/IndentHeredoc
-          base_js_code = <<-JS
-#{console_polyfill}
-#{execjs_timer_polyfills}
-#{bundle_js_code};
+          base_js_code = <<~JS
+            #{console_polyfill}
+            #{execjs_timer_polyfills}
+            #{bundle_js_code};
           JS
-          # rubocop:enable Layout/IndentHeredoc
+
           file_name = "tmp/base_js_code.js"
           begin
             if ReactOnRails.configuration.trace
@@ -151,33 +150,31 @@ module ReactOnRails
         end
 
         def execjs_timer_polyfills
-          # rubocop:disable Layout/IndentHeredoc
-          <<-JS
-function getStackTrace () {
-  var stack;
-  try {
-    throw new Error('');
-  }
-  catch (error) {
-    stack = error.stack || '';
-  }
-  stack = stack.split('\\n').map(function (line) { return line.trim(); });
-  return stack.splice(stack[0] == 'Error' ? 2 : 1);
-}
-
-function setInterval() {
-  #{undefined_for_exec_js_logging('setInterval')}
-}
-
-function setTimeout() {
-  #{undefined_for_exec_js_logging('setTimeout')}
-}
-
-function clearTimeout() {
-  #{undefined_for_exec_js_logging('clearTimeout')}
-}
+          <<~JS
+            function getStackTrace () {
+              var stack;
+              try {
+                throw new Error('');
+              }
+              catch (error) {
+                stack = error.stack || '';
+              }
+              stack = stack.split('\\n').map(function (line) { return line.trim(); });
+              return stack.splice(stack[0] == 'Error' ? 2 : 1);
+            }
+
+            function setInterval() {
+              #{undefined_for_exec_js_logging('setInterval')}
+            }
+
+            function setTimeout() {
+              #{undefined_for_exec_js_logging('setTimeout')}
+            }
+
+            function clearTimeout() {
+              #{undefined_for_exec_js_logging('clearTimeout')}
+            }
           JS
-          # rubocop:enable Layout/IndentHeredoc
         end
 
         def undefined_for_exec_js_logging(function_name)
@@ -191,20 +188,18 @@ function clearTimeout() {
 
         # Reimplement console methods for replaying on the client
         def console_polyfill
-          # rubocop:disable Layout/IndentHeredoc
-          <<-JS
-var console = { history: [] };
-['error', 'log', 'info', 'warn'].forEach(function (level) {
-  console[level] = function () {
-    var argArray = Array.prototype.slice.call(arguments);
-    if (argArray.length > 0) {
-      argArray[0] = '[SERVER] ' + argArray[0];
-    }
-    console.history.push({level: level, arguments: argArray});
-  };
-});
+          <<~JS
+            var console = { history: [] };
+            ['error', 'log', 'info', 'warn'].forEach(function (level) {
+              console[level] = function () {
+                var argArray = Array.prototype.slice.call(arguments);
+                if (argArray.length > 0) {
+                  argArray[0] = '[SERVER] ' + argArray[0];
+                }
+                console.history.push({level: level, arguments: argArray});
+              };
+            });
           JS
-          # rubocop:enable Layout/IndentHeredoc
         end
 
         private

data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb

@@ -5,6 +5,7 @@ module ReactOnRails
     class EnsureAssetsCompiled
       class << self
         attr_accessor :has_been_run
+
         @has_been_run = false
       end
 
@@ -29,7 +30,7 @@ module ReactOnRails
         # Be sure we don't do this again.
         self.class.has_been_run = true
 
-        ReactOnRails::LocalesToJs.new
+        ReactOnRails::Locales.compile
 
         stale_gen_files = webpack_assets_status_checker.stale_generated_webpack_files
 
@@ -43,17 +44,15 @@ module ReactOnRails
       end
 
       def puts_start_compile_check_message(stale_files)
-        # rubocop:disable Layout/IndentHeredoc
-        puts <<-MSG
+        puts <<~MSG
 
-Detected the following stale generated files:
-  #{stale_files.join("\n  ")}
+          Detected the following stale generated files:
+            #{stale_files.join("\n  ")}
 
-React on Rails will ensure your JavaScript generated files are up to date, using your
-`#{ReactOnRails::Utils.prepend_cd_node_modules_directory(ReactOnRails.configuration.build_test_command)}` command.
+          React on Rails will ensure your JavaScript generated files are up to date, using your
+          `#{ReactOnRails::Utils.prepend_cd_node_modules_directory(ReactOnRails.configuration.build_test_command)}` command.
 
         MSG
-        # rubocop:enable Layout/IndentHeredoc
       end
     end
   end

data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb

@@ -6,6 +6,23 @@ module ReactOnRails
   module TestHelper
     class WebpackAssetsCompiler
       def compile_assets
+        if ReactOnRails.configuration.build_test_command.blank?
+          msg = <<~MSG
+            You are using the React on Rails test helper. 
+            Either you used:
+              ReactOnRails::TestHelper.configure_rspec_to_compile_assets or
+              ReactOnRails::TestHelper.ensure_assets_compiled
+            but you did not specify the config.build_test_command
+
+            React on Rails is aborting your test run
+
+            If you wish to use the config/webpacker.yml compile option for tests
+            them remove your call to the ReactOnRails test helper.
+          MSG
+          puts Rainbow(msg).red
+          exit!(1)
+        end
+
         puts "\nBuilding Webpack assets..."
 
         cmd = ReactOnRails::Utils.prepend_cd_node_modules_directory(

data/lib/react_on_rails/utils.rb

@@ -8,7 +8,7 @@ require "active_support/core_ext/string"
 
 module ReactOnRails
   module Utils
-    TRUNCATION_FILLER = "\n... TRUNCATED ...\n".freeze
+    TRUNCATION_FILLER = "\n... TRUNCATED ...\n"
 
     # https://forum.shakacode.com/t/yak-of-the-week-ruby-2-4-pathname-empty-changed-to-look-at-file-size/901
     # return object if truthy, else return nil
@@ -24,13 +24,12 @@ module ReactOnRails
     # Pass in the msg and color as a symbol.
     def self.wrap_message(msg, color = :red)
       wrapper_line = ("=" * 80).to_s
-      # rubocop:disable Layout/IndentHeredoc
-      fenced_msg = <<-MSG
-#{wrapper_line}
-#{msg.strip}
-#{wrapper_line}
+      fenced_msg = <<~MSG
+        #{wrapper_line}
+        #{msg.strip}
+        #{wrapper_line}
       MSG
-      # rubocop:enable Layout/IndentHeredoc
+
       Rainbow(fenced_msg).color(color)
     end
 
@@ -48,14 +47,13 @@ module ReactOnRails
       unless status.success?
         stdout_msg = stdout.present? ? "\nstdout:\n#{stdout.strip}\n" : ""
         stderr_msg = stderr.present? ? "\nstderr:\n#{stderr.strip}\n" : ""
-        # rubocop:disable Layout/IndentHeredoc
-        msg = <<-MSG
-React on Rails FATAL ERROR!
-#{failure_message}
-cmd: #{cmd}
-exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
+        msg = <<~MSG
+          React on Rails FATAL ERROR!
+          #{failure_message}
+          cmd: #{cmd}
+          exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
         MSG
-        # rubocop:enable Layout/IndentHeredoc
+
         puts wrap_message(msg)
 
         # Rspec catches exit without! in the exit callbacks
@@ -72,11 +70,8 @@ exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
       # Either:
       # 1. Using same bundle for both server and client, so server bundle will be hashed in manifest
       # 2. Using a different bundle (different Webpack config), so file is not hashed, and
-      #    bundle_js_path will throw.
-      # 3. Not using webpacker, and bundle_js_path always returns
-
-      # Note, server bundle should not be in the manifest
-      # If using webpacker gem per https://github.com/rails/webpacker/issues/571
+      #    bundle_js_path will throw so the default path is used without a hash.
+      # 3. Not using webpacker, and this method returns the bundle_js_file_path
       return @server_bundle_path if @server_bundle_path && !Rails.env.development?
 
       bundle_name = ReactOnRails.configuration.server_bundle_js_file

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "11.3.0".freeze
+  VERSION = "12.0.0"
 end

data/lib/react_on_rails/version_checker.rb

@@ -5,6 +5,7 @@ module ReactOnRails
   # against each otherat runtime.
   class VersionChecker
     attr_reader :node_package_version
+
     MAJOR_MINOR_PATCH_VERSION_REGEX = /(\d+)\.(\d+)\.(\d+)/.freeze
 
     def self.build

data/lib/react_on_rails/webpacker_utils.rb

@@ -1,16 +1,26 @@
+# frozen_string_literal: true
+
 module ReactOnRails
   module WebpackerUtils
     def self.using_webpacker?
       ReactOnRails::Utils.gem_available?("webpacker")
     end
 
+    def self.webpacker_webpack_production_config_exists?
+      webpacker_webpack_config_abs_path = File.join(Rails.root,
+                                                    "config/webpack/production.js")
+      File.exist?(webpacker_webpack_config_abs_path)
+    end
+
     def self.dev_server_running?
       return false unless using_webpacker?
 
       Webpacker.dev_server.running?
     end
 
-    # This returns either a URL for the webpack-dev-server or a file path
+    # This returns either a URL for the webpack-dev-server, non-server bundle or
+    # the hashed server bundle if using the same bundle for the client.
+    # Otherwise returns a file path.
     def self.bundle_js_uri_from_webpacker(bundle_name)
       # Note Webpacker 3.4.3 manifest lookup is inside of the public_output_path
       # [2] (pry) ReactOnRails::WebpackerUtils: 0> Webpacker.manifest.lookup("app-bundle.js")
@@ -18,7 +28,14 @@ module ReactOnRails
       # Next line will throw if the file or manifest does not exist
       hashed_bundle_name = Webpacker.manifest.lookup!(bundle_name)
 
-      if Webpacker.dev_server.running?
+      # support for hashing the server-bundle and having that built
+      # by a webpack watch process and not served by the webpack-dev-server, then we
+      # need an extra config value "same_bundle_for_client_and_server" where a value of false
+      # would mean that the bundle is created by a separate webpack watch process.
+      is_server_bundle = bundle_name == ReactOnRails.configuration.server_bundle_js_file
+
+      if Webpacker.dev_server.running? && (!is_server_bundle ||
+        ReactOnRails.configuration.same_bundle_for_client_and_server)
         "#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}#{hashed_bundle_name}"
       else
         File.expand_path(File.join("public", hashed_bundle_name)).to_s

data/lib/react_on_rails.rb

@@ -22,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/tasks/assets.rake

@@ -1,69 +1,56 @@
 # frozen_string_literal: true
 
-require "react_on_rails/assets_precompile"
-require "active_support"
+# Important: The default assets:precompile is modified ONLY if the rails/webpacker webpack config
+# does not exist!
 
-if defined?(Sprockets)
-  namespace :react_on_rails do
-    namespace :assets do
-      desc "Creates non-digested symlinks for the assets in the public asset dir"
-      task symlink_non_digested_assets: :"assets:environment" do
-        ReactOnRails::AssetsPrecompile.new.symlink_non_digested_assets
-      end
+require "active_support"
 
-      desc "Cleans all broken symlinks for the assets in the public asset dir"
-      task delete_broken_symlinks: :"assets:environment" do
-        ReactOnRails::AssetsPrecompile.new.delete_broken_symlinks
-      end
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
-      # In this task, set prerequisites for the assets:precompile task
-      desc <<-DESC.strip_heredoc
-        Create webpack assets before calling assets:environment
-        The webpack task must run before assets:environment task.
-        Otherwise Sprockets cannot find the files that webpack produces.
-        This is the secret sauce for how a Heroku deployment knows to create the webpack generated JavaScript files.
-      DESC
-      task compile_environment: :webpack do
-        Rake::Task["assets:environment"].invoke
-      end
+unless ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
+  # Ensure that rails/webpacker does not call bin/webpack if we're providing
+  # the build command.
+  ENV["WEBPACKER_PRECOMPILE"] = "false"
 
-      desc "Delete assets created with webpack, in the generated assetst directory (/app/assets/webpack)"
-      task clobber: :environment do
-        ReactOnRails::AssetsPrecompile.new.clobber
-      end
+  if Rake::Task.task_defined?("assets:precompile")
+    Rake::Task["assets:precompile"].enhance do
+      Rake::Task["react_on_rails:assets:webpack"].invoke
+      puts "Invoking task webpacker:clean from React on Rails"
+      Rake::Task["webpacker:clean"].invoke
     end
+  else
+    Rake::Task.define_task("assets:precompile" => ["react_on_rails:assets:webpack",
+                                                   "webpacker:clean"])
   end
-
-  # These tasks run as pre-requisites of assets:precompile.
-  # Note, it's not possible to refer to ReactOnRails configuration values at this point.
-  Rake::Task["assets:precompile"]
-    .clear_prerequisites
-    .enhance([:environment, "react_on_rails:assets:compile_environment"])
-    .enhance do
-      Rake::Task["react_on_rails:assets:symlink_non_digested_assets"].invoke
-      Rake::Task["react_on_rails:assets:delete_broken_symlinks"].invoke
-    end
 end
 
 # Sprockets independent tasks
 namespace :react_on_rails do
   namespace :assets do
     desc <<-DESC.strip_heredoc
-      Compile assets with webpack
-      Uses command defined with ReactOnRails.configuration.build_production_command
-
-      sh "#{ReactOnRails::Utils.prepend_cd_node_modules_directory('<ReactOnRails.configuration.build_production_command>')}"
+      Compile assets with webpack	
+      Uses command defined with ReactOnRails.configuration.build_production_command	
+      sh "#{ReactOnRails::Utils.prepend_cd_node_modules_directory('<ReactOnRails.configuration.build_production_command>')}"	
+      Note: This command is not automatically added to assets:precompile if the rails/webpacker	
+      configuration file config/webpack/production.js exists.
     DESC
     task webpack: :locale do
-      if Rake::Task.task_defined?("webpacker:compile")
-        # TODO: Eventually, this will need reconsideration if we use any of the Webpacker compilation
-        Rake::Task["webpacker:compile"].clear
-      end
-
       if ReactOnRails.configuration.build_production_command.present?
         sh ReactOnRails::Utils.prepend_cd_node_modules_directory(
           ReactOnRails.configuration.build_production_command
         ).to_s
+      else
+        msg = <<~MSG
+          React on Rails is aborting webpack compilation from task react_on_rails:assets:webpack
+          because you do not have the `config.build_production_command` defined.
+
+          Note, this task may have run as part of `assets:precompile`. If file
+          config/webpack/production.js does not exist, React on Rails will modify
+          the default `asset:precompile` to run task `react_on_rails:assets:webpack`.
+        MSG
+        puts Rainbow(msg).red
+        exit!(1)
       end
     end
   end

data/lib/tasks/locale.rake

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
-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"
 require "active_support"
 
 namespace :react_on_rails do
@@ -10,6 +12,6 @@ namespace :react_on_rails do
     the "ReactOnRails.configuration.i18n_dir".
   DESC
   task locale: :environment do
-    ReactOnRails::LocalesToJs.new
+    ReactOnRails::Locales.compile
   end
 end

data/package-scripts.yml

@@ -1,12 +1,12 @@
 scripts:
   lint:
-    description: Run all linters (eslint, flow)
+    description: Run all linters (eslint, tsc)
     script: concurrently --prefix "[{name}]" --names "ESLINT" -c "blue,yellow,magenta,orange" "nps eslint"
 
   eslint:
     default:
       description: Run eslint.
-      script: eslint . --ext ".js,.jsx"
+      script: eslint . --ext ".js,.jsx,.ts"
     fix:
       description: Run eslint and auto-fix.
       script: nps "eslint --fix"
@@ -17,30 +17,33 @@ scripts:
   format:
     default:
       description: Format files using prettier.
-      script: concurrently --prefix "[{name}]" --names "js,json" -c "yellow,magenta,green" "nps format.js" "nps format.json"
+      script: concurrently --prefix "[{name}]" --names "ts,js,json" -c "yellow,magenta,green" "nps format.js" "nps format.json"
     listDifferent:
       description: Check that all files were formatted using prettier.
       script: |
         concurrently \
           --prefix "[{name}]" \
-          --names "js,css,json" \
-          -c "yellow,magenta,green" \
+          --names "ts,js,json" \
+          -c "yellow,magenta" \
           "nps format.js.listDifferent" \
           "nps format.json.listDifferent"
     js:
       default:
         description: Run prettier-eslint on JS.
-        script: prettier "packages/**/*.@(js|jsx)" "spec/dummy/client/app/**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --write
+        #script: prettier "packages/**/*.@(js|jsx)" "spec/dummy/client/app/**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --write
+        script: prettier "**/*.@(js|jsx)" --write
       listDifferent:
         description: Check if any JS files would change by running prettier-eslint.
-        script: prettier "**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --list-different
+        # script: prettier "**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --list-different
+        script: prettier "**/*.@(js|jsx)" --list-different
     json:
       default:
         description: Run prettier on JSON files.
         script: rm -rf packages/vm-renderer/tests/tmp && prettier "**/*.json" --write
       listDifferent:
         description: Check if any JSON files would change by running prettier-eslint.
-        script: prettier "**/*.json" "../spec/**/*.json" --list-different
+        script: prettier "**/*.json" --list-different
+
   renderer:
     description: Starts the node renderer.
     script: node renderer.js