webpacker 5.2.1 → 6.0.0.pre.1

data/lib/install/config/webpack/base.js

@@ -0,0 +1,3 @@
+const { webpackConfig } = require('@rails/webpacker')
+
+module.exports = webpackConfig

data/lib/install/config/webpack/development.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

data/lib/install/config/webpack/production.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

data/lib/install/config/webpack/test.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

data/lib/install/config/webpacker.yml

@@ -15,38 +15,6 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
-  # Extract and emit a css file
-  extract_css: false
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
 development:
   <<: *default
   compile: true
@@ -57,13 +25,20 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
+    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
     inline: true
+    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
+    # Should we use gzip compression?
     compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
     disable_host_check: true
+    # This option lets the browser open with your local IP
     use_local_ip: false
+    # When enabled, nothing except the initial startup information will be written to the console.
+    # This also means that errors or warnings from webpack are not visible.
     quiet: false
     pretty: false
     headers:
@@ -71,7 +46,6 @@ development:
     watch_options:
       ignored: '**/node_modules/**'
 
-
 test:
   <<: *default
   compile: true
@@ -85,8 +59,5 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Extract and emit a css file
-  extract_css: true
-
   # Cache manifest.json for performance
   cache_manifest: true

data/lib/install/examples/{vue → vue3}/app.vue

@@ -1,14 +1,19 @@
 <template>
-  <div id="app">
-    <p>{{ message }}</p>
-  </div>
+  <p>
+    {{ message }}
+  </p>
 </template>
 
 <script>
+import { ref } from 'vue'
+
 export default {
-  data: function () {
+  name: 'HelloWorld',
+  setup() {
+    const message = ref('Hello World')
+
     return {
-      message: "Hello Vue!"
+      message
     }
   }
 }

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

@@ -0,0 +1,15 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// Create a div container with the id 'vue-app' <div id='vue-app'></div>
+// It renders <p>Hello Vue</p> into it.
+
+import { createApp } from "vue";
+import App from "../app.vue";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const app = createApp(App);
+  app.mount("#vue-app");
+});

data/lib/install/javascript/packs/application.css

@@ -0,0 +1,9 @@
+/* 
+Any CSS added to this file or imported from this file, e.g. `@import '../stylesheets/my-css.css'`,
+will be included in the "application" pack. Any CSS imported from application.js or as part of the 
+application.js dependency graph, e.g. `import '../stylesheets/my-css.css'` will also be included 
+in the "application" pack. 
+
+To reference this file, add <%= stylesheet_pack_tag 'application' %> to the appropriate
+layout file, like app/views/layouts/application.html.erb
+*/

data/lib/install/template.rb

@@ -4,15 +4,6 @@ copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
-say "Copying postcss.config.js to app root directory"
-copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
-
-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"
-
 if Dir.exists?(Webpacker.config.source_path)
   say "The JavaScript app source directory already exists"
 else
@@ -22,8 +13,9 @@ end
 
 apply "#{__dir__}/binstubs.rb"
 
-if File.exists?(".gitignore")
-  append_to_file ".gitignore" do
+git_ignore_path = Rails.root.join(".gitignore")
+if File.exists?(git_ignore_path)
+  append_to_file git_ignore_path do
     "\n"                   +
     "/public/packs\n"      +
     "/public/packs-test\n" +
@@ -34,16 +26,38 @@ if File.exists?(".gitignore")
   end
 end
 
-if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
-  say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-  run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
-else
-  say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
-  run "yarn add @rails/webpacker@next"
+Dir.chdir(Rails.root) do
+  if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+    say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
+    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 @webpack-cli/serve"
 end
 
-say "Installing dev server for live reloading"
-run "yarn add --dev webpack-dev-server"
+insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
+  <<~JSON.chomp
+  ,
+    "babel": {
+      "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
+    },
+    "browserslist": [
+      "defaults"
+    ]
+  JSON
+end
 
 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/tasks/webpacker.rake

