react_on_rails 16.0.0 → 16.0.1.rc.2

data/bin/lefthook/ruby-autofix

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+# Auto-fix Ruby files using rake autofix
+set -euo pipefail
+
+CONTEXT="${1:-staged}"
+files="$(bin/lefthook/get-changed-files "$CONTEXT" '\.(rb|rake|ru)$')"
+
+if [ -z "$files" ]; then
+  echo "✅ No Ruby files to autofix"
+  exit 0
+fi
+
+if [ "$CONTEXT" = "all-changed" ]; then
+  echo "🎨 Autofix on all changed Ruby files:"
+else
+  echo "🎨 Autofix on $CONTEXT Ruby files:"
+fi
+printf "  %s\n" $files
+
+bundle exec rake autofix
+
+# Re-stage files if running on staged or all-changed context
+if [ "$CONTEXT" = "staged" ] || [ "$CONTEXT" = "all-changed" ]; then
+  echo $files | xargs -r git add
+  echo "✅ Re-staged formatted files"
+fi

data/bin/lefthook/ruby-lint

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Lint Ruby files with RuboCop
+set -euo pipefail
+
+CONTEXT="${1:-staged}"
+files="$(bin/lefthook/get-changed-files "$CONTEXT" '\.(rb|rake|ru)$')"
+
+if [ -z "$files" ]; then
+  echo "✅ No Ruby files to lint"
+  exit 0
+fi
+
+if [ "$CONTEXT" = "all-changed" ]; then
+  echo "🔍 RuboCop on all changed Ruby files:"
+else
+  echo "🔍 RuboCop on $CONTEXT Ruby files:"
+fi
+printf "  %s\n" $files
+
+if ! bundle exec rubocop --force-exclusion --display-cop-names -- $files; then
+  echo ""
+  echo "❌ RuboCop check failed!"
+  echo "💡 Auto-fix: bundle exec rubocop --auto-correct --force-exclusion -- $files"
+  echo "🚫 Skip hook: git commit --no-verify"
+  exit 1
+fi
+echo "✅ RuboCop checks passed for Ruby files"

data/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'],
@@ -156,6 +159,13 @@ const config = tsEslint.config([
       'react/prop-types': 'off',
     },
   },
