Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Switch from Babel to SWC for faster JavaScript transpilation #677

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

Merged
justin808 merged 7 commits into master from justin808/babel-to-swc
Oct 8, 2025

Conversation

Copy link
Member

@justin808 justin808 commented Oct 6, 2025
edited by coderabbitai bot
Loading

Summary

  • Migrated JavaScript transpiler from Babel to SWC following Shakapacker documentation
  • Installed required SWC dependencies (@swc/core, swc-loader)
  • Updated shakapacker.yml configuration

Benefits

  • Faster compilation: SWC is a Rust-based compiler that claims to be up to 20x faster than Babel
  • Improved developer experience: Faster build times during development
  • Drop-in replacement: No changes needed to existing React/JSX code

Changes

  • Updated config/shakapacker.yml to use swc as javascript_transpiler
  • Added @swc/core and swc-loader to dependencies
  • Added ajv dependency to resolve module resolution issues

Notes

  • Existing Babel configuration and dependencies remain in place as they may still be needed by ESLint, Jest, and other tooling
  • Build process verified to work with SWC
  • React Fast Refresh can be enabled in future by creating config/swc.config.js if needed

Documentation

🤖 Generated with Claude Code


This change is Reviewable

Summary by CodeRabbit

  • Chores

    • Switched the project's JavaScript transpiler to SWC.
    • Added configuration and dependencies required to support the new transpiler.
    • Updated ignore rules to reflect the chosen package manager.
  • Developer Experience

    • Faster incremental rebuilds and more responsive hot reloading during local development.

This commit migrates the project from Babel to SWC (Speedy Web Compiler)
following the Shakapacker documentation.
Changes:
- Update shakapacker.yml to use 'swc' as javascript_transpiler
- Install @swc/core and swc-loader dependencies
- Add ajv dependency to resolve module resolution issues
SWC is a Rust-based compiler that provides significantly faster
compilation times compared to Babel (up to 20x faster according to
SWC documentation).
The existing Babel configuration and dependencies remain in place
as they may still be needed by other tooling like ESLint and Jest.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

github-actions bot commented Oct 6, 2025

🚀 Quick Review App Commands

Welcome! Here are the commands you can use in this PR:

/deploy-review-app

Deploy your PR branch for testing

/delete-review-app

Remove the review app when done

/help

Show detailed instructions, environment setup, and configuration options.


Copy link

coderabbitai bot commented Oct 6, 2025
edited
Loading

Walkthrough

Swaps Shakapacker's JavaScript transpiler from Babel to SWC, adds config/swc.config.js that conditionally enables React Refresh based on dev/server flags, adds SWC-related dependencies to package.json, and ignores package-lock.json in .gitignore. No public APIs changed.

Changes

Cohort / File(s) Summary of Changes
Transpiler config switch
config/shakapacker.yml
Set javascript_transpiler to swc; other settings unchanged.
SWC configuration
config/swc.config.js
Added SWC config exporting customConfig; sets transform.react.refresh only when env.isDevelopment and env.runningWebpackDevServer are both true; preserves class names and uses automatic React runtime.
Dependencies update
package.json
Added dependencies: @swc/core, ajv, swc-loader.
Ignore file update
.gitignore
Added package-lock.json to ignore (project uses yarn).

Sequence Diagram(s)

sequenceDiagram
 autonumber
 actor Dev
 participant WDS as Webpack Dev Server
 participant ENV as Shakapacker env
 participant Loader as swc-loader
 participant SWC as @swc/core
 Dev->>WDS: start dev build
 WDS->>ENV: query isDevelopment & runningWebpackDevServer
 ENV-->>WDS: return flags
 WDS->>Loader: load config/swc.config.js
 alt env.isDevelopment && env.runningWebpackDevServer
 note right of Loader #D1F2D8: React Refresh enabled
 Loader->>SWC: transform(..., react.refresh: true)
 else
 note right of Loader #F2DCDC: React Refresh disabled
 Loader->>SWC: transform(..., react.refresh: false)
 end
 SWC-->>Loader: transpiled JS
 Loader-->>WDS: bundle artifacts
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

Possibly related PRs

Poem

In my burrow I tap on keys and hop,
Babel's nap ends — SWC takes the top.
Refresh in dev when the server is near,
Production stays calm, swift builds appear.
A carrot for CI — code ready, cheer! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title succinctly describes the primary change of migrating from Babel to SWC to improve JavaScript transpilation performance, directly reflecting the core objective of the pull request. It uses clear and specific phrasing without unnecessary jargon or noise and highlights the benefit of faster builds. This aligns well with project conventions for concise, descriptive titles.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch justin808/babel-to-swc

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce8f58d and c336d81.

📒 Files selected for processing (1)
  • config/swc.config.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • config/swc.config.js
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: claude-review
  • GitHub Check: test (22.x, 3.4.6)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

claude bot commented Oct 6, 2025

Pull Request Review: Switch from Babel to SWC for faster JavaScript transpilation

Summary

This PR migrates the JavaScript transpiler from Babel to SWC by updating the Shakapacker configuration and installing the required dependencies. The changes are minimal and follow the Shakapacker documentation.


Strengths

1. Well-Documented Change

  • Clear PR description with benefits and rationale
  • Links to official documentation
  • Notes about coexistence with existing Babel tooling

2. Minimal, Focused Changes

  • Only touches necessary files (config + dependencies)
  • Single-line config change in shakapacker.yml
  • Appropriate dependency additions

3. Proper Dependency Management

  • Added @swc/core and swc-loader as expected
  • Added ajv to resolve module resolution issues (good troubleshooting)

🔍 Code Quality & Best Practices

Configuration (✅ Good)

The change in config/shakapacker.yml:11 is correct:

javascript_transpiler: swc

Dependency Versions (⚠️ Review Needed)

Issue: The swc-loader version ^0.2.6 is quite old (released in 2023).

Recommendation:

  • Verify this is the intended version for compatibility with Shakapacker 9.0.0-beta.8
  • The latest swc-loader is v0.2.x, so this appears intentional, but worth documenting why this specific version

⚠️ Potential Issues & Concerns

1. Missing SWC Configuration File (Medium Priority)

Issue: No config/swc.config.js file was created.

Impact:

  • Using default SWC settings which may not match your existing Babel configuration
  • The PR mentions "React Fast Refresh can be enabled in future by creating config/swc.config.js" - this should potentially be addressed now

Current Babel config (babel.config.js) includes:

  • React automatic runtime
  • Development mode transforms
  • react-refresh/babel plugin (for hot reloading)
  • babel-plugin-transform-react-remove-prop-types (production optimization)

Recommendation:
Create a config/swc.config.js to ensure feature parity:

module.exports = {
 jsc: {
 parser: {
 syntax: 'ecmascript',
 jsx: true,
 },
 transform: {
 react: {
 runtime: 'automatic',
 development: process.env.NODE_ENV !== 'production',
 refresh: process.env.WEBPACK_SERVE === 'true',
 },
 },
 },
};

2. Test Coverage (High Priority)

Issue: No indication that tests were run to verify the transpilation works correctly.

