floppy-disk 2.16.0 → 3.0.0-experimental.1

package/README.md

@@ -30,7 +30,7 @@ import { createQuery, createMutation } from 'floppy-disk'; // 9.7 kB (gzipped: 3
 
 - **Create Store**
   - Get/set store inside/outside component
-  - Very simple way to customize the reactivity (state update subscription)
+  - Very simple way to customize the reactivity (a.k.a. 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('age');
+  const { age } = useCatStore((state) => [state.age]);
   return <div>Cat's age: {age}</div>;
 }
 
 function Control() {
-  const increaseAge = useCatStore('increaseAge');
+  const { increaseAge } = useCatStore((state) => [state.increaseAge]);
   return <button onClick={increaseAge}>Increase cat's age</button>;
 }
 ```
@@ -130,36 +130,26 @@ Control the reactivity. The concept is same as useEffect dependency array.
 function YourComponent() {
   const { age, isSleeping } = useCatStore();
   // Will re-render every state change    ^
+  ...
 }
 
 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
+  ...
 }
 
 function YourComponent() {
   const { age, isSleeping } = useCatStore((state) => [state.age, state.isSleeping]);
   // Will re-render when age or isSleeping is updated ^
+  ...
 }
 
 function YourComponent() {
   const { age, isSleeping } = useCatStore((state) => [state.age > 3]);
   // Will only re-render when (age>3) is updated
-}
-```
-
-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
+  ...
 }
 ```
 
@@ -198,7 +188,7 @@ const decreaseAgeSilently = () => {
 };
 //                👇 Will not re-render
 function Cat() {
-  const age = useCatStore('age');
+  const { age } = useCatStore((state) => [state.age]);
   return <div>Cat's age: {age}</div>;
 }
 ```
@@ -268,7 +258,7 @@ Prevent re-render using `Watch`.
 
 ```jsx
 function CatPage() {
-  const age = useCatStore('age');
+  const { age } = useCatStore((state) => [state.age]);
   // If age changed, this component will re-render which will cause
   // HeavyComponent1 & HeavyComponent2 to be re-rendered as well.
   return (
@@ -286,8 +276,8 @@ function CatPageOptimized() {
     <main>
       <HeavyComponent1 />
       <useCatStore.Watch
-        selectDeps="age"
-        render={(age) => {
+        selectDeps={(state) => [state.age]}
+        render={({ age }) => {
           return <div>Cat's age: {age}</div>;
         }}
       />
@@ -338,20 +328,11 @@ 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>
@@ -802,7 +783,6 @@ 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/index.d.ts

@@ -1,5 +1,5 @@
-export * from './store';
-export * from './fetcher';
+export * from './vanilla/init-store';
+export * from './vanilla/fetcher';
 export * from './react/create-store';
 export * from './react/create-stores';
 export * from './react/create-query';

package/esm/index.js

@@ -1,5 +1,5 @@
-export * from './store';
-export * from './fetcher';
+export * from './vanilla/init-store';
+export * from './vanilla/fetcher';
 export * from './react/create-store';
 export * from './react/create-stores';
 export * from './react/create-query';

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

@@ -6,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;
 }) => {
-    (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>>): {
+    (...args: [Maybe<TKey>, import("..").SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?] | [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-mutation.d.ts

@@ -1,4 +1,4 @@
-import { InitStoreOptions } from '../store';
+import { InitStoreOptions } from '../vanilla/init-store';
 import { UseStore } from './create-store';
 export type MutationState<TVar, TResponse = any, TError = unknown> = {
     /**

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

@@ -1,35 +1,22 @@
-import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../store';
-export type WatchProps<T, K extends SelectDeps<T> | keyof T = SelectDeps<T>> = {
-    selectDeps?: K;
-    render: (state: K extends keyof T ? T[K] : T) => any;
+import { InitStoreOptions, SelectDeps, SetStoreState, StoreInitializer, StoreState, Subscribers } from '../vanilla/init-store';
+export type WatchProps<T> = {
+    selectDeps?: SelectDeps<T>;
+    render: (state: T) => any;
 };
-export type UseStore<T extends StoreData> = {
+export type UseStore<T extends StoreState> = {
     /**
-     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps 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.
+     * Value of `null` will also make it reactive to all state change.
      *
      * **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
-     * };
-     * ```
      */
