shakapacker 8.4.0 → 9.0.0

data/package/utils/validateDependencies.ts

@@ -0,0 +1,61 @@
+/**
+ * Validates that required dependencies are installed for the selected bundler
+ */
+
+const { moduleExists } = require("./helpers")
+const { error } = require("./debug")
+
+const validateRspackDependencies = (): void => {
+  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 = (): void => {
+  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(", ")}`
+    )
+  }
+}
+
+export = {
+  validateRspackDependencies,
+  validateWebpackDependencies
+}

data/package/webpack-types.d.ts

@@ -0,0 +1,33 @@
+// @ts-ignore: webpack is an optional peer dependency (using type-only import)
+import type { Configuration, RuleSetRule, RuleSetUseItem } from 'webpack'
+
+export interface ShakapackerWebpackConfig extends Configuration {
+  module?: Configuration['module'] & {
+    rules?: RuleSetRule[]
+  }
+}
+
+export interface ShakapackerRule extends RuleSetRule {
+  test: RegExp
+  use: RuleSetUseItem[]
+}
+
+export interface ShakapackerLoaderOptions {
+  [key: string]: any
+}
+
+export interface ShakapackerLoader {
+  loader: string
+  options?: ShakapackerLoaderOptions
+}
+
+export type LoaderType = string | ShakapackerLoader
+
+export interface LoaderUtils {
+  resolveLoader(name: string): string
+  createRule(test: RegExp, loaders: LoaderType[]): ShakapackerRule
+  getStyleLoader(extract?: boolean): LoaderType
+  getCssLoader(modules?: boolean): LoaderType
+  getPostCssLoader(): LoaderType
+  getSassLoader(): LoaderType
+}

data/package/webpackDevServerConfig.ts

@@ -0,0 +1,117 @@
+import { DevServerConfig } from "./types"
+const snakeToCamelCase = require("./utils/snakeToCamelCase")
+
+const shakapackerDevServerYamlConfig = require("./dev_server") as DevServerConfig
+const { outputPath: contentBase, publicPath } = require("./config") as {
+  outputPath: string
+  publicPath: string
+}
+
+interface WebpackDevServerConfig {
+  devMiddleware?: {
+    publicPath?: string
+  }
+  hot?: boolean | string
+  liveReload?: boolean
+  historyApiFallback?: boolean | {
+    disableDotRule?: boolean
+  }
+  static?: {
+    publicPath?: string
+    [key: string]: unknown
+  }
+  client?: Record<string, unknown>
+  allowedHosts?: "all" | "auto" | string | string[]
+  bonjour?: boolean | Record<string, unknown>
+  compress?: boolean
+  headers?: Record<string, unknown> | (() => Record<string, unknown>)
+  host?: "local-ip" | "local-ipv4" | "local-ipv6" | string
+  http2?: boolean
+  https?: boolean | Record<string, unknown>
+  ipc?: boolean | string
+  magicHtml?: boolean
+  onAfterSetupMiddleware?: (devServer: unknown) => void
+  onBeforeSetupMiddleware?: (devServer: unknown) => void
+  open?: boolean | string | string[] | Record<string, unknown> | Record<string, unknown>[]
+  port?: "auto" | string | number
+  proxy?: unknown
+  server?: string | boolean | Record<string, unknown>
+  setupExitSignals?: boolean
+  setupMiddlewares?: (middlewares: unknown[], devServer: unknown) => unknown[]
+  watchFiles?: string | string[] | unknown
+  webSocketServer?: string | boolean | Record<string, unknown>
+  [key: string]: unknown
+}
+
+const webpackDevServerMappedKeys = new Set([
+  // client, server, liveReload, devMiddleware are handled separately
+  "allowedHosts",
+  "bonjour",
+  "compress",
+  "headers",
+  "historyApiFallback",
+  "host",
+  "hot",
+  "http2",
+  "https",
+  "ipc",
+  "magicHtml",
+  "onAfterSetupMiddleware",
+  "onBeforeSetupMiddleware",
+  "open",
+  "port",
+  "proxy",
+  "server",
+  "setupExitSignals",
+  "setupMiddlewares",
+  "watchFiles",
+  "webSocketServer"
+])
+
+function createDevServerConfig(): WebpackDevServerConfig {
+  const devServerYamlConfig = { ...shakapackerDevServerYamlConfig } as DevServerConfig & Record<string, unknown>
+  const liveReload =
+    devServerYamlConfig.live_reload !== undefined
+      ? devServerYamlConfig.live_reload
+      : !devServerYamlConfig.hmr
+  delete devServerYamlConfig.live_reload
+
+  const config: WebpackDevServerConfig = {
+    devMiddleware: {
+      publicPath
+    },
+    hot: devServerYamlConfig.hmr,
+    liveReload,
+    historyApiFallback: {
+      disableDotRule: true
+    },
+    static: {
+      publicPath: contentBase
+    }
+  }
+  delete devServerYamlConfig.hmr
+
+  if (devServerYamlConfig.static) {
+    config.static = { 
+      ...config.static, 
+      ...(typeof devServerYamlConfig.static === 'object' ? devServerYamlConfig.static as Record<string, unknown> : {})
+    }
+    delete devServerYamlConfig.static
+  }
+
+  if (devServerYamlConfig.client) {
+    config.client = devServerYamlConfig.client
+    delete devServerYamlConfig.client
+  }
+
+  Object.keys(devServerYamlConfig).forEach((yamlKey) => {
+    const camelYamlKey = snakeToCamelCase(yamlKey)
+    if (webpackDevServerMappedKeys.has(camelYamlKey)) {
+      config[camelYamlKey] = devServerYamlConfig[yamlKey]
+    }
+  })
+
+  return config
+}
+
+export = createDevServerConfig

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "8.4.0",
+  "version": "9.0.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "homepage": "https://github.com/shakacode/shakapacker",
   "bugs": {
@@ -14,24 +14,54 @@
   "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",
+    "./types": "./package/types/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"
   ],
   "scripts": {
+    "clean:ts": "find package -name '*.ts' -not -name '*.d.ts' | sed 's/\\.ts$//' | xargs -I {} rm -f {}.js {}.d.ts {}.d.ts.map {}.js.map",
+    "build": "tsc && node scripts/remove-use-strict.js && yarn prettier --write 'package/**/*.js'",
+    "build:types": "tsc",
     "lint": "eslint .",
-    "test": "jest"
+    "lint:fast": "eslint . --ext .js,.jsx,.ts,.tsx --config .eslintrc.fast.js",
+    "test": "jest",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "yarn build && yarn type-check"
   },
   "dependencies": {
     "js-yaml": "^4.1.0",
-    "path-complete-extname": "^1.0.0"
+    "path-complete-extname": "^1.0.0",
+    "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
+    "@rspack/cli": "^1.4.11",
+    "@rspack/core": "^1.4.11",
+    "@types/babel__core": "^7.20.5",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^24.5.2",
+    "@types/path-complete-extname": "^1.0.3",
+    "@types/webpack": "^5.28.5",
+    "@types/webpack-dev-server": "^4.7.2",
+    "@types/webpack-merge": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.45.0",
+    "@typescript-eslint/parser": "^8.45.0",
     "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",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^27.9.0",
@@ -39,45 +69,140 @@
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
+    "lint-staged": "^15.2.10",
     "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",
+    "typescript": "^5.9.2",
     "webpack": "5.93.0",
     "webpack-assets-manifest": "^5.0.6",
-    "webpack-subresource-integrity": "^5.1.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-subresource-integrity": "^5.1.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",
+    "@rspack/cli": "^1.0.0",
+    "@rspack/core": "^1.0.0",
+    "@rspack/plugin-react-refresh": "^1.0.0",
     "@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",
+    "compression-webpack-plugin": "^9.0.0 || ^10.0.0 || ^11.0.0",
+    "css-loader": "^6.8.1 || ^7.0.0",
+    "esbuild": "^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
+    "esbuild-loader": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "mini-css-extract-plugin": "^2.0.0",
+    "rspack-manifest-plugin": "^5.0.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+    "swc-loader": "^0.1.15 || ^0.2.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"
+    "webpack-subresource-integrity": "^5.1.0"
   },
   "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "@babel/plugin-transform-runtime": {
+      "optional": true
+    },
+    "@babel/preset-env": {
+      "optional": true
+    },
+    "@babel/runtime": {
+      "optional": true
+    },
+    "@rspack/core": {
+      "optional": true
+    },
+    "@rspack/cli": {
+      "optional": true
+    },
+    "@rspack/plugin-react-refresh": {
+      "optional": true
+    },
     "@types/babel__core": {
       "optional": true
     },
     "@types/webpack": {
       "optional": true
     },
+    "babel-loader": {
+      "optional": true
+    },
+    "compression-webpack-plugin": {
+      "optional": true
+    },
+    "css-loader": {
+      "optional": true
+    },
+    "esbuild": {
+      "optional": true
+    },
+    "esbuild-loader": {
+      "optional": true
+    },
+    "mini-css-extract-plugin": {
+      "optional": true
+    },
+    "rspack-manifest-plugin": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "sass-loader": {
+      "optional": true
+    },
+    "swc-loader": {
+      "optional": true
+    },
+    "terser-webpack-plugin": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    },
+    "webpack-assets-manifest": {
+      "optional": true
+    },
+    "webpack-cli": {
+      "optional": true
+    },
+    "webpack-dev-server": {
+      "optional": true
+    },
     "webpack-subresource-integrity": {
       "optional": true
     }
   },
   "packageManager": "yarn@1.22.22",
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write",
+      "node scripts/type-check-no-emit.js"
+    ],
+    "*.{json,yml,yaml,md}": [
+      "prettier --write"
+    ]
+  },
   "engines": {
     "node": ">= 14",
     "yarn": ">=1 <5"

data/scripts/remove-use-strict.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+const fs = require("fs")
+const path = require("path")
+
+// Recursively find all .js files in a directory
+function findJsFiles(dir) {
+  const files = []
+  const items = fs.readdirSync(dir, { withFileTypes: true })
+
+  items.forEach((item) => {
+    const fullPath = path.join(dir, item.name)
+    if (item.isDirectory()) {
+      files.push(...findJsFiles(fullPath))
+    } else if (item.isFile() && item.name.endsWith(".js")) {
+      files.push(fullPath)
+    }
+  })
+
+  return files
+}
+
+// Find all .js files in package directory
+const files = findJsFiles("package")
+
+files.forEach((file) => {
+  let content = fs.readFileSync(file, "utf8")
+
+  // Remove "use strict" directive with various quote styles and formatting
+  // Handles: optional whitespace, single/double/unicode quotes, optional semicolon,
+  // and any trailing whitespace/newline sequences
+  content = content.replace(
+    /^\s*["'\u2018\u2019\u201C\u201D]use\s+strict["'\u2018\u2019\u201C\u201D]\s*;?\s*[\r\n]*/,
+    ""
+  )
+
+  // Ensure file ends with exactly one newline
+  if (!content.endsWith("\n")) {
+    content += "\n"
+  }
+
+  fs.writeFileSync(file, content, "utf8")
+})
+
+// eslint-disable-next-line no-console
+console.log(`Removed "use strict" from ${files.length} files`)

data/scripts/type-check-no-emit.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+/**
+ * Type-check script for lint-staged
+ *
+ * This script runs TypeScript type checking without emitting files.
+ * It ignores any arguments passed by lint-staged to ensure tsc uses
+ * the project's tsconfig.json rather than trying to compile individual files.
+ *
+ * Without this wrapper, lint-staged would pass staged file paths as arguments
+ * to tsc, causing it to ignore tsconfig.json and fail type checking.
+ */
+
+const { execSync } = require("child_process")
+
+try {
+  // Run tsc with no arguments (ignoring any passed by lint-staged)
+  // This ensures it uses tsconfig.json properly
+  execSync("npx tsc --noEmit", {
+    stdio: "inherit",
+    cwd: process.cwd()
+  })
+  process.exit(0)
+} catch (error) {
+  // Type checking failed
+  process.exit(1)
+}

data/test/package/config.test.js

@@ -71,6 +71,7 @@ describe("Config", () => {
   })
 
   test("should allow enabling integrity", () => {
+    process.env.RAILS_ENV = "production"
     process.env.SHAKAPACKER_CONFIG = "config/shakapacker_integrity.yml"
     const config = require("../../package/config")
 
@@ -78,6 +79,7 @@ describe("Config", () => {
   })
 
   test("should allow configuring hash functions", () => {
+    process.env.RAILS_ENV = "production"
     process.env.SHAKAPACKER_CONFIG = "config/shakapacker_integrity.yml"
     const config = require("../../package/config")
 
@@ -89,6 +91,7 @@ describe("Config", () => {
   })
 
   test("should allow configuring crossorigin", () => {
+    process.env.RAILS_ENV = "production"
     process.env.SHAKAPACKER_CONFIG = "config/shakapacker_integrity.yml"
     const config = require("../../package/config")
 

data/test/package/env.test.js

@@ -24,6 +24,18 @@ describe("Env", () => {
     delete process.env.NODE_ENV
     expect(require("../../package/env")).toStrictEqual({
       railsEnv: "development",
+      nodeEnv: "development",
+      isProduction: false,
+      isDevelopment: true,
+      runningWebpackDevServer: false
+    })
+  })
+
+  test("with undefined NODE_ENV and RAILS_ENV set to production", () => {
+    process.env.RAILS_ENV = "production"
+    delete process.env.NODE_ENV
+    expect(require("../../package/env")).toStrictEqual({
+      railsEnv: "production",
       nodeEnv: "production",
       isProduction: true,
       isDevelopment: false,
@@ -35,10 +47,10 @@ describe("Env", () => {
     delete process.env.NODE_ENV
     delete process.env.RAILS_ENV
     expect(require("../../package/env")).toStrictEqual({
-      railsEnv: "production",
-      nodeEnv: "production",
-      isProduction: true,
-      isDevelopment: false,
+      railsEnv: "development",
+      nodeEnv: "development",
+      isProduction: false,
+      isDevelopment: true,
       runningWebpackDevServer: false
     })
   })
@@ -48,10 +60,33 @@ describe("Env", () => {
     process.env.NODE_ENV = "staging"
     expect(require("../../package/env")).toStrictEqual({
       railsEnv: "staging",
-      nodeEnv: "production",
-      isProduction: true,
-      isDevelopment: false,
+      nodeEnv: "development",
+      isProduction: false,
+      isDevelopment: true,
+      runningWebpackDevServer: false
+    })
+  })
+
+  test("rejects malicious NODE_ENV values and uses default", () => {
+    process.env.RAILS_ENV = "development"
+    process.env.NODE_ENV = "../../../etc/passwd"
+    expect(require("../../package/env")).toStrictEqual({
+      railsEnv: "development",
+      nodeEnv: "development",
+      isProduction: false,
+      isDevelopment: true,
       runningWebpackDevServer: false
     })
   })
+
+  test("warns when NODE_ENV is invalid", () => {
+    const consoleSpy = jest.spyOn(console, "warn").mockImplementation()
+    process.env.NODE_ENV = "invalid"
+    delete process.env.RAILS_ENV
+    require("../../package/env")
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Invalid NODE_ENV value: invalid")
+    )
+    consoleSpy.mockRestore()
+  })
 })

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

@@ -7,6 +7,10 @@ const { chdirTestApp, resetEnv } = require("../../helpers")
 const rootPath = process.cwd()
 chdirTestApp()
 
+// Set NODE_ENV before requiring modules to ensure contenthash is enabled
+// Base config tests expect production-like behavior with contenthash
+process.env.NODE_ENV = "production"
+
 const baseConfig = require("../../../package/environments/base")
 const config = require("../../../package/config")
 
@@ -79,7 +83,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/babel.test.js

@@ -11,6 +11,7 @@ jest.mock("../../../package/config", () => {
   const original = jest.requireActual("../../../package/config")
   return {
     ...original,
+    javascript_transpiler: "babel", // Force babel for this test
     additional_paths: [...original.additional_paths, "node_modules/included"]
   }
 })
@@ -32,6 +33,21 @@ const createWebpackConfig = (file, use) => ({
 })
 
 describe("babel", () => {
+  // Mock validateBabelDependencies to avoid actual dependency checking in tests
+  beforeAll(() => {
+    jest.mock("../../../package/utils/helpers", () => {
+      const original = jest.requireActual("../../../package/utils/helpers")
+      return {
+        ...original,
+        validateBabelDependencies: jest.fn() // Mock to do nothing
+      }
+    })
+  })
+
+  afterAll(() => {
+    jest.unmock("../../../package/utils/helpers")
+  })
+
   test("process source path", async () => {
     const normalPath = `${pathToAppJavascript}/a.js`
     const [tracked, loader] = createTrackLoader()

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