shakapacker 6.6.0 → 7.0.0.rc.0

data/package/config.js

@@ -1,12 +1,16 @@
 const { resolve } = require('path')
 const { load } = require('js-yaml')
-const { readFileSync } = require('fs')
+const { existsSync, readFileSync } = require('fs')
+
 const { merge } = require('webpack-merge')
-const { ensureTrailingSlash } = require('./utils/helpers')
+const {
+  ensureTrailingSlash,
+  setShakapackerEnvVariablesForBackwardCompatibility
+} = require('./utils/helpers')
 const { railsEnv } = require('./env')
-const configPath = require('./configPath')
+const configPath = require('./utils/configPath')
 
-const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
+const defaultConfigPath = require('./utils/defaultConfigPath')
 
 const getDefaultConfig = () => {
   const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
@@ -14,15 +18,29 @@ const getDefaultConfig = () => {
 }
 
 const defaults = getDefaultConfig()
-const app = load(readFileSync(configPath), 'utf8')[railsEnv]
+let config
+
+if (existsSync(configPath)) {
+  const appYmlObject = load(readFileSync(configPath), 'utf8')
+  const envAppConfig = appYmlObject[railsEnv]
+
+  if (!envAppConfig) {
+    /* eslint no-console:0 */
+    console.warn(`Warning: ${railsEnv} key not found in the configuration file. Using production configuration as a fallback.`)
+  }
+
+  config = merge(defaults, envAppConfig || {})
+} else {
+  config = merge(defaults, {})
+}
 
-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 || '/')
+  setShakapackerEnvVariablesForBackwardCompatibility()
+  const rootUrl = ensureTrailingSlash(process.env.SHAKAPACKER_ASSET_HOST || '/')
   return `${rootUrl}${config.public_output_path}/`
 }
 

data/package/dev_server.js

@@ -1,7 +1,8 @@
+// These are the raw webpacker dev server config settings from the YML file with ENV overrides applied.
 const { isBoolean } = require('./utils/helpers')
 const config = require('./config')
 
