[FIX] createPubSubStore hook

Author: nDriaDev

apps/react-tools-demo/src/markdown/createPubSubStore.md

@@ -86,9 +86,9 @@ boolean that indicates if the store value will be persisted on the local Storage
     - __usePubSubStore__ : _<C>(subscribe?: (store: T) => C)=>[T|C, (store: T|C|((currStore: T) => T)|((currStore: C) => C)) => void, () => T]_  
 > An object with three _immutable_ functions:
 > - __getStore__: function that returns the store object.
-> - __updateStore__: function that updates the store: it receives a callback with an only parameter, the store, and return void. Inside this function it can possible to modify to any store properties: changes will be notified to every user of the store.
-> - __usePubSubStore__: It's the hook to be used inside components to access the store. It receives an optional callback _subscribe_ to specify to which part of store you want access and to be notified of its changes. If no callback is gived, it returns the whole store. It returns an array of three elements:
->     - _first element_: the __state__. Represents the slice of store indicated by _subscribe_ callback or the whole store.
-> 	   - _second element_: the __updateState__. An _immutable_ function that represents the function to update the state. Depending on whether the hook was invoked by passing the _subscribe_ callback or not, it receives a new value for the slice or the entire store or a callback with only one parameter, the current slice or store, which returns a new slice or value of the shop.
->     - _third element_: the __getState__. An _immutable_ function that returns the current state returned by hook that can be a slice or the whole store, depending on the present of the _subscribe_ callback.
+> - __updateStore__: function that updates the store: it receives a callback with an only parameter, the store, and return void. Inside this function it can be possible to modify any store properties: changes will be published to every subscriber.
+> - __usePubSubStore__: It's the hook to be used inside components to access the store. It receives an optional callback _subscribe_ to specify to which part of store you want to subscribe.If callback missed, the whole store will be subscribed. It returns an array of three elements:
+>     - _first element_: the __state__. It represents what has been subscribed.
+> 	   - _second element_: the __updateState__. An _immutable_ function that represents the function to update the state. It can be executed given it a new version of the subscribed value or with a callback that receives the subscribed value and returns a new version of it.
+>     - _third element_: the __getState__. An _immutable_ function that returns the current subscribed value.
 >

packages/react-tools/README.md

@@ -17,7 +17,6 @@
 	- [x] useDerivedState
 	- [x] useStateValidator
 	- [x] createPubSubStore
