shakapacker 8.4.0 → 9.0.0.beta.2

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
@@ -14,11 +14,11 @@ declare module 'shakapacker' {
     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
@@ -33,9 +33,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,45 +46,85 @@ 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
+    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/package/babel/preset.js' {
-  import { ConfigAPI, PluginItem, TransformOptions } from '@babel/core'
+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: 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 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[]

data/package/index.js

@@ -4,9 +4,11 @@
 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 baseConfig = require("./environments/base")
+
+const rulesPath = resolve(__dirname, "rules", `${config.assets_bundler}.js`)
+const rules = require(rulesPath)
 const devServer = require("./dev_server")
 const env = require("./env")
 const { moduleExists, canProcess } = require("./utils/helpers")

data/package/optimization/rspack.js

@@ -0,0 +1,29 @@
+const { requireOrError } = require("../utils/requireOrError")
+const { error: logError } = require("../utils/debug")
+
+const rspack = requireOrError("@rspack/core")
+
+const getOptimization = () => {
+  // Use Rspack's built-in minification instead of terser-webpack-plugin
+  const result = { minimize: true }
+  try {
+    result.minimizer = [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin()
+    ]
+  } catch (error) {
+    // 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
+}
+
+module.exports = {
+  getOptimization
+}

data/package/optimization/webpack.js

@@ -0,0 +1,49 @@
+const { requireOrError } = require("../utils/requireOrError")
+
+const TerserPlugin = requireOrError("terser-webpack-plugin")
+const { moduleExists } = require("../utils/helpers")
+
+const tryCssMinimizer = () => {
+  if (
+    moduleExists("css-loader") &&
+    moduleExists("css-minimizer-webpack-plugin")
+  ) {
+    const CssMinimizerPlugin = requireOrError("css-minimizer-webpack-plugin")
+    return new CssMinimizerPlugin()
+  }
+
+  return null
+}
+
+const getOptimization = () => {
+  return {
+    minimizer: [
+      tryCssMinimizer(),
+      new TerserPlugin({
+        parallel: Number.parseInt(process.env.SHAKAPACKER_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 = {
+  getOptimization
+}

data/package/plugins/rspack.js

@@ -0,0 +1,88 @@
+const { requireOrError } = require("../utils/requireOrError")
+
+const { RspackManifestPlugin } = requireOrError("rspack-manifest-plugin")
+const rspack = requireOrError("@rspack/core")
+const config = require("../config")
+const { isProduction } = require("../env")
+const { moduleExists } = require("../utils/helpers")
+
+const getPlugins = () => {
+  const plugins = [
+    new rspack.EnvironmentPlugin(process.env),
+    new RspackManifestPlugin({
+      fileName: config.manifestPath.split("/").pop(), // Get just the filename
+      publicPath: config.publicPathWithoutCDN,
+      writeToFileEmit: true,
+      // rspack-manifest-plugin uses different option names than webpack-assets-manifest
+      generate: (seed, files, entrypoints) => {
+        const manifest = seed || {}
+
+        // Add files mapping first
+        files.forEach((file) => {
+          manifest[file.name] = file.path
+        })
+
+        // Add entrypoints information compatible with Shakapacker expectations
+        const entrypointsManifest = {}
+        Object.entries(entrypoints).forEach(
+          ([entrypointName, entrypointFiles]) => {
+            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: {
+                js: jsFiles,
+                css: cssFiles
+              }
+            }
+          }
+        )
+        manifest.entrypoints = entrypointsManifest
+
+        return manifest
+      }
+    })
+  ]
+
+  if (moduleExists("css-loader")) {
+    const hash = isProduction || config.useContentHash ? "-[contenthash:8]" : ""
+    // Use Rspack's built-in CSS extraction
+    const { CssExtractRspackPlugin } = rspack
+    plugins.push(
+      new CssExtractRspackPlugin({
+        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.
+        ignoreOrder: config.css_extract_ignore_order_warnings,
+        // Force writing CSS files to disk in development for Rails compatibility
+        emit: true
+      })
+    )
+  }
+
+  // Use Rspack's built-in SubresourceIntegrityPlugin
+  if (config.integrity.enabled) {
+    plugins.push(
+      new rspack.SubresourceIntegrityPlugin({
+        hashFuncNames: config.integrity.hash_functions,
+        enabled: isProduction
+      })
+    )
+  }
+
+  return plugins
+}
+
+module.exports = {
+  getPlugins
+}

data/package/plugins/webpack.js

@@ -0,0 +1,62 @@
+const { requireOrError } = require("../utils/requireOrError")
+// TODO: Change to `const { WebpackAssetsManifest }` when dropping 'webpack-assets-manifest < 6.0.0' (Node >=20.10.0) support
+const WebpackAssetsManifest = requireOrError("webpack-assets-manifest")
+const webpack = requireOrError("webpack")
+const config = require("../config")
+const { isProduction } = require("../env")
+const { moduleExists } = require("../utils/helpers")
+
+const getPlugins = () => {
+  // TODO: Remove WebpackAssetsManifestConstructor workaround when dropping 'webpack-assets-manifest < 6.0.0' (Node >=20.10.0) support
+  const WebpackAssetsManifestConstructor =
+    "WebpackAssetsManifest" in WebpackAssetsManifest
+      ? WebpackAssetsManifest.WebpackAssetsManifest
+      : WebpackAssetsManifest
+  const plugins = [
+    new webpack.EnvironmentPlugin(process.env),
+    new WebpackAssetsManifestConstructor({
+      entrypoints: true,
+      writeToDisk: true,
+      output: config.manifestPath,
+      entrypointsUseAssets: true,
+      publicPath: config.publicPathWithoutCDN,
+      integrity: config.integrity.enabled,
+      integrityHashes: config.integrity.hash_functions
+    })
+  ]
+
+  if (moduleExists("css-loader") && moduleExists("mini-css-extract-plugin")) {
+    const hash = isProduction || config.useContentHash ? "-[contenthash:8]" : ""
+    const MiniCssExtractPlugin = requireOrError("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.
+        ignoreOrder: config.css_extract_ignore_order_warnings
+      })
+    )
+  }
+
+  if (
+    config.integrity.enabled &&
+    moduleExists("webpack-subresource-integrity")
+  ) {
+    const SubresourceIntegrityPlugin = requireOrError(
+      "webpack-subresource-integrity"
+    )
+    plugins.push(
+      new SubresourceIntegrityPlugin({
+        hashFuncNames: config.integrity.hash_functions,
+        enabled: isProduction
+      })
+    )
+  }
+
+  return plugins
+}
+
+module.exports = {
+  getPlugins
+}

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/css.js

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

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/file.js

@@ -1,4 +1,4 @@
-const { dirname } = require("path")
+const { dirname, sep, normalize } = require("path")
 const {
   additional_paths: additionalPaths,
   source_path: sourcePath
@@ -10,16 +10,22 @@ module.exports = {
   type: "asset/resource",
   generator: {
     filename: (pathData) => {
-      const path = dirname(pathData.filename)
-      const stripPaths = [...additionalPaths, sourcePath]
+      const path = normalize(dirname(pathData.filename))
+      const stripPaths = [...additionalPaths, sourcePath].map((p) =>
+        normalize(p)
+      )
 
       const selectedStripPath = stripPaths.find((includePath) =>
         path.startsWith(includePath)
       )
 
+      if (!selectedStripPath) {
+        return `static/[name]-[hash][ext][query]`
+      }
+
       const folders = path
-        .replace(`${selectedStripPath}`, "")
-        .split("/")
+        .replace(selectedStripPath, "")
+        .split(sep)
         .filter(Boolean)
 
       const foldersWithStatic = ["static", ...folders].join("/")

data/package/rules/less.js

@@ -1,6 +1,6 @@
 const path = require("path")
 const { canProcess } = require("../utils/helpers")
-const getStyleRule = require("../utils/getStyleRule")
+const { getStyleRule } = require("../utils/getStyleRule")
 
 const {
   additional_paths: paths,

data/package/rules/raw.js

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