Add TypeScript support to React on Rails install generator

CHANGELOG.md

@@ -23,6 +23,26 @@ After a release, please make sure to run `bundle exec rake update_changelog`. Th
 
 Changes since the last non-beta release.
 
+#### Enhanced TypeScript Generator Support
+
+**🔧 Generator Improvements**
+
+- **Modern TypeScript patterns**: Generators now produce more idiomatic TypeScript code with improved type inference instead of explicit type annotations [PR 1786](https://github.com/shakacode/react_on_rails/pull/1786) by [justin808](https://github.com/justin808)
+- **Optimized tsconfig.json**: Updated compiler options to use `"moduleResolution": "bundler"` for better bundler compatibility
+- **Enhanced Redux TypeScript integration**: Improved type safety and modern React patterns (useMemo, type-only imports)
+- **Smart bin/dev defaults**: Generated `bin/dev` script now automatically navigates to `/hello_world` route for immediate component visibility
+
+**🔐 Security Enhancements**
+
+- **Fixed command injection vulnerabilities**: Replaced unsafe string interpolation in generator package installation commands with secure array-based system calls
+- **Improved input validation**: Enhanced package manager validation and argument sanitization across all generators
+
+**🎯 Developer Experience**
+
+- **Better component templates**: Removed unnecessary type annotations while maintaining type safety through TypeScript's inference
+- **Cleaner generated code**: Streamlined templates following modern React and TypeScript best practices
+- **Improved helper methods**: Added reusable `component_extension` helper for consistent file extension handling
+
 ### [16.0.0] - 2025-09-16
 
 **React on Rails v16 is a major release that modernizes the library with ESM support, removes legacy Webpacker compatibility, and introduces significant performance improvements. This release builds on the foundation of v14 with enhanced RSC (React Server Components) support and streamlined configuration.**

eslint.config.ts

@@ -44,6 +44,9 @@ const config = tsEslint.config([
     // fixtures
     '**/fixtures/',
     '**/.yalc/**/*',
+    // generator templates - exclude TypeScript templates that need tsconfig.json
+    '**/templates/**/*.tsx',
+    '**/templates/**/*.ts',
   ]),
   {
     files: ['**/*.[jt]s', '**/*.[jt]sx', '**/*.[cm][jt]s'],

lib/generators/react_on_rails/base_generator.rb

@@ -105,13 +105,13 @@ def add_js_dependencies
       def install_js_dependencies
         # Detect which package manager to use
         success = if File.exist?(File.join(destination_root, "yarn.lock"))
-                    run "yarn install"
+                    system("yarn", "install")
                   elsif File.exist?(File.join(destination_root, "pnpm-lock.yaml"))
-                    run "pnpm install"
+                    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
-                    run "npm install"
+                    system("npm", "install")
                   else
                     true # No package manager detected, skip
                   end
@@ -173,7 +173,7 @@ def add_react_on_rails_package
         return if add_npm_dependencies(react_on_rails_pkg)
 
         puts "Using direct npm commands as fallback"
-        success = run "npm install #{react_on_rails_pkg.join(' ')}"
+        success = system("npm", "install", *react_on_rails_pkg)
         handle_npm_failure("react-on-rails package", react_on_rails_pkg) unless success
       end
 
@@ -189,7 +189,7 @@ def add_react_dependencies
         ]
         return if add_npm_dependencies(react_deps)
 
-        success = run "npm install #{react_deps.join(' ')}"
+        success = system("npm", "install", *react_deps)
         handle_npm_failure("React dependencies", react_deps) unless success
       end
 
@@ -203,7 +203,7 @@ def add_css_dependencies
         ]
         return if add_npm_dependencies(css_deps)
 
-        success = run "npm install #{css_deps.join(' ')}"
+        success = system("npm", "install", *css_deps)
         handle_npm_failure("CSS dependencies", css_deps) unless success
       end
 
@@ -215,7 +215,7 @@ def add_dev_dependencies
         ]
         return if add_npm_dependencies(dev_deps, dev: true)
 
-        success = run "npm install --save-dev #{dev_deps.join(' ')}"
+        success = system("npm", "install", "--save-dev", *dev_deps)
         handle_npm_failure("development dependencies", dev_deps, dev: true) unless success
       end
 

lib/generators/react_on_rails/generator_helper.rb

@@ -91,4 +91,8 @@ def copy_file_and_missing_parent_directories(source_file, destination_file = nil
   def add_documentation_reference(message, source)
     "#{message} \n#{source}"
   end
+
+  def component_extension(options)
+    options.typescript? ? "tsx" : "jsx"
+  end
 end

lib/generators/react_on_rails/install_generator.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "rails/generators"
+require "json"
 require_relative "generator_helper"
 require_relative "generator_messages"
 
@@ -20,6 +21,13 @@ class InstallGenerator < Rails::Generators::Base
                    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,
@@ -58,11 +66,16 @@ def print_generator_messages
 
       def invoke_generators
         ensure_shakapacker_installed
-        invoke "react_on_rails:base"
+        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
       end
 
@@ -311,10 +324,96 @@ def missing_package_manager?
         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
-    # rubocop:enable Metrics/ClassLength
   end
 end

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -11,12 +11,24 @@ class ReactNoReduxGenerator < Rails::Generators::Base
       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/src/HelloWorld/ror_components/HelloWorld.client.jsx
-                        app/javascript/src/HelloWorld/ror_components/HelloWorld.server.jsx
-                        app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css]
-        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