define-zustand 3.4.0 → 3.6.0

package/dist/define.d.ts

@@ -1,10 +1,21 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { gettersStateType, modelStateType, optionsType } from './types';
+import { gettersStateType, optionsType } from './types';
 export declare function defineStateFactory<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): () => optionsType<S, G, Actions>;
-export declare function defineStore<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): import("zustand").UseBoundStore<import("zustand").StoreApi<modelStateType<S, G, Actions>>>;
+export declare function defineStore<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): import("zustand").UseBoundStore<import("zustand").StoreApi<import("./types").modelStateType<S, G, Actions>>>;
+export declare function defineQuery<P, F extends (params: P) => any>(options: {
+    params: P;
+    queryFn: F;
+}): import("zustand").UseBoundStore<import("zustand").StoreApi<import("./types").modelStateType<{
+    params: P;
+    loading: boolean;
+    data: Awaited<ReturnType<F>> | undefined;
+    error: Error | undefined;
+}, {}, {
+    query: (params?: Partial<P>) => Promise<void>;
+}>>>;
 export declare function defineContext<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): {
     Provider: FunctionComponent<{
         children?: ReactNode;
-    }>;
-    useContext: <T>(selector: (state: modelStateType<S, G, Actions>) => T) => T;
+    } & Partial<S>>;
+    useContext: <T>(selector: (state: import("./types").modelStateType<S, G, Actions>) => T) => T;
 };

package/dist/define.js

