shakapacker 9.0.0.beta.6 → 9.0.0.beta.8

data/package/config.ts

@@ -125,33 +125,46 @@ if (config.integrity?.hash_functions) {
   config.integrity.hash_functions = [...new Set(config.integrity.hash_functions)]
 }
 
-// Allow ENV variable to override assets_bundler
+// Ensure assets_bundler has a default value
+if (!config.assets_bundler) {
+  config.assets_bundler = "webpack"
+}
+
+// Allow ENV variable to override assets_bundler  
 if (process.env.SHAKAPACKER_ASSETS_BUNDLER) {
   config.assets_bundler = process.env.SHAKAPACKER_ASSETS_BUNDLER
 }
 
 // Define clear defaults
-const DEFAULT_JAVASCRIPT_TRANSPILER =
+// Keep Babel as default for webpack to maintain backward compatibility
+// Use SWC for rspack as it's a newer bundler where we can set modern defaults
+const DEFAULT_JAVASCRIPT_TRANSPILER = 
   config.assets_bundler === "rspack" ? "swc" : "babel"
 
-// Backward compatibility: Add webpack_loader property that maps to javascript_transpiler
-// Show deprecation warning if webpack_loader is used
-// Use type-safe property check
-const configWithLegacy = config as Config & { webpack_loader?: string }
-const webpackLoader = configWithLegacy.webpack_loader
+// Backward compatibility: Check for webpack_loader using proper type guard
+function hasWebpackLoader(obj: unknown): obj is Config & { webpack_loader: string } {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'webpack_loader' in obj &&
+    typeof (obj as Record<string, unknown>).webpack_loader === 'string'
+  )
+}
 
