webpacker 4.0.3 → 4.1.0

data/lib/install/examples/angular/hello_angular/polyfills.ts

@@ -38,8 +38,8 @@
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
 
 
 /**

data/lib/install/examples/react/babel.config.js

@@ -18,15 +18,17 @@ module.exports = function(api) {
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
-          }
-        }
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
@@ -36,7 +38,7 @@ module.exports = function(api) {
         }
       ],
       [
-        require('@babel/preset-react').default,
+        '@babel/preset-react',
         {
           development: isDevelopmentEnv || isTestEnv,
           useBuiltIns: true
@@ -44,37 +46,38 @@ module.exports = function(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-transform-runtime',
         {
           helpers: false,
-          regenerator: true
+          regenerator: true,
+          corejs: false
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }
       ],
       isProductionEnv && [
-        require('babel-plugin-transform-react-remove-prop-types').default,
+        'babel-plugin-transform-react-remove-prop-types',
         {
           removeImport: true
         }

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/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$/,
+  use: [{
+    loader: 'svelte-loader',
+    options: {
+      hotReload: true
+    }
+  }],
+}

data/lib/install/loaders/typescript.js

@@ -1,7 +1,7 @@
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
 
 module.exports = {
-  test: /\.(ts|tsx)?(\.erb)?$/,
+  test: /\.tsx?(\.erb)?$/,
   use: [
     {
       loader: 'ts-loader',

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/typescript.rb

@@ -21,7 +21,7 @@ copy_file "#{__dir__}/loaders/typescript.js", Rails.root.join("config/webpack/lo
 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"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('typescript', typescript)\n",

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.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/tasks/webpacker/clean.rake

@@ -0,0 +1,15 @@
+require "webpacker/configuration"
+
+namespace :webpacker do
+  desc "Remove old compiled webpacks"
+  task :clean, [:keep] => ["webpacker:verify_install", :environment] do |_, args|
+    Webpacker.clean(Integer(args.keep || 2))
+  end
+end
+
+# 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
+end

data/lib/tasks/webpacker/compile.rake

@@ -26,7 +26,7 @@ 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
+    Webpacker.with_node_env(ENV.fetch("NODE_ENV", "production")) do
       ensure_log_goes_to_stdout do
         if Webpacker.compile
           # Successful compilation!

data/lib/tasks/webpacker/yarn_install.rake

@@ -2,5 +2,20 @@ 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"
+
+    exit(1) unless $?.success?
   end
 end
+
+def enhance_yarn_install
+  Rake::Task["yarn:install"].enhance do
+    exit(1) unless $?.success?
+  end
+end
+
+if Rake::Task.task_defined?("yarn:install")
+  enhance_yarn_install
+else
+  # this is mainly for pre-5.x era
+  Rake::Task.define_task("yarn:install" => "webpacker:yarn_install")
+end

data/lib/webpacker.rb

@@ -24,7 +24,7 @@ module Webpacker
 
   delegate :logger, :logger=, :env, to: :instance
   delegate :config, :compiler, :manifest, :commands, :dev_server, to: :instance
-  delegate :bootstrap, :clobber, :compile, to: :commands
+  delegate :bootstrap, :clean, :clobber, :compile, to: :commands
 end
 
 require "webpacker/instance"

data/lib/webpacker/commands.rb

@@ -5,6 +5,23 @@ class Webpacker::Commands
     @webpacker = webpacker
   end
 
+  def clean(count_to_keep = 2)
+    if config.public_output_path.exist? && config.public_manifest_path.exist?
+      files_in_manifest = process_manifest_hash(manifest.refresh)
+      files_to_be_removed = files_in_manifest.flat_map do |file_in_manifest|
+        file_prefix, file_ext = file_in_manifest.scan(/(.*)[0-9a-f]{20}(.*)/).first
+        versions_of_file = Dir.glob("#{file_prefix}*#{file_ext}").grep(/#{file_prefix}[0-9a-f]{20}#{file_ext}/)
+        versions_of_file.map do |version_of_file|
+          next if version_of_file == file_in_manifest
+
+          [version_of_file, File.mtime(version_of_file).utc.to_i]
+        end.compact.sort_by(&:last).reverse.drop(count_to_keep).map(&:first)
+      end
+
+      files_to_be_removed.each { |f| File.delete f }
+    end
+  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 +36,13 @@ class Webpacker::Commands
       manifest.refresh if success
     end
   end
+
+  private
+    def process_manifest_hash(manifest_hash)
+      manifest_hash.values.map do |value|
+        next process_manifest_hash(value) if value.is_a?(Hash)
+
+        File.join(config.root_path, "public", value)
+      end.flatten
+    end
 end

data/lib/webpacker/compiler.rb

@@ -19,9 +19,15 @@ 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, (at least with ts-loader), 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
@@ -56,7 +62,7 @@ class Webpacker::Compiler
     end
 
     def run_webpack
-      logger.info "Compiling…"
+      logger.info "Compiling..."
 
       stdout, stderr, status = Open3.capture3(
         webpack_env,
@@ -67,12 +73,13 @@ class Webpacker::Compiler
       if status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
         logger.error "#{stderr}" unless stderr.empty?
-      else
-        logger.error "Compilation failed:\n#{stderr}"
-      end
 
-      if config.webpack_compile_output?
-        logger.info stdout
+        if config.webpack_compile_output?
+          logger.info stdout
+        end
+      else
+        non_empty_streams = [stdout, stderr].delete_if(&:empty?)
+        logger.error "Compilation failed:\n#{non_empty_streams.join("\n\n")}"
       end
 
       status.success?
@@ -81,7 +88,7 @@ class Webpacker::Compiler
     def default_watched_paths
       [
         *config.resolved_paths_globbed,
-        "#{config.source_path.relative_path_from(config.root_path)}/**/*",
+        config.source_path_globbed,
         "yarn.lock", "package.json",
         "config/webpack/**/*"
       ].freeze