Recommendations:

  • Run yarn test to ensure Jest (which uses babel-jest per package.json:161) still works
  • Run yarn build:test and yarn build:dev to verify SWC compilation succeeds
  • Test React Fast Refresh/Hot Module Replacement in development mode
  • Verify production builds work correctly

3. Babel Still Required (Documentation Needed)

Issue: The PR correctly notes that Babel deps remain for ESLint/Jest, but this creates potential confusion.

Recommendation:
Add a comment in package.json or update README to clarify:

  • Webpack/Shakapacker uses SWC for transpilation (faster builds)
  • Babel still used by Jest for testing
  • Babel still used by ESLint parser
  • This is expected and intentional

4. Missing .browserslistrc Consideration (Low Priority)

Issue: package.json has a browserslist config (lines 145-151) which Babel respects, but SWC may handle differently.

Recommendation:

  • Verify SWC is respecting the browserslist targets
  • Consider adding explicit target configuration to swc.config.js if needed

🔒 Security Concerns

ajv Dependency Addition

Status: ✅ Safe

The ajv package (JSON schema validator) is a well-maintained, popular package with no known critical vulnerabilities. Adding it to resolve module resolution is appropriate.

Note: The version ^8.17.1 is current and actively maintained.


Performance Considerations

Expected Benefits (✅ Positive)

  • SWC's Rust-based compiler should provide 10-20x faster transpilation
  • Reduced build times in development
  • Faster CI/CD pipelines

Potential Concerns

Issue: No benchmarks provided

Recommendation:

  • Measure and document actual build time improvements
  • Test with production builds to ensure no performance regression
  • Monitor bundle size to ensure no unexpected changes

🧪 Test Coverage

Current State (❌ Insufficient)

  • No test execution mentioned in PR
  • No CI/CD results visible
  • yarn.lock changes suggest successful install, but not successful build/test

Required Testing

  1. ✅ Install succeeds (evidenced by yarn.lock)
  2. ❓ Development build succeeds
  3. ❓ Production build succeeds
  4. ❓ Test suite passes (Jest with Babel)
  5. ❓ Hot module replacement works
  6. ❓ React Fast Refresh works
  7. ❓ Server-side rendering still works (critical for react_on_rails)

Recommendation: Run the full test matrix before merging:

yarn install
yarn build:dev
yarn build:test
yarn test
yarn lint

📋 Additional Recommendations

1. Create Migration Checklist

Document a verification checklist in the PR:

  • Development build successful
  • Production build successful
  • Tests pass
  • Hot reload works
  • SSR rendering works
  • Bundle sizes comparable
  • Build time improvements measured

2. Consider Gradual Rollout

  • Deploy to staging first
  • Monitor for any runtime issues
  • Check server-side rendering carefully (SWC may transform code differently)

3. Update Documentation

Consider updating these files:

  • README.md - mention SWC as the transpiler
  • docs/ - add migration notes if needed
  • CHANGELOG.md - document this change

4. React Fast Refresh

Since the current Babel config has react-refresh/babel plugin, ensure SWC's React Fast Refresh is properly configured to maintain the same developer experience.


🎯 Verdict

Status: ⚠️ Needs Verification Before Merge

Blocking Issues:

  1. No evidence of test execution
  2. Missing SWC configuration for feature parity with Babel
  3. React Fast Refresh may not work without proper SWC config

Non-Blocking Recommendations:

  • Document build time improvements
  • Update project documentation
  • Add inline comments about Babel/SWC split

🛠️ Suggested Action Items

Before Merge:

  1. Create config/swc.config.js with React Fast Refresh support
  2. Run full test suite and document results
  3. Test development server with HMR/Fast Refresh
  4. Verify production build and SSR functionality

After Merge:

  1. Monitor production for any transpilation issues
  2. Document actual performance improvements
  3. Update README with new transpiler info
  4. Consider removing unused Babel config if it causes confusion (though keep dependencies for Jest/ESLint)

Great work on modernizing the build pipeline! SWC is an excellent choice for performance. Just need to ensure feature parity and test coverage before shipping. 🚀

🤖 Generated with Claude Code

Enable React Fast Refresh in development mode with SWC,
matching the functionality previously provided by Babel.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

claude bot commented Oct 6, 2025

Pull Request Review: Switch from Babel to SWC

Overall Assessment

Approved with minor suggestions

This PR successfully migrates the JavaScript transpiler from Babel to SWC, which should provide significant performance improvements during development and build processes. The implementation follows the Shakapacker documentation and the changes are well-documented.


Code Quality & Best Practices

✅ Strengths

  1. Clean Configuration: The swc.config.js file is well-structured and follows Shakapacker conventions
  2. Minimal Changes: The migration is focused and doesn't introduce unnecessary modifications
  3. Good Documentation: The PR description clearly explains the benefits and changes
  4. Backward Compatibility: Existing Babel dependencies are retained for tooling compatibility (ESLint, Jest)

💡 Suggestions

1. SWC Configuration Completeness (config/swc.config.js:3-12)
Consider adding JSX transform runtime configuration for better alignment with modern React practices:

const customConfig = {
 options: {
 jsc: {
 parser: {
 syntax: 'ecmascript',
 jsx: true,
 },
 transform: {
 react: {
 runtime: 'automatic', // Use automatic JSX runtime (React 17+)
 refresh: env.isDevelopment && env.runningWebpackDevServer,
 },
 },
 },
 },
};

This would enable the automatic JSX runtime introduced in React 17, eliminating the need to import React in every JSX file.

2. Missing Version Constraint (package.json:48)
The @swc/core dependency uses ^1.13.5, but given this is a critical infrastructure change, consider:

  • Pinning to a specific version initially (e.g., 1.13.5) to ensure build reproducibility
  • Or at minimum, using a tilde ~1.13.5 to allow only patch updates
  • Document the rationale for the version choice

3. ajv Dependency Justification (package.json:49)
The PR mentions adding ajv to resolve module resolution issues, but this seems unusual. Consider:

  • Documenting why ajv is needed (what module resolution issue?)
  • Verifying this is actually required or if it's a transitive dependency that should be resolved differently
  • If it's truly needed, add a comment in package.json explaining its purpose

Potential Bugs or Issues

⚠️ Minor Concerns

1. Test Configuration Not Updated (package.json:152-163)
The Jest configuration still uses babel-jest for transforms. While this is intentional (per PR description), consider:

  • Verifying that Jest tests still pass with the SWC build artifacts
  • Consider future migration to @swc/jest for consistency (can be a follow-up)
  • Add a comment in the Jest config noting that it intentionally uses Babel

2. Missing Error Handling
The swc.config.js doesn't include error handling if shakapacker module fails to load:

let env;
try {
 ({ env } = require('shakapacker'));
} catch (error) {
 console.error('Failed to load shakapacker. Ensure it is installed.');
 throw error;
}

Performance Considerations

✅ Excellent

  • Build Speed: SWC should provide 10-20x faster transpilation compared to Babel
  • Development Experience: React Fast Refresh configuration is properly enabled
  • Production Builds: No negative performance impact expected

