cogsbox-state 0.5.431 → 0.5.434
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 +596 -238
- package/dist/CogsState.d.ts +93 -104
- package/dist/CogsState.jsx +1540 -1033
- package/dist/CogsState.jsx.map +1 -1
- package/dist/Functions.d.ts +1 -15
- package/dist/Functions.jsx +40 -187
- package/dist/Functions.jsx.map +1 -1
- package/dist/index.js +18 -19
- package/dist/store.d.ts +94 -92
- package/dist/store.js +230 -295
- package/dist/store.js.map +1 -1
- package/dist/useValidateZodPath.d.ts +1 -1
- package/dist/utility.d.ts +2 -2
- package/dist/utility.js +152 -169
- package/dist/utility.js.map +1 -1
- package/package.json +2 -1
- package/src/CogsState.tsx +2858 -1614
- package/src/Functions.tsx +167 -303
- package/src/store.ts +440 -440
- package/src/utility.ts +76 -95
- package/dist/useValidateZodPath.js +0 -59
- package/dist/useValidateZodPath.js.map +0 -1
package/dist/CogsState.d.ts
CHANGED
|
@@ -3,14 +3,15 @@ import { GenericObject } from './utility.js';
|
|
|
3
3
|
import { z } from 'zod';
|
|
4
4
|
import { ComponentsType } from './store.js';
|
|
5
5
|
|
|
6
|
-
type Prettify<T> = {
|
|
6
|
+
type Prettify<T> = T extends any ? {
|
|
7
7
|
[K in keyof T]: T[K];
|
|
8
|
-
}
|
|
8
|
+
} : never;
|
|
9
9
|
export type VirtualViewOptions = {
|
|
10
10
|
itemHeight?: number;
|
|
11
11
|
overscan?: number;
|
|
12
12
|
stickToBottom?: boolean;
|
|
13
13
|
dependencies?: any[];
|
|
14
|
+
scrollStickTolerance?: number;
|
|
14
15
|
};
|
|
15
16
|
export type VirtualStateObjectResult<T extends any[]> = {
|
|
16
17
|
/**
|
|
@@ -36,27 +37,11 @@ export type VirtualStateObjectResult<T extends any[]> = {
|
|
|
36
37
|
scrollToBottom: (behavior?: ScrollBehavior) => void;
|
|
37
38
|
scrollToIndex: (index: number, behavior?: ScrollBehavior) => void;
|
|
38
39
|
};
|
|
39
|
-
export type ServerSyncStatus = {
|
|
40
|
-
isFresh: boolean;
|
|
41
|
-
isFreshTime: number;
|
|
42
|
-
isStale: boolean;
|
|
43
|
-
isStaleTime: number;
|
|
44
|
-
isSyncing: boolean;
|
|
45
|
-
isSyncingTime: number;
|
|
46
|
-
};
|
|
47
40
|
export type SyncInfo = {
|
|
48
41
|
timeStamp: number;
|
|
49
42
|
userId: number;
|
|
50
43
|
};
|
|
51
|
-
export type FormElementParams<T> = {
|
|
52
|
-
get: () => T;
|
|
53
|
-
set: UpdateType<T>;
|
|
54
|
-
syncStatus: (SyncInfo & {
|
|
55
|
-
date: Date;
|
|
56
|
-
}) | null;
|
|
57
|
-
path: string[];
|
|
58
|
-
validationErrors: () => string[];
|
|
59
|
-
addValidationError: (message?: string) => void;
|
|
44
|
+
export type FormElementParams<T> = StateObject<T> & {
|
|
60
45
|
inputProps: {
|
|
61
46
|
ref?: React.RefObject<any>;
|
|
62
47
|
value?: T extends boolean ? never : T;
|
|
@@ -66,39 +51,51 @@ export type FormElementParams<T> = {
|
|
|
66
51
|
};
|
|
67
52
|
export type StateKeys = string;
|
|
68
53
|
type findWithFuncType<U> = (thisKey: keyof U, thisValue: U[keyof U]) => EndType<U> & StateObject<U>;
|
|
69
|
-
export type PushArgs<U, T> = (update: Prettify<U> | ((prevState: NonNullable<Prettify<U>>[]) => NonNullable<Prettify<U>>), opts?: UpdateOpts<U>) => StateObject<T>;
|
|
70
54
|
type CutFunctionType<T> = (index?: number, options?: {
|
|
71
55
|
waitForSync?: boolean;
|
|
72
56
|
}) => StateObject<T>;
|
|
73
57
|
export type InferArrayElement<T> = T extends (infer U)[] ? U : never;
|
|
58
|
+
export type StreamOptions<T, R = T> = {
|
|
59
|
+
bufferSize?: number;
|
|
60
|
+
flushInterval?: number;
|
|
61
|
+
bufferStrategy?: 'sliding' | 'dropping' | 'accumulate';
|
|
62
|
+
store?: (buffer: T[]) => R | R[];
|
|
63
|
+
onFlush?: (buffer: T[]) => void;
|
|
64
|
+
};
|
|
65
|
+
export type StreamHandle<T> = {
|
|
66
|
+
write: (data: T) => void;
|
|
67
|
+
writeMany: (data: T[]) => void;
|
|
68
|
+
flush: () => void;
|
|
69
|
+
close: () => void;
|
|
70
|
+
pause: () => void;
|
|
71
|
+
resume: () => void;
|
|
72
|
+
};
|
|
74
73
|
export type ArrayEndType<TShape extends unknown> = {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
stream: <T = Prettify<InferArrayElement<TShape>>, R = T>(options?: StreamOptions<T, R>) => StreamHandle<T>;
|
|
75
|
+
findWith: findWithFuncType<Prettify<InferArrayElement<TShape>>>;
|
|
76
|
+
index: (index: number) => StateObject<Prettify<InferArrayElement<TShape>>> & {
|
|
77
|
+
insert: InsertTypeObj<Prettify<InferArrayElement<TShape>>>;
|
|
78
78
|
cut: CutFunctionType<TShape>;
|
|
79
79
|
_index: number;
|
|
80
|
-
} & EndType<InferArrayElement<TShape
|
|
81
|
-
insert:
|
|
80
|
+
} & EndType<Prettify<InferArrayElement<TShape>>>;
|
|
81
|
+
insert: InsertType<Prettify<InferArrayElement<TShape>>>;
|
|
82
82
|
cut: CutFunctionType<TShape>;
|
|
83
|
+
cutSelected: () => void;
|
|
83
84
|
cutByValue: (value: string | number | boolean) => void;
|
|
84
85
|
toggleByValue: (value: string | number | boolean) => void;
|
|
85
|
-
stateSort: (compareFn: (a: InferArrayElement<TShape
|
|
86
|
-
useVirtualView: (options: VirtualViewOptions) => VirtualStateObjectResult<InferArrayElement<TShape
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
uniqueInsert: (payload: UpdateArg<InferArrayElement<TShape>>, fields?: (keyof InferArrayElement<TShape>)[], onMatch?: (existingItem: any) => any) => void;
|
|
96
|
-
stateFind: (callbackfn: (value: InferArrayElement<TShape>, index: number) => boolean) => StateObject<InferArrayElement<TShape>> | undefined;
|
|
97
|
-
stateFilter: (callbackfn: (value: InferArrayElement<TShape>, index: number) => void) => ArrayEndType<TShape>;
|
|
98
|
-
getSelected: () => StateObject<InferArrayElement<TShape>> | undefined;
|
|
86
|
+
stateSort: (compareFn: (a: Prettify<InferArrayElement<TShape>>, b: Prettify<InferArrayElement<TShape>>) => number) => ArrayEndType<TShape>;
|
|
87
|
+
useVirtualView: (options: VirtualViewOptions) => VirtualStateObjectResult<Prettify<InferArrayElement<TShape>>[]>;
|
|
88
|
+
stateList: (callbackfn: (setter: StateObject<Prettify<InferArrayElement<TShape>>>, index: number, arraySetter: StateObject<TShape>) => void) => any;
|
|
89
|
+
stateMap: <U>(callbackfn: (setter: StateObject<Prettify<InferArrayElement<TShape>>>, index: number, arraySetter: StateObject<TShape>) => U) => U[];
|
|
90
|
+
$stateMap: (callbackfn: (setter: StateObject<Prettify<InferArrayElement<TShape>>>, index: number, arraySetter: StateObject<TShape>) => void) => any;
|
|
91
|
+
stateFlattenOn: <K extends keyof Prettify<InferArrayElement<TShape>>>(field: K) => StateObject<InferArrayElement<Prettify<InferArrayElement<TShape>>[K]>[]>;
|
|
92
|
+
uniqueInsert: (payload: InsertParams<Prettify<InferArrayElement<TShape>>>, fields?: (keyof Prettify<InferArrayElement<TShape>>)[], onMatch?: (existingItem: any) => any) => void;
|
|
93
|
+
stateFind: (callbackfn: (value: Prettify<InferArrayElement<TShape>>, index: number) => boolean) => StateObject<Prettify<InferArrayElement<TShape>>> | undefined;
|
|
94
|
+
stateFilter: (callbackfn: (value: Prettify<InferArrayElement<TShape>>, index: number) => void) => ArrayEndType<TShape>;
|
|
95
|
+
getSelected: () => StateObject<Prettify<InferArrayElement<TShape>>> | undefined;
|
|
99
96
|
clearSelected: () => void;
|
|
100
97
|
getSelectedIndex: () => number;
|
|
101
|
-
last: () => StateObject<InferArrayElement<TShape
|
|
98
|
+
last: () => StateObject<Prettify<InferArrayElement<TShape>>> | undefined;
|
|
102
99
|
} & EndType<TShape>;
|
|
103
100
|
export type FormOptsType = {
|
|
104
101
|
validation?: {
|
|
@@ -112,22 +109,18 @@ export type FormOptsType = {
|
|
|
112
109
|
};
|
|
113
110
|
export type FormControl<T> = (obj: FormElementParams<T>) => JSX.Element;
|
|
114
111
|
export type UpdateArg<S> = S | ((prevState: S) => S);
|
|
115
|
-
export type
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
export type
|
|
121
|
-
|
|
122
|
-
} & {
|
|
123
|
-
stateObject: (callbackfn: (value: T, setter: StateObject<T>) => void) => any;
|
|
124
|
-
delete: () => void;
|
|
125
|
-
};
|
|
112
|
+
export type InsertParams<S> = S | ((prevState: {
|
|
113
|
+
state: S;
|
|
114
|
+
uuid: string;
|
|
115
|
+
}) => S);
|
|
116
|
+
export type UpdateType<T> = (payload: UpdateArg<T>) => void;
|
|
117
|
+
export type InsertType<T> = (payload: InsertParams<T>, index?: number) => void;
|
|
118
|
+
export type InsertTypeObj<T> = (payload: InsertParams<T>) => void;
|
|
126
119
|
export type ValidationError = {
|
|
127
120
|
path: (string | number)[];
|
|
128
121
|
message: string;
|
|
129
122
|
};
|
|
130
|
-
type EffectFunction<T, R> = (state: T) => R;
|
|
123
|
+
type EffectFunction<T, R> = (state: T, deps: any[]) => R;
|
|
131
124
|
export type EndType<T, IsArrayElement = false> = {
|
|
132
125
|
addValidation: (errors: ValidationError[]) => void;
|
|
133
126
|
applyJsonPatch: (patches: any[]) => void;
|
|
@@ -138,13 +131,13 @@ export type EndType<T, IsArrayElement = false> = {
|
|
|
138
131
|
get: () => T;
|
|
139
132
|
$get: () => T;
|
|
140
133
|
$derive: <R>(fn: EffectFunction<T, R>) => R;
|
|
141
|
-
_status:
|
|
142
|
-
getStatus: () =>
|
|
134
|
+
_status: 'fresh' | 'dirty' | 'synced' | 'restored' | 'unknown';
|
|
135
|
+
getStatus: () => 'fresh' | 'dirty' | 'synced' | 'restored' | 'unknown';
|
|
143
136
|
showValidationErrors: () => string[];
|
|
144
137
|
setValidation: (ctx: string) => void;
|
|
145
138
|
removeValidation: (ctx: string) => void;
|
|
146
139
|
ignoreFields: (fields: string[]) => StateObject<T>;
|
|
147
|
-
|
|
140
|
+
isSelected: boolean;
|
|
148
141
|
setSelected: (value: boolean) => void;
|
|
149
142
|
toggleSelected: () => void;
|
|
150
143
|
getFormRef: () => React.RefObject<any> | undefined;
|
|
@@ -160,7 +153,8 @@ export type EndType<T, IsArrayElement = false> = {
|
|
|
160
153
|
} : {});
|
|
161
154
|
export type StateObject<T> = (T extends any[] ? ArrayEndType<T> : T extends Record<string, unknown> | object ? {
|
|
162
155
|
[K in keyof T]-?: StateObject<T[K]>;
|
|
163
|
-
}
|
|
156
|
+
} : T extends string | number | boolean | null ? EndType<T, true> : never) & EndType<T, true> & {
|
|
157
|
+
toggle: T extends boolean ? () => void : never;
|
|
164
158
|
getAllFormRefs: () => Map<string, React.RefObject<any>>;
|
|
165
159
|
_componentId: string | null;
|
|
166
160
|
getComponents: () => ComponentsType;
|
|
@@ -179,40 +173,21 @@ export type StateObject<T> = (T extends any[] ? ArrayEndType<T> : T extends Reco
|
|
|
179
173
|
updateLog: UpdateTypeDetail[] | undefined;
|
|
180
174
|
update: UpdateTypeDetail;
|
|
181
175
|
}) => void) => void;
|
|
182
|
-
_isServerSynced: () => boolean;
|
|
183
176
|
getLocalStorage: (key: string) => LocalStorageData<T> | null;
|
|
184
177
|
};
|
|
185
178
|
export type CogsUpdate<T extends unknown> = UpdateType<T>;
|
|
186
|
-
export type EffectiveSetState<TStateObject> = (newStateOrFunction: UpdateArg<TStateObject>, path: string[], updateObj: {
|
|
187
|
-
updateType: "update" | "insert" | "cut";
|
|
188
|
-
}, validationKey?: string, opts?: UpdateOpts<TStateObject>) => void;
|
|
189
179
|
export type UpdateTypeDetail = {
|
|
190
180
|
timeStamp: number;
|
|
191
181
|
stateKey: string;
|
|
192
|
-
updateType:
|
|
182
|
+
updateType: 'update' | 'insert' | 'cut';
|
|
193
183
|
path: string[];
|
|
194
|
-
status:
|
|
184
|
+
status: 'new' | 'sent' | 'synced';
|
|
195
185
|
oldValue: any;
|
|
196
186
|
newValue: any;
|
|
197
187
|
userId?: number;
|
|
198
188
|
};
|
|
199
|
-
export type
|
|
200
|
-
|
|
201
|
-
action: ({ state, actionType }: {
|
|
202
|
-
state: T;
|
|
203
|
-
actionType: string;
|
|
204
|
-
}) => void;
|
|
205
|
-
debounce?: number;
|
|
206
|
-
}[];
|
|
207
|
-
type ArrayToObject<T extends string[]> = Record<T[number], string>;
|
|
208
|
-
type CookieType<T> = {
|
|
209
|
-
timeStamp: number;
|
|
210
|
-
value: T;
|
|
211
|
-
cookieName: string;
|
|
212
|
-
OnUnMountCookie?: Boolean;
|
|
213
|
-
};
|
|
214
|
-
export type CogsCookiesType<T extends string[] = string[]> = CookieType<ArrayToObject<T>>;
|
|
215
|
-
export type ReactivityType = "none" | "component" | "deps" | "all";
|
|
189
|
+
export type ReactivityUnion = 'none' | 'component' | 'deps' | 'all';
|
|
190
|
+
export type ReactivityType = 'none' | 'component' | 'deps' | 'all' | Array<Prettify<'none' | 'component' | 'deps' | 'all'>>;
|
|
216
191
|
type ValidationOptionsType = {
|
|
217
192
|
key?: string;
|
|
218
193
|
zodSchema?: z.ZodTypeAny;
|
|
@@ -223,11 +198,15 @@ export type OptionsType<T extends unknown = unknown> = {
|
|
|
223
198
|
componentId?: string;
|
|
224
199
|
serverSync?: ServerSyncType<T>;
|
|
225
200
|
validation?: ValidationOptionsType;
|
|
226
|
-
enableServerState?: boolean;
|
|
227
201
|
serverState?: {
|
|
228
202
|
id?: string | number;
|
|
229
203
|
data?: T;
|
|
230
|
-
status?:
|
|
204
|
+
status?: 'pending' | 'error' | 'success' | 'loading';
|
|
205
|
+
timestamp?: number;
|
|
206
|
+
merge?: boolean | {
|
|
207
|
+
strategy: 'append' | 'prepend' | 'diff';
|
|
208
|
+
key?: string;
|
|
209
|
+
};
|
|
231
210
|
};
|
|
232
211
|
sync?: {
|
|
233
212
|
action: (state: T) => Promise<{
|
|
@@ -252,11 +231,10 @@ export type OptionsType<T extends unknown = unknown> = {
|
|
|
252
231
|
onChange?: (state: T) => void;
|
|
253
232
|
};
|
|
254
233
|
formElements?: FormsElementsType;
|
|
255
|
-
enabledSync?: (state: T) => boolean;
|
|
256
234
|
reactiveDeps?: (state: T) => any[] | true;
|
|
257
|
-
reactiveType?: ReactivityType
|
|
235
|
+
reactiveType?: ReactivityType;
|
|
258
236
|
syncUpdate?: Partial<UpdateTypeDetail>;
|
|
259
|
-
|
|
237
|
+
defaultState?: T;
|
|
260
238
|
dependencies?: any[];
|
|
261
239
|
};
|
|
262
240
|
export type ServerSyncType<T> = {
|
|
@@ -277,19 +255,6 @@ export type ServerSyncType<T> = {
|
|
|
277
255
|
currentParams?: URLSearchParams;
|
|
278
256
|
};
|
|
279
257
|
};
|
|
280
|
-
export type SyncActionsType<T> = {
|
|
281
|
-
syncKey: string;
|
|
282
|
-
rollBackState?: T;
|
|
283
|
-
actionTimeStamp: number;
|
|
284
|
-
retryCount?: number;
|
|
285
|
-
status: "success" | "waiting" | "rolledBack" | "error" | "cancelled" | "failed";
|
|
286
|
-
snapshot?: {
|
|
287
|
-
name: string;
|
|
288
|
-
stateKeys: StateKeys[];
|
|
289
|
-
currentUrl: string;
|
|
290
|
-
currentParams?: URLSearchParams;
|
|
291
|
-
};
|
|
292
|
-
};
|
|
293
258
|
export type ValidationWrapperOptions<T extends unknown = unknown> = {
|
|
294
259
|
children: React.ReactNode;
|
|
295
260
|
active: boolean;
|
|
@@ -336,26 +301,50 @@ type LocalStorageData<T> = {
|
|
|
336
301
|
lastUpdated: number;
|
|
337
302
|
lastSyncedWithServer?: number;
|
|
338
303
|
baseServerState?: T;
|
|
304
|
+
stateSource?: 'default' | 'server' | 'localStorage';
|
|
339
305
|
};
|
|
340
306
|
export declare const notifyComponent: (stateKey: string, componentId: string) => void;
|
|
341
|
-
export declare function useCogsStateFn<TStateObject extends unknown>(stateObject: TStateObject, { stateKey, serverSync, localStorage, formElements, reactiveDeps, reactiveType, componentId,
|
|
307
|
+
export declare function useCogsStateFn<TStateObject extends unknown>(stateObject: TStateObject, { stateKey, serverSync, localStorage, formElements, reactiveDeps, reactiveType, componentId, defaultState, syncUpdate, dependencies, serverState, }?: {
|
|
342
308
|
stateKey?: string;
|
|
343
309
|
componentId?: string;
|
|
344
|
-
|
|
345
|
-
} & OptionsType<TStateObject>):
|
|
310
|
+
defaultState?: TStateObject;
|
|
311
|
+
} & OptionsType<TStateObject>): StateObject<TStateObject>;
|
|
312
|
+
export type MetaData = {
|
|
313
|
+
/**
|
|
314
|
+
* An array of the full, unique string IDs (e.g., `"stateKey.arrayName.id:123"`)
|
|
315
|
+
* of the items that belong to the current derived "view" of an array.
|
|
316
|
+
* This is the primary mechanism for tracking the state of filtered or sorted lists.
|
|
317
|
+
*
|
|
318
|
+
* - `stateFilter` populates this with only the IDs of items that passed the filter.
|
|
319
|
+
* - `stateSort` reorders this list to match the new sort order.
|
|
320
|
+
* - All subsequent chained operations (like `.get()`, `.index()`, or `.cut()`)
|
|
321
|
+
* MUST consult this list first to know which items they apply to and in what order.
|
|
322
|
+
*/
|
|
323
|
+
validIds?: string[];
|
|
324
|
+
/**
|
|
325
|
+
* An array of the actual filter functions that have been applied in a chain.
|
|
326
|
+
* This is primarily used by reactive renderers like `$stateMap` to make predictions.
|
|
327
|
+
*
|
|
328
|
+
* For example, when a new item is inserted into the original source array, a
|
|
329
|
+
* `$stateMap` renderer on a filtered view can use these functions to test if the
|
|
330
|
+
* newly inserted item should be dynamically rendered in its view.
|
|
331
|
+
*/
|
|
332
|
+
transforms?: Array<{
|
|
333
|
+
type: 'filter' | 'sort';
|
|
334
|
+
fn: Function;
|
|
335
|
+
}>;
|
|
336
|
+
};
|
|
346
337
|
export declare function $cogsSignal(proxy: {
|
|
347
338
|
_path: string[];
|
|
348
339
|
_stateKey: string;
|
|
349
340
|
_effect?: string;
|
|
341
|
+
_meta?: MetaData;
|
|
350
342
|
}): import('react').FunctionComponentElement<{
|
|
351
343
|
proxy: {
|
|
352
344
|
_path: string[];
|
|
353
345
|
_stateKey: string;
|
|
354
346
|
_effect?: string;
|
|
347
|
+
_meta?: MetaData;
|
|
355
348
|
};
|
|
356
349
|
}>;
|
|
357
|
-
export declare function $cogsSignalStore(proxy: {
|
|
358
|
-
_path: string[];
|
|
359
|
-
_stateKey: string;
|
|
360
|
-
}): import('react').ReactSVGElement;
|
|
361
350
|
export {};
|