define-zustand 3.2.1 → 3.4.0

package/README.md

@@ -1,6 +1,6 @@
 # define-zustand
 
-> Quickly define [zustand](https://github.com/pmndrs/zustand) state
+> Quickly define [zustand](https://github.com/pmndrs/zustand) state. Supports defining computed properties.
 
 ## Install
 

package/dist/define.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { gettersStateType, modelStateType, 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 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;
+};

package/dist/define.js

@@ -0,0 +1,26 @@
+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;
+}
+export 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);
+    }
+    return { Provider, useContext: $useContext };
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from './utils';
 export * from './types';
+export * from './store-middleware';
+export * from './define';

package/dist/index.js

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

package/dist/store-middleware.d.ts

@@ -0,0 +1,3 @@
+import { StateCreator } from 'zustand';
+import { gettersStateType, optionsType, modelStateType } from './types';
+export declare function storeMiddleware<S extends Record<string, any>, G extends gettersStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): StateCreator<modelStateType<S, G, Actions>>;

package/dist/store-middleware.js

@@ -0,0 +1,45 @@
+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();
+        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) => {
+                    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)
+        };
+    };
+}

package/dist/test.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;

package/dist/test.stories.js

@@ -0,0 +1,42 @@
+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 })] }));
+    }
+};

package/dist/types.d.ts

@@ -1,9 +1,9 @@
 import { StoreApi as ZStoreApi, ExtractState as ZExtractState } from 'zustand';
-export type defGetterStateType<S> = Record<string, (state: S) => any>;
-export type ExtraGetterState<S, G extends defGetterStateType<S>> = {
+export type gettersStateType<S> = Record<string, (state: S) => any>;
+export type ExtraGettersState<G extends gettersStateType<any>> = {
     [key in keyof G]: ReturnType<G[key]>;
 };
-export type stateType<S, G extends defGetterStateType<S>> = S & ExtraGetterState<S, G>;
+export type stateType<S, G extends gettersStateType<any>> = S & ExtraGettersState<G>;
 export type StoreApi<S> = Omit<ZStoreApi<S>, 'setState'> & {
     setState: (updater: ((state: S) => void) | Partial<S>, replace?: boolean) => void;
 };
@@ -13,10 +13,10 @@ export interface insideActionsType<S> {
     setState: StoreApi<S>['setState'];
     subscribe: StoreApi<S>['subscribe'];
 }
-export type actionsType<S, G extends defGetterStateType<S>, OptionAction> = (getState: () => stateType<S, G>, actions: Omit<insideActionsType<S>, 'subscribe'>, store: StoreApi<S>) => OptionAction;
-export interface optionsType<S, G extends defGetterStateType<S>, Actions> {
+export type actionsType<S, G extends gettersStateType<any>, OptionAction> = (setState: insideActionsType<S>['setState'], getState: () => stateType<S, G> & insideActionsType<S>, store: StoreApi<S>) => OptionAction;
+export interface optionsType<S, G extends gettersStateType<any>, Actions> {
     state: () => S;
-    getter: G;
+    getters: G;
     actions: actionsType<S, G, Actions>;
 }
-export type modelStateType<S, G extends defGetterStateType<S>, Actions> = stateType<S, G> & Actions & insideActionsType<S>;
+export type modelStateType<S, G extends gettersStateType<any>, Actions> = stateType<S, G> & Actions & insideActionsType<S>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "define-zustand",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/utils.d.ts

@@ -1,11 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { defGetterStateType, optionsType, modelStateType } from './types';
-export declare function defineStateFactory<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): () => optionsType<S, G, OptionActions>;
-export declare function creator<S extends Record<string, any>, G extends defGetterStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): (set: any, get: any, store: any) => modelStateType<S, G, Actions>;
-export declare function defineStore<S extends Record<string, any>, G extends defGetterStateType<S>, Actions extends Record<string, any>>(options: optionsType<S, G, Actions>): import("zustand").UseBoundStore<import("zustand").StoreApi<modelStateType<S, G, Actions>>>;
-export declare function defineContext<S extends Record<string, any>, G extends defGetterStateType<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;
-};

package/dist/utils.js

@@ -1,83 +0,0 @@
-import { useRef, useContext, createContext } from 'react';
-import { create, useStore, createStore } from 'zustand';
-import { produce } from 'immer';
-import { keys, isEqualWith, omit, some, pick, forOwn, isEqual } from 'lodash-es';
-import { jsx } from 'react/jsx-runtime';
-
-function defineStateFactory(options) {
-  return () => options;
-}
-function creator(options) {
-  function createDefState() {
-    const state = options.state();
-    forOwn(options.getter, (getter, k) => {
-      state[k] = getter(state);
-    });
-    return state;
-  }
-  return (set, get, store) => {
-    // getterListener
-    // ----------------------------------------------------------------------
-    store.subscribe((state, prevState) => {
-      const getterKeys = keys(options.getter);
-      const isUpdate = isEqualWith(omit(state, getterKeys), omit(prevState, getterKeys), (current, prev) => some(current, (v, k) => v !== prev[k]));
-      if (isUpdate) {
-        const newGetterState = pick(state, getterKeys);
-        forOwn(options.getter, (getter, k) => {
-          if (isEqual(newGetterState[k], getter(state))) {
-            return;
-          }
-          newGetterState[k] = getter(state);
-        });
-        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 {
-      ...createDefState(),
-      reset,
-      setState: store.setState,
-      subscribe: store.subscribe,
-      ...options.actions(get, {
-        reset,
-        setState: store.setState
-      }, store)
-    };
-  };
-}
-function defineStore(options) {
-  return create(creator(options));
-}
-function defineContext(options) {
-  const creatorResult = creator(options);
-  const $createStore = () => createStore()(creatorResult);
-  const Context = /*#__PURE__*/createContext(null);
-  const Provider = ({
-    children
-  }) => {
-    const storeRef = useRef($createStore());
-    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 { creator, defineContext, defineStateFactory, defineStore };