@blac/react 2.0.0-rc.10 → 2.0.0-rc.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +71 -4
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +137 -12
- package/dist/index.d.ts +137 -12
- package/dist/index.js +71 -4
- package/dist/index.js.map +1 -0
- package/package.json +12 -8
- package/dist/types.d.ts +0 -25
- package/dist/useBloc.d.ts +0 -4
- package/dist/useBlocActions.d.ts +0 -9
- package/dist/utils/instance-keys.d.ts +0 -19
package/dist/index.cjs
CHANGED
|
@@ -34,9 +34,47 @@ function determineTrackingMode(options) {
|
|
|
34
34
|
autoTrackEnabled: options?.autoTrack !== false
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
|
+
/**
|
|
38
|
+
* React hook that connects a component to a state container with automatic re-render on state changes.
|
|
39
|
+
*
|
|
40
|
+
* Supports three tracking modes:
|
|
41
|
+
* - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy
|
|
42
|
+
* - **Manual dependencies**: Explicit dependency array like useEffect
|
|
43
|
+
* - **No tracking**: Returns full state without optimization
|
|
44
|
+
*
|
|
45
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
46
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
47
|
+
* @param BlocClass - The state container class to connect to
|
|
48
|
+
* @param options - Configuration options for tracking mode and instance management
|
|
49
|
+
* @returns Tuple with [state, bloc instance, ref]
|
|
50
|
+
*
|
|
51
|
+
* @example Basic usage
|
|
52
|
+
* ```ts
|
|
53
|
+
* const [state, myBloc, ref] = useBloc(MyBloc);
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example With manual dependencies
|
|
57
|
+
* ```ts
|
|
58
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
59
|
+
* dependencies: (state) => [state.count]
|
|
60
|
+
* });
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @example With isolated instance
|
|
64
|
+
* ```ts
|
|
65
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
66
|
+
* instanceId: 'unique-id'
|
|
67
|
+
* });
|
|
68
|
+
* ```
|
|
69
|
+
*
|
|
70
|
+
* @example With generic bloc and explicit state type
|
|
71
|
+
* ```ts
|
|
72
|
+
* const [state, myBloc] = useBloc<MyStateType>(GenericBloc);
|
|
73
|
+
* // state is typed as MyStateType
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
37
76
|
function useBloc(BlocClass, options) {
|
|
38
77
|
const componentRef = (0, react.useRef)({});
|
|
39
|
-
const Constructor = BlocClass;
|
|
40
78
|
const isIsolated = (0, __blac_core.isIsolatedClass)(BlocClass);
|
|
41
79
|
const initialPropsRef = (0, react.useRef)(options?.props);
|
|
42
80
|
const [bloc, subscribe, getSnapshot, instanceKey, adapterState, rawInstance] = (0, react.useMemo)(() => {
|
|
@@ -84,7 +122,7 @@ function useBloc(BlocClass, options) {
|
|
|
84
122
|
return () => {
|
|
85
123
|
externalDepsManager.current.cleanup();
|
|
86
124
|
if (options?.onUnmount) options.onUnmount(bloc);
|
|
87
|
-
|
|
125
|
+
BlocClass.release(instanceKey);
|
|
88
126
|
if (isIsolated && !rawInstance.isDisposed) rawInstance.dispose();
|
|
89
127
|
};
|
|
90
128
|
}, []);
|
|
@@ -97,14 +135,43 @@ function useBloc(BlocClass, options) {
|
|
|
97
135
|
|
|
98
136
|
//#endregion
|
|
99
137
|
//#region src/useBlocActions.ts
|
|
138
|
+
/**
|
|
139
|
+
* React hook that connects to a state container instance without triggering re-renders.
|
|
140
|
+
* Use this when you only need to call actions on the bloc without subscribing to state changes.
|
|
141
|
+
*
|
|
142
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
143
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
144
|
+
* @param BlocClass - The state container class to connect to
|
|
145
|
+
* @param options - Configuration options for instance management and lifecycle
|
|
146
|
+
* @returns The state container instance for calling actions
|
|
147
|
+
*
|
|
148
|
+
* @example Basic usage
|
|
149
|
+
* ```ts
|
|
150
|
+
* const myBloc = useBlocActions(MyBloc);
|
|
151
|
+
* // Call methods on the bloc without re-rendering
|
|
152
|
+
* myBloc.someMethod();
|
|
153
|
+
* ```
|
|
154
|
+
*
|
|
155
|
+
* @example With isolated instance
|
|
156
|
+
* ```ts
|
|
157
|
+
* const myBloc = useBlocActions(MyBloc, {
|
|
158
|
+
* instanceId: 'unique-id'
|
|
159
|
+
* });
|
|
160
|
+
* ```
|
|
161
|
+
*
|
|
162
|
+
* @example With generic bloc and explicit state type
|
|
163
|
+
* ```ts
|
|
164
|
+
* const myBloc = useBlocActions<MyStateType>(GenericBloc);
|
|
165
|
+
* // myBloc.state is typed as MyStateType
|
|
166
|
+
* ```
|
|
167
|
+
*/
|
|
100
168
|
function useBlocActions(BlocClass, options) {
|
|
101
169
|
const componentRef = (0, react.useRef)({});
|
|
102
170
|
const initialPropsRef = (0, react.useRef)(options?.props);
|
|
103
171
|
const [bloc, instanceKey] = (0, react.useMemo)(() => {
|
|
104
172
|
const isIsolated = (0, __blac_core.isIsolatedClass)(BlocClass);
|
|
105
|
-
const Constructor = BlocClass;
|
|
106
173
|
const instanceKey$1 = generateInstanceKey(componentRef.current, isIsolated, options?.instanceId);
|
|
107
|
-
return [
|
|
174
|
+
return [BlocClass.resolve(instanceKey$1, initialPropsRef.current), instanceKey$1];
|
|
108
175
|
}, [BlocClass]);
|
|
109
176
|
(0, react.useEffect)(() => {
|
|
110
177
|
if (options?.onMount) options.onMount(bloc);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["instanceKey","subscribeFn: (callback: () => void) => () => void","getSnapshotFn: () => ExtractState<TBloc>","adapterState: AdapterState<TBloc>","adapterState","ExternalDependencyManager","instanceKey"],"sources":["../src/utils/instance-keys.ts","../src/useBloc.ts","../src/useBlocActions.ts"],"sourcesContent":["/**\n * Instance key generation utilities for React integration\n */\n\nimport { generateIsolatedKey } from '@blac/core';\nimport type { ComponentRef } from '../types';\n\n/**\n * Generate an instance key for a bloc\n *\n * Logic:\n * - If user provides instanceId, use it (convert number to string)\n * - If isolated, generate or reuse a unique key for this component\n * - Otherwise, return undefined (use default key)\n *\n * @param componentRef - React component reference (persists across remounts)\n * @param isIsolated - Whether the bloc is isolated\n * @param providedId - User-provided instance ID (from options)\n * @returns Instance key string or undefined for default\n */\nexport function generateInstanceKey(\n componentRef: ComponentRef,\n isIsolated: boolean,\n providedId?: string | number,\n): string | undefined {\n // User explicitly provided an ID - use it\n if (providedId !== undefined) {\n return typeof providedId === 'number' ? String(providedId) : providedId;\n }\n\n // Isolated bloc - generate unique key per component\n if (isIsolated) {\n if (!componentRef.__blocInstanceId) {\n componentRef.__blocInstanceId = generateIsolatedKey();\n }\n return componentRef.__blocInstanceId;\n }\n\n // Shared bloc - use default key (undefined)\n return undefined;\n}\n","import {\n useMemo,\n useSyncExternalStore,\n useEffect,\n useRef,\n useReducer,\n} from 'react';\nimport {\n type BlocConstructor,\n StateContainer,\n type ExtractState,\n type AdapterState,\n ExternalDependencyManager,\n createAutoTrackSubscribe,\n createManualDepsSubscribe,\n createNoTrackSubscribe,\n createAutoTrackSnapshot,\n createManualDepsSnapshot,\n createNoTrackSnapshot,\n initAutoTrackState,\n initManualDepsState,\n initNoTrackState,\n disableGetterTracking,\n isIsolatedClass,\n} from '@blac/core';\nimport type { UseBlocOptions, UseBlocReturn, ComponentRef } from './types';\nimport { generateInstanceKey } from './utils/instance-keys';\n\ninterface TrackingMode {\n useManualDeps: boolean;\n autoTrackEnabled: boolean;\n}\n\nfunction determineTrackingMode<TBloc extends StateContainer<any, any>>(\n options?: UseBlocOptions<TBloc>,\n): TrackingMode {\n return {\n useManualDeps: options?.dependencies !== undefined,\n autoTrackEnabled: options?.autoTrack !== false,\n };\n}\n\n/**\n * React hook that connects a component to a state container with automatic re-render on state changes.\n *\n * Supports three tracking modes:\n * - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy\n * - **Manual dependencies**: Explicit dependency array like useEffect\n * - **No tracking**: Returns full state without optimization\n *\n * @template S - Optional state type override for generic StateContainers (defaults to never)\n * @template T - The state container constructor type (inferred from BlocClass)\n * @param BlocClass - The state container class to connect to\n * @param options - Configuration options for tracking mode and instance management\n * @returns Tuple with [state, bloc instance, ref]\n *\n * @example Basic usage\n * ```ts\n * const [state, myBloc, ref] = useBloc(MyBloc);\n * ```\n *\n * @example With manual dependencies\n * ```ts\n * const [state, myBloc] = useBloc(MyBloc, {\n * dependencies: (state) => [state.count]\n * });\n * ```\n *\n * @example With isolated instance\n * ```ts\n * const [state, myBloc] = useBloc(MyBloc, {\n * instanceId: 'unique-id'\n * });\n * ```\n *\n * @example With generic bloc and explicit state type\n * ```ts\n * const [state, myBloc] = useBloc<MyStateType>(GenericBloc);\n * // state is typed as MyStateType\n * ```\n */\nexport function useBloc<\n S = never,\n T extends new (...args: any[]) => StateContainer<any, any> = new (\n ...args: any[]\n ) => StateContainer<any, any>,\n>(\n BlocClass: T & BlocConstructor<InstanceType<T>>,\n options?: UseBlocOptions<InstanceType<T>>,\n): UseBlocReturn<InstanceType<T>, S> {\n type TBloc = InstanceType<T>;\n const componentRef = useRef<ComponentRef>({});\n const isIsolated = isIsolatedClass(BlocClass);\n\n const initialPropsRef = useRef(options?.props);\n\n const [bloc, subscribe, getSnapshot, instanceKey, adapterState, rawInstance] =\n useMemo<\n readonly [\n TBloc,\n (callback: () => void) => () => void,\n () => ExtractState<TBloc>,\n string | undefined,\n AdapterState<TBloc>,\n TBloc,\n ]\n >(() => {\n const instanceKey = generateInstanceKey(\n componentRef.current,\n isIsolated,\n options?.instanceId,\n );\n\n const instance = BlocClass.resolve(instanceKey, initialPropsRef.current);\n\n if (initialPropsRef.current !== undefined) {\n instance.updateProps(initialPropsRef.current);\n }\n\n const { useManualDeps, autoTrackEnabled } =\n determineTrackingMode(options);\n\n let subscribeFn: (callback: () => void) => () => void;\n let getSnapshotFn: () => ExtractState<TBloc>;\n let adapterState: AdapterState<TBloc>;\n\n if (useManualDeps && options?.dependencies) {\n adapterState = initManualDepsState(instance);\n subscribeFn = createManualDepsSubscribe(instance, adapterState, {\n dependencies: options.dependencies,\n });\n getSnapshotFn = createManualDepsSnapshot(instance, adapterState, {\n dependencies: options.dependencies,\n });\n } else if (!autoTrackEnabled) {\n adapterState = initNoTrackState(instance);\n subscribeFn = createNoTrackSubscribe(instance);\n getSnapshotFn = createNoTrackSnapshot(instance);\n } else {\n adapterState = initAutoTrackState(instance);\n subscribeFn = createAutoTrackSubscribe(instance, adapterState);\n getSnapshotFn = createAutoTrackSnapshot(instance, adapterState);\n }\n\n return [\n adapterState.proxiedBloc!,\n subscribeFn,\n getSnapshotFn,\n instanceKey,\n adapterState,\n instance,\n ];\n }, [BlocClass, options?.instanceId]);\n\n const state = useSyncExternalStore(subscribe, getSnapshot);\n\n const [, forceUpdate] = useReducer((x: number) => x + 1, 0);\n\n const externalDepsManager = useRef(new ExternalDependencyManager());\n\n useEffect(() => {\n if (options?.props !== initialPropsRef.current) {\n rawInstance.updateProps(options?.props);\n }\n }, [options?.props, rawInstance]);\n\n useEffect(() => {\n disableGetterTracking(adapterState, rawInstance);\n externalDepsManager.current.updateSubscriptions(\n adapterState.getterTracker,\n rawInstance,\n forceUpdate,\n );\n });\n\n useEffect(() => {\n if (options?.onMount) {\n options.onMount(bloc);\n }\n\n return () => {\n externalDepsManager.current.cleanup();\n\n if (options?.onUnmount) {\n options.onUnmount(bloc);\n }\n\n BlocClass.release(instanceKey);\n\n if (isIsolated && !rawInstance.isDisposed) {\n rawInstance.dispose();\n }\n };\n }, []);\n\n return [state, bloc, componentRef] as UseBlocReturn<TBloc, S>;\n}\n","import { useMemo, useEffect, useRef } from 'react';\nimport {\n type BlocConstructor,\n type StateOverride,\n StateContainer,\n isIsolatedClass,\n} from '@blac/core';\nimport type { ComponentRef } from './types';\nimport { generateInstanceKey } from './utils/instance-keys';\n\n/**\n * Configuration options for useBlocActions hook\n * @template TBloc - The state container type\n * @template TProps - Props type passed to the container\n */\nexport interface UseBlocActionsOptions<TBloc, TProps = any> {\n /** Props passed to bloc constructor or updateProps */\n props?: TProps;\n /** Custom instance identifier for shared or isolated instances */\n instanceId?: string | number;\n /** Callback invoked when bloc instance mounts */\n onMount?: (bloc: TBloc) => void;\n /** Callback invoked when bloc instance unmounts */\n onUnmount?: (bloc: TBloc) => void;\n}\n\n/**\n * React hook that connects to a state container instance without triggering re-renders.\n * Use this when you only need to call actions on the bloc without subscribing to state changes.\n *\n * @template S - Optional state type override for generic StateContainers (defaults to never)\n * @template T - The state container constructor type (inferred from BlocClass)\n * @param BlocClass - The state container class to connect to\n * @param options - Configuration options for instance management and lifecycle\n * @returns The state container instance for calling actions\n *\n * @example Basic usage\n * ```ts\n * const myBloc = useBlocActions(MyBloc);\n * // Call methods on the bloc without re-rendering\n * myBloc.someMethod();\n * ```\n *\n * @example With isolated instance\n * ```ts\n * const myBloc = useBlocActions(MyBloc, {\n * instanceId: 'unique-id'\n * });\n * ```\n *\n * @example With generic bloc and explicit state type\n * ```ts\n * const myBloc = useBlocActions<MyStateType>(GenericBloc);\n * // myBloc.state is typed as MyStateType\n * ```\n */\nexport function useBlocActions<\n S = never,\n T extends new (...args: any[]) => StateContainer<any, any> = new (\n ...args: any[]\n ) => StateContainer<any, any>,\n>(\n BlocClass: T & BlocConstructor<InstanceType<T>>,\n options?: UseBlocActionsOptions<InstanceType<T>>,\n): StateOverride<InstanceType<T>, S> {\n const componentRef = useRef<ComponentRef>({});\n const initialPropsRef = useRef(options?.props);\n\n const [bloc, instanceKey] = useMemo(() => {\n const isIsolated = isIsolatedClass(BlocClass);\n\n const instanceKey = generateInstanceKey(\n componentRef.current,\n isIsolated,\n options?.instanceId,\n );\n\n const instance = BlocClass.resolve(instanceKey, initialPropsRef.current);\n\n return [instance, instanceKey] as const;\n }, [BlocClass]);\n\n useEffect(() => {\n if (options?.onMount) {\n options.onMount(bloc);\n }\n\n return () => {\n if (options?.onUnmount) {\n options.onUnmount(bloc);\n }\n\n BlocClass.release(instanceKey);\n\n if (isIsolatedClass(BlocClass) && !bloc.isDisposed) {\n bloc.dispose();\n }\n };\n }, []);\n\n return bloc as StateOverride<InstanceType<T>, S>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,oBACd,cACA,YACA,YACoB;AAEpB,KAAI,eAAe,OACjB,QAAO,OAAO,eAAe,WAAW,OAAO,WAAW,GAAG;AAI/D,KAAI,YAAY;AACd,MAAI,CAAC,aAAa,iBAChB,cAAa,yDAAwC;AAEvD,SAAO,aAAa;;;;;;ACFxB,SAAS,sBACP,SACc;AACd,QAAO;EACL,eAAe,SAAS,iBAAiB;EACzC,kBAAkB,SAAS,cAAc;EAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CH,SAAgB,QAMd,WACA,SACmC;CAEnC,MAAM,iCAAoC,EAAE,CAAC;CAC7C,MAAM,8CAA6B,UAAU;CAE7C,MAAM,oCAAyB,SAAS,MAAM;CAE9C,MAAM,CAAC,MAAM,WAAW,aAAa,aAAa,cAAc,wCAUtD;EACN,MAAMA,gBAAc,oBAClB,aAAa,SACb,YACA,SAAS,WACV;EAED,MAAM,WAAW,UAAU,QAAQA,eAAa,gBAAgB,QAAQ;AAExE,MAAI,gBAAgB,YAAY,OAC9B,UAAS,YAAY,gBAAgB,QAAQ;EAG/C,MAAM,EAAE,eAAe,qBACrB,sBAAsB,QAAQ;EAEhC,IAAIC;EACJ,IAAIC;EACJ,IAAIC;AAEJ,MAAI,iBAAiB,SAAS,cAAc;AAC1C,yDAAmC,SAAS;AAC5C,4DAAwC,UAAUC,gBAAc,EAC9D,cAAc,QAAQ,cACvB,CAAC;AACF,6DAAyC,UAAUA,gBAAc,EAC/D,cAAc,QAAQ,cACvB,CAAC;aACO,CAAC,kBAAkB;AAC5B,sDAAgC,SAAS;AACzC,yDAAqC,SAAS;AAC9C,0DAAsC,SAAS;SAC1C;AACL,wDAAkC,SAAS;AAC3C,2DAAuC,UAAUA,eAAa;AAC9D,4DAAwC,UAAUA,eAAa;;AAGjE,SAAO;GACLA,eAAa;GACb;GACA;GACAJ;GACAI;GACA;GACD;IACA,CAAC,WAAW,SAAS,WAAW,CAAC;CAEtC,MAAM,wCAA6B,WAAW,YAAY;CAE1D,MAAM,GAAG,sCAA2B,MAAc,IAAI,GAAG,EAAE;CAE3D,MAAM,wCAA6B,IAAIC,uCAA2B,CAAC;AAEnE,4BAAgB;AACd,MAAI,SAAS,UAAU,gBAAgB,QACrC,aAAY,YAAY,SAAS,MAAM;IAExC,CAAC,SAAS,OAAO,YAAY,CAAC;AAEjC,4BAAgB;AACd,yCAAsB,cAAc,YAAY;AAChD,sBAAoB,QAAQ,oBAC1B,aAAa,eACb,aACA,YACD;GACD;AAEF,4BAAgB;AACd,MAAI,SAAS,QACX,SAAQ,QAAQ,KAAK;AAGvB,eAAa;AACX,uBAAoB,QAAQ,SAAS;AAErC,OAAI,SAAS,UACX,SAAQ,UAAU,KAAK;AAGzB,aAAU,QAAQ,YAAY;AAE9B,OAAI,cAAc,CAAC,YAAY,WAC7B,aAAY,SAAS;;IAGxB,EAAE,CAAC;AAEN,QAAO;EAAC;EAAO;EAAM;EAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IpC,SAAgB,eAMd,WACA,SACmC;CACnC,MAAM,iCAAoC,EAAE,CAAC;CAC7C,MAAM,oCAAyB,SAAS,MAAM;CAE9C,MAAM,CAAC,MAAM,wCAA6B;EACxC,MAAM,8CAA6B,UAAU;EAE7C,MAAMC,gBAAc,oBAClB,aAAa,SACb,YACA,SAAS,WACV;AAID,SAAO,CAFU,UAAU,QAAQA,eAAa,gBAAgB,QAAQ,EAEtDA,cAAY;IAC7B,CAAC,UAAU,CAAC;AAEf,4BAAgB;AACd,MAAI,SAAS,QACX,SAAQ,QAAQ,KAAK;AAGvB,eAAa;AACX,OAAI,SAAS,UACX,SAAQ,UAAU,KAAK;AAGzB,aAAU,QAAQ,YAAY;AAE9B,wCAAoB,UAAU,IAAI,CAAC,KAAK,WACtC,MAAK,SAAS;;IAGjB,EAAE,CAAC;AAEN,QAAO"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,12 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { BlocConstructor } from '@blac/core';
|
|
2
|
+
import type { ExtractState } from '@blac/core';
|
|
3
|
+
import type { RefObject } from 'react';
|
|
4
|
+
import { StateContainer } from '@blac/core';
|
|
5
|
+
import { StateOverride } from '@blac/core';
|
|
6
|
+
|
|
7
|
+
/* Excluded from this release type: ComponentRef */
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* React hook that connects a component to a state container with automatic re-render on state changes.
|
|
11
|
+
*
|
|
12
|
+
* Supports three tracking modes:
|
|
13
|
+
* - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy
|
|
14
|
+
* - **Manual dependencies**: Explicit dependency array like useEffect
|
|
15
|
+
* - **No tracking**: Returns full state without optimization
|
|
16
|
+
*
|
|
17
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
18
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
19
|
+
* @param BlocClass - The state container class to connect to
|
|
20
|
+
* @param options - Configuration options for tracking mode and instance management
|
|
21
|
+
* @returns Tuple with [state, bloc instance, ref]
|
|
22
|
+
*
|
|
23
|
+
* @example Basic usage
|
|
24
|
+
* ```ts
|
|
25
|
+
* const [state, myBloc, ref] = useBloc(MyBloc);
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @example With manual dependencies
|
|
29
|
+
* ```ts
|
|
30
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
31
|
+
* dependencies: (state) => [state.count]
|
|
32
|
+
* });
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example With isolated instance
|
|
36
|
+
* ```ts
|
|
37
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
38
|
+
* instanceId: 'unique-id'
|
|
39
|
+
* });
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example With generic bloc and explicit state type
|
|
43
|
+
* ```ts
|
|
44
|
+
* const [state, myBloc] = useBloc<MyStateType>(GenericBloc);
|
|
45
|
+
* // state is typed as MyStateType
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function useBloc<S = never, T extends new (...args: any[]) => StateContainer<any, any> = new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocOptions<InstanceType<T>>): UseBlocReturn<InstanceType<T>, S>;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* React hook that connects to a state container instance without triggering re-renders.
|
|
52
|
+
* Use this when you only need to call actions on the bloc without subscribing to state changes.
|
|
53
|
+
*
|
|
54
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
55
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
56
|
+
* @param BlocClass - The state container class to connect to
|
|
57
|
+
* @param options - Configuration options for instance management and lifecycle
|
|
58
|
+
* @returns The state container instance for calling actions
|
|
59
|
+
*
|
|
60
|
+
* @example Basic usage
|
|
61
|
+
* ```ts
|
|
62
|
+
* const myBloc = useBlocActions(MyBloc);
|
|
63
|
+
* // Call methods on the bloc without re-rendering
|
|
64
|
+
* myBloc.someMethod();
|
|
65
|
+
* ```
|
|
66
|
+
*
|
|
67
|
+
* @example With isolated instance
|
|
68
|
+
* ```ts
|
|
69
|
+
* const myBloc = useBlocActions(MyBloc, {
|
|
70
|
+
* instanceId: 'unique-id'
|
|
71
|
+
* });
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* @example With generic bloc and explicit state type
|
|
75
|
+
* ```ts
|
|
76
|
+
* const myBloc = useBlocActions<MyStateType>(GenericBloc);
|
|
77
|
+
* // myBloc.state is typed as MyStateType
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
export declare function useBlocActions<S = never, T extends new (...args: any[]) => StateContainer<any, any> = new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocActionsOptions<InstanceType<T>>): StateOverride<InstanceType<T>, S>;
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Configuration options for useBlocActions hook
|
|
84
|
+
* @template TBloc - The state container type
|
|
85
|
+
* @template TProps - Props type passed to the container
|
|
86
|
+
*/
|
|
87
|
+
export declare interface UseBlocActionsOptions<TBloc, TProps = any> {
|
|
88
|
+
/** Props passed to bloc constructor or updateProps */
|
|
89
|
+
props?: TProps;
|
|
90
|
+
/** Custom instance identifier for shared or isolated instances */
|
|
91
|
+
instanceId?: string | number;
|
|
92
|
+
/** Callback invoked when bloc instance mounts */
|
|
93
|
+
onMount?: (bloc: TBloc) => void;
|
|
94
|
+
/** Callback invoked when bloc instance unmounts */
|
|
95
|
+
onUnmount?: (bloc: TBloc) => void;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Configuration options for useBloc hook
|
|
100
|
+
* @template TBloc - The state container type
|
|
101
|
+
* @template TProps - Props type passed to the container
|
|
102
|
+
*/
|
|
103
|
+
export declare interface UseBlocOptions<TBloc, TProps = any> {
|
|
104
|
+
/** Props passed to bloc constructor or updateProps */
|
|
105
|
+
props?: TProps;
|
|
106
|
+
/** Custom instance identifier for shared or isolated instances */
|
|
107
|
+
instanceId?: string | number;
|
|
108
|
+
/** Manual dependency array like useEffect (disables autoTrack) */
|
|
109
|
+
dependencies?: (state: ExtractState<TBloc>, bloc: TBloc) => unknown[];
|
|
110
|
+
/** Enable automatic property tracking via Proxy (default: true) */
|
|
111
|
+
autoTrack?: boolean;
|
|
112
|
+
/** Disable caching for getter tracking */
|
|
113
|
+
disableGetterCache?: boolean;
|
|
114
|
+
/** Callback invoked when bloc instance mounts */
|
|
115
|
+
onMount?: (bloc: TBloc) => void;
|
|
116
|
+
/** Callback invoked when bloc instance unmounts */
|
|
117
|
+
onUnmount?: (bloc: TBloc) => void;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Tuple return type from useBloc hook containing state, bloc instance, and ref
|
|
122
|
+
* - [0] Current state value (with optional state type override)
|
|
123
|
+
* - [1] State container instance (bloc) for calling actions
|
|
124
|
+
* - [2] Ref object for accessing component ref (advanced use cases)
|
|
125
|
+
*
|
|
126
|
+
* @template TBloc - The state container type
|
|
127
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
128
|
+
*/
|
|
129
|
+
export declare type UseBlocReturn<TBloc extends StateContainer<any, any>, S = never> = [
|
|
130
|
+
[
|
|
131
|
+
S
|
|
132
|
+
] extends [never] ? ExtractState<TBloc> : S,
|
|
133
|
+
StateOverride<TBloc, S>,
|
|
134
|
+
RefObject<ComponentRef>
|
|
135
|
+
];
|
|
136
|
+
|
|
137
|
+
export { }
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { BlocConstructor } from '@blac/core';
|
|
2
|
+
import type { ExtractState } from '@blac/core';
|
|
3
|
+
import type { RefObject } from 'react';
|
|
4
|
+
import { StateContainer } from '@blac/core';
|
|
5
|
+
import { StateOverride } from '@blac/core';
|
|
6
|
+
|
|
7
|
+
/* Excluded from this release type: ComponentRef */
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* React hook that connects a component to a state container with automatic re-render on state changes.
|
|
11
|
+
*
|
|
12
|
+
* Supports three tracking modes:
|
|
13
|
+
* - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy
|
|
14
|
+
* - **Manual dependencies**: Explicit dependency array like useEffect
|
|
15
|
+
* - **No tracking**: Returns full state without optimization
|
|
16
|
+
*
|
|
17
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
18
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
19
|
+
* @param BlocClass - The state container class to connect to
|
|
20
|
+
* @param options - Configuration options for tracking mode and instance management
|
|
21
|
+
* @returns Tuple with [state, bloc instance, ref]
|
|
22
|
+
*
|
|
23
|
+
* @example Basic usage
|
|
24
|
+
* ```ts
|
|
25
|
+
* const [state, myBloc, ref] = useBloc(MyBloc);
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @example With manual dependencies
|
|
29
|
+
* ```ts
|
|
30
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
31
|
+
* dependencies: (state) => [state.count]
|
|
32
|
+
* });
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example With isolated instance
|
|
36
|
+
* ```ts
|
|
37
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
38
|
+
* instanceId: 'unique-id'
|
|
39
|
+
* });
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example With generic bloc and explicit state type
|
|
43
|
+
* ```ts
|
|
44
|
+
* const [state, myBloc] = useBloc<MyStateType>(GenericBloc);
|
|
45
|
+
* // state is typed as MyStateType
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function useBloc<S = never, T extends new (...args: any[]) => StateContainer<any, any> = new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocOptions<InstanceType<T>>): UseBlocReturn<InstanceType<T>, S>;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* React hook that connects to a state container instance without triggering re-renders.
|
|
52
|
+
* Use this when you only need to call actions on the bloc without subscribing to state changes.
|
|
53
|
+
*
|
|
54
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
55
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
56
|
+
* @param BlocClass - The state container class to connect to
|
|
57
|
+
* @param options - Configuration options for instance management and lifecycle
|
|
58
|
+
* @returns The state container instance for calling actions
|
|
59
|
+
*
|
|
60
|
+
* @example Basic usage
|
|
61
|
+
* ```ts
|
|
62
|
+
* const myBloc = useBlocActions(MyBloc);
|
|
63
|
+
* // Call methods on the bloc without re-rendering
|
|
64
|
+
* myBloc.someMethod();
|
|
65
|
+
* ```
|
|
66
|
+
*
|
|
67
|
+
* @example With isolated instance
|
|
68
|
+
* ```ts
|
|
69
|
+
* const myBloc = useBlocActions(MyBloc, {
|
|
70
|
+
* instanceId: 'unique-id'
|
|
71
|
+
* });
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* @example With generic bloc and explicit state type
|
|
75
|
+
* ```ts
|
|
76
|
+
* const myBloc = useBlocActions<MyStateType>(GenericBloc);
|
|
77
|
+
* // myBloc.state is typed as MyStateType
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
export declare function useBlocActions<S = never, T extends new (...args: any[]) => StateContainer<any, any> = new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocActionsOptions<InstanceType<T>>): StateOverride<InstanceType<T>, S>;
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Configuration options for useBlocActions hook
|
|
84
|
+
* @template TBloc - The state container type
|
|
85
|
+
* @template TProps - Props type passed to the container
|
|
86
|
+
*/
|
|
87
|
+
export declare interface UseBlocActionsOptions<TBloc, TProps = any> {
|
|
88
|
+
/** Props passed to bloc constructor or updateProps */
|
|
89
|
+
props?: TProps;
|
|
90
|
+
/** Custom instance identifier for shared or isolated instances */
|
|
91
|
+
instanceId?: string | number;
|
|
92
|
+
/** Callback invoked when bloc instance mounts */
|
|
93
|
+
onMount?: (bloc: TBloc) => void;
|
|
94
|
+
/** Callback invoked when bloc instance unmounts */
|
|
95
|
+
onUnmount?: (bloc: TBloc) => void;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Configuration options for useBloc hook
|
|
100
|
+
* @template TBloc - The state container type
|
|
101
|
+
* @template TProps - Props type passed to the container
|
|
102
|
+
*/
|
|
103
|
+
export declare interface UseBlocOptions<TBloc, TProps = any> {
|
|
104
|
+
/** Props passed to bloc constructor or updateProps */
|
|
105
|
+
props?: TProps;
|
|
106
|
+
/** Custom instance identifier for shared or isolated instances */
|
|
107
|
+
instanceId?: string | number;
|
|
108
|
+
/** Manual dependency array like useEffect (disables autoTrack) */
|
|
109
|
+
dependencies?: (state: ExtractState<TBloc>, bloc: TBloc) => unknown[];
|
|
110
|
+
/** Enable automatic property tracking via Proxy (default: true) */
|
|
111
|
+
autoTrack?: boolean;
|
|
112
|
+
/** Disable caching for getter tracking */
|
|
113
|
+
disableGetterCache?: boolean;
|
|
114
|
+
/** Callback invoked when bloc instance mounts */
|
|
115
|
+
onMount?: (bloc: TBloc) => void;
|
|
116
|
+
/** Callback invoked when bloc instance unmounts */
|
|
117
|
+
onUnmount?: (bloc: TBloc) => void;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Tuple return type from useBloc hook containing state, bloc instance, and ref
|
|
122
|
+
* - [0] Current state value (with optional state type override)
|
|
123
|
+
* - [1] State container instance (bloc) for calling actions
|
|
124
|
+
* - [2] Ref object for accessing component ref (advanced use cases)
|
|
125
|
+
*
|
|
126
|
+
* @template TBloc - The state container type
|
|
127
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
128
|
+
*/
|
|
129
|
+
export declare type UseBlocReturn<TBloc extends StateContainer<any, any>, S = never> = [
|
|
130
|
+
[
|
|
131
|
+
S
|
|
132
|
+
] extends [never] ? ExtractState<TBloc> : S,
|
|
133
|
+
StateOverride<TBloc, S>,
|
|
134
|
+
RefObject<ComponentRef>
|
|
135
|
+
];
|
|
136
|
+
|
|
137
|
+
export { }
|
package/dist/index.js
CHANGED
|
@@ -34,9 +34,47 @@ function determineTrackingMode(options) {
|
|
|
34
34
|
autoTrackEnabled: options?.autoTrack !== false
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
|
+
/**
|
|
38
|
+
* React hook that connects a component to a state container with automatic re-render on state changes.
|
|
39
|
+
*
|
|
40
|
+
* Supports three tracking modes:
|
|
41
|
+
* - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy
|
|
42
|
+
* - **Manual dependencies**: Explicit dependency array like useEffect
|
|
43
|
+
* - **No tracking**: Returns full state without optimization
|
|
44
|
+
*
|
|
45
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
46
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
47
|
+
* @param BlocClass - The state container class to connect to
|
|
48
|
+
* @param options - Configuration options for tracking mode and instance management
|
|
49
|
+
* @returns Tuple with [state, bloc instance, ref]
|
|
50
|
+
*
|
|
51
|
+
* @example Basic usage
|
|
52
|
+
* ```ts
|
|
53
|
+
* const [state, myBloc, ref] = useBloc(MyBloc);
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example With manual dependencies
|
|
57
|
+
* ```ts
|
|
58
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
59
|
+
* dependencies: (state) => [state.count]
|
|
60
|
+
* });
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @example With isolated instance
|
|
64
|
+
* ```ts
|
|
65
|
+
* const [state, myBloc] = useBloc(MyBloc, {
|
|
66
|
+
* instanceId: 'unique-id'
|
|
67
|
+
* });
|
|
68
|
+
* ```
|
|
69
|
+
*
|
|
70
|
+
* @example With generic bloc and explicit state type
|
|
71
|
+
* ```ts
|
|
72
|
+
* const [state, myBloc] = useBloc<MyStateType>(GenericBloc);
|
|
73
|
+
* // state is typed as MyStateType
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
37
76
|
function useBloc(BlocClass, options) {
|
|
38
77
|
const componentRef = useRef({});
|
|
39
|
-
const Constructor = BlocClass;
|
|
40
78
|
const isIsolated = isIsolatedClass(BlocClass);
|
|
41
79
|
const initialPropsRef = useRef(options?.props);
|
|
42
80
|
const [bloc, subscribe, getSnapshot, instanceKey, adapterState, rawInstance] = useMemo(() => {
|
|
@@ -84,7 +122,7 @@ function useBloc(BlocClass, options) {
|
|
|
84
122
|
return () => {
|
|
85
123
|
externalDepsManager.current.cleanup();
|
|
86
124
|
if (options?.onUnmount) options.onUnmount(bloc);
|
|
87
|
-
|
|
125
|
+
BlocClass.release(instanceKey);
|
|
88
126
|
if (isIsolated && !rawInstance.isDisposed) rawInstance.dispose();
|
|
89
127
|
};
|
|
90
128
|
}, []);
|
|
@@ -97,14 +135,43 @@ function useBloc(BlocClass, options) {
|
|
|
97
135
|
|
|
98
136
|
//#endregion
|
|
99
137
|
//#region src/useBlocActions.ts
|
|
138
|
+
/**
|
|
139
|
+
* React hook that connects to a state container instance without triggering re-renders.
|
|
140
|
+
* Use this when you only need to call actions on the bloc without subscribing to state changes.
|
|
141
|
+
*
|
|
142
|
+
* @template S - Optional state type override for generic StateContainers (defaults to never)
|
|
143
|
+
* @template T - The state container constructor type (inferred from BlocClass)
|
|
144
|
+
* @param BlocClass - The state container class to connect to
|
|
145
|
+
* @param options - Configuration options for instance management and lifecycle
|
|
146
|
+
* @returns The state container instance for calling actions
|
|
147
|
+
*
|
|
148
|
+
* @example Basic usage
|
|
149
|
+
* ```ts
|
|
150
|
+
* const myBloc = useBlocActions(MyBloc);
|
|
151
|
+
* // Call methods on the bloc without re-rendering
|
|
152
|
+
* myBloc.someMethod();
|
|
153
|
+
* ```
|
|
154
|
+
*
|
|
155
|
+
* @example With isolated instance
|
|
156
|
+
* ```ts
|
|
157
|
+
* const myBloc = useBlocActions(MyBloc, {
|
|
158
|
+
* instanceId: 'unique-id'
|
|
159
|
+
* });
|
|
160
|
+
* ```
|
|
161
|
+
*
|
|
162
|
+
* @example With generic bloc and explicit state type
|
|
163
|
+
* ```ts
|
|
164
|
+
* const myBloc = useBlocActions<MyStateType>(GenericBloc);
|
|
165
|
+
* // myBloc.state is typed as MyStateType
|
|
166
|
+
* ```
|
|
167
|
+
*/
|
|
100
168
|
function useBlocActions(BlocClass, options) {
|
|
101
169
|
const componentRef = useRef({});
|
|
102
170
|
const initialPropsRef = useRef(options?.props);
|
|
103
171
|
const [bloc, instanceKey] = useMemo(() => {
|
|
104
172
|
const isIsolated = isIsolatedClass(BlocClass);
|
|
105
|
-
const Constructor = BlocClass;
|
|
106
173
|
const instanceKey$1 = generateInstanceKey(componentRef.current, isIsolated, options?.instanceId);
|
|
107
|
-
return [
|
|
174
|
+
return [BlocClass.resolve(instanceKey$1, initialPropsRef.current), instanceKey$1];
|
|
108
175
|
}, [BlocClass]);
|
|
109
176
|
useEffect(() => {
|
|
110
177
|
if (options?.onMount) options.onMount(bloc);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["instanceKey","subscribeFn: (callback: () => void) => () => void","getSnapshotFn: () => ExtractState<TBloc>","adapterState: AdapterState<TBloc>","adapterState","instanceKey"],"sources":["../src/utils/instance-keys.ts","../src/useBloc.ts","../src/useBlocActions.ts"],"sourcesContent":["/**\n * Instance key generation utilities for React integration\n */\n\nimport { generateIsolatedKey } from '@blac/core';\nimport type { ComponentRef } from '../types';\n\n/**\n * Generate an instance key for a bloc\n *\n * Logic:\n * - If user provides instanceId, use it (convert number to string)\n * - If isolated, generate or reuse a unique key for this component\n * - Otherwise, return undefined (use default key)\n *\n * @param componentRef - React component reference (persists across remounts)\n * @param isIsolated - Whether the bloc is isolated\n * @param providedId - User-provided instance ID (from options)\n * @returns Instance key string or undefined for default\n */\nexport function generateInstanceKey(\n componentRef: ComponentRef,\n isIsolated: boolean,\n providedId?: string | number,\n): string | undefined {\n // User explicitly provided an ID - use it\n if (providedId !== undefined) {\n return typeof providedId === 'number' ? String(providedId) : providedId;\n }\n\n // Isolated bloc - generate unique key per component\n if (isIsolated) {\n if (!componentRef.__blocInstanceId) {\n componentRef.__blocInstanceId = generateIsolatedKey();\n }\n return componentRef.__blocInstanceId;\n }\n\n // Shared bloc - use default key (undefined)\n return undefined;\n}\n","import {\n useMemo,\n useSyncExternalStore,\n useEffect,\n useRef,\n useReducer,\n} from 'react';\nimport {\n type BlocConstructor,\n StateContainer,\n type ExtractState,\n type AdapterState,\n ExternalDependencyManager,\n createAutoTrackSubscribe,\n createManualDepsSubscribe,\n createNoTrackSubscribe,\n createAutoTrackSnapshot,\n createManualDepsSnapshot,\n createNoTrackSnapshot,\n initAutoTrackState,\n initManualDepsState,\n initNoTrackState,\n disableGetterTracking,\n isIsolatedClass,\n} from '@blac/core';\nimport type { UseBlocOptions, UseBlocReturn, ComponentRef } from './types';\nimport { generateInstanceKey } from './utils/instance-keys';\n\ninterface TrackingMode {\n useManualDeps: boolean;\n autoTrackEnabled: boolean;\n}\n\nfunction determineTrackingMode<TBloc extends StateContainer<any, any>>(\n options?: UseBlocOptions<TBloc>,\n): TrackingMode {\n return {\n useManualDeps: options?.dependencies !== undefined,\n autoTrackEnabled: options?.autoTrack !== false,\n };\n}\n\n/**\n * React hook that connects a component to a state container with automatic re-render on state changes.\n *\n * Supports three tracking modes:\n * - **Auto-tracking** (default): Automatically detects accessed state properties via Proxy\n * - **Manual dependencies**: Explicit dependency array like useEffect\n * - **No tracking**: Returns full state without optimization\n *\n * @template S - Optional state type override for generic StateContainers (defaults to never)\n * @template T - The state container constructor type (inferred from BlocClass)\n * @param BlocClass - The state container class to connect to\n * @param options - Configuration options for tracking mode and instance management\n * @returns Tuple with [state, bloc instance, ref]\n *\n * @example Basic usage\n * ```ts\n * const [state, myBloc, ref] = useBloc(MyBloc);\n * ```\n *\n * @example With manual dependencies\n * ```ts\n * const [state, myBloc] = useBloc(MyBloc, {\n * dependencies: (state) => [state.count]\n * });\n * ```\n *\n * @example With isolated instance\n * ```ts\n * const [state, myBloc] = useBloc(MyBloc, {\n * instanceId: 'unique-id'\n * });\n * ```\n *\n * @example With generic bloc and explicit state type\n * ```ts\n * const [state, myBloc] = useBloc<MyStateType>(GenericBloc);\n * // state is typed as MyStateType\n * ```\n */\nexport function useBloc<\n S = never,\n T extends new (...args: any[]) => StateContainer<any, any> = new (\n ...args: any[]\n ) => StateContainer<any, any>,\n>(\n BlocClass: T & BlocConstructor<InstanceType<T>>,\n options?: UseBlocOptions<InstanceType<T>>,\n): UseBlocReturn<InstanceType<T>, S> {\n type TBloc = InstanceType<T>;\n const componentRef = useRef<ComponentRef>({});\n const isIsolated = isIsolatedClass(BlocClass);\n\n const initialPropsRef = useRef(options?.props);\n\n const [bloc, subscribe, getSnapshot, instanceKey, adapterState, rawInstance] =\n useMemo<\n readonly [\n TBloc,\n (callback: () => void) => () => void,\n () => ExtractState<TBloc>,\n string | undefined,\n AdapterState<TBloc>,\n TBloc,\n ]\n >(() => {\n const instanceKey = generateInstanceKey(\n componentRef.current,\n isIsolated,\n options?.instanceId,\n );\n\n const instance = BlocClass.resolve(instanceKey, initialPropsRef.current);\n\n if (initialPropsRef.current !== undefined) {\n instance.updateProps(initialPropsRef.current);\n }\n\n const { useManualDeps, autoTrackEnabled } =\n determineTrackingMode(options);\n\n let subscribeFn: (callback: () => void) => () => void;\n let getSnapshotFn: () => ExtractState<TBloc>;\n let adapterState: AdapterState<TBloc>;\n\n if (useManualDeps && options?.dependencies) {\n adapterState = initManualDepsState(instance);\n subscribeFn = createManualDepsSubscribe(instance, adapterState, {\n dependencies: options.dependencies,\n });\n getSnapshotFn = createManualDepsSnapshot(instance, adapterState, {\n dependencies: options.dependencies,\n });\n } else if (!autoTrackEnabled) {\n adapterState = initNoTrackState(instance);\n subscribeFn = createNoTrackSubscribe(instance);\n getSnapshotFn = createNoTrackSnapshot(instance);\n } else {\n adapterState = initAutoTrackState(instance);\n subscribeFn = createAutoTrackSubscribe(instance, adapterState);\n getSnapshotFn = createAutoTrackSnapshot(instance, adapterState);\n }\n\n return [\n adapterState.proxiedBloc!,\n subscribeFn,\n getSnapshotFn,\n instanceKey,\n adapterState,\n instance,\n ];\n }, [BlocClass, options?.instanceId]);\n\n const state = useSyncExternalStore(subscribe, getSnapshot);\n\n const [, forceUpdate] = useReducer((x: number) => x + 1, 0);\n\n const externalDepsManager = useRef(new ExternalDependencyManager());\n\n useEffect(() => {\n if (options?.props !== initialPropsRef.current) {\n rawInstance.updateProps(options?.props);\n }\n }, [options?.props, rawInstance]);\n\n useEffect(() => {\n disableGetterTracking(adapterState, rawInstance);\n externalDepsManager.current.updateSubscriptions(\n adapterState.getterTracker,\n rawInstance,\n forceUpdate,\n );\n });\n\n useEffect(() => {\n if (options?.onMount) {\n options.onMount(bloc);\n }\n\n return () => {\n externalDepsManager.current.cleanup();\n\n if (options?.onUnmount) {\n options.onUnmount(bloc);\n }\n\n BlocClass.release(instanceKey);\n\n if (isIsolated && !rawInstance.isDisposed) {\n rawInstance.dispose();\n }\n };\n }, []);\n\n return [state, bloc, componentRef] as UseBlocReturn<TBloc, S>;\n}\n","import { useMemo, useEffect, useRef } from 'react';\nimport {\n type BlocConstructor,\n type StateOverride,\n StateContainer,\n isIsolatedClass,\n} from '@blac/core';\nimport type { ComponentRef } from './types';\nimport { generateInstanceKey } from './utils/instance-keys';\n\n/**\n * Configuration options for useBlocActions hook\n * @template TBloc - The state container type\n * @template TProps - Props type passed to the container\n */\nexport interface UseBlocActionsOptions<TBloc, TProps = any> {\n /** Props passed to bloc constructor or updateProps */\n props?: TProps;\n /** Custom instance identifier for shared or isolated instances */\n instanceId?: string | number;\n /** Callback invoked when bloc instance mounts */\n onMount?: (bloc: TBloc) => void;\n /** Callback invoked when bloc instance unmounts */\n onUnmount?: (bloc: TBloc) => void;\n}\n\n/**\n * React hook that connects to a state container instance without triggering re-renders.\n * Use this when you only need to call actions on the bloc without subscribing to state changes.\n *\n * @template S - Optional state type override for generic StateContainers (defaults to never)\n * @template T - The state container constructor type (inferred from BlocClass)\n * @param BlocClass - The state container class to connect to\n * @param options - Configuration options for instance management and lifecycle\n * @returns The state container instance for calling actions\n *\n * @example Basic usage\n * ```ts\n * const myBloc = useBlocActions(MyBloc);\n * // Call methods on the bloc without re-rendering\n * myBloc.someMethod();\n * ```\n *\n * @example With isolated instance\n * ```ts\n * const myBloc = useBlocActions(MyBloc, {\n * instanceId: 'unique-id'\n * });\n * ```\n *\n * @example With generic bloc and explicit state type\n * ```ts\n * const myBloc = useBlocActions<MyStateType>(GenericBloc);\n * // myBloc.state is typed as MyStateType\n * ```\n */\nexport function useBlocActions<\n S = never,\n T extends new (...args: any[]) => StateContainer<any, any> = new (\n ...args: any[]\n ) => StateContainer<any, any>,\n>(\n BlocClass: T & BlocConstructor<InstanceType<T>>,\n options?: UseBlocActionsOptions<InstanceType<T>>,\n): StateOverride<InstanceType<T>, S> {\n const componentRef = useRef<ComponentRef>({});\n const initialPropsRef = useRef(options?.props);\n\n const [bloc, instanceKey] = useMemo(() => {\n const isIsolated = isIsolatedClass(BlocClass);\n\n const instanceKey = generateInstanceKey(\n componentRef.current,\n isIsolated,\n options?.instanceId,\n );\n\n const instance = BlocClass.resolve(instanceKey, initialPropsRef.current);\n\n return [instance, instanceKey] as const;\n }, [BlocClass]);\n\n useEffect(() => {\n if (options?.onMount) {\n options.onMount(bloc);\n }\n\n return () => {\n if (options?.onUnmount) {\n options.onUnmount(bloc);\n }\n\n BlocClass.release(instanceKey);\n\n if (isIsolatedClass(BlocClass) && !bloc.isDisposed) {\n bloc.dispose();\n }\n };\n }, []);\n\n return bloc as StateOverride<InstanceType<T>, S>;\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blac/react",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Brendan Mullins <jsnanigans@gmail.com>",
|
|
6
6
|
"repository": {
|
|
@@ -28,10 +28,11 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"files": [
|
|
31
|
-
"dist
|
|
32
|
-
"dist
|
|
33
|
-
"dist
|
|
34
|
-
"dist
|
|
31
|
+
"dist/index.js",
|
|
32
|
+
"dist/index.cjs",
|
|
33
|
+
"dist/index.d.ts",
|
|
34
|
+
"dist/index.d.cts",
|
|
35
|
+
"dist/*.map",
|
|
35
36
|
"README.md",
|
|
36
37
|
"LICENSE"
|
|
37
38
|
],
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
"peerDependencies": {
|
|
49
50
|
"@types/react": "^18.0.0 || ^19.0.0",
|
|
50
51
|
"react": "^18.0.0 || ^19.0.0",
|
|
51
|
-
"@blac/core": "2.0.0-rc.
|
|
52
|
+
"@blac/core": "2.0.0-rc.13"
|
|
52
53
|
},
|
|
53
54
|
"peerDependenciesMeta": {
|
|
54
55
|
"@types/react": {
|
|
@@ -77,11 +78,14 @@
|
|
|
77
78
|
"tsdown": "^0.15.7",
|
|
78
79
|
"typescript": "^5.9.2",
|
|
79
80
|
"vitest": "3.2.4",
|
|
80
|
-
"@blac/core": "2.0.0-rc.
|
|
81
|
+
"@blac/core": "2.0.0-rc.13"
|
|
81
82
|
},
|
|
82
83
|
"scripts": {
|
|
83
84
|
"dev": "tsdown --watch",
|
|
84
|
-
"build": "
|
|
85
|
+
"build": "pnpm build:js && pnpm build:types && pnpm build:dts",
|
|
86
|
+
"build:js": "tsdown",
|
|
87
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
88
|
+
"build:dts": "api-extractor run --local && cp dist/index.d.ts dist/index.d.cts && rm -rf dist/.types",
|
|
85
89
|
"clean": "rm -rf dist",
|
|
86
90
|
"format": "prettier --write \".\"",
|
|
87
91
|
"lint": "eslint src --ext .ts,.tsx",
|
package/dist/types.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { ExtractState } from '@blac/core';
|
|
2
|
-
import type { RefObject } from 'react';
|
|
3
|
-
export interface UseBlocOptions<TBloc, TProps = any> {
|
|
4
|
-
props?: TProps;
|
|
5
|
-
instanceId?: string | number;
|
|
6
|
-
dependencies?: (state: ExtractState<TBloc>, bloc: TBloc) => unknown[];
|
|
7
|
-
autoTrack?: boolean;
|
|
8
|
-
disableGetterCache?: boolean;
|
|
9
|
-
onMount?: (bloc: TBloc) => void;
|
|
10
|
-
onUnmount?: (bloc: TBloc) => void;
|
|
11
|
-
}
|
|
12
|
-
export interface UseBlocOptionsWithDependencies<TBloc, TProps = any> extends UseBlocOptions<TBloc, TProps> {
|
|
13
|
-
dependencies: (state: ExtractState<TBloc>, bloc: TBloc) => unknown[];
|
|
14
|
-
autoTrack?: never;
|
|
15
|
-
}
|
|
16
|
-
export type UseBlocReturn<TBloc> = [
|
|
17
|
-
ExtractState<TBloc>,
|
|
18
|
-
TBloc,
|
|
19
|
-
RefObject<ComponentRef>
|
|
20
|
-
];
|
|
21
|
-
export type ComponentRef = {
|
|
22
|
-
__blocInstanceId?: string;
|
|
23
|
-
__bridge?: any;
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/useBloc.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { type BlocConstructor, StateContainer } from '@blac/core';
|
|
2
|
-
import type { UseBlocOptions, UseBlocReturn } from './types';
|
|
3
|
-
export declare function useBloc<T extends new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocOptions<InstanceType<T>>): UseBlocReturn<InstanceType<T>>;
|
|
4
|
-
//# sourceMappingURL=useBloc.d.ts.map
|
package/dist/useBlocActions.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type BlocConstructor, StateContainer } from '@blac/core';
|
|
2
|
-
export interface UseBlocActionsOptions<TBloc, TProps = any> {
|
|
3
|
-
props?: TProps;
|
|
4
|
-
instanceId?: string | number;
|
|
5
|
-
onMount?: (bloc: TBloc) => void;
|
|
6
|
-
onUnmount?: (bloc: TBloc) => void;
|
|
7
|
-
}
|
|
8
|
-
export declare function useBlocActions<T extends new (...args: any[]) => StateContainer<any, any>>(BlocClass: T & BlocConstructor<InstanceType<T>>, options?: UseBlocActionsOptions<InstanceType<T>>): InstanceType<T>;
|
|
9
|
-
//# sourceMappingURL=useBlocActions.d.ts.map
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Instance key generation utilities for React integration
|
|
3
|
-
*/
|
|
4
|
-
import type { ComponentRef } from '../types';
|
|
5
|
-
/**
|
|
6
|
-
* Generate an instance key for a bloc
|
|
7
|
-
*
|
|
8
|
-
* Logic:
|
|
9
|
-
* - If user provides instanceId, use it (convert number to string)
|
|
10
|
-
* - If isolated, generate or reuse a unique key for this component
|
|
11
|
-
* - Otherwise, return undefined (use default key)
|
|
12
|
-
*
|
|
13
|
-
* @param componentRef - React component reference (persists across remounts)
|
|
14
|
-
* @param isIsolated - Whether the bloc is isolated
|
|
15
|
-
* @param providedId - User-provided instance ID (from options)
|
|
16
|
-
* @returns Instance key string or undefined for default
|
|
17
|
-
*/
|
|
18
|
-
export declare function generateInstanceKey(componentRef: ComponentRef, isIsolated: boolean, providedId?: string | number): string | undefined;
|
|
19
|
-
//# sourceMappingURL=instance-keys.d.ts.map
|