webpacker 6.0.0.beta.7 → 6.0.0.pre.1

data/docs/yarn.md

@@ -0,0 +1,23 @@
+# Yarn
+
+Webpacker by default uses `yarn` as a package manager for `node_modules`
+
+
+## Add a new npm module
+
+To add any new JS module you can use `yarn`:
+
+```bash
+yarn add bootstrap material-ui
+```
+
+## Add an npm module to `devDependencies`
+To add a new JS module that will only be available to local development:
+
+```bash
+yarn add --dev browser-sync
+```
+
+Be careful not to add any build or app related JS modules in this fashion. Adding JS modules to `devDependencies` [will block them from being installed in **any** production environment](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production-true-false).
+
+Docs from JS modules may instruct you to use `--dev` or `devDependencies`, but this is generally under the assumption that you are using a `node.js` workflow.

data/lib/install/config/webpacker.yml

@@ -1,14 +1,14 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/packs
-  source_entry_path: entrypoints
+  source_path: app/javascript
+  source_entry_path: packs
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   webpack_compile_output: true
 
-  # Additional paths webpack should look up modules
+  # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
 
@@ -25,8 +25,6 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
-    # Inject browserside javascript that required by both HMR and Live(full) reload
-    inject_client: true
     # 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; it inserts a script to take care of live reloading

