react_on_rails 8.0.2 → 9.0.0

data/rakelib/example_type.rb

@@ -38,51 +38,23 @@ module ReactOnRails
         Dir.exist?(dir)
       end
 
-      def client_dir
-        File.join(dir, "client")
-      end
-
-      def source_package_json
-        File.join(gem_root, "lib/generators/react_on_rails/templates/base/base/client/package.json.tt")
-      end
-
-      def node_modules_dir
-        File.join(client_dir, "node_modules")
-      end
-
-      def webpack_bundles_dir
-        File.join(dir, "public", "webpack", "test")
-      end
-
-      def webpack_bundles
-        bundles = []
-        bundles << File.join(webpack_bundles_dir, "webpack-bundle.js")
-      end
-
       def gemfile
         File.join(dir, "Gemfile")
       end
 
-      def gemfile_lock
-        "#{gemfile}.lock"
-      end
-
-      def package_json
-        File.join(client_dir, "package.json")
-      end
-
       # Gems we need to add to the Gemfile before bundle installing
       def required_gems
         relative_gem_root = Pathname(gem_root).relative_path_from(Pathname(dir))
         ["gem 'react_on_rails', path: '#{relative_gem_root}'"]
       end
 
-      # Options we pass when running `rails new` from the command-line
+      # Options we pass when running `rails new` from the command-line.
+      # The webpack=react option is key.
       def rails_options
-        "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record"
+        "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record --webpack=react"
       end
 
-      %w[gen prepare clean clobber npm_install build_webpack_bundles].each do |task_type|
+      %w[gen clobber npm_install build_webpack_bundles].each do |task_type|
         method_name_normal = "#{task_type}_task_name"          # ex: `clean_task_name`
         method_name_short = "#{method_name_normal}_short"      # ex: `clean_task_name_short`
 
@@ -98,44 +70,6 @@ module ReactOnRails
         "run_rspec:#{rspec_task_name_short}"
       end
 
-      def source_files
-        FileList.new(all_files_in_dir(generators_source_dir))
-      end
-
-      # Note: we need to explicitly declare a file we know is supposed to be there
-      # to indicate that the example is in need of being rebuilt in the case of its absence.
-      def generated_files
-        FileList.new(all_files_in_dir(dir)) do |fl|
-          fl.include(gemfile)                          # explicitly declared file (dependency of Gemfile.lock)
-          fl.include(package_json)                     # explicitly declared file (dependency of NPM Install)
-          fl.exclude(%r{client(/node_modules(.+)?)?$}) # leave node_modules folder
-        end
-      end
-
-      def generated_client_files
-        generated_files.exclude { |f| !f.start_with?(client_dir) }
-      end
-
-      # generated files plus explicitly included files resulting from running
-      # bundle install, yarn, and generating the webpack bundles
-      def prepared_files
-        generated_files
-          .include(webpack_bundles)
-          .include(node_modules_dir)
-          .include(gemfile_lock)
-      end
-
-      def clean_files
-        generated_files
-      end
-
-      # Assumes we are inside client folder
-      def build_webpack_bundles_shell_commands
-        webpack_command = File.join("$(yarn bin)", "webpack")
-        shell_commands = []
-        shell_commands << "NODE_ENV=test #{webpack_command} --config webpack.config.js"
-      end
-
       # Assumes we are inside a rails app's folder and necessary gems have been installed
       def generator_shell_commands
         shell_commands = []

data/rakelib/examples.rake

@@ -9,8 +9,6 @@ require "yaml"
 require_relative "example_type"
 require_relative "task_helpers"
 include ReactOnRails::TaskHelpers
-
-# rubocop:disable Metrics/BlockLength
 namespace :examples do
   # Loads data from examples_config.yml and instantiates corresponding ExampleType objects
   examples_config_file = File.expand_path("../examples_config.yml", __FILE__)
@@ -19,43 +17,6 @@ namespace :examples do
 
   # Define tasks for each example type
   ExampleType.all.each do |example_type|
