shakapacker 6.0.0.rc.6

data/package/__tests__/env.js

@@ -0,0 +1,58 @@
+/* global test expect, describe */
+
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Env', () => {
+  beforeEach(() => jest.resetModules())
+  afterAll(chdirCwd)
+
+  test('with NODE_ENV and RAILS_ENV set to development', () => {
+    process.env.RAILS_ENV = 'development'
+    process.env.NODE_ENV = 'development'
+    expect(require('../env')).toEqual({
+      railsEnv: 'development',
+      nodeEnv: 'development',
+      isProduction: false,
+      isDevelopment: true,
+      runningWebpackDevServer: false
+    })
+  })
+
+  test('with undefined NODE_ENV and RAILS_ENV set to development', () => {
+    process.env.RAILS_ENV = 'development'
+    delete process.env.NODE_ENV
+    expect(require('../env')).toEqual({
+      railsEnv: 'development',
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false,
+      runningWebpackDevServer: false
+    })
+  })
+
+  test('with undefined NODE_ENV and RAILS_ENV', () => {
+    delete process.env.NODE_ENV
+    delete process.env.RAILS_ENV
+    expect(require('../env')).toEqual({
+      railsEnv: 'production',
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false,
+      runningWebpackDevServer: false
+    })
+  })
+
+  test('with a non-standard environment', () => {
+    process.env.RAILS_ENV = 'staging'
+    process.env.NODE_ENV = 'staging'
+    expect(require('../env')).toEqual({
+      railsEnv: 'staging',
+      nodeEnv: 'production',
+      isProduction: true,
+      isDevelopment: false,
+      runningWebpackDevServer: false
+    })
+  })
+})

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/__tests__/production.js

@@ -0,0 +1,29 @@
+/* test expect, describe, afterAll, beforeEach */
+
+const { resolve } = require('path')
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Production environment', () => {
+  afterAll(chdirCwd)
+
+  describe('webpackConfig', () => {
+    beforeEach(() => jest.resetModules())
+
+    test('should use production config and environment', () => {
+      process.env.RAILS_ENV = 'production'
+      process.env.NODE_ENV = 'production'
+
+      const { webpackConfig } = require('../index')
+
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+
+      expect(webpackConfig).toMatchObject({
+        devtool: 'source-map',
+        stats: 'normal'
+      })
+    })
+  })
+})

data/package/__tests__/staging.js

@@ -0,0 +1,30 @@
+/* test expect, describe, afterAll, beforeEach */
+
+const { resolve } = require('path')
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Custom environment', () => {
+  afterAll(chdirCwd)
+
+  describe('webpackConfig', () => {
+    beforeEach(() => jest.resetModules())
+
+    test('should use staging config and default production environment', () => {
+      process.env.RAILS_ENV = 'staging'
+      delete process.env.NODE_ENV
+
+      const { webpackConfig } = require('../index')
+
+      expect(webpackConfig.output.path).toEqual(
+        resolve('public', 'packs-staging')
+      )
+      expect(webpackConfig.output.publicPath).toEqual('/packs-staging/')
+      expect(webpackConfig).toMatchObject({
+        devtool: 'source-map',
+        stats: 'normal'
+      })
+    })
+  })
+})

data/package/__tests__/test.js

@@ -0,0 +1,25 @@
+/* test expect, describe, afterAll, beforeEach */
+
+const { resolve } = require('path')
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Test environment', () => {
+  afterAll(chdirCwd)
+
+  describe('toWebpackConfig', () => {
+    beforeEach(() => jest.resetModules())
+
+    test('should use test config and production environment', () => {
+      process.env.RAILS_ENV = 'test'
+      process.env.NODE_ENV = 'test'
+
+      const { webpackConfig } = require('../index')
+
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs-test'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs-test/')
+      expect(webpackConfig.devServer).toEqual(undefined)
+    })
+  })
+})

data/package/babel/preset.js

@@ -0,0 +1,41 @@
+const { moduleExists } = require('@shakacode/shakapacker')
+
+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' } }],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: '3.8',
+          modules: 'auto',
+          bugfixes: true,
+          loose: true,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      moduleExists('@babel/preset-typescript') && [
+        '@babel/preset-typescript',
+        { allExtensions: true, isTSX: true }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      ['@babel/plugin-transform-runtime', { helpers: false }]
+    ].filter(Boolean)
+  }
+}

data/package/config.js

