state-jet 2.0.6 → 2.0.8

package/README.md

@@ -1,8 +1,6 @@
-# 🚀 state-jet: Ultra-Lightweight Global State for React
+A zero-boilerplate, ultra-fast global state management library for React.
 
-A zero-boilerplate, ultra-fast global state management library for React. No context, reducers, or providers—just simple reactive state.
-
-For more Information, see [here](https://statejet.netlify.app).
+For more details, see [here](https://statejet.netlify.app).
 
 ## 🚀 Why state-jet?
 
@@ -43,7 +41,7 @@ Or if you're using `cdn`:
 
 ## Basic Example Usage
 
-```bash
+```tsx
 import { useStateGlobal } from "state-jet";
 
 const counter = useStateGlobal("counter", 0);
@@ -53,7 +51,7 @@ function Counter() {
   return <button onClick={() => counter.set(count + 1)}>Count: {count}</button>;
 }
 ```
-## ⚡ Why state-jet Is More Advanced Than Zustand
+## Why state-jet Is More Advanced Than Zustand
 
 - **No Proxies Needed** → Zustand uses proxies for state updates, but state-jet uses signals, making it even faster.
 - **Derived State Is Automatic** → No need for selectors; state updates only trigger where necessary.
@@ -61,26 +59,27 @@ function Counter() {
 - **Multi-Tab Sync** → global state persists across browser tabs and devices.
 - **CRDT Support** → Automatic conflict resolution for real-time apps, something even Zustand lacks.
 
-### ✅Conclusion
+### ✅ Conclusion
 
 If you need the simplest, fastest, and most advanced state management solution for React, state-jet beats Redux, Recoil, MobX, Jotai, and even Zustand in performance, reactivity, and developer experience. 🚀
 
 ## Create Slice
 
-```bash
+```tsx
 import { useSlice } from "state-jet";
 
-export const useProductSlice = () => useSlice("products")("list", []);
-
-export const useCartSlice = () =>
-  useSlice("cart")("items", []);
+const productSlice = useSlice("products");
+const cartSlice = useSlice("cart");
+const userSlice =  useSlice("user");
 
-export const useUserSlice = () => useSlice("user")("info", null);
+export const useProductSlice = () => productSlice("list", []);
+export const useCartSlice = () => cartSlice("items", []);
+export const useUserSlice = () => userSlice("info", null);
 ```
 
 ## Create Store
 
-```bash
+```tsx
 import { useStore } from "state-jet";
 import { useProductSlice, useCartSlice, useUserSlice } from "./slices";
 
@@ -93,6 +92,164 @@ const initializer: any = () => ({
 export const useEcommerceStore = () =>  useStore(initializer);
 ```
 
+## Middlewares
+
+Unlike other libraries, you do not need to rely on any external dependencies. A `middleware` property from `options` helps to add middleware for state-jet.
+
+```bash
+function useStateGlobal<T>(
+    ...
+    options?: { middleware?: Middleware<T>[] }
+) 
+```
+
+### Logger Middleware
+
+You can log your store for every action.
+
+```tsx
+import { useStateGlobal } from "state-jet";
+
+const loggerMiddleware = (key: string, prev: number, next: number) => {
+  console.log(`[state-jet] ${key}: ${prev} → ${next}`);
+};
+
+const counter = useStateGlobal("counter", 0, { middleware: [loggerMiddleware] });
+
+export default function Counter() {
+  const count = counter.useState() as number;
+
+  return (
+    <div>
+      <h1>Counter: {count}</h1>
+      <button onClick={() => counter.set(count - 1)}>Decrement</button>
+      <button onClick={() => counter.set(count + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+### Reducer Middleware
+
+Can't live without reducer?. No worries. StateJet supports reducer middleware
+
+```tsx
+import { useStateGlobal } from "state-jet";
+
+type Action<T> = { type: string; payload?: T };
+type Middleware<T> = (
+  key: string,
+  prev: T,
+  next: T | Action<T> | any,
+  set?: (value: T) => void,
+) => T | void | Promise<void>;
+
+const reducerMiddleware: Middleware<number> = (key, prev, action: Action<any>) => {
+  switch (action.type) {
+    case "INCREMENT":
+      return prev + 1;
+    case "DECREMENT":
+      return prev - 1;
+    case "RESET":
+      return 0;
+    default:
+      return prev;
+  }
+}
+
+const counter = useStateGlobal("counter", 0, { middleware: [reducerMiddleware] });
+
+export default function Counter() {
+  const count = counter.useState() as number;
+
+  return (
+    <div>
+      <h1>Counter: {count}</h1>
+      <button onClick={() => counter.set({ type: "DECREMENT" })}>Decrement</button>
+      <button onClick={() => counter.set({ type: "INCREMENT" })}>Increment</button>
+      <button onClick={() => counter.set({ type: "RESET" })}>Reset</button>
+    </div>
+  );
+}
+```
+
+### Optimistic Middleware
+
+You can optimistically update global state with rollback support
+
+```tsx
+import { useStateGlobal } from "state-jet";
+
+const optimisticMiddleware = (apiUrl: string) => {
+  return async (key: string, prev: number, next: number, set: any) => {
+    set(next); // Optimistically update state
+
+    try {
+      await fetch(apiUrl, {
+        method: "POST",
+        body: JSON.stringify({ key, value: next }),
+        headers: { "Content-Type": "application/json" },
+      });
+    } catch (error) {
+      console.warn(`[state-jet] Rollback: Failed to sync ${key}`);
+      set(prev); // Rollback state on failure
+    }
+  };
+};
+const profile = useStateGlobal("profile", { name: "John" }, { 
+    middleware: [optimisticMiddleware("/update-profile")],
+});
+```
+
+### Custom Middleware
+
+You can create your own custom middleware in state-jet
+
+```tsx
+import { useStateGlobal } from "state-jet";
+
+const validateAgeMiddleware = (key: string, prev: number, next: number) => {
+  if (key === "age" && next < 0) {
+    console.warn("Age cannot be negative!");
+    return prev;
+  }
+  return next;
+};
+const ageState = useStateGlobal("age", 0, { middleware: [validateAgeMiddleware] });
+
+export default function Profile() {
+  const age = ageState.useState() as number;
+
+  return (
+    <div>
+      <h1>Age: {age}</h1>
+      <button 
+        onClick={() => {
+          counter.set(-5) //Age will be 0 eventhough it updated with negative value due to middleware logic
+        }}>
+          Set negative
+      </button> 
+    </div>
+  );
+}
+```
+
+A more complete middleware usage is [here](https://statejet.netlify.app/docs/api-reference/middlewares/).
+
+## Typescript Usage
+
+Here is the example for creating global state with typescript definition.
+
+```tsx
+interface Todo = {
+  id: number;
+  text: string;
+  completed: boolean
+};
+
+const todoState = useStateGlobal<Todo[]>("todos", []);
+```
+
 ## ⚡ Comparison Table
 | Feature                  | Redux  | Recoil | MobX  | Jotai  | Zustand                | state-jet            |
 |--------------------------|--------|--------|-------|--------|------------------------|----------------------|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "state-jet",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Ultra-lightweight global state management for React",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",