@oimdb/react 2.1.0 → 2.1.2
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/README.md +32 -0
- package/dist/index.cjs +26 -208
- package/dist/index.d.cts +5 -14
- package/dist/index.d.ts +5 -14
- package/dist/index.js +41 -214
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -123,6 +123,38 @@ function TeamUsers({ teamId }: { teamId: string }) {
|
|
|
123
123
|
- `useSelectValueByObjectKey(object, key)` watches one object key.
|
|
124
124
|
- `useSelectValuesByObjectKeys(object, keys)` watches several object keys.
|
|
125
125
|
|
|
126
|
+
All entity/index hooks return holes as `undefined` (`(TEntity | undefined)[]`), aligned 1:1 with the requested pks/keys — render with a guard (`user ? … : null`).
|
|
127
|
+
|
|
128
|
+
## Mutable mode + signal hooks (advanced)
|
|
129
|
+
|
|
130
|
+
The default hooks use `useSyncExternalStore`, which detects change by **reference** (`Object.is`). That requires the store to produce a new entity object per update — the default immutable merge (`{ ...prev, ...draft }`), whose copy is the biggest per-update data-layer cost.
|
|
131
|
+
|
|
132
|
+
For update-heavy, fine-grained UIs you can run a collection in **in-place / mutable** mode and bind it with the lighter **signal hooks**:
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { OIMReactiveCollection, createInPlaceEntityUpdater } from '@oimdb/core';
|
|
136
|
+
import {
|
|
137
|
+
useSelectEntityByPkSignal,
|
|
138
|
+
useSelectPksByIndexKeyArrayBasedSignal,
|
|
139
|
+
useSelectPksByIndexKeySetBasedSignal,
|
|
140
|
+
} from '@oimdb/react';
|
|
141
|
+
|
|
142
|
+
// Mutate entities in place — no per-update object allocation.
|
|
143
|
+
const cards = new OIMReactiveCollection<Card, string>(queue, {
|
|
144
|
+
selectPk: (c) => c.id,
|
|
145
|
+
updateEntity: createInPlaceEntityUpdater(),
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
// Signal hooks re-render on the keyed notification (no Object.is), so they see
|
|
149
|
+
// in-place mutations the default uSES hooks would miss.
|
|
150
|
+
const card = useSelectEntityByPkSignal(cards, id);
|
|
151
|
+
const ids = useSelectPksByIndexKeyArrayBasedSignal(cardsByDeck, deckId);
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Available signal hooks (same signatures as their default counterparts): `useSelectEntityByPkSignal`, `useSelectPksByIndexKeyArrayBasedSignal`, `useSelectPksByIndexKeySetBasedSignal`. Compose the fine-grained pattern from them: a parent reads pks by index key, each row reads its own entity by pk.
|
|
155
|
+
|
|
156
|
+
**Use only when every reader is subscription-driven.** Trade-offs: not Concurrent-Mode tearing-safe; the entity reference is stable across changes, so `React.memo` on entities, prev/next diffing, time-travel, and the default uSES hooks on the same collection won't see updates. Select each entity where you render it (by pk); don't pass mutable entities into `React.memo` children. See [Performance](https://abaikov.github.io/oimdb/docs/guides/performance) for when this actually pays off (in plain React the per-component commit usually dominates).
|
|
157
|
+
|
|
126
158
|
## Context API
|
|
127
159
|
|
|
128
160
|
```typescript
|
package/dist/index.cjs
CHANGED
|
@@ -25,29 +25,20 @@ __export(index_exports, {
|
|
|
25
25
|
createOIMCollectionsContext: () => createOIMCollectionsContext,
|
|
26
26
|
useOIMCollectionsContext: () => useOIMCollectionsContext,
|
|
27
27
|
useSelectEntitiesByIndexKeyArrayBased: () => useSelectEntitiesByIndexKeyArrayBased,
|
|
28
|
-
useSelectEntitiesByIndexKeyArrayBasedFast: () => useSelectEntitiesByIndexKeyArrayBasedFast,
|
|
29
28
|
useSelectEntitiesByIndexKeySetBased: () => useSelectEntitiesByIndexKeySetBased,
|
|
30
|
-
useSelectEntitiesByIndexKeySetBasedFast: () => useSelectEntitiesByIndexKeySetBasedFast,
|
|
31
29
|
useSelectEntitiesByIndexKeysArrayBased: () => useSelectEntitiesByIndexKeysArrayBased,
|
|
32
|
-
useSelectEntitiesByIndexKeysArrayBasedFast: () => useSelectEntitiesByIndexKeysArrayBasedFast,
|
|
33
30
|
useSelectEntitiesByIndexKeysSetBased: () => useSelectEntitiesByIndexKeysSetBased,
|
|
34
|
-
useSelectEntitiesByIndexKeysSetBasedFast: () => useSelectEntitiesByIndexKeysSetBasedFast,
|
|
35
31
|
useSelectEntitiesByPks: () => useSelectEntitiesByPks,
|
|
36
|
-
useSelectEntitiesByPksFast: () => useSelectEntitiesByPksFast,
|
|
37
32
|
useSelectEntityByPk: () => useSelectEntityByPk,
|
|
38
|
-
|
|
33
|
+
useSelectEntityByPkSignal: () => useSelectEntityByPkSignal,
|
|
39
34
|
useSelectPksByIndexKeyArrayBased: () => useSelectPksByIndexKeyArrayBased,
|
|
40
|
-
|
|
35
|
+
useSelectPksByIndexKeyArrayBasedSignal: () => useSelectPksByIndexKeyArrayBasedSignal,
|
|
41
36
|
useSelectPksByIndexKeySetBased: () => useSelectPksByIndexKeySetBased,
|
|
42
|
-
|
|
37
|
+
useSelectPksByIndexKeySetBasedSignal: () => useSelectPksByIndexKeySetBasedSignal,
|
|
43
38
|
useSelectPksByIndexKeysArrayBased: () => useSelectPksByIndexKeysArrayBased,
|
|
44
|
-
useSelectPksByIndexKeysArrayBasedFast: () => useSelectPksByIndexKeysArrayBasedFast,
|
|
45
39
|
useSelectPksByIndexKeysSetBased: () => useSelectPksByIndexKeysSetBased,
|
|
46
|
-
useSelectPksByIndexKeysSetBasedFast: () => useSelectPksByIndexKeysSetBasedFast,
|
|
47
40
|
useSelectValueByObjectKey: () => useSelectValueByObjectKey,
|
|
48
|
-
|
|
49
|
-
useSelectValuesByObjectKeys: () => useSelectValuesByObjectKeys,
|
|
50
|
-
useSelectValuesByObjectKeysFast: () => useSelectValuesByObjectKeysFast
|
|
41
|
+
useSelectValuesByObjectKeys: () => useSelectValuesByObjectKeys
|
|
51
42
|
});
|
|
52
43
|
module.exports = __toCommonJS(index_exports);
|
|
53
44
|
|
|
@@ -55,200 +46,36 @@ module.exports = __toCommonJS(index_exports);
|
|
|
55
46
|
var import_react2 = require("react");
|
|
56
47
|
var import_react3 = require("react");
|
|
57
48
|
|
|
58
|
-
// src/hooks/
|
|
49
|
+
// src/hooks/signal.ts
|
|
59
50
|
var import_react = require("react");
|
|
60
51
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
|
|
61
52
|
function useForceUpdate() {
|
|
62
53
|
const [, force] = (0, import_react.useReducer)((c) => c + 1 | 0, 0);
|
|
63
54
|
return force;
|
|
64
55
|
}
|
|
65
|
-
|
|
66
|
-
return Object.is(a, b);
|
|
67
|
-
}
|
|
68
|
-
function shallowEqualArray(a, b) {
|
|
69
|
-
if (a === b) return true;
|
|
70
|
-
if (a.length !== b.length) return false;
|
|
71
|
-
for (let i = 0; i < a.length; i++) {
|
|
72
|
-
if (!Object.is(a[i], b[i])) return false;
|
|
73
|
-
}
|
|
74
|
-
return true;
|
|
75
|
-
}
|
|
76
|
-
function setEqual(a, b) {
|
|
77
|
-
if (a === b) return true;
|
|
78
|
-
if (a.size !== b.size) return false;
|
|
79
|
-
for (const value of a) {
|
|
80
|
-
if (!b.has(value)) return false;
|
|
81
|
-
}
|
|
82
|
-
return true;
|
|
83
|
-
}
|
|
84
|
-
function useStableArray(input) {
|
|
85
|
-
const ref = (0, import_react.useRef)(input);
|
|
86
|
-
if (!shallowEqualArray(ref.current, input)) {
|
|
87
|
-
ref.current = input;
|
|
88
|
-
}
|
|
89
|
-
return ref.current;
|
|
90
|
-
}
|
|
91
|
-
function useFastReactiveValue(read, subscribe, isEqual, deps) {
|
|
56
|
+
var useSelectEntityByPkSignal = (reactiveCollection, pk) => {
|
|
92
57
|
const force = useForceUpdate();
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
cache.current = { value: incoming };
|
|
97
|
-
}
|
|
98
|
-
const value = cache.current.value;
|
|
99
|
-
useIsomorphicLayoutEffect(() => {
|
|
100
|
-
let active = true;
|
|
101
|
-
const onChange = () => {
|
|
102
|
-
if (!active) return;
|
|
103
|
-
const next = read();
|
|
104
|
-
if (cache.current !== null && isEqual(cache.current.value, next)) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
cache.current = { value: next };
|
|
108
|
-
force();
|
|
109
|
-
};
|
|
110
|
-
const unsubscribe = subscribe(onChange);
|
|
111
|
-
const latest = read();
|
|
112
|
-
if (cache.current === null || !isEqual(cache.current.value, latest)) {
|
|
113
|
-
cache.current = { value: latest };
|
|
114
|
-
force();
|
|
115
|
-
}
|
|
116
|
-
return () => {
|
|
117
|
-
active = false;
|
|
118
|
-
unsubscribe();
|
|
119
|
-
};
|
|
120
|
-
}, deps);
|
|
121
|
-
return value;
|
|
122
|
-
}
|
|
123
|
-
var useSelectEntityByPkFast = (reactiveCollection, pk) => useFastReactiveValue(
|
|
124
|
-
() => reactiveCollection.getOneByPk(pk),
|
|
125
|
-
(onChange) => reactiveCollection.subscribeOnKey(pk, onChange),
|
|
126
|
-
objectIsEqual,
|
|
127
|
-
[reactiveCollection, pk]
|
|
128
|
-
);
|
|
129
|
-
var useSelectEntitiesByPksFast = (reactiveCollection, pks) => {
|
|
130
|
-
const stablePks = useStableArray(pks);
|
|
131
|
-
return useFastReactiveValue(
|
|
132
|
-
() => stablePks.map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
133
|
-
(onChange) => reactiveCollection.subscribeOnKeys(stablePks, onChange),
|
|
134
|
-
shallowEqualArray,
|
|
135
|
-
[reactiveCollection, stablePks]
|
|
136
|
-
);
|
|
137
|
-
};
|
|
138
|
-
var useSelectValueByObjectKeyFast = (reactiveObject, key) => useFastReactiveValue(
|
|
139
|
-
() => reactiveObject.get(key),
|
|
140
|
-
(onChange) => reactiveObject.subscribeOnKey(key, onChange),
|
|
141
|
-
objectIsEqual,
|
|
142
|
-
[reactiveObject, key]
|
|
143
|
-
);
|
|
144
|
-
var useSelectValuesByObjectKeysFast = (reactiveObject, keys) => {
|
|
145
|
-
const stableKeys = useStableArray(keys);
|
|
146
|
-
return useFastReactiveValue(
|
|
147
|
-
() => stableKeys.map((key) => reactiveObject.get(key)),
|
|
148
|
-
(onChange) => reactiveObject.subscribeOnKeys(stableKeys, onChange),
|
|
149
|
-
shallowEqualArray,
|
|
150
|
-
[reactiveObject, stableKeys]
|
|
151
|
-
);
|
|
152
|
-
};
|
|
153
|
-
var useSelectPksByIndexKeySetBasedFast = (reactiveIndex, key) => useFastReactiveValue(
|
|
154
|
-
() => reactiveIndex.getPksByKey(key),
|
|
155
|
-
(onChange) => reactiveIndex.subscribeOnKey(key, onChange),
|
|
156
|
-
setEqual,
|
|
157
|
-
[reactiveIndex, key]
|
|
158
|
-
);
|
|
159
|
-
var useSelectPksByIndexKeyArrayBasedFast = (reactiveIndex, key) => useFastReactiveValue(
|
|
160
|
-
() => reactiveIndex.getPksByKey(key),
|
|
161
|
-
(onChange) => reactiveIndex.subscribeOnKey(key, onChange),
|
|
162
|
-
shallowEqualArray,
|
|
163
|
-
[reactiveIndex, key]
|
|
164
|
-
);
|
|
165
|
-
var useSelectPksByIndexKeysSetBasedFast = (reactiveIndex, keys) => {
|
|
166
|
-
const stableKeys = useStableArray(keys);
|
|
167
|
-
return useFastReactiveValue(
|
|
168
|
-
() => stableKeys.map((key) => Array.from(reactiveIndex.getPksByKey(key))).flat(),
|
|
169
|
-
(onChange) => reactiveIndex.subscribeOnKeys(stableKeys, onChange),
|
|
170
|
-
shallowEqualArray,
|
|
171
|
-
[reactiveIndex, stableKeys]
|
|
58
|
+
useIsomorphicLayoutEffect(
|
|
59
|
+
() => reactiveCollection.subscribeOnKey(pk, force),
|
|
60
|
+
[reactiveCollection, pk]
|
|
172
61
|
);
|
|
62
|
+
return reactiveCollection.getOneByPk(pk);
|
|
173
63
|
};
|
|
174
|
-
var
|
|
175
|
-
const
|
|
176
|
-
|
|
177
|
-
() =>
|
|
178
|
-
|
|
179
|
-
shallowEqualArray,
|
|
180
|
-
[reactiveIndex, stableKeys]
|
|
181
|
-
);
|
|
182
|
-
};
|
|
183
|
-
function subscribeIndexAndPks(subscribeIndex, subscribeCollection, readPks, onChange) {
|
|
184
|
-
let unsubscribeCollection = subscribeCollection(readPks(), onChange);
|
|
185
|
-
const unsubscribeIndex = subscribeIndex(() => {
|
|
186
|
-
unsubscribeCollection();
|
|
187
|
-
unsubscribeCollection = subscribeCollection(readPks(), onChange);
|
|
188
|
-
onChange();
|
|
189
|
-
});
|
|
190
|
-
return () => {
|
|
191
|
-
unsubscribeIndex();
|
|
192
|
-
unsubscribeCollection();
|
|
193
|
-
};
|
|
194
|
-
}
|
|
195
|
-
var useSelectEntitiesByIndexKeySetBasedFast = (reactiveCollection, reactiveIndex, key) => {
|
|
196
|
-
const readPks = () => Array.from(reactiveIndex.getPksByKey(key));
|
|
197
|
-
return useFastReactiveValue(
|
|
198
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
199
|
-
(onChange) => subscribeIndexAndPks(
|
|
200
|
-
(cb) => reactiveIndex.subscribeOnKey(key, cb),
|
|
201
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
202
|
-
readPks,
|
|
203
|
-
onChange
|
|
204
|
-
),
|
|
205
|
-
shallowEqualArray,
|
|
206
|
-
[reactiveCollection, reactiveIndex, key]
|
|
207
|
-
);
|
|
208
|
-
};
|
|
209
|
-
var useSelectEntitiesByIndexKeyArrayBasedFast = (reactiveCollection, reactiveIndex, key) => {
|
|
210
|
-
const readPks = () => reactiveIndex.getPksByKey(key);
|
|
211
|
-
return useFastReactiveValue(
|
|
212
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
213
|
-
(onChange) => subscribeIndexAndPks(
|
|
214
|
-
(cb) => reactiveIndex.subscribeOnKey(key, cb),
|
|
215
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
216
|
-
readPks,
|
|
217
|
-
onChange
|
|
218
|
-
),
|
|
219
|
-
shallowEqualArray,
|
|
220
|
-
[reactiveCollection, reactiveIndex, key]
|
|
221
|
-
);
|
|
222
|
-
};
|
|
223
|
-
var useSelectEntitiesByIndexKeysSetBasedFast = (reactiveCollection, reactiveIndex, keys) => {
|
|
224
|
-
const stableKeys = useStableArray(keys);
|
|
225
|
-
const readPks = () => stableKeys.flatMap((key) => Array.from(reactiveIndex.getPksByKey(key)));
|
|
226
|
-
return useFastReactiveValue(
|
|
227
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
228
|
-
(onChange) => subscribeIndexAndPks(
|
|
229
|
-
(cb) => reactiveIndex.subscribeOnKeys(stableKeys, cb),
|
|
230
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
231
|
-
readPks,
|
|
232
|
-
onChange
|
|
233
|
-
),
|
|
234
|
-
shallowEqualArray,
|
|
235
|
-
[reactiveCollection, reactiveIndex, stableKeys]
|
|
64
|
+
var useSelectPksByIndexKeyArrayBasedSignal = (reactiveIndex, key) => {
|
|
65
|
+
const force = useForceUpdate();
|
|
66
|
+
useIsomorphicLayoutEffect(
|
|
67
|
+
() => reactiveIndex.subscribeOnKey(key, force),
|
|
68
|
+
[reactiveIndex, key]
|
|
236
69
|
);
|
|
70
|
+
return reactiveIndex.getPksByKey(key);
|
|
237
71
|
};
|
|
238
|
-
var
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
(onChange) => subscribeIndexAndPks(
|
|
244
|
-
(cb) => reactiveIndex.subscribeOnKeys(stableKeys, cb),
|
|
245
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
246
|
-
readPks,
|
|
247
|
-
onChange
|
|
248
|
-
),
|
|
249
|
-
shallowEqualArray,
|
|
250
|
-
[reactiveCollection, reactiveIndex, stableKeys]
|
|
72
|
+
var useSelectPksByIndexKeySetBasedSignal = (reactiveIndex, key) => {
|
|
73
|
+
const force = useForceUpdate();
|
|
74
|
+
useIsomorphicLayoutEffect(
|
|
75
|
+
() => reactiveIndex.subscribeOnKey(key, force),
|
|
76
|
+
[reactiveIndex, key]
|
|
251
77
|
);
|
|
78
|
+
return reactiveIndex.getPksByKey(key);
|
|
252
79
|
};
|
|
253
80
|
|
|
254
81
|
// src/hooks/index.ts
|
|
@@ -671,27 +498,18 @@ function useOIMCollectionsContext(context) {
|
|
|
671
498
|
createOIMCollectionsContext,
|
|
672
499
|
useOIMCollectionsContext,
|
|
673
500
|
useSelectEntitiesByIndexKeyArrayBased,
|
|
674
|
-
useSelectEntitiesByIndexKeyArrayBasedFast,
|
|
675
501
|
useSelectEntitiesByIndexKeySetBased,
|
|
676
|
-
useSelectEntitiesByIndexKeySetBasedFast,
|
|
677
502
|
useSelectEntitiesByIndexKeysArrayBased,
|
|
678
|
-
useSelectEntitiesByIndexKeysArrayBasedFast,
|
|
679
503
|
useSelectEntitiesByIndexKeysSetBased,
|
|
680
|
-
useSelectEntitiesByIndexKeysSetBasedFast,
|
|
681
504
|
useSelectEntitiesByPks,
|
|
682
|
-
useSelectEntitiesByPksFast,
|
|
683
505
|
useSelectEntityByPk,
|
|
684
|
-
|
|
506
|
+
useSelectEntityByPkSignal,
|
|
685
507
|
useSelectPksByIndexKeyArrayBased,
|
|
686
|
-
|
|
508
|
+
useSelectPksByIndexKeyArrayBasedSignal,
|
|
687
509
|
useSelectPksByIndexKeySetBased,
|
|
688
|
-
|
|
510
|
+
useSelectPksByIndexKeySetBasedSignal,
|
|
689
511
|
useSelectPksByIndexKeysArrayBased,
|
|
690
|
-
useSelectPksByIndexKeysArrayBasedFast,
|
|
691
512
|
useSelectPksByIndexKeysSetBased,
|
|
692
|
-
useSelectPksByIndexKeysSetBasedFast,
|
|
693
513
|
useSelectValueByObjectKey,
|
|
694
|
-
|
|
695
|
-
useSelectValuesByObjectKeys,
|
|
696
|
-
useSelectValuesByObjectKeysFast
|
|
514
|
+
useSelectValuesByObjectKeys
|
|
697
515
|
});
|
package/dist/index.d.cts
CHANGED
|
@@ -1,20 +1,11 @@
|
|
|
1
|
-
import { TOIMPk, OIMReactiveCollection,
|
|
1
|
+
import { TOIMPk, OIMReactiveCollection, OIMIndexArrayBased, OIMReactiveIndexArrayBased, OIMIndexSetBased, OIMReactiveIndexSetBased, OIMReactiveObject } from '@oimdb/core';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
|
|
6
|
-
declare const
|
|
7
|
-
declare const
|
|
8
|
-
declare const
|
|
9
|
-
declare const useSelectValuesByObjectKeysFast: <TKey extends string, TValue>(reactiveObject: OIMReactiveObject<TKey, TValue>, keys: readonly TKey[]) => readonly (TValue | undefined)[];
|
|
10
|
-
declare const useSelectPksByIndexKeySetBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => ReadonlySet<TPk>;
|
|
11
|
-
declare const useSelectPksByIndexKeyArrayBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
|
|
12
|
-
declare const useSelectPksByIndexKeysSetBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly TPk[];
|
|
13
|
-
declare const useSelectPksByIndexKeysArrayBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly TPk[];
|
|
14
|
-
declare const useSelectEntitiesByIndexKeySetBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => readonly (TEntity | undefined)[];
|
|
15
|
-
declare const useSelectEntitiesByIndexKeyArrayBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly (TEntity | undefined)[];
|
|
16
|
-
declare const useSelectEntitiesByIndexKeysSetBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly (TEntity | undefined)[];
|
|
17
|
-
declare const useSelectEntitiesByIndexKeysArrayBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly (TEntity | undefined)[];
|
|
6
|
+
declare const useSelectEntityByPkSignal: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pk: TPk) => TEntity | undefined;
|
|
7
|
+
declare const useSelectPksByIndexKeyArrayBasedSignal: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
|
|
8
|
+
declare const useSelectPksByIndexKeySetBasedSignal: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => ReadonlySet<TPk>;
|
|
18
9
|
|
|
19
10
|
declare const useSelectPksByIndexKeysSetBased: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => TPk[] | undefined;
|
|
20
11
|
declare const useSelectPksByIndexKeySetBased: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => Set<TPk> | undefined;
|
|
@@ -41,4 +32,4 @@ interface OIMCollectionsProviderProps<T extends CollectionsDictionary = Collecti
|
|
|
41
32
|
declare function OIMCollectionsProvider<T extends CollectionsDictionary = CollectionsDictionary>({ collections, children, context }: OIMCollectionsProviderProps<T>): react_jsx_runtime.JSX.Element;
|
|
42
33
|
declare function useOIMCollectionsContext<T extends CollectionsDictionary = CollectionsDictionary>(context?: React.Context<OIMContextValue<T>>): T;
|
|
43
34
|
|
|
44
|
-
export { type CollectionsDictionary, OIMCollectionsContext, OIMCollectionsProvider, type OIMCollectionsProviderProps, type OIMContextValue, createOIMCollectionsContext, useOIMCollectionsContext, useSelectEntitiesByIndexKeyArrayBased,
|
|
35
|
+
export { type CollectionsDictionary, OIMCollectionsContext, OIMCollectionsProvider, type OIMCollectionsProviderProps, type OIMContextValue, createOIMCollectionsContext, useOIMCollectionsContext, useSelectEntitiesByIndexKeyArrayBased, useSelectEntitiesByIndexKeySetBased, useSelectEntitiesByIndexKeysArrayBased, useSelectEntitiesByIndexKeysSetBased, useSelectEntitiesByPks, useSelectEntityByPk, useSelectEntityByPkSignal, useSelectPksByIndexKeyArrayBased, useSelectPksByIndexKeyArrayBasedSignal, useSelectPksByIndexKeySetBased, useSelectPksByIndexKeySetBasedSignal, useSelectPksByIndexKeysArrayBased, useSelectPksByIndexKeysSetBased, useSelectValueByObjectKey, useSelectValuesByObjectKeys };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,20 +1,11 @@
|
|
|
1
|
-
import { TOIMPk, OIMReactiveCollection,
|
|
1
|
+
import { TOIMPk, OIMReactiveCollection, OIMIndexArrayBased, OIMReactiveIndexArrayBased, OIMIndexSetBased, OIMReactiveIndexSetBased, OIMReactiveObject } from '@oimdb/core';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
|
|
6
|
-
declare const
|
|
7
|
-
declare const
|
|
8
|
-
declare const
|
|
9
|
-
declare const useSelectValuesByObjectKeysFast: <TKey extends string, TValue>(reactiveObject: OIMReactiveObject<TKey, TValue>, keys: readonly TKey[]) => readonly (TValue | undefined)[];
|
|
10
|
-
declare const useSelectPksByIndexKeySetBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => ReadonlySet<TPk>;
|
|
11
|
-
declare const useSelectPksByIndexKeyArrayBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
|
|
12
|
-
declare const useSelectPksByIndexKeysSetBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly TPk[];
|
|
13
|
-
declare const useSelectPksByIndexKeysArrayBasedFast: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly TPk[];
|
|
14
|
-
declare const useSelectEntitiesByIndexKeySetBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => readonly (TEntity | undefined)[];
|
|
15
|
-
declare const useSelectEntitiesByIndexKeyArrayBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly (TEntity | undefined)[];
|
|
16
|
-
declare const useSelectEntitiesByIndexKeysSetBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly (TEntity | undefined)[];
|
|
17
|
-
declare const useSelectEntitiesByIndexKeysArrayBasedFast: <TEntity extends object, TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => readonly (TEntity | undefined)[];
|
|
6
|
+
declare const useSelectEntityByPkSignal: <TEntity extends object, TPk extends TOIMPk>(reactiveCollection: OIMReactiveCollection<TEntity, TPk>, pk: TPk) => TEntity | undefined;
|
|
7
|
+
declare const useSelectPksByIndexKeyArrayBasedSignal: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexArrayBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexArrayBased<TKey, TPk, TIndex>, key: TKey) => readonly TPk[];
|
|
8
|
+
declare const useSelectPksByIndexKeySetBasedSignal: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => ReadonlySet<TPk>;
|
|
18
9
|
|
|
19
10
|
declare const useSelectPksByIndexKeysSetBased: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, keys: readonly TKey[]) => TPk[] | undefined;
|
|
20
11
|
declare const useSelectPksByIndexKeySetBased: <TPk extends TOIMPk, TKey extends TOIMPk, TIndex extends OIMIndexSetBased<TKey, TPk>>(reactiveIndex: OIMReactiveIndexSetBased<TKey, TPk, TIndex>, key: TKey) => Set<TPk> | undefined;
|
|
@@ -41,4 +32,4 @@ interface OIMCollectionsProviderProps<T extends CollectionsDictionary = Collecti
|
|
|
41
32
|
declare function OIMCollectionsProvider<T extends CollectionsDictionary = CollectionsDictionary>({ collections, children, context }: OIMCollectionsProviderProps<T>): react_jsx_runtime.JSX.Element;
|
|
42
33
|
declare function useOIMCollectionsContext<T extends CollectionsDictionary = CollectionsDictionary>(context?: React.Context<OIMContextValue<T>>): T;
|
|
43
34
|
|
|
44
|
-
export { type CollectionsDictionary, OIMCollectionsContext, OIMCollectionsProvider, type OIMCollectionsProviderProps, type OIMContextValue, createOIMCollectionsContext, useOIMCollectionsContext, useSelectEntitiesByIndexKeyArrayBased,
|
|
35
|
+
export { type CollectionsDictionary, OIMCollectionsContext, OIMCollectionsProvider, type OIMCollectionsProviderProps, type OIMContextValue, createOIMCollectionsContext, useOIMCollectionsContext, useSelectEntitiesByIndexKeyArrayBased, useSelectEntitiesByIndexKeySetBased, useSelectEntitiesByIndexKeysArrayBased, useSelectEntitiesByIndexKeysSetBased, useSelectEntitiesByPks, useSelectEntityByPk, useSelectEntityByPkSignal, useSelectPksByIndexKeyArrayBased, useSelectPksByIndexKeyArrayBasedSignal, useSelectPksByIndexKeySetBased, useSelectPksByIndexKeySetBasedSignal, useSelectPksByIndexKeysArrayBased, useSelectPksByIndexKeysSetBased, useSelectValueByObjectKey, useSelectValuesByObjectKeys };
|
package/dist/index.js
CHANGED
|
@@ -1,213 +1,49 @@
|
|
|
1
1
|
// src/hooks/index.ts
|
|
2
|
-
import { useMemo, useRef
|
|
2
|
+
import { useMemo, useRef } from "react";
|
|
3
3
|
import { useSyncExternalStore } from "react";
|
|
4
4
|
|
|
5
|
-
// src/hooks/
|
|
6
|
-
import { useEffect, useLayoutEffect, useReducer
|
|
5
|
+
// src/hooks/signal.ts
|
|
6
|
+
import { useEffect, useLayoutEffect, useReducer } from "react";
|
|
7
7
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
8
8
|
function useForceUpdate() {
|
|
9
9
|
const [, force] = useReducer((c) => c + 1 | 0, 0);
|
|
10
10
|
return force;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
return Object.is(a, b);
|
|
14
|
-
}
|
|
15
|
-
function shallowEqualArray(a, b) {
|
|
16
|
-
if (a === b) return true;
|
|
17
|
-
if (a.length !== b.length) return false;
|
|
18
|
-
for (let i = 0; i < a.length; i++) {
|
|
19
|
-
if (!Object.is(a[i], b[i])) return false;
|
|
20
|
-
}
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
function setEqual(a, b) {
|
|
24
|
-
if (a === b) return true;
|
|
25
|
-
if (a.size !== b.size) return false;
|
|
26
|
-
for (const value of a) {
|
|
27
|
-
if (!b.has(value)) return false;
|
|
28
|
-
}
|
|
29
|
-
return true;
|
|
30
|
-
}
|
|
31
|
-
function useStableArray(input) {
|
|
32
|
-
const ref = useRef(input);
|
|
33
|
-
if (!shallowEqualArray(ref.current, input)) {
|
|
34
|
-
ref.current = input;
|
|
35
|
-
}
|
|
36
|
-
return ref.current;
|
|
37
|
-
}
|
|
38
|
-
function useFastReactiveValue(read, subscribe, isEqual, deps) {
|
|
12
|
+
var useSelectEntityByPkSignal = (reactiveCollection, pk) => {
|
|
39
13
|
const force = useForceUpdate();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
cache.current = { value: incoming };
|
|
44
|
-
}
|
|
45
|
-
const value = cache.current.value;
|
|
46
|
-
useIsomorphicLayoutEffect(() => {
|
|
47
|
-
let active = true;
|
|
48
|
-
const onChange = () => {
|
|
49
|
-
if (!active) return;
|
|
50
|
-
const next = read();
|
|
51
|
-
if (cache.current !== null && isEqual(cache.current.value, next)) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
cache.current = { value: next };
|
|
55
|
-
force();
|
|
56
|
-
};
|
|
57
|
-
const unsubscribe = subscribe(onChange);
|
|
58
|
-
const latest = read();
|
|
59
|
-
if (cache.current === null || !isEqual(cache.current.value, latest)) {
|
|
60
|
-
cache.current = { value: latest };
|
|
61
|
-
force();
|
|
62
|
-
}
|
|
63
|
-
return () => {
|
|
64
|
-
active = false;
|
|
65
|
-
unsubscribe();
|
|
66
|
-
};
|
|
67
|
-
}, deps);
|
|
68
|
-
return value;
|
|
69
|
-
}
|
|
70
|
-
var useSelectEntityByPkFast = (reactiveCollection, pk) => useFastReactiveValue(
|
|
71
|
-
() => reactiveCollection.getOneByPk(pk),
|
|
72
|
-
(onChange) => reactiveCollection.subscribeOnKey(pk, onChange),
|
|
73
|
-
objectIsEqual,
|
|
74
|
-
[reactiveCollection, pk]
|
|
75
|
-
);
|
|
76
|
-
var useSelectEntitiesByPksFast = (reactiveCollection, pks) => {
|
|
77
|
-
const stablePks = useStableArray(pks);
|
|
78
|
-
return useFastReactiveValue(
|
|
79
|
-
() => stablePks.map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
80
|
-
(onChange) => reactiveCollection.subscribeOnKeys(stablePks, onChange),
|
|
81
|
-
shallowEqualArray,
|
|
82
|
-
[reactiveCollection, stablePks]
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
var useSelectValueByObjectKeyFast = (reactiveObject, key) => useFastReactiveValue(
|
|
86
|
-
() => reactiveObject.get(key),
|
|
87
|
-
(onChange) => reactiveObject.subscribeOnKey(key, onChange),
|
|
88
|
-
objectIsEqual,
|
|
89
|
-
[reactiveObject, key]
|
|
90
|
-
);
|
|
91
|
-
var useSelectValuesByObjectKeysFast = (reactiveObject, keys) => {
|
|
92
|
-
const stableKeys = useStableArray(keys);
|
|
93
|
-
return useFastReactiveValue(
|
|
94
|
-
() => stableKeys.map((key) => reactiveObject.get(key)),
|
|
95
|
-
(onChange) => reactiveObject.subscribeOnKeys(stableKeys, onChange),
|
|
96
|
-
shallowEqualArray,
|
|
97
|
-
[reactiveObject, stableKeys]
|
|
98
|
-
);
|
|
99
|
-
};
|
|
100
|
-
var useSelectPksByIndexKeySetBasedFast = (reactiveIndex, key) => useFastReactiveValue(
|
|
101
|
-
() => reactiveIndex.getPksByKey(key),
|
|
102
|
-
(onChange) => reactiveIndex.subscribeOnKey(key, onChange),
|
|
103
|
-
setEqual,
|
|
104
|
-
[reactiveIndex, key]
|
|
105
|
-
);
|
|
106
|
-
var useSelectPksByIndexKeyArrayBasedFast = (reactiveIndex, key) => useFastReactiveValue(
|
|
107
|
-
() => reactiveIndex.getPksByKey(key),
|
|
108
|
-
(onChange) => reactiveIndex.subscribeOnKey(key, onChange),
|
|
109
|
-
shallowEqualArray,
|
|
110
|
-
[reactiveIndex, key]
|
|
111
|
-
);
|
|
112
|
-
var useSelectPksByIndexKeysSetBasedFast = (reactiveIndex, keys) => {
|
|
113
|
-
const stableKeys = useStableArray(keys);
|
|
114
|
-
return useFastReactiveValue(
|
|
115
|
-
() => stableKeys.map((key) => Array.from(reactiveIndex.getPksByKey(key))).flat(),
|
|
116
|
-
(onChange) => reactiveIndex.subscribeOnKeys(stableKeys, onChange),
|
|
117
|
-
shallowEqualArray,
|
|
118
|
-
[reactiveIndex, stableKeys]
|
|
14
|
+
useIsomorphicLayoutEffect(
|
|
15
|
+
() => reactiveCollection.subscribeOnKey(pk, force),
|
|
16
|
+
[reactiveCollection, pk]
|
|
119
17
|
);
|
|
18
|
+
return reactiveCollection.getOneByPk(pk);
|
|
120
19
|
};
|
|
121
|
-
var
|
|
122
|
-
const
|
|
123
|
-
|
|
124
|
-
() =>
|
|
125
|
-
|
|
126
|
-
shallowEqualArray,
|
|
127
|
-
[reactiveIndex, stableKeys]
|
|
128
|
-
);
|
|
129
|
-
};
|
|
130
|
-
function subscribeIndexAndPks(subscribeIndex, subscribeCollection, readPks, onChange) {
|
|
131
|
-
let unsubscribeCollection = subscribeCollection(readPks(), onChange);
|
|
132
|
-
const unsubscribeIndex = subscribeIndex(() => {
|
|
133
|
-
unsubscribeCollection();
|
|
134
|
-
unsubscribeCollection = subscribeCollection(readPks(), onChange);
|
|
135
|
-
onChange();
|
|
136
|
-
});
|
|
137
|
-
return () => {
|
|
138
|
-
unsubscribeIndex();
|
|
139
|
-
unsubscribeCollection();
|
|
140
|
-
};
|
|
141
|
-
}
|
|
142
|
-
var useSelectEntitiesByIndexKeySetBasedFast = (reactiveCollection, reactiveIndex, key) => {
|
|
143
|
-
const readPks = () => Array.from(reactiveIndex.getPksByKey(key));
|
|
144
|
-
return useFastReactiveValue(
|
|
145
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
146
|
-
(onChange) => subscribeIndexAndPks(
|
|
147
|
-
(cb) => reactiveIndex.subscribeOnKey(key, cb),
|
|
148
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
149
|
-
readPks,
|
|
150
|
-
onChange
|
|
151
|
-
),
|
|
152
|
-
shallowEqualArray,
|
|
153
|
-
[reactiveCollection, reactiveIndex, key]
|
|
154
|
-
);
|
|
155
|
-
};
|
|
156
|
-
var useSelectEntitiesByIndexKeyArrayBasedFast = (reactiveCollection, reactiveIndex, key) => {
|
|
157
|
-
const readPks = () => reactiveIndex.getPksByKey(key);
|
|
158
|
-
return useFastReactiveValue(
|
|
159
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
160
|
-
(onChange) => subscribeIndexAndPks(
|
|
161
|
-
(cb) => reactiveIndex.subscribeOnKey(key, cb),
|
|
162
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
163
|
-
readPks,
|
|
164
|
-
onChange
|
|
165
|
-
),
|
|
166
|
-
shallowEqualArray,
|
|
167
|
-
[reactiveCollection, reactiveIndex, key]
|
|
168
|
-
);
|
|
169
|
-
};
|
|
170
|
-
var useSelectEntitiesByIndexKeysSetBasedFast = (reactiveCollection, reactiveIndex, keys) => {
|
|
171
|
-
const stableKeys = useStableArray(keys);
|
|
172
|
-
const readPks = () => stableKeys.flatMap((key) => Array.from(reactiveIndex.getPksByKey(key)));
|
|
173
|
-
return useFastReactiveValue(
|
|
174
|
-
() => readPks().map((pk) => reactiveCollection.getOneByPk(pk)),
|
|
175
|
-
(onChange) => subscribeIndexAndPks(
|
|
176
|
-
(cb) => reactiveIndex.subscribeOnKeys(stableKeys, cb),
|
|
177
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
178
|
-
readPks,
|
|
179
|
-
onChange
|
|
180
|
-
),
|
|
181
|
-
shallowEqualArray,
|
|
182
|
-
[reactiveCollection, reactiveIndex, stableKeys]
|
|
20
|
+
var useSelectPksByIndexKeyArrayBasedSignal = (reactiveIndex, key) => {
|
|
21
|
+
const force = useForceUpdate();
|
|
22
|
+
useIsomorphicLayoutEffect(
|
|
23
|
+
() => reactiveIndex.subscribeOnKey(key, force),
|
|
24
|
+
[reactiveIndex, key]
|
|
183
25
|
);
|
|
26
|
+
return reactiveIndex.getPksByKey(key);
|
|
184
27
|
};
|
|
185
|
-
var
|
|
186
|
-
const
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
(onChange) => subscribeIndexAndPks(
|
|
191
|
-
(cb) => reactiveIndex.subscribeOnKeys(stableKeys, cb),
|
|
192
|
-
(pks, cb) => reactiveCollection.subscribeOnKeys(pks, cb),
|
|
193
|
-
readPks,
|
|
194
|
-
onChange
|
|
195
|
-
),
|
|
196
|
-
shallowEqualArray,
|
|
197
|
-
[reactiveCollection, reactiveIndex, stableKeys]
|
|
28
|
+
var useSelectPksByIndexKeySetBasedSignal = (reactiveIndex, key) => {
|
|
29
|
+
const force = useForceUpdate();
|
|
30
|
+
useIsomorphicLayoutEffect(
|
|
31
|
+
() => reactiveIndex.subscribeOnKey(key, force),
|
|
32
|
+
[reactiveIndex, key]
|
|
198
33
|
);
|
|
34
|
+
return reactiveIndex.getPksByKey(key);
|
|
199
35
|
};
|
|
200
36
|
|
|
201
37
|
// src/hooks/index.ts
|
|
202
38
|
var EMPTY_ARRAY = [];
|
|
203
39
|
var useSelectPksByIndexKeysSetBased = (reactiveIndex, keys) => {
|
|
204
|
-
const prevKeysRef =
|
|
40
|
+
const prevKeysRef = useRef();
|
|
205
41
|
const keysAreEqual = arraysEqual(prevKeysRef.current || EMPTY_ARRAY, keys);
|
|
206
42
|
if (!keysAreEqual) {
|
|
207
43
|
prevKeysRef.current = keys;
|
|
208
44
|
}
|
|
209
45
|
const stableKeys = keysAreEqual ? prevKeysRef.current ?? keys : keys;
|
|
210
|
-
const snapshotValueRef =
|
|
46
|
+
const snapshotValueRef = useRef();
|
|
211
47
|
const subscribe = useMemo(() => {
|
|
212
48
|
snapshotValueRef.current = stableKeys.map((key) => Array.from(reactiveIndex.getPksByKey(key))).flat();
|
|
213
49
|
return (onStoreChange) => {
|
|
@@ -233,7 +69,7 @@ var useSelectPksByIndexKeysSetBased = (reactiveIndex, keys) => {
|
|
|
233
69
|
return snapshot;
|
|
234
70
|
};
|
|
235
71
|
var useSelectPksByIndexKeySetBased = (reactiveIndex, key) => {
|
|
236
|
-
const snapshotValueRef =
|
|
72
|
+
const snapshotValueRef = useRef();
|
|
237
73
|
const subscribe = useMemo(() => {
|
|
238
74
|
snapshotValueRef.current = reactiveIndex.getPksByKey(key);
|
|
239
75
|
return (onStoreChange) => {
|
|
@@ -253,13 +89,13 @@ var useSelectPksByIndexKeySetBased = (reactiveIndex, key) => {
|
|
|
253
89
|
return snapshot;
|
|
254
90
|
};
|
|
255
91
|
var useSelectPksByIndexKeysArrayBased = (reactiveIndex, keys) => {
|
|
256
|
-
const prevKeysRef =
|
|
92
|
+
const prevKeysRef = useRef();
|
|
257
93
|
const keysAreEqual = arraysEqual(prevKeysRef.current || EMPTY_ARRAY, keys);
|
|
258
94
|
if (!keysAreEqual) {
|
|
259
95
|
prevKeysRef.current = keys;
|
|
260
96
|
}
|
|
261
97
|
const stableKeys = keysAreEqual ? prevKeysRef.current ?? keys : keys;
|
|
262
|
-
const snapshotValueRef =
|
|
98
|
+
const snapshotValueRef = useRef();
|
|
263
99
|
const subscribe = useMemo(() => {
|
|
264
100
|
snapshotValueRef.current = stableKeys.map((key) => reactiveIndex.getPksByKey(key)).flat();
|
|
265
101
|
return (onStoreChange) => {
|
|
@@ -285,12 +121,12 @@ var useSelectPksByIndexKeysArrayBased = (reactiveIndex, keys) => {
|
|
|
285
121
|
return snapshot;
|
|
286
122
|
};
|
|
287
123
|
var useSelectPksByIndexKeyArrayBased = (reactiveIndex, key) => {
|
|
288
|
-
const prevKeyRef =
|
|
124
|
+
const prevKeyRef = useRef();
|
|
289
125
|
const keyAreEqual = prevKeyRef.current === key;
|
|
290
126
|
if (!keyAreEqual) {
|
|
291
127
|
prevKeyRef.current = key;
|
|
292
128
|
}
|
|
293
|
-
const snapshotValueRef =
|
|
129
|
+
const snapshotValueRef = useRef();
|
|
294
130
|
const subscribe = useMemo(() => {
|
|
295
131
|
snapshotValueRef.current = reactiveIndex.getPksByKey(key);
|
|
296
132
|
return (onStoreChange) => {
|
|
@@ -347,13 +183,13 @@ var useSelectValueByObjectKey = (reactiveObject, key) => {
|
|
|
347
183
|
return snapshot;
|
|
348
184
|
};
|
|
349
185
|
var useSelectValuesByObjectKeys = (reactiveObject, keys) => {
|
|
350
|
-
const prevKeysRef =
|
|
186
|
+
const prevKeysRef = useRef();
|
|
351
187
|
const keysAreEqual = arraysEqual(prevKeysRef.current || EMPTY_ARRAY, keys);
|
|
352
188
|
if (!keysAreEqual) {
|
|
353
189
|
prevKeysRef.current = keys;
|
|
354
190
|
}
|
|
355
191
|
const stableKeys = keysAreEqual ? prevKeysRef.current ?? keys : keys;
|
|
356
|
-
const snapshotRef =
|
|
192
|
+
const snapshotRef = useRef();
|
|
357
193
|
const subscribe = useMemo(() => {
|
|
358
194
|
snapshotRef.current = stableKeys.map((key) => reactiveObject.get(key));
|
|
359
195
|
return (onStoreChange) => {
|
|
@@ -389,13 +225,13 @@ function arraysEqual(a, b) {
|
|
|
389
225
|
return true;
|
|
390
226
|
}
|
|
391
227
|
var useSelectEntitiesByPks = (reactiveCollection, pks) => {
|
|
392
|
-
const prevPksRef =
|
|
228
|
+
const prevPksRef = useRef();
|
|
393
229
|
const pksAreEqual = arraysEqual(prevPksRef.current || EMPTY_ARRAY, pks);
|
|
394
230
|
if (!pksAreEqual) {
|
|
395
231
|
prevPksRef.current = pks;
|
|
396
232
|
}
|
|
397
233
|
const stablePks = pksAreEqual ? prevPksRef.current ?? pks : pks;
|
|
398
|
-
const snapshotRef =
|
|
234
|
+
const snapshotRef = useRef();
|
|
399
235
|
const subscribe = useMemo(() => {
|
|
400
236
|
snapshotRef.current = stablePks.map(
|
|
401
237
|
(pk) => reactiveCollection.getOneByPk(pk)
|
|
@@ -425,7 +261,7 @@ var useSelectEntitiesByPks = (reactiveCollection, pks) => {
|
|
|
425
261
|
return snapshot;
|
|
426
262
|
};
|
|
427
263
|
var useSelectEntitiesByIndexKeySetBased = (reactiveCollection, reactiveIndex, key) => {
|
|
428
|
-
const snapshotRef =
|
|
264
|
+
const snapshotRef = useRef();
|
|
429
265
|
const subscribe = useMemo(() => {
|
|
430
266
|
const readSnapshot = () => Array.from(
|
|
431
267
|
reactiveIndex.getPksByKey(key),
|
|
@@ -463,13 +299,13 @@ var useSelectEntitiesByIndexKeySetBased = (reactiveCollection, reactiveIndex, ke
|
|
|
463
299
|
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
464
300
|
};
|
|
465
301
|
var useSelectEntitiesByIndexKeysSetBased = (reactiveCollection, reactiveIndex, keys) => {
|
|
466
|
-
const prevKeysRef =
|
|
302
|
+
const prevKeysRef = useRef();
|
|
467
303
|
const keysAreEqual = arraysEqual(prevKeysRef.current || EMPTY_ARRAY, keys);
|
|
468
304
|
if (!keysAreEqual) {
|
|
469
305
|
prevKeysRef.current = keys;
|
|
470
306
|
}
|
|
471
307
|
const stableKeys = keysAreEqual ? prevKeysRef.current ?? keys : keys;
|
|
472
|
-
const snapshotRef =
|
|
308
|
+
const snapshotRef = useRef();
|
|
473
309
|
const subscribe = useMemo(() => {
|
|
474
310
|
const readPks = () => stableKeys.flatMap(
|
|
475
311
|
(key) => Array.from(reactiveIndex.getPksByKey(key))
|
|
@@ -509,7 +345,7 @@ var useSelectEntitiesByIndexKeysSetBased = (reactiveCollection, reactiveIndex, k
|
|
|
509
345
|
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
510
346
|
};
|
|
511
347
|
var useSelectEntitiesByIndexKeyArrayBased = (reactiveCollection, reactiveIndex, key) => {
|
|
512
|
-
const snapshotRef =
|
|
348
|
+
const snapshotRef = useRef();
|
|
513
349
|
const subscribe = useMemo(() => {
|
|
514
350
|
const readSnapshot = () => reactiveIndex.getPksByKey(key).map((pk) => reactiveCollection.getOneByPk(pk));
|
|
515
351
|
const readPks = () => reactiveIndex.getPksByKey(key);
|
|
@@ -544,13 +380,13 @@ var useSelectEntitiesByIndexKeyArrayBased = (reactiveCollection, reactiveIndex,
|
|
|
544
380
|
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
545
381
|
};
|
|
546
382
|
var useSelectEntitiesByIndexKeysArrayBased = (reactiveCollection, reactiveIndex, keys) => {
|
|
547
|
-
const prevKeysRef =
|
|
383
|
+
const prevKeysRef = useRef();
|
|
548
384
|
const keysAreEqual = arraysEqual(prevKeysRef.current || EMPTY_ARRAY, keys);
|
|
549
385
|
if (!keysAreEqual) {
|
|
550
386
|
prevKeysRef.current = keys;
|
|
551
387
|
}
|
|
552
388
|
const stableKeys = keysAreEqual ? prevKeysRef.current ?? keys : keys;
|
|
553
|
-
const snapshotRef =
|
|
389
|
+
const snapshotRef = useRef();
|
|
554
390
|
const subscribe = useMemo(() => {
|
|
555
391
|
const readPks = () => stableKeys.flatMap((key) => reactiveIndex.getPksByKey(key));
|
|
556
392
|
const readSnapshot = () => readPks().map((pk) => reactiveCollection.getOneByPk(pk));
|
|
@@ -617,27 +453,18 @@ export {
|
|
|
617
453
|
createOIMCollectionsContext,
|
|
618
454
|
useOIMCollectionsContext,
|
|
619
455
|
useSelectEntitiesByIndexKeyArrayBased,
|
|
620
|
-
useSelectEntitiesByIndexKeyArrayBasedFast,
|
|
621
456
|
useSelectEntitiesByIndexKeySetBased,
|
|
622
|
-
useSelectEntitiesByIndexKeySetBasedFast,
|
|
623
457
|
useSelectEntitiesByIndexKeysArrayBased,
|
|
624
|
-
useSelectEntitiesByIndexKeysArrayBasedFast,
|
|
625
458
|
useSelectEntitiesByIndexKeysSetBased,
|
|
626
|
-
useSelectEntitiesByIndexKeysSetBasedFast,
|
|
627
459
|
useSelectEntitiesByPks,
|
|
628
|
-
useSelectEntitiesByPksFast,
|
|
629
460
|
useSelectEntityByPk,
|
|
630
|
-
|
|
461
|
+
useSelectEntityByPkSignal,
|
|
631
462
|
useSelectPksByIndexKeyArrayBased,
|
|
632
|
-
|
|
463
|
+
useSelectPksByIndexKeyArrayBasedSignal,
|
|
633
464
|
useSelectPksByIndexKeySetBased,
|
|
634
|
-
|
|
465
|
+
useSelectPksByIndexKeySetBasedSignal,
|
|
635
466
|
useSelectPksByIndexKeysArrayBased,
|
|
636
|
-
useSelectPksByIndexKeysArrayBasedFast,
|
|
637
467
|
useSelectPksByIndexKeysSetBased,
|
|
638
|
-
useSelectPksByIndexKeysSetBasedFast,
|
|
639
468
|
useSelectValueByObjectKey,
|
|
640
|
-
|
|
641
|
-
useSelectValuesByObjectKeys,
|
|
642
|
-
useSelectValuesByObjectKeysFast
|
|
469
|
+
useSelectValuesByObjectKeys
|
|
643
470
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oimdb/react",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "React integration for OIMDB - Hooks for selection and subscription with external storage",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dist"
|
|
37
37
|
],
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@oimdb/core": "^2.0.0",
|
|
39
|
+
"@oimdb/core": "^2.0.0 || ^3.0.0",
|
|
40
40
|
"react": "^18.0.0 || ^19.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|