shakapacker 9.0.0.beta.2 → 9.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02da73fe458c789d3774f993cdc5d4ec082aec418d746bd96d279a6e636fb9dc
-  data.tar.gz: b0342e33b80c52751b7a63102492d9dbd3bcc88c485bd1b831ab902263d45404
+  metadata.gz: 173792ac146bcec2bdcea877d9449ab35935ec1cd61b04d8df1d02cf62325a29
+  data.tar.gz: 7d135bb3eb60f7a65723625dbc611c155122b2cd985a99a955f93d0f0f380d24
 SHA512:
-  metadata.gz: 9950e533356e907aa0e68202dfe40af8ed5d96f633ba4a0aeff28ddf214daaf1b9cd02bbb7b74ba0fa8d4bcea00c2c7b1cd6fdd7d14a8e0d333932c3ece79a7a
-  data.tar.gz: aeb7b646e6d07e7ed7dd056113b98521701161c7d2909ec18a4d0771b473e970d7006ccfec4b7a4da1e789da56be0d6ecb8d95db651d0fae8c7ef7cf70be951f
+  metadata.gz: 97d4f23b01c785a479e53a3e8abcf8df1462243096b4fc14ed3c2b0fbd50096ac5e65b829ecc3dd3d40a6adc072541952ff1af3e74ed8ebce544eb771570c527
+  data.tar.gz: de3fa497d411233f46023ca903f2f7586701a97b4c08de85ec347064c0d2b355570ad9e8988993dc01024663a0c48264513b3a00f23287665c3acfcee25644a0

data/.github/workflows/dummy.yml

@@ -24,13 +24,13 @@ jobs:
           node-version: '20'
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.1.2'
+          ruby-version: '3.2'
           rubygems: latest
       - name: Install dependencies
         run: |
           bundle install
-          yarn install
-          sudo yarn global add yalc
+          npm install -g yalc
+          cd spec/dummy && npm install
 
       - name: Run tests
         run: bundle exec rake run_spec:dummy

data/.github/workflows/test-bundlers.yml

@@ -0,0 +1,152 @@
+name: Test Both Bundlers
+
+on:
+  pull_request:
+  push:
+    branches: [master, main]
+
+jobs:
+  test-webpack:
+    name: Test with Webpack
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: spec/dummy
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+          working-directory: spec/dummy
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: spec/dummy/package-lock.json
+
+      - name: Install yalc
+        run: npm install -g yalc
+
+      - name: Publish shakapacker to yalc
+        run: |
+          cd ../..
+          yalc publish
+
+      - name: Install dependencies
+        run: |
+          yalc link shakapacker
+          npm ci
+
+      - name: Switch to Webpack
+        run: bin/test-bundler webpack
+
+      - name: Build with Webpack
+        run: bin/shakapacker
+
+      - name: Run tests with Webpack
+        run: |
+          bundle exec rspec
+
+  test-rspack:
+    name: Test with RSpack
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: spec/dummy
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+          working-directory: spec/dummy
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: spec/dummy/package-lock.json
+
+      - name: Install yalc
+        run: npm install -g yalc
+
+      - name: Publish shakapacker to yalc
+        run: |
+          cd ../..
+          yalc publish
+
+      - name: Install dependencies
+        run: |
+          yalc link shakapacker
+          npm ci
+
+      - name: Switch to RSpack
+        run: bin/test-bundler rspack
+
+      - name: Build with RSpack
+        run: bin/shakapacker
+
+      - name: Run tests with RSpack
+        run: |
+          bundle exec rspec
+
+  test-switching:
+    name: Test Bundler Switching
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: spec/dummy
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+          working-directory: spec/dummy
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: spec/dummy/package-lock.json
+
+      - name: Install yalc
+        run: npm install -g yalc
+
+      - name: Publish shakapacker to yalc
+        run: |
+          cd ../..
+          yalc publish
+
+      - name: Install dependencies
+        run: |
+          yalc link shakapacker
+          npm ci
+
+      - name: Test switching between bundlers
+        run: |
+          # Start with webpack
+          bin/test-bundler webpack
+          bin/shakapacker
+
+          # Switch to rspack
+          bin/test-bundler rspack
+          bin/shakapacker
+
+          # Switch back to webpack
+          bin/test-bundler webpack
+          bin/shakapacker