@@ -0,0 +1,32 @@
+const { resolve } = require('path')
+const { load } = require('js-yaml')
+const { readFileSync } = require('fs')
+const { merge } = require('webpack-merge')
+const { ensureTrailingSlash } = require('./utils/helpers')
+const { railsEnv } = require('./env')
+const configPath = require('./configPath')
+
+const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
+
+const getDefaultConfig = () => {
+  const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
+  return defaultConfig[railsEnv] || defaultConfig.production
+}
+
+const defaults = getDefaultConfig()
+const app = load(readFileSync(configPath), 'utf8')[railsEnv]
+
+const config = merge(defaults, app)
+config.outputPath = resolve(config.public_root_path, config.public_output_path)
+
+// Ensure that the publicPath includes our asset host so dynamic imports
+// (code-splitting chunks and static assets) load from the CDN instead of a relative path.
+const getPublicPath = () => {
+  const rootUrl = ensureTrailingSlash(process.env.WEBPACKER_ASSET_HOST || '/')
+  return `${rootUrl}${config.public_output_path}/`
+}
+
+config.publicPath = getPublicPath()
+config.publicPathWithoutCDN = `/${config.public_output_path}/`
+
+module.exports = config

data/package/configPath.js

@@ -0,0 +1,3 @@
+const { resolve } = require('path')
+
+module.exports = process.env.WEBPACKER_CONFIG || resolve('config', 'webpacker.yml')

data/package/dev_server.js

@@ -0,0 +1,20 @@
+const { isBoolean } = require('./utils/helpers')
+const config = require('./config')
+
+const fetch = (key) => {
+  const value = process.env[key]
+  return isBoolean(value) ? JSON.parse(value) : value
+}
+
+const devServerConfig = config.dev_server
+
+if (devServerConfig) {
+  const envPrefix = config.dev_server.env_prefix || 'WEBPACKER_DEV_SERVER'
+
+  Object.keys(devServerConfig).forEach((key) => {
+    const envValue = fetch(`${envPrefix}_${key.toUpperCase()}`)
+    if (envValue !== undefined) devServerConfig[key] = envValue
+  })
+}
+
+module.exports = devServerConfig || {}

data/package/env.js

@@ -0,0 +1,27 @@
+const { load } = require('js-yaml')
+const { readFileSync } = require('fs')
+
+const NODE_ENVIRONMENTS = ['development', 'production', 'test']
+const DEFAULT = 'production'
+const configPath = require('./configPath')
+
+const railsEnv = process.env.RAILS_ENV
+const rawNodeEnv = process.env.NODE_ENV
+const nodeEnv
+  = rawNodeEnv && NODE_ENVIRONMENTS.includes(rawNodeEnv) ? rawNodeEnv : DEFAULT
+const isProduction = nodeEnv === 'production'
+const isDevelopment = nodeEnv === 'development'
+
+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,
+  runningWebpackDevServer
+}

data/package/environments/__tests__/base.js

@@ -0,0 +1,69 @@
+/* global test expect, describe, afterAll, beforeEach */
+
+// environment.js expects to find config/webpacker.yml and resolved modules from
+// the root of a Rails project
+
+const { chdirTestApp, chdirCwd } = require('../../utils/helpers')
+
+chdirTestApp()
+
+const { resolve } = require('path')
+const rules = require('../../rules')
+const baseConfig = require('../base')
+
+describe('Base config', () => {
+  afterAll(chdirCwd)
+
+  describe('config', () => {
+    test('should return entry', () => {
+      expect(baseConfig.entry.application).toEqual(
+        resolve('app', 'packs', 'entrypoints', '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')
+      ])
+    })
+
+    test('should return output', () => {
+      expect(baseConfig.output.filename).toEqual('js/[name].js')
+      expect(baseConfig.output.chunkFilename).toEqual(
+        'js/[name].chunk.js'
+      )
+    })
+
+    test('should return default loader rules for each file in config/loaders', () => {
+      const defaultRules = Object.keys(rules)
+      const configRules = baseConfig.module.rules
+
+      expect(defaultRules.length).toEqual(3)
+      expect(configRules.length).toEqual(3)
+    })
+
+    test('should return default plugins', () => {
+      expect(baseConfig.plugins.length).toEqual(2)
+    })
+
+    test('should return default resolveLoader', () => {
+      expect(baseConfig.resolveLoader.modules).toEqual(['node_modules'])
+    })
+
+    test('should return default resolve.modules with additions', () => {
+      expect(baseConfig.resolve.modules).toEqual([
+        resolve('app', 'packs'),
+        resolve('app/assets'),
+        resolve('/etc/yarn'),
+        resolve('some.config.js'),
+        resolve('app/elm'),
+        'node_modules'
+      ])
+    })
+
+    test('returns plugins property as Array', () => {
+      expect(baseConfig.plugins).toBeInstanceOf(Array)
+    })
+  })
+})