-const fetch = (key) => {
+const envFetch = (key) => {
   const value = process.env[key]
   return isBoolean(value) ? JSON.parse(value) : value
 }
@@ -9,11 +10,13 @@ const fetch = (key) => {
 const devServerConfig = config.dev_server
 
 if (devServerConfig) {
-  const envPrefix = config.dev_server.env_prefix || 'WEBPACKER_DEV_SERVER'
+  const envPrefix = config.dev_server.env_prefix || 'SHAKAPACKER_DEV_SERVER'
 
   Object.keys(devServerConfig).forEach((key) => {
-    const envValue = fetch(`${envPrefix}_${key.toUpperCase()}`)
-    if (envValue !== undefined) devServerConfig[key] = envValue
+    const envValue = envFetch(`${envPrefix}_${key.toUpperCase()}`)
+    if (envValue !== undefined) {
+      devServerConfig[key] = envValue
+    }
   })
 }
 

data/package/env.js

@@ -1,9 +1,10 @@
 const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
+const defaultConfigPath = require('./utils/defaultConfigPath')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
 const DEFAULT = 'production'
-const configPath = require('./configPath')
+const configPath = require('./utils/configPath')
 
 const railsEnv = process.env.RAILS_ENV
 const rawNodeEnv = process.env.NODE_ENV
@@ -12,14 +13,32 @@ const nodeEnv
 const isProduction = nodeEnv === 'production'
 const isDevelopment = nodeEnv === 'development'
 
-const config = load(readFileSync(configPath), 'utf8')
+let config
+try {
+  config = load(readFileSync(configPath), 'utf8')
+} catch (error) {
+  if (error.code === 'ENOENT') {
+    // File not found, use default configuration
+    config = load(readFileSync(defaultConfigPath), 'utf8')
+  } else {
+    throw error
+  }
+}
+
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
 const runningWebpackDevServer = process.env.WEBPACK_SERVE === 'true'
 
+const validatedRailsEnv = railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT
+
+if (railsEnv && validatedRailsEnv !== railsEnv) {
+  /* eslint no-console:0 */
+  console.warn(`Warning: '${railsEnv}' environment not found in the configuration. Using '${DEFAULT}' configuration as a fallback.`)
+}
+
 module.exports = {
-  railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
+  railsEnv: validatedRailsEnv,
   nodeEnv,
   isProduction,
   isDevelopment,

data/package/environments/__tests__/base-bc.js

@@ -0,0 +1,107 @@
+/* global test expect, describe, afterAll, beforeEach */
+
+// environment.js expects to find config/webapacker.yml and resolved modules from
+// the root of a Rails project
+
+const { resetEnv, chdirWebpackerTestApp } = require('../../utils/helpers')
+
+const rootPath = process.cwd()
+chdirWebpackerTestApp()
+
+const { resolve } = require('path')
+
+const baseConfig = require('../base')
+const config = require("../../config");
+
+describe('Base config', () => {
+  beforeEach(() => jest.resetModules() && resetEnv())
+  afterAll(() => process.chdir(rootPath))
+
+  describe('config', () => {
+    test('should return entry', () => {
+      expect(baseConfig.entry.application).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'application.js')
+      )
+    })
+
+    test('should return false for css_extract_ignore_order_warnings when using default config', () => {
+      expect(config.css_extract_ignore_order_warnings).toEqual(false)
+    })
+
+    test('should return true for css_extract_ignore_order_warnings when configured', () => {
+      process.env.WEBPACKER_CONFIG = 'config/webpacker_css_extract_ignore_order_warnings.yml'
+      const config = require("../../config");
+
+      expect(config.css_extract_ignore_order_warnings).toEqual(true)
+    })
+
+    test('should return only 2 entry points with config.nested_entries == false', () => {
+      expect(config.nested_entries).toEqual(false)
+
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+      ])
+      expect(baseConfig.entry['generated/something']).toEqual(undefined)
+    })
+
+    test('should returns top level and nested entry points with config.nested_entries == true', () => {
+      process.env.WEBPACKER_CONFIG = 'config/webpacker_nested_entries.yml'
+      const config = require("../../config");
+      const baseConfig = require('../base')
+
+      expect(config.nested_entries).toEqual(true)
+
+      expect(baseConfig.entry.application).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'application.js')
+      )
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+      ])
+      expect(baseConfig.entry['generated/something']).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'generated', 'something.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 rules = require('../../rules')
+
+      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/__tests__/base.js

@@ -1,10 +1,11 @@
 /* global test expect, describe, afterAll, beforeEach */
 
-// environment.js expects to find config/webpacker.yml and resolved modules from
+// environment.js expects to find config/shakapacker.yml and resolved modules from
 // the root of a Rails project
 
 const { chdirTestApp, chdirCwd, resetEnv } = require('../../utils/helpers')
 
+const rootPath = process.cwd()
 chdirTestApp()
 
 const { resolve } = require('path')
@@ -14,13 +15,12 @@ const config = require("../../config");
 
 describe('Base config', () => {
   beforeEach(() => jest.resetModules() && resetEnv())
-
-  afterAll(chdirCwd)
+  afterAll(() => process.chdir(rootPath))
 
   describe('config', () => {
     test('should return entry', () => {
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'packs', 'entrypoints', 'application.js')
+        resolve('app', 'javascript', 'entrypoints', 'application.js')
       )
     })
 
@@ -29,7 +29,7 @@ describe('Base config', () => {
     })
 
     test('should return true for css_extract_ignore_order_warnings when configured', () => {
-      process.env.WEBPACKER_CONFIG = 'config/webpacker_css_extract_ignore_order_warnings.yml'
+      process.env.SHAKAPACKER_CONFIG = 'config/shakapacker_css_extract_ignore_order_warnings.yml'
       const config = require("../../config");
 
       expect(config.css_extract_ignore_order_warnings).toEqual(true)
@@ -39,28 +39,28 @@ describe('Base config', () => {
       expect(config.nested_entries).toEqual(false)
 
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+        resolve('app', 'javascript', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'javascript', 'entrypoints', 'multi_entry.js')
       ])
       expect(baseConfig.entry['generated/something']).toEqual(undefined)
     })
 
     test('should returns top level and nested entry points with config.nested_entries == true', () => {
-      process.env.WEBPACKER_CONFIG = 'config/webpacker_nested_entries.yml'
+      process.env.SHAKAPACKER_CONFIG = 'config/shakapacker_nested_entries.yml'
       const config = require("../../config");
       const baseConfig = require('../base')
 
       expect(config.nested_entries).toEqual(true)
 
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'packs', 'entrypoints', 'application.js')
+        resolve('app', 'javascript', 'entrypoints', 'application.js')
       )
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
-        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+        resolve('app', 'javascript', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'javascript', 'entrypoints', 'multi_entry.js')
       ])
       expect(baseConfig.entry['generated/something']).toEqual(
-        resolve('app', 'packs', 'entrypoints', 'generated', 'something.js')
+        resolve('app', 'javascript', 'entrypoints', 'generated', 'something.js')
       )
     })
 
