Improve Shakapacker compatibility and add autofix command

- Lower Shakapacker requirement from ~> 8.0 to >= 6.0 for broader compatibility
- Add intelligent version warning in generator output for Shakapacker < 8.0
- Create unified autofix command (rake autofix) combining eslint --fix, prettier --write, and rubocop -A
- Update AI agent best practices documentation with simplified workflow
- Add prettier --write to linting workflow for complete formatting coverage

The version strategy maintains backward compatibility while encouraging upgrades
through clear messaging and actionable guidance.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

CHANGELOG.md

@@ -36,7 +36,7 @@ Changes since the last non-beta release.
   - Removed files: `rakelib/webpacker_examples.rake`, `lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb`
   - All webpacker compatibility code and tests have been removed
 - **CI/Development runtime requirements updated**:
-  - *Note, this is just what CI tests*. You can use older versions of Ruby and Node.js, but you may run into issues.*
+  - _Note, this is just what CI tests_. You can use older versions of Ruby and Node.js, but you may run into issues.\*
   - Minimum Ruby version: 3.2 (was 3.0)
   - Maximum Ruby version: 3.4 (was 3.3)
   - Minimum Node.js version: 20 (was 16)

CONTRIBUTING.md

@@ -292,6 +292,7 @@ git clean -fd && git reset --hard && git clean -fd
 When testing specific generator improvements or fixes, test both Shakapacker scenarios:
 
 **Scenario A: No Shakapacker installed (fresh Rails app)**
+
 ```bash
 # Reset to clean baseline before each test
 git clean -fd && git reset --hard generator_testing_base && git clean -fd
@@ -307,6 +308,7 @@ rails generate react_on_rails:install
 ```
 
 **Scenario B: Shakapacker already installed**
+
 ```bash
 # Reset to clean baseline
 git clean -fd && git reset --hard generator_testing_base && git clean -fd
@@ -330,10 +332,11 @@ rails generate react_on_rails:install
 **3. Document testing results:**
 
 For each commit tested, document:
+
 - Generator execution success/failure for both scenarios
 - Shakapacker installation/detection behavior
 - Component rendering in browser
-- Console output and warnings  
+- Console output and warnings
 - File generation differences between scenarios
 - Specific issues found
 
@@ -355,7 +358,7 @@ When testing specific commits that fix generator issues, follow this process:
 cd ~/shakacode/react-on-rails/react_on_rails
 git checkout <commit-hash>  # e.g., 81c66fa or bc69dcd0
 
-# In test application 
+# In test application
 cd ~/shakacode/react-on-rails/react_on_rails-test-apps/react-on-rails-tutorial-v15
 
 # Reset to clean baseline
@@ -370,6 +373,7 @@ bundle install
 ```
 
 **Expected outcomes to verify:**
+
 - Generator completes without errors
 - Shakapacker integration works correctly
 - React components render and are interactive
@@ -420,22 +424,26 @@ npm install ../path/to/react_on_rails/react-on-rails-15.0.0.tgz
 ```
 
 This approach:
+
 - ✅ Exactly mimics real package installation
-- ✅ No symlink issues across different filesystems  
+- ✅ No symlink issues across different filesystems
 - ✅ More reliable for CI/CD testing
 - ⚠️ Requires manual step after each change (can be scripted)
 
 **Why this is needed**:
+
 - The gem provides Rails integration and server-side rendering
 - Yalc provides the complete JavaScript client library needed for component mounting
 - Without yalc, you'll see empty divs where React components should render
 
 **Verification**:
+
 - Visit the hello_world page in browser
 - Check browser console for "RENDERED HelloWorld to dom node" success message
 - Confirm React component is interactive (input field updates name display)
 
 **Development Mode Console Output**:
+
 - `bin/dev` (HMR): Shows HMR warnings and resource preload warnings (expected)
 - `bin/dev static`: Shows only resource preload warnings (cleaner output)
 - `bin/dev prod`: Cleanest output with minimal warnings (production-like environment)
@@ -447,18 +455,22 @@ This approach:
 **Common Issues and Solutions:**
 
 1. **React components not rendering (empty divs)**
+
    - **Cause**: Missing yalc setup for JavaScript package
    - **Solution**: Follow yalc setup steps above after running generator
 
 2. **Generator fails with Shakapacker errors**
+
    - **Cause**: Conflicting Shakapacker versions or incomplete installation
    - **Solution**: Clean reset and ensure consistent Shakapacker version across tests
 
 3. **Babel configuration conflicts during yalc development**
+
    - **Cause**: Both `babel.config.js` and `package.json` "babel" section defining presets
    - **Solution**: Remove "babel" section from `package.json`, keep only `babel.config.js`
 
 4. **"Package.json not found" errors**
+
    - **Cause**: Generator trying to access non-existent package.json files
    - **Solution**: Test with commits that fix this specific issue (e.g., bc69dcd0)
 
@@ -467,6 +479,7 @@ This approach:
    - **Solution**: Run `bin/dev kill` before starting new test servers
 
 **Testing Best Practices:**
+
 - Always use the double clean command: `git clean -fd && git reset --hard && git clean -fd`
 - Test both Shakapacker scenarios for comprehensive coverage
 - Document exact error messages and steps to reproduce
@@ -495,6 +508,7 @@ rake lint
 ```
 
 **Automated checks:**
