BlacBusiness Logic Component

More than State Management

Get Started

View on GitHub

🎯

Type-Safe State Management

Full TypeScript support with inferred types for state, events, and props.

⚡

Fine-Grained Reactivity

Auto-tracking proxy system ensures components only re-render when their dependencies change.

🔄

Event-Driven Architecture

Vertex pattern provides structured event handling with type-safe event classes.

🧩

Extensible Plugin System

Add functionality through plugins for persistence, logging, devtools, and more.

🎨

React 18+ Integration

Built for Concurrent Mode with useSyncExternalStore, Suspense, and useTransition support.

🛡️

Memory Safe

Automatic ref counting and disposal prevents memory leaks in component lifecycles.

Quick Example

typescript

import { Cubit } from '@blac/core';
import { useBloc } from '@blac/react';

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

function Counter() {
  const [state, counter] = useBloc(CounterCubit);
  return <button onClick={counter.increment}>{state.count}</button>;
}

Installation

bash

npm install @blac/core @blac/react