Preact

The planned @blac/preact package will provide the same useBloc hook with the same API as @blac/react, over the same @blac/core engine. If you already know the React binding, there is nothing new to learn — only the import changes.

Installation

pnpm
npm

pnpm add @blac/core @blac/preact

npm install @blac/core @blac/preact

Requires Preact 10.x. @blac/core is a peer dependency.

Usage

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

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

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

Auto-tracking works exactly as it does in React: state.count is recorded during render, so this component re-renders only when count changes. See Dependency Tracking for the recording rules.

API

The hook signature, return tuple, and options are identical to the React version:

const [state, bloc, ref] = useBloc(MyCubit, {
  args: { id }, // typed; required when the bloc declares Args; derives identity
  select: (state, bloc) => [bloc.someGetter], // re-render selector (opts out of auto-track)
  onMount: (bloc) => {
    /* runs after acquire */
  },
  onUnmount: (bloc) => {
    /* runs before release */
  },
});

@blac/preact is built for parity with @blac/react, so the input model is the same: typed args for instance identity, the per-consumer deps lane on the container, and the select re-render selector. Like React, deps is not a useBloc option; wire it from an effect as described in Passing Inputs. There is no autoTrack option in either binding — a component re-renders based on what it reads, or on select when you provide one; a component that reads no state never re-renders. For the complete, canonical options reference, see useBloc.

Global configuration

import { configureBlacPreact } from '@blac/preact';

configureBlacPreact({
  // Reserved for forwards-compatible knobs; currently no options.
});

configureBlacPreact mirrors configureBlacReact: both configuration surfaces are intentionally empty today. The hook’s tracking model is fixed — auto-tracking when select is omitted, selector-driven re-renders when it is provided — and is not configurable.

Differences from React

The hook is built against Preact’s hook implementations rather than React’s; the subscription and tracking model is otherwise identical.
Everything else — @blac/core, the registry, ref-counting, plugins, and the tracking engine in @dirtytalk/structural — is shared between the two bindings. State containers themselves are framework-agnostic: the same Cubit class works under React, Preact, or no framework at all (via watch).