-if (webpackLoader && !config.javascript_transpiler) {
+// Allow environment variable to override javascript_transpiler
+if (process.env.SHAKAPACKER_JAVASCRIPT_TRANSPILER) {
+  config.javascript_transpiler = process.env.SHAKAPACKER_JAVASCRIPT_TRANSPILER
+} else if (hasWebpackLoader(config) && !config.javascript_transpiler) {
   console.warn(
     "[SHAKAPACKER DEPRECATION] The 'webpack_loader' configuration option is deprecated.\n" +
     "Please use 'javascript_transpiler' instead as it better reflects its purpose of configuring JavaScript transpilation regardless of the bundler used."
   )
-  config.javascript_transpiler = webpackLoader
+  config.javascript_transpiler = config.webpack_loader
 } else if (!config.javascript_transpiler) {
   config.javascript_transpiler = DEFAULT_JAVASCRIPT_TRANSPILER
 }
 
 // Ensure webpack_loader is always available for backward compatibility
-// Use property assignment instead of type assertion
 Object.defineProperty(config, 'webpack_loader', {
   value: config.javascript_transpiler,
   writable: true,

data/package/env.ts

@@ -3,14 +3,27 @@ import { readFileSync } from "fs"
 const defaultConfigPath = require("./utils/defaultConfigPath")
 const configPath = require("./utils/configPath")
 const { isFileNotFoundError } = require("./utils/errorHelpers")
+const { sanitizeEnvValue } = require("./utils/pathValidation")
 
 const NODE_ENVIRONMENTS = ["development", "production", "test"] as const
 const DEFAULT = "production"
 
-const initialRailsEnv = process.env.RAILS_ENV
-const rawNodeEnv = process.env.NODE_ENV
+// Sanitize environment variables to prevent injection
+const initialRailsEnv = sanitizeEnvValue(process.env.RAILS_ENV)
+const rawNodeEnv = sanitizeEnvValue(process.env.NODE_ENV)
+
+// Validate NODE_ENV strictly
 const nodeEnv =
   rawNodeEnv && NODE_ENVIRONMENTS.includes(rawNodeEnv as typeof NODE_ENVIRONMENTS[number]) ? rawNodeEnv : DEFAULT
+
+// Log warning if NODE_ENV was invalid
+if (rawNodeEnv && !NODE_ENVIRONMENTS.includes(rawNodeEnv as typeof NODE_ENVIRONMENTS[number])) {
+  console.warn(
+    `[SHAKAPACKER WARNING] Invalid NODE_ENV value: ${rawNodeEnv}. ` +
+    `Valid values are: ${NODE_ENVIRONMENTS.join(', ')}. Using default: ${DEFAULT}`
+  )
+}
+
 const isProduction = nodeEnv === "production"
 const isDevelopment = nodeEnv === "development"
 

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

@@ -1,17 +1,35 @@
+/**
+ * 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",
-  devtool: "cheap-module-source-map"
+  mode: "development" as const,
+  devtool: "cheap-module-source-map" as const
 }
 
-const webpackDevConfig = () => {
-  const webpackConfig = {
+/**
+ * Generate webpack-specific development configuration
+ * @returns Webpack configuration with dev server settings
+ */
+const webpackDevConfig = (): WebpackConfigWithDevServer => {
+  const webpackConfig: WebpackConfigWithDevServer = {
     ...baseDevConfig,
     ...(runningWebpackDevServer && { devServer: webpackDevServerConfig() })
   }
@@ -33,15 +51,19 @@ const webpackDevConfig = () => {
   return webpackConfig
 }
 
-const rspackDevConfig = () => {
+/**
+ * Generate rspack-specific development configuration
+ * @returns Rspack configuration with dev server settings
+ */
+const rspackDevConfig = (): RspackConfigWithDevServer => {
   const devServerConfig = webpackDevServerConfig()
-  const rspackConfig = {
+  const rspackConfig: RspackConfigWithDevServer = {
     ...baseDevConfig,
     devServer: {
       ...devServerConfig,
       devMiddleware: {
-        ...devServerConfig.devMiddleware,
-        writeToDisk: (filePath) => !filePath.includes(".hot-update.")
+        ...(devServerConfig.devMiddleware || {}),
+        writeToDisk: (filePath: string) => !filePath.includes(".hot-update.")
       }
     }
   }

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

@@ -1,3 +1,8 @@
+/**
+ * Production environment configuration for webpack and rspack bundlers
+ * @module environments/production
+ */
+
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
@@ -6,6 +11,8 @@ 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,
@@ -15,14 +22,18 @@ const optimizationPath = resolve(
 )
 const { getOptimization } = require(optimizationPath)
 
-let CompressionPlugin = null
+let CompressionPlugin: CompressionPluginConstructor | null = null
 if (moduleExists("compression-webpack-plugin")) {
   // eslint-disable-next-line global-require
   CompressionPlugin = require("compression-webpack-plugin")
 }
 
-const getPlugins = () => {
-  const plugins = []
+/**
+ * Generate production plugins including compression
+ * @returns Array of webpack plugins for production
+ */
+const getPlugins = (): WebpackPluginInstance[] => {
+  const plugins: WebpackPluginInstance[] = []
 
   if (CompressionPlugin) {
     plugins.push(
@@ -47,7 +58,10 @@ const getPlugins = () => {
   return plugins
 }
 
-const productionConfig = {
+/**
+ * Production configuration with optimizations and compression
+ */
+const productionConfig: Partial<WebpackConfiguration> = {
   devtool: "source-map",
   stats: "normal",
   bail: true,

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,90 @@
+/**
+ * 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"
+
+/**
+ * Webpack configuration extended with dev server support
+ */
+export interface WebpackConfigWithDevServer extends WebpackConfiguration {
+  devServer?: DevServerConfiguration
+  plugins?: WebpackPluginInstance[]
+}
+
+/**
+ * Rspack plugin interface
+ * Rspack plugins follow a similar pattern to webpack but may have different internals
+ */
+export interface RspackPlugin {
+  new(...args: any[]): {
+    apply(compiler: any): void
+    [key: string]: any
+  }
+}
+
+/**
+ * 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?: RspackPlugin[]
+  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>): RspackPlugin
+}

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/optimization/rspack.ts

@@ -0,0 +1,36 @@
+const { requireOrError } = require("../utils/requireOrError")
+const { error: logError } = require("../utils/debug")
+
+const rspack = requireOrError("@rspack/core")
+
+interface OptimizationConfig {
+  minimize: boolean
+  minimizer?: unknown[]
+}
+
+const getOptimization = (): OptimizationConfig => {
+  // Use Rspack's built-in minification instead of terser-webpack-plugin
+  const result: OptimizationConfig = { minimize: true }
+  try {
+    result.minimizer = [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin()
+    ]
+  } catch (error: unknown) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    const errorStack = error instanceof Error ? error.stack : ''
+    // Log full error with stack trace
+    logError(
+      `Failed to configure Rspack minimizers: ${errorMessage}\n${errorStack}`
+    )
+    // Re-throw the error to properly propagate it
+    throw new Error(
+      `Could not configure Rspack minimizers: ${errorMessage}. Please check that @rspack/core is properly installed.`
+    )
+  }
+  return result
+}
+
+export = {
+  getOptimization
+}

data/package/optimization/{webpack.js → webpack.ts}

@@ -3,7 +3,7 @@ const { requireOrError } = require("../utils/requireOrError")
 const TerserPlugin = requireOrError("terser-webpack-plugin")
 const { moduleExists } = require("../utils/helpers")
 
-const tryCssMinimizer = () => {
+const tryCssMinimizer = (): unknown | null => {
   if (
     moduleExists("css-loader") &&
     moduleExists("css-minimizer-webpack-plugin")
@@ -15,12 +15,20 @@ const tryCssMinimizer = () => {
   return null
 }
 
-const getOptimization = () => {
+interface OptimizationConfig {
+  minimizer: unknown[]
+}
+
+const getOptimization = (): OptimizationConfig => {
   return {
     minimizer: [
       tryCssMinimizer(),
       new TerserPlugin({
-        parallel: Number.parseInt(process.env.SHAKAPACKER_PARALLEL, 10) || true,
+        // SHAKAPACKER_PARALLEL env var: number of parallel workers, or true for auto (os.cpus().length - 1)
+        // If not set or invalid, defaults to true (automatic parallelization)
+        parallel: process.env.SHAKAPACKER_PARALLEL
+          ? Number.parseInt(process.env.SHAKAPACKER_PARALLEL, 10) || true
+          : true,
         terserOptions: {
           parse: {
             // Let terser parse ecma 8 code but always output
@@ -44,6 +52,6 @@ const getOptimization = () => {
   }
 }
 
-module.exports = {
+export = {
   getOptimization
 }

data/package/plugins/{rspack.js → rspack.ts}

@@ -6,7 +6,22 @@ const config = require("../config")
 const { isProduction } = require("../env")
 const { moduleExists } = require("../utils/helpers")
 
-const getPlugins = () => {
+interface ManifestFile {
+  name: string
+  path: string
+}
+
+interface EntrypointAssets {
+  js: string[]
+  css: string[]
+}
+
+interface Manifest {
+  entrypoints?: Record<string, { assets: EntrypointAssets }>
+  [key: string]: string | { assets: EntrypointAssets } | Record<string, { assets: EntrypointAssets }> | undefined
+}
+
+const getPlugins = (): unknown[] => {
   const plugins = [
     new rspack.EnvironmentPlugin(process.env),
     new RspackManifestPlugin({
@@ -14,8 +29,8 @@ const getPlugins = () => {
       publicPath: config.publicPathWithoutCDN,
       writeToFileEmit: true,
       // rspack-manifest-plugin uses different option names than webpack-assets-manifest
-      generate: (seed, files, entrypoints) => {
-        const manifest = seed || {}
+      generate: (seed: Manifest | null, files: ManifestFile[], entrypoints: Record<string, string[]>) => {
+        const manifest: Manifest = seed || {}
 
         // Add files mapping first
         files.forEach((file) => {
@@ -23,7 +38,7 @@ const getPlugins = () => {
         })
 
         // Add entrypoints information compatible with Shakapacker expectations
-        const entrypointsManifest = {}
+        const entrypointsManifest: Record<string, { assets: EntrypointAssets }> = {}
         Object.entries(entrypoints).forEach(
           ([entrypointName, entrypointFiles]) => {
             const jsFiles = entrypointFiles
@@ -83,6 +98,6 @@ const getPlugins = () => {
   return plugins
 }
 
-module.exports = {
+export = {
   getPlugins
 }

data/package/plugins/{webpack.js → webpack.ts}

@@ -6,7 +6,7 @@ const config = require("../config")
 const { isProduction } = require("../env")
 const { moduleExists } = require("../utils/helpers")
 
-const getPlugins = () => {
+const getPlugins = (): unknown[] => {
   // TODO: Remove WebpackAssetsManifestConstructor workaround when dropping 'webpack-assets-manifest < 6.0.0' (Node >=20.10.0) support
   const WebpackAssetsManifestConstructor =
     "WebpackAssetsManifest" in WebpackAssetsManifest
@@ -57,6 +57,6 @@ const getPlugins = () => {
   return plugins
 }
 
-module.exports = {
+export = {
   getPlugins
 }

data/package/rspack/{index.js → index.ts}

@@ -1,14 +1,15 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+// Mixed require/import syntax:
+// - Using require() for compiled JS modules that may not have proper ES module exports
+// - Using import for type-only imports and Node.js built-in modules
 const webpackMerge = require("webpack-merge")
-const { resolve } = require("path")
-const { existsSync } = require("fs")
+import { resolve } from "path"
+import { existsSync } from "fs"
+import type { RspackConfigWithDevServer } from "../environments/types"
 const config = require("../config")
 const baseConfig = require("../environments/base")
-
-const rulesPath = resolve(__dirname, "../rules", "rspack.js")
-const rules = require(rulesPath)
 const devServer = require("../dev_server")
 const env = require("../env")
 const { moduleExists, canProcess } = require("../utils/helpers")
@@ -17,7 +18,10 @@ const { getPlugins } = require("../plugins/rspack")
 const { getOptimization } = require("../optimization/rspack")
 const { validateRspackDependencies } = require("../utils/validateDependencies")
 
-const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
+const rulesPath = resolve(__dirname, "../rules", "rspack.js")
+const rules = require(rulesPath)
+
+const generateRspackConfig = (extraConfig: RspackConfigWithDevServer = {}, ...extraArgs: unknown[]): RspackConfigWithDevServer => {
   // Validate required dependencies first
   validateRspackDependencies()
   if (extraArgs.length > 0) {
@@ -28,10 +32,11 @@ const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
 
   const { nodeEnv } = env
   const path = resolve(__dirname, "../environments", `${nodeEnv}.js`)
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const environmentConfig = existsSync(path) ? require(path) : baseConfig
 
   // Create base rspack config
-  const rspackConfig = {
+  const rspackConfig: RspackConfigWithDevServer = {
     ...environmentConfig,
     module: {
       rules
@@ -43,7 +48,10 @@ const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
   return webpackMerge.merge({}, rspackConfig, extraConfig)
 }
 
-module.exports = {
+// Re-export webpack-merge utilities for backward compatibility
+export { merge, mergeWithCustomize, mergeWithRules, unique } from "webpack-merge"
+
+export {
   config, // shakapacker.yml
   devServer,
   generateRspackConfig,
@@ -52,6 +60,5 @@ module.exports = {
   rules,
   moduleExists,
   canProcess,
-  inliningCss,
-  ...webpackMerge
+  inliningCss
 }

data/package/rules/{babel.js → babel.ts}

@@ -3,7 +3,7 @@ const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const { isProduction } = require("../env")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(javascriptTranspiler, "babel", () => ({
+export = loaderMatches(javascriptTranspiler, "babel", () => ({
   test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
   ...jscommon,
   use: [

data/package/rules/{coffee.js → coffee.ts}

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

data/package/rules/{css.js → css.ts}

@@ -1,3 +1,3 @@
 const { getStyleRule } = require("../utils/getStyleRule")
 
-module.exports = getStyleRule(/\.(css)$/i)
+export = getStyleRule(/\.(css)$/i)

data/package/rules/{erb.js → erb.ts}

@@ -2,7 +2,7 @@ const { canProcess } = require("../utils/helpers")
 
 const runner = /^win/.test(process.platform) ? "ruby " : ""
 
-module.exports = canProcess("rails-erb-loader", (resolvedPath) => ({
+export = canProcess("rails-erb-loader", (resolvedPath: string) => ({
   test: /\.erb$/,
   enforce: "pre",
   exclude: /node_modules/,

data/package/rules/{esbuild.js → esbuild.ts}

@@ -3,8 +3,8 @@ const { getEsbuildLoaderConfig } = require("../esbuild")
 const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(javascriptTranspiler, "esbuild", () => ({
+export = loaderMatches(javascriptTranspiler, "esbuild", () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
   ...jscommon,
-  use: ({ resource }) => getEsbuildLoaderConfig(resource)
+  use: ({ resource }: { resource: string }) => getEsbuildLoaderConfig(resource)
 }))