docs(changeset): allow adding regExp to ingore fields

react18-tools · Aug 26, 2023 · e7ca315 · e7ca315
1 parent ae491ec
commit e7ca315
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/.changeset/short-badgers-fry.md b/.changeset/short-badgers-fry.md
@@ -0,0 +1,6 @@
+---
+"nextjs-themes": minor
+"persistnsync": minor
+---
+
+allow adding regExp to ingore fields
diff --git a/packages/nextjs-themes/src/store.ts b/packages/nextjs-themes/src/store.ts
@@ -41,6 +41,6 @@ export const useTheme = create<ThemeStoreType & ThemeStoreActionsType>()(
       setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => set({ ...get(), forcedColorScheme }),
       setColorSchemePref: colorSchemePref => set({ ...get(), colorSchemePref }),
     }),
-    { name: "nextjs-themes" },
+    { name: "nextjs-themes", regExpToIgnore: /forced/ },
   ),
 );
diff --git a/packages/persistnsync/src/index.ts b/packages/persistnsync/src/index.ts
@@ -1,10 +1,10 @@
 import { StateCreator } from "zustand";
 
-export type PersistNSyncOptionsType = { name: string };
+export type PersistNSyncOptionsType = { name: string; regExpToIgnore?: RegExp };
 type PersistNSyncType = <T>(f: StateCreator<T, [], []>, options: PersistNSyncOptionsType) => StateCreator<T, [], []>;
 
 export const persistNSync: PersistNSyncType = (f, options) => (set, get, store) => {
-  const { name } = options;
+  const { name, regExpToIgnore } = options;
 
   /** avoid error during serverside render */
   if (!globalThis.localStorage) return f(set, get, store);
@@ -13,20 +13,28 @@ export const persistNSync: PersistNSyncType = (f, options) => (set, get, store)
 
   const channel = globalThis.BroadcastChannel ? new BroadcastChannel(name) : undefined;
 
-  const set_: typeof set = (...args) => {
+  const set_: typeof set = (p, replace) => {
+    const prevState = get() as { [k: string]: any };
+    // @ts-ignore
+    const newState = (typeof p === "function" ? p(prevState) : p) as { [k: string]: any };
     if (savedState && initRef.init > 0) {
-      set(JSON.parse(savedState));
+      set({ ...newState, ...JSON.parse(savedState) });
       initRef.init--;
     } else {
-      const prevState = get() as { [k: string]: any };
-      set(...args);
-      const currentState = get() as { [k: string]: any };
-      localStorage.setItem(name, JSON.stringify(currentState));
+      // @ts-ignore
+      set(newState);
+      if (regExpToIgnore) {
+        const stateToStore: { [k: string]: any } = {};
+        Object.keys(newState).forEach(k => {
+          if (!regExpToIgnore.test(k)) stateToStore[k] = newState[k];
+        });
+        localStorage.setItem(name, JSON.stringify(stateToStore));
+      } else localStorage.setItem(name, JSON.stringify(newState));
       if (!channel) return;
       const stateUpdates: { [k: string]: any } = {};
-      Object.keys(currentState).forEach(k => {
-        if (currentState[k] !== prevState[k]) {
-          stateUpdates[k] = currentState[k];
+      Object.keys(newState).forEach(k => {
+        if (!regExpToIgnore?.test(k) && newState[k] !== prevState[k]) {
+          stateUpdates[k] = newState[k];
         }
       });
       if (Object.keys(stateUpdates).length) {
@@ -37,7 +45,7 @@ export const persistNSync: PersistNSyncType = (f, options) => (set, get, store)
 
   if (channel) {
     channel.onmessage = e => {
-      set(e.data);
+      set({ ...get(), ...e.data });
     };
   }
   return f(set_, get, store);

diff --git a/packages/zustand-sync/src/index.ts b/packages/zustand-sync/src/index.ts
@@ -1,6 +1,6 @@
 import { StateCreator } from "zustand";
 
-export type SyncTabsOptionsType = { name: string };
+export type SyncTabsOptionsType = { name: string; regExpToIgnore?: RegExp };
 type SyncTabsType = <T>(f: StateCreator<T, [], []>, options: SyncTabsOptionsType) => StateCreator<T, [], []>;
 
 export const syncTabs: SyncTabsType = (f, options) => (set, get, store) => {
@@ -19,7 +19,7 @@ export const syncTabs: SyncTabsType = (f, options) => (set, get, store) => {
     const stateUpdates: { [k: string]: any } = {};
     /** sync only updated state to avoid un-necessary re-renders */
     Object.keys(currentState).forEach(k => {
-      if (currentState[k] !== prevState[k]) {
+      if (!options.regExpToIgnore?.test(k) && currentState[k] !== prevState[k]) {
         stateUpdates[k] = currentState[k];
       }
     });