data/lib/webpacker/configuration.rb

@@ -23,12 +23,16 @@ class Webpacker::Configuration
     root_path.join(fetch(:source_path))
   end
 
+  def source_path_globbed
+    globbed_path_with_extensions(source_path.relative_path_from(root_path))
+  end
+
   def resolved_paths
     fetch(:resolved_paths)
   end
 
   def resolved_paths_globbed
-    resolved_paths.map { |p| "#{p}/**/*" }
+    resolved_paths.map { |p| globbed_path_with_extensions(p) }
   end
 
   def source_entry_path
@@ -102,4 +106,8 @@ class Webpacker::Configuration
       @defaults ||= \
         HashWithIndifferentAccess.new(YAML.load_file(File.expand_path("../../install/config/webpacker.yml", __FILE__))[env])
     end
+
+    def globbed_path_with_extensions(path)
+      "#{path}/**/*{#{extensions.join(',')}}"
+    end
 end

data/lib/webpacker/dev_server.rb

@@ -32,7 +32,7 @@ class Webpacker::DevServer
 
   def https?
     case fetch(:https)
-    when true, "true"
+    when true, "true", Hash
       true
     else
       false

data/lib/webpacker/dev_server_proxy.rb

@@ -5,16 +5,10 @@ class Webpacker::DevServerProxy < Rack::Proxy
 
   def initialize(app = nil, opts = {})
     @webpacker = opts.delete(:webpacker) || Webpacker.instance
+    opts[:streaming] = false if Rails.env.test? && !opts.key?(:streaming)
     super
   end
 
-  def rewrite_response(response)
-    _status, headers, _body = response
-    headers.delete "transfer-encoding"
-    headers.delete "content-length" if dev_server.running? && dev_server.https?
-    response
-  end
-
   def perform_request(env)
     if env["PATH_INFO"].start_with?("/#{public_output_uri_path}") && dev_server.running?
       env["HTTP_HOST"] = env["HTTP_X_FORWARDED_HOST"] = env["HTTP_X_FORWARDED_SERVER"] = dev_server.host_with_port
@@ -32,6 +26,6 @@ class Webpacker::DevServerProxy < Rack::Proxy
 
   private
     def public_output_uri_path
-      config.public_output_path.relative_path_from(config.public_path)
+      config.public_output_path.relative_path_from(config.public_path).to_s + "/"
     end
 end