react_on_rails 15.0.0.rc.2 → 16.0.1.rc.0

data/lib/generators/react_on_rails/install_generator.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
 require "rails/generators"
+require "json"
 require_relative "generator_helper"
 require_relative "generator_messages"
 
 module ReactOnRails
   module Generators
+    # rubocop:disable Metrics/ClassLength
     class InstallGenerator < Rails::Generators::Base
       include GeneratorHelper
 
@@ -16,22 +18,38 @@ module ReactOnRails
       class_option :redux,
                    type: :boolean,
                    default: false,
-                   desc: "Install Redux gems and Redux version of Hello World Example. Default: false",
+                   desc: "Install Redux package and Redux version of Hello World Example. Default: false",
                    aliases: "-R"
 
+      # --typescript
+      class_option :typescript,
+                   type: :boolean,
+                   default: false,
+                   desc: "Generate TypeScript files and install TypeScript dependencies. Default: false",
+                   aliases: "-T"
+
       # --ignore-warnings
       class_option :ignore_warnings,
                    type: :boolean,
                    default: false,
                    desc: "Skip warnings. Default: false"
 
+      # Removed: --skip-shakapacker-install (Shakapacker is now a required dependency)
+
       def run_generators
         if installation_prerequisites_met? || options.ignore_warnings?
           invoke_generators
           add_bin_scripts
           add_post_install_message
         else
-          error = "react_on_rails generator prerequisites not met!"
+          error = <<~MSG.strip
+            🚫 React on Rails generator prerequisites not met!
+
+            Please resolve the issues listed above before continuing.
+            All prerequisites must be satisfied for a successful installation.
+
+            Use --ignore-warnings to bypass checks (not recommended).
+          MSG
           GeneratorMessages.add_error(error)
         end
       ensure
@@ -47,45 +65,97 @@ module ReactOnRails
       end
 
       def invoke_generators
-        invoke "react_on_rails:base"
+        ensure_shakapacker_installed
+        if options.typescript?
+          install_typescript_dependencies
+          create_css_module_types
+          create_typescript_config
+        end
+        invoke "react_on_rails:base", [], { typescript: options.typescript? }
         if options.redux?
-          invoke "react_on_rails:react_with_redux"
+          invoke "react_on_rails:react_with_redux", [], { typescript: options.typescript? }
         else
-          invoke "react_on_rails:react_no_redux"
+          invoke "react_on_rails:react_no_redux", [], { typescript: options.typescript? }
         end
-
-        invoke "react_on_rails:adapt_for_older_shakapacker" unless using_shakapacker_7_or_above?
       end
 
       # NOTE: other requirements for existing files such as .gitignore or application.
       # js(.coffee) are not checked by this method, but instead produce warning messages
       # and allow the build to continue
       def installation_prerequisites_met?
-        !(missing_node? || missing_yarn? || ReactOnRails::GitUtils.uncommitted_changes?(GeneratorMessages))
+        !(missing_node? || missing_package_manager? || ReactOnRails::GitUtils.uncommitted_changes?(GeneratorMessages))
       end
 
-      def missing_yarn?
-        return false unless ReactOnRails::Utils.running_on_windows? ? `where yarn`.blank? : `which yarn`.blank?
+      def missing_node?
+        node_missing = ReactOnRails::Utils.running_on_windows? ? `where node`.blank? : `which node`.blank?
 
-        error = "yarn is required. Please install it before continuing. https://yarnpkg.com/en/docs/install"
-        GeneratorMessages.add_error(error)
-        true
+        if node_missing
+          error = <<~MSG.strip
+            🚫 Node.js is required but not found on your system.
+
+            Please install Node.js before continuing:
+            • Download from: https://nodejs.org/en/
+            • Recommended: Use a version manager like nvm, fnm, or volta
+            • Minimum required version: Node.js 18+
+
+            After installation, restart your terminal and try again.
+          MSG
+          GeneratorMessages.add_error(error)
+          return true
+        end
+
+        # Check Node.js version if available
+        check_node_version
+        false
       end
 