data/CHANGELOG.md

@@ -1,4 +1,5 @@
 * For the changelog of versions prior to v6, see the [5.x stable branch of rails/webpacker](https://github.com/rails/webpacker/tree/5-x-stable).
+* **Please see the [v9 Upgrade Guide](./docs/v9_upgrade.md) for upgrading to version 9 and accounting for breaking changes.**
 * Please see the [v8 Upgrade Guide](./docs/v8_upgrade.md) for upgrading to version 8 and accounting for breaking changes.
 * Please see the [v7 Upgrade Guide](./docs/v7_upgrade.md) for upgrading to new spelling in version 7.
 * Please see the [v6 Upgrade Guide](./docs/v6_upgrade.md) to go from versions prior to v6.
@@ -10,12 +11,40 @@ Changes since the last non-beta release.
 
 ### 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.
+- Add `private_output_path` configuration option for server-side rendering bundles. This allows specifying a separate output directory for private server bundles that shouldn't be served publicly. [PR 592](https://github.com/shakacode/shakapacker/pull/592) by [justin808](https://github.com/justin808).
+- Enhanced TypeScript type definitions for better IDE support and type safety. Improved Config and DevServerConfig interfaces with additional properties. [PR 602](https://github.com/shakacode/shakapacker/pull/602) by [justin808](https://github.com/justin808).
 
 ### 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
+- **BREAKING CHANGE**: SWC is now the default JavaScript transpiler instead of Babel. Babel dependencies are no longer included as peer dependencies. They are installed automatically only when `javascript_transpiler` is set to 'babel'. This reduces node_modules size and improves compilation speed by 20x. [PR 603](https://github.com/shakacode/shakapacker/pull/603) by [justin808](https://github.com/justin808).
+  
+  **Migration for existing projects:**
+  - **Option 1 (Recommended):** Switch to SWC for 20x faster compilation:
+    ```yaml
+    # config/shakapacker.yml
+    javascript_transpiler: 'swc'
+    ```
+    Then install SWC: `npm install @swc/core swc-loader`
+    
+  - **Option 2:** Keep using Babel (no changes needed):
+    ```yaml
+    # config/shakapacker.yml
+    javascript_transpiler: 'babel'
+    ```
+    Your existing babel packages in package.json will continue to work.
+  
+  **For new projects:**
+  - SWC is installed by default (20x faster than Babel)
+  - To use Babel instead: Set `javascript_transpiler: 'babel'` before running `rails shakapacker:install`
+  - To use esbuild: Set `javascript_transpiler: 'esbuild'` and install with `npm install esbuild esbuild-loader`
+- **BREAKING CHANGE**: CSS Modules are now configured with named exports (`namedExport: true` and `exportLocalsConvention: 'camelCase'`) to align with Next.js and modern tooling standards.
+  - **JavaScript**: Use named imports (`import { className } from './styles.module.css'`)
+  - **TypeScript**: Requires namespace imports (`import * as styles from './styles.module.css'`) due to TypeScript's inability to type dynamic named exports
+  - Note: Default imports (`import styles from '...'`) will no longer work as css-loader with `namedExport: true` doesn't generate a default export
+  - See the [CSS Modules Export Mode documentation](./docs/css-modules-export-mode.md) for detailed migration instructions and override options
+
+## [v9.0.0.beta.2] - September 25, 2025
 ### Added
 
 * Support for subresource integrity. [PR 570](https://github.com/shakacode/shakapacker/pull/570) by [panagiotisplytas](https://github.com/panagiotisplytas)

data/CLAUDE.md

@@ -0,0 +1,29 @@
+# Shakapacker Project Guidelines
+
+## Critical Requirements
+- **ALWAYS end all files with a trailing newline character.** This is required by the project's linting rules.
+- **ALWAYS use `bundle exec` prefix when running Ruby commands** (rubocop, rspec, rake, etc.)
+- **ALWAYS run `bundle exec rubocop` before committing Ruby changes**
+- **ALWAYS run `yarn lint` before committing JavaScript changes**
+
+## Testing
+- Run corresponding RSpec tests when changing source files
+- For example, when changing `lib/shakapacker/foo.rb`, run `spec/shakapacker/foo_spec.rb`
+- Run the full test suite with `bundle exec rspec` before pushing
+
+## Code Style
+- Follow existing code conventions in the file you're editing
+- Use the project's existing patterns and utilities
+- No unnecessary comments unless requested
+- Keep changes focused and minimal - avoid extraneous diffs
+
+## Git Workflow
+- Create feature branches for all changes
+- Never push directly to main branch
+- Create small, focused PRs that are easy to review
+- Always create a PR immediately after pushing changes
+
+## Shakapacker-Specific
+- This gem supports both webpack and rspack configurations
+- Test changes with both bundlers when modifying core functionality
+- Be aware of the dual package.json/Gemfile dependency management

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    shakapacker (9.0.0.beta.2)
+    shakapacker (9.0.0.beta.4)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)

data/README.md

@@ -1,4 +1,9 @@
 # Shakapacker (v8)
+---
+
+_🚀 Shakapacker 9.0.0.beta.2 supports [Rspack](https://rspack.rs/)! 10x faster than webpack!_
+
+---
 
 _Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). ShakaCode stands behind the long-term maintenance and development of this project for the Rails community._
 
@@ -926,6 +931,30 @@ source_path: frontend # packs are the files in frontend/
 public_output_path: assets/packs # outputs to => public/assets/packs
 ```
 
+For server-side rendering (SSR) scenarios where you need to generate bundles that should not be served publicly, you can use the `private_output_path` configuration:
+
+```yml
+# config/shakapacker.yml
+private_output_path: ssr-generated # outputs to => ssr-generated/
+```
+
+This is particularly useful when working with libraries like React on Rails where server bundles need to be kept separate from client bundles.
+
+#### Migration Guide for React on Rails Users
+
+If you're using React on Rails with separate client and server bundles, you can now leverage the `private_output_path` configuration instead of using custom webpack configurations:
+
+1. Update your `config/shakapacker.yml`:
+   ```yml
+   # Before: both client and server bundles in public/
+   # After: separate directories
+   public_output_path: packs        # Client bundles (publicly served)
+   private_output_path: ssr-bundles  # Server bundles (not publicly served)
+   ```
+
+2. Update your webpack configuration to use the appropriate output path based on the bundle type
+3. The validation ensures `private_output_path` and `public_output_path` are different to prevent configuration errors
+
 Similarly, you can also control and configure `webpack-dev-server` settings from `config/shakapacker.yml` file:
 
 ```yml
@@ -993,7 +1022,19 @@ pnpm install --frozen-lockfile
 bun install --frozen-lockfile
 ```
 
-If you are using a CDN setup, Shakapacker does NOT use the `ASSET_HOST` environment variable to prefix URLs for assets during bundle compilation. You must use the `SHAKAPACKER_ASSET_HOST` environment variable instead (`WEBPACKER_ASSET_HOST` if you're using any version of Webpacker or Shakapacker before Shakapacker v7).
+### CDN
+
+Shakapacker supports serving JavaScript bundles and assets from a CDN. The key configuration is setting the `SHAKAPACKER_ASSET_HOST` environment variable (NOT the Rails `ASSET_HOST` variable).
+
+For detailed CDN setup instructions, including CloudFlare configuration, troubleshooting, and advanced setups, see the [CDN Setup Guide](./docs/cdn_setup.md).
+
+**Quick example:**
+```bash
+export SHAKAPACKER_ASSET_HOST=https://cdn.example.com
+RAILS_ENV=production bundle exec rails assets:precompile
+```
+
+For more deployment documentation, see [Deployment](./docs/deployment.md).
 
 ## Example Apps
 * [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh)

data/Rakefile

@@ -14,17 +14,35 @@ namespace :run_spec do
     sh("bundle exec rspec spec/shakapacker/*_spec.rb")
   end
 
-  desc "Run specs in the dummy app"
+  desc "Run specs in the dummy app with webpack"
   task :dummy do
-    puts "Running dummy app specs"
+    puts "Running dummy app specs with webpack"
     spec_dummy_dir = Pathname.new(File.join("spec", "dummy")).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 webpack --config config/webpack/webpack.config.js",
+        "npm install",
+        "bin/test-bundler webpack",
+        "NODE_ENV=test RAILS_ENV=test bin/shakapacker",
+        "bundle exec rspec"
+      ])
+    end
+  end
+
+  desc "Run specs in the dummy app with rspack"
+  task :dummy_with_rspack do
+    puts "Running dummy app specs with rspack"
+    spec_dummy_dir = Pathname.new(File.join("spec", "dummy")).realpath
+    Bundler.with_unbundled_env do
+      sh_in_dir(".", "yalc publish")
+      sh_in_dir(spec_dummy_dir, [
+        "bundle install",
+        "yalc link shakapacker",
+        "npm install",
+        "bin/test-bundler rspack",
+        "NODE_ENV=test RAILS_ENV=test bin/shakapacker",
         "bundle exec rspec"
       ])
     end
@@ -39,8 +57,8 @@ namespace :run_spec do
       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",
+        "npm install",
+        "NODE_ENV=test RAILS_ENV=test npm exec --no -- rspack build --config config/rspack/rspack.config.js",
         "bundle exec rspec"
       ])
     end
@@ -52,7 +70,7 @@ namespace :run_spec do
   end
 
   desc "Run all specs"
-  task all_specs: %i[gem dummy dummy_rspack generator] do
+  task all_specs: %i[gem dummy dummy_with_rspack dummy_rspack generator] do
     puts "Completed all RSpec tests"
   end
 end

data/TODO.md

@@ -0,0 +1,51 @@
+# TypeScript Migration Status
+
+## ✅ Completed (PR #602)
+- Enhanced `package/index.d.ts` with comprehensive type definitions
+- Added TypeScript type packages for better IDE support
+- Improved Config and DevServerConfig interfaces
+- Added missing properties (private_output_path, inline_css, env_prefix, etc.)
+- All tests passing
+- Zero JavaScript modifications (no whitespace changes)
+- Full backward compatibility maintained
+
+## 📋 Next Steps (Issue #605)
+
+### Phase 2: Core Module Conversion
+- [ ] Convert `package/config.js` to TypeScript
+- [ ] Convert `package/env.js` to TypeScript  
+- [ ] Convert `package/index.js` to TypeScript
+- [ ] Convert `package/utils/helpers.js` to TypeScript
+
+### Phase 3: Environment & Build System
+- [ ] Convert environment files (base, development, production, test)
+- [ ] Convert dev_server.js
+- [ ] Convert webpackDevServerConfig.js
+
+### Phase 4: Rules & Loaders
+- [ ] Convert all files in `package/rules/`
+- [ ] Convert all files in `package/plugins/`
+- [ ] Convert all files in `package/optimization/`
+
+### Phase 5: Framework-Specific Modules
+- [ ] Convert rspack support files
+- [ ] Convert swc support files
+- [ ] Convert esbuild support files
+- [ ] Convert babel preset
+
+### Phase 6: Final Cleanup
+- [ ] Convert remaining utilities
+- [ ] Add TypeScript linting
+- [ ] Enable strict mode
+- [ ] Update documentation
+
+## Why Gradual Migration?
+- **Lower risk**: Each phase can be tested independently
+- **Team learning**: Get familiar with TypeScript incrementally
+- **Immediate value**: Type definitions already provide IDE benefits
+- **No breaking changes**: Users unaffected during migration
+
+## Related Links
+- Original issue: #200
+- Initial PR: #602
+- Next steps issue: #605

data/TODO_v9.md

@@ -0,0 +1,84 @@
+# Shakapacker v9 TODO List
+
+## CSS Modules Configuration Alignment
+
+### Problem
+Current CSS modules configuration causes TypeScript/webpack warnings because of default vs named export mismatch.
+
+### Current Behavior (v8)
+- CSS modules use default export: `import styles from './styles.module.css'`
+- This causes warnings but works at runtime
+- Warning example: `export 'default' (imported as 'style') was not found in './HelloWorld.module.css'`
+
+### Proposed v9 Change
+Align with Next.js and modern tooling by using named exports:
+
+1. **Update css-loader configuration:**
+```javascript
+{
+  loader: 'css-loader',
+  options: {
+    modules: {
+      namedExport: true,
+      exportLocalsConvention: 'camelCase'
+    }
+  }
+}
+```
+
+2. **Update TypeScript types:**
+- Ensure proper typing for CSS modules with named exports
+- May need to update or generate `.d.ts` files for CSS modules
+
+3. **Migration guide for users:**
+- Document the breaking change
+- Provide codemod or migration script to update imports from:
+  ```javascript
+  import styles from './styles.module.css'
+  styles.className
+  ```
+  to:
+  ```javascript
+  import * as styles from './styles.module.css'
+  // or
+  import { className } from './styles.module.css'
+  ```
+
+### Benefits
+- Eliminates webpack/TypeScript warnings
+- Better tree-shaking potential
+- More explicit about what CSS classes are being used
+- Easier interoperability with frameworks that support named exports
+
+### Implementation Notes
+- This is a BREAKING CHANGE and appropriate for major version bump
+- Need to test with both webpack and rspack
+- Consider providing a compatibility mode via configuration option
+
+---
+
+## Related Issues from PR #597
+
+### React Component Not Rendering (spec/dummy) - RESOLVED ✅
+- **Issue**: React component was not rendering due to CSS module import mismatch
+- **Symptoms**:
+  - Component wasn't rendering "Hello, Stranger!"
+  - Input field not rendered, making interactive test fail
+  - Only the static H1 "Hello, World!" was visible
+- **Resolution**:
+  - Fixed CSS module import syntax from `import style from` to `import * as style from`
+  - This matched webpack's named exports configuration for CSS modules
+  - Tests now pass with both React 18.3.1 and webpack/rspack configurations
+- **Root Cause**: CSS module import/export mismatch
+  - Webpack was configured to use named exports for CSS modules
+  - TypeScript code was using default import syntax
+  - This caused `style` to be undefined, breaking SSR and client rendering
+- **Status**: FIXED
+  - All tests re-enabled and passing
+  - Both SSR and client-side rendering working
+  - Interactive functionality restored
+
+### Test Infrastructure
+- Successfully implemented dual bundler support (webpack/rspack)
+- test-bundler script working well with status command
+- Consider adding more comprehensive tests for both bundlers

data/conductor-setup.sh

@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "🔧 Setting up Shakapacker workspace..."
+
+# Set up Ruby version if asdf is available
+if command -v asdf &> /dev/null; then
+    echo "📝 Using asdf Ruby version management..."
+    # Ensure we have the right Ruby version file
+    echo "ruby 3.3.4" > .tool-versions
+    # Use asdf exec to run commands with the right Ruby version
+    BUNDLE_CMD="asdf exec bundle"
+else
+    BUNDLE_CMD="bundle"
+fi
+
+# Check for required tools
+if ! $BUNDLE_CMD --version &> /dev/null; then
+    echo "❌ Error: Ruby bundler is not installed"
+    echo "Please install bundler first: gem install bundler"
+    exit 1
+fi
+
+if ! command -v yarn &> /dev/null; then
+    echo "❌ Error: Yarn is not installed"
+    echo "Please install yarn first"
+    exit 1
+fi
+
+# Install Ruby dependencies
+echo "📦 Installing Ruby dependencies..."
+$BUNDLE_CMD install
+
+# Install JavaScript dependencies
+echo "📦 Installing JavaScript dependencies..."
+yarn install
+
+# Copy environment files if they exist in root
+if [ -n "${CONDUCTOR_ROOT_PATH:-}" ]; then
+    if [ -f "$CONDUCTOR_ROOT_PATH/.env" ]; then
+        echo "📋 Copying .env file from root..."
+        cp "$CONDUCTOR_ROOT_PATH/.env" .env
+    fi
+    
+    if [ -f "$CONDUCTOR_ROOT_PATH/.env.local" ]; then
+        echo "📋 Copying .env.local file from root..."
+        cp "$CONDUCTOR_ROOT_PATH/.env.local" .env.local
+    fi
+fi
+
+echo "✅ Workspace setup complete!"
+echo ""
+echo "Available commands:"
+echo "  - Run tests: bundle exec rspec"
+echo "  - Run specific test suites: bundle exec rake run_spec:gem"
+echo "  - Run JavaScript tests: yarn test"
+echo "  - Lint JavaScript: yarn lint"
+echo "  - Lint Ruby: bundle exec rubocop"

data/conductor.json

@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "setup": "./conductor-setup.sh",
+    "run": "bundle exec rspec",
+    "archive": ""
+  }
+}