webpacker 6.0.0.beta.7 → 6.0.0.rc.5

data/package/babel/preset.js

@@ -42,7 +42,6 @@ module.exports = function config(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      'babel-plugin-macros',
       ['@babel/plugin-proposal-class-properties', { loose: true }],
       ['@babel/plugin-transform-runtime', { helpers: false }],
       isProductionEnv &&

data/package/config.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path')
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 const { merge } = require('webpack-merge')
 const { ensureTrailingSlash } = require('./utils/helpers')
@@ -9,12 +9,12 @@ const configPath = require('./configPath')
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
 
 const getDefaultConfig = () => {
-  const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
+  const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
   return defaultConfig[railsEnv] || defaultConfig.production
 }
 
 const defaults = getDefaultConfig()
-const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
+const app = load(readFileSync(configPath), 'utf8')[railsEnv]
 
 const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)

data/package/env.js

@@ -1,4 +1,4 @@
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
@@ -12,13 +12,16 @@ const nodeEnv
 const isProduction = nodeEnv === 'production'
 const isDevelopment = nodeEnv === 'development'
 
-const config = safeLoad(readFileSync(configPath), 'utf8')
+const config = load(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+const runningWebpackDevServer = process.env.WEBPACK_SERVE === 'true'
+
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
   nodeEnv,
   isProduction,
-  isDevelopment
+  isDevelopment,
+  runningWebpackDevServer
 }

data/package/environments/__tests__/base.js

@@ -29,9 +29,9 @@ describe('Base config', () => {
     })
 
     test('should return output', () => {
-      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(baseConfig.output.filename).toEqual('js/[name].js')
       expect(baseConfig.output.chunkFilename).toEqual(
-        'js/[name]-[contenthash].chunk.js'
+        'js/[name].chunk.js'
       )
     })
 
