shakapacker 9.0.0.beta.0 → 9.0.0.beta.3

data/package/index.d.ts

@@ -1,6 +1,6 @@
-declare module 'shakapacker' {
-  import { Configuration, RuleSetRule } from 'webpack'
-  import * as https from 'node:https';
+declare module "shakapacker" {
+  import { Configuration, RuleSetRule } from "webpack"
+  import * as https from "node:https"
 
   export interface Config {
     source_path: string
@@ -9,20 +9,29 @@ declare module 'shakapacker' {
     css_extract_ignore_order_warnings: boolean
     public_root_path: string
     public_output_path: string
+    private_output_path?: string
     cache_path: string
     webpack_compile_output: boolean
     shakapacker_precompile: boolean
     additional_paths: string[]
     cache_manifest: boolean
-    webpack_loader: string
+    javascript_transpiler: string
     ensure_consistent_versioning: boolean
     compiler_strategy: string
     useContentHash: boolean
-    compile: boolean,
+    compile: boolean
     outputPath: string
     publicPath: string
     publicPathWithoutCDN: string
     manifestPath: string
+    manifest_path?: string
+    assets_bundler?: string
+    dev_server?: DevServerConfig
+    integrity?: {
+      enabled: boolean
+      cross_origin: string
+      hash_functions?: string[]
+    }
   }
 
   export interface Env {
@@ -33,9 +42,11 @@ declare module 'shakapacker' {
     runningWebpackDevServer: boolean
   }
 
-  type Header = Array<{ key: string; value: string }> | Record<string, string | string[]>
-  type ServerType = 'http' | 'https' | 'spdy'
-  type WebSocketType = 'sockjs' | 'ws'
+  type Header =
+    | Array<{ key: string; value: string }>
+    | Record<string, string | string[]>
+  type ServerType = "http" | "https" | "spdy"
+  type WebSocketType = "sockjs" | "ws"
 
   /**
    * This has the same keys and behavior as https://webpack.js.org/configuration/dev-server/ except:
@@ -44,59 +55,87 @@ declare module 'shakapacker' {
    * @see {import('webpack-dev-server').Configuration}
    */
   interface DevServerConfig {
-    allowed_hosts?: 'all' | 'auto' | string | string[]
+    allowed_hosts?: "all" | "auto" | string | string[]
     bonjour?: boolean | Record<string, unknown> // bonjour.BonjourOptions
     client?: Record<string, unknown> // Client
     compress?: boolean
     dev_middleware?: Record<string, unknown> // webpackDevMiddleware.Options
     headers?: Header | (() => Header)
     history_api_fallback?: boolean | Record<string, unknown> // HistoryApiFallbackOptions
-    hmr?: 'only' | boolean
-    host?: 'local-ip' | 'local-ipv4' | 'local-ipv6' | string
+    hmr?: "only" | boolean
+    host?: "local-ip" | "local-ipv4" | "local-ipv6" | string
     http2?: boolean
     https?: boolean | https.ServerOptions
     ipc?: boolean | string
     magic_html?: boolean
     live_reload?: boolean
-    open?: boolean | string | string[] | Record<string, unknown> | Record<string, unknown>[]
-    port?: 'auto' | string | number
+    inline_css?: boolean
+    env_prefix?: string
+    open?:
+      | boolean
+      | string
+      | string[]
+      | Record<string, unknown>
+      | Record<string, unknown>[]
+    port?: "auto" | string | number
     proxy?: unknown // ProxyConfigMap | ProxyConfigArray
     setup_exit_signals?: boolean
     static?: boolean | string | unknown // Static | Array<string | Static>
     watch_files?: string | string[] | unknown // WatchFiles | Array<WatchFiles | string>
-    web_socket_server?: string | boolean | WebSocketType | { type?: string | boolean | WebSocketType, options?: Record<string, unknown> }
-    server?: string | boolean | ServerType | { type?: string | boolean | ServerType, options?: https.ServerOptions }
+    web_socket_server?:
+      | string
+      | boolean
+      | WebSocketType
+      | {
+          type?: string | boolean | WebSocketType
+          options?: Record<string, unknown>
+        }
+    server?:
+      | string
+      | boolean
+      | ServerType
+      | { type?: string | boolean | ServerType; options?: https.ServerOptions }
     [otherWebpackDevServerConfigKey: string]: unknown
   }
 
   export const config: Config
   export const devServer: DevServerConfig
-  export function generateWebpackConfig(extraConfig?: Configuration): Configuration
+  export function generateWebpackConfig(
+    extraConfig?: Configuration
+  ): Configuration
   export const baseConfig: Configuration
   export const env: Env
   export const rules: RuleSetRule[]
   export function moduleExists(packageName: string): boolean
-  export function canProcess<T = unknown>(rule: string, fn: (modulePath: string) => T): T | null
+  export function canProcess<T = unknown>(
+    rule: string,
+    fn: (modulePath: string) => T
+  ): T | null
   export const inliningCss: boolean
-  export * from 'webpack-merge'
+  export * from "webpack-merge"
 }
 
-declare module 'shakapacker/rspack' {
-  import type { RspackOptions, RuleSetRule } from '@rspack/core'
-  
-  export const config: Config
-  export function generateRspackConfig(extraConfig?: RspackOptions): RspackOptions
+declare module "shakapacker/rspack" {
+  import type { RspackOptions } from "@rspack/core"
+
+  export const config: import("shakapacker").Config
+  export function generateRspackConfig(
+    extraConfig?: RspackOptions
+  ): RspackOptions
   export const baseConfig: RspackOptions
-  export const env: Env
-  export const rules: RuleSetRule[]
+  export const env: import("shakapacker").Env
+  export const rules: NonNullable<RspackOptions["module"]>["rules"]
   export function moduleExists(packageName: string): boolean
-  export function canProcess<T = unknown>(rule: string, fn: (modulePath: string) => T): T | null
+  export function canProcess<T = unknown>(
+    rule: string,
+    fn: (modulePath: string) => T
+  ): T | null
   export const inliningCss: boolean
-  export * from 'webpack-merge'
+  export * from "webpack-merge"
 }
 
-declare module 'shakapacker/package/babel/preset.js' {
-  import { ConfigAPI, PluginItem, TransformOptions } from '@babel/core'
+declare module "shakapacker/package/babel/preset.js" {
+  import { ConfigAPI, PluginItem, TransformOptions } from "@babel/core"
 
   interface RequiredTransformOptions {
     plugins: PluginItem[]
@@ -108,4 +147,4 @@ declare module 'shakapacker/package/babel/preset.js' {
   ) => TransformOptions & RequiredTransformOptions
 
   export = defaultConfigFunc
-}
+}

data/package/index.js

@@ -7,7 +7,7 @@ const { existsSync } = require("fs")
 const config = require("./config")
 const baseConfig = require("./environments/base")
 
-const rulesPath = resolve(__dirname, "rules", `${config.bundler}.js`)
+const rulesPath = resolve(__dirname, "rules", `${config.assets_bundler}.js`)
 const rules = require(rulesPath)
 const devServer = require("./dev_server")
 const env = require("./env")

data/package/optimization/rspack.js

@@ -1,6 +1,7 @@
 const { requireOrError } = require("../utils/requireOrError")
+const { error: logError } = require("../utils/debug")
 
-const { rspack } = requireOrError("@rspack/core")
+const rspack = requireOrError("@rspack/core")
 
 const getOptimization = () => {
   // Use Rspack's built-in minification instead of terser-webpack-plugin
@@ -11,10 +12,13 @@ const getOptimization = () => {
       new rspack.LightningCssMinimizerRspackPlugin()
     ]
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "[SHAKAPACKER]: Warning: Could not configure Rspack minimizers:",
-      error.message
+    // Log full error with stack trace
+    logError(
+      `Failed to configure Rspack minimizers: ${error.message}\n${error.stack}`
+    )
+    // Re-throw the error to properly propagate it
+    throw new Error(
+      `Could not configure Rspack minimizers: ${error.message}. Please check that @rspack/core is properly installed.`
     )
   }
   return result

data/package/plugins/rspack.js

@@ -1,4 +1,3 @@
-const { existsSync, readFileSync } = require("fs")
 const { requireOrError } = require("../utils/requireOrError")
 
 const { RspackManifestPlugin } = requireOrError("rspack-manifest-plugin")
@@ -16,27 +15,7 @@ const getPlugins = () => {
       writeToFileEmit: true,
       // rspack-manifest-plugin uses different option names than webpack-assets-manifest
       generate: (seed, files, entrypoints) => {
-        let manifest = seed || {}
-
-        // Load existing manifest if it exists to handle concurrent builds
-        try {
-          if (existsSync(config.manifestPath)) {
-            const existingContent = readFileSync(config.manifestPath, "utf8")
-            const parsed = JSON.parse(existingContent)
-            if (parsed && typeof parsed === "object") {
-              manifest = {
-                ...manifest,
-                ...parsed
-              }
-            }
-          }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            "[SHAKAPACKER]: Warning: Could not read existing manifest.json:",
-            String(error)
-          )
-        }
+        const manifest = seed || {}
 
         // Add files mapping first
         files.forEach((file) => {
@@ -47,12 +26,17 @@ const getPlugins = () => {
         const entrypointsManifest = {}
         Object.entries(entrypoints).forEach(
           ([entrypointName, entrypointFiles]) => {
-            const jsFiles = entrypointFiles.filter((file) =>
-              file.endsWith(".js")
-            )
-            const cssFiles = entrypointFiles.filter((file) =>
-              file.endsWith(".css")
-            )
+            const jsFiles = entrypointFiles
+              .filter(
+                (file) => file.endsWith(".js") && !file.includes(".hot-update.")
+              )
+              .map((file) => config.publicPathWithoutCDN + file)
+            const cssFiles = entrypointFiles
+              .filter(
+                (file) =>
+                  file.endsWith(".css") && !file.includes(".hot-update.")
+              )
+              .map((file) => config.publicPathWithoutCDN + file)
 
             entrypointsManifest[entrypointName] = {
               assets: {

data/package/rspack/index.js

@@ -0,0 +1,57 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const webpackMerge = require("webpack-merge")
+const { resolve } = require("path")
+const { existsSync } = require("fs")
+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")
+const inliningCss = require("../utils/inliningCss")
+const { getPlugins } = require("../plugins/rspack")
+const { getOptimization } = require("../optimization/rspack")
+const { validateRspackDependencies } = require("../utils/validateDependencies")
+
+const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
+  // Validate required dependencies first
+  validateRspackDependencies()
+  if (extraArgs.length > 0) {
+    throw new Error(
+      "Only one extra config may be passed here - use webpack-merge to merge configs before passing them to Shakapacker"
+    )
+  }
+
+  const { nodeEnv } = env
+  const path = resolve(__dirname, "../environments", `${nodeEnv}.js`)
+  const environmentConfig = existsSync(path) ? require(path) : baseConfig
+
+  // Create base rspack config
+  const rspackConfig = {
+    ...environmentConfig,
+    module: {
+      rules
+    },
+    plugins: getPlugins(),
+    optimization: getOptimization()
+  }
+
+  return webpackMerge.merge({}, rspackConfig, extraConfig)
+}
+
+module.exports = {
+  config, // shakapacker.yml
+  devServer,
+  generateRspackConfig,
+  baseConfig,
+  env,
+  rules,
+  moduleExists,
+  canProcess,
+  inliningCss,
+  ...webpackMerge
+}

data/package/rules/babel.js

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

data/package/rules/esbuild.js

@@ -1,9 +1,9 @@
 const { loaderMatches } = require("../utils/helpers")
 const { getEsbuildLoaderConfig } = require("../esbuild")
-const { webpack_loader: webpackLoader } = require("../config")
+const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(webpackLoader, "esbuild", () => ({
+module.exports = loaderMatches(javascriptTranspiler, "esbuild", () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
   ...jscommon,
   use: ({ resource }) => getEsbuildLoaderConfig(resource)

data/package/rules/raw.js

@@ -1,15 +1,15 @@
 const config = require("../config")
 
-const rspackRawConfig = {
+const rspackRawConfig = () => ({
   resourceQuery: /raw/,
   type: "asset/source"
-}
+})
 
-const webpackRawConfig = {
+const webpackRawConfig = () => ({
   test: /\.html$/,
   exclude: /\.(js|mjs|jsx|ts|tsx)$/,
   type: "asset/source"
-}
+})
 
 module.exports =
-  config.bundler === "rspack" ? rspackRawConfig : webpackRawConfig
+  config.assets_bundler === "rspack" ? rspackRawConfig() : webpackRawConfig()

data/package/rules/rspack.js

@@ -1,13 +1,19 @@
 /* eslint global-require: 0 */
 
 const { moduleExists } = require("../utils/helpers")
+const { debug, info, warn } = require("../utils/debug")
+
+debug("Loading Rspack rules configuration...")
 
 const rules = []
 
 // Use Rspack's built-in SWC loader for JavaScript files
+debug("Adding JavaScript rule with builtin:swc-loader")
 rules.push({
   test: /\.(js|jsx|mjs)$/,
   exclude: /node_modules/,
+  // The 'type' field is required for Rspack to properly handle JavaScript modules
+  // when using builtin loaders. It ensures correct module parsing and transformation.
   type: "javascript/auto",
   use: [
     {
@@ -30,9 +36,12 @@ rules.push({
 })
 
 // Use Rspack's built-in SWC loader for TypeScript files
+debug("Adding TypeScript rule with builtin:swc-loader")
 rules.push({
   test: /\.(ts|tsx)$/,
   exclude: /node_modules/,
+  // The 'type' field is required for Rspack to properly handle TypeScript modules
+  // when using builtin loaders. It ensures correct module parsing and transformation.
   type: "javascript/auto",
   use: [
     {
@@ -55,42 +64,103 @@ rules.push({
 })
 
 // CSS rules using Rspack's built-in CSS handling
+debug("Checking for CSS loader...")
 if (moduleExists("css-loader")) {
+  debug("css-loader found, loading CSS rule configuration...")
   const css = require("./css")
-  rules.push(css)
+  if (css) {
+    debug("Successfully added CSS rule")
+    rules.push(css)
+  } else {
+    warn("css-loader found but rule configuration returned null")
+  }
+} else {
+  info("Skipping CSS support - css-loader not installed")
 }
 
 // Sass rules
+debug("Checking for Sass loader...")
 if (moduleExists("sass") && moduleExists("sass-loader")) {
+  debug("sass and sass-loader found, loading Sass rule configuration...")
   const sass = require("./sass")
-  rules.push(sass)
+  if (sass) {
+    debug("Successfully added Sass rule")
+    rules.push(sass)
+  } else {
+    warn("sass and sass-loader found but rule configuration returned null")
+  }
+} else if (!moduleExists("sass")) {
+  info("Skipping Sass support - sass not installed")
+} else if (!moduleExists("sass-loader")) {
+  info("Skipping Sass support - sass-loader not installed")
 }
 
 // Less rules
+debug("Checking for Less loader...")
 if (moduleExists("less") && moduleExists("less-loader")) {
+  debug("less and less-loader found, loading Less rule configuration...")
   const less = require("./less")
-  rules.push(less)
+  if (less) {
+    debug("Successfully added Less rule")
+    rules.push(less)
+  } else {
+    warn("less and less-loader found but rule configuration returned null")
+  }
+} else if (!moduleExists("less")) {
+  info("Skipping Less support - less not installed")
+} else if (!moduleExists("less-loader")) {
+  info("Skipping Less support - less-loader not installed")
 }
 
 // Stylus rules
+debug("Checking for Stylus loader...")
 if (moduleExists("stylus") && moduleExists("stylus-loader")) {
+  debug("stylus and stylus-loader found, loading Stylus rule configuration...")
   const stylus = require("./stylus")
-  rules.push(stylus)
+  if (stylus) {
+    debug("Successfully added Stylus rule")
+    rules.push(stylus)
+  } else {
+    warn("stylus and stylus-loader found but rule configuration returned null")
+  }
+} else if (!moduleExists("stylus")) {
+  info("Skipping Stylus support - stylus not installed")
+} else if (!moduleExists("stylus-loader")) {
+  info("Skipping Stylus support - stylus-loader not installed")
 }
 
 // ERB template support
+debug("Checking for ERB template support...")
 const erb = require("./erb")
 
-rules.push(erb)
+if (erb) {
+  debug("Successfully added ERB rule")
+  rules.push(erb)
+} else {
+  info("Skipping ERB support - rails-erb-loader not installed")
+}
 
 // File/asset handling using Rspack's built-in asset modules
+debug("Adding file/asset handling rule...")
 const file = require("./file")
 
-rules.push(file)
+if (file) {
+  debug("Successfully added file/asset rule")
+  rules.push(file)
+} else {
+  warn("file rule configuration returned null")
+}
 
 // Raw file loading
+debug("Adding raw file loading rule...")
 const raw = require("./raw")
 
-rules.push(raw)
+if (raw) {
+  debug("Successfully added raw file rule")
+  rules.push(raw)
+} else {
+  warn("raw rule configuration returned null")
+}
 
+debug(`Rspack rules configuration complete. Total rules: ${rules.length}`)
 module.exports = rules

data/package/rules/swc.js

@@ -1,9 +1,9 @@
 const { loaderMatches } = require("../utils/helpers")
 const { getSwcLoaderConfig } = require("../swc")
-const { webpack_loader: webpackLoader } = require("../config")
+const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(webpackLoader, "swc", () => ({
+module.exports = loaderMatches(javascriptTranspiler, "swc", () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
   ...jscommon,
   use: ({ resource }) => getSwcLoaderConfig(resource)

data/package/utils/debug.js

@@ -0,0 +1,49 @@
+/**
+ * Debug utility for Shakapacker
+ * Provides conditional logging based on environment variables
+ */
+
+const isDebugMode = () => {
+  // Explicitly check for debug mode being disabled
+  if (process.env.SHAKAPACKER_DEBUG === "false") {
+    return false
+  }
+
+  // Support both SHAKAPACKER_DEBUG (new) and DEBUG_SHAKAPACKER (legacy) for backwards compatibility
+  return (
+    process.env.SHAKAPACKER_DEBUG === "true" ||
+    process.env.DEBUG_SHAKAPACKER === "true"
+  )
+}
+
+const debug = (message, ...args) => {
+  if (isDebugMode()) {
+    // eslint-disable-next-line no-console
+    console.log(`[Shakapacker] ${message}`, ...args)
+  }
+}
+
+const warn = (message, ...args) => {
+  // eslint-disable-next-line no-console
+  console.warn(`[Shakapacker] WARNING: ${message}`, ...args)
+}
+
+const error = (message, ...args) => {
+  // eslint-disable-next-line no-console
+  console.error(`[Shakapacker] ERROR: ${message}`, ...args)
+}
+
+const info = (message, ...args) => {
+  if (isDebugMode()) {
+    // eslint-disable-next-line no-console
+    console.info(`[Shakapacker] INFO: ${message}`, ...args)
+  }
+}
+
+module.exports = {
+  debug,
+  warn,
+  error,
+  info,
+  isDebugMode
+}

data/package/utils/getStyleRule.js

@@ -3,6 +3,7 @@ const { canProcess, moduleExists } = require("./helpers")
 const { requireOrError } = require("./requireOrError")
 const config = require("../config")
 const inliningCss = require("./inliningCss")
+const { validateCssModulesConfig } = require("./validateCssModulesConfig")
 
 const getStyleRule = (test, preprocessors = []) => {
   if (moduleExists("css-loader")) {
@@ -15,21 +16,29 @@ const getStyleRule = (test, preprocessors = []) => {
     // style-loader is required when using css modules with HMR on the webpack-dev-server
 
     const extractionPlugin =
-      config.bundle === "rspack"
+      config.assets_bundler === "rspack"
         ? requireOrError("@rspack/core").CssExtractRspackPlugin.loader
         : requireOrError("mini-css-extract-plugin").loader
 
+    const cssLoaderOptions = {
+      sourceMap: true,
+      importLoaders: 2,
+      modules: {
+        auto: true,
+        // v9 defaults: named exports with camelCase conversion
+        namedExport: true,
+        exportLocalsConvention: "camelCase"
+      }
+    }
+
+    // Validate CSS modules configuration
+    validateCssModulesConfig(cssLoaderOptions)
+
     const use = [
       inliningCss ? "style-loader" : extractionPlugin,
       {
         loader: require.resolve("css-loader"),
-        options: {
-          sourceMap: true,
-          importLoaders: 2,
-          modules: {
-            auto: true
-          }
-        }
+        options: cssLoaderOptions
       },
       tryPostcss(),
       ...preprocessors
@@ -40,8 +49,8 @@ const getStyleRule = (test, preprocessors = []) => {
       use
     }
 
-    if (config.bundle === "rspack") {
-      result.type = "javascript/auto" // Required for rspack CSS extraction
+    if (config.assets_bundler === "rspack") {
+      result.type = "javascript/auto"
     }
 
     return result

data/package/utils/requireOrError.js

@@ -7,7 +7,7 @@ const requireOrError = (moduleName) => {
     return require(moduleName)
   } catch (error) {
     throw new Error(
-      `[SHAKAPACKER]: ${moduleName} is required for ${config.bundler} but is not installed. View Shakapacker's documented dependencies at https://github.com/shakacode/shakapacker/tree/main/docs/peer-dependencies.md`
+      `[SHAKAPACKER]: ${moduleName} is required for ${config.assets_bundler} but is not installed. View Shakapacker's documented dependencies at https://github.com/shakacode/shakapacker/tree/main/docs/peer-dependencies.md`
     )
   }
 }