shakapacker 8.4.0 → 9.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ccbba3c39a550ae683e13c45e3ac4f79733ae6ffebabf2d6ab55f37b7427d99
-  data.tar.gz: 569998bb9475e8ed2b8ba786d1ccdf2b84d562d61ba8ef78d08ad195c3ea2230
+  metadata.gz: 02da73fe458c789d3774f993cdc5d4ec082aec418d746bd96d279a6e636fb9dc
+  data.tar.gz: b0342e33b80c52751b7a63102492d9dbd3bcc88c485bd1b831ab902263d45404
 SHA512:
-  metadata.gz: 2c529d5f970394ca40b79d7ac1ddb430c197cbd508bf533195f13d81937cca872232436bcb92c5a8f38eafc9968ef0d1a82c280120545e421d143dcf72d12f0c
-  data.tar.gz: b341f56e92124b2418b56483dab20374aee03fca5de1e946e5b09ce1f2ca7d0daa16c47ed365a90f51a8f5bdf55235dbe9107cf95dc0a3b9b00e19056f72f343
+  metadata.gz: 9950e533356e907aa0e68202dfe40af8ed5d96f633ba4a0aeff28ddf214daaf1b9cd02bbb7b74ba0fa8d4bcea00c2c7b1cd6fdd7d14a8e0d333932c3ece79a7a
+  data.tar.gz: aeb7b646e6d07e7ed7dd056113b98521701161c7d2909ec18a4d0771b473e970d7006ccfec4b7a4da1e789da56be0d6ecb8d95db651d0fae8c7ef7cf70be951f

data/.github/STATUS.md

@@ -0,0 +1 @@
+# CI Status Update

data/.github/workflows/claude-code-review.yml

@@ -0,0 +1,54 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+    
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          prompt: |
+            Please review this pull request and provide feedback on:
+            - Code quality and best practices
+            - Potential bugs or issues
+            - Performance considerations
+            - Security concerns
+            - Test coverage
+            
+            Use the repository's CLAUDE.md for guidance on style and conventions. Be constructive and helpful in your feedback.
+
+            Use `gh pr comment` with your Bash tool to leave your review as a comment on the PR.
+          
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/sdk#command-line for available options
+          claude_args: '--allowed-tools "Bash(gh issue view:*),Bash(gh search:*),Bash(gh issue list:*),Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh pr list:*)"'
+

data/.github/workflows/claude.yml

@@ -0,0 +1,50 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/sdk#command-line for available options
+          # claude_args: '--model claude-opus-4-1-20250805 --allowed-tools Bash(gh pr:*)'
+

data/.github/workflows/dummy.yml

@@ -21,7 +21,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '20'
       - uses: ruby/setup-ruby@v1
         with:
           ruby-version: '3.1.2'

data/.github/workflows/generator.yml

@@ -20,8 +20,6 @@ jobs:
         os: [ubuntu-latest]
         ruby: ['2.7', '3.0', '3.1', '3.2', '3.3', '3.4']
         gemfile:
-          - gemfiles/Gemfile-rails.6.0.x
-          - gemfiles/Gemfile-rails.6.1.x
           - gemfiles/Gemfile-rails.7.0.x
           - gemfiles/Gemfile-rails.7.1.x
           - gemfiles/Gemfile-rails.7.2.x
@@ -38,20 +36,8 @@ jobs:
             gemfile: gemfiles/Gemfile-rails.7.2.x
           - ruby: '3.0'
             gemfile: gemfiles/Gemfile-rails.8.0.x
-          - ruby: '3.1'
-            gemfile: gemfiles/Gemfile-rails.6.0.x
           - ruby: '3.1'
             gemfile: gemfiles/Gemfile-rails.8.0.x
-          - ruby: '3.2'
-            gemfile: gemfiles/Gemfile-rails.6.0.x
-          - ruby: '3.3'
-            gemfile: gemfiles/Gemfile-rails.6.0.x
-          - ruby: '3.3'
-            gemfile: gemfiles/Gemfile-rails.6.1.x
-          - ruby: '3.4'
-            gemfile: gemfiles/Gemfile-rails.6.0.x
-          - ruby: '3.4'
-            gemfile: gemfiles/Gemfile-rails.6.1.x
           - ruby: '3.4'
             gemfile: gemfiles/Gemfile-rails.7.0.x
 
@@ -67,4 +53,8 @@ jobs:
           ruby-version: ${{ matrix.ruby }}
           rubygems: latest
           bundler-cache: true
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: yarn
       - run: bundle exec rake run_spec:generator

data/.github/workflows/node.yml

