BlaC

Type-safe state management for React with automatic re-render optimization.

Documentation · npm

Features

• Class-based state containers — Business logic lives in typed classes, not components
• Automatic re-render optimization — Proxy-based tracking detects which properties you read and only re-renders when those change
• Zero providers — No context wrappers. Import a class, call useBloc, and state is shared automatically
• Lifecycle management — Registry handles instance creation, sharing, ref counting, and disposal
• Plugin system — Official plugins for DevTools, logging, and IndexedDB persistence
• Concurrent-safe — Built on useSyncExternalStore for React 18+

Quick Start

pnpm add @blac/core @blac/react

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>;
}

Packages

Package	Description
@blac/core	State containers, registry, plugins, watch & tracking utilities
@blac/react	React hook (useBloc) with auto-tracking
@blac/preact	Preact integration
@blac/adapter	Framework-agnostic adapter layer
@blac/test	Test utilities
@blac/logging-plugin	Console logging and monitoring plugin
@blac/devtools-connect	DevTools and Redux DevTools integration
@blac/plugin-persist	IndexedDB state persistence
@blac/devtools-ui	DevTools UI components

Development

This is a pnpm workspace monorepo.

# Install dependencies
pnpm install

# Dev mode (all packages)
pnpm dev

# Build all packages
pnpm build

# Run tests for a specific package
pnpm --filter @blac/core test
pnpm --filter @blac/react test

# Type check
pnpm typecheck

# Lint
pnpm lint

License

MIT