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 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 { jsx as _jsx } from "react/jsx-runtime";
2
- import { createContext, useRef, useContext } from 'react';
3
- import { create, createStore, useStore } from 'zustand';
4
- import { storeMiddleware } from './store-middleware';
5
- export function defineStateFactory(options) {
6
- return () => options;
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
- export function defineStore(options) {
9
- return create(storeMiddleware(options));
9
+ function defineStore(options) {
10
+ return create(storeMiddleware(options));
10
11
  }
11
- export function defineContext(options) {
12
- const creatorResult = storeMiddleware(options);
13
- const $createStore = () => createStore()(creatorResult);
14
- const Context = createContext(null);
15
- const Provider = ({ children }) => {
16
- const storeRef = useRef($createStore());
17
- return _jsx(Context.Provider, { value: storeRef.current, children: children });
18
- };
19
- function $useContext(selector) {
20
- const store = useContext(Context);
21
- if (!store)
22
- throw new Error('Missing Provider in the tree');
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 { Provider, useContext: $useContext };
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 * from './types';
2
- export * from './store-middleware';
3
- export * from './define';
1
+ export { storeMiddleware } from './store-middleware.js';
2
+ export { defineContext, defineStateFactory, defineStore } from './define.js';
@@ -1,45 +1,48 @@
1
1
  import { produce } from 'immer';
2
- import { forOwn, isEqual, isEqualWith, keys, pick, some } from 'lodash-es';
3
- export function storeMiddleware(options) {
4
- return (set, get, store) => {
5
- const state = options.state();
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
- state[k] = getter(state);
20
+ const current = getter(normalState);
21
+ if (isEqual(newGetterState[k], current)) {
22
+ return;
23
+ }
24
+ newGetterState[k] = current;
8
25
  });
9
- // getterListener
10
- // ----------------------------------------------------------------------
11
- store.subscribe((state, prevState) => {
12
- const getterKeys = keys(options.getters);
13
- const normalStateKeys = keys(options.state());
14
- const normalState = pick(state, normalStateKeys);
15
- const isUpdate = isEqualWith(normalState, pick(prevState, normalStateKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
16
- if (isUpdate) {
17
- const newGetterState = pick(state, getterKeys);
18
- forOwn(options.getters, (getter, k) => {
19
- const current = getter(normalState);
20
- if (isEqual(newGetterState[k], current)) {
21
- return;
22
- }
23
- newGetterState[k] = current;
24
- });
25
- set(newGetterState);
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 };
@@ -2,4 +2,4 @@ import type { Meta, StoryObj } from '@storybook/react';
2
2
  declare const meta: Meta;
3
3
  export default meta;
4
4
  type Story = StoryObj;
5
- export declare const Primary: Story;
5
+ export declare const Demo: Story;
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> & OptionAction, actions: Omit<insideActionsType<S>, 'subscribe'>, store: StoreApi<S>) => OptionAction;
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
- export {};
1
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "define-zustand",
3
- "version": "3.3.0",
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"
@@ -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
- };