-      def missing_node?
-        return false unless ReactOnRails::Utils.running_on_windows? ? `where node`.blank? : `which node`.blank?
+      def check_node_version
+        node_version = `node --version 2>/dev/null`.strip
+        return if node_version.blank?
 
-        error = "** nodejs is required. Please install it before continuing. https://nodejs.org/en/"
-        GeneratorMessages.add_error(error)
-        true
+        # Extract major version number (e.g., "v18.17.0" -> 18)
+        major_version = node_version[/v(\d+)/, 1]&.to_i
+        return unless major_version
+
+        return unless major_version < 18
+
+        warning = <<~MSG.strip
+          ⚠️  Node.js version #{node_version} detected.
+
+          React on Rails recommends Node.js 18+ for best compatibility.
+          You may experience issues with older versions.
+
+          Consider upgrading: https://nodejs.org/en/
+        MSG
+        GeneratorMessages.add_warning(warning)
+      end
+
+      def ensure_shakapacker_installed
+        return if shakapacker_configured?
+
+        print_shakapacker_setup_banner
+        ensure_shakapacker_in_gemfile
+        install_shakapacker
+        finalize_shakapacker_setup
+      end
+
+      # Checks whether "shakapacker" is explicitly declared in this project's Gemfile.
+      # We only check the Gemfile text, not lockfile or dependencies, because
+      # shakapacker might be present as a dependency of react_on_rails but not
+      # properly configured for this specific Rails application.
+      def shakapacker_in_gemfile?
+        gem_name = "shakapacker"
+        shakapacker_in_gemfile_text?(gem_name)
       end
 
       def add_bin_scripts
-        directory "#{__dir__}/bin", "bin"
+        # Copy bin scripts from templates
+        template_bin_path = "#{__dir__}/templates/base/base/bin"
+        directory template_bin_path, "bin"
 
         # Make these and only these files executable
         files_to_copy = []
-        Dir.chdir("#{__dir__}/bin") do
+        Dir.chdir(template_bin_path) do
           files_to_copy.concat(Dir.glob("*"))
         end
         files_to_become_executable = files_to_copy.map { |filename| "bin/#{filename}" }
@@ -94,16 +164,256 @@ module ReactOnRails
       end
 
       def add_post_install_message
