webpacker 4.0.0.pre.3 → 4.0.0.rc.1

data/lib/install/loaders/typescript.js

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

data/lib/install/react.rb

@@ -1,32 +1,18 @@
 require "webpacker/configuration"
+require "fileutils"
 
-babelrc = Rails.root.join(".babelrc")
-babel_react_preset = ["@babel/preset-react", { "useBuiltIns": true }]
+replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
 
-if File.exist?(babelrc)
-  react_babelrc = JSON.parse(File.read(babelrc))
-  react_babelrc["presets"] ||= []
-
-  unless react_babelrc["presets"].flatten.include?("@babel/preset-react")
-    react_babelrc["presets"].push(babel_react_preset)
-    say "Copying react preset to your .babelrc file"
-
-    File.open(babelrc, "w") do |f|
-      f.puts JSON.pretty_generate(react_babelrc)
-    end
-  end
-else
-  say "Copying .babelrc to app root directory"
-  copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
-end
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
 
 say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
 
 say "Updating webpack paths to include .jsx file extension"
-insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Installing all react dependencies"
-run "yarn add react react-dom @babel/preset-react prop-types"
+run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"
 
 say "Webpacker now supports react.js 🎉", :green

data/lib/install/template.rb

@@ -4,11 +4,11 @@ copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 puts "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
-say "Copying .postcssrc.yml to app root directory"
-copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
+say "Copying postcss.config.js to app root directory"
+copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
 
-say "Copying .babelrc to app root directory"
-copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
 
 say "Copying .browserslistrc to app root directory"
 copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
@@ -27,6 +27,7 @@ if File.exists?(".gitignore")
 /public/packs
 /public/packs-test
 /node_modules
+/yarn-error.log
 yarn-debug.log*
 .yarn-integrity
 EOS

data/lib/install/typescript.rb

@@ -24,17 +24,17 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('typescript', typescript)\n",
+  "environment.loaders.prepend('typescript', typescript)\n",
   before: "module.exports"
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
 
 say "Updating webpack paths to include .ts file extension"
-insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating webpack paths to include .tsx file extension"
-insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",

data/lib/install/vue.rb

@@ -9,7 +9,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())\n",
+  "environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())\n",
   before: "module.exports"
 
 say "Adding vue loader to config/webpack/environment.js"
@@ -18,11 +18,11 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('vue-loader')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('vue', vue)\n",
+  "environment.loaders.prepend('vue', vue)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .vue file extension"
-insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/vue/hello_vue.js",
@@ -33,7 +33,7 @@ copy_file "#{__dir__}/examples/vue/app.vue",
   "#{Webpacker.config.source_path}/app.vue"
 
 say "Installing all Vue dependencies"
-run "yarn add vue vue-loader@next vue-template-compiler"
+run "yarn add vue vue-loader vue-template-compiler"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to enable unsafe-eval rule.", :yellow

data/lib/tasks/webpacker/compile.rake

@@ -9,11 +9,9 @@ ensure
 end
 
 def enhance_assets_precompile
-  Rake::Task["assets:precompile"].enhance do
-    unless Rake::Task.task_defined?("yarn:install")
-      # For Rails < 5.1
-      Rake::Task["webpacker:yarn_install"].invoke
-    end
+  # For Rails < 5.1
+  deps = Rake::Task.task_defined?("yarn:install") ? [] : ["webpacker:yarn_install"]
+  Rake::Task["assets:precompile"].enhance(deps) do
     Rake::Task["webpacker:compile"].invoke
   end
 end

data/lib/tasks/webpacker/yarn_install.rake

@@ -1,6 +1,6 @@
 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 --frozen-lockfile --production"
+    system "yarn install --no-progress"
   end
 end

data/lib/webpacker/compiler.rb

@@ -18,9 +18,8 @@ class Webpacker::Compiler
 
   def compile
     if stale?
-      record_compilation_digest
       run_webpack.tap do |success|
-        remove_compilation_digest if !success
+        record_compilation_digest if success
       end
     else
       true
@@ -45,11 +44,7 @@ class Webpacker::Compiler
 
     def watched_files_digest
       files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
-      file_ids = if ENV["CI"]
-        files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
-      else
-        files.map { |f| "#{File.basename(f)}/#{File.mtime(f).utc.to_i}" }
-      end
+      file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
       Digest::SHA1.hexdigest(file_ids.join("/"))
     end
 
@@ -58,18 +53,14 @@ class Webpacker::Compiler
       compilation_digest_path.write(watched_files_digest)
     end
 