@@ -6,19 +6,10 @@ tasks = {
   "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",
-  "webpacker:check_binstubs"          => "Verifies that webpack & webpack-dev-server are present",
+  "webpacker:check_binstubs"          => "Verifies that bin/webpack is present",
   "webpacker:binstubs"                => "Installs Webpacker binstubs in this application",
   "webpacker:verify_install"          => "Verifies if Webpacker is installed",
-  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
-  "webpacker:install:react"           => "Installs and setup example React component",
-  "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",
-  "webpacker:install:typescript"      => "Installs Typescript loader with an example"
+  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
 }.freeze
 
 desc "Lists all available tasks in Webpacker"

data/lib/tasks/webpacker/binstubs.rake

@@ -1,13 +1,15 @@
 binstubs_template_path = File.expand_path("../../install/binstubs.rb", __dir__).freeze
-bin_path = ENV["BUNDLE_BIN"] || "./bin"
+bin_path = ENV["BUNDLE_BIN"] || Rails.root.join("bin")
 
 namespace :webpacker do
   desc "Installs Webpacker binstubs in this application"
-  task binstubs: [:check_node, :check_yarn] do
+  task binstubs: [:check_node, :check_yarn] do |task|
+    prefix = task.name.split(/#|webpacker:binstubs/).first
+
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{binstubs_template_path}"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{binstubs_template_path}"
     end
   end
 end

data/lib/tasks/webpacker/check_binstubs.rake

@@ -1,10 +1,10 @@
 namespace :webpacker do
-  desc "Verifies that webpack & webpack-dev-server are present."
+  desc "Verifies that bin/webpack is present"
   task :check_binstubs do
-    unless File.exist?("bin/webpack")
-      $stderr.puts "webpack binstubs not found.\n"\
+    unless File.exist?(Rails.root.join("bin/webpack"))
+      $stderr.puts "webpack binstub not found.\n"\
            "Have you run rails webpacker:install ?\n"\
-           "Make sure the bin directory or binstubs are not included in .gitignore\n"\
+           "Make sure the bin directory and bin/webpack are not included in .gitignore\n"\
            "Exiting!"
       exit!
     end

data/lib/tasks/webpacker/check_yarn.rake

@@ -9,13 +9,12 @@ namespace :webpacker do
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
       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, ">=2.0.0") rescue false
+      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=3.0.0") rescue false
 
       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/"
-          $stderr.puts "For information on using Webpacker with Yarn 2.0, see https://github.com/rails/webpacker/issues/2112"
         else
           $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
         end

data/lib/tasks/webpacker/compile.rake

@@ -10,8 +10,10 @@ end
 def enhance_assets_precompile
   # yarn:install was added in Rails 5.1
   deps = yarn_install_available? ? [] : ["webpacker:yarn_install"]