📝 Recommendations

  1. Benchmark Validation: Consider running before/after build time comparisons and documenting them
  2. Bundle Size: Verify that the transpiled bundle size hasn't significantly changed
  3. Source Maps: Ensure source maps are still generated correctly for debugging

Security Concerns

✅ No Major Issues

Minor Notes:

  1. Dependency Chain: The new dependencies (@swc/core, swc-loader) introduce new native binary components

    • ✅ Both are from trusted sources (Vercel/swc-project)
    • ✅ Versions are recent and actively maintained
    • 💡 Consider adding automated dependency scanning (e.g., Dependabot, Snyk)
  2. Lock File Changes: The yarn.lock changes are extensive (1580 additions, 1390 deletions)

    • ✅ This is expected when adding new dependencies
    • 💡 Recommend reviewing the lock file for unexpected package additions using yarn why <package>

Test Coverage

⚠️ Needs Attention

Missing Tests:

  1. No Tests for SWC Configuration: Consider adding:
    • Integration test verifying SWC transpiles JSX correctly
    • Test ensuring React Fast Refresh works in development
    • Build verification test

Recommended Tests to Add:

// Example test structure
describe('SWC Configuration', () => {
 it('should enable React Fast Refresh in development mode', () => {
 process.env.NODE_ENV = 'development';
 const config = require('../config/swc.config.js');
 expect(config.options.jsc.transform.react.refresh).toBe(true);
 });
 it('should disable React Fast Refresh in production', () => {
 process.env.NODE_ENV = 'production';
 // ... test logic
 });
});

Existing Test Compatibility:

  • ✅ Existing Jest tests should continue working (using babel-jest)
  • 💡 Recommend running full test suite to verify no regressions
  • 💡 Consider adding CI check to verify build succeeds with SWC

Additional Recommendations

Documentation

  1. Update README: Consider adding a note about the SWC transpiler being used
  2. Migration Notes: Document any breaking changes or gotchas for other contributors
  3. Rollback Plan: Document how to revert to Babel if needed

Configuration Files

Consider adding .swcrc as an alternative to swc.config.js for consistency with other tool configurations (.babelrc, .eslintrc), though the current approach is fine.

Future Enhancements

  1. Consider migrating Jest to use @swc/jest for complete Babel removal
  2. Explore SWC for minification via terser-webpack-plugin alternatives
  3. Consider SWC's CSS minification capabilities

Checklist Summary

  • ✅ Code quality is good
  • ✅ No obvious bugs
  • ✅ Performance improvements expected
  • ✅ No major security concerns
  • ⚠️ Test coverage could be improved
  • 💡 Minor suggestions for enhancement

Recommendation: LGTM with minor suggestions. The PR is ready to merge, but consider addressing the test coverage and documentation suggestions in follow-up PRs.