data/lib/install/examples/vue3/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <p>
+    {{ message }}
+  </p>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name: 'HelloWorld',
+  setup() {
+    const message = ref('Hello World')
+
+    return {
+      message
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

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/{packs/entrypoints → javascript/packs}/application.js

@@ -1,12 +1,13 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/packs and only use these pack files to reference
+// a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
@@ -14,7 +15,4 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-
 console.log('Hello World from Webpacker')

data/lib/install/template.rb

@@ -5,10 +5,10 @@ say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 if Dir.exists?(Webpacker.config.source_path)
-  say "The packs app source directory already exists"
+  say "The JavaScript app source directory already exists"
 else
-  say "Creating packs app source directory"
-  directory "#{__dir__}/packs", Webpacker.config.source_path
+  say "Creating JavaScript app source directory"
+  directory "#{__dir__}/javascript", Webpacker.config.source_path
 end
 
 apply "#{__dir__}/binstubs.rb"
@@ -26,15 +26,13 @@ if File.exists?(git_ignore_path)
   end
 end
 
-results = []
-
 Dir.chdir(Rails.root) do
-  if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
+  if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
     say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-    results << run("yarn add @rails/webpacker@#{Webpacker::VERSION}")
+    run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
   else
     say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
-    results << run("yarn add @rails/webpacker@next")
+    run "yarn add @rails/webpacker@next"
   end
 
   package_json = File.read("#{__dir__}/../../package.json")
@@ -43,10 +41,10 @@ Dir.chdir(Rails.root) do
 
   # needed for experimental Yarn 2 support and should not harm Yarn 1
   say "Installing webpack and webpack-cli as direct dependencies"
-  results << run("yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}")
+  run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
 
   say "Installing dev server for live reloading"
-  results << run("yarn add --dev webpack-dev-server @webpack-cli/serve")
+  run "yarn add --dev webpack-dev-server @webpack-cli/serve"
 end
 
 insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
@@ -68,9 +66,4 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
 end
 
-if results.all?
-  say "Webpacker successfully installed 🎉 🍰", :green
-else
-  say "Webpacker installation failed 😭 See above for details.", :red
-  exit 1
-end
+say "Webpacker successfully installed 🎉 🍰", :green

data/lib/tasks/webpacker/binstubs.rake

@@ -7,9 +7,9 @@ namespace :webpacker do
     prefix = task.name.split(/#|webpacker:binstubs/).first
 
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}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 #{prefix}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_node.rake

@@ -3,7 +3,6 @@ namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
-      raise Errno::ENOENT if `which node || which nodejs`.strip.empty?
       node_version = `node -v || nodejs -v`.strip
       raise Errno::ENOENT if node_version.blank?
 

data/lib/tasks/webpacker/check_yarn.rake

@@ -3,7 +3,6 @@ namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
     begin
-      raise Errno::ENOENT if `which yarn`.strip.empty?
       yarn_version = `yarn --version`.strip
       raise Errno::ENOENT if yarn_version.blank?
 

data/lib/tasks/webpacker/install.rake

@@ -7,9 +7,9 @@ namespace :webpacker do
     prefix = task.name.split(/#|webpacker:install/).first
 
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}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 #{prefix}rails:template LOCATION='#{install_template_path}'"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{install_template_path}"
     end
   end
 end

data/lib/webpacker/commands.rb

@@ -64,8 +64,7 @@ class Webpacker::Commands
 
     def current_version
       packs = manifest.refresh.values.map do |value|
-        value = value["src"] if value.is_a?(Hash)
-        next unless value.is_a?(String)
+        next if value.is_a?(Hash)
 
         File.join(config.root_path, "public", "#{value}*")
       end.compact

data/lib/webpacker/compiler.rb

@@ -28,14 +28,14 @@ class Webpacker::Compiler
         record_compilation_digest
       end
     else
-      logger.debug "Everything's up-to-date. Nothing to do"
+      logger.info "Everything's up-to-date. Nothing to do"
       true
     end
   end
 
   # Returns true if all the compiled packs are up to date with the underlying asset files.
   def fresh?
-    last_compilation_digest&.== watched_files_digest
+    watched_files_digest == last_compilation_digest
   end
 
   # Returns true if the compiled packs are out of date with the underlying asset files.
@@ -65,18 +65,12 @@ class Webpacker::Compiler
       compilation_digest_path.write(watched_files_digest)
     end
 
-    def optionalRubyRunner
-      bin_webpack_path = config.root_path.join("bin/webpack")
-      first_line = File.readlines(bin_webpack_path).first.chomp
-      /ruby/.match?(first_line) ? RbConfig.ruby : ""
-    end
-
     def run_webpack
       logger.info "Compiling..."
 
       stdout, stderr, status = Open3.capture3(
         webpack_env,
-        "#{optionalRubyRunner} ./bin/webpack",
+        "#{RbConfig.ruby} ./bin/webpack",
         chdir: File.expand_path(config.root_path)
       )
 

data/lib/webpacker/configuration.rb

@@ -63,11 +63,11 @@ class Webpacker::Configuration
     fetch(:webpack_compile_output)
   end
 
-  def fetch(key)
-    data.fetch(key, defaults[key])
-  end
-
   private
+    def fetch(key)
+      data.fetch(key, defaults[key])
+    end
+
     def data
       @data ||= load
     end

data/lib/webpacker/dev_server_runner.rb

@@ -64,7 +64,6 @@ module Webpacker
       def execute_cmd
         env = Webpacker::Compiler.env
         env["WEBPACKER_CONFIG"] = @webpacker_config
-        env["WEBPACK_DEV_SERVER"] = "true"
 
         cmd = if node_modules_bin_exist?
           ["#{@node_modules_bin_path}/webpack", "serve"]
@@ -74,7 +73,6 @@ module Webpacker
 
         if @argv.include?("--debug-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
-          @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]

data/lib/webpacker/helper.rb

@@ -72,15 +72,27 @@ module Webpacker::Helper
     favicon_link_tag(resolve_path_to_image(name), options)
   end
 
+  # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Example:
+  #
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+  def javascript_pack_tag(*names, **options)
+    javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
+  end
+
   # Creates script tags that reference the js chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Example:
   #
-  #   <%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
+  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
   #   <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
@@ -89,13 +101,13 @@ module Webpacker::Helper
   #
   # DO:
   #
-  #   <%= javascript_pack_tag 'calendar', 'map' %>
+  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= javascript_pack_tag 'calendar' %>
-  #   <%= javascript_pack_tag 'map' %>
-  def javascript_pack_tag(*names, **options)
+  #   <%= javascript_packs_with_chunks_tag 'calendar' %>
+  #   <%= javascript_packs_with_chunks_tag 'map' %>
+  def javascript_packs_with_chunks_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
 
@@ -115,35 +127,53 @@ module Webpacker::Helper
     end
   end
 
+  # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Note: If the development server is running and hot module replacement is active, this will return nothing.
+  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
+  #
+  # Examples:
+  #
+  #   <%= 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)
+    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
+  end
+
   # Creates link tags that reference the css chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Examples:
   #
-  #   <%= stylesheet_pack_tag 'calendar', 'map' %> # =>
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
   #
   # DO:
   #
-  #   <%= stylesheet_pack_tag 'calendar', 'map' %>
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= stylesheet_pack_tag 'calendar' %>
-  #   <%= stylesheet_pack_tag 'map' %>
-  def stylesheet_pack_tag(*names, **options)
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+  #   <%= stylesheet_packs_with_chunks_tag 'map' %>
+  def stylesheet_packs_with_chunks_tag(*names, **options)
     stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
   private
+    def sources_from_manifest_entries(names, type:)
+      names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
+    end
 
     def sources_from_manifest_entrypoints(names, type:)
-      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, type: type) }.flatten.uniq
+      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
     end
 
     def resolve_path_to_image(name, **options)

data/lib/webpacker/manifest.rb

@@ -92,7 +92,7 @@ class Webpacker::Manifest
     # 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}")
+      File.basename(name, pack_type)
     end
 
     def manifest_type(pack_type)

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.0.beta.7".freeze
+  VERSION = "6.0.0.pre.1".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -15,7 +15,6 @@ module Webpacker
 
       if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
-        @argv.delete "--debug-webpacker"
       end
 
       if @argv.include?("--trace-deprecation")