-    # GENERATED FILES
-    example_type.generated_files.each do |f|
-      file f => example_type.source_files do
-        Rake::Task[example_type.gen_task_name].invoke
-      end
-    end
-
-    # GEMFILE.LOCK
-    file example_type.gemfile_lock => example_type.gemfile do
-      bundle_install_in(example_type.dir)
-    end
-
-    # WEBPACK BUNDLES
-    example_type.webpack_bundles.each do |f|
-      file f => example_type.generated_client_files do
-        Rake::Task[example_type.build_webpack_bundles_task_name].invoke
-      end
-    end
-
-    # BUILD WEBPACK BUNDLES
-    task example_type.build_webpack_bundles_task_name_short => example_type.npm_install_task_name do
-      sh_in_dir(example_type.client_dir, example_type.build_webpack_bundles_shell_commands)
-    end
-
-    # YARN INSTALL
-    task example_type.npm_install_task_name_short => example_type.package_json do
-      unless uptodate?(example_type.node_modules_dir, [example_type.source_package_json])
-        sh_in_dir(example_type.client_dir, "yarn install --mutex network")
-      end
-    end
-
-    # CLEAN
-    desc "Cleans #{example_type.name_pretty}"
-    task example_type.clean_task_name_short do
-      example_type.clean_files.each { |f| rm_rf(f) }
-    end
-
     # CLOBBER
     desc "Clobbers (deletes) #{example_type.name_pretty}"
     task example_type.clobber_task_name_short do
@@ -64,39 +25,28 @@ namespace :examples do
 
     # GENERATE
     desc "Generates #{example_type.name_pretty}"
-    task example_type.gen_task_name_short => example_type.clean_task_name do
+    task example_type.gen_task_name_short => example_type.clobber_task_name do
       mkdir_p(example_type.dir)
       sh_in_dir(examples_dir, "rails new #{example_type.name} #{example_type.rails_options}")
       sh_in_dir(example_type.dir, "touch .gitignore")
       append_to_gemfile(example_type.gemfile, example_type.required_gems)
       bundle_install_in(example_type.dir)
       sh_in_dir(example_type.dir, example_type.generator_shell_commands)
-    end
-
-    # PREPARE
-    desc "Prepares #{example_type.name_pretty} (generates example, `yarn`s, and generates webpack bundles)"
-    multitask example_type.prepare_task_name_short => example_type.prepared_files do
-      Rake::Task["node_package"].invoke
+      sh_in_dir(example_type.dir, "yarn")
     end
   end
 
-  desc "Cleans all example apps"
-  multitask clean: ExampleType.all.map(&:clean_task_name)
-
   desc "Clobbers (deletes) all example apps"
   task :clobber do
     rm_rf(examples_dir)
   end
 
   desc "Generates all example apps"
-  multitask gen_all: ExampleType.all.map(&:gen_task_name)
-
-  desc "Prepares all example apps"
-  multitask prepare_all: ExampleType.all.map(&:prepare_task_name)
+  task gen_all: ExampleType.all.map(&:gen_task_name)
 end
 
-desc "Prepares all example apps. Run `rake -D examples` to see all available options"
-multitask examples: ["examples:prepare_all"]
+desc "Generates all example apps. Run `rake -D examples` to see all available options"
+task examples: ["examples:gen_all"]
 
 private
 

data/rakelib/node_package.rake

@@ -5,6 +5,7 @@ include ReactOnRails::TaskHelpers
 
 namespace :node_package do
   task :build do
+    puts "Building Node Package and running 'yarn link'"
     sh "yarn run build && yarn link"
   end
 end

data/rakelib/release.rake

@@ -22,6 +22,7 @@ which are installed via `bundle install` and `yarn`
 
 Example: `rake release[2.1.0,false]`")
 
+# rubocop:disable Metrics/BlockLength
 task :release, %i[gem_version dry_run tools_install] do |_t, args|
   class MessageHandler
     def add_error(error)
@@ -65,5 +66,12 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
   sh_in_dir(gem_root, release_it_command)
 
   # Release the new gem version
-  sh_in_dir(gem_root, "gem release") unless is_dry_run
+  unless is_dry_run
+    sh_in_dir(gem_root, "gem release")
+
+    # Update master with new npm version
+    sh_in_dir(File.join(gem_root, "spec", "dummy", "client"), "yarn add react-on-rails@#{npm_version}")
+    sh_in_dir(gem_root, "git commit -am 'Updated spec/dummy/client/package.json latest version'")
+    sh_in_dir(gem_root, "git push")
+  end
 end

data/rakelib/run_rspec.rake

@@ -18,6 +18,16 @@ namespace :run_rspec do
     run_tests_in("", rspec_args: File.join("spec", "react_on_rails"))
   end
 
+  desc "Run RSpec with rails32 gemfile"
+  task :gem_rails32 do
+    rspec_args = "spec/react_on_rails --exclude-pattern "\
+                 "\"**/generators/*_spec.rb,**/utils_spec.rb,"\
+                 "**/webpack_assets_status_checker_spec.rb,**/test_helper/*_spec.rb\""
+    run_tests_in("",
+                 rspec_args: rspec_args,
+                 env_vars: "BUNDLE_GEMFILE=spec/dummy_no_webpacker/Gemfile.rails32")
+  end
+
   desc "Runs dummy rspec with turbolinks"
   task dummy: ["dummy_apps:dummy_app"] do
     clean_gen_assets(spec_dummy_dir)
