- 
          
 - 
                Notifications
    
You must be signed in to change notification settings  - Fork 639
 
Add --rspack generator option for faster builds #1852
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
          
     Open
      
      
            justin808
  wants to merge
  4
  commits into
  master
  
    
      
        
          
  
    
      Choose a base branch
      
     
    
      
        
      
      
        
          
          
        
        
          
            
              
              
              
  
           
        
        
          
            
              
              
           
        
       
     
  
        
          
            
          
            
          
        
       
    
      
from
justin808/rspack-generator-option
  
      
      
   
  
    
  
  
  
 
  
      
    base: master
Could not load branches
            
              
  
    Branch not found: {{ refName }}
  
            
                
      Loading
              
            Could not load tags
            
            
              Nothing to show
            
              
  
            
                
      Loading
              
            Are you sure you want to change the base?
            Some commits from the old base branch may be removed from the timeline,
            and old review comments may become outdated.
          
          
  
     Open
                    Changes from all commits
      Commits
    
    
            Show all changes
          
          
            4 commits
          
        
        Select commit
          Hold shift + click to select a range
      
      2af94e7
              
                Add --rspack generator option for faster builds
              
              
                justin808 14c81f1
              
                Update webpack config templates for unified rspack/webpack support
              
              
                justin808 dff904b
              
                Add generator specs for --rspack option
              
              
                justin808 0e33ff1
              
                Fix critical security and functionality issues in switch-bundler
              
              
                justin808 File filter
Filter by extension
Conversations
          Failed to load comments.   
        
        
          
      Loading
        
  Jump to
        
          Jump to file
        
      
      
          Failed to load files.   
        
        
          
      Loading
        
  Diff view
Diff view
There are no files selected for viewing
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| # Rspack Generator Option Implementation | ||
| 
     | 
