shakapacker 8.4.0 → 9.0.0.beta.2

data/package/rules/rspack.js

@@ -0,0 +1,162 @@
+/* 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/,
+  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
+debug("Adding TypeScript rule with builtin:swc-loader")
+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
+debug("Checking for CSS loader...")
+if (moduleExists("css-loader")) {
+  debug("css-loader found, loading CSS rule configuration...")
+  const css = require("./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")
+  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")
+  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")
+  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")
+
+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")
+
+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")
+
+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/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/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

@@ -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.assets_bundler === "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.assets_bundler === "rspack") {
+      result.type = "javascript/auto"
+    }
+
+    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.assets_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/utils/validateDependencies.js

@@ -0,0 +1,61 @@
+/**
+ * Validates that required dependencies are installed for the selected bundler
+ */
+
+const { moduleExists } = require("./helpers")
+const { error } = require("./debug")
+
+const validateRspackDependencies = () => {
+  const requiredDependencies = ["@rspack/core", "rspack-manifest-plugin"]
+
+  const missingDependencies = requiredDependencies.filter(
+    (dep) => !moduleExists(dep)
+  )
+
+  if (missingDependencies.length > 0) {
+    error(
+      `Missing required dependencies for RSpack:\n${missingDependencies
+        .map((dep) => `  - ${dep}`)
+        .join(
+          "\n"
+        )}\n\nPlease install them with:\n  npm install ${missingDependencies.join(
+        " "
+      )}`
+    )
+    throw new Error(
+      `Missing RSpack dependencies: ${missingDependencies.join(", ")}`
+    )
+  }
+}
+
+const validateWebpackDependencies = () => {
+  const requiredDependencies = [
+    "webpack",
+    "webpack-cli",
+    "webpack-assets-manifest"
+  ]
+
+  const missingDependencies = requiredDependencies.filter(
+    (dep) => !moduleExists(dep)
+  )
+
+  if (missingDependencies.length > 0) {
+    error(
+      `Missing required dependencies for Webpack:\n${missingDependencies
+        .map((dep) => `  - ${dep}`)
+        .join(
+          "\n"
+        )}\n\nPlease install them with:\n  npm install ${missingDependencies.join(
+        " "
+      )}`
+    )
+    throw new Error(
+      `Missing Webpack dependencies: ${missingDependencies.join(", ")}`
+    )
+  }
+}
+
+module.exports = {
+  validateRspackDependencies,
+  validateWebpackDependencies
+}

data/package/webpackDevServerConfig.js

@@ -39,6 +39,7 @@ function createDevServerConfig() {
     devMiddleware: {
       publicPath
     },
+    hot: devServerYamlConfig.hmr,
     liveReload,
     historyApiFallback: {
       disableDotRule: true
@@ -47,6 +48,7 @@ function createDevServerConfig() {
       publicPath: contentBase
     }
   }
+  delete devServerYamlConfig.hmr
 
   if (devServerYamlConfig.static) {
     config.static = { ...config.static, ...devServerYamlConfig.static }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "8.4.0",
+  "version": "9.0.0-beta.2",
   "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/esbuild.test.js

@@ -11,7 +11,7 @@ jest.mock("../../../package/config", () => {
   const original = jest.requireActual("../../../package/config")
   return {
     ...original,
-    webpack_loader: "esbuild",
+    javascript_transpiler: "esbuild",
     additional_paths: [...original.additional_paths, "node_modules/included"]
   }
 })

data/test/package/rules/swc.test.js

@@ -11,7 +11,7 @@ jest.mock("../../../package/config", () => {
   const original = jest.requireActual("../../../package/config")
   return {
     ...original,
-    webpack_loader: "swc",
+    javascript_transpiler: "swc",
     additional_paths: [...original.additional_paths, "node_modules/included"]
   }
 })

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")