Review generated with assistance from Claude Code

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ef11653 and cf7fd99.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (3)
  • config/shakapacker.yml (1 hunks)
  • config/swc.config.js (1 hunks)
  • package.json (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test (22.x, 3.4.6)
🔇 Additional comments (2)
config/swc.config.js (1)

8-8: The React Refresh conditional logic is correct.

The condition env.isDevelopment && env.runningWebpackDevServer appropriately restricts React Fast Refresh to development mode with the webpack dev server running.

config/shakapacker.yml (1)

11-11: LGTM!

The transpiler change from Babel to SWC is correctly configured for Shakapacker.

Comment on lines 3 to 13
const customConfig = {
options: {
jsc: {
transform: {
react: {
refresh: env.isDevelopment && env.runningWebpackDevServer,
},
},
},
},
};
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix the SWC configuration structure and add missing essential settings.

The current configuration has two issues:

  1. Incorrect structure: The options wrapper (line 4) is likely incorrect. SWC configurations for swc-loader typically have jsc at the root level, not nested under options.

  2. Missing essential configuration: The config lacks critical settings:

    • Parser settings (syntax, JSX support)
    • Target environment/ECMAScript version
    • Module type (CommonJS, ES modules)

Apply this diff to fix the structure and add essential configuration:

-const customConfig = {
- options: {
- jsc: {
- transform: {
- react: {
- refresh: env.isDevelopment && env.runningWebpackDevServer,
- },
- },
+const customConfig = {
+ jsc: {
+ parser: {
+ syntax: 'ecmascript',
+ jsx: true,
+ },
+ target: 'es2015',
+ transform: {
+ react: {
+ runtime: 'automatic',
+ refresh: env.isDevelopment && env.runningWebpackDevServer,
+ },
 },
 },
 };
📝 Committable suggestion

!!️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const customConfig = {
options: {
jsc: {
transform: {
react: {
refresh: env.isDevelopment && env.runningWebpackDevServer,
},
},
},
},
};
const customConfig = {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
target: 'es2015',
transform: {
react: {
runtime: 'automatic',
refresh: env.isDevelopment && env.runningWebpackDevServer,
},
},
},
};
🤖 Prompt for AI Agents
In config/swc.config.js around lines 3 to 13, remove the incorrect top-level
"options" wrapper so that "jsc" sits at the root of the SWC config; add missing
essential settings under jsc: a parser block (syntax: "ecmascript", jsx: true),
a target (e.g. "es2022" or desired ES version), and keep the existing
transform.react.refresh setting wired to env.isDevelopment &&
env.runningWebpackDevServer; also add a top-level module.type field (e.g.
"commonjs" or "es6") to declare module output format.

Comment on lines +48 to +49
"@swc/core": "^1.13.5",
"ajv": "^8.17.1",
Copy link

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify that the SWC dependency versions are current.

The versions of SWC-related packages may be outdated. Please ensure you're using the latest stable versions for optimal performance and security.

Since my knowledge may be outdated, please verify the current versions:

Also applies to: 101-101


🌐 Web query:

What are the latest stable versions of @swc/core and swc-loader packages?

💡 Result:

@swc/core — 1.13.1 (latest stable, published Jul 19, 2025). [1]
swc-loader — 0.2.6 (latest stable). [2]

Sources:
[1] Snyk package page for @swc/core.
[2] npm package page for swc-loader.


Update @swc/core to latest stable (1.13.1)
The declared "^1.13.5" isn’t published; change it to "^1.13.1".

🤖 Prompt for AI Agents
package.json around lines 48-49: the dependency entry for "@swc/core" is set to
an unpublished "^1.13.5"; change it to the published latest stable "^1.13.1",
update package.json accordingly, then run your package manager (npm install or
yarn install) to update node_modules and lockfile (package-lock.json or
yarn.lock) and verify the project builds/tests pass.

Project uses Yarn, so npm's package-lock.json should be ignored.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

claude bot commented Oct 7, 2025

Pull Request Review - Switch from Babel to SWC

Summary

This PR migrates the JavaScript transpiler from Babel to SWC, which should provide significant performance improvements during development and build times.

✅ Strengths

Code Quality

  • Clean migration approach: The PR correctly updates shakapacker.yml to use SWC as the JavaScript transpiler
  • Proper dependency management: Adds required @swc/core and swc-loader packages
  • React Fast Refresh support: Correctly implements React Fast Refresh in the SWC config for development
  • Preserves existing tooling: Wisely keeps Babel configuration intact for ESLint, Jest, and other tooling that may still need it

Configuration

  • Minimal SWC config: The config/swc.config.js is appropriately minimal and focused
  • Environment-aware: React refresh is correctly enabled only in development with webpack dev server
  • Gitignore update: Good addition of package-lock.json to gitignore since the project uses Yarn

⚠️ Issues & Recommendations

1. Missing JSX Transform Configuration (Important)

The swc.config.js doesn't specify the JSX runtime. Based on the babel.config.js which uses runtime: 'automatic', the SWC config should also specify this:

const customConfig = {
 options: {
 jsc: {
 transform: {
 react: {
 runtime: 'automatic', // Add this for React 17+ JSX transform
 refresh: env.isDevelopment && env.runningWebpackDevServer,
 },
 },
 },
 },
};

Without this, SWC will use the classic runtime which requires import React from 'react' in every file using JSX.

Location: config/swc.config.js:7-9

2. Consider Development Mode Flag

For consistency with the Babel config, you might want to add a development flag:

react: {
 runtime: 'automatic',
 development: env.isDevelopment,
 refresh: env.isDevelopment && env.runningWebpackDevServer,
},

This enables better error messages and debugging in development.

3. Missing Parser Configuration

SWC should be configured to handle TypeScript/decorators if needed. Consider adding:

const customConfig = {
 options: {
 jsc: {
 parser: {
 syntax: 'ecmascript',
 jsx: true,
 // decorators: true, // If your project uses decorators
 },
 transform: {
 react: {
 runtime: 'automatic',
 development: env.isDevelopment,
 refresh: env.isDevelopment && env.runningWebpackDevServer,
 },
 },
 },
 },
};

4. Dependency Version Consideration

  • @swc/core@^1.13.5 is quite outdated. Consider updating to the latest stable version (currently 1.9.x+) for better performance and bug fixes
  • swc-loader@^0.2.6 should also be updated to a more recent version

5. Testing Validation

The PR description mentions "Build process verified to work with SWC" but doesn't provide evidence of:

  • Running the test suite successfully with the new transpiler
  • Verifying that production builds work correctly
  • Confirming that all JSX transforms work as expected

Recommendation: Add a commit showing successful test runs and build output.

🔒 Security Considerations

  • ✅ No security concerns identified
  • ✅ Dependencies are from trusted sources (@swc/core is an official package)
  • ⚠️ Consider using exact versions or ranges with minor version updates only for build-critical packages

🚀 Performance Considerations

  • Excellent: SWC should provide 10-20x faster transpilation compared to Babel
  • ✅ Faster development experience with quicker rebuilds
  • ✅ Faster production builds

📋 Test Coverage

  • ⚠️ Missing: No updates to test configuration
  • ⚠️ Jest is still using Babel (via babel-jest) which is fine, but should be documented
  • ✅ Correctly preserves Babel config for Jest

Recommended Next Steps

  1. Update config/swc.config.js to include runtime: 'automatic' (critical)
  2. Update SWC dependencies to latest stable versions
  3. Run the full test suite and confirm all tests pass
  4. Test production build and verify bundle output
  5. Document in README that SWC is used for transpilation but Babel remains for testing
  6. Consider creating a separate PR to migrate Jest to use SWC in the future

Overall Assessment

Status: ✅ Approved with recommendations

This is a solid migration that follows best practices. The main issue is the missing JSX runtime configuration which should be addressed before merging. Once that's fixed, this PR will provide significant performance benefits to the development workflow.

Great work on a clean migration! 🎉


Review generated with Claude Code

Copy link

claude bot commented Oct 7, 2025

Pull Request Review: Switch from Babel to SWC

Summary

This PR migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler that promises significant performance improvements. I've reviewed the code changes, configuration, and potential impacts.

✅ Strengths

1. Configuration Quality

  • config/swc.config.js: Well-structured configuration with appropriate settings:
    • keepClassNames: true - Important for debugging and React DevTools
    • React Fast Refresh enabled conditionally (env.isDevelopment && env.runningWebpackDevServer) - Smart optimization
    • Clean, minimal configuration following Shakapacker best practices

2. Appropriate Dependency Additions

  • @swc/core@^1.13.5 and swc-loader@^0.2.6 - Core dependencies for SWC
  • ajv@^8.17.1 - Addresses module resolution issues (good catch)

3. Smart Migration Approach

  • Keeping Babel dependencies intact for ESLint, Jest, and other tooling - prevents breaking existing tools
  • Minimal invasive changes - only updating the transpiler setting in shakapacker.yml:11

4. .gitignore Addition

  • Adding package-lock.json to .gitignore:52 is appropriate since the project uses Yarn

⚠️ Areas for Improvement

1. Test Coverage Gap ⚠️

Issue: The project has existing Jest tests (package.json:160-162) that still use babel-jest as the transform:

"transform": {
 "^.+\\.jsx?$": "babel-jest"
}

Impact: Tests continue using Babel for transpilation, creating an inconsistency where:

  • Production/development builds use SWC
  • Tests use Babel
  • This could lead to behavioral differences between test and runtime environments

Recommendation: Consider updating Jest configuration to use @swc/jest or at minimum document this intentional discrepancy in the PR description.

2. Missing SWC Version Compatibility Check

Issue: @swc/core@^1.13.5 uses a caret range, but SWC has had breaking changes between minor versions historically.

Recommendation: Consider pinning to exact version or at least tilde (~1.13.5) for more predictable behavior, especially given this is a beta Shakapacker version (9.0.0-beta.8).

3. Build Verification

Question: Has the build been tested in production mode with all optimizations enabled?

  • Verify CSS extraction works correctly
  • Confirm minification/compression outputs are correct
  • Check that source maps work properly

Recommendation: Document tested environments (development + production builds) in PR description.

4. React Refresh Configuration Consideration

Minor: In config/swc.config.js:9, React Fast Refresh only works when:

env.isDevelopment && env.runningWebpackDevServer

This means developers using bin/shakapacker -w (mentioned in shakapacker.yml:25) won't get Fast Refresh unless the dev server is running. This might be intentional based on the project setup, but worth confirming.

5. Missing Polyfill Configuration

Issue: SWC handles JSX transformation differently than Babel. The SWC config doesn't specify env.targets or env.mode settings.

Recommendation: Consider adding explicit browser targets to ensure consistent transpilation:

options: {
 env: {
 targets: require('./package.json').browserslist,
 mode: "usage"
 },
 jsc: {
 // ... existing config
 }
}

🔒 Security Considerations

No security concerns identified

  • Dependency additions are from official sources
  • No sensitive data exposure
  • No credential handling changes

🎯 Performance Considerations

Expected Improvements

  • SWC should significantly improve build times (claimed 20x faster)
  • Faster development experience with HMR
  • Lower CPU usage during development

⚠️ Measurement Recommendation: Consider adding build time metrics to verify performance improvements in your specific codebase.


📋 Testing Recommendations

Pre-merge Checklist:

  • Run full test suite: yarn test
  • Verify development build: yarn build:dev
  • Verify production build with: RAILS_ENV=production NODE_ENV=production bin/shakapacker
  • Test HMR/Fast Refresh functionality
  • Verify existing React components render correctly
  • Check that source maps work in development
  • Confirm ReScript integration still works (yarn res:build)

Post-merge Monitoring:

  • Monitor for any runtime errors related to transpilation
  • Watch for edge cases with newer JS syntax
  • Verify CI/CD pipelines complete successfully

🐛 Potential Bugs

No obvious bugs detected in the changed code. The configuration follows documented patterns.


💡 Additional Suggestions

  1. Documentation Update: Consider adding a section to the README about the SWC migration and any differences developers might encounter.

  2. Rollback Plan: Since this is a beta Shakapacker version, document a rollback procedure in case issues arise.

  3. TypeScript Consideration: If you plan to add TypeScript in the future, SWC has excellent TS support, but ensure jsc.parser.syntax is configured correctly.


✨ Conclusion

This is a solid, well-implemented migration that follows Shakapacker's documented best practices. The main concerns are:

  1. Test transpilation inconsistency (Babel vs SWC)
  2. Missing explicit browser target configuration
  3. Need for thorough build verification across environments

The changes are low-risk and should provide significant performance benefits. With the recommended test coverage and configuration improvements, this PR would be ready to merge.

Overall Assessment: ✅ Approve with minor suggestions


Review generated by Claude Code

Copy link

claude bot commented Oct 7, 2025

Pull Request Review: Switch from Babel to SWC for JavaScript Transpilation

This PR migrates the JavaScript transpiler from Babel to SWC for improved build performance. The implementation is solid but needs attention in several areas.

Strengths

  1. Clear Documentation - Well-documented rationale (20x faster compilation) with references to official Shakapacker docs
  2. Correct Configuration - Properly updated shakapacker.yml and added necessary dependencies
  3. React Fast Refresh - Correctly implements conditional Fast Refresh for development

Issues and Recommendations

1. Code Quality: SWC Configuration (config/swc.config.js:9)

The target es2015 is conservative given your browserslist (>1%, last 5 versions, Safari 7+). Consider es2020 or es2022 for better performance and smaller bundles, or remove the target to let SWC infer from browserslist.

2. Outdated Dependencies

@swc/core ^1.13.5 is outdated (latest is 1.9.x+). Update to latest version for bug fixes and performance improvements. Run yarn audit to check for vulnerabilities.

3. Missing Configuration Options

The SWC config is minimal. Consider adding:

  • runtime: automatic for modern JSX transform (no React imports needed)
  • Parser configuration for ECMAScript features
  • development: env.isDevelopment for better error messages
  • externalHelpers: true to reduce bundle size
  • minify: env.isProduction for production builds

4. Testing Gap (Major Concern)

No evidence of testing the migration. Please document:

  • Testing in dev, test, and production environments
  • Verification that HMR/React Fast Refresh works
  • Confirmation that all tests pass with yarn test
  • Build size comparison before/after

5. Missing Performance Benchmarks

Document actual build time improvements with before/after metrics. SWC claims 20x faster, but what is the real impact for this project?

6. Incomplete Migration Planning

You note Babel config remains but do not clarify:

  • What still uses Babel? (ESLint via @babel/eslint-parser, Jest via babel-jest)
  • Can unused Babel dependencies be removed?
  • Follow-up plan to migrate other tools?

7. .gitignore Addition

Good - Preventing package-lock.json conflicts is a best practice.

Security Considerations

  1. Run yarn audit to check for vulnerabilities
  2. @swc/core includes native binaries - ensure using official npm registry
  3. Verify if ajv is actually required or should be transitive

Action Items

High Priority:

  1. Test thoroughly in all environments (dev/test/prod)
  2. Update @swc/core to latest stable version
  3. Review and adjust target setting to match browserslist
  4. Run yarn audit and address security issues
  5. Add React runtime: automatic for modern JSX

Medium Priority:

  1. Document performance improvements with metrics
  2. Enhance swc.config.js with parser options
  3. Add verification checklist to PR description
  4. Audit unused Babel dependencies

Overall Assessment

Status: Approve with suggestions

This is a positive change that will improve DX and build performance. The implementation is fundamentally sound but would benefit from:

  1. Thorough testing documentation
  2. Updated dependencies
  3. Enhanced SWC configuration
  4. Performance benchmarks

Safe to merge after addressing high-priority items.

Questions

  1. Have you tested in dev, test, and production?
  2. What is the actual build time improvement?
  3. Any breaking changes or features that stopped working?
  4. Why @swc/core ^1.13.5 instead of latest?
  5. React Fast Refresh verified working?
  6. Is ajv dependency actually needed?

Great work improving the build tooling!

Generated with Claude Code

Copy link

claude bot commented Oct 7, 2025

Pull Request Review: Switch from Babel to SWC

Summary

This PR migrates the JavaScript transpiler from Babel to SWC, which should provide significant build performance improvements. Overall, this is a solid migration with good attention to detail. Below are my findings across several categories.


✅ Code Quality & Best Practices

Strengths:

  • Clean, minimal configuration in config/swc.config.js
  • Appropriate use of environment detection for React Fast Refresh
  • Good adherence to Shakapacker documentation
  • Proper addition of .gitignore entry for package-lock.json to prevent npm/yarn conflicts

Suggestions:

  1. SWC Config - Missing Parser Configuration: The config/swc.config.js:3-16 lacks parser configuration. Consider adding:
const customConfig = {
 options: {
 jsc: {
 parser: {
 syntax: 'ecmascript',
 jsx: true,
 dynamicImport: true,
 },
 keepClassNames: true,
 loose: false,
 externalHelpers: false,
 transform: {
 react: {
 refresh: env.isDevelopment && env.runningWebpackDevServer,
 runtime: 'automatic', // matches babel.config.js
 },
 },
 },
 },
};
  1. Consider Target Environment: Add target specification to ensure compatibility with your browserslist:
jsc: {
 target: 'es2015', // or 'es2016' based on your needs
 // ... rest of config
}

🐛 Potential Issues

Medium Priority

  1. Babel Config Still Active: The babel.config.js file remains unchanged and will still be used by ESLint and Jest (as noted in the PR description). However, this creates a potential inconsistency:

    • Issue: Jest is configured to use babel-jest (package.json:161), which will transpile differently than SWC during builds
    • Recommendation: Consider updating Jest to use @swc/jest for consistency:
    "jest": {
     "transform": {
     "^.+\\.jsx?$": ["@swc/jest"]
     }
    }
  2. React Refresh Configuration Mismatch: The Babel config has React Refresh for dev server (babel.config.js:18), and SWC has it too, but they're configured differently. Ensure only one is active to avoid conflicts.

Low Priority

  1. ajv Dependency: The PR adds ajv@^8.17.1 to resolve module resolution issues. While this works, it would be helpful to document which dependency requires this peer dependency for future maintainers.

⚡ Performance Considerations

Positive:

  • SWC should provide 5-20x faster build times compared to Babel
  • The configuration is minimal, which reduces overhead
  • Fast Refresh is properly configured for optimal HMR performance

Suggestions:

  1. Consider benchmarking build times before/after to quantify improvements for documentation
  2. Monitor initial production builds to ensure compilation times meet expectations

🔒 Security Concerns

No significant security issues identified.

Minor notes:

  • The dependency updates in yarn.lock include many integrity hash changes, which is expected when updating packages
  • @swc/core is a well-maintained project by the Vercel team with good security practices
  • The ajv package is a mature, widely-used JSON schema validator

🧪 Test Coverage

Concerns:

  1. No Test Changes: The PR doesn't include any test modifications or additions to verify that:

    • The transpilation works correctly for all JSX/React code
    • Edge cases (dynamic imports, class properties, decorators) are handled
    • The build output is functionally equivalent to Babel's output
  2. Jest Still Using Babel: As mentioned above, tests will still transpile via Babel while production builds use SWC, creating a testing/production parity gap.

Recommendations:

  • Add a simple integration test that verifies a production build can be created successfully
  • Test a sample React component with modern JS features (optional chaining, nullish coalescing, class properties)
  • Consider running the full test suite with both Babel and SWC to ensure parity

📋 Additional Recommendations

  1. Documentation: Consider adding a note to the README or contributing guide about:

    • Why SWC was chosen over Babel for production builds
    • The fact that Babel is still used for testing/linting
    • How to troubleshoot transpilation issues if they arise
  2. Error Handling: SWC error messages can be different from Babel's. The team should be aware that syntax errors might be reported differently during development.

  3. Webpack Configuration: Verify that the webpack config doesn't have any Babel-specific optimizations that might not apply to SWC.

  4. Future Migration Path: Since Babel is still required for tooling, consider:

    • A timeline for migrating Jest to @swc/jest
    • Whether ESLint can use type-based linting instead of Babel parsing

✅ Conclusion

This is a well-executed migration that should provide significant performance benefits. The main concerns are:

  1. Test/production transpiler parity (Jest still using Babel)
  2. Missing parser configuration in SWC config
  3. Potential React Refresh conflicts

Recommendation: Approve with minor modifications suggested above. The PR is safe to merge as-is, but would benefit from the Jest migration to @swc/jest in a follow-up PR.

Overall Rating: 8/10 - Good work! 🎉


🤖 Generated with Claude Code

Add keepClassNames: true to SWC configuration to ensure Stimulus
controllers work correctly. Without this setting, class names are
mangled during transpilation, breaking Stimulus functionality.
This fixes failing RSpec tests for Turbo/Stimulus form submission.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Match the Babel configuration's React automatic runtime setting,
which enables the new JSX transform (no need to import React).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

claude bot commented Oct 7, 2025

Pull Request Review: Switch from Babel to SWC

Overview

This PR successfully migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler that promises significantly faster build times. The implementation is well-executed overall with proper configuration and documentation.


✅ Strengths

  1. Well-documented migration: The PR description clearly explains the benefits, changes, and references official documentation.

  2. Incremental approach: The commits show a logical progression - basic SWC setup, React Fast Refresh, gitignore fix, and Stimulus compatibility fix.

  3. Critical fix included: The keepClassNames: true setting (config/swc.config.js:7) properly addresses Stimulus controller discovery, which would have been a production bug without it.

  4. Feature parity maintained: React Fast Refresh and automatic JSX runtime match the previous Babel configuration.

  5. Clean gitignore update: Adding package-lock.json is appropriate for a Yarn-based project.


🔍 Code Quality & Best Practices

config/swc.config.js

  • ✅ Clean, well-commented configuration
  • ✅ Proper use of Shakapacker environment detection
  • ✅ Matches Babel's React automatic runtime setting (babel.config.js:11)

config/shakapacker.yml

  • ✅ Minimal change (single line modification)

.gitignore

  • ✅ Good comment explaining the addition

⚠️ Potential Issues & Recommendations

1. Dependency Management (Medium Priority)

The PR adds ajv as a direct dependency (package.json:49), but the reason isn't explained:

  • Issue: ajv is typically used for JSON schema validation. Why is this needed with SWC?
  • Recommendation: The PR description mentions "module resolution issues" but lacks specifics. Consider:
    • Is ajv required by swc-loader or @swc/core but not properly declared as a peer dependency?
    • Can you document the specific error that ajv resolves?
    • Check if this is still needed with the latest versions of SWC packages
# Verify if ajv is actually used
npm ls ajv

2. Babel Dependencies Still Present (Low Priority - Acknowledged)

  • Status: PR description acknowledges Babel remains for ESLint, Jest, etc.
  • Future consideration: This creates ~30MB of duplicate transpiler dependencies. Consider:
    • Migrating Jest to use SWC (@swc/jest)
    • Using @rushstack/eslint-patch or running ESLint on transpiled code
    • Timeline for full Babel removal

3. Missing SWC Version Constraints (Low Priority)

Current versions:

  • @swc/core: ^1.13.5 (allows minor updates)
  • swc-loader: ^0.2.6 (very permissive)

Recommendation: SWC is still evolving rapidly. Consider:

"@swc/core": "~1.13.5", // Allow patch updates only
"swc-loader": "~0.2.6" // Allow patch updates only

4. Test Coverage Concern (Medium Priority)

  • Question: Are there integration tests that verify:
    • Build process completes successfully?
    • React Fast Refresh works in development?
    • Stimulus controllers are discovered correctly?
    • All existing features still work?

The commit messages mention fixing failing RSpec tests, which is good, but it would be valuable to ensure CI passes all checks.


🔒 Security Considerations

  • ✅ No security concerns identified
  • ✅ SWC is a well-maintained project by Vercel
  • ✅ No credentials or sensitive data exposed
  • i️ The dependency count increases slightly, which marginally increases supply chain risk, but this is acceptable given SWC's reputation

🚀 Performance Considerations

Positive impacts:

  • ✅ SWC claims 20x faster compilation (Rust vs JavaScript)
  • ✅ Faster hot reloads during development
  • ✅ Faster CI/CD builds

Neutral/Unknown:

  • ❓ Actual performance improvement metrics not provided
  • ❓ Bundle size comparison not included

Recommendation: Consider measuring and documenting:

# Before/after build time comparison
time RAILS_ENV=production NODE_ENV=production bin/shakapacker

📋 Test Coverage

Missing information:

  • Test results showing all tests pass
  • CI status (checks passing/failing?)

Recommendation: Ensure the following are tested:

  • Development builds work
  • Production builds work
  • React Fast Refresh functions correctly
  • Stimulus controllers are properly discovered
  • All existing JavaScript/JSX code transpiles correctly
  • Bundle size hasn't significantly increased

💡 Suggestions for Improvement

  1. Document the ajv requirement: Add a code comment explaining why it's needed:

    // config/swc.config.js
    // Note: ajv is required as a direct dependency due to [specific reason]
  2. Add SWC version to config: Consider adding a comment with the SWC version for future reference:

    // Compatible with @swc/core ^1.13.5
    const customConfig = {
  3. Consider adding a migration guide: If this pattern will be used in other ShakaCode projects, document the migration steps.

  4. Verify production build: Ensure production builds are tested and minification still works correctly.


✅ Final Verdict

Approve with minor suggestions

This is a solid migration that successfully modernizes the build toolchain. The implementation is correct, well-documented, and includes important fixes (like keepClassNames). The main concerns are:

  • Clarifying the ajv dependency requirement
  • Confirming all tests pass
  • Considering tighter version constraints for SWC packages

The PR is ready to merge once:

  1. The ajv dependency is explained/documented
  2. CI checks are passing
  3. The team confirms the suggestions are addressed or acknowledged

Great work on this migration! 🎉


🤖 Generated with Claude Code

Copy link

claude bot commented Oct 7, 2025

Pull Request Review: Switch from Babel to SWC

This PR migrates the JavaScript transpiler from Babel to SWC for improved build performance. Overall, this is a well-executed migration that follows Shakapacker documentation.

STRENGTHS:

  • Well-structured swc.config.js with appropriate comments
  • keepClassNames correctly configured for Stimulus
  • React Fast Refresh properly enabled for development
  • Excellent PR description with benefits and documentation
  • Appropriate dependency additions

CRITICAL ISSUES TO ADDRESS:

  1. Missing JSX Runtime Configuration (HIGH PRIORITY)
    The babel.config.js shows React automatic runtime but swc.config.js does not specify this. Need to add runtime: automatic to the react transform config.

  2. Missing Target Configuration (MEDIUM PRIORITY)
    swc.config.js does not specify target environment. Should add target: es2015 to match browserslist.

  3. Test Coverage Gap (HIGH PRIORITY)
    No evidence that builds were tested in all environments. Please verify: yarn build:test works, Jest still works, all React features transpile correctly, server-side rendering still works, and CI checks pass.

  4. Large yarn.lock Changes (MEDIUM PRIORITY)
    1,580 additions and 1,390 deletions is very large for 3 dependencies. Run yarn why @swc/core to understand dependency tree and yarn audit for security.

  5. Version Pinning Consideration
    @swc/core uses caret versioning. Consider exact pinning for critical infrastructure.

  6. ajv Dependency Unclear
    Please document what specific module resolution issue ajv solves.

ACTION ITEMS BEFORE MERGE:
Required:

  • Add explicit JSX runtime configuration to swc.config.js
  • Add target environment to swc.config.js
  • Document ajv dependency rationale
  • Verify all CI checks pass
  • Test production build thoroughly

Nice to Have:

  • Add build time benchmarks
  • Consider exact version pinning
  • Analyze yarn.lock changes

OVERALL ASSESSMENT:
Code Quality: 8/10
Documentation: 9/10
Completeness: 6/10
Risk Level: Medium

Recommendation: Request Changes - Address the JSX runtime and target configuration issues, verify all tests pass, then this will be ready to merge.

Great work on this migration! Address the items above and this will be production-ready.

Override Shakapacker's default loose: true setting with loose: false
to ensure spec-compliant class transforms that work with Stimulus.
Without this, Stimulus controllers fail silently even with
keepClassNames: true.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

claude bot commented Oct 8, 2025

PR Review: Babel to SWC Migration

I've reviewed this PR for the migration from Babel to SWC. Overall, this is a well-structured migration with good documentation. Here's my detailed analysis:

✅ Strengths

  1. Excellent Documentation: The PR description clearly explains the benefits, changes, and includes relevant documentation links
  2. Proper SWC Configuration: The config/swc.config.js file is well-commented and addresses key concerns
  3. Minimal Surface Area: Only essential files were modified, reducing risk
  4. Good .gitignore Addition: Adding package-lock.json to .gitignore is appropriate since the project uses Yarn

🔍 Code Quality & Best Practices

config/swc.config.js:16 - The React Fast Refresh configuration is correct:

refresh: env.isDevelopment && env.runningWebpackDevServer,

This properly guards against enabling refresh in production or when the dev server isn't running.

config/swc.config.js:10 - Good catch on loose: false:
The comment correctly notes this is required for Stimulus controllers. This overrides Shakapacker's default loose: true.

config/swc.config.js:7 - keepClassNames: true is essential:
Correctly preserves class names for Stimulus controller discovery.

⚠️ Potential Issues & Recommendations

1. Version Compatibility Concerns

@swc/core@^1.13.5 (from package.json:48) is quite outdated. The current stable version is 1.11.x+. Consider:

"@swc/core": "^1.11.0"

swc-loader@^0.2.6 (from package.json:101) is also outdated. The latest is 0.2.x series, but verify compatibility:

"swc-loader": "^0.2.6" // This is actually current, but test with newer @swc/core

2. Missing ajv Justification

The PR adds ajv@^8.17.1 to resolve module resolution issues, but:

  • This suggests a peer dependency issue
  • Should verify if ajv is actually needed or if it's masking an underlying issue
  • Consider checking if a newer version of another dependency would resolve this without adding ajv

3. Babel Still Required - Clarification Needed

The PR notes Babel config remains for ESLint and Jest. However:

babel.config.js:18 still includes react-refresh/babel:

process.env.WEBPACK_SERVE && 'react-refresh/babel',

Question: If SWC is handling React Fast Refresh (swc.config.js:16), is the Babel plugin still needed? This could cause conflicts or redundancy.

Recommendation: Document or verify that:

  • Jest is configured to use babel-jest (confirmed in package.json:161)
  • ESLint parser uses @babel/eslint-parser (confirmed in package.json:112)
  • The react-refresh/babel plugin only runs for tooling, not webpack builds

4. React 19 Compatibility

package.json:80-81 uses react@^19.0.0:

"react": "^19.0.0",
"react-dom": "^19.0.0"

Verify SWC 1.13.5 fully supports React 19 syntax and features. React 19 is relatively new, and older SWC versions might not have full support.

5. Testing Coverage

Missing from PR:

  • No test results showing builds pass with SWC
  • No performance benchmarks comparing Babel vs SWC build times
  • No verification that React Fast Refresh actually works

Recommendation: Add a comment or update the PR description with:

# Build verification
yarn build:dev
yarn build:test
# Performance comparison (optional but valuable)
time yarn build:dev # Compare before/after

🔒 Security Concerns

No security issues identified. The migration:

  • Uses official SWC packages
  • Doesn't introduce vulnerable dependencies
  • Properly ignores package-lock.json to prevent lock file confusion

🎯 Performance Considerations

Positive:

  • SWC's Rust-based compiler should provide 10-20x faster transpilation
  • Proper caching configured in shakapacker.yml:8

Watch for:

  • Initial build might be slower due to Rust binary compilation
  • Memory usage may differ from Babel (typically lower with SWC)

🧪 Test Coverage

babel.config.js:32 - Babel still used for Jest:

"transform": {
 "^.+\\.jsx?$": "babel-jest"
}

This is appropriate since SWC's Jest integration (@swc/jest) wasn't added. Consider in future:

"@swc/jest": "^0.2.36" // For even faster test runs

📋 Action Items

Before Merge:

  1. ✅ Verify CI passes (check Actions/CircleCI)
  2. ⚠️ Test React Fast Refresh in development
  3. ⚠️ Verify Stimulus controllers still work correctly
  4. ⚠️ Confirm no Babel/SWC plugin conflicts

Consider for Follow-up:

  1. Update @swc/core to latest stable version
  2. Investigate if ajv is truly necessary
  3. Consider migrating Jest to @swc/jest for consistency
  4. Add performance metrics to validate the 20x claim

📊 Overall Assessment

Rating: ✅ Approve with minor suggestions

This is a solid migration that follows best practices. The main concerns are:

  1. Version updates recommended
  2. Need to verify no Babel/SWC conflicts
  3. Missing test verification in PR description

The code quality is good, configuration is well-thought-out, and the approach is sound. Once the version concerns and testing verification are addressed, this should provide significant build performance improvements.


Great work on this migration! The detailed PR description and thoughtful SWC configuration show careful planning. 🚀

Review generated with Claude Code

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Copy link

claude bot commented Oct 8, 2025

PR Review: Switch from Babel to SWC for JavaScript Transpilation

Summary

This PR migrates the JavaScript transpiler from Babel to SWC, a Rust-based compiler promising faster build times. Overall, this is a well-executed migration with good documentation, but there are several important considerations and recommendations below.


✅ Strengths

1. Clear Documentation

  • Excellent PR description with clear benefits, changes, and external references
  • Well-commented swc.config.js explaining each configuration option
  • Appropriate note about keeping Babel dependencies for tooling

2. Thoughtful Configuration

  • keepClassNames: true - Critical for Stimulus controller discovery
  • loose: false - Correctly overrides Shakapacker's default for spec compliance
  • runtime: 'automatic' - Modern React 17+ JSX transform
  • Conditional React Fast Refresh setup for development

3. Minimal Surface Area

  • Only 4 files changed (excluding yarn.lock)
  • Single-line change to shakapacker.yml
  • Clean, focused implementation

⚠️ Concerns & Recommendations

1. Outdated Dependencies - CRITICAL

The SWC packages are significantly outdated:

"@swc/core": "^1.13.5", // Released ~2024 - VERY OLD
"swc-loader": "^0.2.6", // Last updated 2022

Recommendation: Update to latest stable versions:

"@swc/core": "^1.10.5", // Or latest 1.x
"swc-loader": "^0.2.6", // Check if there's a newer version

Why this matters:

  • Security vulnerabilities in older versions
  • Missing performance improvements
  • Potential compatibility issues with React 19
  • Bug fixes and stability improvements

2. React 19 Compatibility

Your package.json shows:

"react": "^19.0.0",
"react-dom": "^19.0.0"

React 19 is very new. Potential issues:

  • SWC 1.13.5 predates React 19 release
  • The runtime: 'automatic' transform may need verification with React 19
  • Consider adding integration tests

Action: Verify React 19 compatibility with your SWC version, or update SWC.

3. Configuration Inconsistency

Your babel.config.js also has:

runtime: 'automatic',
development: !isProductionEnv,

But swc.config.js doesn't have a development flag equivalent.

Question: Does SWC's React transform need a development option for better error messages in dev mode?

4. Missing Test Coverage

  • No tests modified or added for the transpiler change
  • Jest still uses babel-jest (line 116, 161 in package.json)
  • This creates a dual-transpiler situation where:
    • Production code: SWC
    • Test code: Babel

Risks:

  • Different transform behaviors between test and production
  • Babel-specific bugs won't be caught in tests
  • Class name transformations might differ

Recommendation:

  • Add a test that verifies Stimulus controllers work correctly (class names preserved)
  • Consider migrating Jest to use @swc/jest for consistency
  • Or document why dual transpilers are acceptable

5. Dependency Why: ajv

"ajv": "^8.17.1",

The PR description mentions this "resolves module resolution issues" but:

  • Not clear what issues specifically
  • ajv is a JSON schema validator - usually a transitive dependency
  • Explicitly adding it might mask webpack resolution problems

Questions:

  • What error did you see without it?
  • Is this a Shakapacker bug that should be reported?
  • Should this be a devDependency instead?

6. Performance Verification

Missing: Actual build time comparisons

Recommendation: Add before/after build metrics:

# Before (Babel)
time yarn build:dev
# After (SWC) 
time yarn build:dev

Include these in the PR description to validate the "20x faster" claim for this specific project.

7. Babel Dependencies Kept

You correctly kept Babel for ESLint and Jest, but the dependency list includes:

  • babel-loader - Still needed? If SWC is used for webpack, this might be removable
  • babel-plugin-macros - Are macros still working with SWC?
  • @babel/preset-react - Duplicates SWC's React transform

Action: Document which Babel packages are kept and why, or create a follow-up issue to prune unused ones.


🔒 Security

No major security concerns, but:

  1. Outdated @swc/core version (see recommendation above)
  2. Always verify SWC releases for security advisories

🚀 Performance

Expected improvements:

  • Faster development rebuilds
  • Reduced build times in CI
  • Lower CPU usage during compilation

To validate: Add build time metrics as mentioned above.


📝 Code Quality

Score: 8/10

Good:

  • Clean, well-commented configuration
  • Follows Shakapacker conventions
  • No code smells

Could improve:

  • Version freshness
  • Test coverage
  • Documentation of kept Babel dependencies

✅ Final Recommendation

Conditional Approval - Merge after addressing:

  1. MUST FIX (before merge):

    • Update @swc/core to latest stable version (security + compatibility)
    • Verify React 19 compatibility with SWC transform
    • Document/remove the ajv dependency or explain the resolution issue
  2. SHOULD FIX (before or shortly after merge):

    • Add build time comparison metrics
    • Add test for Stimulus controller class names
    • Consider migrating Jest to @swc/jest
  3. NICE TO HAVE (follow-up PR):

    • Audit and prune unused Babel dependencies
    • Add development flag to SWC React config if needed
    • Performance monitoring in CI

📚 Additional Notes

Great migration overall! The configuration shows understanding of the framework requirements (Stimulus, React, Shakapacker). The main concerns are about dependency versions and test consistency.

Suggested next steps:

  1. Run full test suite to ensure no regressions
  2. Test in development with HMR to verify React Fast Refresh works
  3. Deploy to staging to validate production builds
  4. Monitor bundle sizes (SWC might produce slightly different output)

Generated with Claude Code

@justin808 justin808 merged commit 8b80714 into master Oct 8, 2025
6 checks passed
@justin808 justin808 deleted the justin808/babel-to-swc branch October 8, 2025 03:48
Copy link

github-actions bot commented Oct 8, 2025
edited
Loading

✅ Review app for PR #677 was successfully deleted

View Completed Delete Logs

Control Plane Organization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

1 participant

AltStyle によって変換されたページ (->オリジナル) /