From 7eefdd234e90fd5af79c23acfbb3ec9dcfa7e304 Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Thu, 22 Feb 2024 20:32:10 +0100
Subject: [PATCH] feat: adding more options to devtools & filtering event send
 to devtools

---
 src/configureStore.ts | 24 ++++++++----------------
 src/global.d.ts       |  4 ++--
 src/types.ts          | 10 +++++++++-
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/configureStore.ts b/src/configureStore.ts
index acfea10..5041cb8 100644
--- a/src/configureStore.ts
+++ b/src/configureStore.ts
@@ -8,13 +8,11 @@ import type { AnyEventCreator, DevTools, Event, Store, StoreOption } from "./typ
  * @param param0 the options used to configure the store
  * @returns A configured solux store
  */
-export const configureStore = <S extends object, C>({
-  name,
-  rootSlice,
-  preloadedState,
-  rootEpic,
-  container,
-}: Partial<StoreOption<S, C>>): Store<S, C> => {
+export const configureStore = <S extends object, C>(
+  options: Partial<StoreOption<S, C>>,
+): Store<S, C> => {
+  const { rootSlice, rootEpic, preloadedState, devtools, container } = options;
+
   if (preloadedState && rootSlice === undefined)
     throw Error(`
       You should not provide a preloaded state without providing a root slice !!
@@ -56,21 +54,15 @@ export const configureStore = <S extends object, C>({
   let devTools: DevTools<S> = undefined;
 
   if (isDevtoolsAvailable) {
-    devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-      name: name ?? "Solux",
-    });
-    devTools.subscribe(({ type, state }) => {
-      if (type === "DISPATCH" && state) {
-        console.log("DevTools requested to change the state to", state);
-      }
-    });
+    devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(devtools?.options && devtools.options);
     devTools.init(state as S);
   }
 
   const dispatch: Store<S, C>["dispatch"] = (event) => {
     if (rootSlice !== undefined) setState(produce((state: S) => rootSlice.handler(state, event)));
     store$.next({ state: state as S, event });
-    if (isDevtoolsAvailable) devTools.send(event, state as S);
+    if (isDevtoolsAvailable && (!devtools.filterEvent || devtools.filterEvent(event)))
+      devTools.send(event, state as S);
     event$.next(event);
   };
 
diff --git a/src/global.d.ts b/src/global.d.ts
index 651be02..6e8acbe 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,9 +1,9 @@
-import { DevTools } from "./types";
+import { DevTools, DevToolsOptions } from "./types";
 
 declare global {
   interface Window {
     __REDUX_DEVTOOLS_EXTENSION__: {
-      connect: <S>(options?: { name: string }) => DevTools<S>;
+      connect: <S>(options?: Partial<DevToolsOptions>) => DevTools<S>;
     };
   }
 }
diff --git a/src/types.ts b/src/types.ts
index 2d88ab8..17fec0b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,17 +51,25 @@ export type EventWithPayload<P = any> = Event & { payload: P };
  */
 export type Handler<S, E extends Event = Event> = (state: S, event: E) => void;
 
+export type DevToolsOptions = {
+  name: string;
+  maxAge: number;
+};
+
 /**
  * Options for `configureStore()`.
  *
  * @template S The type of state held by this store.
  */
 export type StoreOption<S, C = unknown> = {
-  name?: string;
   rootSlice: Slice<S>;
   rootEpic: Epic<S, C>;
   container: C;
   preloadedState: S;
+  devtools: {
+    filterEvent?: (event: Event) => boolean;
+    options: Partial<DevToolsOptions>;
+  };
 };
 
 /**