floppy-disk 2.12.2 → 2.13.0

package/README.md

@@ -9,7 +9,7 @@ Both are awesome state manager. That's why this Floppy Disk library behaves like
 
 ```js
 import { create } from 'zustand'; // 3.3 kB (gzipped: 1.5 kB)
-import { createStore } from 'floppy-disk'; // 1.4 kB (gzipped: 725 B) 🎉
+import { createStore } from 'floppy-disk'; // 1.4 kB (gzipped: 750 B) 🎉
 
 import {
   QueryClient,
@@ -17,8 +17,8 @@ import {
   useQuery,
   useInfiniteQuery,
   useMutation,
-} from '@tanstack/react-query'; // 41 kB (gzipped: 11 kB)
-import { createQuery, createMutation } from 'floppy-disk'; // 9.6 kB (gzipped: 3.2 kB) 🎉
+} from '@tanstack/react-query'; // 31.7 kB kB (gzipped: 9.2 kB)
+import { createQuery, createMutation } from 'floppy-disk'; // 9.7 kB (gzipped: 3.3 kB) 🎉
 ```
 
 - Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/  
@@ -30,7 +30,7 @@ import { createQuery, createMutation } from 'floppy-disk'; // 9.6 kB (gzipped: 3
 
 - **Create Store**
   - Get/set store inside/outside component
