define-zustand 3.3.0 → 3.5.0
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/define.d.ts +1 -1
- package/dist/define.js +37 -22
- package/dist/index.js +2 -3
- package/dist/store-middleware.js +43 -40
- package/dist/test.stories.d.ts +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.js +1 -1
- package/package.json +1 -11
- package/dist/test.stories.js +0 -45
package/dist/define.d.ts
CHANGED
|
@@ -5,6 +5,6 @@ export declare function defineStore<S extends Record<string, any>, G extends get
|
|
|
5
5
|
export declare function defineContext<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): {
|
|
6
6
|
Provider: FunctionComponent<{
|
|
7
7
|
children?: ReactNode;
|
|
8
|
-
}
|
|
8
|
+
} & Partial<S>>;
|
|
9
9
|
useContext: <T>(selector: (state: import("./types").modelStateType<S, G, Actions>) => T) => T;
|
|
10
10
|
};
|
package/dist/define.js
CHANGED
|
@@ -1,26 +1,41 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { useRef, useContext, createContext } from 'react';
|
|
2
|
+
import { create, useStore, createStore } from 'zustand';
|
|
3
|
+
import { storeMiddleware } from './store-middleware.js';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function defineStateFactory(options) {
|
|
7
|
+
return () => options;
|
|
7
8
|
}
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
function defineStore(options) {
|
|
10
|
+
return create(storeMiddleware(options));
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return useStore(store, selector);
|
|
12
|
+
function defineContext(options) {
|
|
13
|
+
const creatorResult = storeMiddleware(options);
|
|
14
|
+
const $createStore = () => createStore()(creatorResult);
|
|
15
|
+
const Context = /*#__PURE__*/createContext(null);
|
|
16
|
+
const Provider = ({
|
|
17
|
+
children,
|
|
18
|
+
...defaultValue
|
|
19
|
+
}) => {
|
|
20
|
+
const storeRef = useRef();
|
|
21
|
+
if (storeRef.current === void 0) {
|
|
22
|
+
storeRef.current = $createStore();
|
|
23
|
+
storeRef.current.setState(defaultValue);
|
|
24
24
|
}
|
|
25
|
-
return
|
|
25
|
+
return /*#__PURE__*/jsx(Context.Provider, {
|
|
26
|
+
value: storeRef.current,
|
|
27
|
+
children: children
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
function $useContext(selector) {
|
|
31
|
+
const store = useContext(Context);
|
|
32
|
+
if (!store) throw new Error('Missing Provider in the tree');
|
|
33
|
+
return useStore(store, selector);
|
|
34
|
+
}
|
|
35
|
+
return {
|
|
36
|
+
Provider,
|
|
37
|
+
useContext: $useContext
|
|
38
|
+
};
|
|
26
39
|
}
|
|
40
|
+
|
|
41
|
+
export { defineContext, defineStateFactory, defineStore };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export * from './define';
|
|
1
|
+
export { storeMiddleware } from './store-middleware.js';
|
|
2
|
+
export { defineContext, defineStateFactory, defineStore } from './define.js';
|
package/dist/store-middleware.js
CHANGED
|
@@ -1,45 +1,48 @@
|
|
|
1
1
|
import { produce } from 'immer';
|
|
2
|
-
import { forOwn,
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import { forOwn, keys, pick, isEqualWith, some, isEqual } from 'lodash-es';
|
|
3
|
+
|
|
4
|
+
function storeMiddleware(options) {
|
|
5
|
+
return (set, get, store) => {
|
|
6
|
+
const state = options.state();
|
|
7
|
+
forOwn(options.getters, (getter, k) => {
|
|
8
|
+
state[k] = getter(state);
|
|
9
|
+
});
|
|
10
|
+
// getterListener
|
|
11
|
+
// ----------------------------------------------------------------------
|
|
12
|
+
store.subscribe((state, prevState) => {
|
|
13
|
+
const getterKeys = keys(options.getters);
|
|
14
|
+
const normalStateKeys = keys(options.state());
|
|
15
|
+
const normalState = pick(state, normalStateKeys);
|
|
16
|
+
const isUpdate = isEqualWith(normalState, pick(prevState, normalStateKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
|
|
17
|
+
if (isUpdate) {
|
|
18
|
+
const newGetterState = pick(state, getterKeys);
|
|
6
19
|
forOwn(options.getters, (getter, k) => {
|
|
7
|
-
|
|
20
|
+
const current = getter(normalState);
|
|
21
|
+
if (isEqual(newGetterState[k], current)) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
newGetterState[k] = current;
|
|
8
25
|
});
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
28
|
-
// actions
|
|
29
|
-
// ----------------------------------------------------------------------
|
|
30
|
-
store.setState = (updater, replace) => {
|
|
31
|
-
const nextState = typeof updater === 'function' ? produce(updater) : updater;
|
|
32
|
-
return set(nextState, replace);
|
|
33
|
-
};
|
|
34
|
-
const reset = () => {
|
|
35
|
-
set(() => options.state());
|
|
36
|
-
};
|
|
37
|
-
return {
|
|
38
|
-
...state,
|
|
39
|
-
reset,
|
|
40
|
-
setState: store.setState,
|
|
41
|
-
subscribe: store.subscribe,
|
|
42
|
-
...options.actions(get, { reset, setState: store.setState }, store)
|
|
43
|
-
};
|
|
26
|
+
set(newGetterState);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
// actions
|
|
30
|
+
// ----------------------------------------------------------------------
|
|
31
|
+
store.setState = (updater, replace) => {
|
|
32
|
+
const nextState = typeof updater === 'function' ? produce(updater) : updater;
|
|
33
|
+
return set(nextState, replace);
|
|
34
|
+
};
|
|
35
|
+
const reset = () => {
|
|
36
|
+
set(() => options.state());
|
|
37
|
+
};
|
|
38
|
+
return {
|
|
39
|
+
...state,
|
|
40
|
+
reset,
|
|
41
|
+
setState: store.setState,
|
|
42
|
+
subscribe: store.subscribe,
|
|
43
|
+
...options.actions(store.setState, get, store)
|
|
44
44
|
};
|
|
45
|
+
};
|
|
45
46
|
}
|
|
47
|
+
|
|
48
|
+
export { storeMiddleware };
|
package/dist/test.stories.d.ts
CHANGED
package/dist/types.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export interface insideActionsType<S> {
|
|
|
13
13
|
setState: StoreApi<S>['setState'];
|
|
14
14
|
subscribe: StoreApi<S>['subscribe'];
|
|
15
15
|
}
|
|
16
|
-
export type actionsType<S, G extends gettersStateType<any>, OptionAction> = (getState: () => stateType<S, G> &
|
|
16
|
+
export type actionsType<S, G extends gettersStateType<any>, OptionAction> = (setState: insideActionsType<S>['setState'], getState: () => stateType<S, G> & insideActionsType<S>, store: StoreApi<S>) => OptionAction;
|
|
17
17
|
export interface optionsType<S, G extends gettersStateType<any>, Actions> {
|
|
18
18
|
state: () => S;
|
|
19
19
|
getters: G;
|
package/dist/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "define-zustand",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -11,17 +11,7 @@
|
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@types/jest": "^29.5.2",
|
|
13
13
|
"@types/lodash-es": "^4.17.8",
|
|
14
|
-
"@typescript-eslint/eslint-plugin": "5.60.1",
|
|
15
|
-
"@typescript-eslint/parser": "5.60.1",
|
|
16
|
-
"eslint": "8.43.0",
|
|
17
|
-
"eslint-import-resolver-typescript": "3.5.5",
|
|
18
|
-
"eslint-plugin-import": "2.27.5",
|
|
19
|
-
"eslint-plugin-prettier": "4.2.1",
|
|
20
|
-
"jest": "^29.5.0",
|
|
21
|
-
"prettier": "2.8.8",
|
|
22
14
|
"react": "~18.3.1",
|
|
23
|
-
"stylelint": "15.9.0",
|
|
24
|
-
"stylelint-config-standard": "33.0.0",
|
|
25
15
|
"ts-jest": "29.0.5",
|
|
26
16
|
"typescript": "5.7.3",
|
|
27
17
|
"zustand": "5.0.3"
|
package/dist/test.stories.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { defineStore } from '.';
|
|
3
|
-
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'define-zustand',
|
|
6
|
-
component: () => null
|
|
7
|
-
};
|
|
8
|
-
export default meta;
|
|
9
|
-
const useStore = defineStore({
|
|
10
|
-
state: () => ({
|
|
11
|
-
count: 0,
|
|
12
|
-
count2: 0
|
|
13
|
-
}),
|
|
14
|
-
getters: {
|
|
15
|
-
a: state => state.count + 1,
|
|
16
|
-
b: state => state.count2 + 2
|
|
17
|
-
},
|
|
18
|
-
actions: get => ({
|
|
19
|
-
test: () => {
|
|
20
|
-
console.log('1', 1);
|
|
21
|
-
},
|
|
22
|
-
t: () => {
|
|
23
|
-
get();
|
|
24
|
-
}
|
|
25
|
-
})
|
|
26
|
-
});
|
|
27
|
-
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
|
|
28
|
-
export const Primary = {
|
|
29
|
-
render: () => {
|
|
30
|
-
const a = useStore(state => state.a);
|
|
31
|
-
const b = useStore(state => state.b);
|
|
32
|
-
const setState = useStore(state => state.setState);
|
|
33
|
-
console.log('a', a);
|
|
34
|
-
console.log('b', b);
|
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
|
|
36
|
-
setState(state => {
|
|
37
|
-
state.count += 1;
|
|
38
|
-
state.count2 += 1;
|
|
39
|
-
});
|
|
40
|
-
setState(state => {
|
|
41
|
-
state.count2 += 1;
|
|
42
|
-
});
|
|
43
|
-
}, children: "+" }), _jsx("div", { children: a })] }));
|
|
44
|
-
}
|
|
45
|
-
};
|