@@ -35,7 +35,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14.x, 16.x, 18.x, 20.x]
+        node: [18.x, 20.x, 22.x]
 
     runs-on: ${{ matrix.os }}
 

data/.rubocop.yml

@@ -9,6 +9,7 @@ AllCops:
     - "vendor/**/*"
     - "node_modules/**/*"
     - "_actions/**/*"
+    - "spec/dummy-rspack/**/*"
 
 # Prefer &&/|| over and/or.
 Style/AndOr:

data/CHANGELOG.md

@@ -8,11 +8,17 @@
 ## [Unreleased]
 Changes since the last non-beta release.
 
-## [v8.4.0] - September 8, 2025
+### Added
+- Rspack support as an alternative assets bundler to webpack. Configure `assets_bundler: 'rspack'` in `shakapacker.yml` to use Rspack's faster Rust-based bundling with webpack-compatible APIs, built-in SWC loader, and CSS extraction. Automatic assets bundler detection in `bin/shakapacker` with fallback support for webpack configurations.
 
+### Changed
+- Configuration option renamed from `bundler` to `assets_bundler` to avoid confusion with Ruby's Bundler gem manager. The old `bundler` option is deprecated but still supported with a warning (not a breaking change).
+- BREAKING CHANGE: Configuration option renamed from `webpack_loader` to `javascript_transpiler` to better reflect its purpose of configuring JavaScript transpilation regardless of the bundler used. The old `webpack_loader` option is deprecated but still supported with a warning.
+
+## [v8.4.0] - September 8, 2025
 ### Added
 
-- Support for subresource integrity. [PR 570](https://github.com/shakacode/shakapacker/pull/570) by [panagiotisplytas](https://github.com/panagiotisplytas)
+* Support for subresource integrity. [PR 570](https://github.com/shakacode/shakapacker/pull/570) by [panagiotisplytas](https://github.com/panagiotisplytas)
 
 ### Fixed
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    shakapacker (8.4.0)
+    shakapacker (9.0.0.beta.2)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -217,7 +217,7 @@ GEM
       rubocop-ast (>= 1.31.1, < 2.0)
     ruby-progressbar (1.13.0)
     securerandom (0.3.1)
-    semantic_range (3.0.0)
+    semantic_range (3.1.0)
     stringio (3.1.1)
     thor (1.3.2)
     timeout (0.4.1)
@@ -248,4 +248,4 @@ DEPENDENCIES
   shakapacker!
 
 BUNDLED WITH
-   2.5.18
+   2.5.23

data/README.md

@@ -1018,8 +1018,8 @@ The following companies support our Open Source projects, and ShakaCode uses the
 <br />
 <br />
 
-<a href="https://www.jetbrains.com">
-  <img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
+<a href="https://jb.gg/OpenSource" style="margin-right: 20px;">
+  <img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" height="120px">
 </a>
 <a href="https://scoutapp.com">
   <picture>

data/Rakefile

@@ -24,6 +24,23 @@ namespace :run_spec do
         "bundle install",
         "yalc link shakapacker",
         "yarn install",
+        "NODE_ENV=test RAILS_ENV=test yarn run webpack --config config/webpack/webpack.config.js",
+        "bundle exec rspec"
+      ])
+    end
+  end
+
+  desc "Run specs in the dummy-rspack app"
+  task :dummy_rspack do
+    puts "Running dummy-rspack app specs"
+    spec_dummy_dir = Pathname.new(File.join("spec", "dummy-rspack")).realpath
+    Bundler.with_unbundled_env do
+      sh_in_dir(".", "yalc publish")
+      sh_in_dir(spec_dummy_dir, [
+        "bundle install",
+        "yalc link shakapacker",
+        "yarn install",
+        "NODE_ENV=test RAILS_ENV=test yarn run rspack build --config config/webpack/webpack.config.js",
         "bundle exec rspec"
       ])
     end
@@ -35,7 +52,7 @@ namespace :run_spec do
   end
 
   desc "Run all specs"
-  task all_specs: %i[gem dummy generator] do
+  task all_specs: %i[gem dummy dummy_rspack generator] do
     puts "Completed all RSpec tests"
   end
 end

data/docs/css-modules-export-mode.md