||
| This document summarizes the implementation of the `--rspack` option for the React on Rails generator, based on the patterns from [PR #20 in react_on_rails-demos](https://github.com/shakacode/react_on_rails-demos/pull/20). | ||
| 
     | 
||
| ## Overview | ||
| 
     | 
||
| The `--rspack` flag allows users to generate a React on Rails application using Rspack instead of Webpack as the bundler. Rspack provides significantly faster build times (~53-270ms vs typical webpack builds). | ||
| 
     | 
||
| ## Changes Made | ||
| 
     | 
||
| ### 1. Install Generator (`lib/generators/react_on_rails/install_generator.rb`) | ||
| 
     | 
||
| - **Added `--rspack` class option** (line 31-35): Boolean flag to enable Rspack bundler | ||
| - **Updated `invoke_generators`** (line 82-83): Pass rspack option to base generator | ||
| - **Added `add_rspack_dependencies` method** (line 499-513): Installs Rspack core packages: | ||
| - `@rspack/core` | ||
| - `rspack-manifest-plugin` | ||
| - **Updated `add_dev_dependencies`** (line 515-534): Conditionally installs rspack or webpack refresh plugins: | ||
| - Rspack: `@rspack/cli`, `@rspack/plugin-react-refresh`, `react-refresh` | ||
| - Webpack: `@pmmmwh/react-refresh-webpack-plugin`, `react-refresh` | ||
| - **Updated `add_js_dependencies`** (line 433): Calls `add_rspack_dependencies` when rspack flag is set | ||
| 
     | 
||
| ### 2. Base Generator (`lib/generators/react_on_rails/base_generator.rb`) | ||
| 
     | 
||
| - **Added `--rspack` class option** (line 22-26): Boolean flag (passed from install generator) | ||
| - **Updated `copy_packer_config`** (line 85-100): Calls `configure_rspack_in_shakapacker` after copying config | ||
| - **Added `configure_rspack_in_shakapacker` method** (line 404-426): | ||
| - Adds `assets_bundler: 'rspack'` to shakapacker.yml default section | ||
| - Changes `webpack_loader` to `'swc'` (Rspack works best with SWC transpiler) | ||
| 
     | 
||
| ### 3. Webpack Configuration Templates | ||
| 
     | 
||
| Updated webpack configuration templates to support both webpack and rspack bundlers with unified config approach: | ||
| 
     | 
||
| **development.js.tt**: | ||
| 
     | 
||
| - Added `config` to shakapacker require to access `assets_bundler` setting | ||
| - Conditional React Refresh plugin loading based on `config.assets_bundler`: | ||
| - Rspack: Uses `@rspack/plugin-react-refresh` | ||
| - Webpack: Uses `@pmmmwh/react-refresh-webpack-plugin` | ||
| - Prevents "window not found" errors when using rspack | ||
| 
     | 
||
| **serverWebpackConfig.js.tt**: | ||
| 
     | 
||
| - Added `bundler` variable that conditionally requires `@rspack/core` or `webpack` | ||
| - Changed `webpack.optimize.LimitChunkCountPlugin` to `bundler.optimize.LimitChunkCountPlugin` | ||
| - Enables same config to work with both bundlers without warnings | ||
| - Avoids hardcoding webpack-specific imports | ||
| 
     | 
||
| ### 4. Bundler Switching Script (`lib/generators/react_on_rails/templates/base/base/bin/switch-bundler`) | ||
| 
     | 
||
| Created a new executable script that allows switching between webpack and rspack after installation: | ||
| 
     | 
||
| **Features:** | ||
| 
     | 
||
| - Updates `shakapacker.yml` with correct `assets_bundler` setting | ||
| - Switches `webpack_loader` between 'swc' (rspack) and 'babel' (webpack) | ||
| - Removes old bundler dependencies from package.json | ||
| - Installs new bundler dependencies | ||
| - Supports npm, yarn, and pnpm package managers | ||
| - Auto-detects package manager from lock files | ||
| 
     | 
||
| **Usage:** | ||
| 
     | 
||
| ```bash | ||
| bin/switch-bundler rspack # Switch to Rspack | ||
| bin/switch-bundler webpack # Switch to Webpack | ||
| ``` | ||
| 
     | 
||
| **Dependencies managed:** | ||
| 
     | 
||
| - **Webpack**: webpack, webpack-cli, webpack-dev-server, webpack-assets-manifest, webpack-merge, @pmmmwh/react-refresh-webpack-plugin | ||
| - **Rspack**: @rspack/core, @rspack/cli, @rspack/plugin-react-refresh, rspack-manifest-plugin | ||
| 
     | 
||
| ## Usage | ||
| 
     | 
||
| ### Generate new app with Rspack: | ||
| 
     | 
||
| ```bash | ||
| rails generate react_on_rails:install --rspack | ||
| ``` | ||
| 
     | 
||
| ### Generate with Rspack and TypeScript: | ||
| 
     | 
||
| ```bash | ||
| rails generate react_on_rails:install --rspack --typescript | ||
| ``` | ||
| 
     | 
||
| ### Generate with Rspack and Redux: | ||
| 
     | 
||
| ```bash | ||
| rails generate react_on_rails:install --rspack --redux | ||
| ``` | ||
| 
     | 
||
| ### Switch existing app to Rspack: | ||
| 
     | 
||
| ```bash | ||
| bin/switch-bundler rspack | ||
| ``` | ||
| 
     | 
||
| ## Configuration Changes | ||
| 
     | 
||
| When `--rspack` is used, the following configuration changes are applied to `config/shakapacker.yml`: | ||
| 
     | 
||
| ```yaml | ||
| default: &default | ||
| source_path: app/javascript | ||
| assets_bundler: 'rspack' # Added | ||
| # ... other settings | ||
| webpack_loader: 'swc' # Changed from 'babel' | ||
| ``` | ||
| 
     | 
||
| ## Dependencies | ||
| 
     | 
||
| ### Rspack-specific packages installed: | ||
| 
     | 
||
| **Production:** | ||
| 
     | 
||
| - `@rspack/core` - Core Rspack bundler | ||
| - `rspack-manifest-plugin` - Manifest generation for Rspack | ||
| 
     | 
||
| **Development:** | ||
| 
     | 
||
| - `@rspack/cli` - Rspack CLI tools | ||
| - `@rspack/plugin-react-refresh` - React Fast Refresh for Rspack | ||
| - `react-refresh` - React Fast Refresh runtime | ||
| 
     | 
||
| ### Webpack packages NOT installed with --rspack: | ||
| 
     | 
||
| **Production:** | ||
| 
     | 
||
| - `webpack` | ||
| - `webpack-assets-manifest` | ||
| - `webpack-merge` | ||
| 
     | 
||
| **Development:** | ||
| 
     | 
||
| - `webpack-cli` | ||
| - `webpack-dev-server` | ||
| - `@pmmmwh/react-refresh-webpack-plugin` | ||
| 
     | 
||
| ## Performance Benefits | ||
| 
     | 
||
| According to PR #20: | ||
| 
     | 
||
| - Build times: ~53-270ms with Rspack vs typical webpack builds | ||
| - Approximately 20x faster transpilation with SWC (used by Rspack) | ||
| - Faster development builds and CI runs | ||
| 
     | 
||
| ## Testing | ||
| 
     | 
||
| The implementation follows existing generator patterns and passes RuboCop checks with zero offenses. | ||
| 
     | 
||
| ## Compatibility | ||
| 
     | 
||
| - Works with existing webpack configuration files (unified config approach) | ||
| - Compatible with TypeScript option (`--typescript`) | ||
| - Compatible with Redux option (`--redux`) | ||
| - Supports all package managers (npm, yarn, pnpm) | ||
| - Reversible via `bin/switch-bundler` script | 
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
      
      Oops, something went wrong.
        
    
  
      
      Oops, something went wrong.
        
    
  
  Add this suggestion to a batch that can be applied as a single commit.
  This suggestion is invalid because no changes were made to the code.
  Suggestions cannot be applied while the pull request is closed.
  Suggestions cannot be applied while viewing a subset of changes.
  Only one suggestion per line can be applied in a batch.
  Add this suggestion to a batch that can be applied as a single commit.
  Applying suggestions on deleted lines is not supported.
  You must change the existing code in this line in order to create a valid suggestion.
  Outdated suggestions cannot be applied.
  This suggestion has been applied or marked resolved.
  Suggestions cannot be applied from pending reviews.
  Suggestions cannot be applied on multi-line comments.
  Suggestions cannot be applied while the pull request is queued to merge.
  Suggestion cannot be applied right now. Please check back later.
  
    
  
    
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Refactor to use YAML parsing instead of string manipulation.
The current implementation uses string manipulation (regex and gsub!) on YAML content, which is fragile and error-prone. This approach has several issues:
unless config_content.include?("assets_bundler:")check won't update an existingassets_bundlersetting (e.g., if it's already set to'webpack').gsub!(/^\s*webpack_loader:.*$/, ...)updates ALL occurrences globally, not just in thedefaultsection, which could affect environment-specific overrides.Apply this diff to use proper YAML parsing:
def configure_rspack_in_shakapacker shakapacker_config_path = "config/shakapacker.yml" return unless File.exist?(shakapacker_config_path) puts Rainbow("🔧 Configuring Shakapacker for Rspack...").yellow - # Read the current config - config_content = File.read(shakapacker_config_path) - - # Update assets_bundler to rspack in default section - unless config_content.include?("assets_bundler:") - # Add assets_bundler after source_path in default section - config_content.gsub!(/^default: &default\n(\s+source_path:.*\n)/) do - "default: &default\n#{Regexp.last_match(1)} assets_bundler: 'rspack'\n" - end - end - - # Update webpack_loader to swc (rspack works best with SWC) - config_content.gsub!(/^\s*webpack_loader:.*$/, " webpack_loader: 'swc'") - - File.write(shakapacker_config_path, config_content) + # Parse YAML config + config = YAML.load_file(shakapacker_config_path) + + # Update default section + config["default"] ||= {} + config["default"]["assets_bundler"] = "rspack" + config["default"]["webpack_loader"] = "swc" + + # Write back as YAML + File.write(shakapacker_config_path, YAML.dump(config)) puts Rainbow("✅ Updated shakapacker.yml for Rspack").green endNote: This approach is already used correctly in the
switch-bundlerscript (lines 50-59), so applying the same pattern here maintains consistency.📝 Committable suggestion