shakapacker 8.3.0 → 9.0.0.beta.0

data/package/environments/development.js

@@ -1,13 +1,28 @@
 const { merge } = require("webpack-merge")
-
+const config = require("../config")
 const baseConfig = require("./base")
 const webpackDevServerConfig = require("../webpackDevServerConfig")
 const { runningWebpackDevServer } = require("../env")
 
-const devConfig = {
+const webpackDevConfig = {
   mode: "development",
   devtool: "cheap-module-source-map",
   ...(runningWebpackDevServer && { devServer: webpackDevServerConfig() })
 }
 
-module.exports = merge(baseConfig, devConfig)
+const rspackDevConfig = {
+  mode: "development",
+  devtool: "cheap-module-source-map",
+  // Force writing assets to disk in development for Rails compatibility
+  devServer: {
+    ...webpackDevServerConfig(),
+    devMiddleware: {
+      writeToDisk: true
+    }
+  }
+}
+
+const bundlerConfig =
+  config.bundler === "rspack" ? rspackDevConfig : webpackDevConfig
+
+module.exports = merge(baseConfig, bundlerConfig)

data/package/environments/production.js

@@ -2,46 +2,44 @@
 /* eslint import/no-dynamic-require: 0 */
 
 const { merge } = require("webpack-merge")
-const CompressionPlugin = require("compression-webpack-plugin")
-const TerserPlugin = require("terser-webpack-plugin")
+const { resolve } = require("path")
 const baseConfig = require("./base")
 const { moduleExists } = require("../utils/helpers")
 const config = require("../config")
 
+const path = resolve(__dirname, "..", "optimization", `${config.bundler}.js`)
+const { getOptimization } = require(path)
+
+let CompressionPlugin = null
+if (moduleExists("compression-webpack-plugin")) {
+  // eslint-disable-next-line global-require
+  CompressionPlugin = require("compression-webpack-plugin")
+}
+
 const getPlugins = () => {
   const plugins = []
 
-  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) {
+  if (CompressionPlugin) {
     plugins.push(
       new CompressionPlugin({
-        filename: "[path][base].br[query]",
-        algorithm: "brotliCompress",
+        filename: "[path][base].gz[query]",
+        algorithm: "gzip",
         test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
       })
     )
-  }
 
-  return plugins
-}
-
-const tryCssMinimizer = () => {
-  if (
-    moduleExists("css-loader") &&
-    moduleExists("css-minimizer-webpack-plugin")
-  ) {
-    const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
-    return new CssMinimizerPlugin()
+    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 null
+  return plugins
 }
 
 const productionConfig = {
@@ -49,32 +47,7 @@ const productionConfig = {
   stats: "normal",
   bail: true,
   plugins: getPlugins(),
-  optimization: {
-    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)
-  }
+  optimization: getOptimization()
 }
 
 if (config.useContentHash === false) {

data/package/environments/test.js

@@ -1,3 +1,17 @@
+const { merge } = require("webpack-merge")
+const config = require("../config")
 const baseConfig = require("./base")
 
-module.exports = baseConfig
+const rspackTestConfig = {
+  mode: "development",
+  devtool: "cheap-module-source-map",
+  // Disable file watching in test mode
+  watchOptions: {
+    ignored: /node_modules/
+  }
+}
+
+const bundlerConfig =
+  config.bundler === "rspack" ? rspackTestConfig : baseConfig
+
+module.exports = merge(baseConfig, bundlerConfig)

data/package/index.d.ts

@@ -81,6 +81,20 @@ declare module 'shakapacker' {
   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
+  export const baseConfig: RspackOptions
+  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 const inliningCss: boolean
+  export * from 'webpack-merge'
+}
+
 declare module 'shakapacker/package/babel/preset.js' {
   import { ConfigAPI, PluginItem, TransformOptions } from '@babel/core'
 

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.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,25 @@
+const { requireOrError } = require("../utils/requireOrError")
+
+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) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[SHAKAPACKER]: Warning: Could not configure Rspack minimizers:",
+      error.message
+    )
+  }
+  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,104 @@
+const { existsSync, readFileSync } = require("fs")
+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) => {
+        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)
+          )
+        }
+
+        // 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")
+            )
+            const cssFiles = entrypointFiles.filter((file) =>
+              file.endsWith(".css")
+            )
+
+            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/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/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.bundler === "rspack" ? rspackRawConfig : webpackRawConfig