+  {
+    files: ['spec/dummy/**/*'],
+    rules: {
+      // The dummy app dependencies are managed separately and may not be installed
+      'import/no-unresolved': 'off',
+    },
+  },
   {
     files: ['**/*.ts{x,}', '**/*.[cm]ts'],
 

data/knip.ts

@@ -6,21 +6,32 @@ const config: KnipConfig = {
     '.': {
       entry: [
         'node_package/src/ReactOnRails.node.ts!',
-        'node_package/src/ReactOnRailsRSC.ts!',
-        'node_package/src/registerServerComponent/client.tsx!',
-        'node_package/src/registerServerComponent/server.tsx!',
-        'node_package/src/registerServerComponent/server.rsc.ts!',
-        'node_package/src/wrapServerComponentRenderer/server.tsx!',
-        'node_package/src/wrapServerComponentRenderer/server.rsc.tsx!',
-        'node_package/src/RSCRoute.tsx!',
-        'node_package/src/ServerComponentFetchError.ts!',
+        'node_package/src/pro/ReactOnRailsRSC.ts!',
+        'node_package/src/pro/registerServerComponent/client.tsx!',
+        'node_package/src/pro/registerServerComponent/server.tsx!',
+        'node_package/src/pro/registerServerComponent/server.rsc.ts!',
+        'node_package/src/pro/wrapServerComponentRenderer/server.tsx!',
+        'node_package/src/pro/wrapServerComponentRenderer/server.rsc.tsx!',
+        'node_package/src/pro/RSCRoute.tsx!',
+        'node_package/src/pro/ServerComponentFetchError.ts!',
+        'node_package/src/pro/getReactServerComponent.server.ts!',
+        'node_package/src/pro/transformRSCNodeStream.ts!',
+        'node_package/src/loadJsonFile.ts!',
         'eslint.config.ts',
       ],
       project: ['node_package/src/**/*.[jt]s{x,}!', 'node_package/tests/**/*.[jt]s{x,}'],
       babel: {
         config: ['node_package/babel.config.js'],
       },
-      ignore: ['node_package/tests/emptyForTesting.js'],
+      ignore: [
+        'node_package/tests/emptyForTesting.js',
+        // Pro features exported for external consumption
+        'node_package/src/pro/streamServerRenderedReactComponent.ts:transformRenderStreamChunksToResultObject',
+        'node_package/src/pro/streamServerRenderedReactComponent.ts:streamServerRenderedComponent',
+        'node_package/src/pro/ServerComponentFetchError.ts:isServerComponentFetchError',
+        'node_package/src/pro/RSCRoute.tsx:RSCRouteProps',
+        'node_package/src/pro/streamServerRenderedReactComponent.ts:StreamingTrackers',
+      ],
       ignoreBinaries: [
         // Knip fails to detect it's declared in devDependencies
         'nps',

data/lib/generators/react_on_rails/USAGE

@@ -0,0 +1,65 @@
+Description:
+    The `react_on_rails:doctor` generator diagnoses your React on Rails setup
+    and identifies potential configuration issues. It performs comprehensive
+    checks on your environment, dependencies, and configuration files.
+
+    This command is especially useful for:
+    • Troubleshooting setup issues
+    • Verifying installation after running react_on_rails:install
+    • Ensuring compatibility after upgrades
+    • Getting help with configuration problems
+
+Example:
+    # Basic diagnosis
+    rails generate react_on_rails:doctor
+
+    # Verbose output showing all checks
+    rails generate react_on_rails:doctor --verbose
+
+    # Show help
+    rails generate react_on_rails:doctor --help
+
+Checks performed:
+    Environment Prerequisites:
+    • Node.js installation and version compatibility
+    • JavaScript package manager availability (npm, yarn, pnpm, bun)
+    • Git working directory status
+
+    React on Rails Packages:
+    • React on Rails gem installation
+    • react-on-rails NPM package installation
+    • Version synchronization between gem and NPM package
+    • Shakapacker configuration and installation
+
+    Dependencies:
+    • React and React DOM installation
+    • Babel preset configuration
+    • Required development dependencies
+
+    Rails Integration:
+    • React on Rails initializer configuration
+    • Route and controller setup (Hello World example)
+    • View helper integration
+
+    Webpack Configuration:
+    • Webpack config file existence and structure
+    • React on Rails compatibility checks
+    • Environment-specific configuration validation
+
+    Development Environment:
+    • JavaScript bundle files
+    • Procfile.dev for development workflow
+    • .gitignore configuration for generated files
+
+Options:
+    --verbose, -v: Show detailed output for all checks, including successful ones
+    --fix, -f:     Attempt to fix simple issues automatically (planned feature)
+
+Exit codes:
+    0: All checks passed or only warnings found
+    1: Critical errors found that prevent React on Rails from working
+
+For more help:
+    • Documentation: https://github.com/shakacode/react_on_rails
+    • Issues: https://github.com/shakacode/react_on_rails/issues
+    • Discord: https://discord.gg/reactrails

data/lib/generators/react_on_rails/base_generator.rb

@@ -105,13 +105,13 @@ module ReactOnRails
       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 @@ module ReactOnRails
         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 @@ module ReactOnRails
         ]
         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 @@ module ReactOnRails
         ]
         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 @@ module ReactOnRails
         ]
         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
 

data/lib/generators/react_on_rails/generator_helper.rb

@@ -91,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,7 +38,7 @@ module GeneratorMessages
       @output = []
     end
 
-    def helpful_message_after_installation(component_name: "HelloWorld")
+    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
@@ -62,7 +62,7 @@ module GeneratorMessages
            ./bin/dev prod         # Production-like mode for testing
            ./bin/dev help         # See all available options
 
-        3. Visit: #{Rainbow('http://localhost:3000/hello_world').cyan.underline}
+        3. Visit: #{Rainbow(route ? "http://localhost:3000/#{route}" : 'http://localhost:3000').cyan.underline}
         ✨ KEY FEATURES:
         ─────────────────────────────────────────────────────────────────────────
         • Auto-registration enabled - Your layout only needs:

data/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 @@ module ReactOnRails
                    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 @@ module ReactOnRails
 
       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
 
@@ -136,11 +149,13 @@ module ReactOnRails
       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}" }
@@ -149,7 +164,14 @@ 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)
@@ -302,10 +324,96 @@ module ReactOnRails
         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

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -11,12 +11,24 @@ module ReactOnRails
       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

data/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,17 +29,18 @@ module ReactOnRails
 
       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")
@@ -37,12 +48,15 @@ module ReactOnRails
 
       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,15 +74,70 @@ module ReactOnRails
       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:)
+        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_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")
+          GeneratorMessages.helpful_message_after_installation(component_name: "HelloWorldApp", route: "hello_world")
         )
       end
     end

data/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;

data/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;