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

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-mutation.js

@@ -4,7 +4,7 @@ import { createStore } from './create-store';
  * @see https://floppy-disk.vercel.app/docs/api#createmutation
  */
 export const createMutation = (mutationFn, options = {}) => {
-    const { onMutate = noop, onSuccess = noop, onError = noop, onSettled = noop, ...createStoreOptions } = options;
+    const { onMutate = noop, onSuccess = noop, onError = console.error, onSettled = noop, ...createStoreOptions } = options;
     const useMutation = createStore(({ set, get }) => ({
         isWaiting: false,
         isSuccess: false,

package/esm/react/create-query.js

@@ -40,7 +40,7 @@ export const createQuery = (queryFn, options = {}) => {
     const defaultFetchOnReconnect = options.fetchOnMount ?? true;
     const { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = 3000, // 3 seconds
     fetchOnMount = true, fetchOnWindowFocus = defaultFetchOnWindowFocus, fetchOnReconnect = defaultFetchOnReconnect, enabled = true, retry = 1, retryDelay = 2000, // 2 seconds
-    keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, cacheTime = 5 * 60 * 1000, refetchInterval = false, ...createStoresOptions } = options;
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = console.error, onSettled = noop, cacheTime = 5 * 60 * 1000, refetchInterval = false, ...createStoresOptions } = options;
     const retryTimeoutId = new Map();
     const retryNextPageTimeoutId = new Map();
     const resetTimeoutId = new Map();

package/lib/react/create-mutation.js

@@ -7,7 +7,7 @@ const create_store_1 = require("./create-store");
  * @see https://floppy-disk.vercel.app/docs/api#createmutation
  */
 const createMutation = (mutationFn, options = {}) => {
-    const { onMutate = utils_1.noop, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, ...createStoreOptions } = options;
+    const { onMutate = utils_1.noop, onSuccess = utils_1.noop, onError = console.error, onSettled = utils_1.noop, ...createStoreOptions } = options;
     const useMutation = (0, create_store_1.createStore)(({ set, get }) => ({
         isWaiting: false,
         isSuccess: false,

package/lib/react/create-query.js

@@ -43,7 +43,7 @@ const createQuery = (queryFn, options = {}) => {
     const defaultFetchOnReconnect = options.fetchOnMount ?? true;
     const { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = 3000, // 3 seconds
     fetchOnMount = true, fetchOnWindowFocus = defaultFetchOnWindowFocus, fetchOnReconnect = defaultFetchOnReconnect, enabled = true, retry = 1, retryDelay = 2000, // 2 seconds
-    keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, cacheTime = 5 * 60 * 1000, refetchInterval = false, ...createStoresOptions } = options;
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = console.error, onSettled = utils_1.noop, cacheTime = 5 * 60 * 1000, refetchInterval = false, ...createStoresOptions } = options;
     const retryTimeoutId = new Map();
     const retryNextPageTimeoutId = new Map();
     const resetTimeoutId = new Map();

package/package.json

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