Skip to content

Commit 117cf47

Browse files
justin808claude
andcommitted
Add comprehensive --rspack documentation across all guides
## Documentation Updates ### 1. Generator Details (api-reference/generator-details.md) - Added --rspack to generator options list - Added Rspack section in generator description - Created comprehensive "Rspack Support" section covering: - Benefits (~20x faster builds, unified config, easy switching) - What gets installed (packages and configuration) - Switching bundlers post-installation - Combining with other options (TypeScript, Redux) - Link to webpack configuration docs ### 2. Quick Start Guide (getting-started/quick-start.md) - Added --rspack option example in installation step - Added performance tip highlighting 20x improvement - Mentioned bin/switch-bundler utility for later switching ### 3. Webpack Configuration (core-concepts/webpack-configuration.md) - Added new "Rspack vs. Webpack" section covering: - Introduction to Rspack and performance benefits - Usage instructions (generation and switching) - Performance metrics (build times, SWC benefits) - Unified configuration approach with code examples - shakapacker.yml configuration details ## Documentation Structure The documentation is now comprehensive and appears in all appropriate places: - API Reference: Detailed generator option documentation - Getting Started: Quick introduction for new users - Core Concepts: Deep dive into configuration and usage All docs follow existing formatting conventions and include: - Clear code examples - Performance metrics - Cross-references between docs - Practical usage instructions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent b52a50f commit 117cf47

File tree

3 files changed

+137
-0
lines changed

3 files changed

+137
-0
lines changed

docs/api-reference/generator-details.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ Usage:
1010
1111
Options:
1212
-R, [--redux], [--no-redux] # Install Redux package and Redux version of Hello World Example. Default: false
13+
-T, [--typescript], [--no-typescript] # Generate TypeScript files and install TypeScript dependencies. Default: false
14+
[--rspack], [--no-rspack] # Use Rspack instead of Webpack as the bundler. Default: false
1315
[--ignore-warnings], [--no-ignore-warnings] # Skip warnings. Default: false
1416
1517
Runtime options:
@@ -29,6 +31,18 @@ can pass the redux option if you'd like to have redux setup for you automaticall
2931
to integrate the Redux state container framework. The necessary node modules
3032
will be automatically included for you.
3133
34+
* TypeScript
35+
36+
Passing the --typescript generator option generates TypeScript files (.tsx)
37+
instead of JavaScript files (.jsx) and sets up TypeScript configuration.
38+
39+
* Rspack
40+
41+
Passing the --rspack generator option uses Rspack instead of Webpack as the
42+
bundler, providing significantly faster builds (~20x improvement with SWC).
43+
Includes unified configuration that works with both bundlers and a
44+
bin/switch-bundler utility to switch between bundlers post-installation.
45+
3246
*******************************************************************************
3347
3448
@@ -106,6 +120,57 @@ rails generate react_on_rails:install --typescript
106120

107121
This creates `.tsx` files instead of `.jsx` and adds TypeScript configuration.
108122

123+
### Rspack Support
124+
125+
The generator supports a `--rspack` option for using Rspack instead of Webpack as the bundler:
126+
127+
```bash
128+
rails generate react_on_rails:install --rspack
129+
```
130+
131+
**Benefits:**
132+
133+
- **~20x faster builds** with SWC transpilation (build times of ~53-270ms vs typical webpack builds)
134+
- **Unified configuration** - same webpack config files work for both bundlers
135+
- **Easy switching** - includes `bin/switch-bundler` utility to switch between bundlers post-installation
136+
137+
**What gets installed:**
138+
139+
- Rspack core packages (`@rspack/core`, `@rspack/cli`)
140+
- Rspack-specific plugins (`@rspack/plugin-react-refresh`, `rspack-manifest-plugin`)
141+
- Shakapacker configured with `assets_bundler: 'rspack'` and `webpack_loader: 'swc'`
142+
143+
**Switching bundlers after installation:**
144+
145+
```bash
146+
# Switch to Rspack
147+
bin/switch-bundler rspack
148+
149+
# Switch back to Webpack
150+
bin/switch-bundler webpack
151+
```
152+
153+
The switch-bundler script automatically:
154+
155+
- Updates shakapacker.yml configuration
156+
- Installs/removes appropriate dependencies
157+
- Works with npm, yarn, and pnpm
158+
159+
**Combining with other options:**
160+
161+
```bash
162+
# Rspack with TypeScript
163+
rails generate react_on_rails:install --rspack --typescript
164+
165+
# Rspack with Redux
166+
rails generate react_on_rails:install --rspack --redux
167+
168+
# All options combined
169+
rails generate react_on_rails:install --rspack --typescript --redux
170+
```
171+
172+
For more details on Rspack configuration, see the [Webpack Configuration](../core-concepts/webpack-configuration.md#rspack-vs-webpack) docs.
173+
109174
### Auto-Bundling and Component Registration
110175

111176
Modern React on Rails uses auto-bundling to eliminate manual webpack configuration. Components placed in the configured `components_subdirectory` (default: `ror_components`) are automatically:

docs/core-concepts/webpack-configuration.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,73 @@
1111

1212
To get a deeper understanding of Shakapacker, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8).
1313