-  Rake::Task["assets:precompile"].enhance(deps) do
-    Rake::Task["webpacker:compile"].invoke
+  Rake::Task["assets:precompile"].enhance(deps) do |task|
+    prefix = task.name.split(/#|assets:precompile/).first
+
+    Rake::Task["#{prefix}webpacker:compile"].invoke
   end
 end
 

data/lib/tasks/webpacker/info.rake

@@ -3,17 +3,19 @@ require "webpacker/version"
 namespace :webpacker do
   desc "Provide information on Webpacker's environment"
   task :info do
-    $stdout.puts "Ruby: #{`ruby --version`}"
-    $stdout.puts "Rails: #{Rails.version}"
-    $stdout.puts "Webpacker: #{Webpacker::VERSION}"
-    $stdout.puts "Node: #{`node --version`}"
-    $stdout.puts "Yarn: #{`yarn --version`}"
+    Dir.chdir(Rails.root) do
+      $stdout.puts "Ruby: #{`ruby --version`}"
+      $stdout.puts "Rails: #{Rails.version}"
+      $stdout.puts "Webpacker: #{Webpacker::VERSION}"
+      $stdout.puts "Node: #{`node --version`}"
+      $stdout.puts "Yarn: #{`yarn --version`}"
 
-    $stdout.puts "\n"
-    $stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"
+      $stdout.puts "\n"
+      $stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"
 
-    $stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
-    $stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
-    $stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
+      $stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
+      $stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
+      $stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
+    end
   end
 end

data/lib/tasks/webpacker/install.rake

@@ -1,13 +1,15 @@
 install_template_path = File.expand_path("../../install/template.rb", __dir__).freeze
-bin_path = ENV["BUNDLE_BIN"] || "./bin"
+bin_path = ENV["BUNDLE_BIN"] || Rails.root.join("bin")
 
 namespace :webpacker do
   desc "Install Webpacker in this application"
-  task install: [:check_node, :check_yarn] do
+  task install: [:check_node, :check_yarn] do |task|
+    prefix = task.name.split(/#|webpacker:install/).first
+
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{install_template_path}"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{install_template_path}"
     end
   end
 end

data/lib/tasks/webpacker/verify_install.rake

@@ -4,7 +4,8 @@ namespace :webpacker do
   desc "Verifies if Webpacker is installed"
   task verify_install: [:check_node, :check_yarn, :check_binstubs] do
     unless Webpacker.config.config_path.exist?
-      $stderr.puts "Configuration config/webpacker.yml file not found. \n"\
+      path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
+      $stderr.puts "Configuration #{path} file not found. \n"\
            "Make sure webpacker:install is run successfully before " \
            "running dependent tasks"
       exit!

data/lib/tasks/webpacker/yarn_install.rake

@@ -5,6 +5,14 @@ namespace :webpacker do
     node_env = ENV.fetch("NODE_ENV") do
       valid_node_envs.include?(Rails.env) ? Rails.env : "production"
     end
-    system({ "NODE_ENV" => node_env }, "yarn install --no-progress --frozen-lockfile")
+    Dir.chdir(Rails.root) do
+      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
 end

data/lib/webpacker/commands.rb

@@ -23,7 +23,7 @@ class Webpacker::Commands
         .each_with_index
         .drop_while do |(mtime, _), index|
           max_age = [0, Time.now - Time.at(mtime)].max
-          max_age < age && index < count
+          max_age < age || index < count
         end
         .each do |(_, files), index|
           files.each do |file|

data/lib/webpacker/compiler.rb

@@ -53,10 +53,11 @@ class Webpacker::Compiler
 
     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("/"))
+      Dir.chdir File.expand_path(config.root_path) do
+        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("/"))
+      end
     end
 
     def record_compilation_digest
@@ -90,8 +91,8 @@ class Webpacker::Compiler
 
     def default_watched_paths
       [
-        *config.additional_paths_globbed,
-        config.source_path_globbed,
+        *config.additional_paths,
+        "#{config.source_path}/**/*",
         "yarn.lock", "package.json",
         "config/webpack/**/*"
       ].freeze

data/lib/webpacker/configuration.rb

@@ -23,16 +23,8 @@ 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 additional_paths
-    fetch(:additional_paths) + resolved_paths
-  end
-
-  def additional_paths_globbed
-    additional_paths.map { |p| globbed_path_with_extensions(p) }
+    fetch(:additional_paths)
   end
 
   def source_entry_path
@@ -59,31 +51,19 @@ class Webpacker::Configuration
     root_path.join(fetch(:cache_path))
   end
 
-  def extensions
-    fetch(:extensions)
-  end
-
   def check_yarn_integrity=(value)
-    warn "Webpacker::Configuration#check_yarn_integrity=(value) has been deprecated. The integrity check has been removed from Webpacker so changing this setting will have no effect."
+    warn <<~EOS
+      Webpacker::Configuration#check_yarn_integrity=(value) is obsolete. The integrity
+      check has been removed from Webpacker (https://github.com/rails/webpacker/pull/2518)
+      so changing this setting will have no effect.
+    EOS
   end
 
   def webpack_compile_output?
     fetch(:webpack_compile_output)
   end
 
-  def extract_css?
-    fetch(:extract_css)
-  end
-
   private
-    def resolved_paths
-      paths = data.fetch(:resolved_paths, [])
-
-      warn "The resolved_paths option has been deprecated. Use additional_paths instead." unless paths.empty?
-
-      paths
-    end
-
     def fetch(key)
       data.fetch(key, defaults[key])
     end
@@ -110,8 +90,4 @@ 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