floppy-disk 1.4.0-beta.2 → 1.4.1-beta.1

package/README.md

@@ -8,8 +8,7 @@ This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zust
 
 ```js
 import { create } from 'zustand'; // 3.3 kB (gzipped: 1.5 kB)
-
-import { createStore } from 'floppy-disk'; // 1.1 kB (gzipped: 622 B) 🎉
+import { createStore } from 'floppy-disk'; // 1.3 kB (gzipped: 702 B) 🎉
 
 import {
   QueryClient,
@@ -18,14 +17,13 @@ import {
   useInfiniteQuery,
   useMutation,
 } from '@tanstack/react-query'; // 41 kB (gzipped: 11 kB)
-
-import { createQuery, createMutation } from 'floppy-disk'; // 6.4 kB (gzipped: 2.3 kB) 🎉
+import { createQuery, createMutation } from 'floppy-disk'; // 7.5 kB (gzipped: 2.6 kB) 🎉
 ```
 
 - Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/  
-  👉 Total: **309.22 kB** ~ gzipped 97.66 kB
+  👉 Total: **309.22 kB**
 - Using Floppy Disk: https://demo-floppy-disk.vercel.app/  
-  👉 Total: **279.63 kB** ~ gzipped 89.35 kB
+  👉 Total: **282.86 kB** 🎉
 
 ## Table of Contents
 
@@ -71,6 +69,8 @@ function Control() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/basic](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/basic)
+
 Control the reactivity. The concept is same as useEffect dependency array.
 
 ```jsx
@@ -100,6 +100,8 @@ function Cat() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/custom-reactivity](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/custom-reactivity)
+
 Reading/writing state and reacting to changes outside of components.
 
 ```js
@@ -122,11 +124,6 @@ const unsub = useCatStore.subscribe(
 );
 ```
 
-> **Examples:**
->
-> - [https://codesandbox.io/.../examples/react/basic](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/basic)
-> - [https://codesandbox.io/.../examples/react/custom-reactivity](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/custom-reactivity)
-
 ### Advanced Concept
 
 Set the state **silently** (without broadcast the state change to **any subscribers**).
@@ -176,10 +173,9 @@ const useCatStore = createStore(
 );
 ```
 
-> **Examples:**
->
-> - [https://codesandbox.io/.../examples/react/store-event](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/store-event)
-> - [https://codesandbox.io/.../examples/react/intercept](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/intercept)
+> Example:  
+> [https://codesandbox.io/.../examples/react/store-event](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/store-event)  
+> [https://codesandbox.io/.../examples/react/intercept](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/intercept)
 
 Let's go wild using IIFE.
 
@@ -238,9 +234,7 @@ function CatPageOptimized() {
 }
 ```
 
-> **Examples:**
->
-> - [https://codesandbox.io/.../examples/react/watch-component](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/watch-component)
+> Example: [https://codesandbox.io/.../examples/react/watch-component](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/watch-component)
 
 Want a local state instead of global state?  
 Or, want to set the initial state inside component?
@@ -289,12 +283,14 @@ function CatIsSleeping() {
   return (
     <>
       <div>Is Sleeping: {String(isSleeping)}</div>
-      <button onClick={useCatStore.get().increase}>Increase cat age</button>
+      <button onClick={useCatStore.get().increaseAge}>Increase cat age</button>
     </>
   );
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/local-state](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/local-state)
+
 Set default reactivity.
 
 ```jsx
@@ -338,6 +334,7 @@ const useCatStores = createStores(
     onBeforeChangeKey: (nextKey, prevKey) => {
       console.log('Store key changed', nextKey, prevKey);
     },
+    // ... same as createStore
   },
 );
 
@@ -367,6 +364,8 @@ function Control({ catId }) {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/stores](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/stores)
+
 ## Query & Mutation
 
 With the power of `createStores` function and a bit creativity, we can easily create a hook just like `useQuery` and `useInfiniteQuery` in [React-Query](https://tanstack.com/query) using `createQuery` function.
@@ -398,6 +397,8 @@ function SingleQuery() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/query](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/query)
+
 Custom reactivity:
 
 ```jsx
@@ -492,6 +493,8 @@ function PokemonPage() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/query-with-param](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/query-with-param)
+
 Get data or do something outside component:
 
 ```jsx
@@ -549,11 +552,14 @@ function PokemonListPage() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/infinite-query](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/infinite-query)
+
 **Note:**
 
 - The default stale time is 3 seconds.
-- The default reactivity of a query is `(state) => [state.data, state.error]`.  
-  (For paginated query `(state) => [state.data, state.error, state.isWaitingNextPage, state.hasNextPage]`)
+- The default error retry attempt is 1 time, and retry delay is 3 seconds.
+- The default reactivity of a query is `(s) => [s.data, s.error]`.  
+  (For paginated: `(s) => [s.data, s.error, s.isWaitingNextPage, s.hasNextPage]`)
 - You can change the `defaultDeps` on `createQuery` options.
 
 ### Mutation
@@ -599,6 +605,15 @@ function Login() {
 }
 ```
 
+> Example: [https://codesandbox.io/.../examples/react/mutation](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/mutation)
+
+<br><br>
+
+<p align="center">
+  — ✨ 💾 ✨ —
+</p>
+<br>
+
 ## Important Notes
 
 Don't mutate.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.1-beta.1",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",
@@ -30,9 +30,6 @@
   ],
   "types": "lib/index.d.ts",
   "typings": "lib/index.d.ts",
-  "engines": {
-    "node": ">=14"
-  },
   "scripts": {
     "prepare": "husky install",
     "build:cjs": "tsc -p tsconfig.prod.json",