Merge pull request #27 from HichemTab-tech/add-subscriber-to-api

feat: add subscribe method to SharedValuesManager for listening to shared data changes

Author: HichemTab-tech

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-shared-states",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "type": "module",
   "description": "Global state made as simple as useState, with zero config, built-in async caching, and automatic scoping.",
   "keywords": [

src/SharedValuesManager.ts

@@ -282,4 +282,22 @@ export class SharedValuesApi<T extends SharedValue, V, R = T> {
         });
         return all;
     }
+
+    subscribe<S extends string = string>(sharedCreated: SharedCreated, listener: AFunction): void;
+    subscribe<S extends string = string>(key: S | SharedCreated, listener: AFunction, scopeName?: Prefix) {
+        let keyStr!: string;
+        let prefixStr!: string;
+        if (typeof key === "string") {
+            keyStr = key;
+            prefixStr = scopeName || "_global";
+        }
+        else{
+            keyStr = key.key;
+            prefixStr = key.prefix;
+        }
+        this.sharedData.addListener(keyStr, prefixStr, listener);
+        return () => {
+            this.sharedData.removeListener(keyStr, prefixStr, listener);
+        }
+    }
 }

tests/index.test.tsx

@@ -175,6 +175,26 @@ describe('useSharedState', () => {
         // Get value after clear (should be initial value because createSharedState re-initializes it)
         expect(sharedStatesApi.get(sharedCounter)).toBe(100);
     });
+
+    it('should be able to subscribe to state changes from api', () => {
+        const sharedCounter = createSharedState(100);
+
+        const subscribeCallback = vi.fn();
+
+        act(() => {
+            sharedStatesApi.subscribe(sharedCounter, () => {
+                subscribeCallback();
+                expect(sharedStatesApi.get(sharedCounter)).toBe(200);
+            });
+        });
+
+        // Update the value
+        act(() => {
+            sharedStatesApi.set(sharedCounter,200);
+        });
+
+        expect(subscribeCallback).toHaveBeenCalledTimes(1);
+    });
 });
 
 describe('useSharedFunction', () => {