webpacker 5.4.0 → 6.0.0.rc.6

data/package/environments/production.js

@@ -1,77 +1,79 @@
-const TerserPlugin = require('terser-webpack-plugin')
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const safePostCssParser = require('postcss-safe-parser')
-const Base = require('./base')
+const TerserPlugin = require('terser-webpack-plugin')
+const baseConfig = require('./base')
+const { moduleExists } = require('../utils/helpers')
+
+const getPlugins = () => {
+  const plugins = []
 
-module.exports = class extends Base {
-  constructor() {
-    super()
+  plugins.push(
+    new CompressionPlugin({
+      filename: '[path][base].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+    })
+  )
 
-    this.plugins.append(
-      'Compression',
+  if ('brotli' in process.versions) {
+    plugins.push(
       new CompressionPlugin({
-        filename: '[path].gz[query]',
-        algorithm: 'gzip',
+        filename: '[path][base].br[query]',
+        algorithm: 'brotliCompress',
         test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
       })
     )
+  }
 
-    if ('brotli' in process.versions) {
-      this.plugins.append(
-        'Compression Brotli',
-        new CompressionPlugin({
-          filename: '[path].br[query]',
-          algorithm: 'brotliCompress',
-          test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-        })
-      )
-    }
+  return plugins
+}
 
-    this.plugins.append(
-      'OptimizeCSSAssets',
-      new OptimizeCSSAssetsPlugin({
-        parser: safePostCssParser,
-        map: {
-          inline: false,
-          annotation: true
+const tryCssMinimizer = () => {
+  if (
+    moduleExists('css-loader') &&
+    moduleExists('css-minimizer-webpack-plugin')
+  ) {
+    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+    return new CssMinimizerPlugin()
+  }
+
+  return null
+}
+
+const productionConfig = {
+  devtool: 'source-map',
+  stats: 'normal',
+  bail: true,
+  plugins: getPlugins(),
+  optimization: {
+    minimizer: [
+      tryCssMinimizer(),
+      new TerserPlugin({
+        parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
+        terserOptions: {
+          parse: {
+            // Let terser parse ecma 8 code but always output
+            // ES5 compliant code for older browsers
+            ecma: 8
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            comparisons: false
+          },
+          mangle: { safari10: true },
+          output: {
+            ecma: 5,
+            comments: false,
+            ascii_only: true
+          }
         }
       })
-    )
-
-    this.config.merge({
-      devtool: 'source-map',
-      stats: 'normal',
-      bail: true,
-      optimization: {
-        minimizer: [
-          new TerserPlugin({
-            parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
-            cache: true,
-            sourceMap: true,
-            terserOptions: {
-              parse: {
-                // Let terser parse ecma 8 code but always output
-                // ES5 compliant code for older browsers
-                ecma: 8
-              },
-              compress: {
-                ecma: 5,
-                warnings: false,
-                comparisons: false
-              },
-              mangle: {
-                safari10: true
-              },
-              output: {
-                ecma: 5,
-                comments: false,
-                ascii_only: true
-              }
-            }
-          })
-        ]
-      }
-    })
+    ].filter(Boolean)
   }
 }
+
+module.exports = merge(baseConfig, productionConfig)

data/package/environments/test.js

@@ -1,3 +1,3 @@
-const Base = require('./base')
+const baseConfig = require('./base')
 
-module.exports = class extends Base {}
+module.exports = baseConfig

data/package/index.js

@@ -1,24 +1,31 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+const webpackMerge = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
-const Environment = require('./environments/base')
-const loaders = require('./rules')
+const baseConfig = require('./environments/base')
+const rules = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
+const { moduleExists, canProcess } = require('./utils/helpers')
+const inliningCss = require('./inliningCss')
 
-const createEnvironment = () => {
+const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
-  const constructor = existsSync(path) ? require(path) : Environment
-  return new constructor()
+  const environmentConfig = existsSync(path) ? require(path) : baseConfig
+  return environmentConfig
 }
 
 module.exports = {
   config,
   devServer,
-  environment: createEnvironment(),
-  Environment,
-  loaders
+  webpackConfig: webpackConfig(),
+  baseConfig,
+  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/babel.js

@@ -1,12 +1,14 @@
 const { resolve } = require('path')
 const { realpathSync } = require('fs')
-const { source_path: sourcePath, additional_paths: additionalPaths } = require('../config')
-const { nodeEnv } = require('../env')
 
-// Process application Javascript code with Babel.
-// Uses application .babelrc to apply any transformations
+const {
+  source_path: sourcePath,
+  additional_paths: additionalPaths
+} = require('../config')
+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)
@@ -17,11 +19,11 @@ module.exports = {
   exclude: /node_modules/,
   use: [
     {
-      loader: 'babel-loader',
+      loader: require.resolve('babel-loader'),
       options: {
         cacheDirectory: true,
-        cacheCompression: nodeEnv === 'production',
-        compact: nodeEnv === 'production'
+        cacheCompression: isProduction,
+        compact: isProduction
       }
     }
   ]

data/package/rules/coffee.js

@@ -0,0 +1,6 @@
+const { canProcess } = require('../utils/helpers')
+
+module.exports = canProcess('coffee-loader', (resolvedPath) => ({
+  test: /\.coffee(\.erb)?$/,
+  use: [{ loader: resolvedPath }]
+}))

data/package/rules/erb.js

@@ -0,0 +1,15 @@
+const { canProcess } = require('../utils/helpers')
+
+const runner = /^win/.test(process.platform) ? 'ruby ' : ''
+
+module.exports = canProcess('rails-erb-loader', (resolvedPath) => ({
+  test: /\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: resolvedPath,
+      options: { runner: `${runner}bin/rails runner` }
+    }
+  ]
+}))

data/package/rules/file.js

@@ -1,21 +1,23 @@
-const { join, normalize } = require('path')
-const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
-
 module.exports = {
-  test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
-  use: [
-    {
-      loader: 'file-loader',
-      options: {
-        name(file) {
-          if (file.includes(normalize(sourcePath))) {
-            return 'media/[path][name]-[hash].[ext]'
-          }
-          return 'media/[folder]/[name]-[hash:8].[ext]'
-        },
-        esModule: false,
-        context: join(sourcePath)
-      }
-    }
-  ]
+  test: [
+    /\.bmp$/,
+    /\.gif$/,
+    /\.jpe?g$/,
+    /\.png$/,
+    /\.tiff$/,
+    /\.ico$/,
+    /\.avif$/,
+    /\.webp$/,
+    /\.eot$/,
+    /\.otf$/,
+    /\.ttf$/,
+    /\.woff$/,
+    /\.woff2$/,
+    /\.svg$/
+  ],
+  exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+  type: 'asset/resource',
+  generator: {
+    filename: 'static/[name]-[hash][ext][query]'
+  }
 }

data/package/rules/index.js

@@ -1,20 +1,18 @@
-const babel = require('./babel')
-const file = require('./file')
-const css = require('./css')
-const sass = require('./sass')
-const moduleCss = require('./module.css')
-const moduleSass = require('./module.sass')
-const nodeModules = require('./node_modules')
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
 
-// Webpack loaders are processed in reverse order
-// https://webpack.js.org/concepts/loaders/#loader-features
-// Lastly, process static files using file loader
-module.exports = {
-  file,
-  css,
-  sass,
-  moduleCss,
-  moduleSass,
-  nodeModules,
-  babel
+const rules = {
+  raw: require('./raw'),
+  file: require('./file'),
+  css: require('./css'),
+  sass: require('./sass'),
+  babel: require('./babel'),
+  erb: require('./erb'),
+  coffee: require('./coffee'),
+  less: require('./less'),
+  stylus: require('./stylus')
 }
+
+module.exports = Object.keys(rules)
+  .filter((key) => !!rules[key])
+  .map((key) => rules[key])

data/package/rules/less.js

@@ -0,0 +1,22 @@
+const path = require('path')
+const { canProcess } = require('../utils/helpers')
+const getStyleRule = require('../utils/get_style_rule')
+
+const {
+  additional_paths: paths,
+  source_path: sourcePath
+} = require('../config')
+
+module.exports = canProcess('less-loader', (resolvedPath) =>
+  getStyleRule(/\.(less)(\.erb)?$/i, [
+    {
+      loader: resolvedPath,
+      options: {
+        lessOptions: {
+          paths: [path.resolve(__dirname, 'node_modules'), sourcePath, ...paths]
+        },
+        sourceMap: true
+      }
+    }
+  ])
+)

data/package/rules/raw.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: [/\.html$/],
+  exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+  type: 'asset/source'
+}

data/package/rules/sass.js

@@ -1,17 +1,16 @@
 /* eslint global-require: 0 */
 
 const getStyleRule = require('../utils/get_style_rule')
+const { canProcess } = require('../utils/helpers')
 const { additional_paths: includePaths } = require('../config')
 
-module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
-  {
-    loader: 'sass-loader',
-    options: {
-      sourceMap: true,
-      implementation: require('sass'),
-      sassOptions: {
-        includePaths
+module.exports = canProcess('sass-loader', (resolvedPath) =>
+  getStyleRule(/\.(scss|sass)(\.erb)?$/i, [
+    {
+      loader: resolvedPath,
+      options: {
+        sassOptions: { includePaths }
       }
     }
-  }
-])
+  ])
+)

data/package/rules/stylus.js

@@ -0,0 +1,26 @@
+const path = require('path')
+const { canProcess } = require('../utils/helpers')
+const getStyleRule = require('../utils/get_style_rule')
+
+const {
+  additional_paths: paths,
+  source_path: sourcePath
+} = require('../config')
+
+module.exports = canProcess('stylus-loader', (resolvedPath) =>
+  getStyleRule(/\.(styl(us)?)(\.erb)?$/i, [
+    {
+      loader: resolvedPath,
+      options: {
+        stylusOptions: {
+          include: [
+            path.resolve(__dirname, 'node_modules'),
+            sourcePath,
+            ...paths
+          ]
+        },
+        sourceMap: true
+      }
+    }
+  ])
+)

data/package/utils/get_style_rule.js

@@ -1,45 +1,37 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { resolve } = require('path')
-const config = require('../config')
+/* eslint global-require: 0 */
+const { canProcess, moduleExists } = require('./helpers')
+const inliningCss = require('../inliningCss')
 
-const styleLoader = {
-  loader: 'style-loader'
-}
+const getStyleRule = (test, preprocessors = []) => {
+  if (moduleExists('css-loader')) {
+    const tryPostcss = () =>
+      canProcess('postcss-loader', (loaderPath) => ({
+        loader: loaderPath,
+        options: { sourceMap: true }
+      }))
 
-const getStyleRule = (test, modules = false, preprocessors = []) => {
-  const use = [
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: true,
-        importLoaders: 2,
-        modules: modules ? {
-          localIdentName: '[name]__[local]___[hash:base64:5]'
-        } : false
-      }
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        config: { path: resolve() },
-        sourceMap: true
-      }
-    },
-    ...preprocessors
-  ]
+    // style-loader is required when using css modules with HMR on the webpack-dev-server
 
-  const options = modules ? { include: /\.module\.[a-z]+$/ } : { exclude: /\.module\.[a-z]+$/ }
+    const use = [
+      inliningCss ? 'style-loader' : require('mini-css-extract-plugin').loader,
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          sourceMap: true,
+          importLoaders: 2
+        }
+      },
+      tryPostcss(),
+      ...preprocessors
+    ].filter(Boolean)
 
-  if (config.extract_css) {
-    use.unshift(MiniCssExtractPlugin.loader)
-  } else {
-    use.unshift(styleLoader)
+    return {
+      test,
+      use
+    }
   }
 
-  // sideEffects - See https://github.com/webpack/webpack/issues/6571
-  return {
-    test, use, sideEffects: !modules, ...options
-  }
+  return null
 }
 
 module.exports = getStyleRule

data/package/utils/helpers.js

@@ -1,30 +1,5 @@
-const { stringify } = require('flatted')
-
-const isObject = (value) => typeof value === 'object'
-  && value !== null
-  && (value.length === undefined || value.length === null)
-
-const isNotObject = (value) => !isObject(value)
-
-const isBoolean = (str) => /^true/.test(str) || /^false/.test(str)
-
-const isEmpty = (value) => value === null || value === undefined
-
-const isString = (key) => key && typeof key === 'string'
-
-const isStrPath = (key) => {
-  if (!isString(key)) throw new Error(`Key ${key} should be string`)
-  return isString(key) && key.includes('.')
-}
-
 const isArray = (value) => Array.isArray(value)
-
-const isEqual = (target, source) => stringify(target) === stringify(source)
-
-const canMerge = (value) => isObject(value) || isArray(value)
-
-const prettyPrint = (obj) => JSON.stringify(obj, null, 2)
-
+const isBoolean = (str) => /^true/.test(str) || /^false/.test(str)
 const chdirTestApp = () => {
   try {
     return process.chdir('test/test_app')
@@ -41,18 +16,36 @@ const resetEnv = () => {
 
 const ensureTrailingSlash = (path) => (path.endsWith('/') ? path : `${path}/`)
 
+const resolvedPath = (packageName) => {
+  try {
+    return require.resolve(packageName)
+  } catch (e) {
+    if (e.code !== 'MODULE_NOT_FOUND') {
+      throw e
+    }
+    return null
+  }
+}
+
+const moduleExists = (packageName) => (!!resolvedPath(packageName))
+
+const canProcess = (rule, fn) => {
+  const modulePath = resolvedPath(rule)
+
+  if (modulePath) {
+    return fn(modulePath)
+  }
+
+  return null
+}
+
 module.exports = {
   chdirTestApp,
   chdirCwd,
-  ensureTrailingSlash,
-  isObject,
-  isNotObject,
-  isBoolean,
   isArray,
-  isEqual,
-  isEmpty,
-  isStrPath,
-  canMerge,
-  prettyPrint,
+  isBoolean,
+  ensureTrailingSlash,
+  canProcess,
+  moduleExists,
   resetEnv
 }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "5.4.0",
+  "version": "6.0.0-rc.6",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,56 +8,36 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.17.0",
-    "yarn": ">=1 <3"
+    "node": ">= 12.13.0 || >=14",
+    "yarn": ">=1 <4"
   },
   "dependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-destructuring": "^7.13.17",
-    "@babel/plugin-transform-regenerator": "^7.13.15",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/runtime": "^7.14.0",
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/runtime": "^7.15.4",
     "babel-loader": "^8.2.2",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-macros": "^2.8.0",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "compression-webpack-plugin": "^4.0.1",
-    "core-js": "^3.12.1",
-    "css-loader": "^3.6.0",
-    "file-loader": "^6.2.0",
-    "flatted": "^3.1.1",
-    "glob": "^7.1.7",
-    "js-yaml": "^3.14.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.6",
+    "compression-webpack-plugin": "^9.0.0",
+    "glob": "^7.2.0",
+    "js-yaml": "^4.1.0",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.6.4",
-    "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-safe-parser": "^4.0.2",
-    "regenerator-runtime": "^0.13.7",
-    "sass": "^1.32.13",
-    "sass-loader": "10.1.1",
-    "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.46.0",
-    "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-sources": "^1.4.3"
+    "pnp-webpack-plugin": "^1.7.0",
+    "terser-webpack-plugin": "^5.2.4",
+    "webpack": "^5.53.0",
+    "webpack-assets-manifest": "^5.0.6",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-sources": "^3.2.1"
   },
   "devDependencies": {
-    "eslint": "^7.26.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.23.2",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "jest": "^26.6.3"
+    "eslint-plugin-react": "^7.26.0",
+    "jest": "^27.2.1"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",