-    def remove_compilation_digest
-      compilation_digest_path.delete if compilation_digest_path.exist?
-    rescue Errno::ENOENT, Errno::ENOTDIR
-    end
-
     def run_webpack
       logger.info "Compiling…"
 
       stdout, sterr , status = Open3.capture3(webpack_env, "#{RbConfig.ruby} #{@webpacker.root_path}/bin/webpack")
 
-      if status.success?
+      if sterr == "" && status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
+        logger.info stdout if config.webpack_compile_output?
       else
         logger.error "Compilation failed:\n#{sterr}\n#{stdout}"
       end

data/lib/webpacker/configuration.rb

@@ -67,6 +67,14 @@ class Webpacker::Configuration
     fetch(:check_yarn_integrity)
   end
 
+  def webpack_compile_output?
+    fetch(:webpack_compile_output)
+  end
+
+  def extract_css?
+    fetch(:extract_css)
+  end
+
   private
     def fetch(key)
       data.fetch(key, defaults[key])

data/lib/webpacker/dev_server.rb

@@ -20,15 +20,6 @@ class Webpacker::DevServer
     false
   end
 
-  def hot_module_replacing?
-    case fetch(:hmr)
-    when true, "true"
-      true
-    else
-      false
-    end
-  end
-
   def host
     fetch(:host)
   end

data/lib/webpacker/dev_server_runner.rb

@@ -45,15 +45,22 @@ module Webpacker
 
       def execute_cmd
         env = Webpacker::Compiler.env
-        cmd = [
-          "#{@node_modules_bin_path}/webpack-dev-server",
-          "--config", @webpack_config
-        ]
+
+        cmd = if node_modules_bin_exist?
+          ["#{@node_modules_bin_path}/webpack-dev-server"]
+        else
+          ["yarn", "webpack-dev-server"]
+        end
+        cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
 
         Dir.chdir(@app_path) do
-          exec env, *cmd
+          Kernel.exec env, *cmd
         end
       end
+
+      def node_modules_bin_exist?
+        File.exist?("#{@node_modules_bin_path}/webpack-dev-server")
+      end
   end
 end

data/lib/webpacker/helper.rb

@@ -5,13 +5,13 @@ module Webpacker::Helper
   #
   # Example:
   #
-  #   # In development mode with hot module replacement:
+  #   # When extract_css is false in webpacker.yml and the file is a css:
   #   <%= asset_pack_path 'calendar.css' %>  # => nil
   #
-  #   # In production mode:
+  #   # When extract_css is true in webpacker.yml or the file is not a css:
   #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_path(name, **options)
-    unless stylesheet?(name) && Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?
+    if Webpacker.config.extract_css? || !stylesheet?(name)
       asset_path(Webpacker.manifest.lookup!(name), **options)
     end
   end
@@ -22,13 +22,13 @@ module Webpacker::Helper
   #
   # Example:
   #
-  #   # In development mode with hot module replacement:
+  #   # When extract_css is false in webpacker.yml and the file is a css:
   #   <%= asset_pack_url 'calendar.css' %> # => nil
   #
-  #   # In production mode:
+  #   # When extract_css is true in webpacker.yml or the file is not a css:
   #   <%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_url(name, **options)
-    unless Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?
+    if Webpacker.config.extract_css? || !stylesheet?(name)
       asset_url(Webpacker.manifest.lookup!(name), **options)
     end
   end
@@ -64,15 +64,15 @@ module Webpacker::Helper
   #
   # Examples:
   #
-  #   # In development mode with hot module replacement:
+  #   # When extract_css is false in webpacker.yml:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   nil
   #
-  #   # In production mode:
+  #   # When extract_css is true in webpacker.yml:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
   def stylesheet_pack_tag(*names, **options)
-    unless Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?
+    if Webpacker.config.extract_css?
       stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
     end
   end
@@ -83,10 +83,6 @@ module Webpacker::Helper
     end
 
     def sources_from_pack_manifest(names, type:)
-      names.map { |name| Webpacker.manifest.lookup!(pack_name_with_extension(name, type: type)) }
-    end
-
-    def pack_name_with_extension(name, type:)
-      "#{name}#{compute_asset_extname(name, type: type)}"
+      names.map { |name| Webpacker.manifest.lookup!(name, type: type) }.flatten
     end
 end

data/lib/webpacker/manifest.rb

@@ -4,7 +4,7 @@
 # "/packs/calendar-1016838bab065ae1e314.css".
 #
 # When the configuration is set to on-demand compilation, with the `compile: true` option in