+
 - Format all JavaScript/TypeScript files with Prettier
 - Check and fix linting issues with ESLint
 - Check and fix Ruby style issues with RuboCop
@@ -506,53 +520,46 @@ rake lint
 
 **CRITICAL WORKFLOW** to prevent CI failures:
 
-### 1. **ALWAYS Lint Before Any Code Changes**
-```bash
-# First, check current state
-rake lint
+### 1. **After Making Code Changes**
 
-# If violations exist, auto-fix them first
-yarn run eslint . --fix  # Auto-fix JS/TS formatting
-bundle exec rubocop -A   # Auto-fix Ruby violations
-```
-
-### 2. **After Making Code Changes**
 ```bash
-# MANDATORY: Run linters again
+# MANDATORY: Run linters after code changes
 rake lint
 
 # If any violations, auto-fix immediately
-yarn run eslint . --fix
-bundle exec rubocop -A
+rake autofix  # One command to run all auto-fixes
 
 # Verify everything passes
 rake lint
 ```
 
-### 3. **Common AI Agent Mistakes**
+### 2. **Common AI Agent Mistakes**
 
 ❌ **DON'T:**
-- Make code changes without running linters first
+
 - Commit code that hasn't been linted locally
 - Ignore formatting rules when creating new files
 - Add manual formatting that conflicts with Prettier/RuboCop
 
 ✅ **DO:**
-- Run `rake lint` before AND after any code changes
-- Use auto-fix options (`--fix`, `-A`) to resolve violations
+
+- Run `rake lint` after any code changes
+- Use `rake autofix` to automatically fix all linting violations
 - Create new files that follow existing patterns
 - Test locally before committing
 
 ### 4. **Template File Best Practices**
 
 When creating new template files (`.jsx`, `.rb`, etc.):
+
 1. Copy existing template structure and patterns
 2. Run `yarn run eslint . --fix` immediately after creation
 3. Verify with `rake lint` before committing
 
 ### 5. **RuboCop Complexity Issues**
 
 For methods with high ABC complexity (usually formatting/display methods):
+
 ```ruby
 # rubocop:disable Metrics/AbcSize
 def complex_formatting_method

Gemfile.lock

@@ -7,7 +7,7 @@ PATH
       execjs (~> 2.5)
       rails (>= 5.2)
       rainbow (~> 3.0)
-      shakapacker (~> 8.0)
+      shakapacker (>= 6.0)
 
 GEM
   remote: https://rubygems.org/

TODO.md

@@ -3,6 +3,7 @@
 ## Generator Improvements
 
 ### HelloWorld Component Structure
+
 - [x] Fix bad import in HelloWorld.server.jsx (server importing from client)
 - [x] Simplify to single HelloWorld.jsx file with documentation
 - [ ] **Consider alternative approach**: Create second example component showing client/server split
@@ -11,6 +12,7 @@
   - Keep HelloWorld simple for beginners
 
 ### File Organization
+
 - [x] **Improved ror_components directory structure**
   - Documentation now suggests moving shared components to `../components/` directory
   - Keeps ror_components clean for React on Rails specific entry points
@@ -26,6 +28,7 @@
 - [ ] **Consider adding generator flag to create this structure automatically**
 
 ### Generator Options
+
 - [ ] **Add generator flags for different patterns**
   - `--simple` (default): Single component file
   - `--split`: Generate client/server split example
@@ -34,34 +37,41 @@
 ## Documentation Improvements
 
 ### Component Architecture Guide
+
 - [ ] **Add comprehensive docs on client/server patterns**
   - When to use single vs split files
   - Common libraries requiring server setup (React Router, styled-components, Apollo)
   - Migration path from simple to split architecture
   - Auto-registration behavior explanation
 
 ### Code Comments
+
 - [x] Add inline documentation to HelloWorld.jsx explaining split pattern
 - [ ] Add JSDoc comments for better IDE support
 - [ ] Include links to relevant documentation sections
 
 ## Testing Infrastructure
+
 - [ ] **Test generator output for both simple and split patterns**
 - [ ] **Validate that auto-registration works correctly**
 - [ ] **Add integration tests for client/server rendering differences**
 
 ## Developer Experience
+
 - [ ] **bin/dev help command enhancements**
+
   - [x] Add emojis and colors for better readability
   - [ ] Add section about component development patterns
   - [ ] Include troubleshooting for client/server split issues
 
 - [ ] **Babel Configuration Conflict Detection**
+
   - [ ] Add validation in generator/initializer to detect conflicting Babel configs
   - [ ] Improve error messaging for duplicate preset issues
   - [ ] Common conflict: babel.config.js + package.json "babel" section
   - [ ] Specific guidance for yalc development workflow
   - [ ] Add troubleshooting section for this common issue:
+
     ```
     ❌ BABEL CONFIGURATION CONFLICT DETECTED
     Found duplicate Babel configurations:
