react_on_rails 14.2.1 → 16.1.1

data/lib/generators/react_on_rails/base_generator.rb

@@ -1,12 +1,14 @@
 # frozen_string_literal: true
 
 require "rails/generators"
+require "fileutils"
 require_relative "generator_messages"
 require_relative "generator_helper"
 module ReactOnRails
   module Generators
     class BaseGenerator < Rails::Generators::Base
       include GeneratorHelper
+
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("templates", __dir__))
 
@@ -14,7 +16,7 @@ module ReactOnRails
       class_option :redux,
                    type: :boolean,
                    default: false,
-                   desc: "Install Redux gems and Redux version of Hello World Example",
+                   desc: "Install Redux package and Redux version of Hello World Example",
                    aliases: "-R"
 
       def add_hello_world_route
@@ -22,28 +24,35 @@ module ReactOnRails
       end
 
       def create_react_directories
-        dirs = %w[components]
-        dirs.each { |name| empty_directory("app/javascript/bundles/HelloWorld/#{name}") }
+        # Create auto-bundling directory structure for non-Redux components only
+        # Redux components handle their own directory structure
+        return if options.redux?
+
+        empty_directory("app/javascript/src/HelloWorld/ror_components")
       end
 
       def copy_base_files
         base_path = "base/base/"
         base_files = %w[app/controllers/hello_world_controller.rb
-                        app/views/layouts/hello_world.html.erb]
-        base_templates = %w[config/initializers/react_on_rails.rb
-                            Procfile.dev
-                            Procfile.dev-static]
+                        app/views/layouts/hello_world.html.erb
+                        Procfile.dev
+                        Procfile.dev-static-assets
+                        Procfile.dev-prod-assets]
+        base_templates = %w[config/initializers/react_on_rails.rb]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
         base_templates.each do |file|
-          template("#{base_path}/#{file}.tt", file, { packer_type: ReactOnRails::PackerUtils.packer_type })
+          template("#{base_path}/#{file}.tt", file)
         end
       end
 
       def copy_js_bundle_files
         base_path = "base/base/"
-        base_files = %w[app/javascript/packs/server-bundle.js
-                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
-                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+        base_files = %w[app/javascript/packs/server-bundle.js]
+
+        # Only copy HelloWorld.module.css for non-Redux components
+        # Redux components handle their own CSS files
+        base_files << "app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css" unless options.redux?
+
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -57,15 +66,25 @@ module ReactOnRails
                         config/webpack/development.js
                         config/webpack/production.js
                         config/webpack/serverWebpackConfig.js
-                        config/webpack/webpack.config.js
-                        config/webpack/webpackConfig.js]
+                        config/webpack/generateWebpackConfigs.js]
         config = {
           message: "// The source code including full typescript support is available at:"
         }
         base_files.each { |file| template("#{base_path}/#{file}.tt", file, config) }
+
+        # Handle webpack.config.js separately with smart replacement
+        copy_webpack_main_config(base_path, config)
       end
 
       def copy_packer_config
+        # Skip copying if Shakapacker was just installed (to avoid conflicts)
+        # Check for a temporary marker file that indicates fresh Shakapacker install
+        if File.exist?(".shakapacker_just_installed")
+          puts "Skipping Shakapacker config copy (already installed by Shakapacker installer)"
+          File.delete(".shakapacker_just_installed") # Clean up marker
+          return
+        end
+
         puts "Adding Shakapacker #{ReactOnRails::PackerUtils.shakapacker_version} config"
         base_path = "base/base/"
         config = "config/shakapacker.yml"
@@ -76,40 +95,23 @@ module ReactOnRails
         run "bundle"
       end
 
-      def add_js_dependencies
-        major_minor_patch_only = /\A\d+\.\d+\.\d+\z/
-        if ReactOnRails::VERSION.match?(major_minor_patch_only)
-          package_json.manager.add(["react-on-rails@#{ReactOnRails::VERSION}"])
-        else
-          # otherwise add latest
-          puts "Adding the latest react-on-rails NPM module. Double check this is correct in package.json"
-          package_json.manager.add(["react-on-rails"])
-        end
+      def update_gitignore_for_generated_bundles
+        gitignore_path = File.join(destination_root, ".gitignore")
+        return unless File.exist?(gitignore_path)
 
-        puts "Adding React dependencies"
-        package_json.manager.add([
-                                   "react",
-                                   "react-dom",
-                                   "@babel/preset-react",
-                                   "prop-types",
-                                   "babel-plugin-transform-react-remove-prop-types",
-                                   "babel-plugin-macros"
-                                 ])
+        gitignore_content = File.read(gitignore_path)
 