14+
## Rspack vs. Webpack
15+
16+
[Rspack](https://rspack.dev/) is a high-performance JavaScript bundler written in Rust that provides significantly faster builds than Webpack (~20x improvement). React on Rails supports both bundlers through unified configuration.
17+
18+
### Using Rspack
19+
20+
Generate a new app with Rspack:
21+
22+
```bash
23+
rails generate react_on_rails:install --rspack
24+
```
25+
26+
Or switch an existing app to Rspack:
27+
28+
```bash
29+
bin/switch-bundler rspack
30+
```
31+
32+
### Performance Benefits
33+
34+
- **Build times**: ~53-270ms with Rspack vs typical webpack builds
35+
- **~20x faster transpilation** with SWC (used by Rspack)
36+
- **Faster development** builds and CI runs
37+
38+
### Unified Configuration
39+
40+
React on Rails generates unified webpack configuration files that work with both bundlers:
41+
42+
**config/webpack/development.js** - Conditional plugin loading:
43+
44+
```javascript
45+
const { config } = require('shakapacker');
46+
47+
if (config.assets_bundler === 'rspack') {
48+
// Rspack uses @rspack/plugin-react-refresh
49+
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
50+
clientWebpackConfig.plugins.push(new ReactRefreshPlugin());
51+
} else {
52+
// Webpack uses @pmmmwh/react-refresh-webpack-plugin
53+
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
54+
clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin());
55+
}
56+
```
57+
58+
**config/webpack/serverWebpackConfig.js** - Dynamic bundler detection:
59+
60+
```javascript
61+
const { config } = require('shakapacker');
62+
63+
const bundler = config.assets_bundler === 'rspack' ? require('@rspack/core') : require('webpack');
64+
65+
// Use bundler-specific APIs
66+
serverWebpackConfig.plugins.unshift(new bundler.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
67+
```
68+
69+
### Configuration in shakapacker.yml
70+
71+
Rspack configuration is controlled via `config/shakapacker.yml`:
72+
73+
```yaml
74+
default: &default
75+
assets_bundler: 'rspack' # or 'webpack'
76+
webpack_loader: 'swc' # Rspack works best with SWC
77+
```
78+
79+
The `bin/switch-bundler` script automatically updates this configuration when switching bundlers.
80+
1481
Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
1582
you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
1683

docs/getting-started/quick-start.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ git add . && git commit -m "Add react_on_rails gem"
3131

3232
# Run the installer
3333
bin/rails generate react_on_rails:install
34+
35+
# Optional: Use Rspack for ~20x faster builds
36+
# bin/rails generate react_on_rails:install --rspack
3437
```
3538

3639
Take a look at the files created by the generator.
@@ -41,6 +44,8 @@ Take a look at the files created by the generator.
4144
- A sample controller and view
4245
- Webpack configuration
4346

47+
> 💡 **Performance Tip:** Add the `--rspack` flag for significantly faster builds (~20x improvement). You can also switch bundlers later with `bin/switch-bundler rspack`.
48+
4449
## 🎯 Step 2: Start the Development Server (1 minute)
4550

4651
> **Note:** Ensure you have `overmind` or `foreman` installed to run `bin/dev`.

0 commit comments

Comments
 (0)