Complete Redux TypeScript implementation for generators

- Remove dead configure_babel_for_typescript method that was never called
- Add comprehensive TypeScript versions of all Redux files:
  - helloWorldActionCreators.ts with typed actions and interfaces
  - helloWorldConstants.ts with const assertions and type exports
  - helloWorldReducer.ts with proper state interfaces
  - helloWorldStore.ts with typed store configuration
  - HelloWorldContainer.ts with ConnectedProps typing
- Update Redux generator to use TypeScript files when --typescript flag is enabled
- Fix package manager inconsistency by using abstracted dependency installation
- Reduce ESLint exclusions to be more targeted for TypeScript template files
- Refactor install command building using hash-based approach to reduce complexity

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

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

Author: justin808

eslint.config.ts

@@ -44,8 +44,9 @@ const config = tsEslint.config([
     // fixtures
     '**/fixtures/',
     '**/.yalc/**/*',
-    // generator templates
-    '**/templates/**/*',
+    // 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/install_generator.rb

@@ -397,40 +397,6 @@ def create_typescript_config
         puts Rainbow("✅ Created tsconfig.json").green
       end
 
-      def configure_babel_for_typescript
-        # Install Babel TypeScript preset
-        package_manager = detect_package_manager
-        return unless package_manager
-
-        babel_typescript_package = "@babel/preset-typescript"
-
-        install_command = case package_manager
-                          when "npm"
-                            "npm install --save-dev #{babel_typescript_package}"
-                          when "yarn"
-                            "yarn add --dev #{babel_typescript_package}"
-                          when "pnpm"
-                            "pnpm add --save-dev #{babel_typescript_package}"
-                          when "bun"
-                            "bun add --dev #{babel_typescript_package}"
-                          end
-
-        puts Rainbow("📝 Installing Babel TypeScript preset...").yellow
-        success = system(install_command)
-        return if success
-
-        warning = <<~MSG.strip
-          ⚠️  Failed to install Babel TypeScript preset automatically.
-
-          Please run manually:
-              #{install_command}
-
-          TypeScript compilation may not work without this preset.
-        MSG
-        GeneratorMessages.add_warning(warning)
-        nil
-      end
-
       # Removed: Shakapacker auto-installation logic (now explicit dependency)
 
       # Removed: Shakapacker 8+ is now required as explicit dependency

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -44,15 +44,16 @@ def copy_base_files
       def copy_base_redux_files
         base_hello_world_path = "redux/base/app/javascript/bundles/HelloWorld"
         component_extension = options.typescript? ? "tsx" : "jsx"
+        redux_extension = options.typescript? ? "ts" : "js"
 
-        # Copy non-component files (keep as .js for now)
-        %w[actions/helloWorldActionCreators.js
-           containers/HelloWorldContainer.js
-           constants/helloWorldConstants.js
-           reducers/helloWorldReducer.js
-           store/helloWorldStore.js].each do |file|
-             copy_file("#{base_hello_world_path}/#{file}",
-                       "app/javascript/src/HelloWorldApp/#{file}")
+        # Copy Redux infrastructure files with appropriate extension
+        %w[actions/helloWorldActionCreators
+           containers/HelloWorldContainer
+           constants/helloWorldConstants
+           reducers/helloWorldReducer
+           store/helloWorldStore].each do |file|
+             copy_file("#{base_hello_world_path}/#{file}.#{redux_extension}",
+                       "app/javascript/src/HelloWorldApp/#{file}.#{redux_extension}")
            end
 
         # Copy component file with appropriate extension
@@ -72,11 +73,59 @@ def create_appropriate_templates
       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)
+
+        # Add TypeScript types as dev dependency if TypeScript is enabled
         if options.typescript?
-          run "npm install redux react-redux @types/react-redux"
-        else
-          run "npm install redux react-redux"
+          types_success = add_npm_dependencies(%w[@types/react-redux], dev: true)
+          success &&= types_success
         end
+
+        # Fallback to package manager detection if GeneratorHelper fails
+        return if success
+
+        package_manager = detect_package_manager
+        return unless package_manager
+
+        install_packages_with_fallback(regular_packages, dev: false, package_manager: package_manager)
+
+        return unless options.typescript?
+
+        install_packages_with_fallback(%w[@types/react-redux], dev: true, 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)
+        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

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import * as style from './HelloWorld.module.css';
+import { PropsFromRedux } from '../containers/HelloWorldContainer';
 
-interface HelloWorldProps {
-  name: string;
-  updateName: (name: string) => void;
-}
+// Component props are inferred from Redux container
+type HelloWorldProps = PropsFromRedux;
 
 const HelloWorld: React.FC<HelloWorldProps> = ({ name, updateName }) => (
   <div>

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/constants/helloWorldConstants.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE' as const;
+
+// Action type for TypeScript
+export type HelloWorldActionType = typeof HELLO_WORLD_NAME_UPDATE;

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.ts

@@ -0,0 +1,20 @@
+// Simple example of a React "smart" component
+
+import { connect, ConnectedProps } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+import { HelloWorldState } from '../reducers/helloWorldReducer';
+
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state: HelloWorldState) => ({ name: state.name });
+
+// Create the connector
+const connector = connect(mapStateToProps, actions);
+
+// Infer the props from Redux state and actions
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connector(HelloWorld);

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.ts

@@ -0,0 +1,22 @@
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+import { HelloWorldAction } from '../actions/helloWorldActionCreators';
+
+// State interface
+export interface HelloWorldState {
+  name: string;
+}
+
+// Individual reducer with TypeScript types
+const name = (state: string = '', action: HelloWorldAction): string => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
+    default:
+      return state;
+  }
+};
+
+const helloWorldReducer = combineReducers<HelloWorldState>({ name });
+
+export default helloWorldReducer;

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.client.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import configureStore from '../store/helloWorldStore';
+import configureStore, { RailsProps } from '../store/helloWorldStore';
 import HelloWorldContainer from '../containers/HelloWorldContainer';
 
-interface HelloWorldAppProps {
-  name: string;
-}
+// Props interface matches what Rails will pass from the controller
+type HelloWorldAppProps = RailsProps;
 
 // See documentation for https://github.com/reactjs/react-redux.
 // This is how you get props from the Rails view into the redux store.

lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.ts

@@ -0,0 +1,16 @@
+import { createStore, Store } from 'redux';
+import helloWorldReducer, { HelloWorldState } from '../reducers/helloWorldReducer';
+
+// Rails props interface - customize based on your Rails controller
+export interface RailsProps {
+  name: string;
+  [key: string]: any; // Allow additional props from Rails
+}
+
+// Store type
+export type HelloWorldStore = Store<HelloWorldState>;
+
+const configureStore = (railsProps: RailsProps): HelloWorldStore =>
+  createStore(helloWorldReducer, railsProps);
+
+export default configureStore;