shakapacker 8.4.0 → 9.0.0.beta.0

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 }

data/package/utils/requireOrError.js

@@ -0,0 +1,15 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+const config = require("../config")
+
+const requireOrError = (moduleName) => {
+  try {
+    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`
+    )
+  }
+}
+
+module.exports = { requireOrError }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "8.4.0",
+  "version": "9.0.0-beta.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "homepage": "https://github.com/shakacode/shakapacker",
   "bugs": {
@@ -14,6 +14,16 @@
   "author": "David Heinemeier Hansson <david@basecamp.com>, Justin Gordon <justin@shakacode.com>",
   "main": "package/index.js",
   "types": "package/index.d.ts",
+  "exports": {
+    ".": "./package/index.js",
+    "./webpack": "./package/webpack/index.js",
+    "./rspack": "./package/rspack/index.js",
+    "./swc": "./package/swc/index.js",
+    "./esbuild": "./package/esbuild/index.js",
+    "./package.json": "./package.json",
+    "./package/babel/preset.js": "./package/babel/preset.js",
+    "./package/*": "./package/*"
+  },
   "files": [
     "package",
     "lib/install/config/shakapacker.yml"
@@ -27,8 +37,11 @@
     "path-complete-extname": "^1.0.0"
   },
   "devDependencies": {
+    "@rspack/cli": "^1.4.11",
+    "@rspack/core": "^1.4.11",
     "babel-loader": "^8.2.4",
     "compression-webpack-plugin": "^9.0.0",
+    "css-loader": "^7.1.2",
     "esbuild-loader": "^2.18.0",
     "eslint": "^8.0.0",
     "eslint-config-airbnb": "^19.0.0",
@@ -41,41 +54,16 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "memory-fs": "^0.5.0",
+    "mini-css-extract-plugin": "^2.9.4",
     "prettier": "^3.2.5",
+    "rspack-manifest-plugin": "^5.0.3",
+    "sass-loader": "^16.0.5",
     "swc-loader": "^0.1.15",
     "thenify": "^3.3.1",
     "webpack": "5.93.0",
     "webpack-assets-manifest": "^5.0.6",
-    "webpack-subresource-integrity": "^5.1.0",
-    "webpack-merge": "^5.8.0"
-  },
-  "peerDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/runtime": "^7.17.9",
-    "@types/babel__core": "^7.0.0",
-    "@types/webpack": "^5.0.0",
-    "babel-loader": "^8.2.4 || ^9.0.0 || ^10.0.0",
-    "compression-webpack-plugin": "^9.0.0 || ^10.0.0|| ^11.0.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.76.0",
-    "webpack-assets-manifest": "^5.0.6 || ^6.0.0",
-    "webpack-subresource-integrity": "^5.1.0",
-    "webpack-cli": "^4.9.2 || ^5.0.0 || ^6.0.0",
-    "webpack-dev-server": "^4.15.2 || ^5.2.2",
-    "webpack-merge": "^5.8.0 || ^6.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/babel__core": {
-      "optional": true
-    },
-    "@types/webpack": {
-      "optional": true
-    },
-    "webpack-subresource-integrity": {
-      "optional": true
-    }
+    "webpack-merge": "^5.8.0",
+    "webpack-subresource-integrity": "^5.1.0"
   },
   "packageManager": "yarn@1.22.22",
   "engines": {

data/test/package/environments/base.test.js

@@ -79,7 +79,7 @@ describe("Base config", () => {
     })
 
     test("should return default loader rules for each file in config/loaders", () => {
-      const rules = require("../../../package/rules")
+      const rules = require("../../../package/rules/webpack")
 
       const defaultRules = Object.keys(rules)
       const configRules = baseConfig.module.rules

data/test/package/rules/{index.test.js → webpack.test.js}

@@ -1,4 +1,4 @@
-const rules = require("../../../package/rules/index")
+const rules = require("../../../package/rules/webpack")
 
 jest.mock("../../../package/utils/helpers", () => {
   const original = jest.requireActual("../../../package/utils/helpers")