@@ -34,22 +44,30 @@ namespace :run_rspec do
                  command_name: "dummy_no_turbolinks")
   end
 
+  desc "Runs dummy_no_webpacker rspec"
+  task :dummy_no_webpacker do
+    dummy_app_dir = File.join(gem_root, "spec/dummy_no_webpacker")
+    clean_gen_assets(dummy_app_dir)
+    run_tests_in(dummy_app_dir,
+                 env_vars: "BUNDLE_GEMFILE=Gemfile.rails32")
+  end
+
   # Dynamically define Rake tasks for each example app found in the examples directory
   ExampleType.all.each do |example_type|
     desc "Runs RSpec for #{example_type.name_pretty} only"
-    task example_type.rspec_task_name_short => example_type.prepare_task_name do
+    task example_type.rspec_task_name_short => example_type.gen_task_name do
       run_tests_in(File.join(examples_dir, example_type.name)) # have to use relative path
     end
   end
 
   desc "Runs Rspec for example apps only"
-  task examples: "examples:prepare_all" do
+  task examples: "examples:gen_all" do
     ExampleType.all.each { |example_type| Rake::Task[example_type.rspec_task_name].invoke }
   end
 
   desc "(HACK) Run RSpec on spec/empty_spec in order to have SimpleCov generate a coverage report from cache"
   task :empty do
