webpacker 4.0.2 → 5.4.3

data/lib/install/examples/react/tsconfig.json

@@ -8,7 +8,8 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",

data/lib/install/examples/svelte/app.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+</script>
+
+<style>
+  h1 {
+    color: #FF3E00;
+  }
+</style>
+
+<h1>Hello {name}!</h1>

data/lib/install/examples/svelte/hello_svelte.js

@@ -0,0 +1,20 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
+// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Svelte!</div> at the bottom of the page.
+
+import App from '../app.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+    props: {
+      name: 'Svelte'
+    }
+  });
+
+  window.app = app;
+})
+

data/lib/install/examples/typescript/tsconfig.json

@@ -11,7 +11,8 @@
         "*": ["node_modules/*", "app/javascript/*"]
     },
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",

data/lib/install/examples/vue/hello_vue.js

@@ -9,11 +9,10 @@ import Vue from 'vue'
 import App from '../app.vue'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const el = document.body.appendChild(document.createElement('hello'))
   const app = new Vue({
-    el,
     render: h => h(App)
-  })
+  }).$mount()
+  document.body.appendChild(app.$el)
 
   console.log(app)
 })

data/lib/install/loaders/elm.js

@@ -1,18 +1,21 @@
 const { resolve } = require('path')
 
 const isProduction = process.env.NODE_ENV === 'production'
+const isDevelopment = process.env.NODE_ENV === 'development'
 const elmSource = resolve(process.cwd())
 const elmBinary = `${elmSource}/node_modules/.bin/elm`
 
-const elmDefaultOptions = { cwd: elmSource, pathToElm: elmBinary }
-const developmentOptions = Object.assign({}, elmDefaultOptions, {
-  verbose: true,
-  debug: true
-})
+const options = { 
+  cwd: elmSource, 
+  pathToElm: elmBinary, 
+  optimize: isProduction, 
+  verbose: isDevelopment, 
+  debug: isDevelopment  
+}
 
 const elmWebpackLoader = {
   loader: 'elm-webpack-loader',
-  options: isProduction ? elmDefaultOptions : developmentOptions
+  options: options
 }
 
 module.exports = {

data/lib/install/loaders/svelte.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.svelte(\.erb)?$/,
+  use: [{
+    loader: 'svelte-loader',
+    options: {
+      hotReload: false
+    }
+  }],
+}

data/lib/install/svelte.rb

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+
+say "Copying svelte loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/svelte.js", Rails.root.join("config/webpack/loaders/svelte.js").to_s
+
+say "Adding svelte loader to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const svelte = require('./loaders/svelte')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('svelte', svelte)\n",
+  before: "module.exports"
+
+say "Copying Svelte example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/svelte/hello_svelte.js",
+  "#{Webpacker.config.source_entry_path}/hello_svelte.js"
+
+say "Copying Svelte app file to #{Webpacker.config.source_path}"
+copy_file "#{__dir__}/examples/svelte/app.svelte",
+  "#{Webpacker.config.source_path}/app.svelte"
+
+say "Installing all Svelte dependencies"
+run "yarn add svelte svelte-loader"
+
+say "Updating webpack paths to include .svelte file extension"
+insert_into_file Webpacker.config.config_path, "- .svelte\n".indent(4), after: /\s+extensions:\n/
+
+say "Webpacker now supports Svelte 🎉", :green

data/lib/install/template.rb

@@ -1,7 +1,7 @@
 # Install Webpacker
 copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 
-puts "Copying webpack core config"
+say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 say "Copying postcss.config.js to app root directory"
@@ -34,16 +34,24 @@ if File.exists?(".gitignore")
   end
 end
 
-if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
   say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-  run "yarn add @rails/webpacker"
+  run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
 else
   say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
   run "yarn add @rails/webpacker@next"
 end
 