data/package/rules/rspack.js

@@ -0,0 +1,96 @@
+/* eslint global-require: 0 */
+
+const { moduleExists } = require("../utils/helpers")
+
+const rules = []
+
+// Use Rspack's built-in SWC loader for JavaScript files
+rules.push({
+  test: /\.(js|jsx|mjs)$/,
+  exclude: /node_modules/,
+  type: "javascript/auto",
+  use: [
+    {
+      loader: "builtin:swc-loader",
+      options: {
+        jsc: {
+          parser: {
+            syntax: "ecmascript",
+            jsx: true
+          },
+          transform: {
+            react: {
+              runtime: "automatic"
+            }
+          }
+        }
+      }
+    }
+  ]
+})
+
+// Use Rspack's built-in SWC loader for TypeScript files
+rules.push({
+  test: /\.(ts|tsx)$/,
+  exclude: /node_modules/,
+  type: "javascript/auto",
+  use: [
+    {
+      loader: "builtin:swc-loader",
+      options: {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true
+          },
+          transform: {
+            react: {
+              runtime: "automatic"
+            }
+          }
+        }
+      }
+    }
+  ]
+})
+
+// CSS rules using Rspack's built-in CSS handling
+if (moduleExists("css-loader")) {
+  const css = require("./css")
+  rules.push(css)
+}
+
+// Sass rules
+if (moduleExists("sass") && moduleExists("sass-loader")) {
+  const sass = require("./sass")
+  rules.push(sass)
+}
+
+// Less rules
+if (moduleExists("less") && moduleExists("less-loader")) {
+  const less = require("./less")
+  rules.push(less)
+}
+
+// Stylus rules
+if (moduleExists("stylus") && moduleExists("stylus-loader")) {
+  const stylus = require("./stylus")
+  rules.push(stylus)
+}
+
+// ERB template support
+const erb = require("./erb")
+
+rules.push(erb)
+
+// File/asset handling using Rspack's built-in asset modules
+const file = require("./file")
+
+rules.push(file)
+
+// Raw file loading
+const raw = require("./raw")
+
+rules.push(raw)
+
+module.exports = rules

data/package/rules/sass.js

@@ -1,6 +1,6 @@
 /* eslint global-require: 0 */
 
-const getStyleRule = require("../utils/getStyleRule")
+const { getStyleRule } = require("../utils/getStyleRule")
 const { canProcess, packageMajorVersion } = require("../utils/helpers")
 const { additional_paths: extraPaths } = require("../config")
 
@@ -11,7 +11,11 @@ module.exports = canProcess("sass-loader", (resolvedPath) => {
     {
       loader: resolvedPath,
       options: {
-        sassOptions: { [optionKey]: extraPaths }
+        sourceMap: true,
+        sassOptions: {
+          [optionKey]: extraPaths,
+          quietDeps: true
+        }
       }
     }
   ])

data/package/rules/stylus.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/utils/getStyleRule.js

@@ -1,5 +1,7 @@
 /* eslint global-require: 0 */
 const { canProcess, moduleExists } = require("./helpers")
+const { requireOrError } = require("./requireOrError")
+const config = require("../config")
 const inliningCss = require("./inliningCss")
 
 const getStyleRule = (test, preprocessors = []) => {
@@ -12,8 +14,13 @@ const getStyleRule = (test, preprocessors = []) => {
 
     // style-loader is required when using css modules with HMR on the webpack-dev-server
 
+    const extractionPlugin =
+      config.bundle === "rspack"
+        ? requireOrError("@rspack/core").CssExtractRspackPlugin.loader
+        : requireOrError("mini-css-extract-plugin").loader
+
     const use = [
-      inliningCss ? "style-loader" : require("mini-css-extract-plugin").loader,
+      inliningCss ? "style-loader" : extractionPlugin,
       {
         loader: require.resolve("css-loader"),
         options: {
@@ -28,13 +35,19 @@ const getStyleRule = (test, preprocessors = []) => {
       ...preprocessors
     ].filter(Boolean)
 
-    return {
+    const result = {
       test,
       use
     }
+
+    if (config.bundle === "rspack") {
+      result.type = "javascript/auto" // Required for rspack CSS extraction
+    }
+
+    return result
   }
 
   return null
 }
 
-module.exports = getStyleRule
+module.exports = { getStyleRule }