shakapacker 9.0.0.beta.7 → 9.0.0.beta.8

data/package/plugins/{rspack.js → rspack.ts}

@@ -6,7 +6,22 @@ const config = require("../config")
 const { isProduction } = require("../env")
 const { moduleExists } = require("../utils/helpers")
 
-const getPlugins = () => {
+interface ManifestFile {
+  name: string
+  path: string
+}
+
+interface EntrypointAssets {
+  js: string[]
+  css: string[]
+}
+
+interface Manifest {
+  entrypoints?: Record<string, { assets: EntrypointAssets }>
+  [key: string]: string | { assets: EntrypointAssets } | Record<string, { assets: EntrypointAssets }> | undefined
+}
+
+const getPlugins = (): unknown[] => {
   const plugins = [
     new rspack.EnvironmentPlugin(process.env),
     new RspackManifestPlugin({
@@ -14,8 +29,8 @@ const getPlugins = () => {
       publicPath: config.publicPathWithoutCDN,
       writeToFileEmit: true,
       // rspack-manifest-plugin uses different option names than webpack-assets-manifest
-      generate: (seed, files, entrypoints) => {
-        const manifest = seed || {}
+      generate: (seed: Manifest | null, files: ManifestFile[], entrypoints: Record<string, string[]>) => {
+        const manifest: Manifest = seed || {}
 
         // Add files mapping first
         files.forEach((file) => {
@@ -23,7 +38,7 @@ const getPlugins = () => {
         })
 
         // Add entrypoints information compatible with Shakapacker expectations
-        const entrypointsManifest = {}
+        const entrypointsManifest: Record<string, { assets: EntrypointAssets }> = {}
         Object.entries(entrypoints).forEach(
           ([entrypointName, entrypointFiles]) => {
             const jsFiles = entrypointFiles
@@ -83,6 +98,6 @@ const getPlugins = () => {
   return plugins
 }
 
-module.exports = {
+export = {
   getPlugins
 }

data/package/plugins/{webpack.js → webpack.ts}

@@ -6,7 +6,7 @@ const config = require("../config")
 const { isProduction } = require("../env")
 const { moduleExists } = require("../utils/helpers")
 
-const getPlugins = () => {
+const getPlugins = (): unknown[] => {
   // TODO: Remove WebpackAssetsManifestConstructor workaround when dropping 'webpack-assets-manifest < 6.0.0' (Node >=20.10.0) support
   const WebpackAssetsManifestConstructor =
     "WebpackAssetsManifest" in WebpackAssetsManifest
@@ -57,6 +57,6 @@ const getPlugins = () => {
   return plugins
 }
 
-module.exports = {
+export = {
   getPlugins
 }

data/package/rspack/{index.js → index.ts}

@@ -1,14 +1,15 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
+// Mixed require/import syntax:
+// - Using require() for compiled JS modules that may not have proper ES module exports
+// - Using import for type-only imports and Node.js built-in modules
 const webpackMerge = require("webpack-merge")
-const { resolve } = require("path")
-const { existsSync } = require("fs")
+import { resolve } from "path"
+import { existsSync } from "fs"
+import type { RspackConfigWithDevServer } from "../environments/types"
 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")
@@ -17,7 +18,10 @@ const { getPlugins } = require("../plugins/rspack")
 const { getOptimization } = require("../optimization/rspack")
 const { validateRspackDependencies } = require("../utils/validateDependencies")
 
-const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
+const rulesPath = resolve(__dirname, "../rules", "rspack.js")
+const rules = require(rulesPath)
+
+const generateRspackConfig = (extraConfig: RspackConfigWithDevServer = {}, ...extraArgs: unknown[]): RspackConfigWithDevServer => {
   // Validate required dependencies first
   validateRspackDependencies()
   if (extraArgs.length > 0) {
@@ -28,10 +32,11 @@ const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
 
   const { nodeEnv } = env
   const path = resolve(__dirname, "../environments", `${nodeEnv}.js`)
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const environmentConfig = existsSync(path) ? require(path) : baseConfig
 
   // Create base rspack config
-  const rspackConfig = {
+  const rspackConfig: RspackConfigWithDevServer = {
     ...environmentConfig,
     module: {
       rules
@@ -43,7 +48,10 @@ const generateRspackConfig = (extraConfig = {}, ...extraArgs) => {
   return webpackMerge.merge({}, rspackConfig, extraConfig)
 }
 
-module.exports = {
+// Re-export webpack-merge utilities for backward compatibility
+export { merge, mergeWithCustomize, mergeWithRules, unique } from "webpack-merge"
+
+export {
   config, // shakapacker.yml
   devServer,
   generateRspackConfig,
@@ -52,6 +60,5 @@ module.exports = {
   rules,
   moduleExists,
   canProcess,
-  inliningCss,
-  ...webpackMerge
+  inliningCss
 }

data/package/rules/{babel.js → babel.ts}

@@ -3,7 +3,7 @@ const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const { isProduction } = require("../env")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(javascriptTranspiler, "babel", () => ({
+export = loaderMatches(javascriptTranspiler, "babel", () => ({
   test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
   ...jscommon,
   use: [

data/package/rules/{coffee.js → coffee.ts}

@@ -1,6 +1,6 @@
 const { canProcess } = require("../utils/helpers")
 
-module.exports = canProcess("coffee-loader", (resolvedPath) => ({
+export = canProcess("coffee-loader", (resolvedPath: string) => ({
   test: /\.coffee(\.erb)?$/,
   use: [{ loader: resolvedPath }]
 }))

data/package/rules/{css.js → css.ts}

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

data/package/rules/{erb.js → erb.ts}

@@ -2,7 +2,7 @@ const { canProcess } = require("../utils/helpers")
 
 const runner = /^win/.test(process.platform) ? "ruby " : ""
 
-module.exports = canProcess("rails-erb-loader", (resolvedPath) => ({
+export = canProcess("rails-erb-loader", (resolvedPath: string) => ({
   test: /\.erb$/,
   enforce: "pre",
   exclude: /node_modules/,

data/package/rules/{esbuild.js → esbuild.ts}

@@ -3,8 +3,8 @@ const { getEsbuildLoaderConfig } = require("../esbuild")
 const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(javascriptTranspiler, "esbuild", () => ({
+export = loaderMatches(javascriptTranspiler, "esbuild", () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
   ...jscommon,
-  use: ({ resource }) => getEsbuildLoaderConfig(resource)
+  use: ({ resource }: { resource: string }) => getEsbuildLoaderConfig(resource)
 }))

data/package/rules/{file.js → file.ts}

@@ -1,21 +1,25 @@
-const { dirname, sep, normalize } = require("path")
+import { dirname, sep, normalize } from "path"
 const {
   additional_paths: additionalPaths,
   source_path: sourcePath
 } = require("../config")
 
-module.exports = {
+export = {
   test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg)$/,
   exclude: /\.(js|mjs|jsx|ts|tsx)$/,
   type: "asset/resource",
   generator: {
-    filename: (pathData) => {
+    filename: (pathData: { filename?: string }) => {
+      // Guard against null/undefined pathData or filename
+      if (!pathData || !pathData.filename) {
+        return `static/[name]-[hash][ext][query]`
+      }
       const path = normalize(dirname(pathData.filename))
-      const stripPaths = [...additionalPaths, sourcePath].map((p) =>
+      const stripPaths = [...additionalPaths, sourcePath].map((p: string) =>
         normalize(p)
       )
 
-      const selectedStripPath = stripPaths.find((includePath) =>
+      const selectedStripPath = stripPaths.find((includePath: string) =>
         path.startsWith(includePath)
       )
 
@@ -23,9 +27,10 @@ module.exports = {
         return `static/[name]-[hash][ext][query]`
       }
 
+      // Split on both forward and backward slashes for cross-platform compatibility
       const folders = path
         .replace(selectedStripPath, "")
-        .split(sep)
+        .split(/[\\/]/)
         .filter(Boolean)
 
       const foldersWithStatic = ["static", ...folders].join("/")

data/package/rules/{jscommon.js → jscommon.ts}

@@ -1,11 +1,11 @@
-const { resolve } = require("path")
-const { realpathSync } = require("fs")
+import { resolve } from "path"
+import { realpathSync } from "fs"
 const {
   source_path: sourcePath,
   additional_paths: additionalPaths
 } = require("../config")
 
-const inclusions = [sourcePath, ...additionalPaths].map((p) => {
+const inclusions = [sourcePath, ...additionalPaths].map((p: string) => {
   try {
     return realpathSync(p)
   } catch (e) {
@@ -13,7 +13,7 @@ const inclusions = [sourcePath, ...additionalPaths].map((p) => {
   }
 })
 
-module.exports = {
+export = {
   include: inclusions,
   exclude: [
     {

data/package/rules/{less.js → less.ts}

@@ -1,4 +1,3 @@
-const path = require("path")
 const { canProcess } = require("../utils/helpers")
 const { getStyleRule } = require("../utils/getStyleRule")
 
@@ -7,13 +6,14 @@ const {
   source_path: sourcePath
 } = require("../config")
 
-module.exports = canProcess("less-loader", (resolvedPath) =>
+export = canProcess("less-loader", (resolvedPath: string) =>
   getStyleRule(/\.(less)(\.erb)?$/i, [
     {
       loader: resolvedPath,
       options: {
         lessOptions: {
-          paths: [path.resolve(__dirname, "node_modules"), sourcePath, ...paths]
+          // Additional paths for Less imports (node_modules is resolved automatically)
+          paths: [sourcePath, ...paths]
         },
         sourceMap: true
       }

data/package/rules/raw.ts

@@ -0,0 +1,25 @@
+const config = require("../config")
+
+const rspackRawConfig = () => ({
+  resourceQuery: /raw/,
+  type: "asset/source"
+})
+
+const webpackRawConfig = () => ({
+  oneOf: [
+    {
+      // Match any file with ?raw query parameter
+      resourceQuery: /raw/,
+      type: "asset/source"
+    },
+    {
+      // Fallback: match .html files without query
+      test: /\.html$/,
+      exclude: /\.(js|mjs|jsx|ts|tsx)$/,
+      type: "asset/source"
+    }
+  ]
+})
+
+export =
+  config.assets_bundler === "rspack" ? rspackRawConfig() : webpackRawConfig()

data/package/rules/{rspack.js → rspack.ts}

@@ -141,26 +141,36 @@ if (erb) {
 }
 
 // File/asset handling using Rspack's built-in asset modules
+// This is a critical rule required for proper asset handling
 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")
+if (!file) {
+  throw new Error(
+    "CRITICAL: file rule configuration returned null. " +
+      "Asset handling is required for proper bundling. " +
+      "Please ensure the file rule module exports a valid rule configuration."
+  )
 }
 
+debug("Successfully added file/asset rule")
+rules.push(file)
+
 // Raw file loading
+// This is a critical rule required for raw file imports
 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")
+if (!raw) {
+  throw new Error(
+    "CRITICAL: raw rule configuration returned null. " +
+      "Raw file loading is required for proper bundling. " +
+      "Please ensure the raw rule module exports a valid rule configuration."
+  )
 }
 
+debug("Successfully added raw file rule")
+rules.push(raw)
+
 debug(`Rspack rules configuration complete. Total rules: ${rules.length}`)
-module.exports = rules
+export = rules

data/package/rules/{sass.js → sass.ts}

@@ -4,7 +4,7 @@ const { getStyleRule } = require("../utils/getStyleRule")
 const { canProcess, packageMajorVersion } = require("../utils/helpers")
 const { additional_paths: extraPaths } = require("../config")
 
-module.exports = canProcess("sass-loader", (resolvedPath) => {
+export = canProcess("sass-loader", (resolvedPath: string) => {
   const optionKey =
     packageMajorVersion("sass-loader") > 15 ? "loadPaths" : "includePaths"
   return getStyleRule(/\.(scss|sass)(\.erb)?$/i, [

data/package/rules/{stylus.js → stylus.ts}

@@ -1,4 +1,3 @@
-const path = require("path")
 const { canProcess } = require("../utils/helpers")
 const { getStyleRule } = require("../utils/getStyleRule")
 
@@ -7,17 +6,14 @@ const {
   source_path: sourcePath
 } = require("../config")
 
-module.exports = canProcess("stylus-loader", (resolvedPath) =>
+export = canProcess("stylus-loader", (resolvedPath: string) =>
   getStyleRule(/\.(styl(us)?)(\.erb)?$/i, [
     {
       loader: resolvedPath,
       options: {
         stylusOptions: {
-          include: [
-            path.resolve(__dirname, "node_modules"),
-            sourcePath,
-            ...paths
-          ]
+          // Additional paths for Stylus imports (node_modules is resolved automatically)
+          include: [sourcePath, ...paths]
         },
         sourceMap: true
       }

data/package/rules/{swc.js → swc.ts}

@@ -3,8 +3,8 @@ const { getSwcLoaderConfig } = require("../swc")
 const { javascript_transpiler: javascriptTranspiler } = require("../config")
 const jscommon = require("./jscommon")
 
-module.exports = loaderMatches(javascriptTranspiler, "swc", () => ({
+export = loaderMatches(javascriptTranspiler, "swc", () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
   ...jscommon,
-  use: ({ resource }) => getSwcLoaderConfig(resource)
+  use: ({ resource }: { resource: string }) => getSwcLoaderConfig(resource)
 }))

data/package/rules/{webpack.js → webpack.ts}

@@ -1,7 +1,7 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
-module.exports = [
+export = [
   require("./raw"),
   require("./file"),
   require("./css"),

data/package/swc/index.ts

@@ -0,0 +1,54 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+import { resolve } from "path"
+import { existsSync } from "fs"
+import { merge } from "webpack-merge"
+import type { RuleSetRule } from "webpack"
+
+const JSX_FILE_REGEX = /\.(jsx|tsx)(\.erb)?$/
+const TYPESCRIPT_FILE_REGEX = /\.(ts|tsx)(\.erb)?$/
+
+const isJsxFile = (filename: string): boolean => !!filename.match(JSX_FILE_REGEX)
+
+const isTypescriptFile = (filename: string): boolean => !!filename.match(TYPESCRIPT_FILE_REGEX)
+
+const getCustomConfig = (): Partial<RuleSetRule> => {
+  const path = resolve("config", "swc.config.js")
+  if (existsSync(path)) {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require(path)
+  }
+  return {}
+}
+
+const getSwcLoaderConfig = (filenameToProcess: string): RuleSetRule => {
+  const customConfig = getCustomConfig()
+  const isTs = isTypescriptFile(filenameToProcess)
+  const isJsx = isJsxFile(filenameToProcess)
+  const jsxKey = isTs ? "tsx" : "jsx"
+
+  const defaultConfig: RuleSetRule = {
+    loader: require.resolve("swc-loader"),
+    options: {
+      jsc: {
+        parser: {
+          dynamicImport: true,
+          syntax: isTs ? "typescript" : "ecmascript",
+          [jsxKey]: isJsx
+        },
+        loose: true
+      },
+      sourceMaps: true,
+      env: {
+        coreJs: 3,
+        exclude: ["transform-typeof-symbol"],
+        mode: "entry"
+      }
+    }
+  }
+
+  return merge(defaultConfig, customConfig)
+}
+
+export { getSwcLoaderConfig }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.8",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "homepage": "https://github.com/shakacode/shakapacker",
   "bugs": {
@@ -34,6 +34,7 @@
     "build": "tsc && node scripts/remove-use-strict.js && yarn prettier --write 'package/**/*.js'",
     "build:types": "tsc",
     "lint": "eslint .",
+    "lint:fast": "eslint . --ext .js,.jsx,.ts,.tsx --config .eslintrc.fast.js",
     "test": "jest",
     "type-check": "tsc --noEmit",
     "prepublishOnly": "yarn build && yarn type-check"
@@ -46,12 +47,15 @@
   "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",
@@ -65,7 +69,9 @@
     "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",
@@ -83,8 +89,8 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/runtime": "^7.17.9",
-    "@rspack/core": "^1.0.0",
     "@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",
@@ -183,6 +189,20 @@
     }
   },
   "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/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/rules/raw.test.js

@@ -1,12 +1,45 @@
-const raw = require("../../../package/rules/raw")
-
 describe("raw", () => {
-  test("expected file types", () => {
-    expect(raw.test.test(".html")).toBe(true)
+  describe("rspack bundler", () => {
+    beforeEach(() => {
+      jest.resetModules()
+      jest.doMock("../../../package/config", () => ({
+        assets_bundler: "rspack"
+      }))
+    })
+
+    afterEach(() => {
+      jest.dontMock("../../../package/config")
+    })
+
+    test("uses resourceQuery for any file with ?raw", () => {
+      const raw = require("../../../package/rules/raw")
+      expect(raw.resourceQuery).toStrictEqual(/raw/)
+      expect(raw.type).toBe("asset/source")
+    })
   })
 
-  test("exclude expected file types", () => {
-    const types = [".js", ".mjs", ".jsx", ".ts", ".tsx"]
-    types.forEach((type) => expect(raw.exclude.test(type)).toBe(true))
+  describe("webpack bundler", () => {
+    beforeEach(() => {
+      jest.resetModules()
+      jest.doMock("../../../package/config", () => ({
+        assets_bundler: "webpack"
+      }))
+    })
+
+    afterEach(() => {
+      jest.dontMock("../../../package/config")
+    })
+
+    test("supports ?raw query and .html fallback with oneOf", () => {
+      const raw = require("../../../package/rules/raw")
+      expect(raw.oneOf).toHaveLength(2)
+      // First rule: any file with ?raw
+      expect(raw.oneOf[0].resourceQuery).toStrictEqual(/raw/)
+      expect(raw.oneOf[0].type).toBe("asset/source")
+      // Second rule: .html files without query
+      expect(raw.oneOf[1].test.test(".html")).toBe(true)
+      expect(raw.oneOf[1].exclude.test(".js")).toBe(true)
+      expect(raw.oneOf[1].type).toBe("asset/source")
+    })
   })
 })

data/test/package/rules/webpack.test.js

@@ -10,7 +10,26 @@ jest.mock("../../../package/utils/helpers", () => {
 })
 
 describe("index", () => {
-  test("rule tests are regexes", () => {
-    rules.forEach((rule) => expect(rule.test instanceof RegExp).toBe(true))
+  test("rule tests are regexes or oneOf arrays", () => {
+    const rulesWithTest = rules.filter((rule) => !rule.oneOf)
+    const rulesWithOneOf = rules.filter((rule) => rule.oneOf)
+
+    // Verify all non-oneOf rules have test property
+    rulesWithTest.forEach((rule) => {
+      expect(rule.test).toBeInstanceOf(RegExp)
+    })
+
+    // Verify all oneOf rules are properly structured
+    rulesWithOneOf.forEach((rule) => {
+      expect(Array.isArray(rule.oneOf)).toBe(true)
+      rule.oneOf.forEach((subRule) => {
+        // Each subRule must have either a test or resourceQuery property (RegExp)
+        const matchers = [
+          subRule.test instanceof RegExp,
+          subRule.resourceQuery instanceof RegExp
+        ]
+        expect(matchers.some(Boolean)).toBe(true)
+      })
+    })
   })
 })

data/tsconfig.eslint.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "."
+  },
+  "include": [
+    "package/**/*.ts",
+    "package/**/*.tsx",
+    "package/**/*.test.ts",
+    "package/**/*.spec.ts",
+    "test/**/*.ts",
+    "test/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}