+package_json = File.read("#{__dir__}/../../package.json")
+webpack_version = package_json.match(/"webpack": "(.*)"/)[1]
+webpack_cli_version = package_json.match(/"webpack-cli": "(.*)"/)[1]
+
+# needed for experimental Yarn 2 support and should not harm Yarn 1
+say "Installing webpack and webpack-cli as direct dependencies"
+run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
+
 say "Installing dev server for live reloading"
-run "yarn add --dev webpack-dev-server"
+run "yarn add --dev webpack-dev-server@^3"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow

data/lib/install/typescript.rb

@@ -9,23 +9,16 @@ if File.exist?(package_json)
   package = JSON.parse(File.read(package_json))
   package["dependencies"] ||= {}
 
-  if package["dependencies"].keys.include?("react")
+  if package["dependencies"].key?("react")
     additional_packages = "@types/react @types/react-dom"
     example_source = "react"
   end
 end
 
-say "Copying typescript loader to config/webpack/loaders"
-copy_file "#{__dir__}/loaders/typescript.js", Rails.root.join("config/webpack/loaders/typescript.js").to_s
-
-say "Adding typescript loader to config/webpack/environment.js"
-insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const typescript =  require('./loaders/typescript')\n",
-  after: "require('@rails/webpacker')\n"
-
-insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.prepend('typescript', typescript)\n",
-  before: "module.exports"
+say "Adding TypeScript preset to babel.config.js"
+insert_into_file Rails.root.join("babel.config.js").to_s,
+  ",\n      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]",
+  before: /\s*\].filter\(Boolean\),\n\s*plugins: \[/
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
@@ -41,6 +34,6 @@ copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript ts-loader #{additional_packages}"
+run "yarn add typescript @babel/preset-typescript #{additional_packages}"
 
 say "Webpacker now supports typescript 🎉", :green

data/lib/install/vue.rb

@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/v
 say "Adding vue loader plugin to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const { VueLoaderPlugin } = require('vue-loader')\n",
-  after: "require('@rails/webpacker')\n"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())\n",

data/lib/tasks/installers.rake

@@ -6,6 +6,7 @@ installers = {
   "Erb": :erb,
   "Coffee": :coffee,
   "Typescript": :typescript,
+  "Svelte": :svelte,
   "Stimulus": :stimulus
 }.freeze
 

data/lib/tasks/webpacker/check_node.rake

@@ -1,24 +1,31 @@
+require "semantic_range"
 namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
-      node_version = `node -v || nodejs -v`
+      node_version = `node -v || nodejs -v`.strip
       raise Errno::ENOENT if node_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
-      node_requirement = JSON.parse(pkg_path.read)["engines"]["node"]
+      node_range = JSON.parse(pkg_path.read)["engines"]["node"]
+      is_valid = SemanticRange.satisfies?(node_version, node_range) rescue false
+      semver_major = node_version[/\d+/] rescue nil
+      is_unstable = semver_major.to_i.odd? rescue false
 
-      requirement = Gem::Requirement.new(node_requirement)
-      version = Gem::Version.new(node_version.strip.tr("v", ""))
+      if is_unstable
+        $stderr.puts "Warning: you are using an unstable release of Node.js (#{node_version}). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node"
+      end
 
-      unless requirement.satisfied_by?(version)
-        $stderr.puts "Webpacker requires Node.js #{requirement} and you are using #{version}"
+      unless is_valid
+        $stderr.puts "Webpacker requires Node.js \"#{node_range}\" and you are using #{node_version}"
         $stderr.puts "Please upgrade Node.js https://nodejs.org/en/download/"
-        $stderr.puts "Exiting!" && exit!
+        $stderr.puts "Exiting!"
+        exit!
       end
     rescue Errno::ENOENT
       $stderr.puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
-      $stderr.puts "Exiting!" && exit!
+      $stderr.puts "Exiting!"
+      exit!
     end
   end
 end

data/lib/tasks/webpacker/check_yarn.rake

@@ -1,24 +1,30 @@
+require "semantic_range"
 namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
     begin
