Merge pull request #7 from mayank1513/readability

Enhance readability

Author: mayank1513

.github/workflows/sync.yml

@@ -1,8 +1,6 @@
 name: Sync
 
-on:
-  push:
-    branches: [main]
+on: [push, pull_request]
 
 jobs:
   sync:

packages/persist-and-sync/__tests__/index.test.ts

@@ -16,4 +16,11 @@ describe.concurrent("Setting state", () => {
 		expect(result.current.count).toBe(5);
 		expect(localStorage.getItem("example")).toBe('{"count":5}');
 	});
+
+	test("test exclude key", async ({ expect }) => {
+		const { result } = renderHook(() => useCookieStore());
+		act(() => result.current.set_Count(6));
+		expect(result.current._count).toBe(6);
+		expect(localStorage.getItem("example")).not.toBe('{"count":6}');
+	});
 });

packages/persist-and-sync/src/index.ts

@@ -7,12 +7,16 @@ export type PersistNSyncOptionsType = {
 	include?: (string | RegExp)[];
 	exclude?: (string | RegExp)[];
 	storage?: "localStorage" | "sessionStorage" | "cookies";
+	/** @defaultValue 100 */
+	initDelay?: number;
 };
 type PersistNSyncType = <T>(
 	f: StateCreator<T, [], []>,
 	options: PersistNSyncOptionsType,
 ) => StateCreator<T, [], []>;
 
+const DEFAULT_INIT_DELAY = 100;
+
 function getItem(options: PersistNSyncOptionsType) {
 	const { storage } = options;
 	if (storage === "cookies") {
@@ -46,7 +50,8 @@ export const persistNSync: PersistNSyncType = (stateCreator, options) => (set, g
 	const { name } = options;
 	const savedState = getItem(options);
 	/** timeout 0 is enough. timeout 100 is added to avoid server and client render content mismatch error */
-	if (savedState) setTimeout(() => set({ ...get(), ...JSON.parse(savedState) }), 100);
+	const delay = options.initDelay === undefined ? DEFAULT_INIT_DELAY : options.initDelay;
+	if (savedState) setTimeout(() => set({ ...get(), ...JSON.parse(savedState) }), delay);
 
 	const set_: typeof set = (newStateOrPartialOrFunction, replace) => {
 		set(newStateOrPartialOrFunction, replace);
@@ -55,10 +60,7 @@ export const persistNSync: PersistNSyncType = (stateCreator, options) => (set, g
 	};
 
 	window.addEventListener("storage", e => {
-		if (e.key === name) {
-			const newState = JSON.parse(e.newValue || "{}");
-			set({ ...get(), ...newState });
-		}
+		if (e.key === name) set({ ...get(), ...JSON.parse(e.newValue || "{}") });
 	});
 	return stateCreator(set_, get, store);
 };
@@ -76,22 +78,12 @@ const getKeysToPersistAndSyncMemoised = (() => {
 		const { exclude, include } = options;
 
 		const keysToInlcude = include?.length
-			? keys.filter(key => {
-					for (const patternOrKey of include) {
-						if (typeof patternOrKey === "string" && key === patternOrKey) return true;
-						else if (patternOrKey instanceof RegExp && patternOrKey.test(key)) return true;
-					}
-					return false;
-			  })
+			? keys.filter(key => matchPatternOrKey(key, include))
 			: keys;
 
-		const keysToPersistAndSync = keysToInlcude.filter(key => {
-			for (const patternOrKey of exclude || []) {
-				if (typeof patternOrKey === "string" && key === patternOrKey) return false;
-				else if (patternOrKey instanceof RegExp && patternOrKey.test(key)) return false;
-			}
-			return true;
-		});
+		const keysToPersistAndSync = keysToInlcude.filter(
+			key => !matchPatternOrKey(key, exclude || []),
+		);
 		return keysToPersistAndSync;
 	};
 
@@ -103,6 +95,14 @@ const getKeysToPersistAndSyncMemoised = (() => {
 	};
 })();
 
+function matchPatternOrKey(key: string, patterns: (string | RegExp)[]) {
+	for (const patternOrKey of patterns) {
+		if (typeof patternOrKey === "string" && key === patternOrKey) return true;
+		else if (patternOrKey instanceof RegExp && patternOrKey.test(key)) return true;
+	}
+	return false;
+}
+
 function saveAndSync({ newState, options }: SaveAndSyncProps) {
 	const keysToPersistAndSync = getKeysToPersistAndSyncMemoised(Object.keys(newState), options);