data/package/environments/base.js

@@ -0,0 +1,116 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+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 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')
+
+const getEntryObject = () => {
+  const entries = {}
+  const rootPath = join(config.source_path, config.source_entry_path)
+
+  globSync(`${rootPath}/*.*`).forEach((path) => {
+    const namespace = relative(join(rootPath), dirname(path))
+    const name = join(namespace, basename(path, extname(path)))
+    let assetPaths = resolve(path)
+
+    // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/)
+    // Transforms the config object value to an array with all values under the same name
+    let previousPaths = entries[name]
+    if (previousPaths) {
+      previousPaths = Array.isArray(previousPaths)
+        ? previousPaths
+        : [previousPaths]
+      previousPaths.push(assetPaths)
+      assetPaths = previousPaths
+    }
+
+    entries[name] = assetPaths
+  })
+
+  return entries
+}
+
+const getModulePaths = () => {
+  const result = [resolve(config.source_path)]
+
+  if (config.additional_paths) {
+    config.additional_paths.forEach((path) => result.push(resolve(path)))
+  }
+  result.push('node_modules')
+
+  return result
+}
+
+const getPlugins = () => {
+  const plugins = [
+    new webpack.EnvironmentPlugin(process.env),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      output: 'manifest.json',
+      entrypointsUseAssets: true,
+      publicPath: true
+    })
+  ]
+
+  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]${hash}.css`,
+        chunkFilename: `css/[id]${hash}.css`
+      })
+    )
+  }
+
+  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]${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
+  },
+  entry: getEntryObject(),
+  resolve: {
+    extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.coffee'],
+    modules: getModulePaths(),
+    plugins: [PnpWebpackPlugin]
+  },
+
+  plugins: getPlugins(),
+
+  resolveLoader: {
+    modules: ['node_modules'],
+    plugins: [PnpWebpackPlugin.moduleLoader(module)]
+  },
+
+  optimization: {
+    splitChunks: { chunks: 'all' },
+
+    runtimeChunk: 'single'
+  },
+
+  module: {
+    strictExportPresence: true,
+    rules
+  }
+}

data/package/environments/development.js

@@ -0,0 +1,55 @@
+const { merge } = require('webpack-merge')
+
+const baseConfig = require('./base')
+const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../env')
+
+const { outputPath: contentBase, publicPath } = require('../config')
+
+let devConfig = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map'
+}
+
+if (runningWebpackDevServer) {
+  const liveReload = devServer.live_reload !== undefined ? devServer.live_reload : !devServer.hmr
+
+  const devServerConfig = {
+    devMiddleware: {
+      publicPath
+    },
+    compress: devServer.compress,
+    allowedHosts: devServer.allowed_hosts,
+    host: devServer.host,
+    port: devServer.port,
+    https: devServer.https,
+    hot: devServer.hmr,
+    liveReload,
+    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
+  })
+}
+
+module.exports = merge(baseConfig, devConfig)

data/package/environments/production.js

@@ -0,0 +1,79 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+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 = []
+
+  plugins.push(
+    new CompressionPlugin({
+      filename: '[path][base].gz[query]',
+      algorithm: 'gzip',
+      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 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
+          }
+        }
+      })
+    ].filter(Boolean)
+  }
+}
+
+module.exports = merge(baseConfig, productionConfig)

data/package/environments/test.js

@@ -0,0 +1,3 @@
+const baseConfig = require('./base')
+
+module.exports = baseConfig

data/package/index.js

@@ -0,0 +1,33 @@
+/* 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 config = require('./config')
+const devServer = require('./dev_server')
+const env = require('./env')
+const { moduleExists, canProcess } = require('./utils/helpers')
+const inliningCss = require('./inliningCss')
+
+const webpackConfig = () => {
+  const { nodeEnv } = env
+  const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
+  const environmentConfig = existsSync(path) ? require(path) : baseConfig
+  return environmentConfig
+}
+
+module.exports = {
+  config,
+  devServer,
+  webpackConfig: webpackConfig(),
+  baseConfig,
+  env,
+  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

@@ -0,0 +1,30 @@
+const { resolve } = require('path')
+const { realpathSync } = require('fs')
+
+const {
+  source_path: sourcePath,
+  additional_paths: additionalPaths
+} = require('../config')
+const { isProduction } = require('../env')
+
+module.exports = {
+  test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
+  include: [sourcePath, ...additionalPaths].map((p) => {
+    try {
+      return realpathSync(p)
+    } catch (e) {
+      return resolve(p)
+    }
+  }),
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        cacheDirectory: true,
+        cacheCompression: isProduction,
+        compact: isProduction
+      }
+    }
+  ]
+}