state-jet 2.0.5 → 2.0.7

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. 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?
 
@@ -53,6 +51,203 @@ function Counter() {
   return <button onClick={() => counter.set(count + 1)}>Count: {count}</button>;
 }
 ```
+## ⚡ 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.
+- **Optimistic Updates & Rollback** → Unlike Zustand, state-jet has built-in support for instant UI updates and auto-revert on failures.
+- **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
+
+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
+import { useSlice } from "state-jet";
+
+export const useProductSlice = () => useSlice("products")("list", []);
+
+export const useCartSlice = () =>
+  useSlice("cart")("items", []);
+
+export const useUserSlice = () => useSlice("user")("info", null);
+```
+
+## Create Store
+
+```bash
+import { useStore } from "state-jet";
+import { useProductSlice, useCartSlice, useUserSlice } from "./slices";
+
+const initializer: any = () => ({
+  products: useProductSlice(),
+  cart: useCartSlice(),
+  user: useUserSlice()
+});
+
+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.
+
+```bash
+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
+
+```bash
+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
+
+```bash
+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
+
+```bash
+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.
+
+```bash
+interface Todo = {
+  id: number;
+  text: string;
+  completed: boolean
+};
+
+const todoState = useStateGlobal<Todo[]>("todos", []);
+```
 
 ## ⚡ Comparison Table
 | Feature                  | Redux  | Recoil | MobX  | Jotai  | Zustand                | state-jet            |
@@ -67,54 +262,6 @@ function Counter() {
 | **CRDT Conflict Resolution** | ❌ No  | ❌ No  | ❌ No  | ❌ No  | ❌ No                 | ✅ Yes              |
 
 
-## ⚡ 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.
-- **Optimistic Updates & Rollback** → Unlike Zustand, state-jet has built-in support for instant UI updates and auto-revert on failures.
-- **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
-
-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. 🚀
-
-## 🎯 Why Use `optimisticUpdate`?
-
-| Feature                 | Without `optimisticUpdate` | With `optimisticUpdate`     |
-| ----------------------- | -------------------------- | --------------------------- |
-| **UI Responsiveness**   | Delayed (Waits for API)    | Instant update (Optimistic) |
-| **User Experience**     | Slow & Janky               | Fast & Smooth               |
-| **Rollback on Failure** | Manual Handling            | Automatic                   |
-| **Code Complexity**     | High                       | Low                         |
-
-## 🎯 Why Use `syncCRDT`?
-
-| Feature                | Without `syncCRDT` | With `syncCRDT`            |
-| ---------------------- | ------------------ | -------------------------- |
-| **Multi-User Sync**    | Possible Conflicts | ✅ Automatic Merging       |
-| **Real-Time Updates**  | Needs Manual Fixes | ✅ No Data Loss            |
-| **Handles Conflicts**  | Can Lose Changes   | ✅ Merges Automatically    |
-| **Scalable for Teams** | Hard to Maintain   | ✅ Ideal for Collaboration |
-
-## 🎯 Why Use `derivedState`?
-
-| Feature                   | Without `derivedState`      | With `derivedState`            |
-| ------------------------- | --------------------------- | ------------------------------ |
-| **Manual Recalculations** | ❌ Yes (Recompute manually) | ✅ Automatic                   |
-| **Reactivity**            | ❌ Requires `useEffect`     | ✅ Updates only when needed    |
-| **Performance**           | ❌ Unoptimized              | ✅ Only recalculates on change |
-| **Code Complexity**       | ❌ High                     | ✅ Minimal                     |
-
-## 🎯 Why Use `undo & redo`?
-
-| Feature                | Without Undo/Redo        | With Undo/Redo             |
-| ---------------------- | ------------------------ | -------------------------- |
-| **Accidental Changes** | ❌ Lost forever          | ✅ Easily undone           |
-| **User Experience**    | ❌ Frustrating           | ✅ Smooth & intuitive      |
-| **Multi-Step Editing** | ❌ Hard to track         | ✅ Easy to restore history |
-| **Performance**        | ❌ Needs manual tracking | ✅ Automatic               |
-
 ## Contributing
 
 Development of State-jet happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving State-jet.

package/package.json

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