-	- [ ] useObservable — (https://netbasal.com/javascript-observables-under-the-hood-2423f760584)
 	- [ ] useSignal (https://medium.com/@personal.david.kohen/the-quest-for-signals-in-react-usestate-on-steroids-71eb9fc87c14)
 	- [ ] createSignal (https://medium.com/@personal.david.kohen/the-quest-for-signals-in-react-usestate-on-steroids-71eb9fc87c14)
 	- [ ] useProxyStore (TODO: https://github.com/streamich/react-use/blob/master/src/factory/createGlobalState.ts)

packages/react-tools/src/hooks/createPubSubStore.ts

@@ -16,14 +16,34 @@ function handler<T>(path: string[]) {
 	}
 }
 
+function updateReference<T extends Record<string, unknown>, C>(currStore: T, storeSlice: Record<string, unknown>, property: string, updatedValue: C) {
+	if (currStore === storeSlice) {
+		currStore[property as keyof T] = updatedValue as T[keyof T];
+		return;
+	}
+	for (const prop in currStore) {
+		if (currStore[prop] === storeSlice) {
+			if (Array.isArray(currStore[prop])) {
+				currStore[prop] = [...(currStore[prop] as Array<unknown>)] as T[Extract<keyof T, string>];
+			} else {
+				currStore[prop] = { ...(currStore[prop] as Record<string, unknown>) } as T[Extract<keyof T, string>];
+			}
+			currStore[prop][property as keyof typeof currStore[typeof prop]] = updatedValue as T[Extract<keyof T, string>][keyof T[typeof prop]];
+			return;
+		} else if (Array.isArray(currStore[prop]) || typeof currStore[prop] === "object") {
+			return updateReference(currStore[prop] as T, storeSlice, property, updatedValue);
+		}
+	}
+}
+
 /**
  * **`createPubSubStore`**: A state management hook implemented on Publish-Subscribe pattern. It allows components to subscribe to state changes and receive updates whenever the state is modified, providing a scalable and decoupled state management solution.
  * @param {T extends Record<string, unknown>} obj - Object that rapresent the initialState of the store.
  * @param {boolean} [persist=false] - boolean that indicates if the store value will be persisted on the local Storage.
  * @returns {{getStore:()=>T, updateStore:(cb:(globStore:T)=>void), usePubSubStore:<C>(subscribe?: (store: T) => C)=>[T|C, (store: T|C|((currStore: T) => T)|((currStore: C) => C)) => void, () => T]}} result
  * An object with three _immutable_ functions:
  * - __getStore__: function that returns the store object.
- * - __updateStore__: function that updates the store: it receives a callback with an only parameter, the store, and return void. Inside this function it can be possible to modify any store properties: changes will be published to every subscribers.
+ * - __updateStore__: function that updates the store: it receives a callback with an only parameter, the store, and return void. Inside this function it can be possible to modify any store properties: changes will be published to every subscriber.
  * - __usePubSubStore__: It's the hook to be used inside components to access the store. It receives an optional callback _subscribe_ to specify to which part of store you want to subscribe.If callback missed, the whole store will be subscribed. It returns an array of three elements:
  *     - _first element_: the __state__. It represents what has been subscribed.
  * 	   - _second element_: the __updateState__. An _immutable_ function that represents the function to update the state. It can be executed given it a new version of the subscribed value or with a callback that receives the subscribed value and returns a new version of it.
@@ -97,25 +117,33 @@ export const createPubSubStore = <T extends Record<string, unknown>>(obj: T, per
 
 		const publish = useRef((store: T | C | ((currStore: T) => T)  | ((currStore: C) => C)) => {
 			if (!subscribe) {
-				const newStore = store instanceof Function ? (store as ((currStore: T) => T))(currentStore.current as T) : store as T;
-				persist && localStorage.setItem(topicName, JSON.stringify(newStore));
-				pubSub.publish(topicName, newStore);
+				//INFO if subscribe is undefined, i am updating the whole store.
+				const updatedValue = store instanceof Function ? (store as ((currStore: T) => T))(currentStore.current as T) : store as T;
+				persist && localStorage.setItem(topicName, JSON.stringify(updatedValue));
+				pubSub.publish(topicName, updatedValue);
 			} else {
-				const newStore = store instanceof Function ? (store as ((currStore: C) => C))(currentStore.current as C) : store as C;
-				let newValue: Record<string, unknown> = {};
-				if (path.current.length === 1) {
-					newValue = {...getStore()};
-					newValue[path.current[path.current.length - 1]] = newStore;
-					persist && localStorage.setItem(topicName, JSON.stringify(newValue));
-					pubSub.publish(topicName, newValue);
-				} else {
-					for (let i = 0; i < path.current.length - 1; i++) {
-						!(path.current[i] in newValue) && (newValue[path.current[i]] = getStore()[path.current[i] as keyof ReturnType<typeof getStore>]);
-						newValue = newValue[path.current[i]] as Record<string, unknown>;
-					}
-					newValue[path.current[path.current.length - 1]] = newStore;
+				/**
+				 * INFO if subscribe provided, i computed updatedValue and i rebuild the path of state defined by subscribe function with path.current variable.
+				 * If updatedValue is an object or an array, i edit the store by variable reference, assigning store value to storeSlice variable if it is empty.
+				 * Otherwise if updatedValue isn't an object or an array, by updateReference function i assign the updatedValue to store directly, searching in its
+				 * properties the reference to storeSlice value.
+				 */
+				const updatedValue = store instanceof Function ? (store as ((currStore: C) => C))(currentStore.current as C) : store as C;
+				let storeSlice: Record<string, unknown> = getStore();
+				for (let i = 0; i < path.current.length - 1; i++) {
+					!(path.current[i] in storeSlice) && (storeSlice[path.current[i]] = getStore()[path.current[i] as keyof ReturnType<typeof getStore>]);
+					storeSlice = storeSlice[path.current[i]] as Record<string, unknown>;
+				}
+				if (Array.isArray(updatedValue) || typeof updatedValue === "object") {
+					storeSlice[path.current[path.current.length - 1]] = updatedValue;
 					persist && localStorage.setItem(topicName, JSON.stringify(getStore()));
 					pubSub.publish(topicName, getStore());
+				} else {
+					const currStore = getStore();
+					updateReference(currStore, storeSlice, path.current[path.current.length - 1], updatedValue);
+					storeSlice = currStore;
+					persist && localStorage.setItem(topicName, JSON.stringify(storeSlice));
+					pubSub.publish(topicName, storeSlice);
 				}
 			}
 		});
@@ -128,4 +156,4 @@ export const createPubSubStore = <T extends Record<string, unknown>>(obj: T, per
 		updateStore,
 		usePubSubStore
 	}
-}
+}