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

data/package.json

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

data/package/__tests__/development.js

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

data/package/babel/preset-react.js

@@ -0,0 +1,62 @@
+module.exports = function config(api) {
+  const validEnv = ['development', 'test', 'production']
+  const currentEnv = api.env()
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: { node: 'current' },
+          modules: 'commonjs'
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: false,
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        { removeImport: true }
+      ]
+    ].filter(Boolean)
+  }
+}

data/package/babel/preset.js

@@ -1,5 +1,3 @@
-const { moduleExists } = require('@rails/webpacker')
-
 module.exports = function config(api) {
   const validEnv = ['development', 'test', 'production']
   const currentEnv = api.env()
@@ -9,15 +7,16 @@ module.exports = function config(api) {
 
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
-      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(
-        currentEnv
-      )}".`
+      `Please specify a valid NODE_ENV or BABEL_ENV environment variable. Valid values are "development", "test", and "production". Instead, received: "${JSON.stringify(currentEnv)}".`
     )
   }
 
   return {
     presets: [
-      isTestEnv && ['@babel/preset-env', { targets: { node: 'current' } }],
+      isTestEnv && [
+        '@babel/preset-env',
+        { targets: { node: 'current' } }
+      ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
         {
@@ -28,28 +27,18 @@ module.exports = function config(api) {
           loose: true,
           exclude: ['transform-typeof-symbol']
         }
-      ],
-      moduleExists('@babel/preset-typescript') && [
-        '@babel/preset-typescript',
-        { allExtensions: true, isTSX: true }
-      ],
-      moduleExists('@babel/preset-react') && [
-        '@babel/preset-react',
-        {
-          development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
       ]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
-      ['@babel/plugin-proposal-class-properties', { loose: true }],
-      ['@babel/plugin-transform-runtime', { helpers: false }],
-      isProductionEnv &&
-        moduleExists('babel-plugin-transform-react-remove-prop-types') && [
-          'babel-plugin-transform-react-remove-prop-types',
-          { removeImport: true }
-        ]
+      [
+        '@babel/plugin-proposal-class-properties',
+        { loose: true }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        { helpers: false }
+      ]
     ].filter(Boolean)
   }
 }

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', 'packs', 'entrypoints', 'application.js')
+        resolve('app', 'javascript', 'packs', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
+        resolve('app', 'javascript', 'packs', 'multi_entry.js')
       ])
     })
 
@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(3)
+      expect(baseConfig.plugins.length).toEqual(4)
     })
 
     test('should return default resolveLoader', () => {
@@ -53,7 +53,7 @@ describe('Base config', () => {
 
     test('should return default resolve.modules with additions', () => {
       expect(baseConfig.resolve.modules).toEqual([
-        resolve('app', 'packs'),
+        resolve('app', 'javascript'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         resolve('some.config.js'),

data/package/environments/base.js

@@ -4,19 +4,19 @@
 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 { sync } = 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 config = require('../config')
-const { moduleExists } = require('../utils/helpers')
+const { isDevelopment } = require('../env')
 
 const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  globSync(`${rootPath}/**/*.*`).forEach((path) => {
+  sync(`${rootPath}/**/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
@@ -52,6 +52,7 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
+    PnpWebpackPlugin,
     new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
@@ -62,14 +63,18 @@ const getPlugins = () => {
     })
   ]
 
-  if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
-    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-    plugins.push(
-      new MiniCssExtractPlugin({
-        filename: 'css/[name]-[contenthash:8].css',
-        chunkFilename: 'css/[id]-[contenthash:8].css'
-      })
-    )
+  try {
+    if (require.resolve('css-loader')) {
+      const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+      plugins.push(
+        new MiniCssExtractPlugin({
+          filename: isDevelopment ? '[name].css' : '[name].[contenthash:8].css',
+          chunkFilename: isDevelopment ? '[id].css' : '[id].[contenthash:8].css'
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to print here */
   }
 
   return plugins
@@ -81,14 +86,14 @@ module.exports = {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    assetModuleFilename: 'static/[hash][ext][query]',
     path: config.outputPath,
     publicPath: config.publicPath
   },
   entry: getEntryObject(),
   resolve: {
-    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
-    modules: getModulePaths(),
-    plugins: [PnpWebpackPlugin]
+    extensions: ['.js', '.mjs', '.ts'],
+    modules: getModulePaths()
   },
 
   plugins: getPlugins(),
@@ -101,7 +106,7 @@ module.exports = {
   optimization: {
     splitChunks: { chunks: 'all' },
 
-    runtimeChunk: 'single'
+    runtimeChunk: { name: (entrypoint) => `runtime-${entrypoint.name}` }
   },
 
   module: {

data/package/environments/development.js

@@ -34,7 +34,6 @@ 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

@@ -5,42 +5,45 @@ const { merge } = require('webpack-merge')
 const CompressionPlugin = require('compression-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const baseConfig = require('./base')
-const { moduleExists } = require('../utils/helpers')
 
 const getPlugins = () => {
-  const plugins = []
+  let compressionPlugin = new CompressionPlugin({
+    filename: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+  })
 
-  plugins.push(
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      algorithm: 'gzip',
+  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) {
-    plugins.push(
-      new CompressionPlugin({
-        filename: '[path][base].br[query]',
-        algorithm: 'brotliCompress',
-        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
-      })
-    )
   }
 
-  return plugins
-}
+  const plugins = [compressionPlugin]
 
-const tryCssMinimizer = () => {
-  if (
-    moduleExists('css-loader') &&
-    moduleExists('css-minimizer-webpack-plugin')
-  ) {
-    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-    return new CssMinimizerPlugin()
+  try {
+    if (require.resolve('css-loader')) {
+      const OptimizeCSSAssetsPlugin = require.resolve(
+        'optimize-css-assets-webpack-plugin'
+      )
+      const safePostCssParser = require.resolve('postcss-safe-parser')
+      plugins.push(
+        new OptimizeCSSAssetsPlugin({
+          parser: safePostCssParser,
+          map: {
+            inline: false,
+            annotation: true
+          }
+        })
+      )
+    }
+  } catch (e) {
+    /* Work out what to output without clutter */
   }
 
-  return null
+  return plugins
 }
 
 const productionConfig = {
@@ -50,7 +53,6 @@ const productionConfig = {
   plugins: getPlugins(),
   optimization: {
     minimizer: [
-      tryCssMinimizer(),
       new TerserPlugin({
         parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
         terserOptions: {
@@ -72,7 +74,7 @@ const productionConfig = {
           }
         }
       })
-    ].filter(Boolean)
+    ]
   }
 }
 

data/package/index.js

@@ -1,15 +1,13 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const webpackMerge = require('webpack-merge')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const baseConfig = require('./environments/base')
-const rules = require('./rules')
+const loaders = require('./rules')
 const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
-const { moduleExists, canProcess } = require('./utils/helpers')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -22,8 +20,5 @@ module.exports = {
   devServer,
   webpackConfig: webpackConfig(),
   baseConfig,
-  rules,
-  moduleExists,
-  canProcess,
-  ...webpackMerge
+  loaders
 }

data/package/rules/babel.js

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

data/package/rules/coffee.js

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

data/package/rules/erb.js

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

data/package/rules/file.js

@@ -13,11 +13,9 @@ module.exports = {
     /\.ttf$/,
     /\.woff$/,
     /\.woff2$/,
-    /\.svg$/
+    /\.html$/,
+    /\.json$/
   ],
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
-  type: 'asset/resource',
-  generator: {
-    filename: 'media/images/[hash][ext][query]'
-  }
+  type: 'asset/resource'
 }