webpacker 5.4.3 → 6.0.0.beta

data/package/environments/production.js

@@ -1,77 +1,72 @@
-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')
 
-module.exports = class extends Base {
-  constructor() {
-    super()
+const getPlugins = () => {
+  let compressionPlugin = new CompressionPlugin({
+    filename: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+  })
 
-    this.plugins.append(
-      'Compression',
-      new CompressionPlugin({
-        filename: '[path].gz[query]',
-        algorithm: 'gzip',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-      })
-    )
+  if ('brotli' in process.versions) {
+    compressionPlugin = new CompressionPlugin({
+      filename: '[path].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 [compressionPlugin]
+}
 
-    this.plugins.append(
-      'OptimizeCSSAssets',
-      new OptimizeCSSAssetsPlugin({
-        parser: safePostCssParser,
-        map: {
-          inline: false,
-          annotation: true
+const productionConfig = {
+  devtool: 'source-map',
+  stats: 'normal',
+  bail: true,
+  plugins: getPlugins(),
+  optimization: {
+    minimizer: [
+      () => {
+        if (
+          moduleExists('css-loader') &&
+          moduleExists('css-minimizer-webpack-plugin')
+        ) {
+          const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+          return new CssMinimizerPlugin({ sourceMap: 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
-              }
-            }
-          })
-        ]
-      }
-    })
+        return false
+      },
+
+      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
+          }
+        }
+      })
+    ].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,29 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+const { merge } = 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 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,
+  merge,
+  moduleExists,
+  canProcess
 }

data/package/rules/babel.js

@@ -1,10 +1,12 @@
 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)?$/,
   include: [sourcePath, ...additionalPaths].map((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,21 @@
-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$/,
+    /\.html$/,
+    /\.json$/
+  ],
+  exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+  type: 'asset/resource'
 }

data/package/rules/index.js

@@ -1,20 +1,17 @@
-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 = {
+  file: require('./file'),
+  svg: require('./svg'),
+  css: require('./css'),
+  sass: require('./sass'),
+  babel: require('./babel'),
+  erb: require('./erb'),
+  coffee: require('./coffee'),
+  less: require('./less')
 }
+
+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/sass.js

@@ -1,17 +1,17 @@
 /* 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 },
+        implementation: require('sass')
       }
     }
-  }
-])
+  ])
+)

data/package/rules/svg.js

@@ -0,0 +1,20 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+const { moduleExists } = require('../utils/helpers')
+
+module.exports = {
+  test: /\.svg$/i,
+  type: 'asset/inline',
+  generator: {
+    dataUrl: (content) => {
+      let optimisedContent = content
+
+      if (moduleExists('mini-svg-data-uri')) {
+        const svgToMiniDataURI = require('mini-svg-data-uri')
+        optimisedContent = svgToMiniDataURI(content.toString())
+      }
+
+      return optimisedContent
+    }
+  }
+}

data/package/utils/get_style_rule.js

@@ -1,45 +1,35 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { resolve } = require('path')
-const config = require('../config')
+/* eslint global-require: 0 */
 
-const styleLoader = {
-  loader: 'style-loader'
-}
+const { canProcess, moduleExists } = require('./helpers')
 
-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
-  ]
+const getStyleRule = (test, preprocessors = []) => {
+  if (moduleExists('css-loader')) {
+    const tryPostcss = () =>
+      canProcess('postcss-loader', (loaderPath) => ({
+        loader: loaderPath,
+        options: { sourceMap: true }
+      }))
 
-  const options = modules ? { include: /\.module\.[a-z]+$/ } : { exclude: /\.module\.[a-z]+$/ }
+    const use = [
+      { 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,34 @@ const resetEnv = () => {
 
 const ensureTrailingSlash = (path) => (path.endsWith('/') ? path : `${path}/`)
 
+const moduleExists = (packageName) => {
+  try {
+    return require.resolve(packageName)
+  } catch (e) {
+    if (e.code !== 'MODULE_NOT_FOUND') {
+      throw e
+    }
+    return null
+  }
+}
+
+const canProcess = (rule, fn) => {
+  const modulePath = moduleExists(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.3",
+  "version": "6.0.0-beta",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,56 +8,40 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.17.0",
-    "yarn": ">=1 <4"
+    "node": ">=10.22.1 || ^12 || >=14",
+    "yarn": ">=1 <3"
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-destructuring": "^7.14.7",
-    "@babel/plugin-transform-regenerator": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/runtime": "^7.15.3",
+    "@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-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.16.2",
-    "css-loader": "^3.6.0",
-    "file-loader": "^6.2.0",
-    "flatted": "^3.2.2",
-    "glob": "^7.1.7",
-    "js-yaml": "^3.14.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.8",
+    "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",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.7.0",
-    "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.9",
-    "sass": "^1.38.0",
-    "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.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"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
-    "jest": "^27.0.6"
+    "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"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/test/compiler_test.rb

@@ -23,18 +23,6 @@ class CompilerTest < Minitest::Test
     Webpacker.compiler.env = {}
   end
 
-  def test_default_watched_paths
-    assert_equal Webpacker.compiler.send(:default_watched_paths), [
-      "app/assets/**/*{.mjs,.js,.sass,.scss,.css,.module.sass,.module.scss,.module.css,.png,.svg,.gif,.jpeg,.jpg,.elm}",
-      "/etc/yarn/**/*{.mjs,.js,.sass,.scss,.css,.module.sass,.module.scss,.module.css,.png,.svg,.gif,.jpeg,.jpg,.elm}",
-      "app/elm/**/*{.mjs,.js,.sass,.scss,.css,.module.sass,.module.scss,.module.css,.png,.svg,.gif,.jpeg,.jpg,.elm}",
-      "app/javascript/**/*{.mjs,.js,.sass,.scss,.css,.module.sass,.module.scss,.module.css,.png,.svg,.gif,.jpeg,.jpg,.elm}",
-      "yarn.lock",
-      "package.json",
-      "config/webpack/**/*"
-    ]
-  end
-
   def test_freshness
     assert Webpacker.compiler.stale?
     assert !Webpacker.compiler.fresh?