define-zustand 2.0.1 → 3.0.1
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.d.ts +2 -23
- package/dist/index.js +1 -52
- package/dist/types.d.ts +19 -0
- package/dist/types.js +1 -0
- package/dist/utils.d.ts +11 -0
- package/dist/utils.js +80 -0
- package/package.json +4 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,23 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
setState: (updater: ((state: S) => void) | Partial<S>, replace?: boolean) => void;
|
|
4
|
-
};
|
|
5
|
-
export interface insideActionsType<S> {
|
|
6
|
-
reset: () => void;
|
|
7
|
-
setState: StoreApi<S>['setState'];
|
|
8
|
-
}
|
|
9
|
-
export type actionsType<S, OptionAction, InsideActions = unknown> = (getState: () => S, actions: insideActionsType<S> & InsideActions, store: StoreApi<S>) => OptionAction;
|
|
10
|
-
export type defGetterStateType<S> = Record<string, (state: S) => any>;
|
|
11
|
-
export type ExtraGetterState<S, G extends defGetterStateType<S>> = {
|
|
12
|
-
[key in keyof G]: ReturnType<G[key]>;
|
|
13
|
-
};
|
|
14
|
-
export interface optionsType<S, G, OptionAction> {
|
|
15
|
-
state: () => S;
|
|
16
|
-
getter: G;
|
|
17
|
-
actions: actionsType<S, OptionAction>;
|
|
18
|
-
}
|
|
19
|
-
export default function defineZustand<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): import("zustand").UseBoundStore<ZStoreApi<Omit<S & ExtraGetterState<S, G>, "reset" | "setState" | "subscribe" | keyof OptionActions> & {
|
|
20
|
-
reset: () => void;
|
|
21
|
-
setState: (updater: Partial<S> | ((state: S) => void), replace?: boolean) => void;
|
|
22
|
-
subscribe: (listener: (state: S & ExtraGetterState<S, G>, prevState: S & ExtraGetterState<S, G>) => void) => () => void;
|
|
23
|
-
} & OptionActions>>;
|
|
1
|
+
export * from './utils';
|
|
2
|
+
export * from './types';
|
package/dist/index.js
CHANGED
|
@@ -1,52 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { combine } from 'zustand/middleware';
|
|
3
|
-
import { produce } from 'immer';
|
|
4
|
-
import { keys, isEqualWith, omit, some, pick, forEach, isEqual } from 'lodash-es';
|
|
5
|
-
|
|
6
|
-
function defineZustand(options) {
|
|
7
|
-
function createDefState() {
|
|
8
|
-
const state = options.state();
|
|
9
|
-
forEach(options.getter, (getter, k) => {
|
|
10
|
-
state[k] = getter(state);
|
|
11
|
-
});
|
|
12
|
-
return state;
|
|
13
|
-
}
|
|
14
|
-
return create(combine(createDefState(), (set, get, store) => {
|
|
15
|
-
// getterListener
|
|
16
|
-
// ----------------------------------------------------------------------
|
|
17
|
-
store.subscribe((state, prevState) => {
|
|
18
|
-
const getterKeys = keys(options.getter);
|
|
19
|
-
const isUpdate = isEqualWith(omit(state, getterKeys), omit(prevState, getterKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
|
|
20
|
-
if (isUpdate) {
|
|
21
|
-
const newGetterState = pick(state, getterKeys);
|
|
22
|
-
forEach(options.getter, (getter, k) => {
|
|
23
|
-
if (isEqual(newGetterState[k], getter(state))) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
newGetterState[k] = getter(state);
|
|
27
|
-
});
|
|
28
|
-
set(newGetterState);
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
// actions
|
|
32
|
-
// ----------------------------------------------------------------------
|
|
33
|
-
store.setState = (updater, replace) => {
|
|
34
|
-
const nextState = typeof updater === 'function' ? produce(updater) : updater;
|
|
35
|
-
return set(nextState, replace);
|
|
36
|
-
};
|
|
37
|
-
const reset = () => {
|
|
38
|
-
set(() => options.state());
|
|
39
|
-
};
|
|
40
|
-
return {
|
|
41
|
-
reset,
|
|
42
|
-
setState: store.setState,
|
|
43
|
-
subscribe: store.subscribe,
|
|
44
|
-
...options.actions(get, {
|
|
45
|
-
reset,
|
|
46
|
-
setState: store.setState
|
|
47
|
-
}, store)
|
|
48
|
-
};
|
|
49
|
-
}));
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export { defineZustand as default };
|
|
1
|
+
export { creator, defineContext, defineStore } from './utils.js';
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { StoreApi as ZStoreApi } from 'zustand';
|
|
2
|
+
export type StoreApi<S> = Omit<ZStoreApi<S>, 'setState'> & {
|
|
3
|
+
setState: (updater: ((state: S) => void) | Partial<S>, replace?: boolean) => void;
|
|
4
|
+
};
|
|
5
|
+
export interface insideActionsType<S> {
|
|
6
|
+
reset: () => void;
|
|
7
|
+
setState: StoreApi<S>['setState'];
|
|
8
|
+
subscribe: StoreApi<S>['subscribe'];
|
|
9
|
+
}
|
|
10
|
+
export type actionsType<S, OptionAction, InsideActions = unknown> = (getState: () => S, actions: Omit<insideActionsType<S>, 'subscribe'> & InsideActions, store: StoreApi<S>) => OptionAction;
|
|
11
|
+
export type defGetterStateType<S> = Record<string, (state: S) => any>;
|
|
12
|
+
export type ExtraGetterState<S, G extends defGetterStateType<S>> = {
|
|
13
|
+
[key in keyof G]: ReturnType<G[key]>;
|
|
14
|
+
};
|
|
15
|
+
export interface optionsType<S, G, OptionAction> {
|
|
16
|
+
state: () => S;
|
|
17
|
+
getter: G;
|
|
18
|
+
actions: actionsType<S, OptionAction>;
|
|
19
|
+
}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
import { StateCreator } from 'zustand';
|
|
3
|
+
import { defGetterStateType, optionsType, ExtraGetterState, insideActionsType } from './types';
|
|
4
|
+
export declare function creator<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): StateCreator<S & ExtraGetterState<S, G> & insideActionsType<S>>;
|
|
5
|
+
export declare function defineStore<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): import("zustand").UseBoundStore<import("zustand").StoreApi<S & ExtraGetterState<S, G> & insideActionsType<S>>>;
|
|
6
|
+
export declare function defineContext<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): {
|
|
7
|
+
Provider: FunctionComponent<{
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
}>;
|
|
10
|
+
useContext: <T>(selector: (state: S & ExtraGetterState<S, G> & insideActionsType<S>) => T) => T;
|
|
11
|
+
};
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useRef, useContext, createContext } from 'react';
|
|
2
|
+
import { create, createStore, useStore } from 'zustand';
|
|
3
|
+
import { produce } from 'immer';
|
|
4
|
+
import { keys, isEqualWith, omit, some, pick, forEach, isEqual } from 'lodash-es';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function creator(options) {
|
|
8
|
+
function createDefState() {
|
|
9
|
+
const state = options.state();
|
|
10
|
+
forEach(options.getter, (getter, k) => {
|
|
11
|
+
state[k] = getter(state);
|
|
12
|
+
});
|
|
13
|
+
return state;
|
|
14
|
+
}
|
|
15
|
+
return (set, get, store) => {
|
|
16
|
+
// getterListener
|
|
17
|
+
// ----------------------------------------------------------------------
|
|
18
|
+
store.subscribe((state, prevState) => {
|
|
19
|
+
const getterKeys = keys(options.getter);
|
|
20
|
+
const isUpdate = isEqualWith(omit(state, getterKeys), omit(prevState, getterKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
|
|
21
|
+
if (isUpdate) {
|
|
22
|
+
const newGetterState = pick(state, getterKeys);
|
|
23
|
+
forEach(options.getter, (getter, k) => {
|
|
24
|
+
if (isEqual(newGetterState[k], getter(state))) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
newGetterState[k] = getter(state);
|
|
28
|
+
});
|
|
29
|
+
set(newGetterState);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
// actions
|
|
33
|
+
// ----------------------------------------------------------------------
|
|
34
|
+
store.setState = (updater, replace) => {
|
|
35
|
+
const nextState = typeof updater === 'function' ? produce(updater) : updater;
|
|
36
|
+
return set(nextState, replace);
|
|
37
|
+
};
|
|
38
|
+
const reset = () => {
|
|
39
|
+
set(() => options.state());
|
|
40
|
+
};
|
|
41
|
+
return {
|
|
42
|
+
...createDefState(),
|
|
43
|
+
reset,
|
|
44
|
+
setState: store.setState,
|
|
45
|
+
subscribe: store.subscribe,
|
|
46
|
+
...options.actions(get, {
|
|
47
|
+
reset,
|
|
48
|
+
setState: store.setState
|
|
49
|
+
}, store)
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
function defineStore(options) {
|
|
54
|
+
return create(creator(options));
|
|
55
|
+
}
|
|
56
|
+
function defineContext(options) {
|
|
57
|
+
const creatorResult = creator(options);
|
|
58
|
+
const store = createStore()(creatorResult);
|
|
59
|
+
const Context = /*#__PURE__*/createContext(null);
|
|
60
|
+
const Provider = ({
|
|
61
|
+
children
|
|
62
|
+
}) => {
|
|
63
|
+
const storeRef = useRef(store);
|
|
64
|
+
return /*#__PURE__*/jsx(Context.Provider, {
|
|
65
|
+
value: storeRef.current,
|
|
66
|
+
children: children
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
function $useContext(selector) {
|
|
70
|
+
const store = useContext(Context);
|
|
71
|
+
if (!store) throw new Error('Missing Provider in the tree');
|
|
72
|
+
return useStore(store, selector);
|
|
73
|
+
}
|
|
74
|
+
return {
|
|
75
|
+
Provider,
|
|
76
|
+
useContext: $useContext
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export { creator, defineContext, defineStore };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "define-zustand",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"eslint-plugin-prettier": "4.2.1",
|
|
21
21
|
"jest": "^29.5.0",
|
|
22
22
|
"prettier": "2.8.8",
|
|
23
|
+
"react": "~18.2.0",
|
|
23
24
|
"stylelint": "15.9.0",
|
|
24
25
|
"stylelint-config-standard": "33.0.0",
|
|
25
26
|
"ts-jest": "29.0.5",
|
|
@@ -27,10 +28,12 @@
|
|
|
27
28
|
"zustand": "^4.4.1"
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|
|
31
|
+
"@types/react": "~18.2.28",
|
|
30
32
|
"immer": "^10.0.2",
|
|
31
33
|
"lodash-es": "^4.17.21"
|
|
32
34
|
},
|
|
33
35
|
"peerDependencies": {
|
|
36
|
+
"react": "~18.2.0",
|
|
34
37
|
"zustand": "^4.4.1"
|
|
35
38
|
},
|
|
36
39
|
"scripts": {
|