@@ -0,0 +1,288 @@
+# CSS Modules Export Mode
+
+Most React guides and tutorials expect to import CSS Modules using a **default export object**:
+
+```js
+import styles from './Foo.module.css';
+<button className={styles.bright} />
+```
+
+However, depending on configuration, `css-loader` may instead emit **named exports**:
+
+```js
+import { bright } from './Foo.module.css';
+<button className={bright} />
+```
+
+By default, Shakapacker currently leaves `css-loader`'s `modules.namedExport` option unset, which leads to **named exports** being used in many cases. This can surprise developers expecting the `import styles ...` pattern.
+
+---
+
+## How to Configure Shakapacker for Default Exports
+
+To force the more familiar `import styles ...` behavior (i.e. `namedExport: false`), update your webpack configuration as follows.
+
+### Option 1: Update `config/webpack/commonWebpackConfig.js` (Recommended)
+
+This approach modifies the common webpack configuration that applies to all environments:
+
+```js
+// config/webpack/commonWebpackConfig.js
+const { generateWebpackConfig, merge } = require('shakapacker');
+
+const baseClientWebpackConfig = generateWebpackConfig();
+
+// Override CSS Modules configuration to use default exports instead of named exports
+const overrideCssModulesConfig = (config) => {
+  // Find the CSS rule in the module rules
+  const cssRule = config.module.rules.find(rule =>
+    rule.test && rule.test.toString().includes('css')
+  );
+
+  if (cssRule && cssRule.use) {
+    const cssLoaderUse = cssRule.use.find(use =>
+      use.loader && use.loader.includes('css-loader')
+    );
+
+    if (cssLoaderUse && cssLoaderUse.options && cssLoaderUse.options.modules) {
+      // Set namedExport to false for default export behavior
+      cssLoaderUse.options.modules.namedExport = false;
+      cssLoaderUse.options.modules.exportLocalsConvention = 'asIs';
+    }
+  }
+
+  return config;
+};
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+const commonWebpackConfig = () => {
+  const config = merge({}, baseClientWebpackConfig, commonOptions);
+  return overrideCssModulesConfig(config);
+};
+
+module.exports = commonWebpackConfig;
+```
+
+### Option 2: Create `config/webpack/environment.js` (Alternative)
+
+If you prefer using a separate environment file:
+
+```js
+// config/webpack/environment.js
+const { environment } = require('@shakacode/shakapacker');
+const getStyleRule = require('@shakacode/shakapacker/package/utils/getStyleRule');
+
+// CSS Modules rule for *.module.css with default export enabled
+const cssModulesRule = getStyleRule(/\.module\.css$/i, [], {
+  sourceMap: true,
+  importLoaders: 2,
+  modules: {
+    auto: true,
+    namedExport: false,            // <-- key: enable default export object
+    exportLocalsConvention: 'asIs' // keep your class names as-is
+  }
+});
+
+// Ensure this rule wins for *.module.css
+if (cssModulesRule) {
+  environment.loaders.prepend('css-modules', cssModulesRule);
+}
+
+// Plain CSS rule for non-modules
+const plainCssRule = getStyleRule(/(?<!\.module)\.css$/i, [], {
+  sourceMap: true,
+  importLoaders: 2,
+  modules: false
+});
+
+if (plainCssRule) {
+  environment.loaders.append('css', plainCssRule);
+}
+
+module.exports = environment;
+```
+
+Then reference this in your environment-specific configs (development.js, production.js, etc.).
+
+### Option 3: (Optional) Sass Modules
+
+If you also use Sass modules, add similar configuration for SCSS files:
+
+```js
+// For Option 1 approach, extend the overrideCssModulesConfig function:
+const overrideCssModulesConfig = (config) => {
+  // Handle both CSS and SCSS rules
+  const styleRules = config.module.rules.filter(rule =>
+    rule.test && (rule.test.toString().includes('css') || rule.test.toString().includes('scss'))
+  );
+
+  styleRules.forEach(rule => {
+    if (rule.use) {
+      const cssLoaderUse = rule.use.find(use =>
+        use.loader && use.loader.includes('css-loader')
+      );
+
+      if (cssLoaderUse && cssLoaderUse.options && cssLoaderUse.options.modules) {
+        cssLoaderUse.options.modules.namedExport = false;
+        cssLoaderUse.options.modules.exportLocalsConvention = 'asIs';
+      }
+    }
+  });
+
+  return config;
+};
+```
+
+---
+
+## Verifying the Configuration
+
+### 1. Rebuild Your Packs
+
+After making the configuration changes, rebuild your webpack bundles:
+
+```bash
+# For development
+NODE_ENV=development bin/shakapacker
+
+# Or with the dev server
+bin/shakapacker-dev-server
+```
+
+### 2. Test in Your React Component
+
+Update your component to use default imports:
+
+```js
+// Before (named exports)
+import { bright } from './Foo.module.css';
+
+// After (default export)
+import styles from './Foo.module.css';
+console.log(styles); // { bright: 'Foo_bright__hash' }
+```
+
+### 3. Debug Webpack Configuration (Optional)
+
+To inspect the final webpack configuration:
+
+```bash
+NODE_ENV=development bin/shakapacker --profile --json > /tmp/webpack-stats.json
+```
+
+Then search for `css-loader` options in the generated JSON file.
+
+---
+
+## Benefits of Default Export Approach
+
+1. **Better Developer Experience**: Matches most React tutorials and documentation
+2. **IDE Support**: Better autocomplete and IntelliSense for CSS class names
+3. **Type Safety**: Easier to add TypeScript definitions for CSS modules
+4. **Consistency**: Aligns with common React ecosystem practices
+
+---
+
+## Migration Guide
+
+If you're migrating from named exports to default exports:
+
+### 1. Update Import Statements
+
+```js
+// Old (named exports)
+import { bright, container, button } from './Component.module.css';
+
+// New (default export)
+import styles from './Component.module.css';
+```
+
+### 2. Update Class References
+
+```js
+// Old
+<div className={container}>
+  <button className={button}>Click me</button>
+  <span className={bright}>Highlighted text</span>
+</div>
+
+// New
+<div className={styles.container}>
+  <button className={styles.button}>Click me</button>
+  <span className={styles.bright}>Highlighted text</span>
+</div>
+```
+
+### 3. Consider Using a Codemod
+
+For large codebases, consider writing a codemod to automate the migration:
+
+```bash
+# Example using jscodeshift (pseudocode)
+npx jscodeshift -t css-modules-migration.js src/
+```
+
+---
+
+## Future Shakapacker Configuration
+
+In future versions of Shakapacker, this configuration may be exposed via `config/shakapacker.yml`:
+
+```yml
+# Future configuration (not yet implemented)
+css_modules:
+  # true  -> named exports (import { bright } ...)
+  # false -> default export (import styles ...)
+  named_export: false
+```
+
+- **Current behavior:** Uses named exports when unset
+- **Future behavior:** New app templates will default to `false`
+- **Next major release:** The default will change to `false` when unset
+
+---
+
+## Troubleshooting
+
+### CSS Classes Not Applying
+
+If your CSS classes aren't applying after the change:
+
+1. **Check import syntax**: Ensure you're using `import styles from ...`
+2. **Verify class names**: Use `console.log(styles)` to see available classes
+3. **Rebuild webpack**: Clear cache and rebuild: `rm -rf tmp/cache && bin/shakapacker`
+
+### TypeScript Support
+
+For TypeScript projects, create type definitions for your CSS modules:
+
+```typescript
+// src/types/css-modules.d.ts
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+```
+
+### Build Performance
+
+The configuration changes should not impact build performance significantly. If you experience issues:
+
+1. Check webpack stats: `bin/shakapacker --profile`
+2. Verify only necessary rules are being modified
+3. Consider using webpack bundle analyzer for deeper insights
+
+---
+
+## Summary
+
+- **Current default**: Named exports (`import { bright } ...`)
+- **Recommended for DX**: Default export (`import styles ...`)
+- **Implementation**: Override CSS loader configuration in `commonWebpackConfig.js`
+- **Migration**: Update imports and class references systematically
+- **Future**: Shakapacker will provide native configuration options

data/docs/peer-dependencies.md

@@ -0,0 +1,40 @@
+# Shakapacker's Peer Dependencies
+#### last updated for our 8.4.0 version
+#### see lib/install/peerDependencies.json
+
+To simplify peer dependencies while supporting both webpack & rspack, we decided to document the dependencies here instead of creating two separate npm packages.
+
+## Essential for Rspack
+```
+    "@rspack/cli": "^1.0.0",
+    "@rspack/core": "^1.0.0",
+    "rspack-manifest-plugin": "^5.0.0",
+```
+## Essential for Webpack
+```
+    "mini-css-extract-plugin": "^2.0.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.76.0",
+    "webpack-assets-manifest": "^5.0.6 || ^6.0.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"
+```
+
+## Highly recommended
+```
+    "compression-webpack-plugin": "^9.0.0 || ^10.0.0|| ^11.0.0",
+    "css-loader": "^6.0.0 || ^7.0.0",
+    "sass-loader": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+    "style-loader": "^3.0.0 || ^4.0.0",
+```
+
+## Babel (avoid if at all possible)
+```
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/runtime": "^7.17.9",
+    "babel-loader": "^8.2.4 || ^9.0.0 || ^10.0.0",
+```