floppy-disk 2.12.2-beta.1 → 2.13.0-beta.1

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-beta.1",
+  "version": "2.13.0-beta.1",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",