-      yarn_version = `yarn --version`
+      yarn_version = `yarn --version`.strip
       raise Errno::ENOENT if yarn_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
-      yarn_requirement = JSON.parse(pkg_path.read)["engines"]["yarn"]
+      yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
+      is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
+      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=4.0.0") rescue false
 
-      requirement = Gem::Requirement.new(yarn_requirement)
-      version = Gem::Version.new(yarn_version)
-
-      unless requirement.satisfied_by?(version)
-        $stderr.puts "Webpacker requires Yarn #{requirement} and you are using #{version}"
-        $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
-        $stderr.puts "Exiting!" && exit!
+      unless is_valid
+        $stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
+        if is_unsupported
+          $stderr.puts "This version of Webpacker does not support Yarn #{yarn_version}. Please downgrade to a supported version of Yarn https://yarnpkg.com/lang/en/docs/install/"
+        else
+          $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
+        end
+        $stderr.puts "Exiting!"
+        exit!
       end
     rescue Errno::ENOENT
       $stderr.puts "Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/"
-      $stderr.puts "Exiting!" && exit!
+      $stderr.puts "Exiting!"
+      exit!
     end
   end
 end

data/lib/tasks/webpacker/clean.rake

@@ -0,0 +1,25 @@
+$stdout.sync = true
+
+require "webpacker/configuration"
+
+namespace :webpacker do
+  desc "Remove old compiled webpacks"
+  task :clean, [:keep, :age] => ["webpacker:verify_install", :environment] do |_, args|
+    Webpacker.ensure_log_goes_to_stdout do
+      Webpacker.clean(Integer(args.keep || 2), Integer(args.age || 3600))
+    end
+  end
+end
+
+skip_webpacker_clean = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+unless skip_webpacker_clean
+  # Run clean if the assets:clean is run
+  if Rake::Task.task_defined?("assets:clean")
+    Rake::Task["assets:clean"].enhance do
+      Rake::Task["webpacker:clean"].invoke
+    end
+  else
+    Rake::Task.define_task("assets:clean" => "webpacker:clean")
+  end
+end

data/lib/tasks/webpacker/clobber.rake

@@ -8,9 +8,13 @@ namespace :webpacker do
   end
 end
 
-# Run clobber if the assets:clobber is run
-if Rake::Task.task_defined?("assets:clobber")
-  Rake::Task["assets:clobber"].enhance do
-    Rake::Task["webpacker:clobber"].invoke
+skip_webpacker_clobber = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+unless skip_webpacker_clobber
+  # Run clobber if the assets:clobber is run
+  if Rake::Task.task_defined?("assets:clobber")
+    Rake::Task["assets:clobber"].enhance do
+      Rake::Task["webpacker:clobber"].invoke
+    end
   end
 end

data/lib/tasks/webpacker/compile.rake

@@ -1,13 +1,5 @@
 $stdout.sync = true
 
-def ensure_log_goes_to_stdout
-  old_logger = Webpacker.logger
-  Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
-  yield
-ensure
-  Webpacker.logger = old_logger
-end
-
 def yarn_install_available?
   rails_major = Rails::VERSION::MAJOR
   rails_minor = Rails::VERSION::MINOR
@@ -26,8 +18,8 @@ end
 namespace :webpacker do
   desc "Compile JavaScript packs using webpack for production with digests"
   task compile: ["webpacker:verify_install", :environment] do
-    Webpacker.with_node_env("production") do
-      ensure_log_goes_to_stdout do
+    Webpacker.with_node_env(ENV.fetch("NODE_ENV", "production")) do
+      Webpacker.ensure_log_goes_to_stdout do
         if Webpacker.compile
           # Successful compilation!
         else
@@ -40,9 +32,12 @@ namespace :webpacker do
 end
 
 # Compile packs after we've compiled all other assets during precompilation
