TDI2 Documentation

The Problem: React Prop Hell

// ❌ Your React components today
function Dashboard({
  user, setUser,
  products, setProducts, loading, setLoading,
  cart, setCart, cartTotal, setCartTotal,
  theme, setTheme, notifications, setNotifications,
  permissions, preferences, onUpdate, onError,
  /* ...and 10+ more props */
}) {
  // Complex useEffect chains, manual synchronization...
}

The Solution: Zero Props with TDI2

// ✅ Your React components with TDI2
function Dashboard({
  userService,
  productService,
  cartService
}: {
  userService: Inject<UserServiceInterface>;
  productService: Inject<ProductServiceInterface>;
  cartService: Inject<CartServiceInterface>;
}) {
  // Clean, focused, automatically synchronized
  return <div>{userService.state.name} has {cartService.state.items.length} items</div>;
}

Result: Zero prop drilling. Automatic state sync. Pure business logic separation.

Try TDI2 Right Now (30 Seconds)

npx degit 7frank/tdi2/examples/tdi2-basic-example my-di-app
cd my-di-app && npm install && npm run dev

Open http://localhost:5173 → Working React app with zero prop drilling!

How TDI2 Works

🚫 Zero Prop Drilling

Transform 15+ props per component to clean service injection. No more manual prop passing.

⚡ Automatic State Sync

Change service state anywhere → all components update automatically. No subscriptions needed.

🔧 Build-Time Magic

TypeScript interfaces become DI tokens. Zero runtime overhead, perfect tree-shaking.

🧪 Simple Testing

Mock services, not props. Test business logic separately from UI components.

The Dramatic Difference

Your React Code Today	With TDI2
Props: 15+ props per component	Props: Zero data props
State Sync: Manual useEffect chains	State Sync: Automatic everywhere
Testing: Mock dozens of props	Testing: Mock clean service interfaces
Architecture: No clear boundaries	Architecture: Service → Component separation
Maintenance: Prop drilling nightmare	Maintenance: Change service, all components update

Real Impact: TDI2 transforms React from “component framework with state chaos” to “service-oriented architecture with React rendering”.

Your TDI2 Journey (3 Steps)

1. 🚀 Try the Working Example - Experience TDI2 in 30 seconds (no setup required)
2. 📖 Quick Start Guide - Build your first service from scratch
3. 🏗️ Migration Guide - Transform your existing React apps

Next Level: Enterprise Implementation • Framework Comparisons • Architecture Decisions

Enterprise Ready

TDI2 is designed for large-scale React applications with:

• Team Coordination - Clear service boundaries prevent teams from stepping on each other
• Testing Excellence - Service unit tests run in milliseconds, no React rendering needed
• Performance Optimization - Automatic reactive updates, no manual memoization
• Migration Strategy - Incremental adoption alongside existing React patterns

---

Ready to transform your React application architecture?