shakapacker 9.2.0 → 9.3.0.beta.0

data/test/configExporter/integration.test.js

@@ -0,0 +1,275 @@
+const {
+  writeFileSync,
+  mkdirSync,
+  rmSync,
+  existsSync,
+  readdirSync
+} = require("fs")
+const { resolve, join } = require("path")
+const { execSync } = require("child_process")
+
+describe("Config Exporter Integration Tests", () => {
+  const testDir = resolve(__dirname, "../tmp/integration-test")
+  const configPath = join(testDir, ".bundler-config.yml")
+  const outputDir = join(testDir, "output")
+  const binPath = resolve(__dirname, "../../bin/export-bundler-config")
+
+  beforeEach(() => {
+    // Create test directory
+    if (existsSync(testDir)) {
+      rmSync(testDir, { recursive: true, force: true })
+    }
+    mkdirSync(testDir, { recursive: true })
+
+    // Create minimal package.json
+    writeFileSync(
+      join(testDir, "package.json"),
+      JSON.stringify({ name: "test-app", private: true })
+    )
+
+    // Create minimal shakapacker.yml
+    writeFileSync(
+      join(testDir, "shakapacker.yml"),
+      `default: &default
+  source_path: app/javascript
+  source_entry_path: /
+  public_root_path: public
+  public_output_path: packs
+
+development:
+  <<: *default
+  compile: true
+
+production:
+  <<: *default
+  compile: true
+`
+    )
+
+    // Create minimal webpack config that doesn't require shakapacker
+    mkdirSync(join(testDir, "config", "webpack"), { recursive: true })
+    writeFileSync(
+      join(testDir, "config", "webpack", "webpack.config.js"),
+      `module.exports = {
+  mode: process.env.NODE_ENV || 'development',
+  entry: './app/javascript/application.js',
+  output: {
+    path: require('path').resolve(__dirname, '../../public/packs'),
+    filename: '[name].js'
+  }
+}\n`
+    )
+
+    // Create minimal entry file
+    mkdirSync(join(testDir, "app", "javascript"), { recursive: true })
+    writeFileSync(
+      join(testDir, "app", "javascript", "application.js"),
+      "// Test entry file\nconsole.log('test');\n"
+    )
+  })
+
+  afterEach(() => {
+    if (existsSync(testDir)) {
+      rmSync(testDir, { recursive: true, force: true })
+    }
+  })
+
+  describe("--all-builds with environment variable isolation", () => {
+    it("should isolate environment variables between builds", () => {
+      // Create config with builds that have different env vars
+      const configContent = `
+default_bundler: webpack
+
+builds:
+  dev-hmr:
+    description: Development with HMR
+    environment:
+      NODE_ENV: development
+      RAILS_ENV: development
+      WEBPACK_SERVE: "true"
+    outputs:
+      - client
+
+  dev:
+    description: Development without HMR
+    environment:
+      NODE_ENV: development
+      RAILS_ENV: development
+    outputs:
+      - client
+
+  prod:
+    description: Production
+    environment:
+      NODE_ENV: production
+      RAILS_ENV: production
+    outputs:
+      - client
+`
+      writeFileSync(configPath, configContent)
+
+      // Run --all-builds command
+      const result = execSync(
+        `cd "${testDir}" && node "${binPath}" --all-builds --save-dir="${outputDir}"`,
+        { encoding: "utf8" }
+      )
+
+      // Verify output
+      expect(result).toContain("Exporting 3 builds")
+      expect(result).toContain("dev-hmr")
+      expect(result).toContain("dev")
+      expect(result).toContain("prod")
+
+      // Verify files were created
+      expect(existsSync(outputDir)).toBe(true)
+      const files = readdirSync(outputDir)
+
+      // Should have 3 files (one per build)
+      expect(files).toHaveLength(3)
+      expect(files).toContain("webpack-dev-hmr-client.yaml")
+      expect(files).toContain("webpack-dev-client.yaml")
+      expect(files).toContain("webpack-prod-client.yaml")
+
+      // Verify files have different content (proving environment isolation)
+      const devHmrContent = require("fs").readFileSync(
+        join(outputDir, "webpack-dev-hmr-client.yaml"),
+        "utf8"
+      )
+      const devContent = require("fs").readFileSync(
+        join(outputDir, "webpack-dev-client.yaml"),
+        "utf8"
+      )
+      const prodContent = require("fs").readFileSync(
+        join(outputDir, "webpack-prod-client.yaml"),
+        "utf8"
+      )
+
+      // All three files should be different (proving isolation)
+      expect(devHmrContent).not.toBe(devContent)
+      expect(devContent).not.toBe(prodContent)
+      expect(devHmrContent).not.toBe(prodContent)
+
+      // Verify environment-specific values
+      expect(devContent).toContain("mode: development")
+      expect(prodContent).toContain("mode: production")
+    })
+  })
+
+  describe("--doctor mode with shakapacker_doctor_default_builds_here", () => {
+    it("should use config file builds when flag is set", () => {
+      // Create config with custom builds and the flag
+      const configContent = `
+shakapacker_doctor_default_builds_here: true
+default_bundler: webpack
+
+builds:
+  custom-dev:
+    description: Custom development
+    environment:
+      NODE_ENV: development
+      RAILS_ENV: development
+    outputs:
+      - client
+
+  custom-prod:
+    description: Custom production
+    environment:
+      NODE_ENV: production
+      RAILS_ENV: production
+    outputs:
+      - client
+`
+      writeFileSync(configPath, configContent)
+
+      // Run --doctor command
+      const result = execSync(
+        `cd "${testDir}" && node "${binPath}" --doctor --save-dir="${outputDir}"`,
+        { encoding: "utf8" }
+      )
+
+      // Verify it used config builds, not hardcoded ones
+      expect(result).toContain(
+        "Using builds from config file (shakapacker_doctor_default_builds_here: true)"
+      )
+      expect(result).toContain("custom-dev")
+      expect(result).toContain("custom-prod")
+
+      // Verify files
+      expect(existsSync(outputDir)).toBe(true)
+      const files = readdirSync(outputDir)
+      expect(files).toContain("webpack-custom-dev-client.yaml")
+      expect(files).toContain("webpack-custom-prod-client.yaml")
+    })
+
+    it("should use hardcoded builds when flag is not set", () => {
+      // Create config WITHOUT the flag
+      const configContent = `
+default_bundler: webpack
+
+builds:
+  custom-dev:
+    description: Custom development
+    environment:
+      NODE_ENV: development
+    outputs:
+      - client
+`
+      writeFileSync(configPath, configContent)
+
+      // Run --doctor command
+      const result = execSync(
+        `cd "${testDir}" && node "${binPath}" --doctor --save-dir="${outputDir}"`,
+        { encoding: "utf8" }
+      )
+
+      // Verify it used hardcoded builds (development-hmr, development, production)
+      expect(result).toContain("development-hmr")
+      expect(result).toContain("development")
+      expect(result).toContain("production")
+      expect(result).not.toContain("custom-dev")
+    })
+  })
+
+  describe("hMR config generation", () => {
+    it("should generate HMR client config with correct metadata", () => {
+      const configContent = `
+default_bundler: webpack
+
+builds:
+  dev-hmr:
+    description: Development with HMR
+    environment:
+      NODE_ENV: development
+      RAILS_ENV: development
+      WEBPACK_SERVE: "true"
+    outputs:
+      - client
+`
+      writeFileSync(configPath, configContent)
+
+      // Run command
+      execSync(
+        `cd "${testDir}" && node "${binPath}" --build=dev-hmr --save-dir="${outputDir}"`,
+        { encoding: "utf8" }
+      )
+
+      // Verify HMR file was created with correct naming
+      expect(existsSync(outputDir)).toBe(true)
+      const files = readdirSync(outputDir)
+
+      // Should create file with -hmr suffix or similar indicator
+      expect(files).toHaveLength(1)
+      const filename = files[0]
+
+      // Read content and verify it's a valid webpack config
+      const content = require("fs").readFileSync(
+        join(outputDir, filename),
+        "utf8"
+      )
+      // Verify it contains webpack config content
+      expect(content).toContain("mode: development")
+      expect(content).toContain("entry:")
+      expect(content).toContain("output:")
+    })
+  })
+})