@@ -1,26 +1,79 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useRef, useContext } from 'react';
-import { create, createStore, useStore } from 'zustand';
-import { storeMiddleware } from './store-middleware';
-export function defineStateFactory(options) {
-    return () => options;
+import { useRef, useContext, createContext } from 'react';
+import { create, useStore, createStore } from 'zustand';
+import { storeMiddleware } from './store-middleware.js';
+import { jsx } from 'react/jsx-runtime';
+
+function defineStateFactory(options) {
+  return () => options;
 }
-export function defineStore(options) {
-    return create(storeMiddleware(options));
+function defineStore(options) {
+  return create(storeMiddleware(options));
 }
-export function defineContext(options) {
-    const creatorResult = storeMiddleware(options);
-    const $createStore = () => createStore()(creatorResult);
-    const Context = createContext(null);
-    const Provider = ({ children }) => {
-        const storeRef = useRef($createStore());
-        return _jsx(Context.Provider, { value: storeRef.current, children: children });
-    };
-    function $useContext(selector) {
-        const store = useContext(Context);
-        if (!store)
-            throw new Error('Missing Provider in the tree');
-        return useStore(store, selector);
+function defineQuery(options) {
+  return defineStore({
+    state: () => ({
+      params: options.params,
+      loading: false,
+      data: void 0,
+      error: void 0
+    }),
+    getters: {},
+    actions: (setState, getState) => ({
+      query: async params => {
+        try {
+          const state = getState();
+          setState(state => {
+            state.loading = true;
+          });
+          const newParams = {
+            ...state.params,
+            ...params
+          };
+          const data = await options.queryFn(newParams);
+          setState(state => {
+            state.data = data;
+            state.params = newParams;
+          });
+        } catch (error) {
+          setState(state => {
+            state.error = new Error(error.message);
+          });
+        } finally {
+          setState(state => {
+            state.loading = false;
+          });
+        }
+      }
+    })
+  });
+}
+function defineContext(options) {
+  const creatorResult = storeMiddleware(options);
+  const $createStore = () => createStore()(creatorResult);
+  const Context = /*#__PURE__*/createContext(null);
+  const Provider = ({
+    children,
+    ...defaultValue
+  }) => {
+    const storeRef = useRef();
+    if (storeRef.current === void 0) {
+      storeRef.current = $createStore();
+      storeRef.current.setState(defaultValue);
     }
-    return { Provider, useContext: $useContext };
+    return /*#__PURE__*/jsx(Context.Provider, {
+      value: storeRef.current,
+      children: children
+    });
+  };
+  function $useContext(selector) {
+    const store = useContext(Context);
+    if (!store) throw new Error('Missing Provider in the tree');
+    return useStore(store, selector);
+  }
+  return {
+    Provider,
+    useContext: $useContext
+  };
 }
+
+export { defineContext, defineQuery, defineStateFactory, defineStore };

package/dist/index.js

@@ -1,3 +1,2 @@
-export * from './types';
-export * from './store-middleware';
-export * from './define';
+export { storeMiddleware } from './store-middleware.js';
+export { defineContext, defineQuery, defineStateFactory, defineStore } from './define.js';

package/dist/store-middleware.js

@@ -1,45 +1,48 @@
 import { produce } from 'immer';
-import { forOwn, isEqual, isEqualWith, keys, pick, some } from 'lodash-es';
-export function storeMiddleware(options) {
-    return (set, get, store) => {
-        const state = options.state();
+import { forOwn, keys, pick, isEqualWith, some, isEqual } from 'lodash-es';
+
+function storeMiddleware(options) {
+  return (set, get, store) => {
+    const state = options.state();
+    forOwn(options.getters, (getter, k) => {
+      state[k] = getter(state);
+    });
+    // getterListener
+    // ----------------------------------------------------------------------
+    store.subscribe((state, prevState) => {
+      const getterKeys = keys(options.getters);
+      const normalStateKeys = keys(options.state());
+      const normalState = pick(state, normalStateKeys);
+      const isUpdate = isEqualWith(normalState, pick(prevState, normalStateKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
+      if (isUpdate) {
+        const newGetterState = pick(state, getterKeys);
         forOwn(options.getters, (getter, k) => {
-            state[k] = getter(state);
+          const current = getter(normalState);
+          if (isEqual(newGetterState[k], current)) {
+            return;
+          }
+          newGetterState[k] = current;
         });
-        // getterListener
-        // ----------------------------------------------------------------------
-        store.subscribe((state, prevState) => {
-            const getterKeys = keys(options.getters);
-            const normalStateKeys = keys(options.state());
-            const normalState = pick(state, normalStateKeys);
-            const isUpdate = isEqualWith(normalState, pick(prevState, normalStateKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
-            if (isUpdate) {
-                const newGetterState = pick(state, getterKeys);
-                forOwn(options.getters, (getter, k) => {
-                    const current = getter(normalState);
-                    if (isEqual(newGetterState[k], current)) {
-                        return;
-                    }
-                    newGetterState[k] = current;
-                });
-                set(newGetterState);
-            }
-        });
-        // actions
-        // ----------------------------------------------------------------------
-        store.setState = (updater, replace) => {
-            const nextState = typeof updater === 'function' ? produce(updater) : updater;
-            return set(nextState, replace);
-        };
-        const reset = () => {
-            set(() => options.state());
-        };
-        return {
-            ...state,
-            reset,
-            setState: store.setState,
-            subscribe: store.subscribe,
-            ...options.actions(store.setState, get, store)
-        };
+        set(newGetterState);
+      }
+    });
+    // actions
+    // ----------------------------------------------------------------------
+    store.setState = (updater, replace) => {
+      const nextState = typeof updater === 'function' ? produce(updater) : updater;
+      return set(nextState, replace);
+    };
+    const reset = () => {
+      set(() => options.state());
+    };
+    return {
+      ...state,
+      reset,
+      setState: store.setState,
+      subscribe: store.subscribe,
+      ...options.actions(store.setState, get, store)
     };
+  };
 }
+
+export { storeMiddleware };

package/dist/types.js

@@ -1 +1 @@
-export {};
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "define-zustand",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,17 +11,7 @@
   "devDependencies": {
     "@types/jest": "^29.5.2",
     "@types/lodash-es": "^4.17.8",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
-    "eslint": "8.43.0",
-    "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-prettier": "4.2.1",
-    "jest": "^29.5.0",
-    "prettier": "2.8.8",
     "react": "~18.3.1",
-    "stylelint": "15.9.0",
-    "stylelint-config-standard": "33.0.0",
     "ts-jest": "29.0.5",
     "typescript": "5.7.3",
     "zustand": "5.0.3"

package/dist/test.stories.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { defineStore } from '.';
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta = {
-    title: 'define-zustand',
-    component: () => null
-};
-export default meta;
-const useStore = defineStore({
-    state: () => ({
-        count: 0,
-        count2: 0
-    }),
-    getters: {
-        a: state => state.count + 1,
-        b: state => state.count2 + 2
-    },
-    actions: (setState, getState, store) => ({
-        test: () => getState()
-    })
-});
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Demo = {
-    render: () => {
-        const a = useStore(state => state.a);
-        const b = useStore(state => state.b);
-        const setState = useStore(state => state.setState);
-        const test = useStore(state => state.test);
-        console.log('a', a);
-        console.log('b', b);
-        console.log('test', test());
-        return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
-                        setState(state => {
-                            state.count += 1;
-                            state.count2 += 1;
-                        });
-                        setState(state => {
-                            state.count2 += 1;
-                        });
-                    }, children: "+" }), _jsx("div", { children: a })] }));
-    }
-};