What is BlaC?

BlaC is a TypeScript state management library implementing the BLoC (Business Logic Component) pattern for React applications. It provides type-safe state containers with automatic dependency tracking for optimal re-renders.

Key Features

• Type-Safe: Full TypeScript support with inferred state and props types
• Auto-Tracking: Proxy-based dependency tracking - only re-render when accessed properties change
• Event-Driven: Vertex pattern for complex state flows with explicit event handling
• Simple API: Cubit pattern for straightforward state management
• DevTools: Built-in Chrome extension for debugging

More Than State Management

BlaC is a pattern that lets you forget about state management so you can focus on building features.

Separation of Concerns

┌─────────────────┐
│   UI (React)    │  Components only render and dispatch actions
├─────────────────┤
│ Business Logic  │  Cubits/Vertices handle all logic
│    (BlaC)       │
├─────────────────┤
│   Data Layer    │  APIs, databases, storage
└─────────────────┘

Testability

Business logic lives in plain TypeScript classes. Test without React, without hooks, without rendering:

// No React testing library needed
const counter = new CounterCubit();
counter.increment();
expect(counter.state.count).toBe(1);

Cubit vs Vertex

	Cubit	Vertex
State Updates	Direct via emit(), update(), patch()	Event-driven via add()
Complexity	Simple	More structure
Use When	Most cases	Complex flows, audit trails, undo/redo

Cubit - Direct state mutations:

class CounterCubit extends Cubit<{ count: number }> {
  increment = () => this.patch({ count: this.state.count + 1 });
}

Vertex - Event-driven:

type CounterEvent = { type: 'increment' };

class CounterVertex extends Vertex<{ count: number }, CounterEvent> {
  constructor() {
    super({ count: 0 });
    this.createHandlers({
      increment: (_, emit) => emit({ count: this.state.count + 1 }),
    });
  }
}

Next Steps

• Core Getting Started - Installation and basic usage
• React Getting Started - React integration