data/test/helpers.js

@@ -43,7 +43,7 @@ const createTestCompiler = (config, fs = createInMemoryFs()) => {
 const chdirTestApp = () => {
   try {
     return process.chdir("spec/shakapacker/test_app")
-  } catch (e) {
+  } catch {
     return null
   }
 }

data/test/package/configExporter.test.js

@@ -0,0 +1,154 @@
+const { resetEnv } = require("../helpers")
+
+// Helper function that mimics the env var restore logic from cli.ts lines 267-282
+function restoreEnvVars(saved) {
+  Object.keys(saved).forEach((key) => {
+    if (saved[key] === undefined) {
+      delete process.env[key]
+    } else {
+      process.env[key] = saved[key]
+    }
+  })
+}
+
+describe("configExporter", () => {
+  beforeEach(() => jest.resetModules() && resetEnv())
+
+  describe("fileWriter", () => {
+    test("generates correct filename for client config", () => {
+      const { FileWriter } = require("../../package/configExporter/fileWriter")
+      const writer = new FileWriter()
+      const filename = writer.generateFilename(
+        "webpack",
+        "development",
+        "client",
+        "yaml"
+      )
+      expect(filename).toBe("webpack-development-client.yaml")
+    })
+
+    test("generates correct filename for server config", () => {
+      const { FileWriter } = require("../../package/configExporter/fileWriter")
+      const writer = new FileWriter()
+      const filename = writer.generateFilename(
+        "webpack",
+        "production",
+        "server",
+        "yaml"
+      )
+      expect(filename).toBe("webpack-production-server.yaml")
+    })
+
+    test("generates correct filename for client-hmr config", () => {
+      const { FileWriter } = require("../../package/configExporter/fileWriter")
+      const writer = new FileWriter()
+      const filename = writer.generateFilename(
+        "webpack",
+        "development",
+        "client-hmr",
+        "yaml"
+      )
+      expect(filename).toBe("webpack-development-client-hmr.yaml")
+    })
+
+    test("generates correct filename for json format", () => {
+      const { FileWriter } = require("../../package/configExporter/fileWriter")
+      const writer = new FileWriter()
+      const filename = writer.generateFilename(
+        "rspack",
+        "production",
+        "client",
+        "json"
+      )
+      expect(filename).toBe("rspack-production-client.json")
+    })
+  })
+
+  describe("environment variable preservation in runDoctorMode", () => {
+    let originalEnv
+
+    beforeEach(() => {
+      // Save original environment
+      originalEnv = {
+        NODE_ENV: process.env.NODE_ENV,
+        RAILS_ENV: process.env.RAILS_ENV,
+        CLIENT_BUNDLE_ONLY: process.env.CLIENT_BUNDLE_ONLY,
+        SERVER_BUNDLE_ONLY: process.env.SERVER_BUNDLE_ONLY,
+        WEBPACK_SERVE: process.env.WEBPACK_SERVE
+      }
+
+      // Set up known initial state for development mode
+      process.env.NODE_ENV = "development"
+      process.env.RAILS_ENV = "development"
+      delete process.env.WEBPACK_SERVE
+      delete process.env.SERVER_BUNDLE_ONLY
+    })
+
+    afterEach(() => {
+      // Restore original environment
+      Object.keys(originalEnv).forEach((key) => {
+        if (originalEnv[key] === undefined) {
+          delete process.env[key]
+        } else {
+          process.env[key] = originalEnv[key]
+        }
+      })
+    })
+
+    test("preserves CLIENT_BUNDLE_ONLY when set before doctor mode", async () => {
+      // Set a custom value that should be preserved
+      process.env.CLIENT_BUNDLE_ONLY = "custom_value"
+
+      // The doctor mode code internally does:
+      // 1. Save original
+      const saved = {
+        CLIENT_BUNDLE_ONLY: process.env.CLIENT_BUNDLE_ONLY,
+        WEBPACK_SERVE: process.env.WEBPACK_SERVE,
+        SERVER_BUNDLE_ONLY: process.env.SERVER_BUNDLE_ONLY
+      }
+
+      // 2. Set HMR env vars
+      process.env.WEBPACK_SERVE = "true"
+      process.env.CLIENT_BUNDLE_ONLY = "yes"
+      delete process.env.SERVER_BUNDLE_ONLY
+
+      // 3. Restore using helper
+      restoreEnvVars(saved)
+
+      // Assert the original value is preserved
+      expect(process.env.CLIENT_BUNDLE_ONLY).toBe("custom_value")
+      expect(process.env.WEBPACK_SERVE).toBeUndefined()
+      expect(process.env.SERVER_BUNDLE_ONLY).toBeUndefined()
+    })
+
+    test("deletes CLIENT_BUNDLE_ONLY when not set before doctor mode", async () => {
+      // Ensure CLIENT_BUNDLE_ONLY is not set
+      delete process.env.CLIENT_BUNDLE_ONLY
+
+      // The doctor mode code internally does:
+      // 1. Save original
+      const saved = {
+        CLIENT_BUNDLE_ONLY: process.env.CLIENT_BUNDLE_ONLY,
+        WEBPACK_SERVE: process.env.WEBPACK_SERVE,
+        SERVER_BUNDLE_ONLY: process.env.SERVER_BUNDLE_ONLY
+      }
+
+      // 2. Set HMR env vars
+      process.env.WEBPACK_SERVE = "true"
+      process.env.CLIENT_BUNDLE_ONLY = "yes"
+      delete process.env.SERVER_BUNDLE_ONLY
+
+      // Verify they were set
+      expect(process.env.CLIENT_BUNDLE_ONLY).toBe("yes")
+      expect(process.env.WEBPACK_SERVE).toBe("true")
+
+      // 3. Restore using helper
+      restoreEnvVars(saved)
+
+      // Assert the variables are deleted since they were not set originally
+      expect(process.env.CLIENT_BUNDLE_ONLY).toBeUndefined()
+      expect(process.env.WEBPACK_SERVE).toBeUndefined()
+      expect(process.env.SERVER_BUNDLE_ONLY).toBeUndefined()
+    })
+  })
+})

data/test/package/helpers.test.js

@@ -2,10 +2,10 @@ const { packageMajorVersion } = require("../../package/utils/helpers")
 
 describe("packageMajorVersion", () => {
   test("should find that sass-loader is v16", () => {
-    expect(packageMajorVersion("sass-loader")).toBe("16")
+    expect(packageMajorVersion("sass-loader")).toBe(16)
   })
 
   test("should find that nonexistent is v12", () => {
-    expect(packageMajorVersion("nonexistent")).toBe("12")
+    expect(packageMajorVersion("nonexistent")).toBe(12)
   })
 })

data/test/package/rules/sass-version-parsing.test.js

@@ -0,0 +1,71 @@
+/**
+ * Tests demonstrating why parseInt is needed for sass-loader version comparison
+ */
+
+describe("sass-loader version comparison", () => {
+  describe("string comparison issues (without parseInt)", () => {
+    test("string '2' incorrectly compares as greater than number 15", () => {
+      // This demonstrates the bug: lexicographic string comparison
+      const stringVersion = "2"
+      // String comparison would be: "2" > 15
+      // JavaScript coerces to: 2 > 15 = false (correct)
+      expect(stringVersion > 15).toBe(false)
+
+      // But with >= 16 (the boundary we care about):
+      expect(stringVersion >= 16).toBe(false) // Correct behavior
+    })
+
+    test("string '16' correctly converts in numeric comparison", () => {
+      const stringVersion = "16"
+      // Coercion works: "16" >= 16 -> 16 >= 16 = true
+      expect(stringVersion >= 16).toBe(true)
+    })
+
+    test("demonstrates why > 15 is less clear than >= 16", () => {
+      // Version 15 should use includePaths
+      expect("15" > 15).toBe(false) // 15 > 15 = false ✓
+      expect(parseInt("15", 10) >= 16).toBe(false) // 15 >= 16 = false ✓
+
+      // Version 16 should use loadPaths
+      expect("16" > 15).toBe(true) // 16 > 15 = true ✓
+      expect(parseInt("16", 10) >= 16).toBe(true) // 16 >= 16 = true ✓
+
+      // But >= 16 is more semantically accurate:
+      // "Use loadPaths if version is 16 or greater"
+    })
+  })
+
+  describe("parseInt ensures numeric comparison", () => {
+    test("handles numeric string correctly", () => {
+      expect(parseInt("16", 10) >= 16).toBe(true)
+      expect(parseInt("15", 10) >= 16).toBe(false)
+      expect(parseInt("2", 10) >= 16).toBe(false)
+    })
+
+    test("handles edge cases safely", () => {
+      // If version can't be determined, parseInt returns NaN
+      // NaN >= 16 is false, so it falls back to includePaths (safe default)
+      expect(parseInt("invalid", 10) >= 16).toBe(false)
+      expect(parseInt(undefined, 10) >= 16).toBe(false)
+      expect(parseInt("", 10) >= 16).toBe(false)
+    })
+  })
+
+  describe("version 16 is the boundary", () => {
+    // Helper function to determine option key (same logic as production code)
+    const getOptionKey = (version) =>
+      version >= 16 ? "loadPaths" : "includePaths"
+
+    test("sass-loader v15 uses includePaths", () => {
+      expect(getOptionKey(15)).toBe("includePaths")
+    })
+
+    test("sass-loader v16 uses loadPaths", () => {
+      expect(getOptionKey(16)).toBe("loadPaths")
+    })
+
+    test("sass-loader v17+ uses loadPaths", () => {
+      expect(getOptionKey(17)).toBe("loadPaths")
+    })
+  })
+})

data/test/package/rules/sass.test.js

@@ -2,10 +2,8 @@ const sass = require("../../../package/rules/sass")
 
 jest.mock("../../../package/utils/helpers", () => {
   const original = jest.requireActual("../../../package/utils/helpers")
-  const canProcess = (rule, fn) => {
-    return fn("This path was mocked")
-  }
-  const packageMajorVersion = () => "15"
+  const canProcess = (rule, fn) => fn("This path was mocked")
+  const packageMajorVersion = () => 15
   return {
     ...original,
     canProcess,

data/test/package/rules/sass1.test.js

@@ -2,9 +2,7 @@ const sass = require("../../../package/rules/sass")
 
 jest.mock("../../../package/utils/helpers", () => {
   const original = jest.requireActual("../../../package/utils/helpers")
-  const canProcess = (rule, fn) => {
-    return fn("This path was mocked")
-  }
+  const canProcess = (rule, fn) => fn("This path was mocked")
   return {
     ...original,
     canProcess

data/test/package/rules/sass16.test.js

@@ -0,0 +1,23 @@
+const sass = require("../../../package/rules/sass")
+
+jest.mock("../../../package/utils/helpers", () => {
+  const original = jest.requireActual("../../../package/utils/helpers")
+  const canProcess = (rule, fn) => fn("This path was mocked")
+  const packageMajorVersion = () => 16
+  return {
+    ...original,
+    canProcess,
+    packageMajorVersion
+  }
+})
+
+jest.mock("../../../package/utils/inliningCss", () => true)
+
+describe("sass rule", () => {
+  test("contains loadPaths as the sassOptions key if sass-loader is v16 or later", () => {
+    expect(typeof sass.use[3].options.sassOptions.includePaths).toBe(
+      "undefined"
+    )
+    expect(typeof sass.use[3].options.sassOptions.loadPaths).toBe("object")
+  })
+})

data/tools/README.md

@@ -7,12 +7,14 @@ A jscodeshift codemod to help migrate CSS module imports from v8 to v9 format.
 ### What it does
 
 #### For JavaScript files (.js, .jsx):
+
 - Converts `import styles from './styles.module.css'` to `import { className1, className2 } from './styles.module.css'`
 - Automatically detects which CSS classes are used in the file
 - Handles kebab-case to camelCase conversion (e.g., `my-button` → `myButton`)
 - Updates all class references from `styles.className` to `className`
 
 #### For TypeScript files (.ts, .tsx):
+
 - Converts `import styles from './styles.module.css'` to `import * as styles from './styles.module.css'`
 - Preserves the same usage pattern (`styles.className`)
 - Works around TypeScript's limitation with dynamic named exports
@@ -26,21 +28,25 @@ npm install -g jscodeshift
 ### Usage
 
 #### Dry run (see what would change):
+
 ```bash
 npx jscodeshift -t tools/css-modules-v9-codemod.js src/ --dry
 ```
 
 #### Apply to JavaScript files:
+
 ```bash
 npx jscodeshift -t tools/css-modules-v9-codemod.js src/
 ```
 
 #### Apply to TypeScript files:
+
 ```bash
 npx jscodeshift -t tools/css-modules-v9-codemod.js --parser tsx src/
 ```
 
 #### Apply to specific file patterns:
+
 ```bash
 # Only .jsx files
 npx jscodeshift -t tools/css-modules-v9-codemod.js src/**/*.jsx
@@ -59,32 +65,35 @@ npx jscodeshift -t tools/css-modules-v9-codemod.js --parser tsx src/**/*.tsx
 ### Examples
 
 #### Before (JavaScript):
+
 ```javascript
-import styles from './Button.module.css';
+import styles from "./Button.module.css"
 
 function Button() {
   return (
     <button className={styles.button}>
-      <span className={styles['button-text']}>Click me</span>
+      <span className={styles["button-text"]}>Click me</span>
     </button>
-  );
+  )
 }
 ```
 
 #### After (JavaScript):
+
 ```javascript
-import { button, buttonText } from './Button.module.css';
+import { button, buttonText } from "./Button.module.css"
 
 function Button() {
   return (
     <button className={button}>
       <span className={buttonText}>Click me</span>
     </button>
-  );
+  )
 }
 ```
 
 #### Before (TypeScript):
+
 ```typescript
 import styles from './Button.module.css';
 
@@ -94,6 +103,7 @@ const Button: React.FC = () => {
 ```
 
 #### After (TypeScript):
+
 ```typescript
 import * as styles from './Button.module.css';
 

data/tsconfig.eslint.json

@@ -4,13 +4,6 @@
     "noEmit": true,
     "rootDir": "."
   },
-  "include": [
-    "package/**/*.ts",
-    "package/**/*.tsx",
-    "package/**/*.test.ts",
-    "package/**/*.spec.ts",
-    "test/**/*.ts",
-    "test/**/*.tsx"
-  ],
-  "exclude": ["node_modules"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "vendor"]
 }