@blac/react 2.0.0-rc.6 → 2.0.0-rc.9
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 +48 -312
- package/dist/index.d.cts +9 -151
- package/dist/index.d.ts +8 -150
- package/dist/index.js +48 -287
- package/dist/types.d.ts +25 -0
- package/dist/useBloc.d.ts +21 -0
- package/dist/useBlocActions.d.ts +9 -0
- package/dist/utils/instance-keys.d.ts +19 -0
- package/package.json +19 -7
- package/dist/.tsbuildinfo +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,197 +1,33 @@
|
|
|
1
|
-
//#region rolldown:runtime
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
-
key = keys[i];
|
|
11
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
-
get: ((k) => from[k]).bind(null, key),
|
|
13
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
-
value: mod,
|
|
20
|
-
enumerable: true
|
|
21
|
-
}) : target, mod));
|
|
22
|
-
|
|
23
|
-
//#endregion
|
|
24
1
|
let react = require("react");
|
|
25
|
-
react = __toESM(react);
|
|
26
2
|
let __blac_core = require("@blac/core");
|
|
27
|
-
__blac_core = __toESM(__blac_core);
|
|
28
3
|
|
|
29
|
-
//#region src/
|
|
30
|
-
/**
|
|
31
|
-
* Cache for property descriptors to avoid repeated prototype chain walks
|
|
32
|
-
* Maps from object constructor to a map of property name to descriptor
|
|
33
|
-
*/
|
|
34
|
-
const descriptorCache = /* @__PURE__ */ new WeakMap();
|
|
35
|
-
/**
|
|
36
|
-
* Cache for proxied blocs to ensure same proxy is returned for same bloc instance
|
|
37
|
-
* This is important for identity checks (e.g., bloc1 === bloc2) across components
|
|
38
|
-
* using the same shared bloc instance.
|
|
39
|
-
*/
|
|
40
|
-
const blocProxyCache = /* @__PURE__ */ new WeakMap();
|
|
41
|
-
/**
|
|
42
|
-
* Map to store the currently active tracker during render.
|
|
43
|
-
* This allows the cached proxy to know which component's tracker to use.
|
|
44
|
-
* Set before render, cleared after render.
|
|
45
|
-
*/
|
|
46
|
-
const activeTrackerMap = /* @__PURE__ */ new WeakMap();
|
|
47
|
-
/**
|
|
48
|
-
* Get property descriptor for a given property, with caching
|
|
49
|
-
*
|
|
50
|
-
* @remarks
|
|
51
|
-
* Walks up the prototype chain once per class to find the descriptor,
|
|
52
|
-
* then caches the result for performance. This is critical because
|
|
53
|
-
* we need to distinguish getters from methods and properties.
|
|
54
|
-
*
|
|
55
|
-
* @param obj - The object to get the descriptor from
|
|
56
|
-
* @param prop - The property name or symbol
|
|
57
|
-
* @returns The property descriptor if found, undefined otherwise
|
|
58
|
-
*/
|
|
59
|
-
function getDescriptor(obj, prop) {
|
|
60
|
-
const constructor = obj.constructor;
|
|
61
|
-
let constructorCache = descriptorCache.get(constructor);
|
|
62
|
-
if (constructorCache?.has(prop)) return constructorCache.get(prop);
|
|
63
|
-
let current = obj;
|
|
64
|
-
let descriptor;
|
|
65
|
-
while (current && current !== Object.prototype) {
|
|
66
|
-
descriptor = Object.getOwnPropertyDescriptor(current, prop);
|
|
67
|
-
if (descriptor) break;
|
|
68
|
-
current = Object.getPrototypeOf(current);
|
|
69
|
-
}
|
|
70
|
-
if (!constructorCache) {
|
|
71
|
-
constructorCache = /* @__PURE__ */ new Map();
|
|
72
|
-
descriptorCache.set(constructor, constructorCache);
|
|
73
|
-
}
|
|
74
|
-
constructorCache.set(prop, descriptor);
|
|
75
|
-
return descriptor;
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Check if a property is a getter (has a getter descriptor)
|
|
79
|
-
*
|
|
80
|
-
* @param obj - The object to check
|
|
81
|
-
* @param prop - The property name or symbol
|
|
82
|
-
* @returns True if the property is a getter, false otherwise
|
|
83
|
-
*/
|
|
84
|
-
function isGetter(obj, prop) {
|
|
85
|
-
return getDescriptor(obj, prop)?.get !== void 0;
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Create a new getter tracking state
|
|
89
|
-
*
|
|
90
|
-
* @returns A new GetterTrackingState initialized with empty collections
|
|
91
|
-
*/
|
|
92
|
-
function createGetterTracker() {
|
|
93
|
-
return {
|
|
94
|
-
trackedValues: /* @__PURE__ */ new Map(),
|
|
95
|
-
currentlyAccessing: /* @__PURE__ */ new Set(),
|
|
96
|
-
trackedGetters: /* @__PURE__ */ new Set(),
|
|
97
|
-
isTracking: false,
|
|
98
|
-
renderCache: /* @__PURE__ */ new Map(),
|
|
99
|
-
cacheValid: false
|
|
100
|
-
};
|
|
101
|
-
}
|
|
4
|
+
//#region src/utils/instance-keys.ts
|
|
102
5
|
/**
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
* @remarks
|
|
106
|
-
* This proxy wraps the bloc instance to track which getters are accessed
|
|
107
|
-
* during component render. When tracking is enabled (during render phase),
|
|
108
|
-
* it records accessed getters and stores their computed values for later
|
|
109
|
-
* comparison.
|
|
110
|
-
*
|
|
111
|
-
* IMPORTANT: This function caches proxies per bloc instance. Multiple components
|
|
112
|
-
* sharing the same bloc will get the same proxy instance. Each component sets
|
|
113
|
-
* its tracker in activeTrackerMap before render, and the proxy looks it up.
|
|
114
|
-
*
|
|
115
|
-
* @param bloc - The bloc instance to wrap
|
|
116
|
-
* @returns A proxied bloc that tracks getter access
|
|
6
|
+
* Instance key generation utilities for React integration
|
|
117
7
|
*/
|
|
118
|
-
function createBlocProxy(bloc) {
|
|
119
|
-
const cached = blocProxyCache.get(bloc);
|
|
120
|
-
if (cached) return cached;
|
|
121
|
-
const proxy = new Proxy(bloc, { get(target, prop, receiver) {
|
|
122
|
-
const tracker = activeTrackerMap.get(target);
|
|
123
|
-
if (tracker?.isTracking && isGetter(target, prop)) {
|
|
124
|
-
tracker.currentlyAccessing.add(prop);
|
|
125
|
-
if (tracker.cacheValid && tracker.renderCache.has(prop)) {
|
|
126
|
-
const cachedValue = tracker.renderCache.get(prop);
|
|
127
|
-
tracker.trackedValues.set(prop, cachedValue);
|
|
128
|
-
return cachedValue;
|
|
129
|
-
}
|
|
130
|
-
const value = getDescriptor(target, prop).get.call(target);
|
|
131
|
-
tracker.trackedValues.set(prop, value);
|
|
132
|
-
return value;
|
|
133
|
-
}
|
|
134
|
-
return Reflect.get(target, prop, receiver);
|
|
135
|
-
} });
|
|
136
|
-
blocProxyCache.set(bloc, proxy);
|
|
137
|
-
return proxy;
|
|
138
|
-
}
|
|
139
8
|
/**
|
|
140
|
-
*
|
|
141
|
-
*
|
|
142
|
-
* @remarks
|
|
143
|
-
* Re-computes all getters that were accessed during the last render and
|
|
144
|
-
* compares their new values with stored values using Object.is() (reference
|
|
145
|
-
* equality).
|
|
9
|
+
* Generate an instance key for a bloc
|
|
146
10
|
*
|
|
147
|
-
*
|
|
148
|
-
* -
|
|
149
|
-
* -
|
|
150
|
-
* -
|
|
151
|
-
* - Cache is populated even if no changes detected (useful for parent-triggered re-renders)
|
|
152
|
-
* - Trade-off: Give up early exit to ensure full cache population
|
|
11
|
+
* Logic:
|
|
12
|
+
* - If user provides instanceId, use it (convert number to string)
|
|
13
|
+
* - If isolated, generate or reuse a unique key for this component
|
|
14
|
+
* - Otherwise, return undefined (use default key)
|
|
153
15
|
*
|
|
154
|
-
*
|
|
155
|
-
*
|
|
156
|
-
*
|
|
157
|
-
*
|
|
158
|
-
*
|
|
159
|
-
* @param bloc - The bloc instance
|
|
160
|
-
* @param tracker - The getter tracking state
|
|
161
|
-
* @returns True if any tracked getter value changed, false otherwise
|
|
162
|
-
*/
|
|
163
|
-
function hasGetterChanges(bloc, tracker) {
|
|
164
|
-
if (!tracker || tracker.trackedGetters.size === 0) return false;
|
|
165
|
-
tracker.renderCache.clear();
|
|
166
|
-
let hasAnyChange = false;
|
|
167
|
-
for (const prop of tracker.trackedGetters) try {
|
|
168
|
-
const descriptor = getDescriptor(bloc, prop);
|
|
169
|
-
if (!descriptor?.get) continue;
|
|
170
|
-
const newValue = descriptor.get.call(bloc);
|
|
171
|
-
const oldValue = tracker.trackedValues.get(prop);
|
|
172
|
-
tracker.renderCache.set(prop, newValue);
|
|
173
|
-
tracker.trackedValues.set(prop, newValue);
|
|
174
|
-
if (!Object.is(newValue, oldValue)) hasAnyChange = true;
|
|
175
|
-
} catch (error) {
|
|
176
|
-
console.warn(`[useBloc] Getter "${String(prop)}" threw error during change detection. Stopping tracking for this getter.`, error);
|
|
177
|
-
tracker.trackedGetters.delete(prop);
|
|
178
|
-
tracker.trackedValues.delete(prop);
|
|
179
|
-
tracker.cacheValid = false;
|
|
180
|
-
return true;
|
|
181
|
-
}
|
|
182
|
-
tracker.cacheValid = true;
|
|
183
|
-
return hasAnyChange;
|
|
184
|
-
}
|
|
185
|
-
/**
|
|
186
|
-
* Generates instance ID for isolated blocs
|
|
16
|
+
* @param componentRef - React component reference (persists across remounts)
|
|
17
|
+
* @param isIsolated - Whether the bloc is isolated
|
|
18
|
+
* @param providedId - User-provided instance ID (from options)
|
|
19
|
+
* @returns Instance key string or undefined for default
|
|
187
20
|
*/
|
|
188
|
-
function
|
|
189
|
-
if (providedId) return providedId;
|
|
21
|
+
function generateInstanceKey(componentRef, isIsolated, providedId) {
|
|
22
|
+
if (providedId !== void 0) return typeof providedId === "number" ? String(providedId) : providedId;
|
|
190
23
|
if (isIsolated) {
|
|
191
|
-
if (!componentRef.__blocInstanceId) componentRef.__blocInstanceId =
|
|
24
|
+
if (!componentRef.__blocInstanceId) componentRef.__blocInstanceId = (0, __blac_core.generateIsolatedKey)();
|
|
192
25
|
return componentRef.__blocInstanceId;
|
|
193
26
|
}
|
|
194
27
|
}
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/useBloc.ts
|
|
195
31
|
function determineTrackingMode(options) {
|
|
196
32
|
return {
|
|
197
33
|
useManualDeps: options?.dependencies !== void 0,
|
|
@@ -199,75 +35,6 @@ function determineTrackingMode(options) {
|
|
|
199
35
|
};
|
|
200
36
|
}
|
|
201
37
|
/**
|
|
202
|
-
* Factory: Creates subscribe function for automatic proxy tracking mode
|
|
203
|
-
*/
|
|
204
|
-
function createAutoTrackSubscribe(instance, hookState) {
|
|
205
|
-
return (callback) => {
|
|
206
|
-
return instance.subscribe(() => {
|
|
207
|
-
const tracker = hookState.tracker || (hookState.tracker = (0, __blac_core.createTrackerState)());
|
|
208
|
-
let stateChanged = (0, __blac_core.hasChanges)(tracker, instance.state);
|
|
209
|
-
if (tracker.pathCache.size === 0 && hookState.getterTracker && hookState.getterTracker.trackedGetters.size > 0) stateChanged = false;
|
|
210
|
-
if (stateChanged) {
|
|
211
|
-
callback();
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
|
-
if (hasGetterChanges(instance, hookState.getterTracker)) callback();
|
|
215
|
-
});
|
|
216
|
-
};
|
|
217
|
-
}
|
|
218
|
-
/**
|
|
219
|
-
* Factory: Creates subscribe function for manual dependencies mode
|
|
220
|
-
*/
|
|
221
|
-
function createManualDepsSubscribe(instance, hookState, options) {
|
|
222
|
-
return (callback) => {
|
|
223
|
-
return instance.subscribe(() => {
|
|
224
|
-
const newDeps = options.dependencies(instance.state, instance);
|
|
225
|
-
if (!hookState.manualDepsCache || !(0, __blac_core.shallowEqual)(hookState.manualDepsCache, newDeps)) {
|
|
226
|
-
hookState.manualDepsCache = newDeps;
|
|
227
|
-
callback();
|
|
228
|
-
}
|
|
229
|
-
});
|
|
230
|
-
};
|
|
231
|
-
}
|
|
232
|
-
/**
|
|
233
|
-
* Factory: Creates subscribe function for no-tracking mode
|
|
234
|
-
*/
|
|
235
|
-
function createNoTrackSubscribe(instance) {
|
|
236
|
-
return (callback) => instance.subscribe(callback);
|
|
237
|
-
}
|
|
238
|
-
/**
|
|
239
|
-
* Factory: Creates getSnapshot function for automatic proxy tracking mode
|
|
240
|
-
*/
|
|
241
|
-
function createAutoTrackSnapshot(instance, hookState) {
|
|
242
|
-
return () => {
|
|
243
|
-
const tracker = hookState.tracker || (hookState.tracker = (0, __blac_core.createTrackerState)());
|
|
244
|
-
if ((0, __blac_core.hasTrackedData)(tracker)) (0, __blac_core.captureTrackedPaths)(tracker, instance.state);
|
|
245
|
-
if (hookState.getterTracker) {
|
|
246
|
-
if (hookState.getterTracker.currentlyAccessing.size > 0) hookState.getterTracker.trackedGetters = new Set(hookState.getterTracker.currentlyAccessing);
|
|
247
|
-
hookState.getterTracker.currentlyAccessing.clear();
|
|
248
|
-
hookState.getterTracker.isTracking = true;
|
|
249
|
-
activeTrackerMap.set(instance, hookState.getterTracker);
|
|
250
|
-
}
|
|
251
|
-
(0, __blac_core.startTracking)(tracker);
|
|
252
|
-
return (0, __blac_core.createProxy)(tracker, instance.state);
|
|
253
|
-
};
|
|
254
|
-
}
|
|
255
|
-
/**
|
|
256
|
-
* Factory: Creates getSnapshot function for manual dependencies mode
|
|
257
|
-
*/
|
|
258
|
-
function createManualDepsSnapshot(instance, hookState, options) {
|
|
259
|
-
return () => {
|
|
260
|
-
hookState.manualDepsCache = options.dependencies(instance.state, instance);
|
|
261
|
-
return instance.state;
|
|
262
|
-
};
|
|
263
|
-
}
|
|
264
|
-
/**
|
|
265
|
-
* Factory: Creates getSnapshot function for no-tracking mode
|
|
266
|
-
*/
|
|
267
|
-
function createNoTrackSnapshot(instance) {
|
|
268
|
-
return () => instance.state;
|
|
269
|
-
}
|
|
270
|
-
/**
|
|
271
38
|
* Lifecycle: INITIAL MOUNT
|
|
272
39
|
* 1. useMemo runs once - creates bloc, subscribeFn, getSnapshotFn
|
|
273
40
|
* 2. useSyncExternalStore calls getSnapshotFn (1st time) - lazy creates tracker, starts tracking, returns proxy
|
|
@@ -286,57 +53,51 @@ function createNoTrackSnapshot(instance) {
|
|
|
286
53
|
*/
|
|
287
54
|
function useBloc(BlocClass, options) {
|
|
288
55
|
const componentRef = (0, react.useRef)({});
|
|
289
|
-
const
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
const
|
|
293
|
-
const instance =
|
|
56
|
+
const Constructor = BlocClass;
|
|
57
|
+
const isIsolated = (0, __blac_core.isIsolatedClass)(BlocClass);
|
|
58
|
+
const [bloc, subscribe, getSnapshot, instanceKey, adapterState, rawInstance] = (0, react.useMemo)(() => {
|
|
59
|
+
const instanceKey$1 = generateInstanceKey(componentRef.current, isIsolated, options?.instanceId);
|
|
60
|
+
const instance = BlocClass.resolve(instanceKey$1, options?.staticProps);
|
|
294
61
|
const { useManualDeps, autoTrackEnabled } = determineTrackingMode(options);
|
|
295
|
-
const hookState$1 = {
|
|
296
|
-
tracker: null,
|
|
297
|
-
manualDepsCache: null,
|
|
298
|
-
getterTracker: null,
|
|
299
|
-
proxiedBloc: null
|
|
300
|
-
};
|
|
301
62
|
let subscribeFn;
|
|
302
63
|
let getSnapshotFn;
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
64
|
+
let adapterState$1;
|
|
65
|
+
if (useManualDeps && options?.dependencies) {
|
|
66
|
+
adapterState$1 = (0, __blac_core.initManualDepsState)(instance);
|
|
67
|
+
subscribeFn = (0, __blac_core.createManualDepsSubscribe)(instance, adapterState$1, { dependencies: options.dependencies });
|
|
68
|
+
getSnapshotFn = (0, __blac_core.createManualDepsSnapshot)(instance, adapterState$1, { dependencies: options.dependencies });
|
|
307
69
|
} else if (!autoTrackEnabled) {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
70
|
+
adapterState$1 = (0, __blac_core.initNoTrackState)(instance);
|
|
71
|
+
subscribeFn = (0, __blac_core.createNoTrackSubscribe)(instance);
|
|
72
|
+
getSnapshotFn = (0, __blac_core.createNoTrackSnapshot)(instance);
|
|
311
73
|
} else {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
hookState$1.proxiedBloc = createBlocProxy(instance);
|
|
74
|
+
adapterState$1 = (0, __blac_core.initAutoTrackState)(instance);
|
|
75
|
+
subscribeFn = (0, __blac_core.createAutoTrackSubscribe)(instance, adapterState$1);
|
|
76
|
+
getSnapshotFn = (0, __blac_core.createAutoTrackSnapshot)(instance, adapterState$1);
|
|
316
77
|
}
|
|
317
78
|
return [
|
|
318
|
-
|
|
79
|
+
adapterState$1.proxiedBloc,
|
|
319
80
|
subscribeFn,
|
|
320
81
|
getSnapshotFn,
|
|
321
|
-
|
|
322
|
-
|
|
82
|
+
instanceKey$1,
|
|
83
|
+
adapterState$1,
|
|
323
84
|
instance
|
|
324
85
|
];
|
|
325
|
-
}, [BlocClass]);
|
|
86
|
+
}, [BlocClass, options?.instanceId]);
|
|
326
87
|
const state = (0, react.useSyncExternalStore)(subscribe, getSnapshot);
|
|
88
|
+
const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
|
|
89
|
+
const externalDepsManager = (0, react.useRef)(new __blac_core.ExternalDependencyManager());
|
|
327
90
|
(0, react.useEffect)(() => {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
hookState.getterTracker.cacheValid = false;
|
|
331
|
-
activeTrackerMap.delete(rawInstance);
|
|
332
|
-
}
|
|
91
|
+
(0, __blac_core.disableGetterTracking)(adapterState, rawInstance);
|
|
92
|
+
externalDepsManager.current.updateSubscriptions(adapterState.getterTracker, rawInstance, forceUpdate);
|
|
333
93
|
});
|
|
334
94
|
(0, react.useEffect)(() => {
|
|
335
95
|
if (options?.onMount) options.onMount(bloc);
|
|
336
96
|
return () => {
|
|
97
|
+
externalDepsManager.current.cleanup();
|
|
337
98
|
if (options?.onUnmount) options.onUnmount(bloc);
|
|
338
|
-
|
|
339
|
-
if (
|
|
99
|
+
Constructor.release(instanceKey);
|
|
100
|
+
if (isIsolated && !rawInstance.isDisposed) rawInstance.dispose();
|
|
340
101
|
};
|
|
341
102
|
}, []);
|
|
342
103
|
return [
|
|
@@ -348,45 +109,20 @@ function useBloc(BlocClass, options) {
|
|
|
348
109
|
|
|
349
110
|
//#endregion
|
|
350
111
|
//#region src/useBlocActions.ts
|
|
351
|
-
/**
|
|
352
|
-
* Generates instance ID for isolated blocs
|
|
353
|
-
*/
|
|
354
|
-
function generateInstanceId(componentRef, isIsolated, providedId) {
|
|
355
|
-
if (providedId) return providedId;
|
|
356
|
-
if (isIsolated) {
|
|
357
|
-
if (!componentRef.__blocInstanceId) componentRef.__blocInstanceId = `isolated-${Math.random().toString(36).slice(2, 11)}`;
|
|
358
|
-
return componentRef.__blocInstanceId;
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
/**
|
|
362
|
-
* React hook for accessing bloc instance without state subscription.
|
|
363
|
-
* Use this when you only need to call bloc methods/actions without reading state.
|
|
364
|
-
*
|
|
365
|
-
* Benefits over useBloc:
|
|
366
|
-
* - No state subscription overhead
|
|
367
|
-
* - No proxy tracking
|
|
368
|
-
* - Component never re-renders due to bloc state changes
|
|
369
|
-
* - Lighter weight for action-only components
|
|
370
|
-
*
|
|
371
|
-
* @template TBloc - The StateContainer type
|
|
372
|
-
* @param BlocClass - The bloc class constructor
|
|
373
|
-
* @param options - Optional configuration
|
|
374
|
-
* @returns The bloc instance
|
|
375
|
-
*/
|
|
376
112
|
function useBlocActions(BlocClass, options) {
|
|
377
113
|
const componentRef = (0, react.useRef)({});
|
|
378
114
|
const [bloc, instanceKey] = (0, react.useMemo)(() => {
|
|
379
|
-
const isIsolated = BlocClass
|
|
115
|
+
const isIsolated = (0, __blac_core.isIsolatedClass)(BlocClass);
|
|
380
116
|
const Constructor = BlocClass;
|
|
381
|
-
const
|
|
382
|
-
return [Constructor.
|
|
117
|
+
const instanceKey$1 = generateInstanceKey(componentRef.current, isIsolated, options?.instanceId);
|
|
118
|
+
return [options?.staticProps ? Constructor.resolve(instanceKey$1, options.staticProps) : Constructor.resolve(instanceKey$1), instanceKey$1];
|
|
383
119
|
}, [BlocClass]);
|
|
384
120
|
(0, react.useEffect)(() => {
|
|
385
121
|
if (options?.onMount) options.onMount(bloc);
|
|
386
122
|
return () => {
|
|
387
123
|
if (options?.onUnmount) options.onUnmount(bloc);
|
|
388
124
|
BlocClass.release(instanceKey);
|
|
389
|
-
if (BlocClass
|
|
125
|
+
if ((0, __blac_core.isIsolatedClass)(BlocClass) && !bloc.isDisposed) bloc.dispose();
|
|
390
126
|
};
|
|
391
127
|
}, []);
|
|
392
128
|
return bloc;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,154 +1,12 @@
|
|
|
1
|
-
import { AnyObject, BlocConstructor, ExtractState, StateContainer } from "@blac/core";
|
|
2
|
-
import { RefObject } from "react";
|
|
3
|
-
|
|
4
|
-
//#region src/types.d.ts
|
|
5
|
-
|
|
6
1
|
/**
|
|
7
|
-
*
|
|
2
|
+
* React Integration
|
|
8
3
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* ```tsx
|
|
13
|
-
* const [state, bloc] = useBloc(CounterBloc, {
|
|
14
|
-
* staticProps: { initialCount: 0 },
|
|
15
|
-
* dependencies: (state) => [state.count],
|
|
16
|
-
* onMount: (bloc) => console.log('Mounted'),
|
|
17
|
-
* });
|
|
18
|
-
* ```
|
|
19
|
-
*/
|
|
20
|
-
interface UseBlocOptions<TBloc extends StateContainer<AnyObject>> {
|
|
21
|
-
/**
|
|
22
|
-
* Static props to pass to the Bloc constructor
|
|
23
|
-
* Type should match the constructor's first parameter
|
|
24
|
-
*/
|
|
25
|
-
staticProps?: AnyObject;
|
|
26
|
-
/**
|
|
27
|
-
* Custom instance ID for shared blocs
|
|
28
|
-
* - For isolated blocs, each useBloc call gets its own instance
|
|
29
|
-
* - For shared blocs, the same instanceId will share the same bloc instance
|
|
30
|
-
*/
|
|
31
|
-
instanceId?: string;
|
|
32
|
-
/**
|
|
33
|
-
* Manual dependency tracking function
|
|
34
|
-
* - When provided, automatic proxy tracking is disabled
|
|
35
|
-
* - Component only re-renders when the returned values change (shallow equality)
|
|
36
|
-
*
|
|
37
|
-
* @param state - Current state of the bloc
|
|
38
|
-
* @param bloc - The bloc instance
|
|
39
|
-
* @returns Array of values to track
|
|
40
|
-
*/
|
|
41
|
-
dependencies?: (state: ExtractState<TBloc>, bloc: TBloc) => unknown[];
|
|
42
|
-
/**
|
|
43
|
-
* Control automatic dependency tracking (default: true)
|
|
44
|
-
* - true: Automatically track accessed properties via Proxy
|
|
45
|
-
* - false: Disable tracking, all state changes trigger re-render
|
|
46
|
-
* - Ignored when `dependencies` option is provided
|
|
47
|
-
*
|
|
48
|
-
* @default true
|
|
49
|
-
*/
|
|
50
|
-
autoTrack?: boolean;
|
|
51
|
-
/**
|
|
52
|
-
* Callback invoked when the component mounts
|
|
53
|
-
*
|
|
54
|
-
* @param bloc - The bloc instance
|
|
55
|
-
*/
|
|
56
|
-
onMount?: (bloc: TBloc) => void;
|
|
57
|
-
/**
|
|
58
|
-
* Callback invoked when the component unmounts
|
|
59
|
-
*
|
|
60
|
-
* @param bloc - The bloc instance
|
|
61
|
-
*/
|
|
62
|
-
onUnmount?: (bloc: TBloc) => void;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Return type of the useBloc hook
|
|
66
|
-
*
|
|
67
|
-
* @template TBloc - The StateContainer type
|
|
68
|
-
*
|
|
69
|
-
* @returns A tuple containing:
|
|
70
|
-
* - [0]: The current state (may be a Proxy for tracking)
|
|
71
|
-
* - [1]: The bloc instance with methods
|
|
72
|
-
* - [2]: Component ref (internal use only)
|
|
73
|
-
*/
|
|
74
|
-
type UseBlocReturn<TBloc extends StateContainer<AnyObject>> = [ExtractState<TBloc>, TBloc, RefObject<ComponentRef>];
|
|
75
|
-
/**
|
|
76
|
-
* @internal
|
|
77
|
-
* Component reference object for internal tracking
|
|
78
|
-
* Used to persist instance IDs across React Strict Mode remounts
|
|
79
|
-
*/
|
|
80
|
-
type ComponentRef = {
|
|
81
|
-
__blocInstanceId?: string;
|
|
82
|
-
__bridge?: any;
|
|
83
|
-
};
|
|
84
|
-
//#endregion
|
|
85
|
-
//#region src/useBloc.d.ts
|
|
86
|
-
/**
|
|
87
|
-
* Lifecycle: INITIAL MOUNT
|
|
88
|
-
* 1. useMemo runs once - creates bloc, subscribeFn, getSnapshotFn
|
|
89
|
-
* 2. useSyncExternalStore calls getSnapshotFn (1st time) - lazy creates tracker, starts tracking, returns proxy
|
|
90
|
-
* 3. Component renders - proxy tracks property accesses
|
|
91
|
-
* 4. useSyncExternalStore calls getSnapshotFn (2nd time) - captures tracked paths, starts new tracking, returns proxy
|
|
92
|
-
* 5. useSyncExternalStore calls subscribeFn - sets up state change listener
|
|
93
|
-
*
|
|
94
|
-
* Lifecycle: STATE CHANGE
|
|
95
|
-
* 1. Bloc state changes
|
|
96
|
-
* 2. subscribeFn callback checks hasChanges() - only re-renders if tracked paths changed
|
|
97
|
-
* 3. If re-render: getSnapshotFn captures previous paths, starts tracking, returns proxy
|
|
98
|
-
*
|
|
99
|
-
* Lifecycle: RE-RENDER (parent re-render)
|
|
100
|
-
* 1. useMemo returns cached values (same bloc, subscribeFn, getSnapshotFn)
|
|
101
|
-
* 2. useSyncExternalStore calls getSnapshotFn - captures paths, starts tracking, returns proxy
|
|
102
|
-
*/
|
|
103
|
-
declare function useBloc<TBloc extends StateContainer<AnyObject>>(BlocClass: BlocConstructor<TBloc>, options?: UseBlocOptions<TBloc>): UseBlocReturn<TBloc>;
|
|
104
|
-
//#endregion
|
|
105
|
-
//#region src/useBlocActions.d.ts
|
|
106
|
-
/**
|
|
107
|
-
* Configuration options for the useBlocActions hook
|
|
108
|
-
*
|
|
109
|
-
* @template TBloc - The StateContainer type
|
|
110
|
-
*/
|
|
111
|
-
interface UseBlocActionsOptions<TBloc extends StateContainer<AnyObject>> {
|
|
112
|
-
/**
|
|
113
|
-
* Static props to pass to the Bloc constructor
|
|
114
|
-
* Type should match the constructor's first parameter
|
|
115
|
-
*/
|
|
116
|
-
staticProps?: AnyObject;
|
|
117
|
-
/**
|
|
118
|
-
* Custom instance ID for shared blocs
|
|
119
|
-
* - For isolated blocs, each useBlocActions call gets its own instance
|
|
120
|
-
* - For shared blocs, the same instanceId will share the same bloc instance
|
|
121
|
-
*/
|
|
122
|
-
instanceId?: string;
|
|
123
|
-
/**
|
|
124
|
-
* Callback invoked when the component mounts
|
|
125
|
-
*
|
|
126
|
-
* @param bloc - The bloc instance
|
|
127
|
-
*/
|
|
128
|
-
onMount?: (bloc: TBloc) => void;
|
|
129
|
-
/**
|
|
130
|
-
* Callback invoked when the component unmounts
|
|
131
|
-
*
|
|
132
|
-
* @param bloc - The bloc instance
|
|
133
|
-
*/
|
|
134
|
-
onUnmount?: (bloc: TBloc) => void;
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* React hook for accessing bloc instance without state subscription.
|
|
138
|
-
* Use this when you only need to call bloc methods/actions without reading state.
|
|
139
|
-
*
|
|
140
|
-
* Benefits over useBloc:
|
|
141
|
-
* - No state subscription overhead
|
|
142
|
-
* - No proxy tracking
|
|
143
|
-
* - Component never re-renders due to bloc state changes
|
|
144
|
-
* - Lighter weight for action-only components
|
|
145
|
-
*
|
|
146
|
-
* @template TBloc - The StateContainer type
|
|
147
|
-
* @param BlocClass - The bloc class constructor
|
|
148
|
-
* @param options - Optional configuration
|
|
149
|
-
* @returns The bloc instance
|
|
4
|
+
* Clean integration between React and StateContainer architecture.
|
|
5
|
+
* Constructor-based API with automatic type inference.
|
|
6
|
+
* Supports concurrent (useSyncExternalStore) mode for optimal performance.
|
|
150
7
|
*/
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
export
|
|
154
|
-
|
|
8
|
+
export { useBloc } from './useBloc';
|
|
9
|
+
export { useBlocActions } from './useBlocActions';
|
|
10
|
+
export type { UseBlocOptions, UseBlocReturn } from './types';
|
|
11
|
+
export type { UseBlocActionsOptions } from './useBlocActions';
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|