-if Rake::Task.task_defined?("assets:precompile")
-  skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-  enhance_assets_precompile unless skip_webpacker_precompile
-else
-  Rake::Task.define_task("assets:precompile" => ["webpacker:yarn_install", "webpacker:compile"])
+skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+unless skip_webpacker_precompile
+  if Rake::Task.task_defined?("assets:precompile")
+    enhance_assets_precompile
+  else
+    Rake::Task.define_task("assets:precompile" => ["webpacker:yarn_install", "webpacker:compile"])
+  end
 end

data/lib/tasks/webpacker/yarn_install.rake

@@ -1,6 +1,16 @@
 namespace :webpacker do
   desc "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
   task :yarn_install do
-    system "yarn install --no-progress"
+    valid_node_envs = %w[test development production]
+    node_env = ENV.fetch("NODE_ENV") do
+      valid_node_envs.include?(Rails.env) ? Rails.env : "production"
+    end
+    yarn_flags =
+      if `yarn --version`.start_with?("1")
+        "--no-progress --frozen-lockfile"
+      else
+        "--immutable"
+      end
+    system({ "NODE_ENV" => node_env }, "yarn install #{yarn_flags}")
   end
 end

data/lib/tasks/webpacker.rake

@@ -2,6 +2,7 @@ tasks = {
   "webpacker:info"                    => "Provides information on Webpacker's environment",
   "webpacker:install"                 => "Installs and setup webpack with Yarn",
   "webpacker:compile"                 => "Compiles webpack bundles based on environment",
+  "webpacker:clean"                   => "Remove old compiled webpacks",
   "webpacker:clobber"                 => "Removes the webpack compiled output directory",
   "webpacker:check_node"              => "Verifies if Node.js is installed",
   "webpacker:check_yarn"              => "Verifies if Yarn is installed",
@@ -13,6 +14,7 @@ tasks = {
   "webpacker:install:vue"             => "Installs and setup example Vue component",
   "webpacker:install:angular"         => "Installs and setup example Angular component",
   "webpacker:install:elm"             => "Installs and setup example Elm component",
+  "webpacker:install:svelte"          => "Installs and setup example Svelte component",
   "webpacker:install:stimulus"        => "Installs and setup example Stimulus component",
   "webpacker:install:erb"             => "Installs Erb loader with an example",
   "webpacker:install:coffee"          => "Installs CoffeeScript loader with an example",

data/lib/webpacker/commands.rb

@@ -1,10 +1,43 @@
 class Webpacker::Commands
-  delegate :config, :compiler, :manifest, to: :@webpacker
+  delegate :config, :compiler, :manifest, :logger, to: :@webpacker
 
   def initialize(webpacker)
     @webpacker = webpacker
   end
 
+  # Cleanup old assets in the compile directory. By default it will
+  # keep the latest version, 2 backups created within the past hour.
+  #
+  # Examples
+  #
+  #   To force only 1 backup to be kept, set count=1 and age=0.
+  #
+  #   To only keep files created within the last 10 minutes, set count=0 and
+  #   age=600.
+  #
+  def clean(count = 2, age = 3600)
+    if config.public_output_path.exist? && config.public_manifest_path.exist?
+      versions
+        .sort
+        .reverse
+        .each_with_index
+        .drop_while do |(mtime, _), index|
+          max_age = [0, Time.now - Time.at(mtime)].max
+          max_age < age || index < count
+        end
+        .each do |(_, files), index|
+          files.each do |file|
+            if File.file?(file)
+              File.delete(file)
+              logger.info "Removed #{file}"
+            end
+          end
+        end
+    end
+
+    true
+  end
+
   def clobber
     config.public_output_path.rmtree if config.public_output_path.exist?
     config.cache_path.rmtree if config.cache_path.exist?
@@ -19,4 +52,23 @@ class Webpacker::Commands
       manifest.refresh if success
     end
   end
+
+  private
+    def versions
+      all_files       = Dir.glob("#{config.public_output_path}/**/*")
+      manifest_config = Dir.glob("#{config.public_manifest_path}*")
+
+      packs = all_files - manifest_config - current_version
+      packs.reject { |file| File.directory?(file) }.group_by { |file| File.mtime(file).utc.to_i }
+    end
+
+    def current_version
+      packs = manifest.refresh.values.map do |value|
+        next if value.is_a?(Hash)
+
+        File.join(config.root_path, "public", "#{value}*")
+      end.compact
+
+      Dir.glob(packs).uniq
+    end
 end

data/lib/webpacker/compiler.rb

@@ -4,6 +4,8 @@ require "digest/sha1"
 class Webpacker::Compiler
   # Additional paths that test compiler needs to watch
   # Webpacker::Compiler.watched_paths << 'bower_components'
+  #
+  # Deprecated. Use additional_paths in the YAML configuration instead.
   cattr_accessor(:watched_paths) { [] }
 
   # Additional environment variables that the compiler is being run with
@@ -19,9 +21,14 @@ class Webpacker::Compiler
   def compile
     if stale?
       run_webpack.tap do |success|
-        record_compilation_digest if success
+        # We used to only record the digest on success
+        # However, the output file is still written on error, meaning that the digest should still be updated.
+        # If it's not, you can end up in a situation where a recompile doesn't take place when it should.
+        # See https://github.com/rails/webpacker/issues/2113
+        record_compilation_digest
       end
     else
+      logger.info "Everything's up-to-date. Nothing to do"
       true
     end
   end
@@ -45,6 +52,8 @@ class Webpacker::Compiler
     end
 
     def watched_files_digest
+      warn "Webpacker::Compiler.watched_paths has been deprecated. Set additional_paths in webpacker.yml instead." unless watched_paths.empty?
+
       files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
       file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
       Digest::SHA1.hexdigest(file_ids.join("/"))
@@ -56,19 +65,24 @@ class Webpacker::Compiler
     end
 
     def run_webpack
-      logger.info "Compiling…"
+      logger.info "Compiling..."
 
-      stdout, sterr , status = Open3.capture3(
+      stdout, stderr, status = Open3.capture3(
         webpack_env,
         "#{RbConfig.ruby} ./bin/webpack",
         chdir: File.expand_path(config.root_path)
       )
 
-      if sterr == "" && status.success?
+      if status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
-        logger.info stdout if config.webpack_compile_output?
+        logger.error "#{stderr}" unless stderr.empty?
+
+        if config.webpack_compile_output?
+          logger.info stdout
+        end
       else
-        logger.error "Compilation failed:\n#{sterr}\n#{stdout}"
+        non_empty_streams = [stdout, stderr].delete_if(&:empty?)
+        logger.error "Compilation failed:\n#{non_empty_streams.join("\n\n")}"
       end
 
       status.success?
@@ -76,8 +90,8 @@ class Webpacker::Compiler
 
     def default_watched_paths
       [
-        *config.resolved_paths_globbed,
-        "#{config.source_path.relative_path_from(config.root_path)}/**/*",
+        *config.additional_paths_globbed,
+        config.source_path_globbed,
         "yarn.lock", "package.json",
         "config/webpack/**/*"
       ].freeze
@@ -91,6 +105,7 @@ class Webpacker::Compiler
       return env unless defined?(ActionController::Base)
 
       env.merge("WEBPACKER_ASSET_HOST"        => ENV.fetch("WEBPACKER_ASSET_HOST", ActionController::Base.helpers.compute_asset_host),
-                "WEBPACKER_RELATIVE_URL_ROOT" => ENV.fetch("WEBPACKER_RELATIVE_URL_ROOT", ActionController::Base.relative_url_root))
+                "WEBPACKER_RELATIVE_URL_ROOT" => ENV.fetch("WEBPACKER_RELATIVE_URL_ROOT", ActionController::Base.relative_url_root),
+                "WEBPACKER_CONFIG" => webpacker.config_path.to_s)
     end
 end