webpacker 6.0.0.beta.2 → 6.0.0.beta.7

data/lib/webpacker/helper.rb

@@ -72,27 +72,15 @@ 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/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.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_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
+  #   <%= javascript_pack_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>
@@ -101,13 +89,13 @@ module Webpacker::Helper
   #
   # DO:
   #
-  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+  #   <%= javascript_pack_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= javascript_packs_with_chunks_tag 'calendar' %>
-  #   <%= javascript_packs_with_chunks_tag 'map' %>
-  def javascript_packs_with_chunks_tag(*names, **options)
+  #   <%= javascript_pack_tag 'calendar' %>
+  #   <%= javascript_pack_tag 'map' %>
+  def javascript_pack_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
 
@@ -127,53 +115,35 @@ 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/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.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_packs_with_chunks_tag 'calendar', 'map' %> # =>
+  #   <%= stylesheet_pack_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_packs_with_chunks_tag 'calendar', 'map' %>
+  #   <%= stylesheet_pack_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= stylesheet_packs_with_chunks_tag 'calendar' %>
-  #   <%= stylesheet_packs_with_chunks_tag 'map' %>
-  def stylesheet_packs_with_chunks_tag(*names, **options)
+  #   <%= stylesheet_pack_tag 'calendar' %>
+  #   <%= stylesheet_pack_tag 'map' %>
+  def stylesheet_pack_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, type: type) }.flatten.uniq
+      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, 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.2".freeze
+  VERSION = "6.0.0.beta.7".freeze
 end

data/lib/webpacker/webpack_runner.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.7",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [

data/package/__tests__/development.js

@@ -22,7 +22,8 @@ describe('Development environment', () => {
       expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
-          port: 3035
+          port: 3035,
+          injectClient: true
         }
       })
     })

data/package/__tests__/index.js

@@ -0,0 +1,9 @@
+const index = require('../index')
+
+describe('index', () => {
+  test('exports webpack-merge v5 functions', () => {
+    expect(index.merge).toBeInstanceOf(Function)
+    expect(index.mergeWithRules).toBeInstanceOf(Function)
+    expect(index.mergeWithCustomize).toBeInstanceOf(Function)
+  })
+})

data/package/environments/__tests__/base.js