-# the webpacker.yml file, any lookups will be preceeded by a compilation if one is needed.
+# the webpacker.yml file, any lookups will be preceded by a compilation if one is needed.
 class Webpacker::Manifest
   class MissingEntryError < StandardError; end
 
@@ -18,13 +18,29 @@ class Webpacker::Manifest
     @data = load
   end
 
-  def lookup(name)
+  def lookup(name, pack_type = {})
     compile if compiling?
-    find name
+
+    # When using SplitChunks or RuntimeChunks the manifest hash will contain
+    # an extra object called "entrypoints". When the entrypoints key is not
+    # present in the manifest, or the name is not found in the entrypoints hash,
+    # it will raise a NoMethodError. If this happens, we should try to lookup
+    # a single instance of the pack based on the given name.
+    begin
+      manifest_pack_type = manifest_type(pack_type[:type])
+      manifest_pack_name = manifest_name(name, manifest_pack_type)
+
+      # Lookup the pack in the entrypoints of the manifest
+      find("entrypoints")[manifest_pack_name][manifest_pack_type]
+    rescue NoMethodError
+
+      # Lookup a single instance of the pack
+      find(full_pack_name(name, pack_type[:type]))
+    end
   end
 
-  def lookup!(name)
-    lookup(name) || handle_missing_entry(name)
+  def lookup!(name, pack_type = {})
+    lookup(name, pack_type) || handle_missing_entry(name)
   end
 
   private
@@ -36,14 +52,51 @@ class Webpacker::Manifest
       Webpacker.logger.tagged("Webpacker") { compiler.compile }
     end
 
+    def data
+      if config.cache_manifest?
+        @data ||= load
+      else
+        refresh
+      end
+    end
+
     def find(name)
       data[name.to_s].presence
     end
 
+    def full_pack_name(name, pack_type)
+      return name unless File.extname(name.to_s).empty?
+      "#{name}.#{manifest_type(pack_type)}"
+    end
+
     def handle_missing_entry(name)
       raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
     end
 
+    def load
+      if config.public_manifest_path.exist?
+        JSON.parse config.public_manifest_path.read
+      else
+        {}
+      end
+    end
+
+    # The `manifest_name` method strips of the file extension of the name, because in the
+    # manifest hash the entrypoints are defined by their pack name without the extension.
+    # When the user provides a name with a file extension, we want to try to strip it off.
+    def manifest_name(name, pack_type)
+      return name if File.extname(name.to_s).empty?
+      File.basename(name, pack_type)
+    end
+
+    def manifest_type(pack_type)
+      case pack_type
+      when :javascript then "js"
+      when :stylesheet then "css"
+      else pack_type.to_s
+      end
+    end
+
     def missing_file_from_manifest_error(bundle_name)
       <<-MSG
 Webpacker can't find #{bundle_name} in #{config.public_manifest_path}. Possible causes:
@@ -56,20 +109,4 @@ Your manifest contains:
 #{JSON.pretty_generate(@data)}
       MSG
     end
-
-    def data
-      if config.cache_manifest?
-        @data ||= load
-      else
-        refresh
-      end
-    end
-
-    def load
-      if config.public_manifest_path.exist?
-        JSON.parse config.public_manifest_path.read
-      else
-        {}
-      end
-    end
 end

data/lib/webpacker/railtie.rb

@@ -30,13 +30,13 @@ class Webpacker::Engine < ::Rails::Engine
   #     - add `config.webpacker.check_yarn_integrity = true`
   initializer "webpacker.yarn_check" do |app|
     if File.exist?("yarn.lock") && Webpacker.config.config_path.exist? && Webpacker.config.check_yarn_integrity?
-      output = `yarn check --integrity 2>&1`
+      output = `yarn check --integrity && yarn check --verify-tree 2>&1`
 
       unless $?.success?
         $stderr.puts "\n\n"
         $stderr.puts "========================================"
         $stderr.puts "  Your Yarn packages are out of date!"
-        $stderr.puts "  Please run `yarn install` to update."
+        $stderr.puts "  Please run `yarn install --check-files` to update."
         $stderr.puts "========================================"
         $stderr.puts "\n\n"
         $stderr.puts "To disable this check, please change `check_yarn_integrity`"
@@ -83,6 +83,7 @@ class Webpacker::Engine < ::Rails::Engine
     if defined?(Rails::Server) || defined?(Rails::Console)
       Webpacker.bootstrap
       if defined?(Spring)
+        require "spring/watcher"
         Spring.after_fork { Webpacker.bootstrap }
         Spring.watch(Webpacker.config.config_path)
       end