state-jet 1.0.10 → 1.0.11

package/README.md

@@ -2,12 +2,22 @@
 
 A zero-boilerplate, ultra-fast global state management library for React. No context, reducers, or providers—just simple reactive state.
 
+For more details, see [here](https://statejet.netlify.app).
+
 ## 🚀 Why state-jet?
 - ✅ **No Context, No Providers** – Works outside React, reducing unnecessary re-renders.
 - ✅ **Automatic Re-Renders** – Only components using specific state values update.
 - ✅ **Super Lightweight** – Ultra small!
 - ✅ **SSR & Next.js Support** – Works on both client and server.
 
+## Documentation
+
+Documentation: https://statejet.netlify.app/docs
+
+Tutorials: https://statejet.netlify.app/docs/category/tutorial
+
+API Reference: https://statejet.netlify.app/docs/category/api-reference
+
 ## 🛠 Installation
 ```bash
 npm install state-jet
@@ -29,7 +39,7 @@ function Counter() {
 
 | Feature                  | Redux       | Recoil    | MobX          | Jotai     | Zustand                | state-jet            |
 | ------------------------ | ----------- | --------- | ------------- | --------- | ---------------------- | --------------------- |
-| Setup Required           | ✅ Yes       | ✅ Yes     | ⚠️ Yes        | ❌ No      | ⚠️ Minimal             | ❌ No                  |
+| Easy Setup           | ❌ No       | ❌ No     | ⚠️ No        | ❌ No      | ⚠️ Minimal             | ✅ Ultra-Minimal                  |
 | Bundle Size              | 🚀 Large    | 🚀 Medium | ⚡ Small       | ⚡ Small   | ⚡ Small        | 🔥 Ultra-Small |
 | Reactivity               | ⚠️ Reducers | ✅ Atoms   | ✅ Proxy-Based | ✅ Signals | ✅ Proxy-Based          | ✅ Signal-Like         |
 | Renders Only Affected    | ❌ No        | ✅ Yes     | ✅ Yes         | ✅ Yes     | ✅ Yes                  | ✅ Yes                 |
@@ -41,12 +51,59 @@ function Counter() {
 
 ## ⚡ 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** → WebSocket and IndexedDB syncing, so global state persists across browser tabs and devices.
-**CRDT Support** → Automatic conflict resolution for real-time apps, something even Zustand lacks.
+- **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. 🚀
+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.
+
+- [Contributing Guide](./CONTRIBUTING.md)
+
+### License
+
+State-jet is [MIT licensed](./LICENSE).

package/dist/index.cjs

@@ -708,18 +708,40 @@ immer.applyPatches.bind(immer);
 immer.createDraft.bind(immer);
 immer.finishDraft.bind(immer);
 
-const saveState = (key, value, encrypt = false) => {
-  if (typeof window !== "undefined") {
-    let data = JSON.stringify(value);
-    if (encrypt) data = btoa(data);
-    localStorage.setItem(key, data);
+const getGlobalThis = () => {
+  if (typeof globalThis === "object" && globalThis) return globalThis;
+  if (typeof self === "object" && self) return self;
+  if (typeof window === "object" && window) return window;
+  throw new Error("Unable to locate global `this`");
+};
+const globalObject = getGlobalThis();
+
+const saveState = (key, value) => {
+  if (typeof globalObject !== "undefined") {
+    globalObject.localStorage.setItem(key, JSON.stringify(value));
   }
 };
-const restoreState = (key) => {
-  if (typeof window !== "undefined") {
-    const data = localStorage.getItem(key);
-    return data ? JSON.parse(atob(data)) : void 0;
+const restoreState = (key, defaultValue) => {
+  if (typeof globalObject !== "undefined") {
+    const savedData = globalObject.localStorage.getItem(key);
+    return savedData ? JSON.parse(savedData) : defaultValue;
   }
+  return defaultValue;
+};
+
+const encrypt = (data) => btoa(JSON.stringify(data));
+const decrypt = (data) => JSON.parse(atob(data));
+const saveEncryptedState = (key, value) => {
+  if (typeof globalObject !== "undefined") {
+    globalObject.localStorage.setItem(key, encrypt(value));
+  }
+};
+const restoreEncryptedState = (key, defaultValue) => {
+  if (typeof globalObject !== "undefined") {
+    const data = globalObject.localStorage.getItem(key);
+    return data ? decrypt(data) : defaultValue;
+  }
+  return defaultValue;
 };
 
 var shim = {exports: {}};
@@ -956,21 +978,16 @@ const redoState = (key) => {
   }
 };
 
-const getGlobalThis = () => {
-  if (typeof globalThis === "object" && globalThis) return globalThis;
-  if (typeof self === "object" && self) return self;
-  if (typeof window === "object" && window) return window;
-  throw new Error("Unable to locate global `this`");
-};
-const globalObject = getGlobalThis();
-
 const store = /* @__PURE__ */ new Map();
 const pendingUpdates = /* @__PURE__ */ new Map();
 const history = {};
 const useStateGlobal = (key, initialValue, options) => {
   if (!store.has(key)) {
     store.set(key, { value: initialValue, listeners: /* @__PURE__ */ new Set() });
-    if (options == null ? void 0 : options.persist) restoreState(key);
+    if (options == null ? void 0 : options.persist) {
+      if (options == null ? void 0 : options.encrypt) restoreEncryptedState(key, initialValue);
+      else restoreState(key, initialValue);
+    }
   }
   const state = store.get(key);
   const undo = () => {
@@ -1006,7 +1023,10 @@ const useStateGlobal = (key, initialValue, options) => {
         notifyDevTools(key2, nextValue);
         measurePerformance(key2, () => {
         });
-        if (options == null ? void 0 : options.persist) saveState(key2, nextValue, options.encrypt);
+        if (options == null ? void 0 : options.persist) {
+          if (options == null ? void 0 : options.encrypt) saveEncryptedState(key2, nextValue);
+          else saveState(key2, nextValue);
+        }
       }
     });
     pendingUpdates.clear();
@@ -1031,9 +1051,9 @@ const useStateGlobal = (key, initialValue, options) => {
     );
   };
   const set = (newValue) => {
-    var _a, _b;
+    var _a;
     pendingUpdates.set(key, newValue);
-    if ((_b = (_a = globalObject) == null ? void 0 : _a.window) == null ? void 0 : _b.requestAnimationFrame) globalObject.window.requestAnimationFrame(batchUpdate);
+    if ((_a = globalObject) == null ? void 0 : _a.requestAnimationFrame) globalObject.requestAnimationFrame(batchUpdate);
   };
   return {
     useStore,
@@ -1043,21 +1063,37 @@ const useStateGlobal = (key, initialValue, options) => {
   };
 };
 
-const optimisticUpdate = (setState, apiCall, fallback) => {
-  const prevState = setState.useStore();
-  setState.set(apiCall(prevState));
-  apiCall().catch(() => setState.set(fallback ? fallback(prevState) : prevState));
-};
-
-const encrypt = (data) => btoa(JSON.stringify(data));
-const decrypt = (data) => JSON.parse(atob(data));
-const saveEncryptedState = (key, value) => {
-  localStorage.setItem(key, encrypt(value));
-};
-const loadEncryptedState = (key) => {
-  const data = localStorage.getItem(key);
-  return data ? decrypt(data) : null;
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
 };
+const optimisticUpdate = (setState, updateFn, apiCall, rollbackFn) => __async(void 0, null, function* () {
+  const prevState = setState.useStore();
+  const optimisticState = updateFn(prevState);
+  setState.set(optimisticState);
+  try {
+    yield apiCall();
+  } catch (error) {
+    console.error("API request failed:", error);
+    setState.set(rollbackFn ? rollbackFn(prevState) : prevState);
+  }
+});
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -1081,16 +1117,26 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const mergeCRDT = (localState, remoteState) => {
   return __spreadProps(__spreadValues(__spreadValues({}, localState), remoteState), { lastUpdated: Date.now() });
 };
-const syncCRDT = (key, remoteState) => {
-  const localState = useStateGlobal(key).useStore();
-  const merged = mergeCRDT(localState, remoteState);
-  useStateGlobal(key).set(merged);
+const syncCRDT = (remoteState, setState) => {
+  const localState = setState.useStore();
+  const mergedState = mergeCRDT(localState, remoteState);
+  setState(mergedState);
+};
+
+const derivedState = (dependencies, computeFn) => {
+  const derived = { value: computeFn(...dependencies.map((dep) => dep.useStore())) };
+  dependencies.forEach(
+    (dep) => dep.useStore().listeners.add(() => {
+      derived.value = computeFn(...dependencies.map((dep2) => dep2.useStore()));
+    })
+  );
+  return () => derived.value;
 };
 
-exports.decrypt = decrypt;
-exports.encrypt = encrypt;
-exports.loadEncryptedState = loadEncryptedState;
+exports.derivedState = derivedState;
+exports.mergeCRDT = mergeCRDT;
 exports.optimisticUpdate = optimisticUpdate;
+exports.restoreEncryptedState = restoreEncryptedState;
 exports.restoreState = restoreState;
 exports.saveEncryptedState = saveEncryptedState;
 exports.saveState = saveState;