React Service Injection (RSI)

powered by Typescript Dependency Injection Attempt #2

React doesn't scale until now?

Enterprise-Grade Architecture for Scalable React Applications

The Problem: React components drowning in props, state synchronization hell, testing nightmares.

The Solution: Move ALL state and logic to services. Zero props. Pure templates. Automatic synchronization.

---

TL;DR

// ❌ Before: Props hell, manual state management
function UserDashboard({ userId, userRole, permissions, theme, loading, onUpdate, ... }) {
  // 15+ props, complex useEffect chains, manual synchronization
}

// ✅ After: Zero props, automatic everything
function UserDashboard({ userService, appState }: {
  userService: Inject<UserServiceInterface>;
  appState: Inject<AppStateService>;
}) {
  return (
    <div className={`dashboard theme-${appState.state.theme}`}>
      <h1>{userService.state.currentUser?.name}</h1>
      <UserProfile />  {/* No props - gets data from services */}
    </div>
  );
}

Result: Components become templates. Services handle everything. Zero prop drilling. Automatic sync across your entire app.

Try it out for yourself

npx degit 7frank/tdi2/examples/tdi2-basic-example di-react-example
cd di-react-example
npm install
npm run clean && npm run dev
# Open http://localhost:5173

---

📚 Documentation

📖 Live Documentation Site - Comprehensive guides, examples, and reference materials

🧪 Interactive Examples - Live Storybook demonstrations

Quick Links:

• Quick Start Guide - Get up and running in 5 minutes

• Basic Example - Recommended if you just want to try it out

• E-Commerce Case Study - Complete real-world example

• Enterprise Implementation - Guide for large teams

• Architecture Patterns - Controller vs Service pattern

Getting Started

• Quick Start Guide - Setup and first service
• Component Transformation - Converting existing components
• API Reference - Complete package documentation

Enterprise Implementation

• Enterprise Guide - Large team adoption
• Team Onboarding - Developer training
• Migration Strategy - Systematic migration approach

Architecture Deep Dive

• Why TDI2? - React's architectural problems
• Architecture Principles - Service-oriented design
• Framework Comparisons - vs Redux, Context API, Zustand

Advanced Guides

• Features & Roadmap - Production readiness status
• Troubleshooting - Common issues and solutions

---

⚠️ Disclaimer

🧪 Experimental Technology: RSI is currently experimental and only works in client-side environments. Server-side rendering (SSR) support is not yet implemented.

📊 Performance Claims: All performance metrics and benchmarks referenced in this documentation are currently placeholders and educated guesses. Real-world performance data is still being collected.

📝 Documentation Status: Most documentation is in draft form and requires peer review. We're actively seeking feedback from the React community.

🤝 Contributing: Found issues or have suggestions? Please open an issue or submit a pull request. Your feedback helps shape RSI's development.

see feature status for the "production" ready system see problems status for the "production" ready system

---

Primary Targets

🏢 Enterprise React Teams (10+ developers)

• Prop drilling with 15+ props per component
• Multiple teams stepping on each other's code
• Testing complexity from mocking dozens of props
• No architectural boundaries or consistency

🎯 Dashboard/Admin Developers

• Complex state synchronization between components
• Performance issues from constant re-rendering
• Manual coordination between data views
• Zustand/Redux boilerplate for every feature

---

Quick Start

1. Install: npm install @tdi2/di-core @tdi2/vite-plugin-di valtio
2. Configure build pipeline → Setup Guide
3. Create services → Service Patterns
4. Transform components → Component Guide

---

Why RSI Changes Everything

Traditional React	RSI Approach
15+ props per component	0 data props
Manual state sync	Automatic everywhere
Complex component testing	Pure template testing
No architectural boundaries	Clear service boundaries
Prop drilling hell	Direct service injection

---

Community

Seeking feedback from:

• Enterprise React teams struggling with scale
• Dashboard developers with sync issues
• Teams migrating from Angular to React

Try RSI in your next project and let us know how it works for your team.

---

Additional Resources (Work in Progress)

Note: The following documents are still in active development and may contain incomplete or outdated information. We welcome feedback and contributions.

Core Concepts

• Motivation & Background - Why RSI was created
• Dependency Injection Foundation - The underlying DI system
• React Integration Details - Core RSI innovation explained

Examples & Patterns

• Working Example - Complete implementation example
• Service Recipes - Common patterns and reactive services

Analysis & Critique

• Design Principles - Guidelines for maximizing RSI value

• Known Issues - Current limitations and planned fixes

Planned Documentation

• Migration Strategy - Phased rollout plan for existing applications
• Impact Assessment - Measuring RSI effectiveness in real projects

---

Transforming React from component chaos to service-centric clarity.