-        puts "Adding CSS handlers"
+        additions = []
+        additions << "**/generated/**" unless gitignore_content.include?("**/generated/**")
+        additions << "ssr-generated" unless gitignore_content.include?("ssr-generated")
 
-        package_json.manager.add(%w[
-                                   css-loader
-                                   css-minimizer-webpack-plugin
-                                   mini-css-extract-plugin
-                                   style-loader
-                                 ])
+        return if additions.empty?
 
-        puts "Adding dev dependencies"
-        package_json.manager.add([
-                                   "@pmmmwh/react-refresh-webpack-plugin",
-                                   "react-refresh"
-                                 ], type: :dev)
+        append_to_file ".gitignore" do
+          lines = ["\n# Generated React on Rails packs"]
+          lines.concat(additions)
+          "#{lines.join("\n")}\n"
+        end
       end
 
       def append_to_spec_rails_helper
@@ -118,25 +120,7 @@ module ReactOnRails
           add_configure_rspec_to_compile_assets(rails_helper)
         else
           spec_helper = File.join(destination_root, "spec/spec_helper.rb")
-          if File.exist?(spec_helper)
-            add_configure_rspec_to_compile_assets(spec_helper)
-          else
-            # rubocop:disable Layout/EmptyLinesAroundArguments
-            GeneratorMessages.add_info(
-              <<-MSG.strip_heredoc
-
-              We did not find a spec/rails_helper.rb or spec/spec_helper.rb to add
-              the React on Rails Test helper, which ensures that if we are running
-              js tests, then we are using latest webpack assets. You can later add
-              this to your rspec config:
-
-              # This will use the defaults of :js and :server_rendering meta tags
-              ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-              MSG
-            )
-            # rubocop:enable Layout/EmptyLinesAroundArguments
-
-          end
+          add_configure_rspec_to_compile_assets(spec_helper) if File.exist?(spec_helper)
         end
       end
 
@@ -145,10 +129,240 @@ module ReactOnRails
           # Ensure that if we are running js tests, we are using latest webpack assets
           # This will use the defaults of :js and :server_rendering meta tags
           ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+        end
       STR
 
       private
 