@@ -91,7 +91,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

@@ -16,7 +16,7 @@ const getEntryObject = () => {
   const rootPath = join(config.source_path, config.source_entry_path)
   if (config.source_entry_path === '/' && config.nested_entries) {
     throw new Error(
-      "Your webpacker config specified using a source_entry_path of '/' with 'nested_entries' == " +
+      "Your shakapacker config specified using a source_entry_path of '/' with 'nested_entries' == " +
       "'true'. Doing this would result in packs for every one of your source files"
     )
   }

data/package/environments/development.js

@@ -1,55 +1,13 @@
 const { merge } = require('webpack-merge')
 
 const baseConfig = require('./base')
-const devServer = require('../dev_server')
+const webpackDevServerConfig  = require('../webpackDevServerConfig')
 const { runningWebpackDevServer } = require('../env')
 
-const { outputPath: contentBase, publicPath } = require('../config')
-
-let devConfig = {
+const 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
-  })
+  devtool: 'cheap-module-source-map',
+  ...(runningWebpackDevServer && { devServer: webpackDevServerConfig() })
 }
 
 module.exports = merge(baseConfig, devConfig)

data/package/environments/production.js

@@ -52,7 +52,7 @@ const productionConfig = {
     minimizer: [
       tryCssMinimizer(),
       new TerserPlugin({
-        parallel: Number.parseInt(process.env.WEBPACKER_PARALLEL, 10) || true,
+        parallel: Number.parseInt(process.env.SHAKAPACKER_PARALLEL, 10) || true,
         terserOptions: {
           parse: {
             // Let terser parse ecma 8 code but always output

data/package/index.js

@@ -10,19 +10,26 @@ const config = require('./config')
 const devServer = require('./dev_server')
 const env = require('./env')
 const { moduleExists, canProcess } = require('./utils/helpers')
-const inliningCss = require('./inliningCss')
+const inliningCss = require('./utils/inliningCss')
 
-const webpackConfig = () => {
+const globalMutableWebpackConfig = () => {
   const { nodeEnv } = env
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
   const environmentConfig = existsSync(path) ? require(path) : baseConfig
   return environmentConfig
 }
 
+const generateWebpackConfig = () => {
+  const environmentConfig = globalMutableWebpackConfig()
+  const immutable = webpackMerge.merge({}, environmentConfig)
+  return immutable
+}
+
 module.exports = {
-  config,
+  config, // shakapacker.yml
   devServer,
-  webpackConfig: webpackConfig(),
+  generateWebpackConfig,
+  globalMutableWebpackConfig: globalMutableWebpackConfig(),
   baseConfig,
   env,
   rules,

data/package/rules/__tests__/__utils__/webpack.js

@@ -16,7 +16,7 @@ const createTrackLoader = () => {
 
 const node_modules = path.resolve("node_modules");
 const node_modules_included = path.resolve("node_modules/included");
-const app_javascript = path.resolve("app/packs");
+const app_javascript = path.resolve("app/javascript");
 
 const createInMemoryFs = () => {
   const fs = new MemoryFS();

data/package/rules/__tests__/file.js

@@ -32,4 +32,31 @@ describe('file', () => {
     ]
     types.forEach(type => expect(file.exclude.test(type)).toBe(true))
   })
+
+  test('correct generated output path is returned for top level files', () => {
+    const pathData = {
+      filename: 'app/javascript/image.svg',
+    };
+    expect(file.generator.filename(pathData)).toEqual(
+      'static/[name]-[hash][ext][query]'
+    );
+  });
+
+  test('correct generated output path is returned for nested files', () => {
+    const pathData = {
+      filename: 'app/javascript/images/image.svg',
+    };
+    expect(file.generator.filename(pathData)).toEqual(
+      'static/images/[name]-[hash][ext][query]'
+    );
+  })
+
+  test('correct generated output path is returned for deeply nested files', () => {
+    const pathData = {
+      filename: 'app/javascript/images/nested/deeply/image.svg',
+    };
+    expect(file.generator.filename(pathData)).toEqual(
+      'static/images/nested/deeply/[name]-[hash][ext][query]'
+    );
+  });
 })

data/package/rules/__tests__/swc.js

@@ -1,4 +1,3 @@
-const path = require("path");
 const {
   app_javascript,
   node_modules,
@@ -36,7 +35,7 @@ const createWebpackConfig = (file, use) => {
 };
 
 describe("swc", () => {
-  test("process source path", async () => {
+  test("process files in source_path", async () => {
     const normalPath = `${app_javascript}/a.js`;
     const [tracked, loader] = createTrackLoader();
     const compiler = createTestCompiler(

data/package/rules/file.js

@@ -8,9 +8,9 @@ module.exports = {
   generator: {
     filename: (pathData) => {
       const folders = dirname(pathData.filename)
-        .replace(`${sourcePath}/`, '')
+        .replace(`${sourcePath}`, '')
         .split('/')
-        .slice(1)
+        .filter(Boolean)
 
       const foldersWithStatic = ['static', ...folders].join('/')
       return `${foldersWithStatic}/[name]-[hash][ext][query]`

data/package/utils/configPath.js

@@ -0,0 +1,19 @@
+const fs = require('fs')
+const { resolve } = require('path')
+const { setShakapackerEnvVariablesForBackwardCompatibility } = require('./helpers')
+
+setShakapackerEnvVariablesForBackwardCompatibility()
+
+// For backward compatibility
+const resolveToPhysicalFilePath = () => {
+  const shakapackerConfigPath = resolve('config', 'shakapacker.yml')
+  const webpackerConfigPath = resolve('config', 'webpacker.yml')
+
+  if (fs.existsSync(shakapackerConfigPath)) return shakapackerConfigPath
+  if (fs.existsSync(webpackerConfigPath)) return webpackerConfigPath
+
+  // If neither of files exist, try to resolve to shakapacker.yml to get more relevant error
+  return shakapackerConfigPath
+}
+
+module.exports = process.env.SHAKAPACKER_CONFIG || resolveToPhysicalFilePath()

data/package/utils/defaultConfigPath.js

@@ -0,0 +1,2 @@
+const path = require.resolve('../../lib/install/config/shakapacker.yml')
+module.exports = path

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 inliningCss = require('./inliningCss')
 
 const getStyleRule = (test, preprocessors = []) => {
   if (moduleExists('css-loader')) {
@@ -18,7 +18,10 @@ const getStyleRule = (test, preprocessors = []) => {
         loader: require.resolve('css-loader'),
         options: {
           sourceMap: true,
-          importLoaders: 2
+          importLoaders: 2,
+          modules: {
+            auto: true
+          }
         }
       },
       tryPostcss(),

data/package/utils/helpers.js

@@ -8,6 +8,15 @@ const chdirTestApp = () => {
   }
 }
 
+// For backward compatibility
+const chdirWebpackerTestApp = () => {
+  try {
+    return process.chdir('spec/backward_compatibility_specs/webpacker_test_app')
+  } catch (e) {
+    return null
+  }
+}
+
 const chdirCwd = () => process.chdir(process.cwd())
 
 const resetEnv = () => {
@@ -48,15 +57,29 @@ const loaderMatches = (configLoader, loaderToCheck, fn) => {
 
   if (!moduleExists(loaderName)) {
     throw new Error(
-      `Your webpacker config specified using ${configLoader}, but ${loaderName} package is not installed. Please install ${loaderName} first.`
+      `Your Shakapacker config specified using ${configLoader}, but ${loaderName} package is not installed. Please install ${loaderName} first.`
     )
   }
 
   return fn()
 }
 
+// For backward compatibility
+// Set SHAKAPACKER_XYZ only if SHAKAPACKER_XYZ is not defined but WEBPACKER_XYZ is.
+const setShakapackerEnvVariablesForBackwardCompatibility = () => {
+  const webpackerEnvVariables = Object.entries(process.env).filter((key) => /^WEBPACKER_/.test(key))
+  webpackerEnvVariables.forEach(([webpackerEnvKey, webpackerEnvValue]) => {
+    const shakapackerKey = webpackerEnvKey.replace(/^WEBPACKER/, 'SHAKAPACKER')
+    if (!process.env[shakapackerKey]) {
+      process.env[shakapackerKey] = webpackerEnvValue
+    }
+  })
+}
+
 module.exports = {
   chdirTestApp,
+  chdirWebpackerTestApp,
+  setShakapackerEnvVariablesForBackwardCompatibility,
   chdirCwd,
   isArray,
   isBoolean,

data/package/utils/inliningCss.js

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

data/package/utils/snakeToCamelCase

@@ -0,0 +1,7 @@
+function snakeToCamelCase(s) {
+  return s.replace(/(_\w)/g, function (match) {
+    return match[1].toUpperCase()
+  })
+}
+
+module.exports = snakeToCamelCase