define-zustand 2.0.0 → 3.0.0

package/dist/index.d.ts

@@ -1,23 +1,2 @@
-import { StoreApi as ZStoreApi } from 'zustand';
-export type StoreApi<S> = Omit<ZStoreApi<S>, 'setState'> & {
-    setState: (updater: ((state: S) => void) | Partial<S>, replace?: boolean) => void;
-};
-export interface insideActionsType<S> {
-    reset: () => void;
-    setState: StoreApi<S>['setState'];
-}
-export type actionsType<S, OptionAction, InsideActions = unknown> = (getState: () => S, actions: insideActionsType<S> & InsideActions, store: StoreApi<S>) => OptionAction;
-export type defGetterStateType<S> = Record<string, (state: S) => any>;
-export type ExtraGetterState<S, G extends defGetterStateType<S>> = {
-    [key in keyof G]: ReturnType<G[key]>;
-};
-export interface optionsType<S, G, OptionAction> {
-    state: () => S;
-    getter: G;
-    actions: actionsType<S, OptionAction>;
-}
-export declare function define<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> & {
-    reset: () => void;
-    setState: (updater: Partial<S> | ((state: S) => void), replace?: boolean) => void;
-    subscribe: (listener: (state: S & ExtraGetterState<S, G>, prevState: S & ExtraGetterState<S, G>) => void) => () => void;
-} & OptionActions>>;
+export * from './utils';
+export * from './types';

package/dist/index.js

@@ -1,52 +1 @@
-import { create } from 'zustand';
-import { combine } from 'zustand/middleware';
-import { produce } from 'immer';
-import { keys, isEqualWith, omit, some, pick, forEach, isEqual } from 'lodash-es';
-
-function define(options) {
-  function createDefState() {
-    const state = options.state();
-    forEach(options.getter, (getter, k) => {
-      state[k] = getter(state);
-    });
-    return state;
-  }
-  return create(combine(createDefState(), (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);
-        forEach(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 {
-      reset,
-      setState: store.setState,
-      subscribe: store.subscribe,
-      ...options.actions(get, {
-        reset,
-        setState: store.setState
-      }, store)
-    };
-  }));
-}
-
-export { define };
+export { creator, defineContext, defineStore } from './utils.js';

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import { StoreApi as ZStoreApi } from 'zustand';
+export type StoreApi<S> = Omit<ZStoreApi<S>, 'setState'> & {
+    setState: (updater: ((state: S) => void) | Partial<S>, replace?: boolean) => void;
+};
+export interface insideActionsType<S> {
+    reset: () => void;
+    setState: StoreApi<S>['setState'];
+    subscribe: StoreApi<S>['subscribe'];
+}
+export type actionsType<S, OptionAction, InsideActions = unknown> = (getState: () => S, actions: Omit<insideActionsType<S>, 'subscribe'> & InsideActions, store: StoreApi<S>) => OptionAction;
+export type defGetterStateType<S> = Record<string, (state: S) => any>;
+export type ExtraGetterState<S, G extends defGetterStateType<S>> = {
+    [key in keyof G]: ReturnType<G[key]>;
+};
+export interface optionsType<S, G, OptionAction> {
+    state: () => S;
+    getter: G;
+    actions: actionsType<S, OptionAction>;
+}

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { StateCreator } from 'zustand';
+import { defGetterStateType, optionsType, ExtraGetterState, insideActionsType } from './types';
+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>>;
+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>>>;
+export declare function defineContext<S extends Record<string, any>, G extends defGetterStateType<S>, OptionActions extends Record<string, any>>(options: optionsType<S, G, OptionActions>): {
+    Provider: FunctionComponent<{
+        children?: ReactNode;
+    }>;
+    useContext: <T>(selector: (state: S & ExtraGetterState<S, G> & insideActionsType<S>) => T) => T;
+};

package/dist/utils.js

@@ -0,0 +1,80 @@
+import { useRef, useContext, createContext } from 'react';
+import { create, createStore, useStore } from 'zustand';
+import { produce } from 'immer';
+import { keys, isEqualWith, omit, some, pick, forEach, isEqual } from 'lodash-es';
+import { jsx } from 'react/jsx-runtime';
+
+function creator(options) {
+  function createDefState() {
+    const state = options.state();
+    forEach(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);
+        forEach(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 store = createStore()(creatorResult);
+  const Context = /*#__PURE__*/createContext(null);
+  const Provider = ({
+    children
+  }) => {
+    const storeRef = useRef(store);
+    return /*#__PURE__*/jsx(Context.Provider, {
+      value: storeRef.current,
+      children: children
+    });
+  };
+  function $useContext(selector) {
+    const store = useContext(Context);
+    if (!store) throw new Error('Missing BearContext.Provider in the tree');
+    return useStore(store, selector);
+  }
+  return {
+    Provider,
+    useContext: $useContext
+  };
+}
+
+export { creator, defineContext, defineStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "define-zustand",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,6 +20,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "jest": "^29.5.0",
     "prettier": "2.8.8",
+    "react": "~18.2.0",
     "stylelint": "15.9.0",
     "stylelint-config-standard": "33.0.0",
     "ts-jest": "29.0.5",
@@ -27,10 +28,12 @@
     "zustand": "^4.4.1"
   },
   "dependencies": {
+    "@types/react": "~18.2.28",
     "immer": "^10.0.2",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
+    "react": "~18.2.0",
     "zustand": "^4.4.1"
   },
   "scripts": {

package/README.md

@@ -1,46 +0,0 @@
-# define-zustand
-> Quickly define [zustand](https://github.com/pmndrs/zustand) state
-
-## Install
-```shell
-pnpm i define-zustand
-npm i define-zustand
-```
-
-## Use
-```tsx
-import defineStore from 'define-zustand'
-
-/**
- * @return zustand hooks
- */
-const useStore = defineStore({
-    state: () => ({
-        a: 1,
-        b: 1
-    }),
-    action: () => ({}),
-    getter: {
-        count: state => state.a + state.b 
-    }
-})
-function ReactComponent() {
-    const { count, setState, reset } = useStore(state => ({
-        count: state.count,
-        setState: state.setState,
-        reset: state.reset
-    }))
-
-    useEffect(() => {
-        return () => {
-            reset()
-        }
-    }, []);
-    
-    return <div>
-        <button onClick={() => setState({ a: 2 })}>setA</button>
-        <button onClick={() => setState(state => {state.b += 1})}>setB</button>
-        <div>{count}</div>
-    </div>
-}
-```