-    sh %(COVERAGE=true rspec spec/empty_spec.rb)
+    sh %(#{ENV['USE_COVERALLS'] ? 'COVERAGE=true' : ''} rspec spec/empty_spec.rb)
   end
 
   Coveralls::RakeTask.new if ENV["USE_COVERALLS"] == "TRUE"
@@ -70,7 +88,7 @@ task :js_tests do
   sh "yarn run test"
 end
 
-msg = <<~DESC
+msg = <<-DESC.strip_heredoc
   Runs all tests, run `rake -D run_rspec` to see all available test options.
   "rake run_rspec:example_basic" is a good way to run only one generator test.
 DESC
@@ -101,7 +119,8 @@ def run_tests_in(dir, options = {})
 
   command_name = options.fetch(:command_name, path.basename)
   rspec_args = options.fetch(:rspec_args, "")
-  env_vars = %(#{options.fetch(:env_vars, '')} COVERAGE=true TEST_ENV_COMMAND_NAME="#{command_name}")
+  env_vars = %(#{options.fetch(:env_vars, '')} TEST_ENV_COMMAND_NAME="#{command_name}").dup
+  env_vars << "COVERAGE=true" if ENV["USE_COVERALLS"]
   sh_in_dir(path.realpath, "#{env_vars} bundle exec rspec #{rspec_args}")
 end
 

data/react_on_rails.gemspec

@@ -32,9 +32,10 @@ Gem::Specification.new do |s|
   s.add_dependency "rails", ">= 3.2"
   s.add_dependency "addressable"
 
-  s.add_development_dependency "rails", "~> 5.1.1"
+  s.add_development_dependency "rails", "~> 5.1.2"
   s.add_development_dependency "bundler", "~> 1.10"
   s.add_development_dependency "rake", "~> 10.0"
+  s.add_development_dependency "listen"
   s.add_development_dependency "rspec"
   s.add_development_dependency "coveralls"
   s.add_development_dependency "generator_spec"

data/webpackConfigLoader.js

@@ -1,96 +1,69 @@
 /**
- * Allow defaults for the config/webpacker_lite.yml. Thee values in this file MUST match values
- * in README for https://github.com/shakacode/webpacker_lite
+ * Allow defaults for the config/webpacker.yml. Thee values in this file MUST match values
+ * in https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml
  *
- * webpack_public_output_dir: 'webpack'
- * manifest: 'manifest.json'
- *
- * hot_reloading_enabled_by_default: false
- * hot_reloading_host: localhost:3500
- *
- * NOTE: for hot reloading, env.HOT_RELOADING value will override any config value. This env value
+ * NOTE: for HMR reloading, env.WEBPACKER_HMR value will override any config value. This env value
  * should be set to TRUE to turn this on.
  */
+
 const { join, resolve } = require('path');
+const { env } = require('process');
 const { safeLoad } = require('js-yaml');
 const { readFileSync } = require('fs');
 
-const DEFAULT_WEBPACK_PUBLIC_OUTPUT_DIR = 'webpack';
-const DEFAULT_MANIFEST = 'manifest.json';
-const DEFAULT_HOT_RELOADING_HOST = 'localhost:3500';
-const HOT_RELOADING_ENABLED_BY_DEFAULT = false;
 
-function getLocation(href) {
-  const match = href.match(/^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]?[^?#]*)(\?[^#]*|)(#.*|)$/);
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '');
+}
+
+function formatPublicPath(settings) {
+  if (settings.dev_server) {
+    const host = settings.dev_server.host;
+    const port = settings.dev_server.port;
+    const path = settings.public_output_path;
+    const hostWithHttp = `http://${host}:${port}`;
 
-  return match && {
-    href,
-    protocol: match[1],
-    host: match[2],
-    hostname: match[3],
-    port: match[4],
-    pathname: match[5],
-    search: match[6],
-    hash: match[7],
-  };
+    let formattedHost = removeOuterSlashes(hostWithHttp);
+    if (formattedHost && !/^http/i.test(formattedHost)) {
+      formattedHost = `//${formattedHost}`;
+    }
+    const formattedPath = removeOuterSlashes(path);
+    return `${formattedHost}/${formattedPath}/`;
+  }
+
+  const publicOuterPathWithoutOutsideSlashes = removeOuterSlashes(settings.public_output_path);
+  return `//${publicOuterPathWithoutOutsideSlashes}/`;
 }
 
 /**
- * @param configPath, location where webpacker_lite.yml will be found
+ * @param configPath, location where webpacker.yml will be found
+ * Return values are consistent with Webpacker's js helpers
+ * For example, you might define:
+ *   const isHMR = settings.dev_server && settings.dev_server.hmr
  * @returns {{
- * devBuild,
- * hotReloadingEnabled,
- * hotReloadingHost,
- * hotReloadingPort,
- * hotReloadingUrl,
- * manifest,
- * webpackOutputPath,
- * webpackPublicOutputDir
- * }}
+     settings,
+     resolvedModules,
+     output: { path, publicPath, publicPathWithHost }
+   }}
  */
 const configLoader = (configPath) => {
-  const env = process.env;
-
   // Some test environments might not have the NODE_ENV set, so we'll have fallbacks.
-  const configEnv = (process.env.NODE_ENV || process.env.RAILS_ENV || 'development');
-  const ymlConfigPath = join(configPath, 'webpacker_lite.yml');
-  const configuration = safeLoad(readFileSync(ymlConfigPath, 'utf8'))[configEnv];
-
-  const devBuild = env !== 'production';
-  const hotReloadingHost = configuration.hot_reloading_host || DEFAULT_HOT_RELOADING_HOST;
+  const configEnv = (env.NODE_ENV || env.RAILS_ENV || 'development');
+  const ymlConfigPath = join(configPath, 'webpacker.yml');
+  const settings = safeLoad(readFileSync(ymlConfigPath, 'utf8'))[configEnv];
 
   // NOTE: Rails path is hard coded to `/public`
-  const webpackPublicOutputDir = configuration.webpack_public_output_dir ||
-    DEFAULT_WEBPACK_PUBLIC_OUTPUT_DIR;
-  const webpackOutputPath = resolve(configPath, '..', 'public', webpackPublicOutputDir);
-
-  const manifest = configuration.manifest || DEFAULT_MANIFEST;
-
-  const hotReloadingEnabled = (env.HOT_RELOADING === 'TRUE' || env.HOT_RELOADING === 'YES' ||
-    configuration.hot_reloading_enabled_by_default || HOT_RELOADING_ENABLED_BY_DEFAULT);
-
-  const hotReloadingUrl = hotReloadingHost.match(/^http/)
-    ? hotReloadingHost
-    : `http://${hotReloadingHost}`;
-
-  const url = getLocation(hotReloadingUrl);
-  const hotReloadingPort = url.port;
-  const hotReloadingHostname = url.hostname;
-  if (hotReloadingPort === '' || hotReloadingHostname === '') {
-    const msg = 'Missing port number. Please specify the `hot_reloading_host` like `localhost:3500`';
-    throw new Error(msg);
-  }
+  const output = {
+    // Next line differs from the webpacker definition as we use the configPath to create
+    // the relative path.
+    path: resolve(configPath, '..', 'public', settings.public_output_path),
+    publicPath: `/${settings.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1'),
+    publicPathWithHost: formatPublicPath(settings),
+  };
 
   return {
-    devBuild,
-    hotReloadingEnabled,
-    hotReloadingHost,
-    hotReloadingHostname,
-    hotReloadingPort,
-    hotReloadingUrl,
-    manifest,
-    webpackOutputPath,
-    webpackPublicOutputDir,
+    settings,
+    output,
   };
 };