-  - Custom reactivity (like `useEffect`'s dependency array)
+  - Very simple way to customize the reactivity (state update subscription)
   - Support middleware
   - Set state interception
   - Store event (`onSubscribe`, `onUnsubscribe`, etc.)
@@ -112,12 +112,12 @@ Use the hook anywhere, no providers are needed.
 
 ```jsx
 function Cat() {
-  const { age } = useCatStore((state) => [state.age]);
+  const age = useCatStore('age');
   return <div>Cat's age: {age}</div>;
 }
 
 function Control() {
-  const { increaseAge } = useCatStore((state) => [state.increaseAge]);
+  const increaseAge = useCatStore('increaseAge');
   return <button onClick={increaseAge}>Increase cat's age</button>;
 }
 ```
@@ -127,29 +127,39 @@ function Control() {
 Control the reactivity. The concept is same as useEffect dependency array.
 
 ```jsx
-function Cat() {
+function YourComponent() {
   const { age, isSleeping } = useCatStore();
   // Will re-render every state change    ^
-  return <div>...</div>;
 }
 
-function Cat() {
+function YourComponent() {
   const { age, isSleeping } = useCatStore((state) => [state.isSleeping]);
   // Will only re-render when isSleeping is updated   ^
   // Update on age won't cause re-render this component
-  return <div>...</div>;
 }
 
-function Cat() {
+function YourComponent() {
   const { age, isSleeping } = useCatStore((state) => [state.age, state.isSleeping]);
   // Will re-render when age or isSleeping is updated ^
-  return <div>...</div>;
 }
 
-function Cat() {
+function YourComponent() {
   const { age, isSleeping } = useCatStore((state) => [state.age > 3]);
   // Will only re-render when (age>3) is updated
-  return <div>...</div>;
+}
+```
+
+Even simpler way, after version `2.13.0`, we can use store's object key:
+
+```jsx
+function YourComponent() {
+  const age = useCatStore('age');
+  // Will only re-render when age is updated
+}
+
+function YourComponent() {
+  const age = useCatStore('isSleeping');
+  // Will only re-render when isSleeping is updated
 }
 ```
 
@@ -188,7 +198,7 @@ const decreaseAgeSilently = () => {
 };
 //                👇 Will not re-render
 function Cat() {
-  const { age } = useCatStore((state) => [state.age]);
+  const age = useCatStore('age');
   return <div>Cat's age: {age}</div>;
 }
 ```
@@ -258,7 +268,7 @@ Prevent re-render using `Watch`.
 
 ```jsx
 function CatPage() {
-  const { age } = useCatStore((state) => [state.age]);
+  const age = useCatStore('age');
   // If age changed, this component will re-render which will cause
   // HeavyComponent1 & HeavyComponent2 to be re-rendered as well.
   return (
@@ -276,8 +286,8 @@ function CatPageOptimized() {
     <main>
       <HeavyComponent1 />
       <useCatStore.Watch
-        selectDeps={(state) => [state.age]}
-        render={({ age }) => {
+        selectDeps="age"
+        render={(age) => {
           return <div>Cat's age: {age}</div>;
         }}
       />
@@ -328,11 +338,20 @@ function Parent() {
 
 function CatAge() {
   const { age } = useCatStoreContext()((state) => [state.age]);
+
+  // Shorthand after v1.13.0:
+  // const age = useCatStoreContext()('age');
+
   return <div>Age: {age}</div>;
 }
+
 function CatIsSleeping() {
   const useCatStore = useCatStoreContext();
   const { isSleeping } = useCatStore((state) => [state.isSleeping]);
+
+  // Shorthand after v1.13.0:
+  // const isSleeping = useCatStore('isSleeping');
+
   return (
     <>
       <div>Is Sleeping: {String(isSleeping)}</div>
@@ -764,7 +783,7 @@ function SaveProduct() {
 
 ## Important Notes
 
-Don't mutate.
+Don't mutate. (unless you use Immer JS library or something similar)
 
 ```js
 import { createStore } from 'floppy-disk';
@@ -783,6 +802,7 @@ Don't use conditional reactivity selector.
 
 ```jsx
 function Cat({ isSomething }) {
+  const value = useCatStore(isSomething ? 'age' : 'isSleeping'); // ❌
   const { age } = useCatStore(isSomething ? (state) => [state.age] : null); // ❌
   const { age } = useCatStore((state) => (isSomething ? [state.age] : [state.isSleeping])); // ❌
   return <div>Cat's age: {age}</div>;

package/esm/react/create-bi-direction-query.d.ts

@@ -1,5 +1,4 @@
 import { Maybe } from '../utils';
-import { SelectDeps } from '../vanilla';
 import { CreateQueryOptions, QueryState } from './create-query';
 import { StoreKey } from './create-stores';
 export declare const createBiDirectionQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData extends any[] = any[], TError = unknown, TPageParam = any>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError, TPageParam>, direction: 'prev' | 'next') => Promise<TResponse>, options: Omit<CreateQueryOptions<TKey, TResponse, TData, TError, TPageParam>, "select" | "getNextPageParam"> & {
@@ -7,7 +6,7 @@ export declare const createBiDirectionQuery: <TKey extends StoreKey = StoreKey,
     getNextPageParam: (lastPage: TResponse, index: number, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError, TPageParam>) => Maybe<TPageParam>;
     select: (response: TResponse, state: Pick<QueryState<TKey, TResponse, TData, TError, TPageParam>, "data" | "key">, direction: 'prev' | 'next') => TData;
 }) => {
-    (...args: [Maybe<TKey>, SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?] | [SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?]): {
+    (key: Maybe<TKey>, selectDeps?: "data" | "key" | "error" | "reset" | "status" | "fetch" | "response" | "keyHash" | "forceFetch" | "fetchNextPage" | "optimisticUpdate" | "isWaiting" | "isWaitingNextPage" | "isRefetching" | "isRefetchError" | "isPreviousData" | "isOptimisticData" | "errorUpdatedAt" | "retryCount" | "isGoingToRetry" | "pageParam" | "pageParams" | "hasNextPage" | "retryNextPageCount" | "isGoingToRetryNextPage" | "isLoading" | "isSuccess" | "isError" | "responseUpdatedAt" | import("..").SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>): {
         data: (never[] | TData)[number][];
         fetchPrevPage: () => Promise<QueryState<TKey, TResponse, TData, TError, TPageParam>>;
         hasPrevPage: boolean;

package/esm/react/create-store.d.ts

@@ -1,19 +1,35 @@
 import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../vanilla';
-export type WatchProps<T> = {
-    selectDeps?: SelectDeps<T>;
-    render: (state: T) => any;
+export type WatchProps<T, K extends SelectDeps<T> | keyof T = SelectDeps<T>> = {
+    selectDeps?: K;
+    render: (state: K extends keyof T ? T[K] : T) => any;
 };
 export type UseStore<T extends StoreData> = {
     /**
-     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
      * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStore`.
      *
+     * Since version `2.13.0`, we can use a store's object key to control reactivity.
+     *
      * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
+     *
+     * @example
+     * ```tsx
+     * const useMyStore = createStore({
+     *   foo: 12,
+     *   bar: true,
+     *   baz: "z",
+     * });
+     *
+     * const MyComponent = () => {
+     *   const foo = useMyStore("foo");
+     *   // Will only re-render if "foo" updated
+     * };
+     * ```
      */
-    (selectDeps?: SelectDeps<T>): T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
     get: () => T;
     set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: () => Subscribers<T>;
     /**
      * ⚛️ (**_Hook_**)
@@ -25,7 +41,7 @@ export type UseStore<T extends StoreData> = {
      * - Put this on the root component or parent component, before any component subscribed!
      */
     setDefaultValues: (values: SetStoreData<T>) => void;
-    Watch: (props: WatchProps<T>) => any;
+    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K>) => any;
 };
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore

package/esm/react/create-store.js

@@ -13,7 +13,7 @@ export const createStore = (initializer, options = {}) => {
         const [state, setState] = useState(get);
         // eslint-disable-next-line react-hooks/exhaustive-deps
         useEffect(() => subscribe(setState, selectDeps), []);
-        return state;
+        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
     };
     useStore.get = get;
     useStore.set = set;
@@ -29,7 +29,7 @@ export const createStore = (initializer, options = {}) => {
             set(value);
         });
     };
-    const Watch = ({ selectDeps = defaultDeps, render }) => {
+    const Watch = ({ selectDeps = defaultDeps, render, }) => {
         const store = useStore(selectDeps);
         return render(store);
     };

package/esm/react/create-stores.d.ts

@@ -11,19 +11,39 @@ export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreD
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**
      * @param key (Optional) Store key, an object that will be hashed into a string as a store identifier.
+     * No need to memoize the store key.
      *
-     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
      * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStores`.
      *
+     * Since version `2.13.0`, we can use a store's object key to control reactivity.
+     *
      * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
+     *
+     * @example
+     * ```tsx
+     * type StoreKey = { id: string };
+     * type StoreData = { foo: number; bar: boolean; baz: string };
+     * const useMyStores = createStores<StoreKey, StoreData>({
+     *   foo: 12,
+     *   bar: true,
+     *   baz: "z",
+     * });
+     *
+     * export const MyComponent = () => {
+     *   const foo = useMyStores({ id: "p1" }, "foo");
+     *   // Will only re-render if "foo" & store key ("id") updated
+     * };
+     * ```
      */
-    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(key: Maybe<TKey>, selectDeps?: K): K extends keyof T ? T[K] : T;
     get: (key?: Maybe<TKey>) => T;
     getAll: () => T[];
     getAllWithSubscriber: () => T[];
     set: (key: Maybe<TKey>, value: SetStoreData<T>, silent?: boolean) => void;
     setAll: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     getStores: () => Map<string, InitStoreReturn<T>>;
@@ -37,7 +57,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
      * - Put this on the root component or parent component, before any component subscribed!
      */
     setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
-    Watch: (props: WatchProps<T> & {
+    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K> & {
         storeKey?: Maybe<TKey>;
     }) => any;
 };

package/esm/react/create-stores.js

@@ -20,7 +20,7 @@ export const createStores = (initializer, options = {}) => {
      * **IMPORTANT NOTE:** `selectDeps` function must not be changed after initialization.
      */
     const useStores = (...args) => {
-        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' || typeof args[0] === 'string' ? [{}, args[0]] : args);
         const key = _key || {};
         const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -37,7 +37,8 @@ export const createStores = (initializer, options = {}) => {
         }, [keyHash]);
         if (keyHash !== prevKeyHash.current)
             onBeforeChangeKey(key, prevKey.current);
-        return get();
+        const state = get();
+        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
     };
     useStores.get = (key) => {
         const store = getStore(key);

package/esm/vanilla.d.ts

@@ -18,7 +18,7 @@ export type InitStoreOptions<T> = {
 export type InitStoreReturn<T> = {
     get: () => T;
     set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: () => Subscribers<T>;
 };
 export declare const initStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;

package/esm/vanilla.js

@@ -35,7 +35,7 @@ export const initStore = (initializer, options = {}) => {
         });
     };
     const subscribe = (fn, selectDeps) => {
-        subscribers.set(fn, selectDeps);
+        subscribers.set(fn, (typeof selectDeps === 'string' ? (s) => [s[selectDeps]] : selectDeps));
         if (subscribers.size === 1)
             onFirstSubscribe(data);
         onSubscribe(data);

package/lib/react/create-bi-direction-query.d.ts

@@ -1,5 +1,4 @@
 import { Maybe } from '../utils';
-import { SelectDeps } from '../vanilla';
 import { CreateQueryOptions, QueryState } from './create-query';
 import { StoreKey } from './create-stores';
 export declare const createBiDirectionQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData extends any[] = any[], TError = unknown, TPageParam = any>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError, TPageParam>, direction: 'prev' | 'next') => Promise<TResponse>, options: Omit<CreateQueryOptions<TKey, TResponse, TData, TError, TPageParam>, "select" | "getNextPageParam"> & {
@@ -7,7 +6,7 @@ export declare const createBiDirectionQuery: <TKey extends StoreKey = StoreKey,
     getNextPageParam: (lastPage: TResponse, index: number, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError, TPageParam>) => Maybe<TPageParam>;
     select: (response: TResponse, state: Pick<QueryState<TKey, TResponse, TData, TError, TPageParam>, "data" | "key">, direction: 'prev' | 'next') => TData;
 }) => {
-    (...args: [Maybe<TKey>, SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?] | [SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?]): {
+    (key: Maybe<TKey>, selectDeps?: "data" | "key" | "error" | "reset" | "status" | "fetch" | "response" | "keyHash" | "forceFetch" | "fetchNextPage" | "optimisticUpdate" | "isWaiting" | "isWaitingNextPage" | "isRefetching" | "isRefetchError" | "isPreviousData" | "isOptimisticData" | "errorUpdatedAt" | "retryCount" | "isGoingToRetry" | "pageParam" | "pageParams" | "hasNextPage" | "retryNextPageCount" | "isGoingToRetryNextPage" | "isLoading" | "isSuccess" | "isError" | "responseUpdatedAt" | import("..").SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>): {
         data: (never[] | TData)[number][];
         fetchPrevPage: () => Promise<QueryState<TKey, TResponse, TData, TError, TPageParam>>;
         hasPrevPage: boolean;

package/lib/react/create-store.d.ts

@@ -1,19 +1,35 @@
 import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../vanilla';
-export type WatchProps<T> = {
-    selectDeps?: SelectDeps<T>;
-    render: (state: T) => any;
+export type WatchProps<T, K extends SelectDeps<T> | keyof T = SelectDeps<T>> = {
+    selectDeps?: K;
+    render: (state: K extends keyof T ? T[K] : T) => any;
 };
 export type UseStore<T extends StoreData> = {
     /**
-     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
      * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStore`.
      *
+     * Since version `2.13.0`, we can use a store's object key to control reactivity.
+     *
      * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
+     *
+     * @example
+     * ```tsx
+     * const useMyStore = createStore({
+     *   foo: 12,
+     *   bar: true,
+     *   baz: "z",
+     * });
+     *
+     * const MyComponent = () => {
+     *   const foo = useMyStore("foo");
+     *   // Will only re-render if "foo" updated
+     * };
+     * ```
      */
-    (selectDeps?: SelectDeps<T>): T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
     get: () => T;
     set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: () => Subscribers<T>;
     /**
      * ⚛️ (**_Hook_**)
@@ -25,7 +41,7 @@ export type UseStore<T extends StoreData> = {
      * - Put this on the root component or parent component, before any component subscribed!
      */
     setDefaultValues: (values: SetStoreData<T>) => void;
-    Watch: (props: WatchProps<T>) => any;
+    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K>) => any;
 };
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore

package/lib/react/create-store.js

@@ -16,7 +16,7 @@ const createStore = (initializer, options = {}) => {
         const [state, setState] = (0, react_1.useState)(get);
         // eslint-disable-next-line react-hooks/exhaustive-deps
         (0, react_1.useEffect)(() => subscribe(setState, selectDeps), []);
-        return state;
+        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
     };
     useStore.get = get;
     useStore.set = set;
@@ -32,7 +32,7 @@ const createStore = (initializer, options = {}) => {
             set(value);
         });
     };
-    const Watch = ({ selectDeps = defaultDeps, render }) => {
+    const Watch = ({ selectDeps = defaultDeps, render, }) => {
         const store = useStore(selectDeps);
         return render(store);
     };

package/lib/react/create-stores.d.ts

@@ -11,19 +11,39 @@ export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreD
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**
      * @param key (Optional) Store key, an object that will be hashed into a string as a store identifier.
+     * No need to memoize the store key.
      *
-     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
      * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStores`.
      *
+     * Since version `2.13.0`, we can use a store's object key to control reactivity.
+     *
      * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
+     *
+     * @example
+     * ```tsx
+     * type StoreKey = { id: string };
+     * type StoreData = { foo: number; bar: boolean; baz: string };
+     * const useMyStores = createStores<StoreKey, StoreData>({
+     *   foo: 12,
+     *   bar: true,
+     *   baz: "z",
+     * });
+     *
+     * export const MyComponent = () => {
+     *   const foo = useMyStores({ id: "p1" }, "foo");
+     *   // Will only re-render if "foo" & store key ("id") updated
+     * };
+     * ```
      */
-    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
+    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(key: Maybe<TKey>, selectDeps?: K): K extends keyof T ? T[K] : T;
     get: (key?: Maybe<TKey>) => T;
     getAll: () => T[];
     getAllWithSubscriber: () => T[];
     set: (key: Maybe<TKey>, value: SetStoreData<T>, silent?: boolean) => void;
     setAll: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     getStores: () => Map<string, InitStoreReturn<T>>;
@@ -37,7 +57,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
      * - Put this on the root component or parent component, before any component subscribed!
      */
     setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
-    Watch: (props: WatchProps<T> & {
+    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K> & {
         storeKey?: Maybe<TKey>;
     }) => any;
 };

package/lib/react/create-stores.js

@@ -23,7 +23,7 @@ const createStores = (initializer, options = {}) => {
      * **IMPORTANT NOTE:** `selectDeps` function must not be changed after initialization.
      */
     const useStores = (...args) => {
-        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' || typeof args[0] === 'string' ? [{}, args[0]] : args);
         const key = _key || {};
         const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -40,7 +40,8 @@ const createStores = (initializer, options = {}) => {
         }, [keyHash]);
         if (keyHash !== prevKeyHash.current)
             onBeforeChangeKey(key, prevKey.current);
-        return get();
+        const state = get();
+        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
     };
     useStores.get = (key) => {
         const store = getStore(key);

package/lib/vanilla.d.ts

@@ -18,7 +18,7 @@ export type InitStoreOptions<T> = {
 export type InitStoreReturn<T> = {
     get: () => T;
     set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
     getSubscribers: () => Subscribers<T>;
 };
 export declare const initStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;

package/lib/vanilla.js

@@ -38,7 +38,7 @@ const initStore = (initializer, options = {}) => {
         });
     };
     const subscribe = (fn, selectDeps) => {
-        subscribers.set(fn, selectDeps);
+        subscribers.set(fn, (typeof selectDeps === 'string' ? (s) => [s[selectDeps]] : selectDeps));
         if (subscribers.size === 1)
             onFirstSubscribe(data);
         onSubscribe(data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",