-    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
+    (selectDeps?: SelectDeps<T>): T;
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: () => Subscribers<T>;
     /**
      * ⚛️ (**_Hook_**)
@@ -40,12 +27,12 @@ export type UseStore<T extends StoreData> = {
      * - This is a hook, put it inside of a React component
      * - Put this on the root component or parent component, before any component subscribed!
      */
-    setDefaultValues: (values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K>) => any;
+    setDefaultValues: (values: SetStoreState<T>) => void;
+    Watch: (props: WatchProps<T>) => any;
 };
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore
  */
-export declare const createStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
+export declare const createStore: <T extends StoreState>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
     defaultDeps?: SelectDeps<T>;
 }) => UseStore<T>;

package/esm/react/create-store.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { initStore, } from '../store';
+import { initStore, } from '../vanilla/init-store';
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore
  */
@@ -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 (typeof selectDeps === 'string' ? state[selectDeps] : state);
+        return 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

@@ -1,49 +1,33 @@
-import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../store';
 import { Maybe } from '../utils';
+import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreState, StoreState, Subscribers } from '../vanilla/init-store';
 import { WatchProps } from './create-store';
 export type StoreKey = Record<string, any> | undefined;
-export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = T | ((api: {
+export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = T | ((api: {
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
     key: TKey;
     keyHash: string;
 }) => T);
-export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
+export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = {
     /**
      * @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 (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.
+     * Value of `null` will also make it reactive to all state change.
      *
      * **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
-     * };
-     * ```
      */
-    <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;
+    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): 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> | keyof T) => () => void;
+    set: (key: Maybe<TKey>, value: SetStoreState<T>, silent?: boolean) => void;
+    setAll: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     getStores: () => Map<string, InitStoreReturn<T>>;
@@ -56,12 +40,12 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
      * - This is a hook, put it inside of a React component
      * - Put this on the root component or parent component, before any component subscribed!
      */
-    setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K> & {
+    setDefaultValues: (key: Maybe<TKey>, values: SetStoreState<T>) => void;
+    Watch: (props: WatchProps<T> & {
         storeKey?: Maybe<TKey>;
     }) => any;
 };
-export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = InitStoreOptions<T> & {
+export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = InitStoreOptions<T> & {
     onBeforeChangeKey?: (nextKey: TKey, prevKey: TKey) => void;
     /**
      * Will be triggered when a single store with a specific key was initialized.
@@ -70,8 +54,8 @@ export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends Stor
     defaultDeps?: SelectDeps<T>;
     hashKeyFn?: (obj: TKey) => string;
 };
-export declare const hashStoreKey: (value?: any) => string;
+export declare const hashStoreKey: (obj?: any) => string;
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstores
  */
-export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreData = StoreData>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;
+export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreState = StoreState>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;

package/esm/react/create-stores.js

@@ -1,32 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { initStore, } from '../store';
 import { getValue, noop } from '../utils';
-const hasObjectPrototype = (value) => {
-    return Object.prototype.toString.call(value) === '[object Object]';
-};
-const isPlainObject = (value) => {
-    if (!hasObjectPrototype(value))
-        return false;
-    const ctor = value.constructor;
-    if (typeof ctor === 'undefined')
-        return true;
-    const prot = ctor.prototype;
-    if (!hasObjectPrototype(prot))
-        return false;
-    if (!prot.hasOwnProperty('isPrototypeOf'))
-        return false;
-    return true;
-};
-export const hashStoreKey = (value) => 
-// Copied from: https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts
-JSON.stringify(value, (_, val) => isPlainObject(val)
-    ? Object.keys(val)
-        .sort()
-        .reduce((result, key) => {
-        result[key] = val[key];
-        return result;
-    }, {})
-    : val);
+import { initStore, } from '../vanilla/init-store';
+export const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstores
  */
@@ -46,7 +21,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' || typeof args[0] === 'string' ? [{}, args[0]] : args);
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
         const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,8 +38,7 @@ export const createStores = (initializer, options = {}) => {
         }, [keyHash]);
         if (keyHash !== prevKeyHash.current)
             onBeforeChangeKey(key, prevKey.current);
-        const state = get();
-        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
+        return get();
     };
     useStores.get = (key) => {
         const store = getStore(key);

package/esm/{fetcher.js → vanilla/fetcher.js}

@@ -1,4 +1,4 @@
-import { createError, getValue, identityFn } from './utils';
+import { createError, getValue, identityFn } from '../utils';
 const encodeParams = (params) => Object.entries(params)
     .filter(([, value]) => value !== undefined && value !== null)
     .map((kv) => kv.map(encodeURIComponent).join('='))

package/{lib/store.d.ts → esm/vanilla/init-store.d.ts}

@@ -1,11 +1,11 @@
-import { Maybe } from './utils';
-export type StoreData = Record<string, any>;
-export type SetStoreData<T> = Partial<T> | ((prevState: T) => Partial<T>);
+import { Maybe } from '../utils';
+export type StoreState = Record<string, any>;
+export type SetStoreState<T> = Partial<T> | ((state: T) => Partial<T>);
 export type SelectDeps<T> = ((state: T) => any[]) | undefined | null;
 export type Subscribers<T> = Map<(state: T) => void, SelectDeps<T>>;
 export type StoreInitializer<T> = T | ((api: {
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
 }) => T);
 export type StoreEvent<T> = (state: T) => void;
 export type InitStoreOptions<T> = {
@@ -17,8 +17,8 @@ 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> | keyof T) => () => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: () => Subscribers<T>;
 };
-export declare const initStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;
+export declare const initStore: <T extends StoreState>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;

package/esm/{store.js → vanilla/init-store.js}

@@ -1,51 +1,51 @@
-import { getValue, noop } from './utils';
+import { getValue, noop } from '../utils';
 export const initStore = (initializer, options = {}) => {
     const { intercept, onFirstSubscribe = noop, onSubscribe = noop, onUnsubscribe = noop, onLastUnsubscribe = noop, } = options;
     const subscribers = new Map();
     const getSubscribers = () => subscribers;
-    let data;
-    const get = () => data;
+    let state;
+    const get = () => state;
     const set = (value, silent = false) => {
-        const prevData = data;
-        data = { ...data, ...getValue(value, data) };
+        const prevState = state;
+        state = { ...state, ...getValue(value, state) };
         if (intercept) {
-            data = { ...data, ...intercept(data, prevData) };
+            state = { ...state, ...intercept(state, prevState) };
         }
         if (silent)
             return;
-        const keys = Object.keys(data);
+        const keys = Object.keys(state);
         subscribers.forEach((selectDeps, fn) => {
             if (!selectDeps) {
                 for (let i = 0, n = keys.length; i < n; i++) {
-                    if (prevData[keys[i]] !== data[keys[i]]) {
-                        fn(data);
+                    if (prevState[keys[i]] !== state[keys[i]]) {
+                        fn(state);
                         break;
                     }
                 }
                 return;
             }
-            const prevs = selectDeps(prevData);
-            const nexts = selectDeps(data);
+            const prevs = selectDeps(prevState);
+            const nexts = selectDeps(state);
             for (let i = 0, n = prevs.length; i < n; i++) {
                 if (prevs[i] !== nexts[i]) {
-                    fn(data);
+                    fn(state);
                     break;
                 }
             }
         });
     };
     const subscribe = (fn, selectDeps) => {
-        subscribers.set(fn, (typeof selectDeps === 'string' ? (s) => [s[selectDeps]] : selectDeps));
+        subscribers.set(fn, selectDeps);
         if (subscribers.size === 1)
-            onFirstSubscribe(data);
-        onSubscribe(data);
+            onFirstSubscribe(state);
+        onSubscribe(state);
         return () => {
             subscribers.delete(fn);
-            onUnsubscribe(data);
+            onUnsubscribe(state);
             if (subscribers.size === 0)
-                onLastUnsubscribe(data);
+                onLastUnsubscribe(state);
         };
     };
-    data = getValue(initializer, { get, set });
+    state = getValue(initializer, { get, set });
     return { get, set, subscribe, getSubscribers };
 };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
-export * from './store';
-export * from './fetcher';
+export * from './vanilla/init-store';
+export * from './vanilla/fetcher';
 export * from './react/create-store';
 export * from './react/create-stores';
 export * from './react/create-query';

package/lib/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./store"), exports);
-tslib_1.__exportStar(require("./fetcher"), exports);
+tslib_1.__exportStar(require("./vanilla/init-store"), exports);
+tslib_1.__exportStar(require("./vanilla/fetcher"), exports);
 tslib_1.__exportStar(require("./react/create-store"), exports);
 tslib_1.__exportStar(require("./react/create-stores"), exports);
 tslib_1.__exportStar(require("./react/create-query"), exports);

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

@@ -6,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;
 }) => {
-    (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>>): {
+    (...args: [Maybe<TKey>, import("..").SelectDeps<QueryState<TKey, TResponse, TData, TError, TPageParam>>?] | [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-mutation.d.ts

@@ -1,4 +1,4 @@
-import { InitStoreOptions } from '../store';
+import { InitStoreOptions } from '../vanilla/init-store';
 import { UseStore } from './create-store';
 export type MutationState<TVar, TResponse = any, TError = unknown> = {
     /**

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

@@ -1,35 +1,22 @@
-import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../store';
-export type WatchProps<T, K extends SelectDeps<T> | keyof T = SelectDeps<T>> = {
-    selectDeps?: K;
-    render: (state: K extends keyof T ? T[K] : T) => any;
+import { InitStoreOptions, SelectDeps, SetStoreState, StoreInitializer, StoreState, Subscribers } from '../vanilla/init-store';
+export type WatchProps<T> = {
+    selectDeps?: SelectDeps<T>;
+    render: (state: T) => any;
 };
-export type UseStore<T extends StoreData> = {
+export type UseStore<T extends StoreState> = {
     /**
-     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * @param selectDeps 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.
+     * Value of `null` will also make it reactive to all state change.
      *
      * **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
-     * };
-     * ```
      */
-    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
+    (selectDeps?: SelectDeps<T>): T;
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: () => Subscribers<T>;
     /**
      * ⚛️ (**_Hook_**)
@@ -40,12 +27,12 @@ export type UseStore<T extends StoreData> = {
      * - This is a hook, put it inside of a React component
      * - Put this on the root component or parent component, before any component subscribed!
      */
-    setDefaultValues: (values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K>) => any;
+    setDefaultValues: (values: SetStoreState<T>) => void;
+    Watch: (props: WatchProps<T>) => any;
 };
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore
  */
-export declare const createStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
+export declare const createStore: <T extends StoreState>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
     defaultDeps?: SelectDeps<T>;
 }) => UseStore<T>;

package/lib/react/create-store.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStore = void 0;
 const react_1 = require("react");
-const store_1 = require("../store");
+const init_store_1 = require("../vanilla/init-store");
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstore
  */
 const createStore = (initializer, options = {}) => {
-    const { get, set, subscribe, getSubscribers } = (0, store_1.initStore)(initializer, options);
+    const { get, set, subscribe, getSubscribers } = (0, init_store_1.initStore)(initializer, options);
     const { defaultDeps } = options;
     /**
      * **IMPORTANT NOTE:** `selectDeps` function must not be changed after initialization.
@@ -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 (typeof selectDeps === 'string' ? state[selectDeps] : state);
+        return 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

@@ -1,49 +1,33 @@
-import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../store';
 import { Maybe } from '../utils';
+import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreState, StoreState, Subscribers } from '../vanilla/init-store';
 import { WatchProps } from './create-store';
 export type StoreKey = Record<string, any> | undefined;
-export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = T | ((api: {
+export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = T | ((api: {
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
     key: TKey;
     keyHash: string;
 }) => T);
-export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
+export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = {
     /**
      * @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 (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.
+     * Value of `null` will also make it reactive to all state change.
      *
      * **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
-     * };
-     * ```
      */
-    <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;
+    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): 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> | keyof T) => () => void;
+    set: (key: Maybe<TKey>, value: SetStoreState<T>, silent?: boolean) => void;
+    setAll: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     getStores: () => Map<string, InitStoreReturn<T>>;
@@ -56,12 +40,12 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
      * - This is a hook, put it inside of a React component
      * - Put this on the root component or parent component, before any component subscribed!
      */
-    setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K> & {
+    setDefaultValues: (key: Maybe<TKey>, values: SetStoreState<T>) => void;
+    Watch: (props: WatchProps<T> & {
         storeKey?: Maybe<TKey>;
     }) => any;
 };
-export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = InitStoreOptions<T> & {
+export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreState = StoreState> = InitStoreOptions<T> & {
     onBeforeChangeKey?: (nextKey: TKey, prevKey: TKey) => void;
     /**
      * Will be triggered when a single store with a specific key was initialized.
@@ -70,8 +54,8 @@ export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends Stor
     defaultDeps?: SelectDeps<T>;
     hashKeyFn?: (obj: TKey) => string;
 };
-export declare const hashStoreKey: (value?: any) => string;
+export declare const hashStoreKey: (obj?: any) => string;
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstores
  */
-export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreData = StoreData>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;
+export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreState = StoreState>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;

package/lib/react/create-stores.js

@@ -2,34 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStores = exports.hashStoreKey = void 0;
 const react_1 = require("react");
-const store_1 = require("../store");
 const utils_1 = require("../utils");
-const hasObjectPrototype = (value) => {
-    return Object.prototype.toString.call(value) === '[object Object]';
-};
-const isPlainObject = (value) => {
-    if (!hasObjectPrototype(value))
-        return false;
-    const ctor = value.constructor;
-    if (typeof ctor === 'undefined')
-        return true;
-    const prot = ctor.prototype;
-    if (!hasObjectPrototype(prot))
-        return false;
-    if (!prot.hasOwnProperty('isPrototypeOf'))
-        return false;
-    return true;
-};
-const hashStoreKey = (value) => 
-// Copied from: https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts
-JSON.stringify(value, (_, val) => isPlainObject(val)
-    ? Object.keys(val)
-        .sort()
-        .reduce((result, key) => {
-        result[key] = val[key];
-        return result;
-    }, {})
-    : val);
+const init_store_1 = require("../vanilla/init-store");
+const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());
 exports.hashStoreKey = hashStoreKey;
 /**
  * @see https://floppy-disk.vercel.app/docs/api#createstores
@@ -41,7 +16,7 @@ const createStores = (initializer, options = {}) => {
         const key = _key || {};
         const keyHash = hashKeyFn(key);
         if (!stores.has(keyHash)) {
-            stores.set(keyHash, (0, store_1.initStore)((api) => (0, utils_1.getValue)(initializer, { key, keyHash, ...api }), options));
+            stores.set(keyHash, (0, init_store_1.initStore)((api) => (0, utils_1.getValue)(initializer, { key, keyHash, ...api }), options));
             onStoreInitialized(key, keyHash);
         }
         return stores.get(keyHash);
@@ -50,7 +25,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' || typeof args[0] === 'string' ? [{}, args[0]] : args);
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
         const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -67,8 +42,7 @@ const createStores = (initializer, options = {}) => {
         }, [keyHash]);
         if (keyHash !== prevKeyHash.current)
             onBeforeChangeKey(key, prevKey.current);
-        const state = get();
-        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
+        return get();
     };
     useStores.get = (key) => {
         const store = getStore(key);

package/lib/{fetcher.js → vanilla/fetcher.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetcher = void 0;
-const utils_1 = require("./utils");
+const utils_1 = require("../utils");
 const encodeParams = (params) => Object.entries(params)
     .filter(([, value]) => value !== undefined && value !== null)
     .map((kv) => kv.map(encodeURIComponent).join('='))

package/{esm/store.d.ts → lib/vanilla/init-store.d.ts}

@@ -1,11 +1,11 @@
-import { Maybe } from './utils';
-export type StoreData = Record<string, any>;
-export type SetStoreData<T> = Partial<T> | ((prevState: T) => Partial<T>);
+import { Maybe } from '../utils';
+export type StoreState = Record<string, any>;
+export type SetStoreState<T> = Partial<T> | ((state: T) => Partial<T>);
 export type SelectDeps<T> = ((state: T) => any[]) | undefined | null;
 export type Subscribers<T> = Map<(state: T) => void, SelectDeps<T>>;
 export type StoreInitializer<T> = T | ((api: {
     get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
 }) => T);
 export type StoreEvent<T> = (state: T) => void;
 export type InitStoreOptions<T> = {
@@ -17,8 +17,8 @@ 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> | keyof T) => () => void;
+    set: (value: SetStoreState<T>, silent?: boolean) => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: () => Subscribers<T>;
 };
-export declare const initStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;
+export declare const initStore: <T extends StoreState>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T>) => InitStoreReturn<T>;

package/lib/{store.js → vanilla/init-store.js}

@@ -1,55 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initStore = void 0;
-const utils_1 = require("./utils");
+const utils_1 = require("../utils");
 const initStore = (initializer, options = {}) => {
     const { intercept, onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onUnsubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, } = options;
     const subscribers = new Map();
     const getSubscribers = () => subscribers;
-    let data;
-    const get = () => data;
+    let state;
+    const get = () => state;
     const set = (value, silent = false) => {
-        const prevData = data;
-        data = { ...data, ...(0, utils_1.getValue)(value, data) };
+        const prevState = state;
+        state = { ...state, ...(0, utils_1.getValue)(value, state) };
         if (intercept) {
-            data = { ...data, ...intercept(data, prevData) };
+            state = { ...state, ...intercept(state, prevState) };
         }
         if (silent)
             return;
-        const keys = Object.keys(data);
+        const keys = Object.keys(state);
         subscribers.forEach((selectDeps, fn) => {
             if (!selectDeps) {
                 for (let i = 0, n = keys.length; i < n; i++) {
-                    if (prevData[keys[i]] !== data[keys[i]]) {
-                        fn(data);
+                    if (prevState[keys[i]] !== state[keys[i]]) {
+                        fn(state);
                         break;
                     }
                 }
                 return;
             }
-            const prevs = selectDeps(prevData);
-            const nexts = selectDeps(data);
+            const prevs = selectDeps(prevState);
+            const nexts = selectDeps(state);
             for (let i = 0, n = prevs.length; i < n; i++) {
                 if (prevs[i] !== nexts[i]) {
-                    fn(data);
+                    fn(state);
                     break;
                 }
             }
         });
     };
     const subscribe = (fn, selectDeps) => {
-        subscribers.set(fn, (typeof selectDeps === 'string' ? (s) => [s[selectDeps]] : selectDeps));
+        subscribers.set(fn, selectDeps);
         if (subscribers.size === 1)
-            onFirstSubscribe(data);
-        onSubscribe(data);
+            onFirstSubscribe(state);
+        onSubscribe(state);
         return () => {
             subscribers.delete(fn);
-            onUnsubscribe(data);
+            onUnsubscribe(state);
             if (subscribers.size === 0)
-                onLastUnsubscribe(data);
+                onLastUnsubscribe(state);
         };
     };
-    data = (0, utils_1.getValue)(initializer, { get, set });
+    state = (0, utils_1.getValue)(initializer, { get, set });
     return { get, set, subscribe, getSubscribers };
 };
 exports.initStore = initStore;

package/package.json

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