@@ -17,14 +17,14 @@ describe('Base config', () => {
   describe('config', () => {
     test('should return entry', () => {
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'javascript', 'packs', 'application.js')
+        resolve('app', 'packs', 'entrypoints', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
-        resolve('app', 'javascript', 'packs', 'multi_entry.js')
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
       ])
     })
 
@@ -53,7 +53,7 @@ describe('Base config', () => {
 
     test('should return default resolve.modules with additions', () => {
       expect(baseConfig.resolve.modules).toEqual([
-        resolve('app', 'javascript'),
+        resolve('app', 'packs'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         resolve('some.config.js'),

data/package/environments/base.js

@@ -10,7 +10,6 @@ const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
 const config = require('../config')
-const { isDevelopment } = require('../env')
 const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
@@ -67,12 +66,8 @@ const getPlugins = () => {
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     plugins.push(
       new MiniCssExtractPlugin({
-        filename: isDevelopment
-          ? 'css/[name].css'
-          : 'css/[name]-[contenthash:8].css',
-        chunkFilename: isDevelopment
-          ? 'css/[id].css'
-          : 'css/[id]-[contenthash:8].css'
+        filename: 'css/[name]-[contenthash:8].css',
+        chunkFilename: 'css/[id]-[contenthash:8].css'
       })
     )
   }
@@ -91,7 +86,7 @@ module.exports = {
   },
   entry: getEntryObject(),
   resolve: {
-    extensions: ['.js', '.mjs', '.ts', '.coffee'],
+    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
     modules: getModulePaths(),
     plugins: [PnpWebpackPlugin]
   },

data/package/environments/development.js

@@ -34,6 +34,7 @@ if (
       hot: devServer.hmr,
       contentBase,
       inline: devServer.inline,
+      injectClient: devServer.inject_client,
       useLocalIp: devServer.use_local_ip,
       public: devServer.public,
       publicPath,

data/package/environments/production.js

@@ -37,7 +37,7 @@ const tryCssMinimizer = () => {
     moduleExists('css-minimizer-webpack-plugin')
   ) {
     const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-    return new CssMinimizerPlugin({ sourceMap: true })
+    return new CssMinimizerPlugin()
   }
 
   return null

data/package/index.js

@@ -1,7 +1,7 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const { merge } = require('webpack-merge')
+const webpackMerge = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const baseConfig = require('./environments/base')
@@ -23,7 +23,7 @@ module.exports = {
   webpackConfig: webpackConfig(),
   baseConfig,
   rules,
-  merge,
   moduleExists,
-  canProcess
+  canProcess,
+  ...webpackMerge
 }

data/package/rules/babel.js

@@ -8,7 +8,7 @@ const {
 const { isProduction } = require('../env')
 
 module.exports = {
-  test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
   include: [sourcePath, ...additionalPaths].map((p) => {
     try {
       return realpathSync(p)

data/package/rules/stylus.js

@@ -8,7 +8,7 @@ const {
 } = require('../config')
 
 module.exports = canProcess('stylus-loader', (resolvedPath) =>
-  getStyleRule(/\.(styl)(\.erb)?$/i, [
+  getStyleRule(/\.(styl(us)?)(\.erb)?$/i, [
     {
       loader: resolvedPath,
       options: {

data/package/utils/helpers.js

@@ -16,7 +16,7 @@ const resetEnv = () => {
 
 const ensureTrailingSlash = (path) => (path.endsWith('/') ? path : `${path}/`)
 
-const moduleExists = (packageName) => {
+const resolvedPath = (packageName) => {
   try {
     return require.resolve(packageName)
   } catch (e) {
@@ -27,8 +27,10 @@ const moduleExists = (packageName) => {
   }
 }
 
+const moduleExists = (packageName) => (!!resolvedPath(packageName))
+
 const canProcess = (rule, fn) => {
-  const modulePath = moduleExists(rule)
+  const modulePath = resolvedPath(rule)
 
   if (modulePath) {
     return fn(modulePath)

data/test/configuration_test.rb

@@ -10,12 +10,12 @@ class ConfigurationTest < Webpacker::Test
   end
 
   def test_source_path
-    source_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript").to_s
+    source_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/packs").to_s
     assert_equal source_path, @config.source_path.to_s
   end
 
   def test_source_entry_path
-    source_entry_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript", "packs").to_s
+    source_entry_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/packs", "entrypoints").to_s
     assert_equal @config.source_entry_path.to_s, source_entry_path
   end
 

data/test/dev_server_runner_test.rb

@@ -43,19 +43,27 @@ class DevServerRunnerTest < Webpacker::Test
     end
   end
 
+  def test_environment_variables
+    cmd = ["#{test_app_path}/node_modules/.bin/webpack", "serve", "--config", "#{test_app_path}/config/webpack/development.js"]
+    env = Webpacker::Compiler.env.dup
+    env["WEBPACKER_CONFIG"] = "#{test_app_path}/config/webpacker.yml"
+    env["WEBPACK_DEV_SERVER"] = "true"
+    verify_command(cmd, env: env)
+  end
+
   private
     def test_app_path
       File.expand_path("test_app", __dir__)
     end
 
-    def verify_command(cmd, use_node_modules: true, argv: [])
+    def verify_command(cmd, use_node_modules: true, argv: [], env: Webpacker::Compiler.env)
       cwd = Dir.pwd
       Dir.chdir(test_app_path)
 
       klass = Webpacker::DevServerRunner
       instance = klass.new(argv)
       mock = Minitest::Mock.new
-      mock.expect(:call, nil, [Webpacker::Compiler.env, *cmd])
+      mock.expect(:call, nil, [env, *cmd])
 
       klass.stub(:new, instance) do
         instance.stub(:node_modules_bin_exist?, use_node_modules) do

data/test/helper_test.rb

@@ -79,33 +79,6 @@ class HelperTest < ActionView::TestCase
       favicon_pack_tag("media/images/nested/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
   end
 
-  def test_javascript_pack_tag
-    assert_equal \
-      %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
-      javascript_pack_tag("bootstrap.js")
-  end
-
-  def test_javascript_pack_tag_symbol
-    assert_equal \
-      %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
-      javascript_pack_tag(:bootstrap)
-  end
-
-  def test_javascript_pack_tag_splat
-    assert_equal \
-      %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js" defer="defer"></script>\n) +
-        %(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>),
-      javascript_pack_tag("bootstrap.js", "application.js", defer: true)
-  end
-
-  def test_javascript_pack_tag_split_chunks
-    assert_equal \
-      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
-        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
-        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
-      javascript_packs_with_chunks_tag("application")
-  end
-
   def test_preload_pack_asset
     if self.class.method_defined?(:preload_link_tag)
       assert_equal \
@@ -122,30 +95,51 @@ class HelperTest < ActionView::TestCase
     end
   end
 
-  def test_stylesheet_pack_tag_split_chunks
+  def test_javascript_pack_tag
     assert_equal \
-      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
-      stylesheet_packs_with_chunks_tag("application", "hello_stimulus")
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>\n) +
+        %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
+      javascript_pack_tag("application", "bootstrap")
+  end
+
+  def test_javascript_pack_tag_splat
+    assert_equal \
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>),
+      javascript_pack_tag("application", defer: true)
+  end
+
+  def test_javascript_pack_tag_symbol
+    assert_equal \
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
+      javascript_pack_tag(:application)
   end
 
   def test_stylesheet_pack_tag
     assert_equal \
-      %(<link rel="stylesheet" media="screen" href="/packs/bootstrap-c38deda30895059837cf.css" />),
-      stylesheet_pack_tag("bootstrap.css")
+      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
+      stylesheet_pack_tag("application", "hello_stimulus")
   end
 
   def test_stylesheet_pack_tag_symbol
     assert_equal \
-      %(<link rel="stylesheet" media="screen" href="/packs/bootstrap-c38deda30895059837cf.css" />),
-      stylesheet_pack_tag(:bootstrap)
+      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
+      stylesheet_pack_tag(:application, :hello_stimulus)
   end
 
   def test_stylesheet_pack_tag_splat
     assert_equal \
-      %(<link rel="stylesheet" media="all" href="/packs/bootstrap-c38deda30895059837cf.css" />\n) +
-        %(<link rel="stylesheet" media="all" href="/packs/application-dd6b1cd38bfa093df600.css" />),
-      stylesheet_pack_tag("bootstrap.css", "application.css", media: "all")
+      %(<link rel="stylesheet" media="all" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
+        %(<link rel="stylesheet" media="all" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />),
+      stylesheet_pack_tag("application", media: "all")
   end
 end