-        GeneratorMessages.add_info(GeneratorMessages.helpful_message_after_installation)
+        # Determine what route will be created by the generator
+        route = "hello_world" # This is the hardcoded route from base_generator.rb
+        component_name = options.redux? ? "HelloWorldApp" : "HelloWorld"
+
+        GeneratorMessages.add_info(GeneratorMessages.helpful_message_after_installation(
+                                     component_name: component_name,
+                                     route: route
+                                   ))
+      end
+
+      def shakapacker_loaded_in_process?(gem_name)
+        Gem.loaded_specs.key?(gem_name)
+      end
+
+      def shakapacker_in_lockfile?(gem_name)
+        gemfile = ENV["BUNDLE_GEMFILE"] || "Gemfile"
+        lockfile = File.join(File.dirname(gemfile), "Gemfile.lock")
+
+        File.file?(lockfile) && File.foreach(lockfile).any? { |l| l.match?(/^\s{4}#{Regexp.escape(gem_name)}\s\(/) }
+      end
+
+      def shakapacker_in_bundler_specs?(gem_name)
+        require "bundler"
+        Bundler.load.specs.any? { |s| s.name == gem_name }
+      rescue StandardError
+        false
+      end
+
+      def shakapacker_in_gemfile_text?(gem_name)
+        gemfile = ENV["BUNDLE_GEMFILE"] || "Gemfile"
+
+        File.file?(gemfile) &&
+          File.foreach(gemfile).any? { |l| l.match?(/^\s*gem\s+['"]#{Regexp.escape(gem_name)}['"]/) }
+      end
+
+      def cli_exists?(command)
+        system("which #{command} > /dev/null 2>&1")
+      end
+
+      def shakapacker_binaries_exist?
+        File.exist?("bin/shakapacker") && File.exist?("bin/shakapacker-dev-server")
+      end
+
+      def shakapacker_configured?
+        # Check for essential shakapacker configuration files and binaries
+        shakapacker_binaries_exist? &&
+          File.exist?("config/shakapacker.yml") &&
+          File.exist?("config/webpack/webpack.config.js")
+      end
+
+      def print_shakapacker_setup_banner
+        puts Rainbow("\n#{'=' * 80}").cyan
+        puts Rainbow("🔧 SHAKAPACKER SETUP").cyan.bold
+        puts Rainbow("=" * 80).cyan
+      end
+
+      def ensure_shakapacker_in_gemfile
+        return if shakapacker_in_gemfile?
+
+        puts Rainbow("📝 Adding Shakapacker to Gemfile...").yellow
+        success = system("bundle add shakapacker --strict")
+        return if success
+
+        handle_shakapacker_gemfile_error
+      end
+
+      def install_shakapacker
+        puts Rainbow("⚙️  Installing Shakapacker (required for webpack integration)...").yellow
+
+        # First run bundle install to make shakapacker available
+        puts Rainbow("📦 Running bundle install...").yellow
+        bundle_success = system("bundle install")
+        unless bundle_success
+          handle_shakapacker_install_error
+          return
+        end
+
+        # Then run the shakapacker installer
+        success = system("bundle exec rails shakapacker:install")
+        return if success
+
+        handle_shakapacker_install_error
       end
 
-      def using_shakapacker_7_or_above?
-        shakapacker_gem = Gem::Specification.find_by_name("shakapacker")
-        shakapacker_gem.version.segments.first >= 7
-      rescue Gem::MissingSpecError
-        # In case using Webpacker
+      def finalize_shakapacker_setup
+        puts Rainbow("✅ Shakapacker installed successfully!").green
+        puts Rainbow("=" * 80).cyan
+        puts Rainbow("🚀 CONTINUING WITH REACT ON RAILS SETUP").cyan.bold
+        puts "#{Rainbow('=' * 80).cyan}\n"
+
+        # Create marker file so base generator can avoid copying shakapacker.yml
+        File.write(".shakapacker_just_installed", "")
+      end
+
+      def handle_shakapacker_gemfile_error
+        error = <<~MSG.strip
+          🚫 Failed to add Shakapacker to your Gemfile.
+
+          This could be due to:
+          • Bundle installation issues
+          • Network connectivity problems
+          • Gemfile permissions
+
+          Please try manually:
+              bundle add shakapacker --strict
+
+          Then re-run: rails generate react_on_rails:install
+        MSG
+        GeneratorMessages.add_error(error)
+        raise Thor::Error, error unless options.ignore_warnings?
+      end
+
+      def handle_shakapacker_install_error
+        error = <<~MSG.strip
+          🚫 Failed to install Shakapacker automatically.
+
+          This could be due to:
+          • Missing Node.js or npm/yarn
+          • Network connectivity issues
+          • Incomplete bundle installation
+          • Missing write permissions
+
+          Troubleshooting steps:
+          1. Ensure Node.js is installed: node --version
+          2. Run: bundle install
+          3. Try manually: bundle exec rails shakapacker:install
+          4. Check for error output above
+          5. Re-run: rails generate react_on_rails:install
+
+          Need help? Visit: https://github.com/shakacode/shakapacker/blob/main/docs/installation.md
+        MSG
+        GeneratorMessages.add_error(error)
+        raise Thor::Error, error unless options.ignore_warnings?
+      end
+
+      def missing_package_manager?
+        package_managers = %w[npm pnpm yarn bun]
+        missing = package_managers.none? { |pm| cli_exists?(pm) }
+
+        if missing
+          error = <<~MSG.strip
+            🚫 No JavaScript package manager found on your system.
+
+            React on Rails requires a JavaScript package manager to install dependencies.
+            Please install one of the following:
+
+            • npm: Usually comes with Node.js (https://nodejs.org/en/)
+            • yarn: npm install -g yarn (https://yarnpkg.com/)
+            • pnpm: npm install -g pnpm (https://pnpm.io/)
+            • bun: Install from https://bun.sh/
+
+            After installation, restart your terminal and try again.
+          MSG
+          GeneratorMessages.add_error(error)
+          return true
+        end
+
         false
       end
+
+      def install_typescript_dependencies
+        puts Rainbow("📝 Installing TypeScript dependencies...").yellow
+
+        # Install TypeScript and React type definitions
+        typescript_packages = %w[
+          typescript
+          @types/react
+          @types/react-dom
+          @babel/preset-typescript
+        ]
+
+        # Try using GeneratorHelper first (package manager agnostic)
+        return if add_npm_dependencies(typescript_packages, dev: true)
+
+        # Fallback to npm if GeneratorHelper fails
+        success = system("npm", "install", "--save-dev", *typescript_packages)
+        return if success
+
+        warning = <<~MSG.strip
+          ⚠️  Failed to install TypeScript dependencies automatically.
+
+          Please run manually:
+              npm install --save-dev #{typescript_packages.join(' ')}
+        MSG
+        GeneratorMessages.add_warning(warning)
+      end
+
+      def create_css_module_types
+        puts Rainbow("📝 Creating CSS module type definitions...").yellow
+
+        # Ensure the types directory exists
+        FileUtils.mkdir_p("app/javascript/types")
+
+        css_module_types_content = <<~TS.strip
+          // TypeScript definitions for CSS modules
+          declare module "*.module.css" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+
+          declare module "*.module.scss" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+
+          declare module "*.module.sass" {
+            const classes: { [key: string]: string };
+            export default classes;
+          }
+        TS
+
+        File.write("app/javascript/types/css-modules.d.ts", css_module_types_content)
+        puts Rainbow("✅ Created CSS module type definitions").green
+      end
+
+      def create_typescript_config
+        if File.exist?("tsconfig.json")
+          puts Rainbow("⚠️  tsconfig.json already exists, skipping creation").yellow
+          return
+        end
+
+        tsconfig_content = {
+          "compilerOptions" => {
+            "target" => "es2018",
+            "allowJs" => true,
+            "skipLibCheck" => true,
+            "strict" => true,
+            "noUncheckedIndexedAccess" => true,
+            "forceConsistentCasingInFileNames" => true,
+            "noFallthroughCasesInSwitch" => true,
+            "module" => "esnext",
+            "moduleResolution" => "bundler",
+            "resolveJsonModule" => true,
+            "isolatedModules" => true,
+            "noEmit" => true,
+            "jsx" => "react-jsx"
+          },
+          "include" => [
+            "app/javascript/**/*"
+          ]
+        }
+
+        File.write("tsconfig.json", JSON.pretty_generate(tsconfig_content))
+        puts Rainbow("✅ Created tsconfig.json").green
+      end
+
+      # Removed: Shakapacker auto-installation logic (now explicit dependency)
+
+      # Removed: Shakapacker 8+ is now required as explicit dependency
+      # rubocop:enable Metrics/ClassLength
     end
   end
 end

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -7,24 +7,37 @@ module ReactOnRails
   module Generators
     class ReactNoReduxGenerator < Rails::Generators::Base
       include GeneratorHelper
+
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("templates", __dir__))
 
+      class_option :typescript,
+                   type: :boolean,
+                   default: false,
+                   desc: "Generate TypeScript files"
+
       def copy_base_files
         base_js_path = "base/base"
-        base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
-        base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
+
+        # Determine which component files to copy based on TypeScript option
+        component_files = [
+          "app/javascript/src/HelloWorld/ror_components/HelloWorld.client.#{component_extension(options)}",
+          "app/javascript/src/HelloWorld/ror_components/HelloWorld.server.#{component_extension(options)}",
+          "app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css"
+        ]
+
+        component_files.each do |file|
+          copy_file("#{base_js_path}/#{file}", file)
+        end
       end
 
       def create_appropriate_templates
         base_path = "base/base"
         config = {
-          component_name: "HelloWorld",
-          app_relative_path: "../bundles/HelloWorld/components/HelloWorld"
+          component_name: "HelloWorld"
         }
 
-        template("#{base_path}/app/javascript/packs/registration.js.tt",
-                 "app/javascript/packs/hello-world-bundle.js", config)
+        # Only create the view template - no manual bundle needed for auto registration
         template("#{base_path}/app/views/hello_world/index.html.erb.tt",
                  "app/views/hello_world/index.html.erb", config)
       end

data/lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -1,51 +1,144 @@
 # frozen_string_literal: true
 
 require "rails/generators"
+require_relative "generator_helper"
+require_relative "generator_messages"
 
 module ReactOnRails
   module Generators
     class ReactWithReduxGenerator < Rails::Generators::Base
+      include GeneratorHelper
+
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("templates", __dir__))
 
+      class_option :typescript,
+                   type: :boolean,
+                   default: false,
+                   desc: "Generate TypeScript files",
+                   aliases: "-T"
+
       def create_redux_directories
-        dirs = %w[actions constants containers reducers store startup]
-        dirs.each { |name| empty_directory("app/javascript/bundles/HelloWorld/#{name}") }
+        # Create auto-registration directory structure for Redux
+        empty_directory("app/javascript/src/HelloWorldApp/ror_components")
+
+        # Create Redux support directories within the component directory
+        dirs = %w[actions constants containers reducers store components]
+        dirs.each { |name| empty_directory("app/javascript/src/HelloWorldApp/#{name}") }
       end
 
       def copy_base_files
         base_js_path = "redux/base"
-        base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
-        base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
+        ext = component_extension(options)
+
+        # Copy Redux-connected component to auto-registration structure
+        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.client.#{ext}",
+                  "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.#{ext}")
+        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.#{ext}",
+                  "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.#{ext}")
+        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css",
+                  "app/javascript/src/HelloWorldApp/components/HelloWorld.module.css")
+
+        # Update import paths in client component
+        ror_client_file = "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.#{ext}"
+        gsub_file(ror_client_file, "../store/helloWorldStore", "../store/helloWorldStore")
+        gsub_file(ror_client_file, "../containers/HelloWorldContainer",
+                  "../containers/HelloWorldContainer")
       end
 
       def copy_base_redux_files
         base_hello_world_path = "redux/base/app/javascript/bundles/HelloWorld"
-        %w[actions/helloWorldActionCreators.js
-           containers/HelloWorldContainer.js
-           constants/helloWorldConstants.js
-           reducers/helloWorldReducer.js
-           store/helloWorldStore.js
-           startup/HelloWorldApp.jsx].each do |file|
+        redux_extension = options.typescript? ? "ts" : "js"
+
+        # Copy Redux infrastructure files with appropriate extension
+        %W[actions/helloWorldActionCreators.#{redux_extension}
+           containers/HelloWorldContainer.#{redux_extension}
+           constants/helloWorldConstants.#{redux_extension}
+           reducers/helloWorldReducer.#{redux_extension}
+           store/helloWorldStore.#{redux_extension}
+           components/HelloWorld.#{component_extension(options)}].each do |file|
              copy_file("#{base_hello_world_path}/#{file}",
-                       "app/javascript/bundles/HelloWorld/#{file}")
+                       "app/javascript/src/HelloWorldApp/#{file}")
            end
       end
 
       def create_appropriate_templates
         base_path = "base/base"
-        base_js_path = "#{base_path}/app/javascript"
         config = {
-          component_name: "HelloWorldApp",
-          app_relative_path: "../bundles/HelloWorld/startup/HelloWorldApp"
+          component_name: "HelloWorldApp"
         }
 
-        template("#{base_js_path}/packs/registration.js.tt", "app/javascript/packs/hello-world-bundle.js", config)
-        template("#{base_path}/app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
+        # Only create the view template - no manual bundle needed for auto registration
+        template("#{base_path}/app/views/hello_world/index.html.erb.tt",
+                 "app/views/hello_world/index.html.erb", config)
+      end
+
+      def add_redux_npm_dependencies
+        # Add Redux dependencies as regular dependencies
+        regular_packages = %w[redux react-redux]
+
+        # Try using GeneratorHelper first (package manager agnostic)
+        success = add_npm_dependencies(regular_packages)
+
+        # Fallback to package manager detection if GeneratorHelper fails
+        return if success
+
+        package_manager = GeneratorMessages.detect_package_manager
+        return unless package_manager
+
+        install_packages_with_fallback(regular_packages, dev: false, package_manager: package_manager)
+      end
+
+      private
+
+      def install_packages_with_fallback(packages, dev:, package_manager:)
+        install_args = build_install_args(package_manager, dev, packages)
+
+        success = system(*install_args)
+        return if success
+
+        install_command = install_args.join(" ")
+        warning = <<~MSG.strip
+          ⚠️  Failed to install Redux dependencies automatically.
+
+          Please run manually:
+              #{install_command}
+        MSG
+        GeneratorMessages.add_warning(warning)
+      end
+
+      def build_install_args(package_manager, dev, packages)
+        # Security: Validate package manager to prevent command injection
+        allowed_package_managers = %w[npm yarn pnpm bun].freeze
+        unless allowed_package_managers.include?(package_manager)
+          raise ArgumentError, "Invalid package manager: #{package_manager}"
+        end
+
+        base_commands = {
+          "npm" => %w[npm install],
+          "yarn" => %w[yarn add],
+          "pnpm" => %w[pnpm add],
+          "bun" => %w[bun add]
+        }
+
+        base_args = base_commands[package_manager].dup
+        base_args << dev_flag_for(package_manager) if dev
+        base_args + packages
+      end
+
+      def dev_flag_for(package_manager)
+        case package_manager
+        when "npm", "pnpm" then "--save-dev"
+        when "yarn", "bun" then "--dev"
+        end
       end
 
-      def add_redux_yarn_dependencies
-        run "yarn add redux react-redux"
+      def add_redux_specific_messages
+        # Override the generic messages with Redux-specific instructions
+        GeneratorMessages.output.clear
+        GeneratorMessages.add_info(
+          GeneratorMessages.helpful_message_after_installation(component_name: "HelloWorldApp", route: "hello_world")
+        )
       end
     end
   end

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -0,0 +1,5 @@
+# Procfile for development using HMR
+# You can run these commands in separate shells
+rails: bundle exec rails s -p 3000
+wp-client: WEBPACK_SERVE=true bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-prod-assets

@@ -0,0 +1,8 @@
+# Procfile for development with production assets 
+# Uses production-optimized, precompiled assets with development environment
+# Uncomment additional processes as needed for your app
+
+rails: bundle exec rails s -p 3001
+# sidekiq: bundle exec sidekiq -C config/sidekiq.yml
+# redis: redis-server
+# mailcatcher: mailcatcher --foreground

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static-assets

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+js: bin/shakapacker --watch

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import * as style from './HelloWorld.module.css';
 
@@ -19,8 +18,4 @@ const HelloWorld = (props) => {
   );
 };
 
-HelloWorld.propTypes = {
-  name: PropTypes.string.isRequired, // this is passed from the Rails view
-};
-
 export default HelloWorld;