Add TypeScript support to React on Rails install generator

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/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 = run "npm install --save-dev #{typescript_packages.join(' ')}"
+        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

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -1,13 +1,23 @@
 # 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
         # Create auto-registration directory structure for Redux
         empty_directory("app/javascript/src/HelloWorldApp/ror_components")
@@ -19,30 +29,34 @@ def create_redux_directories
 
       def copy_base_files
         base_js_path = "redux/base"
+        ext = component_extension(options)
 
         # Copy Redux-connected component to auto-registration structure
-        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.client.jsx",
-                  "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.jsx")
-        copy_file("#{base_js_path}/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.jsx",
-                  "app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.jsx")
+        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.jsx"
+        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
-           components/HelloWorld.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/src/HelloWorldApp/#{file}")
            end
@@ -60,12 +74,59 @@ def create_appropriate_templates
       end
 
       def add_redux_npm_dependencies
-        run "npm install redux react-redux"
+        # 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:)
+        packages_str = packages.join(" ")
+        install_command = build_install_command(package_manager, dev, packages_str)
+
+        success = system(install_command)
+        return if success
+
+        warning = <<~MSG.strip
+          ⚠️  Failed to install Redux dependencies automatically.
+
+          Please run manually:
+              #{install_command}
+        MSG
+        GeneratorMessages.add_warning(warning)
+      end
+
+      def build_install_command(package_manager, dev, packages_str)
+        # 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
+
+        commands = {
+          "npm" => { dev: "npm install --save-dev", prod: "npm install" },
+          "yarn" => { dev: "yarn add --dev", prod: "yarn add" },
+          "pnpm" => { dev: "pnpm add --save-dev", prod: "pnpm add" },
+          "bun" => { dev: "bun add --dev", prod: "bun add" }
+        }
+
+        command_type = dev ? :dev : :prod
+        "#{commands[package_manager][command_type]} #{packages_str}"
       end
 
       def add_redux_specific_messages
         # Override the generic messages with Redux-specific instructions
-        require_relative "generator_messages"
         GeneratorMessages.output.clear
         GeneratorMessages.add_info(
           GeneratorMessages.helpful_message_after_installation(component_name: "HelloWorldApp", route: "hello_world")

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.client.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
+
+interface HelloWorldProps {
+  name: string;
+}
+
+const HelloWorld: React.FC<HelloWorldProps> = (props) => {
+  const [name, setName] = useState(props.name);
+
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+
+export default HelloWorld;

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.server.tsx

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+
+export default HelloWorld;

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/prefer-default-export */
+
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+// Action interface
+export interface UpdateNameAction {
+  type: typeof HELLO_WORLD_NAME_UPDATE;
+  text: string;
+}
+
+// Union type for all actions
+export type HelloWorldAction = UpdateNameAction;
+
+// Action creator with proper TypeScript typing
+export const updateName = (text: string): UpdateNameAction => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as style from './HelloWorld.module.css';
+import type { PropsFromRedux } from '../containers/HelloWorldContainer';
+
+// Component props are inferred from Redux container
+type HelloWorldProps = PropsFromRedux;
+
+const HelloWorld: React.FC<HelloWorldProps> = ({ name, updateName }) => (
+  <div>
+    <h3>
+      Hello,
+      {name}!
+    </h3>
+    <hr />
+    <form>
+      <label className={style.bright} htmlFor="name">
+        Say hello to:
+        <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
+      </label>
+    </form>
+  </div>
+);
+
+export default HelloWorld;