shakapacker 8.0.2 → 9.2.0

data/package/environments/{base.js → base.ts}

@@ -1,22 +1,40 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-const { existsSync, readdirSync } = require("fs")
 const { basename, dirname, join, relative, resolve } = require("path")
+const { existsSync, readdirSync } = require("fs")
+import { Dirent } from "fs"
 const extname = require("path-complete-extname")
-const WebpackAssetsManifest = require("webpack-assets-manifest")
-const webpack = require("webpack")
-const rules = require("../rules")
+// @ts-ignore: webpack is an optional peer dependency (using type-only import)
+import type { Configuration, Entry } from "webpack"
 const config = require("../config")
 const { isProduction } = require("../env")
-const { moduleExists } = require("../utils/helpers")
 
-const getFilesInDirectory = (dir, includeNested) => {
+const pluginsPath = resolve(
+  __dirname,
+  "..",
+  "plugins",
+  `${config.assets_bundler}.js`
+)
+const { getPlugins } = require(pluginsPath)
+const rulesPath = resolve(
+  __dirname,
+  "..",
+  "rules",
+  `${config.assets_bundler}.js`
+)
+const rules = require(rulesPath)
+
+// Don't use contentHash except for production for performance
+// https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+const hash = isProduction || config.useContentHash ? "-[contenthash]" : ""
+
+const getFilesInDirectory = (dir: string, includeNested: boolean): string[] => {
   if (!existsSync(dir)) {
     return []
   }
 
-  return readdirSync(dir, { withFileTypes: true }).flatMap((dirent) => {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((dirent: Dirent) => {
     const filePath = join(dir, dirent.name)
 
     if (dirent.isDirectory() && includeNested) {
@@ -29,84 +47,56 @@ const getFilesInDirectory = (dir, includeNested) => {
   })
 }
 
-const getEntryObject = () => {
-  const entries = {}
+const getEntryObject = (): Entry => {
+  const entries: Entry = {}
   const rootPath = join(config.source_path, config.source_entry_path)
   if (config.source_entry_path === "/" && config.nested_entries) {
     throw new Error(
-      "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"
+      `Invalid Shakapacker configuration detected!\n\n` +
+      `You have set source_entry_path to '/' with nested_entries enabled.\n` +
+      `This would create webpack entry points for EVERY file in your source directory,\n` +
+      `which would severely impact build performance.\n\n` +
+      `To fix this issue, either:\n` +
+      `1. Set 'nested_entries: false' in your shakapacker.yml\n` +
+      `2. Change 'source_entry_path' to a specific subdirectory (e.g., 'packs')\n` +
+      `3. Or use both options for better organization of your entry points`
     )
   }
 
   getFilesInDirectory(rootPath, config.nested_entries).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
-    let assetPaths = resolve(path)
+    const assetPath: string = 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]
+    const previousPaths = entries[name]
     if (previousPaths) {
-      previousPaths = Array.isArray(previousPaths)
-        ? previousPaths
-        : [previousPaths]
-      previousPaths.push(assetPaths)
-      assetPaths = previousPaths
+      const pathArray = Array.isArray(previousPaths)
+        ? previousPaths as string[]
+        : [previousPaths as string]
+      pathArray.push(assetPath)
+      entries[name] = pathArray
+    } else {
+      entries[name] = assetPath
     }
-
-    entries[name] = assetPaths
   })
 
   return entries
 }
 
-const getModulePaths = () => {
+const getModulePaths = (): string[] => {
   const result = [resolve(config.source_path)]
 
   if (config.additional_paths) {
-    config.additional_paths.forEach((path) => result.push(resolve(path)))
+    config.additional_paths.forEach((path: string) => 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: config.manifestPath,
-      entrypointsUseAssets: true,
-      publicPath: config.publicPathWithoutCDN
-    })
-  ]
-
-  if (moduleExists("css-loader") && moduleExists("mini-css-extract-plugin")) {
-    const hash = isProduction || config.useContentHash ? "-[contenthash:8]" : ""
-    const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-    plugins.push(
-      new MiniCssExtractPlugin({
-        filename: `css/[name]${hash}.css`,
-        chunkFilename: `css/[id]${hash}.css`,
-        // For projects where css ordering has been mitigated through consistent use of scoping or naming conventions,
-        // the css order warnings can be disabled by setting the ignoreOrder flag.
-        // Read: https://stackoverflow.com/questions/51971857/mini-css-extract-plugin-warning-in-chunk-chunkname-mini-css-extract-plugin-con
-        ignoreOrder: config.css_extract_ignore_order_warnings
-      })
-    )
-  }
-
-  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 || config.useContentHash ? "-[contenthash]" : ""
-
-module.exports = {
+const baseConfig: Configuration = {
   mode: "production",
   output: {
     filename: `js/[name]${hash}.js`,
@@ -115,7 +105,12 @@ module.exports = {
     // https://webpack.js.org/configuration/output/#outputhotupdatechunkfilename
     hotUpdateChunkFilename: "js/[id].[fullhash].hot-update.js",
     path: config.outputPath,
-    publicPath: config.publicPath
+    publicPath: config.publicPath,
+
+    // This is required for SRI to work.
+    crossOriginLoading: config.integrity && config.integrity.enabled
+      ? (config.integrity.cross_origin as "anonymous" | "use-credentials" | false)
+      : false
   },
   entry: getEntryObject(),
   resolve: {
@@ -131,12 +126,13 @@ module.exports = {
 
   optimization: {
     splitChunks: { chunks: "all" },
-
     runtimeChunk: "single"
   },
 
   module: {
-    strictExportPresence: true,
     rules
   }
 }
+
+export = baseConfig
+

data/package/environments/development.ts

@@ -0,0 +1,90 @@
+/**
+ * Development environment configuration for webpack and rspack bundlers
+ * @module environments/development
+ */
+
+const { merge } = require("webpack-merge")
+const config = require("../config")
+const baseConfig = require("./base")
+const webpackDevServerConfig = require("../webpackDevServerConfig")
+const { runningWebpackDevServer } = require("../env")
+const { moduleExists } = require("../utils/helpers")
+import type { 
+  WebpackConfigWithDevServer,
+  RspackConfigWithDevServer,
+  ReactRefreshWebpackPlugin,
+  ReactRefreshRspackPlugin
+} from "./types"
+
+/**
+ * Base development configuration shared between webpack and rspack
+ */
+const baseDevConfig = {
+  mode: "development" as const,
+  devtool: "cheap-module-source-map" as const
+}
+
+/**
+ * Generate webpack-specific development configuration
+ * @returns Webpack configuration with dev server settings
+ */
+const webpackDevConfig = (): WebpackConfigWithDevServer => {
+  const webpackConfig: WebpackConfigWithDevServer = {
+    ...baseDevConfig,
+    ...(runningWebpackDevServer && { devServer: webpackDevServerConfig() })
+  }
+
+  const devServerConfig = webpackDevServerConfig()
+  if (
+    runningWebpackDevServer &&
+    devServerConfig.hot &&
+    moduleExists("@pmmmwh/react-refresh-webpack-plugin")
+  ) {
+    // eslint-disable-next-line global-require
+    const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")
+    webpackConfig.plugins = [
+      ...(webpackConfig.plugins || []),
+      new ReactRefreshWebpackPlugin()
+    ]
+  }
+
+  return webpackConfig
+}
+
+/**
+ * Generate rspack-specific development configuration
+ * @returns Rspack configuration with dev server settings
+ */
+const rspackDevConfig = (): RspackConfigWithDevServer => {
+  const devServerConfig = webpackDevServerConfig()
+  const rspackConfig: RspackConfigWithDevServer = {
+    ...baseDevConfig,
+    devServer: {
+      ...devServerConfig,
+      devMiddleware: {
+        ...(devServerConfig.devMiddleware || {}),
+        writeToDisk: (filePath: string) => !filePath.includes(".hot-update.")
+      }
+    }
+  }
+
+  if (
+    runningWebpackDevServer &&
+    devServerConfig.hot &&
+    moduleExists("@rspack/plugin-react-refresh")
+  ) {
+    // eslint-disable-next-line global-require
+    const ReactRefreshPlugin = require("@rspack/plugin-react-refresh")
+    rspackConfig.plugins = [
+      ...(rspackConfig.plugins || []),
+      new ReactRefreshPlugin()
+    ]
+  }
+
+  return rspackConfig
+}
+
+const bundlerConfig =
+  config.assets_bundler === "rspack" ? rspackDevConfig() : webpackDevConfig()
+
+module.exports = merge(baseConfig, bundlerConfig)

data/package/environments/production.ts

@@ -0,0 +1,80 @@
+/**
+ * Production environment configuration for webpack and rspack bundlers
+ * @module environments/production
+ */
+
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const { resolve } = require("path")
+const { merge } = require("webpack-merge")
+const baseConfig = require("./base")
+const { moduleExists } = require("../utils/helpers")
+const config = require("../config")
+import type { Configuration as WebpackConfiguration, WebpackPluginInstance } from "webpack"
+import type { CompressionPluginConstructor } from "./types"
+
+const optimizationPath = resolve(
+  __dirname,
+  "..",
+  "optimization",
+  `${config.assets_bundler}.js`
+)
+const { getOptimization } = require(optimizationPath)
+
+let CompressionPlugin: CompressionPluginConstructor | null = null
+if (moduleExists("compression-webpack-plugin")) {
+  // eslint-disable-next-line global-require
+  CompressionPlugin = require("compression-webpack-plugin")
+}
+
+/**
+ * Generate production plugins including compression
+ * @returns Array of webpack plugins for production
+ */
+const getPlugins = (): WebpackPluginInstance[] => {
+  const plugins: WebpackPluginInstance[] = []
+
+  if (CompressionPlugin) {
+    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
+}
+
+/**
+ * Production configuration with optimizations and compression
+ */
+const productionConfig: Partial<WebpackConfiguration> = {
+  devtool: "source-map",
+  stats: "normal",
+  bail: true,
+  plugins: getPlugins(),
+  optimization: getOptimization()
+}
+
+if (config.useContentHash === false) {
+  // eslint-disable-next-line no-console
+  console.warn(`⚠️ WARNING
+Setting 'useContentHash' to 'false' in the production environment (specified by NODE_ENV environment variable) is not allowed!
+Content hashes get added to the filenames regardless of setting useContentHash in 'shakapacker.yml' to false.
+`)
+}
+
+module.exports = merge(baseConfig, productionConfig)

data/package/environments/test.ts

@@ -0,0 +1,53 @@
+/**
+ * Test environment configuration for webpack and rspack bundlers
+ * @module environments/test
+ */
+
+const { merge } = require("webpack-merge")
+const config = require("../config")
+const baseConfig = require("./base")
+import type { Configuration as WebpackConfiguration } from "webpack"
+
+interface TestConfig {
+  mode: "development" | "production" | "none"
+  devtool: string | false
+  watchOptions?: {
+    ignored: RegExp
+  }
+}
+
+/**
+ * Shared test configuration for both webpack and rspack
+ * Ensures consistent test behavior across bundlers
+ */
+const sharedTestConfig: TestConfig = {
+  mode: "development",
+  devtool: "cheap-module-source-map",
+  // Disable file watching in test mode
+  watchOptions: {
+    ignored: /node_modules/
+  }
+}
+
+/**
+ * Generate rspack-specific test configuration
+ * @returns Rspack configuration optimized for testing
+ */
+const rspackTestConfig = (): TestConfig => ({
+  ...sharedTestConfig
+  // Add any rspack-specific overrides here if needed
+})
+
+/**
+ * Generate webpack-specific test configuration
+ * @returns Webpack configuration for testing with same settings as rspack
+ */
+const webpackTestConfig = (): Partial<WebpackConfiguration> => ({
+  ...sharedTestConfig
+  // Add any webpack-specific overrides here if needed
+})
+
+const bundlerConfig =
+  config.assets_bundler === "rspack" ? rspackTestConfig() : webpackTestConfig()
+
+module.exports = merge(baseConfig, bundlerConfig)

data/package/environments/types.ts

@@ -0,0 +1,98 @@
+/**
+ * Type definitions for environment configurations
+ * These types are exported for consumer use
+ */
+
+import type {
+  Configuration as WebpackConfiguration,
+  WebpackPluginInstance
+} from "webpack"
+import type { Configuration as DevServerConfiguration } from "webpack-dev-server"
+import type { RspackPluginInstance as ImportedRspackPluginInstance } from "@rspack/core"
+
+/**
+ * Webpack configuration extended with dev server support
+ */
+export interface WebpackConfigWithDevServer extends WebpackConfiguration {
+  devServer?: DevServerConfiguration
+  plugins?: WebpackPluginInstance[]
+}
+
+/**
+ * Rspack plugin instance interface
+ * Uses the RspackPluginInstance type from @rspack/core
+ */
+export type RspackPluginInstance = ImportedRspackPluginInstance
+
+/**
+ * Rspack plugin type alias
+ * @deprecated Use RspackPluginInstance instead
+ * Retained for backward compatibility with existing code
+ */
+export type RspackPlugin = RspackPluginInstance
+
+/**
+ * Rspack dev server configuration
+ * Similar to webpack-dev-server but with some rspack-specific options
+ */
+export interface RspackDevServerConfig {
+  port?: number | string | "auto"
+  host?: string
+  hot?: boolean | "only"
+  historyApiFallback?: boolean | Record<string, unknown>
+  headers?: Record<string, string | string[]>
+  proxy?: unknown
+  static?: boolean | string | Array<string | Record<string, unknown>>
+  devMiddleware?: {
+    writeToDisk?: boolean | ((filePath: string) => boolean)
+    publicPath?: string
+    [key: string]: unknown
+  }
+  [key: string]: unknown
+}
+
+/**
+ * Rspack configuration with dev server support
+ */
+export interface RspackConfigWithDevServer {
+  mode?: "development" | "production" | "none"
+  devtool?: string | false
+  devServer?: RspackDevServerConfig
+  plugins?: RspackPluginInstance[]
+  module?: WebpackConfiguration["module"]
+  resolve?: WebpackConfiguration["resolve"]
+  entry?: WebpackConfiguration["entry"]
+  output?: WebpackConfiguration["output"]
+  optimization?: WebpackConfiguration["optimization"]
+  [key: string]: unknown
+}
+
+/**
+ * Compression plugin options interface
+ */
+export interface CompressionPluginOptions {
+  filename: string
+  algorithm: string | "gzip" | "brotliCompress"
+  test: RegExp
+  threshold?: number
+  minRatio?: number
+  deleteOriginalAssets?: boolean
+}
+
+/**
+ * Compression plugin constructor type
+ */
+export type CompressionPluginConstructor = new (
+  options: CompressionPluginOptions
+) => WebpackPluginInstance
+
+/**
+ * React Refresh plugin types
+ */
+export interface ReactRefreshWebpackPlugin {
+  new (options?: Record<string, unknown>): WebpackPluginInstance
+}
+
+export interface ReactRefreshRspackPlugin {
+  new (options?: Record<string, unknown>): RspackPluginInstance
+}

data/package/esbuild/index.ts

@@ -0,0 +1,42 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+import { resolve } from "path"
+import { existsSync } from "fs"
+import { merge } from "webpack-merge"
+import type { RuleSetRule } from "webpack"
+
+const LOADER_EXT_REGEX = /\.([jt]sx?)(\.erb)?$/
+
+const getLoaderExtension = (filename: string): string => {
+  const matchData = filename.match(LOADER_EXT_REGEX)
+
+  if (!matchData) {
+    return "js"
+  }
+
+  return matchData[1] ?? "js"
+}
+
+const getCustomConfig = (): Partial<RuleSetRule> => {
+  const path = resolve("config", "esbuild.config.js")
+  if (existsSync(path)) {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require(path)
+  }
+  return {}
+}
+
+const getEsbuildLoaderConfig = (filenameToProcess: string): RuleSetRule => {
+  const customConfig = getCustomConfig()
+  const defaultConfig: RuleSetRule = {
+    loader: require.resolve("esbuild-loader"),
+    options: {
+      loader: getLoaderExtension(filenameToProcess)
+    }
+  }
+
+  return merge(defaultConfig, customConfig)
+}
+
+export { getEsbuildLoaderConfig }

data/package/index.d.ts

@@ -1,60 +1,3 @@
-declare module 'shakapacker' {
-  import { Configuration } from 'webpack'
-
-  export interface Config {
-    source_path: string
-    source_entry_path: string
-    nested_entries: boolean
-    css_extract_ignore_order_warnings: boolean
-    public_root_path: string
-    public_output_path: string
-    cache_path: string
-    webpack_compile_output: boolean
-    shakapacker_precompile: boolean
-    additional_paths: string[]
-    cache_manifest: boolean
-    webpack_loader: string
-    ensure_consistent_versioning: boolean
-    compiler_strategy: string
-    useContentHash: boolean
-    compile: boolean,
-    outputPath: string
-    publicPath: string
-    publicPathWithoutCDN: string
-    manifestPath: string
-  }
-
-  export interface Env {
-    railsEnv: string
-    nodeEnv: string
-    isProduction: boolean
-    isDevelopment: boolean
-    runningWebpackDevServer: boolean
-  }
-
-  export const config: Config
-  export const devServer: Record<string, unknown>
-  export function generateWebpackConfig(extraConfig?: Configuration): Configuration
-  export const baseConfig: Configuration
-  export const env: Env
-  export const rules: Record<string, unknown>
-  export function moduleExists(packageName: string): boolean
-  export function canProcess<T = unknown>(rule: string, fn: (modulePath: string) => T): T | null
-  export const inliningCss: boolean
-  export * from 'webpack-merge'
-}
-
-declare module 'shakapacker/package/babel/preset.js' {
-  import { ConfigAPI, PluginItem, TransformOptions } from '@babel/core'
-
-  interface RequiredTransformOptions {
-    plugins: PluginItem[]
-    presets: PluginItem[]
-  }
-
-  const defaultConfigFunc: (
-    api: ConfigAPI
-  ) => TransformOptions & RequiredTransformOptions
-
-  export = defaultConfigFunc
-}
+declare const _default: any;
+export = _default;
+//# sourceMappingURL=index.d.ts.map

data/package/index.ts

@@ -0,0 +1,55 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const webpackMerge = require("webpack-merge")
+import { resolve } from "path"
+import { existsSync } from "fs"
+// @ts-ignore: webpack is an optional peer dependency (using type-only import)
+import type { Configuration } from "webpack"
+const config = require("./config")
+const baseConfig = require("./environments/base")
+const devServer = require("./dev_server")
+const env = require("./env")
+const { moduleExists, canProcess } = require("./utils/helpers")
+const inliningCss = require("./utils/inliningCss")
+
+const rulesPath = resolve(__dirname, "rules", `${config.assets_bundler}.js`)
+const rules = require(rulesPath)
+
+const generateWebpackConfig = (
+  extraConfig: Configuration = {},
+  ...extraArgs: unknown[]
+): Configuration => {
+  if (extraArgs.length > 0) {
+    throw new Error(
+      `Invalid usage: generateWebpackConfig() accepts only one configuration object.\n\n` +
+        `You passed ${extraArgs.length + 1} arguments. Only one extra config may be passed here - use webpack-merge to merge configs before passing them to Shakapacker.\n\n` +
+        `Example:\n` +
+        `  const { merge } = require('webpack-merge')\n` +
+        `  const mergedConfig = merge(config1, config2, config3)\n` +
+        `  const finalConfig = generateWebpackConfig(mergedConfig)\n\n` +
+        `Or if using ES6:\n` +
+        `  import { merge } from 'webpack-merge'\n` +
+        `  const finalConfig = generateWebpackConfig(merge(config1, config2))`
+    )
+  }
+
+  const { nodeEnv } = env
+  const path = resolve(__dirname, "environments", `${nodeEnv}.js`)
+  const environmentConfig = existsSync(path) ? require(path) : baseConfig
+
+  return webpackMerge.merge({}, environmentConfig, extraConfig)
+}
+
+export = {
+  config, // shakapacker.yml
+  devServer,
+  generateWebpackConfig,
+  baseConfig,
+  env,
+  rules,
+  moduleExists,
+  canProcess,
+  inliningCss,
+  ...webpackMerge
+}