@@ -72,31 +82,36 @@
     ```
 
 ### IDE Support
+
 - [ ] **Improve TypeScript support**
   - Add .d.ts files for better type inference
   - Document TypeScript patterns for client/server split
   - Consider TypeScript generator templates
 
 ## Performance & Bundle Analysis
+
 - [ ] **Bundle splitting documentation**
   - How React on Rails handles client/server bundles
   - Best practices for code splitting
   - webpack bundle analysis guidance
 
 ## Real-World Examples
+
 - [ ] **Create example apps showing advanced patterns**
   - React Router with SSR
   - styled-components with server-side rendering
   - Apollo Client hydration
   - Next.js-style patterns
 
 ## Migration Guide
+
 - [ ] **Document upgrade paths**
   - Converting from Webpacker to Shakapacker
   - Migrating from single to split components
   - Updating existing projects to new patterns
 
 ## Community & Ecosystem
+
 - [ ] **Plugin ecosystem considerations**
   - Standard patterns for community components
   - Guidelines for React on Rails compatible libraries
@@ -105,14 +120,16 @@
 ---
 
 ## Current Known Issues
+
 - Generator installer still has remaining issues (mentioned in context)
 - Version mismatch warnings with yalc during development
 - Need clearer documentation on when to use different patterns
 - **Babel configuration conflicts** - Common during yalc development when package.json and babel.config.js both define presets
 
 ## Priority Order
+
 1. Fix remaining generator installer issues
 2. Improve HelloWorld component documentation
 3. Add alternative example showing client/server split
 4. Create comprehensive architecture documentation
-5. Add generator flags for different patterns
+5. Add generator flags for different patterns

lib/generators/react_on_rails/generator_messages.rb

@@ -129,20 +129,55 @@ def detect_process_manager
     end
 
     def build_shakapacker_status_section
+      version_warning = check_shakapacker_version_warning
+
       if File.exist?(".shakapacker_just_installed")
-        <<~SHAKAPACKER
+        base_message = <<~SHAKAPACKER
 
           📦 SHAKAPACKER SETUP:
           ─────────────────────────────────────────────────────────────────────────
           #{Rainbow('✓ Added to Gemfile automatically').green}
           #{Rainbow('✓ Installer ran successfully').green}
           #{Rainbow('✓ Webpack integration configured').green}
         SHAKAPACKER
+        base_message + version_warning
       elsif File.exist?("bin/shakapacker") && File.exist?("bin/shakapacker-dev-server")
-        "\n📦 #{Rainbow('Shakapacker already configured ✓').green}"
+        "\n📦 #{Rainbow('Shakapacker already configured ✓').green}#{version_warning}"
+      else
+        "\n📦 #{Rainbow('Shakapacker setup may be incomplete').yellow}#{version_warning}"
+      end
+    end
+
+    def check_shakapacker_version_warning
+      # Try to detect Shakapacker version from Gemfile.lock
+      return "" unless File.exist?("Gemfile.lock")
+
+      gemfile_lock_content = File.read("Gemfile.lock")
+      shakapacker_match = gemfile_lock_content.match(/shakapacker \((\d+\.\d+\.\d+)\)/)
+
+      return "" unless shakapacker_match
+
+      version = shakapacker_match[1]
+      major_version = version.split(".").first.to_i
+
+      if major_version < 8
+        <<~WARNING
+
+          ⚠️  #{Rainbow('IMPORTANT: Upgrade Recommended').yellow.bold}
+          ─────────────────────────────────────────────────────────────────────────
+          You are using Shakapacker #{version}. React on Rails v15+ works best with
+          Shakapacker 8.0+ for optimal Hot Module Replacement and build performance.
+
+          To upgrade: #{Rainbow('bundle update shakapacker').cyan}
+
+          Learn more: #{Rainbow('https://github.com/shakacode/shakapacker').cyan.underline}
+        WARNING
       else
-        "\n📦 #{Rainbow('Shakapacker setup may be incomplete').yellow}"
+        ""
       end
+    rescue StandardError
+      # If version detection fails, don't show a warning to avoid noise
+      ""
     end
 
     def detect_package_manager

package-scripts.yml

@@ -38,6 +38,10 @@ scripts:
       description: Check that all files were formatted using prettier.
       script: prettier --check .
 
+  autofix:
+    description: Auto-fix all linting violations (eslint --fix, prettier --write, rubocop -A).
+    script: rake autofix
+
   renderer:
     description: Starts the node renderer.
     script: node renderer.js