@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(3)
+      expect(baseConfig.plugins.length).toEqual(2)
     })
 
     test('should return default resolveLoader', () => {

data/package/environments/base.js

@@ -5,10 +5,10 @@ const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
 const { sync: globSync } = require('glob')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
+const { isProduction } = require('../env')
 const config = require('../config')
 const { moduleExists } = require('../utils/helpers')
 
@@ -52,7 +52,6 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
-    new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
       writeToDisk: true,
@@ -63,11 +62,12 @@ const getPlugins = () => {
   ]
 
   if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
+    const hash = isProduction ? '-[contenthash:8]' : ''
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     plugins.push(
       new MiniCssExtractPlugin({
-        filename: 'css/[name]-[contenthash:8].css',
-        chunkFilename: 'css/[id]-[contenthash:8].css'
+        filename: `css/[name]${hash}.css`,
+        chunkFilename: `css/[id]${hash}.css`
       })
     )
   }
@@ -75,12 +75,17 @@ const getPlugins = () => {
   return plugins
 }
 
+// Don't use contentHash except for production for performance
+// https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+const hash = isProduction ? '-[contenthash]' : ''
 module.exports = {
   mode: 'production',
   output: {
-    filename: 'js/[name]-[contenthash].js',
-    chunkFilename: 'js/[name]-[contenthash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    filename: `js/[name]${hash}.js`,
+    chunkFilename: `js/[name]${hash}.chunk.js`,
+
+    // https://webpack.js.org/configuration/output/#outputhotupdatechunkfilename
+    hotUpdateChunkFilename: 'js/[id].[fullhash].hot-update.js',
     path: config.outputPath,
     publicPath: config.publicPath
   },

data/package/environments/development.js

@@ -1,8 +1,8 @@
 const { merge } = require('webpack-merge')
-const webpack = require('webpack')
 
 const baseConfig = require('./base')
 const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../env')
 
 const { outputPath: contentBase, publicPath } = require('../config')
 
@@ -11,44 +11,48 @@ let devConfig = {
   devtool: 'cheap-module-source-map'
 }
 
-if (
-  process.env.WEBPACK_DEV_SERVER &&
-  process.env.WEBPACK_DEV_SERVER !== 'undefined'
-) {
+if (runningWebpackDevServer) {
   if (devServer.hmr) {
     devConfig = merge(devConfig, {
-      output: { filename: '[name]-[hash].js' },
-      plugins: [new webpack.HotModuleReplacementPlugin()]
+      output: { filename: '[name]-[hash].js' }
     })
   }
 
-  devConfig = merge(devConfig, {
-    devServer: {
-      clientLogLevel: 'none',
-      compress: devServer.compress,
-      quiet: devServer.quiet,
-      disableHostCheck: devServer.disable_host_check,
-      host: devServer.host,
-      port: devServer.port,
-      https: devServer.https,
-      hot: devServer.hmr,
-      contentBase,
-      inline: devServer.inline,
-      injectClient: devServer.inject_client,
-      useLocalIp: devServer.use_local_ip,
-      public: devServer.public,
-      publicPath,
-      historyApiFallback: { disableDotRule: true },
-      headers: devServer.headers,
-      overlay: devServer.overlay,
-      stats: {
-        entrypoints: false,
-        errorDetails: true,
-        modules: false,
-        moduleTrace: false
-      },
-      watchOptions: devServer.watch_options
+  const devServerConfig = {
+    devMiddleware: {
+      publicPath
+    },
+    compress: devServer.compress,
+    allowedHosts: devServer.allowed_hosts,
+    host: devServer.host,
+    port: devServer.port,
+    https: devServer.https,
+    hot: devServer.hmr,
+    liveReload: !devServer.hmr,
+    historyApiFallback: { disableDotRule: true },
+    headers: devServer.headers,
+    static: {
+      publicPath: contentBase
     }
+  }
+
+  if (devServer.static) {
+    devServerConfig.static = { ...devServerConfig.static, ...devServer.static }
+  }
+
+  if (devServer.client) {
+    devServerConfig.client = devServer.client
+  }
+
+  devConfig = merge(devConfig, {
+    stats: {
+      colors: true,
+      entrypoints: false,
+      errorDetails: true,
+      modules: false,
+      moduleTrace: false
+    },
+    devServer: devServerConfig
   })
 }
 

data/package/index.js

@@ -10,6 +10,7 @@ const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
 const { moduleExists, canProcess } = require('./utils/helpers')
+const inliningCss = require('./inliningCss')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -25,5 +26,6 @@ module.exports = {
   rules,
   moduleExists,
   canProcess,
+  inliningCss,
   ...webpackMerge
 }

data/package/inliningCss.js

@@ -0,0 +1,7 @@
+const { runningWebpackDevServer } = require('./env')
+const devServer = require('./dev_server')
+
+// This logic is tied to lib/webpacker/instance.rb
+const inliningCss = runningWebpackDevServer && devServer.hmr
+
+module.exports = inliningCss

data/package/rules/file.js

@@ -18,6 +18,6 @@ module.exports = {
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
   type: 'asset/resource',
   generator: {
-    filename: 'media/images/[hash][ext][query]'
+    filename: 'static/[hash][ext][query]'
   }
 }

data/package/rules/sass.js

@@ -9,8 +9,7 @@ module.exports = canProcess('sass-loader', (resolvedPath) =>
     {
       loader: resolvedPath,
       options: {
-        sassOptions: { includePaths },
-        implementation: require('sass')
+        sassOptions: { includePaths }
       }
     }
   ])

data/package/utils/get_style_rule.js

@@ -1,6 +1,6 @@
 /* eslint global-require: 0 */
-
 const { canProcess, moduleExists } = require('./helpers')
+const inliningCss = require('../inliningCss')
 
 const getStyleRule = (test, preprocessors = []) => {
   if (moduleExists('css-loader')) {
@@ -10,8 +10,10 @@ const getStyleRule = (test, preprocessors = []) => {
         options: { sourceMap: true }
       }))
 
+    // style-loader is required when using css modules with HMR on the webpack-dev-server
+
     const use = [
-      { loader: require('mini-css-extract-plugin').loader },
+      inliningCss ? 'style-loader' : require('mini-css-extract-plugin').loader,
       {
         loader: require.resolve('css-loader'),
         options: {

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-rc.5",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,40 +8,36 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.22.1 || ^12 || >=14",
-    "yarn": ">=1 <3"
+    "node": ">= 12.13.0 || >=14",
+    "yarn": ">=1 <4"
   },
   "dependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/runtime": "^7.15.3",
     "babel-loader": "^8.2.2",
-    "babel-plugin-macros": "^3.0.1",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "compression-webpack-plugin": "^7.1.0",
-    "core-js": "^3.8.0",
-    "glob": "^7.1.6",
-    "js-yaml": "^3.14.0",
+    "compression-webpack-plugin": "^8.0.1",
+    "glob": "^7.1.7",
+    "js-yaml": "^4.1.0",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.6.4",
-    "regenerator-runtime": "^0.13.7",
-    "terser-webpack-plugin": "^5.0.3",
-    "webpack": "^5.11.0",
-    "webpack-assets-manifest": "^5.0.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-merge": "^5.7.2",
-    "webpack-sources": "^2.2.0"
+    "pnp-webpack-plugin": "^1.7.0",
+    "terser-webpack-plugin": "^5.1.4",
+    "webpack": "^5.51.1",
+    "webpack-assets-manifest": "^5.0.6",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-sources": "^3.2.0"
   },
   "devDependencies": {
-    "eslint": "^7.16.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.4",
-    "jest": "^26.5.3"
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "jest": "^27.0.6"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/test/command_test.rb

@@ -31,3 +31,79 @@ class CommandTest < Minitest::Test
     end
   end
 end
+
+class ClearCommandVersioningTest < Minitest::Test
+  def setup
+    @now = Time.parse("2021-01-01 12:34:56 UTC")
+    # Test assets to be kept and deleted, path and mtime
+    @prev_files = {
+      # recent versions to be kept with Webpacker.commands.clean(count = 2)
+      "js/application-deadbeef.js" => @now - 4000,
+      "js/common-deadbeee.js" => @now - 4002,
+      "css/common-deadbeed.css" => @now - 4004,
+      "media/images/logo-deadbeeb.css" => @now - 4006,
+      "js/application-1eadbeef.js" => @now - 8000,
+      "js/common-1eadbeee.js" => @now - 8002,
+      "css/common-1eadbeed.css" => @now - 8004,
+      "media/images/logo-1eadbeeb.css" => @now - 8006,
+      # new files to be kept with Webpacker.commands.clean(age = 3600)
+      "js/brandnew-0001.js" => @now,
+      "js/brandnew-0002.js" => @now - 10,
+      "js/brandnew-0003.js" => @now - 20,
+      "js/brandnew-0004.js" => @now - 40,
+    }.transform_keys { |path| "#{Webpacker.config.public_output_path}/#{path}" }
+    @expired_files = {
+      # old files that are outside count = 2 or age = 3600 and to be deleted
+      "js/application-0eadbeef.js" => @now - 9000,
+      "js/common-0eadbeee.js" => @now - 9002,
+      "css/common-0eadbeed.css" => @now - 9004,
+      "js/brandnew-0005.js" => @now - 3640,
+    }.transform_keys { |path| "#{Webpacker.config.public_output_path}/#{path}" }
+    @all_files = @prev_files.merge(@expired_files)
+    @dir_glob_stub = Proc.new { |arg|
+      case arg
+      when "#{Webpacker.config.public_output_path}/**/*"
+        @all_files.keys
+      else
+        []
+      end
+    }
+    @file_mtime_stub = Proc.new { |longpath|
+      @all_files[longpath]
+    }
+    @file_delete_mock = Minitest::Mock.new
+    @expired_files.keys.each do |longpath|
+      @file_delete_mock.expect(:delete, 1, [longpath])
+    end
+    @file_delete_stub = Proc.new { |longpath|
+      if @prev_files.has_key?(longpath)
+        flunk "#{longpath} should not be deleted"
+      else
+        @file_delete_mock.delete(longpath)
+      end
+    }
+  end
+
+  def time_and_files_stub(&proc)
+    Time.stub :now, @now do
+      Dir.stub :glob, @dir_glob_stub do
+        File.stub :directory?, false do
+          File.stub :file?, true do
+            File.stub :mtime, @file_mtime_stub do
+              File.stub :delete, @file_delete_stub do
+                yield proc
+              end
+            end
+          end
+        end
+      end
+    end
+    @file_delete_mock.verify
+  end
+
+  def test_clean_command_with_versioned_files
+    time_and_files_stub do
+      assert Webpacker.commands.clean
+    end
+  end
+end

data/test/configuration_test.rb

@@ -44,7 +44,7 @@ class ConfigurationTest < Webpacker::Test
   end
 
   def test_cache_path
-    cache_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/tmp/cache/webpacker").to_s
+    cache_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/tmp/webpacker").to_s
     assert_equal @config.cache_path.to_s, cache_path
   end