+      def setup_js_dependencies
+        add_js_dependencies
+        install_js_dependencies
+      end
+
+      def add_js_dependencies
+        add_react_on_rails_package
+        add_react_dependencies
+        add_css_dependencies
+        add_dev_dependencies
+      end
+
+      def add_react_on_rails_package
+        major_minor_patch_only = /\A\d+\.\d+\.\d+\z/
+
+        # Try to use package_json gem first, fall back to direct npm commands
+        react_on_rails_pkg = if ReactOnRails::VERSION.match?(major_minor_patch_only)
+                               ["react-on-rails@#{ReactOnRails::VERSION}"]
+                             else
+                               puts "Adding the latest react-on-rails NPM module. " \
+                                    "Double check this is correct in package.json"
+                               ["react-on-rails"]
+                             end
+
+        puts "Installing React on Rails package..."
+        return if add_npm_dependencies(react_on_rails_pkg)
+
+        puts "Using direct npm commands as fallback"
+        success = system("npm", "install", *react_on_rails_pkg)
+        handle_npm_failure("react-on-rails package", react_on_rails_pkg) unless success
+      end
+
+      def add_react_dependencies
+        puts "Installing React dependencies..."
+        react_deps = %w[
+          react
+          react-dom
+          @babel/preset-react
+          prop-types
+          babel-plugin-transform-react-remove-prop-types
+          babel-plugin-macros
+        ]
+        return if add_npm_dependencies(react_deps)
+
+        success = system("npm", "install", *react_deps)
+        handle_npm_failure("React dependencies", react_deps) unless success
+      end
+
+      def add_css_dependencies
+        puts "Installing CSS handling dependencies..."
+        css_deps = %w[
+          css-loader
+          css-minimizer-webpack-plugin
+          mini-css-extract-plugin
+          style-loader
+        ]
+        return if add_npm_dependencies(css_deps)
+
+        success = system("npm", "install", *css_deps)
+        handle_npm_failure("CSS dependencies", css_deps) unless success
+      end
+
+      def add_dev_dependencies
+        puts "Installing development dependencies..."
+        dev_deps = %w[
+          @pmmmwh/react-refresh-webpack-plugin
+          react-refresh
+        ]
+        return if add_npm_dependencies(dev_deps, dev: true)
+
+        success = system("npm", "install", "--save-dev", *dev_deps)
+        handle_npm_failure("development dependencies", dev_deps, dev: true) unless success
+      end
+
+      def install_js_dependencies
+        # Detect which package manager to use
+        success = if File.exist?(File.join(destination_root, "yarn.lock"))
+                    system("yarn", "install")
+                  elsif File.exist?(File.join(destination_root, "pnpm-lock.yaml"))
+                    system("pnpm", "install")
+                  elsif File.exist?(File.join(destination_root, "package-lock.json")) ||
+                        File.exist?(File.join(destination_root, "package.json"))
+                    # Use npm for package-lock.json or as default fallback
+                    system("npm", "install")
+                  else
+                    true # No package manager detected, skip
+                  end
+
+        unless success
+          GeneratorMessages.add_warning(<<~MSG.strip)
+            ⚠️  JavaScript dependencies installation failed.
+
+            This could be due to network issues or missing package manager.
+            You can install dependencies manually later by running:
+            • npm install (if using npm)
+            • yarn install (if using yarn)
+            • pnpm install (if using pnpm)
+          MSG
+        end
+
+        success
+      end
+
+      def handle_npm_failure(dependency_type, packages, dev: false)
+        install_command = dev ? "npm install --save-dev" : "npm install"
+        GeneratorMessages.add_warning(<<~MSG.strip)
+          ⚠️  Failed to install #{dependency_type}.
+
+          The following packages could not be installed automatically:
+          #{packages.map { |pkg| "  • #{pkg}" }.join("\n")}
+
+          This could be due to network issues or missing package manager.
+          You can install them manually later by running:
+            #{install_command} #{packages.join(' ')}
+        MSG
+      end
+
+      def copy_webpack_main_config(base_path, config)
+        webpack_config_path = "config/webpack/webpack.config.js"
+
+        if File.exist?(webpack_config_path)
+          existing_content = File.read(webpack_config_path)
+
+          # Check if it's the standard Shakapacker config that we can safely replace
+          if standard_shakapacker_config?(existing_content)
+            # Remove the file first to avoid conflict prompt, then recreate it
+            remove_file(webpack_config_path, verbose: false)
+            # Show what we're doing
+            puts "   #{set_color('replace', :green)}  #{webpack_config_path} " \
+                 "(auto-upgrading from standard Shakapacker to React on Rails config)"
+            template("#{base_path}/#{webpack_config_path}.tt", webpack_config_path, config)
+          elsif react_on_rails_config?(existing_content)
+            puts "   #{set_color('identical', :blue)}  #{webpack_config_path} " \
+                 "(already React on Rails compatible)"
+            # Skip - don't need to do anything
+          else
+            handle_custom_webpack_config(base_path, config, webpack_config_path)
+          end
+        else
+          # File doesn't exist, create it
+          template("#{base_path}/#{webpack_config_path}.tt", webpack_config_path, config)
+        end
+      end
+
+      def handle_custom_webpack_config(base_path, config, webpack_config_path)
+        # Custom config - ask user
+        puts "\n#{set_color('NOTICE:', :yellow)} Your webpack.config.js appears to be customized."
+        puts "React on Rails needs to replace it with an environment-specific loader."
+        puts "Your current config will be backed up to webpack.config.js.backup"
+
+        if yes?("Replace webpack.config.js with React on Rails version? (Y/n)")
+          # Create backup
+          backup_path = "#{webpack_config_path}.backup"
+          if File.exist?(webpack_config_path)
+            FileUtils.cp(webpack_config_path, backup_path)
+            puts "   #{set_color('create', :green)}  #{backup_path} (backup of your custom config)"
+          end
+
+          template("#{base_path}/#{webpack_config_path}.tt", webpack_config_path, config)
+        else
+          puts "   #{set_color('skip', :yellow)}  #{webpack_config_path}"
+          puts "   #{set_color('WARNING:', :red)} React on Rails may not work correctly " \
+               "without the environment-specific webpack config"
+        end
+      end
+
+      def standard_shakapacker_config?(content)
+        # Get the expected default config based on Shakapacker version
+        expected_configs = shakapacker_default_configs
+
+        # Check if the content matches any of the known default configurations
+        expected_configs.any? { |config| content_matches_template?(content, config) }
+      end
+
+      def content_matches_template?(content, template)
+        # Normalize whitespace and compare
+        normalize_config_content(content) == normalize_config_content(template)
+      end
+
+      def normalize_config_content(content)
+        # Remove comments, normalize whitespace, and clean up for comparison
+        content.gsub(%r{//.*$}, "")                    # Remove single-line comments
+               .gsub(%r{/\*.*?\*/}m, "")               # Remove multi-line comments
+               .gsub(/\s+/, " ")                       # Normalize whitespace
+               .strip
+      end
+
+      def shakapacker_default_configs
+        configs = []
+
+        # Shakapacker v7+ (generateWebpackConfig function)
+        configs << <<~CONFIG
+          // See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.
+          const { generateWebpackConfig } = require('shakapacker')
+
+          const webpackConfig = generateWebpackConfig()
+
+          module.exports = webpackConfig
+        CONFIG
+
+        # Shakapacker v6 (webpackConfig object)
+        configs << <<~CONFIG
+          const { webpackConfig } = require('shakapacker')
+
+          // See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.
+
+          module.exports = webpackConfig
+        CONFIG
+
+        # Also check without comments for variations
+        configs << <<~CONFIG
+          const { generateWebpackConfig } = require('shakapacker')
+          const webpackConfig = generateWebpackConfig()
+          module.exports = webpackConfig
+        CONFIG
+
+        configs << <<~CONFIG
+          const { webpackConfig } = require('shakapacker')
+          module.exports = webpackConfig
+        CONFIG
+
+        configs
+      end
+
+      def react_on_rails_config?(content)
+        # Check if it already has React on Rails environment-specific loading
+        content.include?("envSpecificConfig") || content.include?("env.nodeEnv")
+      end
+
       # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
       def app_name
         @app_name ||= (defined_app_const_base? ? defined_app_name : File.basename(destination_root))

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -7,6 +7,7 @@ module ReactOnRails
   module Generators
     class DevTestsGenerator < Rails::Generators::Base
       include GeneratorHelper
+
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("templates/dev_tests", __dir__))
 

data/lib/generators/react_on_rails/generator_helper.rb

@@ -1,11 +1,41 @@
 # frozen_string_literal: true
 
-require "package_json"
 require "rainbow"
+require "json"
 
 module GeneratorHelper
   def package_json
+    # Lazy load package_json gem only when actually needed for dependency management
+
+    require "package_json" unless defined?(PackageJson)
     @package_json ||= PackageJson.read
+  rescue LoadError
+    puts "Warning: package_json gem not available. This is expected before Shakapacker installation."
+    puts "Dependencies will be installed using the default package manager after Shakapacker setup."
+    nil
+  rescue StandardError => e
+    puts "Warning: Could not read package.json: #{e.message}"
+    puts "This is normal before Shakapacker creates the package.json file."
+    nil
+  end
+
+  # Safe wrapper for package_json operations
+  def add_npm_dependencies(packages, dev: false)
+    pj = package_json
+    return false unless pj
+
+    begin
+      if dev
+        pj.manager.add(packages, type: :dev)
+      else
+        pj.manager.add(packages)
+      end
+      true
+    rescue StandardError => e
+      puts "Warning: Could not add packages via package_json gem: #{e.message}"
+      puts "Will fall back to direct npm commands."
+      false
+    end
   end
 
   # Takes a relative path from the destination root, such as `.gitignore` or `app/assets/javascripts/application.js`
@@ -61,4 +91,8 @@ module GeneratorHelper
   def add_documentation_reference(message, source)
     "#{message} \n#{source}"
   end
+
+  def component_extension(options)
+    options.typescript? ? "tsx" : "jsx"
+  end
 end

data/lib/generators/react_on_rails/generator_messages.rb

@@ -38,37 +38,158 @@ module GeneratorMessages
       @output = []
     end
 
-    def helpful_message_after_installation
+    def helpful_message_after_installation(component_name: "HelloWorld", route: "hello_world")
+      process_manager_section = build_process_manager_section
+      testing_section = build_testing_section
+      package_manager = detect_package_manager
+      shakapacker_status = build_shakapacker_status_section
+
       <<~MSG
 
-        What to do next:
+        ╔════════════════════════════════════════════════════════════════════════╗
+        ║  🎉 React on Rails Successfully Installed!                             ║
+        ╚════════════════════════════════════════════════════════════════════════╝
+        #{process_manager_section}#{shakapacker_status}
+
+        📋 QUICK START:
+        ─────────────────────────────────────────────────────────────────────────
+        1. Install dependencies:
+           #{Rainbow("bundle && #{package_manager} install").cyan}
+
+        2. Start the app:
+           ./bin/dev              # HMR (Hot Module Replacement) mode
+           ./bin/dev static       # Static bundles (no HMR, faster initial load)
+           ./bin/dev prod         # Production-like mode for testing
+           ./bin/dev help         # See all available options
+
+        3. Visit: #{Rainbow(route ? "http://localhost:3000/#{route}" : 'http://localhost:3000').cyan.underline}
+        ✨ KEY FEATURES:
+        ─────────────────────────────────────────────────────────────────────────
+        • Auto-registration enabled - Your layout only needs:
+          <%= javascript_pack_tag %>
+          <%= stylesheet_pack_tag %>
+
+        • Server-side rendering - Enabled with prerender option in app/views/hello_world/index.html.erb:
+          <%= react_component("#{component_name}", props: @hello_world_props, prerender: true) %>
+
+        📚 LEARN MORE:
+        ─────────────────────────────────────────────────────────────────────────
+        • Documentation: #{Rainbow('https://www.shakacode.com/react-on-rails/docs/').cyan.underline}
+        • Webpack customization: #{Rainbow('https://github.com/shakacode/shakapacker#webpack-configuration').cyan.underline}
+
+        💡 TIP: Run 'bin/dev help' for development server options and troubleshooting#{testing_section}
+      MSG
+    end
 
-          - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
-            for how to customize the default webpack configuration.
+    private
+
+    def build_process_manager_section
+      process_manager = detect_process_manager
+      if process_manager
+        if process_manager == "overmind"
+          "\n📦 #{Rainbow("#{process_manager} detected ✓").green} " \
+            "#{Rainbow('(Recommended for easier debugging)').blue}"
+        else
+          "\n📦 #{Rainbow("#{process_manager} detected ✓").green}"
+        end
+      else
+        <<~INSTALL
+
+          ⚠️  No process manager detected. Install one:
+          #{Rainbow('brew install overmind').yellow.bold}  # Recommended (easier debugging)
+          #{Rainbow('gem install foreman').yellow}   # Alternative
+        INSTALL
+      end
+    end
 
-          - Include your webpack assets to your application layout.
+    def build_testing_section
+      # Check if we have any spec files to determine if testing setup is needed
+      has_spec_files = File.exist?("spec/rails_helper.rb") || File.exist?("spec/spec_helper.rb")
 
-              <%= javascript_pack_tag 'hello-world-bundle' %>
+      return "" if has_spec_files
 
-          - To start Rails server run:
+      <<~TESTING
 
-              ./bin/dev # Running with HMR
 
-            or
+        🧪 TESTING SETUP (Optional):
+        ─────────────────────────────────────────────────────────────────────────
+        For JavaScript testing with asset compilation, add this to your RSpec config:
 
-              ./bin/dev-static # Running with statically created bundles, without HMR
+        # In spec/rails_helper.rb or spec/spec_helper.rb:
+        ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+      TESTING
+    end
 
-          - To server render, change this line app/views/hello_world/index.html.erb to
-            `prerender: true` to see server rendering (right click on page and select "view source").
+    def detect_process_manager
+      if system("which overmind > /dev/null 2>&1")
+        "overmind"
+      elsif system("which foreman > /dev/null 2>&1")
+        "foreman"
+      end
+    end
 
-              <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
+    def build_shakapacker_status_section
+      version_warning = check_shakapacker_version_warning
+
+      if File.exist?(".shakapacker_just_installed")
+        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}#{version_warning}"
+      else
+        "\n📦 #{Rainbow('Shakapacker setup may be incomplete').yellow}#{version_warning}"
+      end
+    end
 
-        Alternative steps to run the app:
+    def check_shakapacker_version_warning
+      # Try to detect Shakapacker version from Gemfile.lock
+      return "" unless File.exist?("Gemfile.lock")
 
-          - We recommend using Procfile.dev with foreman, overmind, or a similar program. Alternately, you can run each of the processes listed in Procfile.dev in a separate tab in your terminal.
+      gemfile_lock_content = File.read("Gemfile.lock")
+      shakapacker_match = gemfile_lock_content.match(/shakapacker \((\d+\.\d+\.\d+)\)/)
 
-          - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-      MSG
+      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
+        ""
+      end
+    rescue StandardError
+      # If version detection fails, don't show a warning to avoid noise
+      ""
+    end
+
+    def detect_package_manager
+      # Check for lock files to determine package manager
+      if File.exist?("yarn.lock")
+        "yarn"
+      elsif File.exist?("pnpm-lock.yaml")
+        "pnpm"
+      else
+        # Default to npm (Shakapacker 8.x default) - covers package-lock.json and no lockfile
+        "npm"
+      end
     end
   end
 end